feat: add ArtDirection component (#294)

* feat: add ArtDirection component

* docs: clarify two image scenario

packages/example/src/data/nav-items.yaml

@@ -28,6 +28,8 @@
       path: /components/Grid
     - title: Accordion
       path: /components/Accordion
+    - title: ArtDirection
+      path: /components/ArtDirection
     - title: DoDontExample
       path: /components/DoDontExample
     - title: Caption

packages/example/src/pages/components/ArtDirection/index.mdx

@@ -0,0 +1,33 @@
+---
+title: Art Direction
+---
+
+<PageDescription>
+
+On the web, [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction) refers to changing the image rendered at different display sizes. The `ArtDirection` component allows you to to provide multiple images achieve this goal.
+
+</PageDescription>
+
+## Example
+
+<ArtDirection>
+
+![Mobile image](./mobile.png)
+![Tablet image](./tablet.png)
+![Desktop image](./desktop.png)
+
+</ArtDirection>
+
+## Code
+
+You can place up to three images inside of the ArtDirection component. The first will be used for mobile, the second for tablet, and the third for desktop. If only two images are provided, the second image will be used for both tablet and desktop.
+
+```markdown path=components/ArtDirection.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/ArtDirection
+<ArtDirection>
+
+![Mobile image](./mobile.png)
+![Tablet image](./tablet.png)
+![Desktop image](./desktop.png)
+
+</ArtDirection>
+```

packages/gatsby-theme-carbon/package.json

@@ -57,6 +57,7 @@
     "react-helmet": "^6.0.0-beta",
     "remark-slug": "^5.1.2",
     "slugify": "^1.3.4",
-    "smooth-scroll": "^16.0.3"
+    "smooth-scroll": "^16.0.3",
+    "use-media": "^1.4.0"
   }
 }

packages/gatsby-theme-carbon/src/components/ArtDirection.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import useMedia from 'use-media';
+import { breakpoints } from '@carbon/elements';
+import PropTypes from 'prop-types';
+
+const ArtDirection = ({ children }) => {
+  const isMobile = useMedia({ maxWidth: breakpoints.md.width });
+  const isTablet = useMedia({ maxWidth: breakpoints.lg.width });
+
+  const childrenArray = React.Children.toArray(children);
+
+  if (isMobile || !childrenArray[1]) {
+    return childrenArray[0];
+  }
+
+  if (isTablet || !childrenArray[2]) {
+    return childrenArray[1];
+  }
+
+  return childrenArray[2];
+};
+
+ArtDirection.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+};
+
+export default ArtDirection;

packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js

@@ -17,6 +17,7 @@ import { AnchorLink, AnchorLinks } from '../AnchorLinks';
 import { Tab, Tabs } from '../Tabs';
 import Link from '../Link';
 import { Accordion, AccordionItem } from '../Accordion';
+import ArtDirection from '../ArtDirection';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -35,6 +36,7 @@ const components = {
   code: Code,
   table: PageTable,
   a: Link,
+  ArtDirection,
   PageDescription,
   Accordion,
   AccordionItem,

packages/gatsby-theme-carbon/src/styles/internal/_page.scss

@@ -88,6 +88,10 @@ img[src*='svg'] {
   margin-bottom: $spacing-06;
 }
 
+.gatsby-resp-image-wrapper {
+  margin-left: 0 !important;
+}
+
 .gatsby-resp-image-background-image {
   background: transparent !important; // Need important to override inline style added by gatsby-remark-images
 }

yarn.lock

@@ -15923,6 +15923,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-media@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
+  integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"