feat(gatsby-plugin-image): Add useArtDirection hook

[ascorbic]

This PR adds a hook to support basic art direction in gatsby-plugin-image. It adds a custom hook, which is passed a "default image" and an array of "art-directed images", which take media queries. It returns an imagedata object that can be passed to the GatsbyImage component. The layout, placeholder, dimensions etc are all taken from the default image, so if you need to change aspect ratio etc, you need to pass a className with media query.

Usage example:

import { GatsbyImage, getImage, useArtDirection } from "gatsby-plugin-image"

import "./style.css"

export function MyImage({ data }) {

  const images = useArtDirection(getImage(data.largeImage), [
    {
      media: "(max-width: 1024px)",
      image: getImage(data.smallImage),
    },
  ])

  return  <GatsbyImage className="art-directed" image={images} />
}

Include something like this, with a matching media query:

@media screen and (max-width: 1024px) {
  .art-directed {
    width: 400px;
    height: 300px;
  }
}

Screen.Recording.2021-01-27.at.16.40.13.mov

[laurieontech]

Main question is whether you can conditionally assign classes? Looks like it's one class and then you alter it via media query.

We should add some docs to this. But overall it looks reasonable to me.