From 537ff0d17f9590ecf813e21622456c619c4f4b02 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 7 Sep 2021 16:47:01 -0700 Subject: [PATCH 1/6] Add responsive image svg to stories --- src/assets/illustrations/test.svg | 72 ++++++++++++++++++++++++++++ src/design/illustrations.stories.mdx | 19 ++++++++ 2 files changed, 91 insertions(+) create mode 100644 src/assets/illustrations/test.svg diff --git a/src/assets/illustrations/test.svg b/src/assets/illustrations/test.svg new file mode 100644 index 000000000..b41bb6d97 --- /dev/null +++ b/src/assets/illustrations/test.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/design/illustrations.stories.mdx b/src/design/illustrations.stories.mdx index 8a14378cb..89a4d157b 100644 --- a/src/design/illustrations.stories.mdx +++ b/src/design/illustrations.stories.mdx @@ -1,6 +1,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks'; import { extname, basename } from 'path'; import imageDeck from './demo/image-deck.twig'; +import responsiveImage from '../assets/illustrations/test.svg'; import avatarDefaultSrc from '../assets/illustrations/avatar-default.svg'; const featureImageDir = require.context( '../assets/illustrations/feature', @@ -31,6 +32,24 @@ Images may represent more than one topic. For example, the `paintbrush` illustra {() => imageDeck({ images: featureImageData })} +## Responsive fallback image + +An SVG that's used as a fallback image by our service worker when an image request fails. + +What's unique about this image is its responsiveness. If you scale the size of its container, you'll notice that portions of the image repeat or fix to the side rather than squashing or stretching. + +We should craft a new image that's more consistent with those feature images but fulfills the purpose of the service worker fallback. + + + {` +
+ Responsive fallback image + Responsive fallback image + Responsive fallback image +
+ `} + + ## Default avatar This asset may be used in place of a specific user avatar. To differentiate multiple fallback avatars, consider swapping its fill colors for [others in our palette](/docs/design-colors--page). From c5a2fdd044a55d72ccf039d10c686d67e7a5916f Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Wed, 8 Sep 2021 16:05:19 -0700 Subject: [PATCH 2/6] Remove clouds, change grid layout and storybook layout --- src/assets/illustrations/test.svg | 81 ++++++++++------------ src/design/demo/responsive-image-deck.twig | 12 ++++ src/design/illustrations.stories.mdx | 20 +++--- 3 files changed, 58 insertions(+), 55 deletions(-) create mode 100644 src/design/demo/responsive-image-deck.twig diff --git a/src/assets/illustrations/test.svg b/src/assets/illustrations/test.svg index b41bb6d97..49496f4dc 100644 --- a/src/assets/illustrations/test.svg +++ b/src/assets/illustrations/test.svg @@ -1,72 +1,65 @@ - + + + + + + + - - + + - - - - - - - - + + + x + + + + + - - - - - - + + + - - + + - + - - - - - - - - - - - + + + + + + + + + + + - + - + - + - - - - - - diff --git a/src/design/demo/responsive-image-deck.twig b/src/design/demo/responsive-image-deck.twig new file mode 100644 index 000000000..d710b714c --- /dev/null +++ b/src/design/demo/responsive-image-deck.twig @@ -0,0 +1,12 @@ +{% embed '@cloudfour/objects/deck/deck.twig' with { + class: 'o-deck--3-column@l' +} %} + {% block content %} + {% for ratio in ratios %} +
+
+
{{ratio}}
+ + {% endfor %} + {% endblock %} +{% endembed %} diff --git a/src/design/illustrations.stories.mdx b/src/design/illustrations.stories.mdx index 89a4d157b..38eb09ac0 100644 --- a/src/design/illustrations.stories.mdx +++ b/src/design/illustrations.stories.mdx @@ -1,6 +1,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks'; import { extname, basename } from 'path'; import imageDeck from './demo/image-deck.twig'; +import responsiveImageDeck from './demo/responsive-image-deck.twig'; import responsiveImage from '../assets/illustrations/test.svg'; import avatarDefaultSrc from '../assets/illustrations/avatar-default.svg'; const featureImageDir = require.context( @@ -34,20 +35,17 @@ Images may represent more than one topic. For example, the `paintbrush` illustra ## Responsive fallback image -An SVG that's used as a fallback image by our service worker when an image request fails. +An SVG that's used as a fallback image when an image request fails for whatever reason. -What's unique about this image is its responsiveness. If you scale the size of its container, you'll notice that portions of the image repeat or fix to the side rather than squashing or stretching. - -We should craft a new image that's more consistent with those feature images but fulfills the purpose of the service worker fallback. +What's unique about this image is its responsiveness. Depending on the size of the broken image, portions of the image repeat or fix to the side to fit the aspect ratio of the image rather than squashing or stretching. - {` -
- Responsive fallback image - Responsive fallback image - Responsive fallback image -
- `} + {() => + responsiveImageDeck({ + ratios: ['1 / 1', '16 / 9', '9 / 16'], + source: responsiveImage, + }) + } ## Default avatar From e366873cbd25a7cdafefee36db1d5069a50967cc Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Wed, 8 Sep 2021 16:23:27 -0700 Subject: [PATCH 3/6] Add changeset --- .changeset/stale-items-pull.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stale-items-pull.md diff --git a/.changeset/stale-items-pull.md b/.changeset/stale-items-pull.md new file mode 100644 index 000000000..7df1ffea4 --- /dev/null +++ b/.changeset/stale-items-pull.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add responsive fallback image From 33f67b6e7dc9ecdeff9eb7386eddd8b4f4a9651c Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Thu, 9 Sep 2021 09:43:18 -0700 Subject: [PATCH 4/6] Change title and file names --- .../illustrations/{test.svg => responsive-fallback.svg} | 0 src/design/illustrations.stories.mdx | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/assets/illustrations/{test.svg => responsive-fallback.svg} (100%) diff --git a/src/assets/illustrations/test.svg b/src/assets/illustrations/responsive-fallback.svg similarity index 100% rename from src/assets/illustrations/test.svg rename to src/assets/illustrations/responsive-fallback.svg diff --git a/src/design/illustrations.stories.mdx b/src/design/illustrations.stories.mdx index 38eb09ac0..b44c2bbe6 100644 --- a/src/design/illustrations.stories.mdx +++ b/src/design/illustrations.stories.mdx @@ -2,7 +2,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks'; import { extname, basename } from 'path'; import imageDeck from './demo/image-deck.twig'; import responsiveImageDeck from './demo/responsive-image-deck.twig'; -import responsiveImage from '../assets/illustrations/test.svg'; +import responsiveImage from '../assets/illustrations/responsive-fallback.svg'; import avatarDefaultSrc from '../assets/illustrations/avatar-default.svg'; const featureImageDir = require.context( '../assets/illustrations/feature', @@ -39,7 +39,7 @@ An SVG that's used as a fallback image when an image request fails for whatever What's unique about this image is its responsiveness. Depending on the size of the broken image, portions of the image repeat or fix to the side to fit the aspect ratio of the image rather than squashing or stretching. - + {() => responsiveImageDeck({ ratios: ['1 / 1', '16 / 9', '9 / 16'], From 51434b9e77a3437a6a6795e7f3bef28126036dfb Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Thu, 9 Sep 2021 14:24:48 -0700 Subject: [PATCH 5/6] Update src/assets/illustrations/responsive-fallback.svg Co-authored-by: Paul Hebert --- src/assets/illustrations/responsive-fallback.svg | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/illustrations/responsive-fallback.svg b/src/assets/illustrations/responsive-fallback.svg index 49496f4dc..03d276add 100644 --- a/src/assets/illustrations/responsive-fallback.svg +++ b/src/assets/illustrations/responsive-fallback.svg @@ -22,7 +22,6 @@ - From 1580ae351c60979c4e0615b3684a0a49b86f44e3 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Thu, 9 Sep 2021 14:24:56 -0700 Subject: [PATCH 6/6] Update src/assets/illustrations/responsive-fallback.svg Co-authored-by: Paul Hebert --- src/assets/illustrations/responsive-fallback.svg | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/illustrations/responsive-fallback.svg b/src/assets/illustrations/responsive-fallback.svg index 03d276add..a9293be29 100644 --- a/src/assets/illustrations/responsive-fallback.svg +++ b/src/assets/illustrations/responsive-fallback.svg @@ -60,5 +60,4 @@ -