From c237217f38a430596529cece1abf3b694dd46c92 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Fri, 23 Jul 2021 09:23:39 -0700 Subject: [PATCH 1/5] Switch Comment Badging to a Slot This PR makes a change to how author/member badges can be applied to comments. Instead of using properties for this, the template now accepts an `author_meta` slot. This allows the consuming app to use whatever logic makes sense to determine what badge to apply. --- src/components/comment/comment.stories.mdx | 40 +++++++++++----------- src/components/comment/comment.twig | 29 ++-------------- src/components/comment/demo/author.twig | 13 +++++++ src/components/comment/demo/member.twig | 20 +++++++++++ 4 files changed, 55 insertions(+), 47 deletions(-) create mode 100644 src/components/comment/demo/author.twig create mode 100644 src/components/comment/demo/member.twig diff --git a/src/components/comment/comment.stories.mdx b/src/components/comment/comment.stories.mdx index bd686c3bb..c900b98b8 100644 --- a/src/components/comment/comment.stories.mdx +++ b/src/components/comment/comment.stories.mdx @@ -5,6 +5,18 @@ import { initCommentReplyForm } from './comment.ts'; import { createElasticTextArea } from '../input/elastic-textarea.ts'; import { useEffect } from '@storybook/client-api'; import { makeTwigInclude } from '../../make-twig-include'; +import authorDemo from './demo/author.twig'; +import memberDemo from './demo/member.twig'; +// See: https://github.com/webpack-contrib/raw-loader#examples +// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are +// okay with the following Webpack-specific raw loader syntax. It's better to leave +// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g. +// within a Storybook docs page and not within an actual component). +// This can be revisited in the future if Storybook no longer relies on Webpack. +// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax +import authorDemoSource from '!!raw-loader!./demo/author.twig'; +// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax +import memberDemoSource from '!!raw-loader!./demo/member.twig'; const tyler = { name: 'Tyler Sticka', link: 'https://cloudfour.com/is/tyler', @@ -42,12 +54,6 @@ const initCommentReplyForms = () => { Displays a single comment in a comment thread, optionally with replies. Multiple comments can be displayed within [a Rhythm layout object](/docs/objects-rhythm--default-story). -## Status - -This component is still a work in progress. The following features are still in development: - -- Finalizing this pattern's blocks and properties for theme integration. - ## Single At minimum, a single comment consists of: @@ -85,27 +91,24 @@ This information may be passed to the component as a `comment` object matching t -## Role badges +## Author Meta Info + +You can us the `author_meta` block to display author meta information. -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). +It is helpful for context within a discussion to know when a commentor is the original post author or a Cloud Four team member. This can be achieved by passing in [a Badge component](/docs/components-badge--basic) to the `author_meta` block. {(args) => { useEffect(() => initCommentReplyForms()); - return template({ + return authorDemo({ comment: makeComment(), allow_replies: args.allowReplies, demo_post_author: true, @@ -122,17 +125,14 @@ It is helpful for context within a discussion to know when a commentor is the or parameters={{ docs: { source: { - code: makeTwigInclude('@cloudfour/components/comment/comment.twig', { - comment: makeComment(), - demo_cloud_four_member: true, - }), + code: memberDemoSource, }, }, }} > {(args) => { useEffect(() => initCommentReplyForms()); - return template({ + return memberDemo({ comment: makeComment(), allow_replies: args.allowReplies, demo_cloud_four_member: true, diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig index a8f6dd51f..74500946c 100644 --- a/src/components/comment/comment.twig +++ b/src/components/comment/comment.twig @@ -16,33 +16,8 @@
{{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', - aria_hidden: 'true', - } only %} - {% endblock %} - {% endembed %} - Member) - {% endif %} + + {% block author_meta %}{% endblock %} {% if comment.is_child %}replied{% else %}said{% endif %}: diff --git a/src/components/comment/demo/author.twig b/src/components/comment/demo/author.twig new file mode 100644 index 000000000..5535a7dc8 --- /dev/null +++ b/src/components/comment/demo/author.twig @@ -0,0 +1,13 @@ +{% embed '@cloudfour/components/comment/comment.twig' with { + comment: comment, + logged_in_user: logged_in_user, + allow_replies: allow_replies, +} %} + {% block author_meta %} + (Article + {% include '@cloudfour/components/badge/badge.twig' with { + label: 'Author', + icon: 'pencil', + } only %} + {% endblock %} +{% endembed %} diff --git a/src/components/comment/demo/member.twig b/src/components/comment/demo/member.twig new file mode 100644 index 000000000..bf8c335c6 --- /dev/null +++ b/src/components/comment/demo/member.twig @@ -0,0 +1,20 @@ +{% embed '@cloudfour/components/comment/comment.twig' with { + comment: comment, + logged_in_user: logged_in_user, + allow_replies: allow_replies, +} %} + {% block author_meta %} + (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', + aria_hidden: 'true', + } only %} + {% endblock %} + {% endembed %} + Member) + {% endblock %} +{% endembed %} From 78ec03844b72e4320888dcd1ec9c1b7ddd2a4c26 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Fri, 23 Jul 2021 09:35:43 -0700 Subject: [PATCH 2/5] Add changeset --- .changeset/short-walls-hear.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/short-walls-hear.md diff --git a/.changeset/short-walls-hear.md b/.changeset/short-walls-hear.md new file mode 100644 index 000000000..5d1edb426 --- /dev/null +++ b/.changeset/short-walls-hear.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Switch comment badging to use a slot From 1b7115ea588cbc3763a4cbaf402b4e221f66ecd1 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Fri, 23 Jul 2021 09:48:47 -0700 Subject: [PATCH 3/5] typo --- src/components/comment/comment.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment/comment.stories.mdx b/src/components/comment/comment.stories.mdx index c900b98b8..f4fc73386 100644 --- a/src/components/comment/comment.stories.mdx +++ b/src/components/comment/comment.stories.mdx @@ -93,7 +93,7 @@ This information may be passed to the component as a `comment` object matching t ## Author Meta Info -You can us the `author_meta` block to display author meta information. +You can use the `author_meta` block to display author meta information. It is helpful for context within a discussion to know when a commentor is the original post author or a Cloud Four team member. This can be achieved by passing in [a Badge component](/docs/components-badge--basic) to the `author_meta` block. From f76ef8dc41bfd868269e24572cdb4c78970d05e0 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Fri, 23 Jul 2021 11:57:54 -0700 Subject: [PATCH 4/5] Update blocks based on discussion --- .changeset/short-walls-hear.md | 2 +- src/components/comment/comment.stories.mdx | 9 ++++-- src/components/comment/comment.twig | 33 +++++++++++++--------- src/components/comment/demo/author.twig | 3 +- src/components/comment/demo/member.twig | 3 +- 5 files changed, 32 insertions(+), 18 deletions(-) diff --git a/.changeset/short-walls-hear.md b/.changeset/short-walls-hear.md index 5d1edb426..eaadc8a3a 100644 --- a/.changeset/short-walls-hear.md +++ b/.changeset/short-walls-hear.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Switch comment badging to use a slot +Increase comment template flexibility using blocks. diff --git a/src/components/comment/comment.stories.mdx b/src/components/comment/comment.stories.mdx index f4fc73386..946424794 100644 --- a/src/components/comment/comment.stories.mdx +++ b/src/components/comment/comment.stories.mdx @@ -288,8 +288,6 @@ While it is theoretically possible to infinitely nest `children`, it's recommend ## Template Properties -Note: These template properties are not finalized, and may change in the future. - - `comment`: an object matching the structure of a [Timber comment](https://timber.github.io/docs/reference/timber-comment/) - `allow_replies`: A boolean property that controls whether to show a reply button and form - `logged_in_user`: [user object](https://timber.github.io/docs/reference/timber-user/#properties) of the type: @@ -302,6 +300,13 @@ Note: These template properties are not finalized, and may change in the future. - `log_out_url`: URL used for log out link. - `source`: An optional object containing a `url` and `name` for the comment source. +## Template Blocks + +- `header_content`: Use to over-write the content of the comment header +- `heading_content`: Use to over-write the content of the comment heading +- `author_title`: Use to over-write a portion of the comment heading content. Will be followed by a visually hidden span reading either `replied` or `said`. (Valid values could be `John Doe` or `John Doe (Post Author)`.) +- `replies`: Use to pass in your own replies markup. This is useful if you need to modify other blocks within replies. + ## JavaScript Instructions You can run `initCommentReplyForm` to initialize a comment's reply form. Comments with reply forms will have the `js-comment-with-reply-form` class which you can use to query and initialize them. diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig index 74500946c..53065e25c 100644 --- a/src/components/comment/comment.twig +++ b/src/components/comment/comment.twig @@ -13,16 +13,21 @@ class="c-comment {{_comment_modifiers}}" id="comment-{{comment.ID}}" > -
+
+ {% block header_content %} - {{comment.author.name}} + {% block heading_content %} + {% block author_title %} + {{comment.author.name}} + {% endblock %} - {% block author_meta %}{% endblock %} - - {% if comment.is_child %}replied{% else %}said{% endif %}: - + + {% if comment.is_child %}replied{% else %}said{% endif %}: + + {% endblock %} -
+ {% endblock %} +
{% include '@cloudfour/components/avatar/avatar.twig' with { src: comment.avatar, @@ -112,12 +117,14 @@ class: 'c-comment__replies' } %} {% block content %} - {% for child in comment.children %} - {% include '@cloudfour/components/comment/comment.twig' with { - comment: child, - heading_depth: _child_heading_depth, - } only %} - {% endfor %} + {% block replies %} + {% for child in comment.children %} + {% include '@cloudfour/components/comment/comment.twig' with { + comment: child, + heading_depth: _child_heading_depth, + } only %} + {% endfor %} + {% endblock %} {% endblock %} {% endembed %} {% endif %} diff --git a/src/components/comment/demo/author.twig b/src/components/comment/demo/author.twig index 5535a7dc8..7b6795bb2 100644 --- a/src/components/comment/demo/author.twig +++ b/src/components/comment/demo/author.twig @@ -3,7 +3,8 @@ logged_in_user: logged_in_user, allow_replies: allow_replies, } %} - {% block author_meta %} + {% block author_title %} + {{parent()}} (Article {% include '@cloudfour/components/badge/badge.twig' with { label: 'Author', diff --git a/src/components/comment/demo/member.twig b/src/components/comment/demo/member.twig index bf8c335c6..05756a56e 100644 --- a/src/components/comment/demo/member.twig +++ b/src/components/comment/demo/member.twig @@ -3,7 +3,8 @@ logged_in_user: logged_in_user, allow_replies: allow_replies, } %} - {% block author_meta %} + {% block author_title %} + {{parent()}} (Cloud Four {% embed '@cloudfour/components/badge/badge.twig' with { label: 'Team' From 64bbd1881a77a2474d1ac6369295b466c9585c1a Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Fri, 23 Jul 2021 12:35:33 -0700 Subject: [PATCH 5/5] Update doc block --- src/components/comment/comment.stories.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/comment/comment.stories.mdx b/src/components/comment/comment.stories.mdx index 946424794..10b76322b 100644 --- a/src/components/comment/comment.stories.mdx +++ b/src/components/comment/comment.stories.mdx @@ -91,11 +91,11 @@ This information may be passed to the component as a `comment` object matching t -## Author Meta Info +## Author Title -You can use the `author_meta` block to display author meta information. +You can use the `author_title` block to pass in a custom author name or title. -It is helpful for context within a discussion to know when a commentor is the original post author or a Cloud Four team member. This can be achieved by passing in [a Badge component](/docs/components-badge--basic) to the `author_meta` block. +It is helpful for context within a discussion to know when a commentor is the original post author or a Cloud Four team member. This can be achieved by passing in a name with [a Badge component](/docs/components-badge--basic) to the `author_title` block.