From 46f75d2cae19aebefb43f945e63dfcec8371d963 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 12 Jul 2021 11:11:40 -0700 Subject: [PATCH 1/4] Add default avatar, cleanup some design stories --- src/assets/illustrations/avatar-default.svg | 6 +++++ src/design/brand.stories.mdx | 16 ++++++------- ...ages.twig => fallback-feature-images.twig} | 5 ++-- src/design/demo/logo.twig | 1 - ....stories.mdx => illustrations.stories.mdx} | 24 ++++++++++++------- 5 files changed, 32 insertions(+), 20 deletions(-) create mode 100644 src/assets/illustrations/avatar-default.svg rename src/design/demo/{fallback_images.twig => fallback-feature-images.twig} (90%) delete mode 100644 src/design/demo/logo.twig rename src/design/{fallback-images/fallback-images.stories.mdx => illustrations.stories.mdx} (65%) diff --git a/src/assets/illustrations/avatar-default.svg b/src/assets/illustrations/avatar-default.svg new file mode 100644 index 000000000..78297ed13 --- /dev/null +++ b/src/assets/illustrations/avatar-default.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/design/brand.stories.mdx b/src/design/brand.stories.mdx index 247d72334..da74ab563 100644 --- a/src/design/brand.stories.mdx +++ b/src/design/brand.stories.mdx @@ -1,16 +1,16 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; -// Importing a `.svg` directly, results in a failed build and importing -// the `.svg.twig` file causes linting errors (since they are not tracked). -// Therefore, we must track a twig file to satisfy CI. -import brandLogo from './demo/logo.twig'; +import logoSrc from '../assets/brand/logo.svg'; -# Logo +# Brand -Cloud Four logo in SVG format. The logo fill color can be modified via the CSS -`color` property. +These elements are used to signify Cloud Four projects. + +## Logo + +Cloud Four logo in SVG format. The logo fill color can be modified via the CSS `color` property. - {brandLogo} + {`Cloud Four`} diff --git a/src/design/demo/fallback_images.twig b/src/design/demo/fallback-feature-images.twig similarity index 90% rename from src/design/demo/fallback_images.twig rename to src/design/demo/fallback-feature-images.twig index 6106a5393..b8dfcea1c 100644 --- a/src/design/demo/fallback_images.twig +++ b/src/design/demo/fallback-feature-images.twig @@ -1,5 +1,6 @@ - -{% embed '@cloudfour/objects/deck/deck.twig' %} +{% embed '@cloudfour/objects/deck/deck.twig' with { + class: 'o-deck--2-column@l' +} %} {% block content %}
{% include '@cloudfour/assets/illustrations/fallback/fallback_paintbrush.svg.twig' %} diff --git a/src/design/demo/logo.twig b/src/design/demo/logo.twig deleted file mode 100644 index 4d8df22cb..000000000 --- a/src/design/demo/logo.twig +++ /dev/null @@ -1 +0,0 @@ -{% include '@cloudfour/assets/brand/logo.svg.twig' %} diff --git a/src/design/fallback-images/fallback-images.stories.mdx b/src/design/illustrations.stories.mdx similarity index 65% rename from src/design/fallback-images/fallback-images.stories.mdx rename to src/design/illustrations.stories.mdx index a807cc25a..419f9cb76 100644 --- a/src/design/fallback-images/fallback-images.stories.mdx +++ b/src/design/illustrations.stories.mdx @@ -1,12 +1,12 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; -// Importing a `.svg` directly, results in a failed build and importing -// the `.svg.twig` file causes linting errors (since they are not tracked). -// Therefore, we must track a twig file to satisfy CI. -import fallbackImage from '../demo/fallback_images.twig'; +import fallbackFeatureImages from './demo/fallback-feature-images.twig'; +import avatarDefaultSrc from '../assets/illustrations/avatar-default.svg'; - + -# Fallback Images +# Illustrations + +## Fallback feature images Article summaries appear more interesting and cohesive when they have an image, but sometimes an article does not have an obvious image, and not every author is an illustrator. These fallback images can be used in place of an original illustration. @@ -17,7 +17,13 @@ This design also leaves room to add more categories if desired. Ideally, the ico The captions below each fallback image aren't set in stone, more so just ideas that these designs could be used for. - - {fallbackImage} - + {() => fallbackFeatureImages()} + + +## 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). + + + {`Default avatar`} From c24f76d58ed83154681fcd4cdeb9882f6b9aaca8 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 12 Jul 2021 11:14:18 -0700 Subject: [PATCH 2/4] Missing newline --- src/assets/illustrations/avatar-default.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/illustrations/avatar-default.svg b/src/assets/illustrations/avatar-default.svg index 78297ed13..5a6ccd448 100644 --- a/src/assets/illustrations/avatar-default.svg +++ b/src/assets/illustrations/avatar-default.svg @@ -3,4 +3,4 @@ - \ No newline at end of file + From 167b156d9121bc05f27c1b1f2497449a1d73c215 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 12 Jul 2021 11:15:46 -0700 Subject: [PATCH 3/4] Add changeset --- .changeset/quick-pears-fix.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quick-pears-fix.md diff --git a/.changeset/quick-pears-fix.md b/.changeset/quick-pears-fix.md new file mode 100644 index 000000000..313050d98 --- /dev/null +++ b/.changeset/quick-pears-fix.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add default avatar asset From 52c023270987d22bac225712221b64139cfca939 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 12 Jul 2021 11:17:40 -0700 Subject: [PATCH 4/4] Remove inaccurate note --- src/design/brand.stories.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/design/brand.stories.mdx b/src/design/brand.stories.mdx index da74ab563..1603267be 100644 --- a/src/design/brand.stories.mdx +++ b/src/design/brand.stories.mdx @@ -9,8 +9,6 @@ These elements are used to signify Cloud Four projects. ## Logo -Cloud Four logo in SVG format. The logo fill color can be modified via the CSS `color` property. - {`Cloud Four`}