Skip to content

Add default avatar, clean up some design stories #1393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 12, 2021
Merged

Add default avatar, clean up some design stories #1393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46f75d2
Add default avatar, cleanup some design stories
tylersticka Jul 12, 2021
c24f76d
Missing newline
tylersticka Jul 12, 2021
167b156
Add changeset
tylersticka Jul 12, 2021
52c0232
Remove inaccurate note
tylersticka Jul 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/quick-pears-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@cloudfour/patterns': minor
---

Add default avatar asset
6 changes: 6 additions & 0 deletions src/assets/illustrations/avatar-default.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 6 additions & 8 deletions src/design/brand.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
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';
Copy link
Member Author

@tylersticka tylersticka Jul 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than maintain a demo file just to display the image, I thought it made more sense to import the image source and display it via an img element in the story.


<Meta title="Design/Brand" />

# Logo
# Brand

Cloud Four logo in SVG format. The logo fill color can be modified via the CSS
`color` property.
Comment on lines -11 to -12
Copy link
Member Author

@tylersticka tylersticka Jul 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this text because it isn't accurate. It describes behavior of our Icon component, but there's nothing about the SVG asset on its own that inherits the color property.

These elements are used to signify Cloud Four projects.

## Logo

<Canvas>
<Story name="Logo">{brandLogo}</Story>
<Story name="Logo">{`<img src="${logoSrc}" alt="Cloud Four">`}</Story>
</Canvas>
5 changes: 3 additions & 2 deletions src/design/demo/fallback_images.twig → src/design/demo/fallback-feature-images.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

{% embed '@cloudfour/objects/deck/deck.twig' %}
{% embed '@cloudfour/objects/deck/deck.twig' with {
class: 'o-deck--2-column@l'
Copy link
Member Author

@tylersticka tylersticka Jul 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class was previously specified via the story in args, but I thought that was confusing. Moving it here means there's only one file to edit for this demo.

} %}
{% block content %}
<figure>
{% include '@cloudfour/assets/illustrations/fallback/fallback_paintbrush.svg.twig' %}
Expand Down
1 change: 0 additions & 1 deletion src/design/demo/logo.twig
View file
Open in desktop

This file was deleted.

24 changes: 15 additions & 9 deletions ...llback-images/fallback-images.stories.mdx → src/design/illustrations.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Meta title="Design/Fallback Images" />
<Meta title="Design/Illustrations" />

# 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.

Expand All @@ -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.

<Canvas>
<Story name="Fallback Images" args={{ class: 'o-deck--2-column@l' }}>
{fallbackImage}
</Story>
<Story name="Feature images">{() => fallbackFeatureImages()}</Story>
</Canvas>

## 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).

<Canvas>
<Story name="Default avatar">{`<img src="${avatarDefaultSrc}" alt="Default avatar">`}</Story>
</Canvas>