From 78171d5e2ebc1796908c7726dc1b21242f53c169 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Thu, 1 Aug 2019 12:16:28 -0500 Subject: [PATCH] feat: add ArtDirection component (#294) * feat: add ArtDirection component * docs: clarify two image scenario --- packages/example/src/data/nav-items.yaml | 2 ++ .../pages/components/ArtDirection/desktop.png | Bin 0 -> 18976 bytes .../pages/components/ArtDirection/index.mdx | 33 ++++++++++++++++++ .../pages/components/ArtDirection/mobile.png | Bin 0 -> 15626 bytes .../pages/components/ArtDirection/tablet.png | Bin 0 -> 13947 bytes packages/gatsby-theme-carbon/package.json | 3 +- .../src/components/ArtDirection.js | 27 ++++++++++++++ .../MDXProvider/defaultComponents.js | 2 ++ .../src/styles/internal/_page.scss | 4 +++ yarn.lock | 5 +++ 10 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 packages/example/src/pages/components/ArtDirection/desktop.png create mode 100644 packages/example/src/pages/components/ArtDirection/index.mdx create mode 100644 packages/example/src/pages/components/ArtDirection/mobile.png create mode 100644 packages/example/src/pages/components/ArtDirection/tablet.png create mode 100644 packages/gatsby-theme-carbon/src/components/ArtDirection.js diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index 4438a5212..3d7b4ab24 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/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 diff --git a/packages/example/src/pages/components/ArtDirection/desktop.png b/packages/example/src/pages/components/ArtDirection/desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..eb3bd153aaf110dd6ef30e55665017da2bbfae03 GIT binary patch literal 18976 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 + +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. + + + +## Example + + + +![Mobile image](./mobile.png) +![Tablet image](./tablet.png) +![Desktop image](./desktop.png) + + + +## 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 + + +![Mobile image](./mobile.png) +![Tablet image](./tablet.png) +![Desktop image](./desktop.png) + + +``` diff --git a/packages/example/src/pages/components/ArtDirection/mobile.png b/packages/example/src/pages/components/ArtDirection/mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..95b15b749888160efb9b055899bccd5ab44d6da4 GIT binary patch literal 15626 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 Y(A>Dv^M#vk8^nC=vhhC!7jHlMA4enL9{>OV literal 0 HcmV?d00001 diff --git a/packages/gatsby-theme-carbon/package.json b/packages/gatsby-theme-carbon/package.json index 3f5c294df..8fe9883a1 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/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" } } diff --git a/packages/gatsby-theme-carbon/src/components/ArtDirection.js b/packages/gatsby-theme-carbon/src/components/ArtDirection.js new file mode 100644 index 000000000..311b225da --- /dev/null +++ b/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; diff --git a/packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js b/packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js index 8314c281a..1618d2559 100644 --- a/packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js +++ b/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, diff --git a/packages/gatsby-theme-carbon/src/styles/internal/_page.scss b/packages/gatsby-theme-carbon/src/styles/internal/_page.scss index 62461a304..874b1a3b1 100644 --- a/packages/gatsby-theme-carbon/src/styles/internal/_page.scss +++ b/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 } diff --git a/yarn.lock b/yarn.lock index 87684ad29..fdac71ebe 100644 --- a/yarn.lock +++ b/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"