From b0202823257185ba84f7e5b478a25dfbc7d810f0 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 25 Aug 2021 17:04:35 -0700 Subject: [PATCH 01/13] Starter files --- .../individual-bio-group/demo/demo.twig | 20 +++++++++ .../individual-bio-group.scss | 0 .../individual-bio-group.stories.mdx | 42 +++++++++++++++++++ .../individual-bio-group.twig | 19 +++++++++ 4 files changed, 81 insertions(+) create mode 100644 src/objects/individual-bio-group/demo/demo.twig create mode 100644 src/objects/individual-bio-group/individual-bio-group.scss create mode 100644 src/objects/individual-bio-group/individual-bio-group.stories.mdx create mode 100644 src/objects/individual-bio-group/individual-bio-group.twig diff --git a/src/objects/individual-bio-group/demo/demo.twig b/src/objects/individual-bio-group/demo/demo.twig new file mode 100644 index 000000000..f183181ee --- /dev/null +++ b/src/objects/individual-bio-group/demo/demo.twig @@ -0,0 +1,20 @@ +{% embed '@cloudfour/objects/individual-bio-group/individual-bio-group.twig' with { + links: [ + { + href: '#', + text: 'Some link!' + }, + { + href: '#', + text: 'Another link?' + } + ] +} only %} + {% block image %} +

Why should I use a linter?

+ {% endblock %} + {% block content %} +

There are two main reasons to use a linter: To save yourself trouble by avoiding common problems and to enforce a common code style across a team.

+

Everyone makes mistakes when they’re coding. It’s easy to use the wrong type of bracket, forget a semicolon, or misspell something. Checking your code for these types of errors is the kind of thing that computers excel at. Rather than reviewing your code line by line for common syntax errors, you can tell a computer what types of errors to look for.

+ {% endblock %} +{% endembed %} diff --git a/src/objects/individual-bio-group/individual-bio-group.scss b/src/objects/individual-bio-group/individual-bio-group.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/objects/individual-bio-group/individual-bio-group.stories.mdx b/src/objects/individual-bio-group/individual-bio-group.stories.mdx new file mode 100644 index 000000000..e1cee5741 --- /dev/null +++ b/src/objects/individual-bio-group/individual-bio-group.stories.mdx @@ -0,0 +1,42 @@ +import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; +// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax. +// 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 defaultDemoSource from '!!raw-loader!./demo/demo.twig'; +import defaultDemo from './demo/demo.twig'; + + + +# Feature Group + +The Feature Group layout object can be used by individual sections on a page to place content. It is helpful for highlighting a section by giving it a distinct layout. It includes an introduction, main content area, and an optional link. + + + + {defaultDemo} + + + +## Template Properties + +- `intro` (block): Block to add introductory content, like a heading. +- `content` (block): Block to add the main content. +- `action` (block): Optional block to add a cta. diff --git a/src/objects/individual-bio-group/individual-bio-group.twig b/src/objects/individual-bio-group/individual-bio-group.twig new file mode 100644 index 000000000..abe346ca4 --- /dev/null +++ b/src/objects/individual-bio-group/individual-bio-group.twig @@ -0,0 +1,19 @@ +
+
+ {% block image %}{% endblock %} +
+ {% if links is not empty %} +
+ +
+ {% endif %} +
+ {% block content %}{% endblock %} +
+
From 97ee383b8eb39148b7174bc04fc9d44fbd1f1286 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 26 Aug 2021 11:08:53 -0700 Subject: [PATCH 02/13] Progress --- .../individual-bio-group/demo/demo.twig | 30 +++++++++++++-- .../individual-bio-group.scss | 37 +++++++++++++++++++ .../individual-bio-group.twig | 16 +++----- 3 files changed, 69 insertions(+), 14 deletions(-) diff --git a/src/objects/individual-bio-group/demo/demo.twig b/src/objects/individual-bio-group/demo/demo.twig index f183181ee..7377c5cef 100644 --- a/src/objects/individual-bio-group/demo/demo.twig +++ b/src/objects/individual-bio-group/demo/demo.twig @@ -10,11 +10,33 @@ } ] } only %} - {% block image %} -

Why should I use a linter?

+ {% block avatar %} + {% include '@cloudfour/components/avatar/avatar.twig' with { + size: 'full', + src: 'media/team-avatars/danielle.png' + } only %} {% endblock %} {% block content %} -

There are two main reasons to use a linter: To save yourself trouble by avoiding common problems and to enforce a common code style across a team.

-

Everyone makes mistakes when they’re coding. It’s easy to use the wrong type of bracket, forget a semicolon, or misspell something. Checking your code for these types of errors is the kind of thing that computers excel at. Rather than reviewing your code line by line for common syntax errors, you can tell a computer what types of errors to look for.

+ {% embed '@cloudfour/objects/rhythm/rhythm.twig' only %} + {% block content %} +
+ {% include '@cloudfour/components/heading/heading.twig' with { + content: 'Danielle Romo', + level: 1 + } only %} +

Front-end Designer

+
+

Danielle is a front-end designer passionate about all things creative including design, art, and music. She began her career as a graphic designer and draws on her visual design skills to create engaging experiences for the web. She hasn't stopped learning since taking her first web design class and continues to develop her coding skills one web page at a time.

+

Outside of work, you can find her drawing, listening to true crime podcasts, or hiking the beautiful Pacific Northwest.

+ {% endblock %} + {% endembed %} + {% endblock %} + {% block links %} + {% endblock %} {% endembed %} diff --git a/src/objects/individual-bio-group/individual-bio-group.scss b/src/objects/individual-bio-group/individual-bio-group.scss index e69de29bb..116a90f34 100644 --- a/src/objects/individual-bio-group/individual-bio-group.scss +++ b/src/objects/individual-bio-group/individual-bio-group.scss @@ -0,0 +1,37 @@ +@use "../../compiled/tokens/scss/breakpoint"; +@use "../../compiled/tokens/scss/size"; +@use '../../mixins/fluid'; + +.o-individual-bio-group { + display: grid; + grid-template-areas: + 'avatar' + 'content' + 'links'; + grid-template-rows: repeat(3, minmax(0, auto)); + @include fluid.grid-gap( + breakpoint.$s, + breakpoint.$xl, + size.$spacing-gap-fluid-min, + size.$spacing-gap-fluid-max + ); + + @media (min-width: breakpoint.$l) { + grid-template-areas: + 'avatar content content' + 'links content content'; + grid-template-columns: repeat(3, 1fr); + } +} + +.o-individual-bio-group__avatar { + grid-area: avatar; +} + +.o-individual-bio-group__content { + grid-area: content; +} + +.o-individual-bio-group__links { + grid-area: links; +} diff --git a/src/objects/individual-bio-group/individual-bio-group.twig b/src/objects/individual-bio-group/individual-bio-group.twig index abe346ca4..2319dc468 100644 --- a/src/objects/individual-bio-group/individual-bio-group.twig +++ b/src/objects/individual-bio-group/individual-bio-group.twig @@ -1,16 +1,12 @@ +{% set _links %}{% block links %}{% endblock %}{% endset %} +
-
- {% block image %}{% endblock %} +
+ {% block avatar %}{% endblock %}
- {% if links is not empty %} + {% if _links is not empty %}
- + {{ _links }}
{% endif %}
From fd70c2d0557b237818ece4166f4b0cd29e34f4ec Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 26 Aug 2021 11:09:41 -0700 Subject: [PATCH 03/13] Removed links property --- src/objects/individual-bio-group/demo/demo.twig | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/objects/individual-bio-group/demo/demo.twig b/src/objects/individual-bio-group/demo/demo.twig index 7377c5cef..2bc89a5f2 100644 --- a/src/objects/individual-bio-group/demo/demo.twig +++ b/src/objects/individual-bio-group/demo/demo.twig @@ -1,15 +1,4 @@ -{% embed '@cloudfour/objects/individual-bio-group/individual-bio-group.twig' with { - links: [ - { - href: '#', - text: 'Some link!' - }, - { - href: '#', - text: 'Another link?' - } - ] -} only %} +{% embed '@cloudfour/objects/individual-bio-group/individual-bio-group.twig' only %} {% block avatar %} {% include '@cloudfour/components/avatar/avatar.twig' with { size: 'full', From d496b0d4ac55fbc3888addf91b5b70e5db9db9bf Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 26 Aug 2021 11:19:27 -0700 Subject: [PATCH 04/13] Clean up docs --- .../individual-bio-group.stories.mdx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/objects/individual-bio-group/individual-bio-group.stories.mdx b/src/objects/individual-bio-group/individual-bio-group.stories.mdx index e1cee5741..e4c418720 100644 --- a/src/objects/individual-bio-group/individual-bio-group.stories.mdx +++ b/src/objects/individual-bio-group/individual-bio-group.stories.mdx @@ -10,19 +10,15 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import defaultDemoSource from '!!raw-loader!./demo/demo.twig'; import defaultDemo from './demo/demo.twig'; - + -# Feature Group +# Individual Bio Group -The Feature Group layout object can be used by individual sections on a page to place content. It is helpful for highlighting a section by giving it a distinct layout. It includes an introduction, main content area, and an optional link. +The Individual Bio Group layout object can be used for the individual bio pages. It helps layout the bio avatar, content and optional bio links. Date: Thu, 26 Aug 2021 11:19:51 -0700 Subject: [PATCH 05/13] Fix typo --- .../individual-bio-group/individual-bio-group.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/individual-bio-group/individual-bio-group.stories.mdx b/src/objects/individual-bio-group/individual-bio-group.stories.mdx index e4c418720..d2e4e9fe2 100644 --- a/src/objects/individual-bio-group/individual-bio-group.stories.mdx +++ b/src/objects/individual-bio-group/individual-bio-group.stories.mdx @@ -35,4 +35,4 @@ The Individual Bio Group layout object can be used for the individual bio pages. - `avatar` (block): Block to add a bio avatar. - `content` (block): Block to add the main bio content. -- `links` (block): Optional block to bio links. +- `links` (block): Optional block to add bio links. From df4c1930c96ff6c3c86084f3a2c573d02f573ba1 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 26 Aug 2021 11:22:38 -0700 Subject: [PATCH 06/13] Add changeset --- .changeset/sweet-beds-search.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sweet-beds-search.md diff --git a/.changeset/sweet-beds-search.md b/.changeset/sweet-beds-search.md new file mode 100644 index 000000000..616f017a0 --- /dev/null +++ b/.changeset/sweet-beds-search.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add the Individual Bio Group layout object From bfae88b6b4c107484b0875811b7877500f4e012d Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 26 Aug 2021 11:42:50 -0700 Subject: [PATCH 07/13] Move content under avatar --- src/objects/individual-bio-group/individual-bio-group.twig | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/objects/individual-bio-group/individual-bio-group.twig b/src/objects/individual-bio-group/individual-bio-group.twig index 2319dc468..677b657aa 100644 --- a/src/objects/individual-bio-group/individual-bio-group.twig +++ b/src/objects/individual-bio-group/individual-bio-group.twig @@ -4,12 +4,12 @@
{% block avatar %}{% endblock %}
+
+ {% block content %}{% endblock %} +
{% if _links is not empty %}
{{ _links }}
{% endif %} -
- {% block content %}{% endblock %} -
From 9f8cf2a959e6af40aa0182c5c2a08ed80408c1bc Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Fri, 27 Aug 2021 14:11:54 -0700 Subject: [PATCH 08/13] PR feedback --- .../individual-bio-group.scss => bio/bio.scss} | 14 +++++++------- .../bio.stories.mdx} | 10 ++++++---- src/objects/bio/bio.twig | 15 +++++++++++++++ .../{individual-bio-group => bio}/demo/demo.twig | 4 ++-- .../individual-bio-group.twig | 15 --------------- 5 files changed, 30 insertions(+), 28 deletions(-) rename src/objects/{individual-bio-group/individual-bio-group.scss => bio/bio.scss} (74%) rename src/objects/{individual-bio-group/individual-bio-group.stories.mdx => bio/bio.stories.mdx} (76%) create mode 100644 src/objects/bio/bio.twig rename src/objects/{individual-bio-group => bio}/demo/demo.twig (92%) delete mode 100644 src/objects/individual-bio-group/individual-bio-group.twig diff --git a/src/objects/individual-bio-group/individual-bio-group.scss b/src/objects/bio/bio.scss similarity index 74% rename from src/objects/individual-bio-group/individual-bio-group.scss rename to src/objects/bio/bio.scss index 116a90f34..8fa58e3fd 100644 --- a/src/objects/individual-bio-group/individual-bio-group.scss +++ b/src/objects/bio/bio.scss @@ -2,12 +2,12 @@ @use "../../compiled/tokens/scss/size"; @use '../../mixins/fluid'; -.o-individual-bio-group { +.o-bio { display: grid; grid-template-areas: 'avatar' 'content' - 'links'; + 'meta'; grid-template-rows: repeat(3, minmax(0, auto)); @include fluid.grid-gap( breakpoint.$s, @@ -19,19 +19,19 @@ @media (min-width: breakpoint.$l) { grid-template-areas: 'avatar content content' - 'links content content'; + 'meta content content'; grid-template-columns: repeat(3, 1fr); } } -.o-individual-bio-group__avatar { +.o-bio__avatar { grid-area: avatar; } -.o-individual-bio-group__content { +.o-bio__content { grid-area: content; } -.o-individual-bio-group__links { - grid-area: links; +.o-bio__meta { + grid-area: meta; } diff --git a/src/objects/individual-bio-group/individual-bio-group.stories.mdx b/src/objects/bio/bio.stories.mdx similarity index 76% rename from src/objects/individual-bio-group/individual-bio-group.stories.mdx rename to src/objects/bio/bio.stories.mdx index d2e4e9fe2..620be2c38 100644 --- a/src/objects/individual-bio-group/individual-bio-group.stories.mdx +++ b/src/objects/bio/bio.stories.mdx @@ -10,11 +10,13 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import defaultDemoSource from '!!raw-loader!./demo/demo.twig'; import defaultDemo from './demo/demo.twig'; - + -# Individual Bio Group +# Bio -The Individual Bio Group layout object can be used for the individual bio pages. It helps layout the bio avatar, content and optional bio links. +The Bio layout object can be used for the bio pages. It helps layout the bio avatar, content and optional meta information (commonly used for bio links). + +This layout object _does not_ style the contents within the layout. +
+ {% block avatar %}{% endblock %} +
+
+ {% block content %}{% endblock %} +
+ {% if _meta is not empty %} +
+ {{ _meta }} +
+ {% endif %} +
diff --git a/src/objects/individual-bio-group/demo/demo.twig b/src/objects/bio/demo/demo.twig similarity index 92% rename from src/objects/individual-bio-group/demo/demo.twig rename to src/objects/bio/demo/demo.twig index 2bc89a5f2..8c6e37482 100644 --- a/src/objects/individual-bio-group/demo/demo.twig +++ b/src/objects/bio/demo/demo.twig @@ -1,4 +1,4 @@ -{% embed '@cloudfour/objects/individual-bio-group/individual-bio-group.twig' only %} +{% embed '@cloudfour/objects/bio/bio.twig' only %} {% block avatar %} {% include '@cloudfour/components/avatar/avatar.twig' with { size: 'full', @@ -20,7 +20,7 @@ {% endblock %} {% endembed %} {% endblock %} - {% block links %} + {% block meta %}
  • Website link
  • Website link
    • diff --git a/src/objects/individual-bio-group/individual-bio-group.twig b/src/objects/individual-bio-group/individual-bio-group.twig deleted file mode 100644 index 677b657aa..000000000 --- a/src/objects/individual-bio-group/individual-bio-group.twig +++ /dev/null @@ -1,15 +0,0 @@ -{% set _links %}{% block links %}{% endblock %}{% endset %} - -
    -
    - {% block avatar %}{% endblock %} -
    -
    - {% block content %}{% endblock %} -
    - {% if _links is not empty %} -
    - {{ _links }} -
    - {% endif %} -
    From 1b629f00d0f2ccdf9b97a2e9e5078c340fc65d83 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Fri, 27 Aug 2021 14:12:49 -0700 Subject: [PATCH 09/13] Edit docs --- src/objects/bio/bio.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/bio/bio.stories.mdx b/src/objects/bio/bio.stories.mdx index 620be2c38..441a7edb5 100644 --- a/src/objects/bio/bio.stories.mdx +++ b/src/objects/bio/bio.stories.mdx @@ -14,7 +14,7 @@ import defaultDemo from './demo/demo.twig'; # Bio -The Bio layout object can be used for the bio pages. It helps layout the bio avatar, content and optional meta information (commonly used for bio links). +The Bio layout object can be used for the bio pages. It helps layout the bio avatar, content and optional meta information (for example, bio links). This layout object _does not_ style the contents within the layout. From 7610b8f7dd69d9e5109ed626f64d1c089c0ffbec Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Fri, 27 Aug 2021 14:16:17 -0700 Subject: [PATCH 10/13] Update .changeset/sweet-beds-search.md --- .changeset/sweet-beds-search.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/sweet-beds-search.md b/.changeset/sweet-beds-search.md index 616f017a0..264c8096d 100644 --- a/.changeset/sweet-beds-search.md +++ b/.changeset/sweet-beds-search.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Add the Individual Bio Group layout object +Add the Bio layout object From a5407b3a0b41b354788e858f49826822de1286f6 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Fri, 27 Aug 2021 14:26:44 -0700 Subject: [PATCH 11/13] Better description --- src/objects/bio/bio.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/bio/bio.stories.mdx b/src/objects/bio/bio.stories.mdx index 441a7edb5..56e83c230 100644 --- a/src/objects/bio/bio.stories.mdx +++ b/src/objects/bio/bio.stories.mdx @@ -14,7 +14,7 @@ import defaultDemo from './demo/demo.twig'; # Bio -The Bio layout object can be used for the bio pages. It helps layout the bio avatar, content and optional meta information (for example, bio links). +The Bio layout object can be used for extended biographical details that include an avatar, an extended text description and optional meta information. This layout object _does not_ style the contents within the layout. From bf3c907ced72c7600e1d73d589b4e188a3304b9f Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Fri, 27 Aug 2021 14:27:55 -0700 Subject: [PATCH 12/13] Remove unnecessary description --- src/objects/bio/bio.stories.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/objects/bio/bio.stories.mdx b/src/objects/bio/bio.stories.mdx index 56e83c230..b583bb3e0 100644 --- a/src/objects/bio/bio.stories.mdx +++ b/src/objects/bio/bio.stories.mdx @@ -16,8 +16,6 @@ import defaultDemo from './demo/demo.twig'; The Bio layout object can be used for extended biographical details that include an avatar, an extended text description and optional meta information. -This layout object _does not_ style the contents within the layout. - Date: Fri, 27 Aug 2021 14:39:22 -0700 Subject: [PATCH 13/13] Reorder content order --- src/objects/bio/bio.twig | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/objects/bio/bio.twig b/src/objects/bio/bio.twig index 9893a825e..3319f27dd 100644 --- a/src/objects/bio/bio.twig +++ b/src/objects/bio/bio.twig @@ -1,12 +1,12 @@ {% set _meta %}{% block meta %}{% endblock %}{% endset %}
    -
    - {% block avatar %}{% endblock %} -
    {% block content %}{% endblock %}
    +
    + {% block avatar %}{% endblock %} +
    {% if _meta is not empty %}
    {{ _meta }}