From 6dd9a587192ca68d71e82678e2232ad6c9d38b58 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 7 Jul 2021 16:27:12 -0700 Subject: [PATCH 1/7] Basic WIP badge design --- src/components/badge/badge.scss | 39 +++++++++++++++++++++ src/components/badge/badge.stories.mdx | 10 ++++++ src/components/badge/badge.twig | 48 ++++++++++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 src/components/badge/badge.scss create mode 100644 src/components/badge/badge.stories.mdx create mode 100644 src/components/badge/badge.twig diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss new file mode 100644 index 000000000..1c074e916 --- /dev/null +++ b/src/components/badge/badge.scss @@ -0,0 +1,39 @@ +@use "../../compiled/tokens/scss/color"; +@use "../../compiled/tokens/scss/font-weight"; +@use "../../compiled/tokens/scss/line-height"; +@use "../../compiled/tokens/scss/size"; +@use '../../mixins/ms'; +@use '../../mixins/theme'; + +.c-badge { + background: var(--theme-color-background-secondary); + border-radius: size.$border-radius-medium; + color: var(--theme-color-text-muted); + display: inline-flex; + font-size: ms.step(-1); + font-weight: font-weight.$medium; + height: ms.step(2); + line-height: line-height.$tighter; + margin-left: 1ch; + margin-top: (ms.step(2) / -8); + vertical-align: middle; +} + +.c-badge__content { + align-self: center; + + &:first-child { + padding-left: size.$padding-cell-horizontal; + } + + &:last-child { + padding-right: size.$padding-cell-horizontal; + } +} + +.c-badge__extra { + align-items: center; + display: flex; + justify-content: center; + min-width: ms.step(2); +} diff --git a/src/components/badge/badge.stories.mdx b/src/components/badge/badge.stories.mdx new file mode 100644 index 000000000..1fce39b1f --- /dev/null +++ b/src/components/badge/badge.stories.mdx @@ -0,0 +1,10 @@ +import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; +import template from './badge.twig'; + + + +# Badge + + + {template} + diff --git a/src/components/badge/badge.twig b/src/components/badge/badge.twig new file mode 100644 index 000000000..3026449a3 --- /dev/null +++ b/src/components/badge/badge.twig @@ -0,0 +1,48 @@ +

+ Danielle Romo +
+
+ {# {% include '@cloudfour/components/icon/icon.twig' with { + name: 'bell', + } only %} #} + ✏️ +
+
+ {{label|default('Author')}} +
+
+

+ +

+ Paul Hebert +
+
+ {# {% include '@cloudfour/components/icon/icon.twig' with { + name: 'bell', + } only %} #} + {% include '@cloudfour/assets/brand/logo.svg.twig' with { + class: 'c-icon', + } only %} +
+
+ {{label|default('Team')}} +
+
+

+ +

+ Sara Lohr +
+
+ {# {% include '@cloudfour/components/icon/icon.twig' with { + name: 'bell', + } only %} #} + {% include '@cloudfour/assets/brand/logo.svg.twig' with { + class: 'c-icon', + } only %} +
+
+ {{label|default('Alumni')}} +
+
+

From 14109d7838b447551d31d65f753ed2b4e8357d7c Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 9 Jul 2021 09:42:14 -0700 Subject: [PATCH 2/7] Adjust spacing --- src/components/badge/badge.scss | 9 +++--- src/components/badge/badge.twig | 54 +++++---------------------------- 2 files changed, 13 insertions(+), 50 deletions(-) diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index 1c074e916..a8139e491 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -4,6 +4,7 @@ @use "../../compiled/tokens/scss/size"; @use '../../mixins/ms'; @use '../../mixins/theme'; +@use 'sass:math'; .c-badge { background: var(--theme-color-background-secondary); @@ -14,20 +15,20 @@ font-weight: font-weight.$medium; height: ms.step(2); line-height: line-height.$tighter; - margin-left: 1ch; - margin-top: (ms.step(2) / -8); + padding: 0 math.div(size.$padding-cell-horizontal, 2); vertical-align: middle; + white-space: nowrap; } .c-badge__content { align-self: center; &:first-child { - padding-left: size.$padding-cell-horizontal; + padding-left: math.div(size.$padding-cell-horizontal, 2); } &:last-child { - padding-right: size.$padding-cell-horizontal; + padding-right: math.div(size.$padding-cell-horizontal, 2); } } diff --git a/src/components/badge/badge.twig b/src/components/badge/badge.twig index 3026449a3..07c408f20 100644 --- a/src/components/badge/badge.twig +++ b/src/components/badge/badge.twig @@ -1,48 +1,10 @@ -

- Danielle Romo -
-
- {# {% include '@cloudfour/components/icon/icon.twig' with { - name: 'bell', - } only %} #} - ✏️ -
-
- {{label|default('Author')}} -
+
+
+ {% include '@cloudfour/assets/brand/logo.svg.twig' with { + class: 'c-icon', + } only %}
-

- -

- Paul Hebert -
-
- {# {% include '@cloudfour/components/icon/icon.twig' with { - name: 'bell', - } only %} #} - {% include '@cloudfour/assets/brand/logo.svg.twig' with { - class: 'c-icon', - } only %} -
-
- {{label|default('Team')}} -
+
+ {{label|default('Team')}}
-

- -

- Sara Lohr -
-
- {# {% include '@cloudfour/components/icon/icon.twig' with { - name: 'bell', - } only %} #} - {% include '@cloudfour/assets/brand/logo.svg.twig' with { - class: 'c-icon', - } only %} -
-
- {{label|default('Alumni')}} -
-
-

+ From 7c795a6f89e3262461d9d3c45774bb4bf5d2f01d Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 9 Jul 2021 15:14:27 -0700 Subject: [PATCH 3/7] Add pencil icon --- src/assets/icons/pencil.svg | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/assets/icons/pencil.svg diff --git a/src/assets/icons/pencil.svg b/src/assets/icons/pencil.svg new file mode 100644 index 000000000..c15ff1cf3 --- /dev/null +++ b/src/assets/icons/pencil.svg @@ -0,0 +1,7 @@ + + + + + + From 928c8a11645f85bf4b2af8ad5f23df863b77f57a Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 9 Jul 2021 15:14:45 -0700 Subject: [PATCH 4/7] Integrate badge into comments --- src/components/badge/badge.stories.mdx | 2 +- src/components/badge/badge.twig | 32 +++++++++++++++------- src/components/comment/comment.stories.mdx | 19 +++++++++++-- src/components/comment/comment.twig | 27 ++++++++++++++++++ 4 files changed, 67 insertions(+), 13 deletions(-) diff --git a/src/components/badge/badge.stories.mdx b/src/components/badge/badge.stories.mdx index 1fce39b1f..cac5c1272 100644 --- a/src/components/badge/badge.stories.mdx +++ b/src/components/badge/badge.stories.mdx @@ -6,5 +6,5 @@ import template from './badge.twig'; # Badge - {template} + {template} diff --git a/src/components/badge/badge.twig b/src/components/badge/badge.twig index 07c408f20..3201bc9e5 100644 --- a/src/components/badge/badge.twig +++ b/src/components/badge/badge.twig @@ -1,10 +1,22 @@ -
-
- {% include '@cloudfour/assets/brand/logo.svg.twig' with { - class: 'c-icon', - } only %} -
-
- {{label|default('Team')}} -
-
+{% set _extra_content %} + {% block extra %} + {% if icon %} + {% include '@cloudfour/components/icon/icon.twig' with { + name: icon + } only %} + {% endif %} + {% endblock %} +{% endset %} + + + {% if _extra_content|trim %} + + {{_extra_content}} + + {% endif %} + + {% block content %} + {{label|default('Label')}} + {% endblock %} + + diff --git a/src/components/comment/comment.stories.mdx b/src/components/comment/comment.stories.mdx index ed148d160..6d9c599f4 100644 --- a/src/components/comment/comment.stories.mdx +++ b/src/components/comment/comment.stories.mdx @@ -12,9 +12,8 @@ Displays a single comment in a comment thread, optionally with replies. Multiple This component is still a work in progress. The following features are still in development: -- Indicating when a comment's author is a Cloud Four team member. - Integrating the comment reply form. -- Adding blocks to the template to allow for more customization. +- Finalizing this pattern's blocks and properties for theme integration. ## Single @@ -32,6 +31,22 @@ This information may be passed to the component as a `comment` object matching t {template({ comment: makeComment() })} +## Role badges + +It is helpful for context within a discussion to know when a commentor is the original post author or a Cloud Four team member. The mechanics of this feature are still in development, but these stories show how these roles should appear using [the Badge component](/docs/components-badge--basic). + + + + {template({ comment: makeComment(), demo_post_author: true })} + + + + + + {template({ comment: makeComment(), demo_cloud_four_member: true })} + + + ## Unapproved If `comment.approved` is not `true`, an [Alert](/docs/components-alert--basic) will indicate that the comment is not yet approved. diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig index cde6507a3..7fb013458 100644 --- a/src/components/comment/comment.twig +++ b/src/components/comment/comment.twig @@ -4,6 +4,33 @@
{{comment.author.name}} + {# + TODO: Replace `demo_post_author` and `demo_cloud_four_member` with + more meaningful blocks or properties once we have a better idea of how + we'll integrate role badging based on actual comment data. + #} + {% if demo_post_author %} + (Article + {% embed '@cloudfour/components/badge/badge.twig' with { + label: 'Author', + icon: 'pencil', + } only %} + {% endembed %} + ) + {% elseif demo_cloud_four_member %} + (Cloud Four + {% embed '@cloudfour/components/badge/badge.twig' with { + label: 'Team' + } only %} + {% block extra %} + {% include '@cloudfour/assets/brand/logo.svg.twig' with { + class: 'c-icon', + role: 'presentation', + } only %} + {% endblock %} + {% endembed %} + Member) + {% endif %} {% if comment.is_child %}replied{% else %}said{% endif %}: From 99d0bfa236e87fd331e3abafc989b89c1f2504d6 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 9 Jul 2021 15:37:11 -0700 Subject: [PATCH 5/7] Add comments to badge --- src/components/badge/badge.scss | 12 +++++--- src/components/badge/badge.stories.mdx | 40 ++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index a8139e491..f7781d5b6 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -1,28 +1,31 @@ -@use "../../compiled/tokens/scss/color"; @use "../../compiled/tokens/scss/font-weight"; @use "../../compiled/tokens/scss/line-height"; @use "../../compiled/tokens/scss/size"; @use '../../mixins/ms'; -@use '../../mixins/theme'; @use 'sass:math'; .c-badge { + align-items: center; background: var(--theme-color-background-secondary); border-radius: size.$border-radius-medium; color: var(--theme-color-text-muted); display: inline-flex; font-size: ms.step(-1); font-weight: font-weight.$medium; + // Because the text in a badge does not wrap, we can avoid icons accidentally + // increasing the height as often by setting this here instead of relying on + // vertical padding. height: ms.step(2); line-height: line-height.$tighter; + // We only apply half padding because the padding feels too tight around icons + // but not around the label content. We'll apply the other half of padding on + // the content element itself. padding: 0 math.div(size.$padding-cell-horizontal, 2); vertical-align: middle; white-space: nowrap; } .c-badge__content { - align-self: center; - &:first-child { padding-left: math.div(size.$padding-cell-horizontal, 2); } @@ -35,6 +38,7 @@ .c-badge__extra { align-items: center; display: flex; + flex: none; justify-content: center; min-width: ms.step(2); } diff --git a/src/components/badge/badge.stories.mdx b/src/components/badge/badge.stories.mdx index cac5c1272..86ada3e5f 100644 --- a/src/components/badge/badge.stories.mdx +++ b/src/components/badge/badge.stories.mdx @@ -1,10 +1,46 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import template from './badge.twig'; - + # Badge +Badges help provide just a smidge more context to repetitive or serialized content. For example, a badge can help the reader identify when [a comment on an article is by the author of that article](/docs/components-comment--role-author#role-badges). + + + + {(args) => template(args)} + + + +## With icon + - {template} + + {(args) => template(args)} + + +## Template Properties + +- `class` (string) +- `icon` (string): The name of one of [our icons](/docs/design-icons--page) to display. +- `message` (string, default `'Label'`) + +## Template Blocks + +- `content`: The main label content, typically the value of `message`. +- `extra`: A visual extra preceding the content, typically populated by an icon if `icon` is set. From 24dcb6978e4b0162afc77eb759b3ba0fab7b481d Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 9 Jul 2021 15:38:09 -0700 Subject: [PATCH 6/7] Add changeset --- .changeset/kind-beans-fry.md | 5 +++++ .changeset/loud-ligers-remember.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/kind-beans-fry.md create mode 100644 .changeset/loud-ligers-remember.md diff --git a/.changeset/kind-beans-fry.md b/.changeset/kind-beans-fry.md new file mode 100644 index 000000000..9f520b973 --- /dev/null +++ b/.changeset/kind-beans-fry.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add 'pencil' icon diff --git a/.changeset/loud-ligers-remember.md b/.changeset/loud-ligers-remember.md new file mode 100644 index 000000000..30296f0b7 --- /dev/null +++ b/.changeset/loud-ligers-remember.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add Badge component From 9ec9af2844adfff4645d56ac0d1ccb7742ea0818 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 12 Jul 2021 09:44:12 -0700 Subject: [PATCH 7/7] Hide decorative icons from screen readers --- src/components/badge/badge.twig | 3 ++- src/components/comment/comment.twig | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/badge/badge.twig b/src/components/badge/badge.twig index 3201bc9e5..2ea053bf2 100644 --- a/src/components/badge/badge.twig +++ b/src/components/badge/badge.twig @@ -2,7 +2,8 @@ {% block extra %} {% if icon %} {% include '@cloudfour/components/icon/icon.twig' with { - name: icon + name: icon, + aria_hidden: 'true', } only %} {% endif %} {% endblock %} diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig index 7fb013458..16620f4c7 100644 --- a/src/components/comment/comment.twig +++ b/src/components/comment/comment.twig @@ -25,7 +25,7 @@ {% block extra %} {% include '@cloudfour/assets/brand/logo.svg.twig' with { class: 'c-icon', - role: 'presentation', + aria_hidden: 'true', } only %} {% endblock %} {% endembed %}