From 5b367ab3de572baf79114d52c1522b22d36e6915 Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Tue, 7 May 2024 06:50:57 -0400 Subject: [PATCH 01/23] Navigation "back" button chevron points left instead of right (#5077) * navigation "back" button chevron points left instead of right * update sidenav element nesting for documentation clarity --- scss/_patterns_navigation.scss | 74 ++++++++++++++++++---------------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 541b054963..126748bfc5 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -872,50 +872,54 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px } /* stylelint-enable max-nesting-depth */ - .p-navigation--sliding .p-navigation__item--dropdown-close { - .p-navigation__link::after { - left: 1rem; - transform: rotate(90deg); - } - @media (min-width: $breakpoint-navigation-threshold) { - display: none; - } - } + .p-navigation--sliding { + // Default positioning for nested dropdown buttons. Overridden by subsequent styles. + .p-navigation__item--dropdown-toggle { + position: initial; - .p-navigation--sliding .p-navigation__item--dropdown-toggle { - position: initial; + &::after { + content: none; + } - &::after { - content: none; - } + .p-navigation__link::after { + @include vf-icon-chevron-themed; - .p-navigation__link::after { - @include vf-icon-chevron-themed; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + display: block; + height: $spv--large; + pointer-events: none; + position: absolute; + right: map-get($grid-margin-widths, small); + text-indent: calc(100% + 10rem); + top: 1rem; + transform: rotate(-90deg); + width: map-get($icon-sizes, default); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - content: ''; - display: block; - height: $spv--large; - pointer-events: none; - position: absolute; - right: map-get($grid-margin-widths, small); - text-indent: calc(100% + 10rem); - top: 1rem; - transform: rotate(-90deg); - width: map-get($icon-sizes, default); + @media (min-width: $breakpoint-navigation-threshold) { + right: 0.5rem; + top: 1.2rem; + transform: none; + } + } - @media (min-width: $breakpoint-navigation-threshold) { - right: 0.5rem; - top: 1.2rem; - transform: none; + &.is-active > .p-navigation__link::after { + @media (min-width: $breakpoint-navigation-threshold) { + transform: rotate(180deg); + } } } - &.is-active > .p-navigation__link::after { + // Style for the "go back" button that closes the current level of the sidenav dropdown. Overrides base style from above + .p-navigation__item--dropdown-close { + .p-navigation__link::after { + left: 1rem; + transform: rotate(90deg); + } @media (min-width: $breakpoint-navigation-threshold) { - transform: rotate(180deg); + display: none; } } } From bd970bd155ad0e783890cbdb814f58790e120158 Mon Sep 17 00:00:00 2001 From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com> Date: Tue, 7 May 2024 13:43:20 +0200 Subject: [PATCH 02/23] Label line height was incorrect on largest breakpoint (#5075) --- scss/_base_forms.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss index 99704a1814..155bd8e807 100644 --- a/scss/_base_forms.scss +++ b/scss/_base_forms.scss @@ -101,6 +101,7 @@ label { cursor: pointer; display: inline-block; + line-height: map-get($line-heights, default-text); margin-bottom: $spv--large - $spv-nudge; margin-top: 0; max-width: $text-max-width; From 6380b979f53b13c588116e1f593384e1b907d3b4 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 23 Apr 2024 22:15:24 +0200 Subject: [PATCH 03/23] Add hero pattern documentation page --- templates/docs/patterns/hero.md | 256 ++++++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 templates/docs/patterns/hero.md diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md new file mode 100644 index 0000000000..62113c97ca --- /dev/null +++ b/templates/docs/patterns/hero.md @@ -0,0 +1,256 @@ +--- +wrapper_template: '_layouts/docs.html' +context: + title: Hero pattern | Components +--- + +This article explains how to design and build hero sections on brochure sites: + + + +## Content + +### Headings section + +In its simplest form, a hero is a single `h1` heading wrapped in a section container with `p-section--hero` class name (that provides the necessary 1.5rem top padding and 4rem bottom padding). The `h1` heading is the only required element in all heros. Examples of this type of usage can be found on [canonical.com/blog](https://canonical.com/blog), archive and similar pages. + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/9c285bce-vanilla-docs-hero-1.jpg", + alt="", + width="2464", + height="368", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +### Headings section with a subtitle + +Often the `h1` heading is followed by a subtitle or another kind of suplementary text. It should be implemented as a paragraph with `p-heading--2`. The spacing between `h1` and `h2`-sized headings is adjusted by Vanilla to shave off the excess margin and paddding. This makes them look like they are part of the same paragraph: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/96f7b929-vanilla-docs-hero-2.jpg", + alt="", + width="2464", + height="447", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +### Additional content following the headings section + +Any additional content should be separated from headings by wrapping them in another section with `p-section--shallow` class. This creates the visual equivalent of a pause in speech. + +In the following example, we have a headings section, then pause, then a paragraph: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/1b4c51ac-vanilla-docs-hero-3.jpg", + alt="", + width="2464", + height="721", + hi_def=True, + loading="auto|lazy" + ) | safe + }} +
+ +Below, the paragraph is followed by another pause, followed by a form element: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/ef213b79-vanilla-docs-hero-4.jpg", + alt="", + width="2464", + height="785", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +### Using horizontal rules + +We insert [rules](/docs/patterns/rule) (`p-rule`) when large blocks of content are followed by one or more small elements, to help turn the small elements into a block that doesn’t seem overshadowed by preceding content. + +A couple of examples below demonstrating both options below: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/9daafb94-vanilla-docs-hero-6.jpg", + alt="", + width="2464", + height="817", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +### Deliberate line breaks + +When text in headings wraps, wherever possible, choose the best place in the sentence to wrap onto a new line. A good way to think about this is, if you had to take a breath (or insert a comma) in the middle of the sentence, where would you do it? + +We have [utilities to show/hide](https://vanillaframework.io/docs/utilities/hide) line breaks at specific breakpoints. We can also insert non-breaking spaces (` `) to achieve the same effect near the end of the line. + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/ff310d3b-vanilla-docs-hero-5.jpg", + alt="", + width="2464", + height="897", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +--- + +## Layouts + +### The 25/75% split on large screens + +The examples above use the 25/75% section layout. We have so far only placed content in the 75% column, leaving the first 3 columns of the 12-column large screen grid empty. + +The first three columns (25% column) can be used for purposes other than adding white space, provided content fits comfortably and doesn’t wrap excessively. + +A few examples: + +As a container for content that is known to be short and unlikely to become longer due to copy changes: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/868ab9c8-vanilla-docs-hero-layout-1.jpg", + alt="", + width="2464", + height="673", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +
+ {{ image ( + url="https://assets.ubuntu.com/v1/f84666c6-vanilla-docs-hero-layout-2.jpg", + alt="", + width="2464", + height="721", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +As a “signpost” - a place to insert relevant small logos for example. + +Wherever possible, take care to align the baseline of any text in the logo to the baseline of the `h1`. This can be done by exporting the logo with the needed amount of white space inside the image file itself: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/74fb0cc7-vanilla-docs-hero-layout-3.jpg", + alt="", + width="2464", + height="625", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +### The 25/75% split on medium screens + +By default, the 25/75 split is preserved on medium screens by using 2 and 4 of the available columns (turning it into 33/66% split). + +It is fine as long as the content of first column is small enough to fit in 2 of the grid’s 6 columns, as in the following example: + +
+
+ {{ image ( + url="https://assets.ubuntu.com/v1/20d3e0a4-vanilla-docs-hero-layout-5.jpg", + alt="", + width="1600", + height="673", + hi_def=True, + loading="auto" + ) | safe + }} +
+
+ +In a case where content in the first column is too large to fit in 2 columns, or the content of second column being long enough to justify using full width of the screen, the layout should be adjusted to stack on medium screens (by using `row--25-75-on-large` variant). + +
+
+ {{ image ( + url="https://assets.ubuntu.com/v1/1a900733-vanilla-docs-hero-layout-4.jpg", + alt="", + width="1600", + height="747", + hi_def=True, + loading="auto" + ) | safe + }} +
+
+ +We encourage examining the content and finding a layout that makes better use of the available space. It is also important to pay attention to the layout in subsequent sections, and ensure the overall sequence of layouts is well balanced. + +Layouts where the 25% column on desktop is empty automatically stretch the 75% container to fill the full width on medium screens. Any nested layouts, like the "Resources" and "Get in touch" section in the example below, should be handled on case-by-case basis. Here, they are adapted into a 33/66% layout, providing more space to the section that needs it: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/371c9de8-vanilla-docs-hero-layout-6.jpg", + alt="", + width="2464", + height="849", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +
+
+ {{ image ( + url="https://assets.ubuntu.com/v1/618e6977-vanilla-docs-hero-layout-7.jpg", + alt="", + width="1600", + height="621", + hi_def=True, + loading="auto" + ) | safe + }} +
+
+ +### Nested grid rows + +For more complicated layouts use the nested grid row inside the 75% column. This allows for more complex layouts, like the one below: + +
+ {{ image ( + url="https://assets.ubuntu.com/v1/a77be808-vanilla-docs-hero-layout-8.jpg", + alt="", + width="2464", + height="754", + hi_def=True, + loading="auto" + ) | safe + }} +
+ +
+ +
From 101da7c6473d0b8a08b54ed2c1d2ea092b332ceb Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 23 Apr 2024 22:15:45 +0200 Subject: [PATCH 04/23] Add hero pattern examples --- .../docs/examples/brochure/hero-404.html | 36 ++++++ .../docs/examples/brochure/hero-blog.html | 103 ++++++++++++++++++ .../examples/brochure/hero-heading-1.html | 15 +++ .../examples/brochure/hero-heading-2.html | 16 +++ .../examples/brochure/hero-line-breaks.html | 43 ++++++++ .../examples/brochure/hero-nested-grid.html | 46 ++++++++ .../docs/examples/brochure/hero-rules.html | 25 +++++ .../brochure/hero-sections-search.html | 35 ++++++ .../docs/examples/brochure/hero-sections.html | 18 +++ 9 files changed, 337 insertions(+) create mode 100644 templates/docs/examples/brochure/hero-404.html create mode 100644 templates/docs/examples/brochure/hero-blog.html create mode 100644 templates/docs/examples/brochure/hero-heading-1.html create mode 100644 templates/docs/examples/brochure/hero-heading-2.html create mode 100644 templates/docs/examples/brochure/hero-line-breaks.html create mode 100644 templates/docs/examples/brochure/hero-nested-grid.html create mode 100644 templates/docs/examples/brochure/hero-rules.html create mode 100644 templates/docs/examples/brochure/hero-sections-search.html create mode 100644 templates/docs/examples/brochure/hero-sections.html diff --git a/templates/docs/examples/brochure/hero-404.html b/templates/docs/examples/brochure/hero-404.html new file mode 100644 index 0000000000..a3aade6f5e --- /dev/null +++ b/templates/docs/examples/brochure/hero-404.html @@ -0,0 +1,36 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / 404{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+

404

+
+
+
+

Page not found

+

We can't find the page you're looking for. + File a bug if you think this might be an error.

+
+
+
+
+ + + + +
+
+
+
+
+
+{% endblock %} + + + + + diff --git a/templates/docs/examples/brochure/hero-blog.html b/templates/docs/examples/brochure/hero-blog.html new file mode 100644 index 0000000000..bfcb38fab6 --- /dev/null +++ b/templates/docs/examples/brochure/hero-blog.html @@ -0,0 +1,103 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / 404{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+
+ +
+
+

+ + Canonical + +
+ on 13 December 2023 +

+
+
+
+
+
+

Canonical joins the OpenAirInterface Software Alliance

+
+
+
+ + + + O-RAN + + + + + + Open RAN + + + + + + Telco + + + + + + Telco 5G + + +
+
+
+
+{% endblock %} + + + +
+ +
+
+

Canonical joins the OpenAirInterface
Software Alliance

+
+ + +
+ + + + O-RAN + + + + + + Open RAN + + + + + + Telco + + + + + + Telco 5G + + + +
+ + + +
+
+ diff --git a/templates/docs/examples/brochure/hero-heading-1.html b/templates/docs/examples/brochure/hero-heading-1.html new file mode 100644 index 0000000000..0b53d67816 --- /dev/null +++ b/templates/docs/examples/brochure/hero-heading-1.html @@ -0,0 +1,15 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Heading{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+

Archive

+
+
+
+ +{% endblock %} diff --git a/templates/docs/examples/brochure/hero-heading-2.html b/templates/docs/examples/brochure/hero-heading-2.html new file mode 100644 index 0000000000..db578e874d --- /dev/null +++ b/templates/docs/examples/brochure/hero-heading-2.html @@ -0,0 +1,16 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Subtitle{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+

Passionate about open source? So are we.

+

Be where the cutting edge is established.

+
+
+
+ +{% endblock %} diff --git a/templates/docs/examples/brochure/hero-line-breaks.html b/templates/docs/examples/brochure/hero-line-breaks.html new file mode 100644 index 0000000000..06d186abaa --- /dev/null +++ b/templates/docs/examples/brochure/hero-line-breaks.html @@ -0,0 +1,43 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Horizontal rules{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+

Press centre

+

All the latest news and featured stories from Canonical.

+
+
+
+
+

Resources

+ +
+
+

Get in touch

+

For the Canonical Communications team, email pr@canonical.com.

+
+
+
+
+
+{% endblock %} + + + + + diff --git a/templates/docs/examples/brochure/hero-nested-grid.html b/templates/docs/examples/brochure/hero-nested-grid.html new file mode 100644 index 0000000000..88190109fc --- /dev/null +++ b/templates/docs/examples/brochure/hero-nested-grid.html @@ -0,0 +1,46 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Nested grid{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+
+ Kubeflow +
+
+
+
+
+
+
+

What is Kubeflow?

+

Kubeflow is the open source machine learning MLOps platform

+
+
+
+

Kubeflow enables you to develop and deploy machine learning models at any scale. It is a cloud-native application that runs on any cloud.

+

Charmed Kubeflow is Canonical’s distribution. It is secure and seamlessly integrated with other leading tools such as MLflow.

+
+
+
+
+ + Try out Charmed Kubeflow Read our MLOps toolkit +
+
+
+ +
+
+
+ +{% endblock %} + + + + + diff --git a/templates/docs/examples/brochure/hero-rules.html b/templates/docs/examples/brochure/hero-rules.html new file mode 100644 index 0000000000..ee08e6e252 --- /dev/null +++ b/templates/docs/examples/brochure/hero-rules.html @@ -0,0 +1,25 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Horizontal rules{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+

Enterprise Data Fabric for rapid innovation at any scale

+

Data flows better with the right tools.

+
+
+

Canonical’s open source enterprise Data Fabric suite delivers better ROI across clouds. Engineered for the most critical workloads.

+
+
+
+ + Get in touch Read the documentation +
+
+
+
+{% endblock %} diff --git a/templates/docs/examples/brochure/hero-sections-search.html b/templates/docs/examples/brochure/hero-sections-search.html new file mode 100644 index 0000000000..24bb292be9 --- /dev/null +++ b/templates/docs/examples/brochure/hero-sections-search.html @@ -0,0 +1,35 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Search{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+

Find a Canonical partner

+
+
+

Canonical's network of Ubuntu partners spans the full range of our product suite. We offer partner programmes for public clouds, IHVs/OEMs, desktop, channel/resellers and global systems integrators.

+
+
+
+
+ + + + +
+
+
+
+
+
+ +{% endblock %} + + + + +Search 119 partners \ No newline at end of file diff --git a/templates/docs/examples/brochure/hero-sections.html b/templates/docs/examples/brochure/hero-sections.html new file mode 100644 index 0000000000..e75bac283e --- /dev/null +++ b/templates/docs/examples/brochure/hero-sections.html @@ -0,0 +1,18 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Sections{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+

Documentation practice at Canonical

+
+

At Canonical, we have embarked on a comprehensive, long-term project to transform documentation. Our aim is to create and maintain documentation product and practice that will represent a standard of excellence. We want documentation to be the best it possibly can be.

+
+
+
+ +{% endblock %} From 8d9869c6bcd5b876d8f4b69e45a4c09393ab4491 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 09:58:58 +0200 Subject: [PATCH 05/23] Link the docs to the examples --- .../docs/examples/brochure/hero-blog.html | 2 +- .../examples/brochure/hero-line-breaks.html | 4 +- .../docs/examples/brochure/hero-rules.html | 2 +- .../docs/examples/brochure/hero-signpost.html | 27 ++ templates/docs/patterns/hero.md | 309 ++++++++++-------- 5 files changed, 210 insertions(+), 134 deletions(-) create mode 100644 templates/docs/examples/brochure/hero-signpost.html diff --git a/templates/docs/examples/brochure/hero-blog.html b/templates/docs/examples/brochure/hero-blog.html index bfcb38fab6..4da3e0af2d 100644 --- a/templates/docs/examples/brochure/hero-blog.html +++ b/templates/docs/examples/brochure/hero-blog.html @@ -1,5 +1,5 @@ {% extends "_layouts/examples.html" %} -{% block title %}Hero / 404{% endblock %} +{% block title %}Hero / Blog{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/brochure/hero-line-breaks.html b/templates/docs/examples/brochure/hero-line-breaks.html index 06d186abaa..9700a934bb 100644 --- a/templates/docs/examples/brochure/hero-line-breaks.html +++ b/templates/docs/examples/brochure/hero-line-breaks.html @@ -1,5 +1,5 @@ {% extends "_layouts/examples.html" %} -{% block title %}Hero / Horizontal rules{% endblock %} +{% block title %}Hero / Line break{% endblock %} {% set is_paper = True %} {% block content %} @@ -9,7 +9,7 @@

Press centre

-

All the latest news and featured stories from Canonical.

+

All the latest news and featured stories from Canonical.

diff --git a/templates/docs/examples/brochure/hero-rules.html b/templates/docs/examples/brochure/hero-rules.html index ee08e6e252..93a8d1f80a 100644 --- a/templates/docs/examples/brochure/hero-rules.html +++ b/templates/docs/examples/brochure/hero-rules.html @@ -8,7 +8,7 @@
-

Enterprise Data Fabric for rapid innovation at any scale

+

Enterprise Data Fabric
for rapid innovation at any scale

Data flows better with the right tools.

diff --git a/templates/docs/examples/brochure/hero-signpost.html b/templates/docs/examples/brochure/hero-signpost.html new file mode 100644 index 0000000000..78a0c4b75b --- /dev/null +++ b/templates/docs/examples/brochure/hero-signpost.html @@ -0,0 +1,27 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Signpost logo{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+ +
+
+
+

Apache Spark® operations,
simplified

+
+
+

Secure and automate the deployment, maintenance and upgrades of Spark on Kubernetes. Run your big data clusters across private and public clouds.

+
+
+
+ + Contact us +
+
+
+
+{% endblock %} diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index 62113c97ca..b63bf44909 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -20,33 +20,41 @@ This article explains how to design and build hero sections on brochure sites: In its simplest form, a hero is a single `h1` heading wrapped in a section container with `p-section--hero` class name (that provides the necessary 1.5rem top padding and 4rem bottom padding). The `h1` heading is the only required element in all heros. Examples of this type of usage can be found on [canonical.com/blog](https://canonical.com/blog), archive and similar pages.
- {{ image ( - url="https://assets.ubuntu.com/v1/9c285bce-vanilla-docs-hero-1.jpg", - alt="", - width="2464", - height="368", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/9c285bce-vanilla-docs-hero-1.jpg", + alt="", + width="2464", + height="368", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with a single heading](/docs/examples/brochure/hero-heading-1) + ### Headings section with a subtitle Often the `h1` heading is followed by a subtitle or another kind of suplementary text. It should be implemented as a paragraph with `p-heading--2`. The spacing between `h1` and `h2`-sized headings is adjusted by Vanilla to shave off the excess margin and paddding. This makes them look like they are part of the same paragraph:
- {{ image ( - url="https://assets.ubuntu.com/v1/96f7b929-vanilla-docs-hero-2.jpg", - alt="", - width="2464", - height="447", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/96f7b929-vanilla-docs-hero-2.jpg", + alt="", + width="2464", + height="447", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with a heading and a subtitle](/docs/examples/brochure/hero-heading-2) + ### Additional content following the headings section Any additional content should be separated from headings by wrapping them in another section with `p-section--shallow` class. This creates the visual equivalent of a pause in speech. @@ -54,31 +62,39 @@ Any additional content should be separated from headings by wrapping them in ano In the following example, we have a headings section, then pause, then a paragraph:
- {{ image ( - url="https://assets.ubuntu.com/v1/1b4c51ac-vanilla-docs-hero-3.jpg", - alt="", - width="2464", - height="721", - hi_def=True, - loading="auto|lazy" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/1b4c51ac-vanilla-docs-hero-3.jpg", + alt="", + width="2464", + height="721", + hi_def=True, + loading="auto|lazy" + ) | safe + }} +
+[See example of a hero with additional content](/docs/examples/brochure/hero-sections) + Below, the paragraph is followed by another pause, followed by a form element:
- {{ image ( - url="https://assets.ubuntu.com/v1/ef213b79-vanilla-docs-hero-4.jpg", - alt="", - width="2464", - height="785", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/ef213b79-vanilla-docs-hero-4.jpg", + alt="", + width="2464", + height="785", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with a form element](/docs/examples/brochure/hero-sections-search) + ### Using horizontal rules We insert [rules](/docs/patterns/rule) (`p-rule`) when large blocks of content are followed by one or more small elements, to help turn the small elements into a block that doesn’t seem overshadowed by preceding content. @@ -86,17 +102,21 @@ We insert [rules](/docs/patterns/rule) (`p-rule`) when large blocks of content a A couple of examples below demonstrating both options below:
- {{ image ( - url="https://assets.ubuntu.com/v1/9daafb94-vanilla-docs-hero-6.jpg", - alt="", - width="2464", - height="817", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/ff310d3b-vanilla-docs-hero-5.jpg", + alt="", + width="2464", + height="897", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with horizontal rules](/docs/examples/brochure/hero-rules) + ### Deliberate line breaks When text in headings wraps, wherever possible, choose the best place in the sentence to wrap onto a new line. A good way to think about this is, if you had to take a breath (or insert a comma) in the middle of the sentence, where would you do it? @@ -104,18 +124,20 @@ When text in headings wraps, wherever possible, choose the best place in the sen We have [utilities to show/hide](https://vanillaframework.io/docs/utilities/hide) line breaks at specific breakpoints. We can also insert non-breaking spaces (` `) to achieve the same effect near the end of the line.
- {{ image ( - url="https://assets.ubuntu.com/v1/ff310d3b-vanilla-docs-hero-5.jpg", - alt="", - width="2464", - height="897", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/9daafb94-vanilla-docs-hero-6.jpg", + alt="", + width="2464", + height="817", + hi_def=True, + loading="auto" + ) | safe + }} +
---- +[See example of a hero with deliberate line breaks](/docs/examples/brochure/hero-line-breaks) ## Layouts @@ -130,127 +152,154 @@ A few examples: As a container for content that is known to be short and unlikely to become longer due to copy changes:
- {{ image ( - url="https://assets.ubuntu.com/v1/868ab9c8-vanilla-docs-hero-layout-1.jpg", - alt="", - width="2464", - height="673", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/868ab9c8-vanilla-docs-hero-layout-1.jpg", + alt="", + width="2464", + height="673", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with a heading in 25% column (404 error screen)](/docs/examples/brochure/hero-404) +
- {{ image ( - url="https://assets.ubuntu.com/v1/f84666c6-vanilla-docs-hero-layout-2.jpg", - alt="", - width="2464", - height="721", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/f84666c6-vanilla-docs-hero-layout-2.jpg", + alt="", + width="2464", + height="721", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with a portrait in 25% column (blog post)](/docs/examples/brochure/hero-blog) + As a “signpost” - a place to insert relevant small logos for example. Wherever possible, take care to align the baseline of any text in the logo to the baseline of the `h1`. This can be done by exporting the logo with the needed amount of white space inside the image file itself: +
- {{ image ( - url="https://assets.ubuntu.com/v1/74fb0cc7-vanilla-docs-hero-layout-3.jpg", - alt="", - width="2464", - height="625", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/74fb0cc7-vanilla-docs-hero-layout-3.jpg", + alt="", + width="2464", + height="625", + hi_def=True, + loading="auto" + ) | safe + }} +
+[See example of a hero with a signpost logo in 25% column](/docs/examples/brochure/hero-signpost) + ### The 25/75% split on medium screens By default, the 25/75 split is preserved on medium screens by using 2 and 4 of the available columns (turning it into 33/66% split). It is fine as long as the content of first column is small enough to fit in 2 of the grid’s 6 columns, as in the following example: +
- {{ image ( - url="https://assets.ubuntu.com/v1/20d3e0a4-vanilla-docs-hero-layout-5.jpg", - alt="", - width="1600", - height="673", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/20d3e0a4-vanilla-docs-hero-layout-5.jpg", + alt="", + width="1600", + height="673", + hi_def=True, + loading="auto" + ) | safe + }} + + See example of a hero with 25/75 layout split on medium screens
In a case where content in the first column is too large to fit in 2 columns, or the content of second column being long enough to justify using full width of the screen, the layout should be adjusted to stack on medium screens (by using `row--25-75-on-large` variant). +
- {{ image ( - url="https://assets.ubuntu.com/v1/1a900733-vanilla-docs-hero-layout-4.jpg", - alt="", - width="1600", - height="747", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/1a900733-vanilla-docs-hero-layout-4.jpg", + alt="", + width="1600", + height="747", + hi_def=True, + loading="auto" + ) | safe + }} + + See example of a hero with 25/75 layout stacked on medium screens
We encourage examining the content and finding a layout that makes better use of the available space. It is also important to pay attention to the layout in subsequent sections, and ensure the overall sequence of layouts is well balanced. +### Nested grid rows + Layouts where the 25% column on desktop is empty automatically stretch the 75% container to fill the full width on medium screens. Any nested layouts, like the "Resources" and "Get in touch" section in the example below, should be handled on case-by-case basis. Here, they are adapted into a 33/66% layout, providing more space to the section that needs it:
- {{ image ( - url="https://assets.ubuntu.com/v1/371c9de8-vanilla-docs-hero-layout-6.jpg", - alt="", - width="2464", - height="849", - hi_def=True, - loading="auto" - ) | safe - }} -
- -
-
+ {{ image ( - url="https://assets.ubuntu.com/v1/618e6977-vanilla-docs-hero-layout-7.jpg", + url="https://assets.ubuntu.com/v1/371c9de8-vanilla-docs-hero-layout-6.jpg", alt="", - width="1600", - height="621", + width="2464", + height="849", hi_def=True, loading="auto" ) | safe }} + +
+ +
+
+ + {{ image ( + url="https://assets.ubuntu.com/v1/618e6977-vanilla-docs-hero-layout-7.jpg", + alt="", + width="1600", + height="621", + hi_def=True, + loading="auto" + ) | safe + }} +
-### Nested grid rows +[See example of a hero with a nested row in 75% column](/docs/examples/brochure/hero-line-breaks) -For more complicated layouts use the nested grid row inside the 75% column. This allows for more complex layouts, like the one below: +For more complicated layouts utilise both columns of the 25/75% split and a nested grid row inside the 75% column. This allows for more complex layouts, like the one below:
- {{ image ( - url="https://assets.ubuntu.com/v1/a77be808-vanilla-docs-hero-layout-8.jpg", - alt="", - width="2464", - height="754", - hi_def=True, - loading="auto" - ) | safe - }} + + {{ image ( + url="https://assets.ubuntu.com/v1/a77be808-vanilla-docs-hero-layout-8.jpg", + alt="", + width="2464", + height="754", + hi_def=True, + loading="auto" + ) | safe + }} +
-
- -
+[See example of a hero with a signpost logo and nested grid row in 75% column](/docs/examples/brochure/hero-nested-grid) From 2060f3f4fbb0ee28fe1a2f6f7ab99293dd1ef1bd Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 10:37:01 +0200 Subject: [PATCH 06/23] Add a reference to suru component --- templates/docs/patterns/hero.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index b63bf44909..543411be64 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -303,3 +303,9 @@ For more complicated layouts utilise both columns of the 25/75% split and a nest
[See example of a hero with a signpost logo and nested grid row in 75% column](/docs/examples/brochure/hero-nested-grid) + +## Suru + +Suru backgrounds are a common way to provide visual separation between hero and rest of the page. + +Check out the [Suru component documentation](/docs/patterns/suru) for more information on how to use it and relevant examples. From f1a380b7ba2fcafa8f3700b162b493089bdb9018 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 11:41:41 +0200 Subject: [PATCH 07/23] Fix signpost example images --- templates/docs/patterns/hero.md | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index 543411be64..2390b1c3f7 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -17,7 +17,7 @@ This article explains how to design and build hero sections on brochure sites: ### Headings section -In its simplest form, a hero is a single `h1` heading wrapped in a section container with `p-section--hero` class name (that provides the necessary 1.5rem top padding and 4rem bottom padding). The `h1` heading is the only required element in all heros. Examples of this type of usage can be found on [canonical.com/blog](https://canonical.com/blog), archive and similar pages. +In its simplest form, a hero is a single `h1` heading wrapped in a [section container](/docs/patterns/section#hero-sections) with `p-section--hero` class name (that provides the necessary 1.5rem top padding and 4rem bottom padding). The `h1` heading is the only required element in all heros. Examples of this type of usage can be found on [canonical.com/blog](https://canonical.com/blog), archive and similar pages.
@@ -143,7 +143,7 @@ We have [utilities to show/hide](https://vanillaframework.io/docs/utilities/hide ### The 25/75% split on large screens -The examples above use the 25/75% section layout. We have so far only placed content in the 75% column, leaving the first 3 columns of the 12-column large screen grid empty. +The examples above use [the 25/75% section layout](/docs/patterns/grid#common-patterns). We have so far only placed content in the 75% column, leaving the first 3 columns of the 12-column large screen grid empty. The first three columns (25% column) can be used for purposes other than adding white space, provided content fits comfortably and doesn’t wrap excessively. @@ -187,14 +187,13 @@ As a “signpost” - a place to insert relevant small logos for example. Wherever possible, take care to align the baseline of any text in the logo to the baseline of the `h1`. This can be done by exporting the logo with the needed amount of white space inside the image file itself: -
{{ image ( - url="https://assets.ubuntu.com/v1/74fb0cc7-vanilla-docs-hero-layout-3.jpg", + url="https://assets.ubuntu.com/v1/00a46094-vanilla-docs-hero-layout-3.jpg", alt="", width="2464", - height="625", + height="641", hi_def=True, loading="auto" ) | safe @@ -210,15 +209,14 @@ By default, the 25/75 split is preserved on medium screens by using 2 and 4 of t It is fine as long as the content of first column is small enough to fit in 2 of the grid’s 6 columns, as in the following example: -
{{ image ( - url="https://assets.ubuntu.com/v1/20d3e0a4-vanilla-docs-hero-layout-5.jpg", + url="https://assets.ubuntu.com/v1/0099306a-vanilla-docs-hero-layout-4.jpg", alt="", width="1600", - height="673", + height="735", hi_def=True, loading="auto" ) | safe @@ -228,17 +226,16 @@ It is fine as long as the content of first column is small enough to fit in 2 of
-In a case where content in the first column is too large to fit in 2 columns, or the content of second column being long enough to justify using full width of the screen, the layout should be adjusted to stack on medium screens (by using `row--25-75-on-large` variant). +In a case where content in the first column is too large to fit in 2 columns, or the content of second column being long enough to justify using full width of the screen, the layout should be adjusted to stack on medium screens (by using `row--25-75-on-large` [variant](/docs/patterns/grid#common-patterns)). -
{{ image ( - url="https://assets.ubuntu.com/v1/1a900733-vanilla-docs-hero-layout-4.jpg", + url="https://assets.ubuntu.com/v1/f4ca6477-vanilla-docs-hero-layout-5.jpg", alt="", width="1600", - height="747", + height="761", hi_def=True, loading="auto" ) | safe From 265af8549d9932699fb95474963886afda1a98c9 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 13:13:18 +0200 Subject: [PATCH 08/23] Update to use muted lines --- .../docs/examples/brochure/hero-blog.html | 51 +++++++++---------- .../examples/brochure/hero-line-breaks.html | 2 +- .../examples/brochure/hero-nested-grid.html | 2 +- .../docs/examples/brochure/hero-rules.html | 2 +- .../docs/examples/brochure/hero-signpost.html | 2 +- templates/docs/patterns/hero.md | 4 +- templates/docs/patterns/rule.md | 4 +- 7 files changed, 33 insertions(+), 34 deletions(-) diff --git a/templates/docs/examples/brochure/hero-blog.html b/templates/docs/examples/brochure/hero-blog.html index 4da3e0af2d..eea86aaa43 100644 --- a/templates/docs/examples/brochure/hero-blog.html +++ b/templates/docs/examples/brochure/hero-blog.html @@ -26,33 +26,32 @@

Canonical joins the OpenAirInterface Software Alliance

-
+
- - - - O-RAN - - - - - - Open RAN - - - - - - Telco - - - - - - Telco 5G - - -
+ + + O-RAN + + + + + + Open RAN + + + + + + Telco + + + + + + Telco 5G + + +
diff --git a/templates/docs/examples/brochure/hero-line-breaks.html b/templates/docs/examples/brochure/hero-line-breaks.html index 9700a934bb..ba71a862de 100644 --- a/templates/docs/examples/brochure/hero-line-breaks.html +++ b/templates/docs/examples/brochure/hero-line-breaks.html @@ -11,7 +11,7 @@

Press centre

All the latest news and featured stories from Canonical.

-
+

Resources

diff --git a/templates/docs/examples/brochure/hero-nested-grid.html b/templates/docs/examples/brochure/hero-nested-grid.html index 88190109fc..e8cfc1c1d1 100644 --- a/templates/docs/examples/brochure/hero-nested-grid.html +++ b/templates/docs/examples/brochure/hero-nested-grid.html @@ -26,7 +26,7 @@

What is Kubeflow?

Charmed Kubeflow is Canonical’s distribution. It is secure and seamlessly integrated with other leading tools such as MLflow.

-
+
Try out Charmed Kubeflow Read our MLOps toolkit diff --git a/templates/docs/examples/brochure/hero-rules.html b/templates/docs/examples/brochure/hero-rules.html index 93a8d1f80a..44e9582711 100644 --- a/templates/docs/examples/brochure/hero-rules.html +++ b/templates/docs/examples/brochure/hero-rules.html @@ -14,7 +14,7 @@

Enterprise Data Fabric
for rapid innovation at a

Canonical’s open source enterprise Data Fabric suite delivers better ROI across clouds. Engineered for the most critical workloads.

-
+
Get in touch Read the documentation diff --git a/templates/docs/examples/brochure/hero-signpost.html b/templates/docs/examples/brochure/hero-signpost.html index 78a0c4b75b..1cde486aa7 100644 --- a/templates/docs/examples/brochure/hero-signpost.html +++ b/templates/docs/examples/brochure/hero-signpost.html @@ -16,7 +16,7 @@

Apache Spark® operations,
simplified

Secure and automate the deployment, maintenance and upgrades of Spark on Kubernetes. Run your big data clusters across private and public clouds.

-
+
Contact us diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index 2390b1c3f7..6b1d714e48 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -97,9 +97,7 @@ Below, the paragraph is followed by another pause, followed by a form element: ### Using horizontal rules -We insert [rules](/docs/patterns/rule) (`p-rule`) when large blocks of content are followed by one or more small elements, to help turn the small elements into a block that doesn’t seem overshadowed by preceding content. - -A couple of examples below demonstrating both options below: +We insert [muted rules](/docs/patterns/rule) (`p-rule--muted`) when large blocks of content are followed by one or more small elements, to help turn the small elements into a block that doesn’t seem overshadowed by preceding content.
diff --git a/templates/docs/patterns/rule.md b/templates/docs/patterns/rule.md index 9d78225ade..d53d2e8552 100644 --- a/templates/docs/patterns/rule.md +++ b/templates/docs/patterns/rule.md @@ -12,13 +12,15 @@ It indicates the direction in which we want the viewer to read the content. ## Default +Main page sections are often separated by horizontal rules. You can use the `p-rule` class name to create a default horizontal rule. +
View example of a default horizontal rule
## Muted -You can add a muted rule to make it less prominent by using the `p-rule--muted` class name. This is useful for separating smaller blocks of content without drawing too much attention to the rule itself. +Muted rules are usually used within sections of content. You can add a muted rule to make it less prominent by using the `p-rule--muted` class name. This is useful for separating smaller blocks of content without drawing too much attention to the rule itself.
View example of a muted horizontal rule From 41522381575c4082ac2dedf86043819cbc5e8059 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 13:37:19 +0200 Subject: [PATCH 09/23] Delete old hero examples --- .../docs/examples/brochure/hero-25-75.html | 44 ------------------- .../docs/examples/brochure/hero-50-50.html | 30 ------------- .../examples/brochure/hero-75-offset.html | 32 -------------- templates/docs/layouts/brochure.html | 38 ---------------- 4 files changed, 144 deletions(-) delete mode 100644 templates/docs/examples/brochure/hero-25-75.html delete mode 100644 templates/docs/examples/brochure/hero-50-50.html delete mode 100644 templates/docs/examples/brochure/hero-75-offset.html diff --git a/templates/docs/examples/brochure/hero-25-75.html b/templates/docs/examples/brochure/hero-25-75.html deleted file mode 100644 index 3754c65527..0000000000 --- a/templates/docs/examples/brochure/hero-25-75.html +++ /dev/null @@ -1,44 +0,0 @@ -{% extends "_layouts/examples.html" %} -{% block title %}Hero / 25/75{% endblock %} - -{% block style %} -{% endblock %} - -{% set is_paper = True %} -{% block content %} - -
-
-
-
-

H1: 2-3 words

-
-
-
-

H2: 5-15 words, up to 3 rows of copy...

-
-
-
-
-
- -
-
-
-

Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.

-
-
-
-
-
-
- CTA up to 3 words - Optional button - Link CTA up to 5 words - -
-
-
-
- -{% endblock %} diff --git a/templates/docs/examples/brochure/hero-50-50.html b/templates/docs/examples/brochure/hero-50-50.html deleted file mode 100644 index 9d93060d4a..0000000000 --- a/templates/docs/examples/brochure/hero-50-50.html +++ /dev/null @@ -1,30 +0,0 @@ -{% extends "_layouts/examples.html" %} -{% block title %}Hero / 50/50{% endblock %} - -{% block style %} -{% endblock %} - -{% set is_paper = True %} -{% block content %} -
-
-
-

H1: 3-8 words

-
-
-
-

H2: 5-13 words, up to 3 rows of copy...

-
-
-

Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.

-

In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.

-
-
-
- CTA up to 3 words - CTA up to 3 words -
-
-
-
-{% endblock %} diff --git a/templates/docs/examples/brochure/hero-75-offset.html b/templates/docs/examples/brochure/hero-75-offset.html deleted file mode 100644 index d94953ba63..0000000000 --- a/templates/docs/examples/brochure/hero-75-offset.html +++ /dev/null @@ -1,32 +0,0 @@ -{% extends "_layouts/examples.html" %} -{% block title %}Hero / 75 offset{% endblock %} - -{% block style %} -{% endblock %} - -{% set is_paper = True %} -{% block content %} - -
-
-
-
-
-

H1: 3-5 words

-

H2: 5-15 words, up to 3 rows of copy...

-
-
-

Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.

-

In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.

-
-
- CTA up to 3 words - Optional button - Link CTA up to 5 words - -
-
-
-
- -{% endblock %} diff --git a/templates/docs/layouts/brochure.html b/templates/docs/layouts/brochure.html index ece8bd3a18..083f94324c 100644 --- a/templates/docs/layouts/brochure.html +++ b/templates/docs/layouts/brochure.html @@ -207,44 +207,6 @@

View an example of 25/75 responsive split
-
-
-
-
-
-
-
-

Section examples

-

Below we present a few examples of how the sections can be used in practice. The examples are not meant to be exhaustive, but rather to give you a sense of how some commonly used sections can be built.

-
-
-
-
-
-
-

Hero 75 offset

-

The most common hero variant based on 25/75 grid with empty first column. Sub-heading, paragraph text section and CTA section are optional. This kind of hero is usually followed by a suru, and in such case the last content section of the hero should not have bottom spacing of its own.

-
-
-
View an example of the hero section with offset 75 layout
-
-
-
-

Hero 25/75

-

Hero based on 25/75 grid should be used for hero sections with shorter main title or more complicated content structure (including longer text or additional images).

-
-
-
View an example of the hero section with 25/75 layout
-
-
-
-

Hero 50/50

-

Hero 50/50 can be used on pages where the 50/50 split is used predominantely. Usually it will not be followed by suru, as the default suru is aligned with 25/75 grid split.

-
-
-
View an example of the hero section with 50/50 layout
-
-
Work in progress
From 96397d90bc6582b6320a67a19b899e01d04ea858 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 13:43:40 +0200 Subject: [PATCH 10/23] Move examples to patterns instead --- .../{brochure => patterns/hero}/hero-404.html | 0 .../hero}/hero-blog.html | 0 .../hero}/hero-heading-1.html | 0 .../hero}/hero-heading-2.html | 0 .../hero}/hero-line-breaks.html | 0 .../hero}/hero-nested-grid.html | 0 .../hero}/hero-rules.html | 0 .../hero}/hero-sections-search.html | 0 .../hero}/hero-sections.html | 0 .../hero}/hero-signpost.html | 0 templates/docs/patterns/hero.md | 54 +++++++++---------- 11 files changed, 27 insertions(+), 27 deletions(-) rename templates/docs/examples/{brochure => patterns/hero}/hero-404.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-blog.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-heading-1.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-heading-2.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-line-breaks.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-nested-grid.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-rules.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-sections-search.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-sections.html (100%) rename templates/docs/examples/{brochure => patterns/hero}/hero-signpost.html (100%) diff --git a/templates/docs/examples/brochure/hero-404.html b/templates/docs/examples/patterns/hero/hero-404.html similarity index 100% rename from templates/docs/examples/brochure/hero-404.html rename to templates/docs/examples/patterns/hero/hero-404.html diff --git a/templates/docs/examples/brochure/hero-blog.html b/templates/docs/examples/patterns/hero/hero-blog.html similarity index 100% rename from templates/docs/examples/brochure/hero-blog.html rename to templates/docs/examples/patterns/hero/hero-blog.html diff --git a/templates/docs/examples/brochure/hero-heading-1.html b/templates/docs/examples/patterns/hero/hero-heading-1.html similarity index 100% rename from templates/docs/examples/brochure/hero-heading-1.html rename to templates/docs/examples/patterns/hero/hero-heading-1.html diff --git a/templates/docs/examples/brochure/hero-heading-2.html b/templates/docs/examples/patterns/hero/hero-heading-2.html similarity index 100% rename from templates/docs/examples/brochure/hero-heading-2.html rename to templates/docs/examples/patterns/hero/hero-heading-2.html diff --git a/templates/docs/examples/brochure/hero-line-breaks.html b/templates/docs/examples/patterns/hero/hero-line-breaks.html similarity index 100% rename from templates/docs/examples/brochure/hero-line-breaks.html rename to templates/docs/examples/patterns/hero/hero-line-breaks.html diff --git a/templates/docs/examples/brochure/hero-nested-grid.html b/templates/docs/examples/patterns/hero/hero-nested-grid.html similarity index 100% rename from templates/docs/examples/brochure/hero-nested-grid.html rename to templates/docs/examples/patterns/hero/hero-nested-grid.html diff --git a/templates/docs/examples/brochure/hero-rules.html b/templates/docs/examples/patterns/hero/hero-rules.html similarity index 100% rename from templates/docs/examples/brochure/hero-rules.html rename to templates/docs/examples/patterns/hero/hero-rules.html diff --git a/templates/docs/examples/brochure/hero-sections-search.html b/templates/docs/examples/patterns/hero/hero-sections-search.html similarity index 100% rename from templates/docs/examples/brochure/hero-sections-search.html rename to templates/docs/examples/patterns/hero/hero-sections-search.html diff --git a/templates/docs/examples/brochure/hero-sections.html b/templates/docs/examples/patterns/hero/hero-sections.html similarity index 100% rename from templates/docs/examples/brochure/hero-sections.html rename to templates/docs/examples/patterns/hero/hero-sections.html diff --git a/templates/docs/examples/brochure/hero-signpost.html b/templates/docs/examples/patterns/hero/hero-signpost.html similarity index 100% rename from templates/docs/examples/brochure/hero-signpost.html rename to templates/docs/examples/patterns/hero/hero-signpost.html diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index 6b1d714e48..048cc12197 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -20,7 +20,7 @@ This article explains how to design and build hero sections on brochure sites: In its simplest form, a hero is a single `h1` heading wrapped in a [section container](/docs/patterns/section#hero-sections) with `p-section--hero` class name (that provides the necessary 1.5rem top padding and 4rem bottom padding). The `h1` heading is the only required element in all heros. Examples of this type of usage can be found on [canonical.com/blog](https://canonical.com/blog), archive and similar pages. -[See example of a hero with a single heading](/docs/examples/brochure/hero-heading-1) +[See example of a hero with a single heading](/docs/examples/patterns/hero/hero-heading-1) ### Headings section with a subtitle Often the `h1` heading is followed by a subtitle or another kind of suplementary text. It should be implemented as a paragraph with `p-heading--2`. The spacing between `h1` and `h2`-sized headings is adjusted by Vanilla to shave off the excess margin and paddding. This makes them look like they are part of the same paragraph: -[See example of a hero with a heading and a subtitle](/docs/examples/brochure/hero-heading-2) +[See example of a hero with a heading and a subtitle](/docs/examples/patterns/hero/hero-heading-2) ### Additional content following the headings section @@ -62,7 +62,7 @@ Any additional content should be separated from headings by wrapping them in ano In the following example, we have a headings section, then pause, then a paragraph: -[See example of a hero with additional content](/docs/examples/brochure/hero-sections) +[See example of a hero with additional content](/docs/examples/patterns/hero/hero-sections) Below, the paragraph is followed by another pause, followed by a form element: -[See example of a hero with a form element](/docs/examples/brochure/hero-sections-search) +[See example of a hero with a form element](/docs/examples/patterns/hero/hero-sections-search) ### Using horizontal rules We insert [muted rules](/docs/patterns/rule) (`p-rule--muted`) when large blocks of content are followed by one or more small elements, to help turn the small elements into a block that doesn’t seem overshadowed by preceding content. -[See example of a hero with horizontal rules](/docs/examples/brochure/hero-rules) +[See example of a hero with horizontal rules](/docs/examples/patterns/hero/hero-rules) ### Deliberate line breaks @@ -122,7 +122,7 @@ When text in headings wraps, wherever possible, choose the best place in the sen We have [utilities to show/hide](https://vanillaframework.io/docs/utilities/hide) line breaks at specific breakpoints. We can also insert non-breaking spaces (` `) to achieve the same effect near the end of the line. -[See example of a hero with deliberate line breaks](/docs/examples/brochure/hero-line-breaks) +[See example of a hero with deliberate line breaks](/docs/examples/patterns/hero/hero-line-breaks) ## Layouts @@ -150,7 +150,7 @@ A few examples: As a container for content that is known to be short and unlikely to become longer due to copy changes: -[See example of a hero with a heading in 25% column (404 error screen)](/docs/examples/brochure/hero-404) +[See example of a hero with a heading in 25% column (404 error screen)](/docs/examples/patterns/hero/hero-404) -[See example of a hero with a portrait in 25% column (blog post)](/docs/examples/brochure/hero-blog) +[See example of a hero with a portrait in 25% column (blog post)](/docs/examples/patterns/hero/hero-blog) As a “signpost” - a place to insert relevant small logos for example. Wherever possible, take care to align the baseline of any text in the logo to the baseline of the `h1`. This can be done by exporting the logo with the needed amount of white space inside the image file itself: -[See example of a hero with a signpost logo in 25% column](/docs/examples/brochure/hero-signpost) +[See example of a hero with a signpost logo in 25% column](/docs/examples/patterns/hero/hero-signpost) ### The 25/75% split on medium screens @@ -209,7 +209,7 @@ It is fine as long as the content of first column is small enough to fit in 2 of
- + {{ image ( url="https://assets.ubuntu.com/v1/0099306a-vanilla-docs-hero-layout-4.jpg", alt="", @@ -220,7 +220,7 @@ It is fine as long as the content of first column is small enough to fit in 2 of ) | safe }} - See example of a hero with 25/75 layout split on medium screens + See example of a hero with 25/75 layout split on medium screens
@@ -228,7 +228,7 @@ In a case where content in the first column is too large to fit in 2 columns, or
- + {{ image ( url="https://assets.ubuntu.com/v1/f4ca6477-vanilla-docs-hero-layout-5.jpg", alt="", @@ -239,7 +239,7 @@ In a case where content in the first column is too large to fit in 2 columns, or ) | safe }} - See example of a hero with 25/75 layout stacked on medium screens + See example of a hero with 25/75 layout stacked on medium screens
@@ -250,7 +250,7 @@ We encourage examining the content and finding a layout that makes better use of Layouts where the 25% column on desktop is empty automatically stretch the 75% container to fill the full width on medium screens. Any nested layouts, like the "Resources" and "Get in touch" section in the example below, should be handled on case-by-case basis. Here, they are adapted into a 33/66% layout, providing more space to the section that needs it:
- + {{ image ( url="https://assets.ubuntu.com/v1/371c9de8-vanilla-docs-hero-layout-6.jpg", alt="", @@ -265,7 +265,7 @@ Layouts where the 25% column on desktop is empty automatically stretch the 75% c
- + {{ image ( url="https://assets.ubuntu.com/v1/618e6977-vanilla-docs-hero-layout-7.jpg", alt="", @@ -279,12 +279,12 @@ Layouts where the 25% column on desktop is empty automatically stretch the 75% c
-[See example of a hero with a nested row in 75% column](/docs/examples/brochure/hero-line-breaks) +[See example of a hero with a nested row in 75% column](/docs/examples/patterns/hero/hero-line-breaks) For more complicated layouts utilise both columns of the 25/75% split and a nested grid row inside the 75% column. This allows for more complex layouts, like the one below: -[See example of a hero with a signpost logo and nested grid row in 75% column](/docs/examples/brochure/hero-nested-grid) +[See example of a hero with a signpost logo and nested grid row in 75% column](/docs/examples/patterns/hero/hero-nested-grid) ## Suru From f613282bb84986459e5d82aa7411482fc7fd413d Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 14:07:10 +0200 Subject: [PATCH 11/23] Add hero docs links to side nav and changelog --- releases.yml | 4 ++++ side-navigation.yaml | 2 ++ templates/docs/patterns/section.md | 2 ++ 3 files changed, 8 insertions(+) diff --git a/releases.yml b/releases.yml index 9569b7d4a5..d07ac4af01 100644 --- a/releases.yml +++ b/releases.yml @@ -4,6 +4,10 @@ url: /docs/patterns/suru#divider-suru status: New notes: We've introduced a new divider variant of the Suru section component. + - component: Hero + url: /docs/patterns/hero + status: New + notes: We've introduced new detailed documenation for the hero pattern. - version: 4.10.0 features: - component: Navigation / Themes diff --git a/side-navigation.yaml b/side-navigation.yaml index 9a56582130..d5212aa2c8 100644 --- a/side-navigation.yaml +++ b/side-navigation.yaml @@ -52,6 +52,8 @@ url: /docs/patterns/grid - title: Heading icon url: /docs/patterns/heading-icon + - title: Hero pattern + url: /docs/patterns/hero - title: Icons url: /docs/patterns/icons - title: Images diff --git a/templates/docs/patterns/section.md b/templates/docs/patterns/section.md index b56aadcf9a..bbea147260 100644 --- a/templates/docs/patterns/section.md +++ b/templates/docs/patterns/section.md @@ -14,6 +14,8 @@ Use a hero section component (`.p-section--hero`) to create a hero section with View example of the hero section
+For more information on specific layouts and variants of hero section pattern, see the full [hero pattern documentation](/docs/patterns/hero). + ## Regular sections Use a section component (`.p-section`) for displaying subsequent sections on the page on a same background. They should be used in place of strips for most of the standard page content. From a350395baad22d9fcd382f9e2bf43028e1884872 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 14:25:25 +0200 Subject: [PATCH 12/23] Fix spelling --- templates/docs/patterns/hero.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index 048cc12197..d291afcd48 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -17,7 +17,7 @@ This article explains how to design and build hero sections on brochure sites: ### Headings section -In its simplest form, a hero is a single `h1` heading wrapped in a [section container](/docs/patterns/section#hero-sections) with `p-section--hero` class name (that provides the necessary 1.5rem top padding and 4rem bottom padding). The `h1` heading is the only required element in all heros. Examples of this type of usage can be found on [canonical.com/blog](https://canonical.com/blog), archive and similar pages. +In its simplest form, a hero is a single `h1` heading wrapped in a [section container](/docs/patterns/section#hero-sections) with `p-section--hero` class name (that provides the necessary shallow top padding and deep bottom padding). The `h1` heading is the only required element in all hero sections. Examples of this type of usage can be found on [Canonical blog](https://canonical.com/blog), archive and similar pages.
@@ -37,7 +37,7 @@ In its simplest form, a hero is a single `h1` heading wrapped in a [section cont ### Headings section with a subtitle -Often the `h1` heading is followed by a subtitle or another kind of suplementary text. It should be implemented as a paragraph with `p-heading--2`. The spacing between `h1` and `h2`-sized headings is adjusted by Vanilla to shave off the excess margin and paddding. This makes them look like they are part of the same paragraph: +Often the `h1` heading is followed by a subtitle or another kind of supplementary text. It should be implemented as a paragraph with `p-heading--2`. The spacing between `h1` and `h2`-sized headings is adjusted by Vanilla to shave off the excess margin and padding. This makes them look like they are part of the same paragraph:
@@ -141,7 +141,7 @@ We have [utilities to show/hide](https://vanillaframework.io/docs/utilities/hide ### The 25/75% split on large screens -The examples above use [the 25/75% section layout](/docs/patterns/grid#common-patterns). We have so far only placed content in the 75% column, leaving the first 3 columns of the 12-column large screen grid empty. +The examples above use [the 25/75% section layout](/docs/patterns/grid#common-patterns). We have so far only placed content in the 75% column, leaving the first 3 columns of the 12 column large screen grid empty. The first three columns (25% column) can be used for purposes other than adding white space, provided content fits comfortably and doesn’t wrap excessively. From 1be17905f6e12922359d3d05c598b8a137435b6d Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 14:35:21 +0200 Subject: [PATCH 13/23] Remove fake links from blog example --- templates/docs/examples/patterns/hero/hero-blog.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/docs/examples/patterns/hero/hero-blog.html b/templates/docs/examples/patterns/hero/hero-blog.html index eea86aaa43..4b332892ab 100644 --- a/templates/docs/examples/patterns/hero/hero-blog.html +++ b/templates/docs/examples/patterns/hero/hero-blog.html @@ -28,25 +28,25 @@

Canonical joins the OpenAirInterface Software Alliance

- + O-RAN - + Open RAN - + Telco - + Telco 5G From 7874c54702850aed061ebdd9ae4cc2fc22d40e34 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 24 Apr 2024 14:51:50 +0200 Subject: [PATCH 14/23] Fix standalone examples --- scss/standalone/patterns_hero.scss | 3 +++ templates/docs/examples/patterns/hero/hero-404.html | 1 + templates/docs/examples/patterns/hero/hero-blog.html | 1 + templates/docs/examples/patterns/hero/hero-heading-1.html | 1 + templates/docs/examples/patterns/hero/hero-heading-2.html | 1 + templates/docs/examples/patterns/hero/hero-line-breaks.html | 1 + templates/docs/examples/patterns/hero/hero-nested-grid.html | 1 + templates/docs/examples/patterns/hero/hero-rules.html | 1 + .../docs/examples/patterns/hero/hero-sections-search.html | 1 + templates/docs/examples/patterns/hero/hero-sections.html | 1 + templates/docs/examples/patterns/hero/hero-signpost.html | 1 + 11 files changed, 13 insertions(+) create mode 100644 scss/standalone/patterns_hero.scss diff --git a/scss/standalone/patterns_hero.scss b/scss/standalone/patterns_hero.scss new file mode 100644 index 0000000000..14e33a7b9d --- /dev/null +++ b/scss/standalone/patterns_hero.scss @@ -0,0 +1,3 @@ +@import '../vanilla'; +// hero is a pattern built with multiple components and utilities, there is no point in including them in isolation +@include vanilla; diff --git a/templates/docs/examples/patterns/hero/hero-404.html b/templates/docs/examples/patterns/hero/hero-404.html index a3aade6f5e..e129870f71 100644 --- a/templates/docs/examples/patterns/hero/hero-404.html +++ b/templates/docs/examples/patterns/hero/hero-404.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / 404{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-blog.html b/templates/docs/examples/patterns/hero/hero-blog.html index 4b332892ab..bc78a49111 100644 --- a/templates/docs/examples/patterns/hero/hero-blog.html +++ b/templates/docs/examples/patterns/hero/hero-blog.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Blog{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-heading-1.html b/templates/docs/examples/patterns/hero/hero-heading-1.html index 0b53d67816..07206c0ffe 100644 --- a/templates/docs/examples/patterns/hero/hero-heading-1.html +++ b/templates/docs/examples/patterns/hero/hero-heading-1.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Heading{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-heading-2.html b/templates/docs/examples/patterns/hero/hero-heading-2.html index db578e874d..0969946a5a 100644 --- a/templates/docs/examples/patterns/hero/hero-heading-2.html +++ b/templates/docs/examples/patterns/hero/hero-heading-2.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Subtitle{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-line-breaks.html b/templates/docs/examples/patterns/hero/hero-line-breaks.html index ba71a862de..a1d1eec43d 100644 --- a/templates/docs/examples/patterns/hero/hero-line-breaks.html +++ b/templates/docs/examples/patterns/hero/hero-line-breaks.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Line break{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-nested-grid.html b/templates/docs/examples/patterns/hero/hero-nested-grid.html index e8cfc1c1d1..d2a3656136 100644 --- a/templates/docs/examples/patterns/hero/hero-nested-grid.html +++ b/templates/docs/examples/patterns/hero/hero-nested-grid.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Nested grid{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-rules.html b/templates/docs/examples/patterns/hero/hero-rules.html index 44e9582711..dbda122706 100644 --- a/templates/docs/examples/patterns/hero/hero-rules.html +++ b/templates/docs/examples/patterns/hero/hero-rules.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Horizontal rules{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-sections-search.html b/templates/docs/examples/patterns/hero/hero-sections-search.html index 24bb292be9..1a7551a11b 100644 --- a/templates/docs/examples/patterns/hero/hero-sections-search.html +++ b/templates/docs/examples/patterns/hero/hero-sections-search.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Search{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-sections.html b/templates/docs/examples/patterns/hero/hero-sections.html index e75bac283e..b3b3ef6bf5 100644 --- a/templates/docs/examples/patterns/hero/hero-sections.html +++ b/templates/docs/examples/patterns/hero/hero-sections.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Sections{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} diff --git a/templates/docs/examples/patterns/hero/hero-signpost.html b/templates/docs/examples/patterns/hero/hero-signpost.html index 1cde486aa7..f5c51b14ae 100644 --- a/templates/docs/examples/patterns/hero/hero-signpost.html +++ b/templates/docs/examples/patterns/hero/hero-signpost.html @@ -1,5 +1,6 @@ {% extends "_layouts/examples.html" %} {% block title %}Hero / Signpost logo{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} {% set is_paper = True %} {% block content %} From aeb083a862e9c3fdffeda2bf71e7193d6ee5d874 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 7 May 2024 16:19:52 +0200 Subject: [PATCH 15/23] Don't name hero a pattern --- side-navigation.yaml | 2 +- templates/docs/patterns/hero.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/side-navigation.yaml b/side-navigation.yaml index d5212aa2c8..4e6fbb7c10 100644 --- a/side-navigation.yaml +++ b/side-navigation.yaml @@ -52,7 +52,7 @@ url: /docs/patterns/grid - title: Heading icon url: /docs/patterns/heading-icon - - title: Hero pattern + - title: Hero url: /docs/patterns/hero - title: Icons url: /docs/patterns/icons diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md index d291afcd48..d0ed5a01d5 100644 --- a/templates/docs/patterns/hero.md +++ b/templates/docs/patterns/hero.md @@ -1,7 +1,7 @@ --- wrapper_template: '_layouts/docs.html' context: - title: Hero pattern | Components + title: Hero | Components --- This article explains how to design and build hero sections on brochure sites: From b5600f83397432bf3c6f9afbf2c70aa8bc17f560 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 7 May 2024 15:08:59 +0200 Subject: [PATCH 16/23] Remove dividers on smaller screens --- scss/_patterns_equal-height-row.scss | 157 +++++---------------------- 1 file changed, 26 insertions(+), 131 deletions(-) diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss index 86cf518b56..d13869ab29 100644 --- a/scss/_patterns_equal-height-row.scss +++ b/scss/_patterns_equal-height-row.scss @@ -1,91 +1,5 @@ @import 'settings'; -// wrapper mixin that provides relevant class selectors for 1st, 2nd and 3rd dividers -@mixin position-divider-by-order-in-grid($divider-order, $large-screen: false) { - // for large screens, dividers are positioned as pseudo elements at row level - @if $large-screen { - @if $divider-order == 1 { - &.has-1st-divider::before { - @content; - } - } - - @if $divider-order == 2 { - &.has-2nd-divider::after { - @content; - } - } - - @if $divider-order == 3 { - // when 3rd-divider is present and 1st-divider is not present - &.has-3rd-divider:not(.has-1st-divider)::before, - // when 3rd-divider is present and 2nd-divider is not present - &.has-3rd-divider:not(.has-2nd-divider)::after { - @content; - } - - // when only 3rd-divider is present - &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::before { - @content; - } - - &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::after { - display: none; - } - } - } @else { - // for smaller screens, dividers are positioned as pseudo elements at column level - @if $divider-order == 1 { - &.has-1st-divider .p-equal-height-row__col::before { - @content; - } - } - - @if $divider-order == 2 { - &.has-2nd-divider .p-equal-height-row__col::after { - @content; - } - } - - @if $divider-order == 3 { - &.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before, - &.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after { - @content; - } - - &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::before { - @content; - } - - &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::after { - display: none; - } - } - } -} - -@mixin divider-styles($large-screen: false) { - // For each row or column grid we only have access to two pseudo elements - // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after) - // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before) - @if $large-screen { - &.has-1st-divider::before, - &.has-2nd-divider::after, - &.has-3rd-divider:not(.has-1st-divider)::before, - &.has-3rd-divider:not(.has-2nd-divider)::after { - @content; - } - } @else { - // For smaller screens, the divider pseudo elements are inserted at the column level - &.has-1st-divider .p-equal-height-row__col::before, - &.has-2nd-divider .p-equal-height-row__col::after, - &.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before, - &.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after { - @content; - } - } -} - @mixin vf-p-equal-height-row { .p-equal-height-row { @extend %vf-row; @@ -94,7 +8,7 @@ .p-equal-height-row__col { // smaller screens each column will have border top by default - border-top-color: $colors--theme--border-default; + border-top-color: $colors--theme--border-low-contrast; border-top-style: solid; border-top-width: 1px; display: grid; @@ -127,72 +41,53 @@ } } - // divider styles - @include divider-styles($large-screen: false) { - @extend %vf-pseudo-border; - } + // DIVIDERS - // remove row level dividers for smaller screen sizes - @include divider-styles($large-screen: true) { + // For each row or column grid we only have access to two pseudo elements + // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after) + // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before) + &.has-1st-divider::before, + &.has-2nd-divider::after, + &.has-3rd-divider:not(.has-1st-divider)::before, + &.has-3rd-divider:not(.has-2nd-divider)::after { + // row level dividers are not visible on smaller screen sizes @extend %vf-pseudo-border; display: none; } - @include position-divider-by-order-in-grid(1) { - grid-row: 2; - } - - @include position-divider-by-order-in-grid(2) { - grid-row: 3; - } - - @include position-divider-by-order-in-grid(3) { - grid-row: 4; - } - - @media screen and ($breakpoint-small <= width < $breakpoint-large) { - // We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left - @include position-divider-by-order-in-grid(1) { - display: none; - } - - @include position-divider-by-order-in-grid(2) { - grid-column: 4 / 7; - grid-row: 2; - } - - @include position-divider-by-order-in-grid(3) { - grid-column: 4 / 7; - grid-row: 3; - } - } - @media screen and (width >= $breakpoint-large) { padding-bottom: $spv--strip-regular; - // remove column level dividers for large screen sizes - @include divider-styles($large-screen: false) { - display: none; - } - - @include divider-styles($large-screen: true) { + &.has-1st-divider::before, + &.has-2nd-divider::after, + &.has-3rd-divider:not(.has-1st-divider)::before, + &.has-3rd-divider:not(.has-2nd-divider)::after { display: block; grid-column-end: span 12; grid-column-start: 1; margin: auto; } - @include position-divider-by-order-in-grid(1, $large-screen: true) { + &.has-1st-divider::before { grid-row: 2; } - @include position-divider-by-order-in-grid(2, $large-screen: true) { + &.has-2nd-divider::after { grid-row: 3; } - @include position-divider-by-order-in-grid(3, $large-screen: true) { + // when 3rd-divider is present and 1st-divider is not present + &.has-3rd-divider:not(.has-1st-divider)::before, + // when 3rd-divider is present and 2nd-divider is not present + &.has-3rd-divider:not(.has-2nd-divider)::after, + // when only 3rd-divider is present + &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::before { grid-row: 4; } + + &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::after { + display: none; + } } } From 155fb0f9e3c920100b2e1f1e9e5326561f1e0a09 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 7 May 2024 15:14:12 +0200 Subject: [PATCH 17/23] Remove bottom spacing from the component --- scss/_patterns_equal-height-row.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss index d13869ab29..e8031ce968 100644 --- a/scss/_patterns_equal-height-row.scss +++ b/scss/_patterns_equal-height-row.scss @@ -3,7 +3,6 @@ @mixin vf-p-equal-height-row { .p-equal-height-row { @extend %vf-row; - padding-bottom: $spv--strip-regular * 0.5; position: relative; .p-equal-height-row__col { @@ -15,8 +14,8 @@ grid-column: span $grid-columns-small; grid-row: span 4; grid-template-rows: subgrid; + margin-bottom: $spv--small; margin-top: -1px; - padding-bottom: $spv--small; position: relative; @media screen and ($breakpoint-small <= width < $breakpoint-large) { @@ -37,7 +36,7 @@ @media screen and (width >= $breakpoint-large) { border: none; grid-column: span calc($grid-columns / 4); - padding-bottom: 0; + margin-bottom: 0; } } @@ -56,8 +55,6 @@ } @media screen and (width >= $breakpoint-large) { - padding-bottom: $spv--strip-regular; - &.has-1st-divider::before, &.has-2nd-divider::after, &.has-3rd-divider:not(.has-1st-divider)::before, From d64708ab70c1939189c0932843610c54321d12a9 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 7 May 2024 15:33:25 +0200 Subject: [PATCH 18/23] Update dividers to use muted border colour --- scss/_patterns_equal-height-row.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss index e8031ce968..a5ec3fe972 100644 --- a/scss/_patterns_equal-height-row.scss +++ b/scss/_patterns_equal-height-row.scss @@ -51,6 +51,7 @@ &.has-3rd-divider:not(.has-2nd-divider)::after { // row level dividers are not visible on smaller screen sizes @extend %vf-pseudo-border; + background-color: $colors--theme--border-low-contrast; // override border color to be low contrast display: none; } From ec7a17d4b8e79f4f0c04f9f189cde9fce0642336 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 7 May 2024 15:40:42 +0200 Subject: [PATCH 19/23] Rename divider class names to be easier to handle --- scss/_patterns_equal-height-row.scss | 28 +++++++++---------- .../equal-height-row/4-items-per-column.html | 2 +- templates/docs/patterns/equal-height-row.md | 4 +-- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss index a5ec3fe972..71623ed67c 100644 --- a/scss/_patterns_equal-height-row.scss +++ b/scss/_patterns_equal-height-row.scss @@ -45,10 +45,10 @@ // For each row or column grid we only have access to two pseudo elements // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after) // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before) - &.has-1st-divider::before, - &.has-2nd-divider::after, - &.has-3rd-divider:not(.has-1st-divider)::before, - &.has-3rd-divider:not(.has-2nd-divider)::after { + &.has-divider-1::before, + &.has-divider-2::after, + &.has-divider-3:not(.has-divider-1)::before, + &.has-divider-3:not(.has-divider-2)::after { // row level dividers are not visible on smaller screen sizes @extend %vf-pseudo-border; background-color: $colors--theme--border-low-contrast; // override border color to be low contrast @@ -56,34 +56,34 @@ } @media screen and (width >= $breakpoint-large) { - &.has-1st-divider::before, - &.has-2nd-divider::after, - &.has-3rd-divider:not(.has-1st-divider)::before, - &.has-3rd-divider:not(.has-2nd-divider)::after { + &.has-divider-1::before, + &.has-divider-2::after, + &.has-divider-3:not(.has-divider-1)::before, + &.has-divider-3:not(.has-divider-2)::after { display: block; grid-column-end: span 12; grid-column-start: 1; margin: auto; } - &.has-1st-divider::before { + &.has-divider-1::before { grid-row: 2; } - &.has-2nd-divider::after { + &.has-divider-2::after { grid-row: 3; } // when 3rd-divider is present and 1st-divider is not present - &.has-3rd-divider:not(.has-1st-divider)::before, + &.has-divider-3:not(.has-divider-1)::before, // when 3rd-divider is present and 2nd-divider is not present - &.has-3rd-divider:not(.has-2nd-divider)::after, + &.has-divider-3:not(.has-divider-2)::after, // when only 3rd-divider is present - &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::before { + &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before { grid-row: 4; } - &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::after { + &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after { display: none; } } diff --git a/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html b/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html index 1f0461052c..3bddfc42d5 100644 --- a/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html +++ b/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html @@ -5,7 +5,7 @@ {% block content %} -
+
diff --git a/templates/docs/patterns/equal-height-row.md b/templates/docs/patterns/equal-height-row.md index 538aa7e92d..dac4dda150 100644 --- a/templates/docs/patterns/equal-height-row.md +++ b/templates/docs/patterns/equal-height-row.md @@ -43,7 +43,7 @@ View example of the four items per column pattern using equal height row compone ### Cross-column dividers -You can also insert dividers that span across all columns within a row using `.has-1st-divider`, `.has-2nd-divider` and `.has-3rd-divider`. +You can also insert dividers that span across all columns within a row using `.has-divider-1`, `.has-divider-2` and `.has-divider-3`.
@@ -54,7 +54,7 @@ You can also insert dividers that span across all columns within a row using `.h
-

You may only have two dividers maximum. For example, if you have .has-1st-divider and .has-2nd-divider set for the row, then .has-3rd-divider will not be shown. This is a limitation due to usage of pseudo elements for visualising dividers that is capable of spanning across grid gaps.

+

You may only have two dividers maximum. For example, if you have .has-divider-1 and .has-divider-2 set for the row, then .has-divider-3 will not be shown. This is a limitation due to usage of pseudo elements for visualising dividers that is capable of spanning across grid gaps.

From 51d78733b4464e2d4e6d5c56c2fc94a1021b632f Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 7 May 2024 15:48:37 +0200 Subject: [PATCH 20/23] Update docs --- releases.yml | 4 ++++ templates/docs/patterns/equal-height-row.md | 7 ------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/releases.yml b/releases.yml index d07ac4af01..9ae51eef79 100644 --- a/releases.yml +++ b/releases.yml @@ -8,6 +8,10 @@ url: /docs/patterns/hero status: New notes: We've introduced new detailed documenation for the hero pattern. + - component: Equal height row / Dividers + url: /docs/patterns/equal-height-row#cross-column-dividers + status: Updated + notes: We've updated the equal height row component divider class names and removed the dividers from smaller screens. - version: 4.10.0 features: - component: Navigation / Themes diff --git a/templates/docs/patterns/equal-height-row.md b/templates/docs/patterns/equal-height-row.md index dac4dda150..dd5dd4ff4b 100644 --- a/templates/docs/patterns/equal-height-row.md +++ b/templates/docs/patterns/equal-height-row.md @@ -45,13 +45,6 @@ View example of the four items per column pattern using equal height row compone You can also insert dividers that span across all columns within a row using `.has-divider-1`, `.has-divider-2` and `.has-divider-3`. -
-
-
Note:
-

For smaller screen sizes i.e. < $breakpoint-large the divider will appear below relevant items within each column.

-
-
-

You may only have two dividers maximum. For example, if you have .has-divider-1 and .has-divider-2 set for the row, then .has-divider-3 will not be shown. This is a limitation due to usage of pseudo elements for visualising dividers that is capable of spanning across grid gaps.

From ff6325fbb3dbfcfb794a2c3fd84e846fbd4b810c Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Tue, 7 May 2024 11:24:17 -0400 Subject: [PATCH 21/23] Alphabetize documentation sidenav elements (#5080) * Fix ordering of sidenav elements to make sure they're alphabetical * programmatically sort sidenav elements by configuration in side-navigation.yaml * remove sidenav alphabetize recursive support (not needed currently) * prettier on side-navigation.yaml * simplify sidenav yaml structure --- side-navigation.yaml | 7 +++++++ webapp/app.py | 28 ++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/side-navigation.yaml b/side-navigation.yaml index 4e6fbb7c10..45e56fb509 100644 --- a/side-navigation.yaml +++ b/side-navigation.yaml @@ -11,6 +11,7 @@ - title: Migrating to v4 url: /docs/migration-guide-to-v4 - heading: Base elements + ordering: alphabetical subheadings: - title: Code url: /docs/base/code @@ -26,7 +27,9 @@ url: /docs/base/typography - title: Paper background url: /docs/base/paper + - heading: Components + ordering: alphabetical subheadings: - title: Accordion url: /docs/patterns/accordion @@ -109,6 +112,7 @@ - title: Tooltips url: /docs/patterns/tooltips - heading: Utilities + ordering: alphabetical subheadings: - title: Align url: /docs/utilities/align @@ -153,6 +157,7 @@ - title: Vertically center url: /docs/utilities/vertically-center - heading: Layouts + ordering: alphabetical subheadings: - title: Application url: /docs/layouts/application @@ -167,6 +172,7 @@ - title: Sticky footer url: /docs/layouts/sticky-footer - heading: Settings + ordering: alphabetical subheadings: - title: Animations url: /docs/settings/animation-settings @@ -187,6 +193,7 @@ - title: Table layout url: /docs/settings/table-layout - heading: Resources + ordering: alphabetical subheadings: - title: Component examples url: /docs/examples diff --git a/webapp/app.py b/webapp/app.py index affacf15bc..1fb9de765b 100644 --- a/webapp/app.py +++ b/webapp/app.py @@ -32,11 +32,39 @@ # Read side-navigation.yaml with open("side-navigation.yaml") as side_navigation_file: + # maps values of `side_navigation_file.subheadings.ordering` to their implementations + supported_orderings = { + "alphabetical": lambda subheadings, by_attribute: sorted(subheadings, key=lambda subheading: subheading[by_attribute]) + } + SIDE_NAVIGATION = yaml.load( side_navigation_file.read(), Loader=yaml.FullLoader, ) + def alphabetize_heading_items(heading, by_attribute="title"): + """ + Alphabetizes the sub-heading items contained by the heading + :param heading: + :param by_attribute: Key name of the attribute within each subheading item to use for alphabetization + :return: Altered `heading` with its subheading items alphabetized + """ + subheadings = None + subheadings_ordering_identifier = None + subheadings_ordering_fn = None + try: + subheadings_ordering_identifier = heading["ordering"] + subheadings_ordering_fn = supported_orderings[subheadings_ordering_identifier] + except KeyError: + return heading + + heading["subheadings"] = subheadings_ordering_fn(heading["subheadings"], by_attribute) + + return heading + + for heading in SIDE_NAVIGATION: + heading = alphabetize_heading_items(heading) + app = FlaskBase( __name__, From 8d12cb2875196f2a139db2d393fef85fc3df9c4d Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Tue, 7 May 2024 11:26:35 -0400 Subject: [PATCH 22/23] Table layout utilities classes also apply to descendant elements; add table layout example docs (#5070) * WD-10925 make table-layout utilities apply to nested tables * Table layout utility examples in docs * Fix table layout standalone scss * remove default table layout example; compile both table layout utility classes regardless of app settings * update table layout doc'n per layout utilities change * remove references to table layout utility standalone file * update table layout utility doc'n language --- releases.yml | 4 ++++ scss/_utilities_layout.scss | 14 +++++++---- .../table-layout-auto-nested.html | 23 +++++++++++++++++++ .../table-layout/table-layout-auto.html | 22 ++++++++++++++++++ templates/docs/settings/table-layout.md | 16 ++++++++++--- 5 files changed, 72 insertions(+), 7 deletions(-) create mode 100644 templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html create mode 100644 templates/docs/examples/utilities/table-layout/table-layout-auto.html diff --git a/releases.yml b/releases.yml index 9ae51eef79..5de4d2b068 100644 --- a/releases.yml +++ b/releases.yml @@ -4,6 +4,10 @@ url: /docs/patterns/suru#divider-suru status: New notes: We've introduced a new divider variant of the Suru section component. + - component: Table layout + url: /docs/settings/table-layout + status: Updated + notes: We've updated the utility classes (u-table-layout--auto and u-table-layout--fixed) to apply to nested tables. - component: Hero url: /docs/patterns/hero status: New diff --git a/scss/_utilities_layout.scss b/scss/_utilities_layout.scss index 2366e22b6a..fe0b4f4d10 100644 --- a/scss/_utilities_layout.scss +++ b/scss/_utilities_layout.scss @@ -3,13 +3,19 @@ @extend %fixed-width-container; } - @if ($table-layout-fixed) { - .u-table-layout--auto { + // stylelint-disable selector-max-type -- table elements can use selector types + .u-table-layout--auto { + &, + table { table-layout: auto !important; } - } @else { - .u-table-layout--fixed { + } + + .u-table-layout--fixed { + &, + table { table-layout: fixed !important; } } + // stylelint-enable selector-max-type } diff --git a/templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html b/templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html new file mode 100644 index 0000000000..4a72add2f5 --- /dev/null +++ b/templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html @@ -0,0 +1,23 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Table layout / Automatic / Nested{% endblock %} + +{% block content %} + +
+ + + + + + + + + + + + + +
Attribute nameValue
table-layoutauto
+
+ +{% endblock %} diff --git a/templates/docs/examples/utilities/table-layout/table-layout-auto.html b/templates/docs/examples/utilities/table-layout/table-layout-auto.html new file mode 100644 index 0000000000..5a157668c6 --- /dev/null +++ b/templates/docs/examples/utilities/table-layout/table-layout-auto.html @@ -0,0 +1,22 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Table layout / Automatic{% endblock %} + +{% block content %} + + + + + + + + + + + + + +
Attribute nameValue
table-layoutauto
+{% endblock %} diff --git a/templates/docs/settings/table-layout.md b/templates/docs/settings/table-layout.md index ea49952519..09ac53f828 100644 --- a/templates/docs/settings/table-layout.md +++ b/templates/docs/settings/table-layout.md @@ -8,7 +8,17 @@ By default, tables in Vanilla use `table-layout: fixed`. There are cases where you might want to use `table-layout: auto` - e.g. in automatically generated tables. To do this, you need to set the `$table-layout-fixed` variable to `true`. -Depending on the value of `$table-layout-fixed`, a utility class is generated to allow overriding if necessary: +Two utility classes are generated to allow overriding if necessary: -- If `$table-layout-fixed` is set to `true` (the default), you can use `u-table-layout--auto` to override it. -- if `$table-layout-fixed` is set to `auto` it adds a utility called `u-table-layout--fixed`. +- `u-table-layout--auto` sets the table or any descendant tables of the element it's put on to `table-layout: auto`. +- `u-table-layout--fixed` sets the table or any descendant tables of the element it's put on to `table-layout: fixed`. + +
+View example of the automatic table layout +
+ +The table layout utility classes also apply to tables nested inside an element with the utility class. + +
+View example of the automatic table layout applied to a nested table +
From 2cc257aacc35d3a29e4bdd76edf5efe1afd57531 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 7 May 2024 01:51:30 +0000 Subject: [PATCH 23/23] Update all non-major dependencies --- package.json | 10 +- yarn.lock | 262 ++++++++++++++++++++++++++------------------------- 2 files changed, 140 insertions(+), 132 deletions(-) diff --git a/package.json b/package.json index d59aac2cc8..2f6b4e30f0 100644 --- a/package.json +++ b/package.json @@ -57,22 +57,22 @@ "devDependencies": { "@canonical/cookie-policy": "3.6.3", "@canonical/latest-news": "1.5.0", - "@percy/cli": "1.28.2", + "@percy/cli": "1.28.5", "@testing-library/cypress": "10.0.1", "autoprefixer": "10.4.19", - "cypress": "13.7.1", + "cypress": "13.8.1", "markdown-spellcheck": "1.3.1", "parker": "0.0.10", "postcss": "8.4.38", "postcss-cli": "11.0.0", "postcss-scss": "4.0.9", "prettier": "3.2.5", - "sass": "1.72.0", - "stylelint": "16.3.1", + "sass": "1.77.0", + "stylelint": "16.5.0", "stylelint-config-recommended-scss": "14.0.0", "stylelint-order": "6.0.4", "stylelint-prettier": "5.0.0", "svgo": "3.2.0", - "yaml": "2.4.1" + "yaml": "2.4.2" } } diff --git a/yarn.lock b/yarn.lock index ee158f0505..b1c841882d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -81,7 +81,7 @@ resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz#feb4b7268f998956eb3ded69507869e73d005dda" integrity sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA== -"@csstools/selector-specificity@^3.0.2": +"@csstools/selector-specificity@^3.0.3": version "3.0.3" resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz#208a3929ee614967a1fc8cd6cb758d9fcbf0caae" integrity sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q== @@ -156,145 +156,148 @@ "@nodelib/fs.scandir" "2.1.3" fastq "^1.6.0" -"@percy/cli-app@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-app/-/cli-app-1.28.2.tgz#425f7480e7ecd393bdf7480e666333ccb0c299b0" - integrity sha512-UhuxmBRcgeyBnzV7ixiSqUlMdcBg7LyrTtDJWEjQ36SH0jJOAVu020cGcPLNDDTmqXDU7DsDoNifxtPzXT+d5w== +"@percy/cli-app@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-app/-/cli-app-1.28.5.tgz#aedc5abd16bf09aa78d9fb16c2056a972315e148" + integrity sha512-7jAvbJToc985yK05ZxI8i+sCdkEi+VpR/skZaFkXYuIGaTgyUoJvALU9DSH0zWH1g0DTUtyNG+gkIoiCenDghQ== dependencies: - "@percy/cli-command" "1.28.2" - "@percy/cli-exec" "1.28.2" + "@percy/cli-command" "1.28.5" + "@percy/cli-exec" "1.28.5" -"@percy/cli-build@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.28.2.tgz#fcbda1e6566d5353c87e3d78c6e500a14c0a01ae" - integrity sha512-VWfrgcOaN6rxSCwifQ5aJuGQDU2Nmq3lvvqZsVVSj3lBbE4KsEaxyoH2Hmm2pCOXi1DzOQ0+zHv+Ra+m4CyBvA== +"@percy/cli-build@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.28.5.tgz#2d2962e30142db3382b099c137e3257051f37050" + integrity sha512-QA6l9georJ0LN8ocpePzkx8bOQs+P9VT9Otu5clbtbARc/M7JuGzaIrw1fMHTlBjZIz+vS1DM9zTLtOa8BsAyw== dependencies: - "@percy/cli-command" "1.28.2" + "@percy/cli-command" "1.28.5" -"@percy/cli-command@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.28.2.tgz#18d04d268dc2543f5d57e0dafda255badea1786a" - integrity sha512-UUa+dSpzTcXVjzvElL4wD315QYDuGrbnXObgaztyGWdufEbvLWflU4AiQZrxC5abDXQdNWQUAAizorA5dGhaCg== +"@percy/cli-command@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.28.5.tgz#4b7808b847f469ab515439bd374230a18625981b" + integrity sha512-seS2LeqaQnBWf4Xbw0y/URTj3B9ThtWoZY/Esu5Jjkhn6Y2gL2L90Nl52+nk2jSo6C3waMw0m6oUJa2k9Dgaiw== dependencies: - "@percy/config" "1.28.2" - "@percy/core" "1.28.2" - "@percy/logger" "1.28.2" + "@percy/config" "1.28.5" + "@percy/core" "1.28.5" + "@percy/logger" "1.28.5" -"@percy/cli-config@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.28.2.tgz#72cad828d7364cfa3de12b8c907a9c5b9d054a13" - integrity sha512-O1O2n16jOm6HCzGM207/NbX+IR7ezUaQGnExi4G5SbOYqZeBIrsKpbEi/SERBfg4Kexv16LrF6NLOs75N2oaSw== +"@percy/cli-config@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.28.5.tgz#f6df0b9ef314cce340a3d6767e5686da66c8d75b" + integrity sha512-pRmuaq1sbCTJcnhejEBPXUsh8l2Ym88WywDgC85x7QlwvvD8vTk8lL7Hh7T9qvjrJpS3/HAwJQARJ+5IIY3uyw== dependencies: - "@percy/cli-command" "1.28.2" + "@percy/cli-command" "1.28.5" -"@percy/cli-exec@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.28.2.tgz#561e555d05035cf9e7fd1bc9a261c8d2ffea5515" - integrity sha512-tRvmoDJMb94XjA60a0lmN2XphzC/r70ruic+VfhFwEqDVoLY/6LxqjSXjehiSD5huXYDyPtaMeJo7oU1FxJyZg== +"@percy/cli-exec@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.28.5.tgz#ae82564506222b265dad7320c3c94113551917bf" + integrity sha512-WCpAEUI+sp7yDPSLWJmEH9rWCaZjKFnj6cHQexaDh9ak+Pi8+cWGx9Nfoaeg5LE9C/LpRMS5Z/kUCbcWdE+zWw== dependencies: - "@percy/cli-command" "1.28.2" + "@percy/cli-command" "1.28.5" cross-spawn "^7.0.3" which "^2.0.2" -"@percy/cli-snapshot@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.28.2.tgz#a6c75a35f78845fb80ec08f57bff356b59f220e1" - integrity sha512-Qda4MKjKxoM/TEBjl54lCXMJAmQB6ZZheE96pJzEJzlPQtlj9r/moM3etCV+res0qaSOgx9BL0DncruvAwM/4g== +"@percy/cli-snapshot@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.28.5.tgz#11ced460f482d01ca1caf4087f973007a6e27555" + integrity sha512-m5RxvQvi16ykg68n8qk7blImVmW1jxQeLnmBO1qDOEcY3k19HxjbqdLWERO3Y5SdS2vOTocv6mEnXoKmAXVwtA== dependencies: - "@percy/cli-command" "1.28.2" + "@percy/cli-command" "1.28.5" yaml "^2.0.0" -"@percy/cli-upload@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.28.2.tgz#3a89f977eb235dc3fb3e1b4af9ad409d71cb5761" - integrity sha512-vzH4wRdAFGvktNlh57p4s9Qq+rT0MsiQ/kh7pDvzQ1lJ6glpCBXSiiahMtkR8AP8gMMzxYONAuV/htB/t8sFUw== +"@percy/cli-upload@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.28.5.tgz#dbb4c8c444b9d6466c759f333d395f57bee7e98d" + integrity sha512-fvSw5WE9OYte1YaZXZNkD4sM6NaVSM52w3RTtRup8uXshwytThGhyl2tkRadaVQ42WIIm5ICG4Cu0uAY39mHsQ== dependencies: - "@percy/cli-command" "1.28.2" + "@percy/cli-command" "1.28.5" fast-glob "^3.2.11" image-size "^1.0.0" -"@percy/cli@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.28.2.tgz#94ee5237247a2ca2490188c930d998c2f251d254" - integrity sha512-hwibBu6zsjfWXIe8WFgrKizGjxkTzYcGQ4eOPcMQXfgK3yUZ24N5v8sqCOobRA/SbdD117zp2WUEkBRWCJ85gg== - dependencies: - "@percy/cli-app" "1.28.2" - "@percy/cli-build" "1.28.2" - "@percy/cli-command" "1.28.2" - "@percy/cli-config" "1.28.2" - "@percy/cli-exec" "1.28.2" - "@percy/cli-snapshot" "1.28.2" - "@percy/cli-upload" "1.28.2" - "@percy/client" "1.28.2" - "@percy/logger" "1.28.2" - -"@percy/client@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.28.2.tgz#9b2debea1279ecb464a918c1a41aca1c8a18e244" - integrity sha512-UoQ4WY8zJhwv/7vKJS+1vbeu/T7YckSmOp/moCoAnHY6QOIXYs7EGkNyeEw5iXoQYzMw6KkkLYPC7YC0rt5pSg== - dependencies: - "@percy/env" "1.28.2" - "@percy/logger" "1.28.2" - -"@percy/config@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.28.2.tgz#8ac1210f3d0b8da6be1012bd85a3c1c25b9ada92" - integrity sha512-Q9NoenDuhRiY+eBGrw8FJmmU8hErTsjBxccUOvrfn0A4JXRvcFHitvrh85rXG/HhyT4bcoB9O93QhV6F9KTq7A== - dependencies: - "@percy/logger" "1.28.2" +"@percy/cli@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.28.5.tgz#64d187e75cd2713a2843e9ec64650db6ab493644" + integrity sha512-0RtnIdabY6aSbr7rsdd4lXCOl/Yxe+qwJd2PDA188kxr8a73lOqDmtc/txLzQRsfueMBgmDYOSUWZEBPlaqaXQ== + dependencies: + "@percy/cli-app" "1.28.5" + "@percy/cli-build" "1.28.5" + "@percy/cli-command" "1.28.5" + "@percy/cli-config" "1.28.5" + "@percy/cli-exec" "1.28.5" + "@percy/cli-snapshot" "1.28.5" + "@percy/cli-upload" "1.28.5" + "@percy/client" "1.28.5" + "@percy/logger" "1.28.5" + +"@percy/client@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.28.5.tgz#5af282be3f57a5242a206cbfc1da6e11363d4fd6" + integrity sha512-feNRRnzJWxPFWXqGBj44Kr3oX60QUUIA7HmghKqyLwuV0C3DqE/PtGCg6wU+v9Rq14+W0Qp4qpnCM3oRtSv8iw== + dependencies: + "@percy/env" "1.28.5" + "@percy/logger" "1.28.5" + pako "^2.1.0" + +"@percy/config@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.28.5.tgz#b10e18c16444ac1907570db4273d49468ea1cbf7" + integrity sha512-w6L7aR+gFGnHUZT0HrIw6ujgXutz5I8ToCTjqjfXzYmM7hr6gkPoij+eiNm2m5FLDWmOkwRW2dDEekGTXHz7/A== + dependencies: + "@percy/logger" "1.28.5" ajv "^8.6.2" cosmiconfig "^8.0.0" yaml "^2.0.0" -"@percy/core@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.28.2.tgz#66431adece2ca64ae9fa3dd95c7b39b1baffad05" - integrity sha512-7JkZrsLoHDD2bkhN4u5T/+0sC0UT73Lv1qF3lIMLu+Qjt1BhyKdnitbOnjFlrVOwqC5uNgr7/gvcULLVbJga8Q== +"@percy/core@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.28.5.tgz#339f4e5ddb049f44552ac3f8b17b30d3fdb56555" + integrity sha512-txGpE/pffSHjspZPSWhRcdXlPjdyrpC9KaQkhteIPRpUeX6VpkrLZUMRiHWF9AEq+06ZaZLTlMbeq6ffFmDo2g== dependencies: - "@percy/client" "1.28.2" - "@percy/config" "1.28.2" - "@percy/dom" "1.28.2" - "@percy/logger" "1.28.2" - "@percy/webdriver-utils" "1.28.2" + "@percy/client" "1.28.5" + "@percy/config" "1.28.5" + "@percy/dom" "1.28.5" + "@percy/logger" "1.28.5" + "@percy/webdriver-utils" "1.28.5" content-disposition "^0.5.4" cross-spawn "^7.0.3" extract-zip "^2.0.1" fast-glob "^3.2.11" micromatch "^4.0.4" mime-types "^2.1.34" + pako "^2.1.0" path-to-regexp "^6.2.0" rimraf "^3.0.2" ws "^8.0.0" + yaml "^2.4.1" -"@percy/dom@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.28.2.tgz#7908313141299bcf22862ba235c724ce19e4d66e" - integrity sha512-bUU38EMowO+y+pnLzl0naikv0pVQvcrkrBm7K7eVGUt6orRTqr5Tr8bMV7Ooac4mlMwaZvCkAH7gPhiDAONUmw== +"@percy/dom@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.28.5.tgz#274dafd709d34df294115ec561d09327189e45db" + integrity sha512-vUe1/UWzvaGUy1/0L1rshccIiCIDzTqWBVEfSHaQFylumAlztcVJWQWLlKg5S99Ok03EpsjxSr5PdM058jghug== -"@percy/env@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.28.2.tgz#25f58cc2a395cb0268658e74a84496714bd1de8a" - integrity sha512-40UhiL5MylFN39pzzoyDKgult2ZmSbuc3ADrNGBx9zyMdFEoTLZg5BcFZoSUHHjPboe2jYZFYrRqoXxix++OfA== +"@percy/env@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.28.5.tgz#aa09acf8d65d0e143b36e1e5622b6e402c10351b" + integrity sha512-Ansp8fM22UgNbGXymdcsaCFekR0mpjij3cqwOOSJeC5xiicsAo3uW4lo4gg7JcMqEQY2Y7hBhnfENtbODrnhLw== dependencies: - "@percy/logger" "1.28.2" + "@percy/logger" "1.28.5" -"@percy/logger@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.28.2.tgz#5ba2b55328acd3459a98806db01115d00587d71a" - integrity sha512-ZF1iDjY9oBL+4WEqGuJ4JJaUdyUqGhdJtS+qDV8iqrQ6VngWBpO3lg0Uhy8RIkqUSLGKbwVbnxkfvA5kXx+yAw== +"@percy/logger@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.28.5.tgz#15a832f059401e69ffd78c5c480e69cd9c4e92d0" + integrity sha512-ks3cLBs5333z4cWR427uWs80d4/UCzb13QYUYLUJKegXyCJQiW25acLzU7T3xBDQ/OzqHcXTvIZWjUzP24Q2Uw== -"@percy/sdk-utils@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/sdk-utils/-/sdk-utils-1.28.2.tgz#22d48ab0a281bbf39add303fcb1687ccac0e91a1" - integrity sha512-cMFz8AjZ2KunN0dVwzA+Wosk4B+6G9dUkh2YPhYvqs0KLcCyYs3s91IzOQmtBOYwAUVja/W/u6XmBHw0jaxg0A== +"@percy/sdk-utils@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/sdk-utils/-/sdk-utils-1.28.5.tgz#3aa11900c4c6914e7ea50e2a24d4b42f486c50bc" + integrity sha512-GFhQLFJ9dD4LHNZ0Prg5La4cS5b6dDbvht5ofzJ0/ZaTxGAmB+imxusxIk2wUYio7kQN9hlOFTs7TCLwYnCGMA== -"@percy/webdriver-utils@1.28.2": - version "1.28.2" - resolved "https://registry.yarnpkg.com/@percy/webdriver-utils/-/webdriver-utils-1.28.2.tgz#96b8433dcc16672d0d883c70b4c1842475995e82" - integrity sha512-bD0UoR1/69xcsL2mhvZ4xQKhWJYbqUJUFMiNr8xqR55Z4dArbeN9S2ZYU6aMVRemuKyn7ki0ttNFHq0z2GFvGg== +"@percy/webdriver-utils@1.28.5": + version "1.28.5" + resolved "https://registry.yarnpkg.com/@percy/webdriver-utils/-/webdriver-utils-1.28.5.tgz#df076af2219fa3873655220cc8169a9c8aa2afe9" + integrity sha512-8nYQBw1dUt0UTpF5BcxEebojH/AzrQ5yFWEO4oa5sDJGRciQvqoKZ+RfXxPDoBPK78K7P21AzYAmRKmAAYhtcg== dependencies: - "@percy/config" "1.28.2" - "@percy/sdk-utils" "1.28.2" + "@percy/config" "1.28.5" + "@percy/sdk-utils" "1.28.5" "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -979,10 +982,10 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" -css-functions-list@^3.2.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.1.tgz#2eb205d8ce9f9ce74c5c1d7490b66b77c45ce3ea" - integrity sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ== +css-functions-list@^3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.2.tgz#9a54c6dd8416ed25c1079cd88234e927526c1922" + integrity sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ== css-select@^5.1.0: version "5.1.0" @@ -1028,10 +1031,10 @@ csso@^5.0.5: dependencies: css-tree "~2.2.0" -cypress@13.7.1: - version "13.7.1" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.7.1.tgz#d1208eb04efd46ef52a30480a5da71a03373261a" - integrity sha512-4u/rpFNxOFCoFX/Z5h+uwlkBO4mWzAjveURi3vqdSu56HPvVdyGTxGw4XKGWt399Y1JwIn9E1L9uMXQpc0o55w== +cypress@13.8.1: + version "13.8.1" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.8.1.tgz#f558e51b770a409e2360031bbd36c3f4fb3f2db4" + integrity sha512-Uk6ovhRbTg6FmXjeZW/TkbRM07KPtvM5gah1BIMp4Y2s+i/NMxgaLw0+PbYTOdw1+egE0FP3mWRiGcRkjjmhzA== dependencies: "@cypress/request" "^3.0.0" "@cypress/xvfb" "^1.2.4" @@ -2668,6 +2671,11 @@ p-map@^4.0.0: dependencies: aggregate-error "^3.0.0" +pako@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86" + integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug== + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz" @@ -3118,10 +3126,10 @@ safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@1.72.0: - version "1.72.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c" - integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA== +sass@1.77.0: + version "1.77.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.0.tgz#e736c69aff9fae4a4e6dae60a979eee9c942f321" + integrity sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -3393,20 +3401,20 @@ stylelint-scss@^6.0.0: postcss-selector-parser "^6.0.15" postcss-value-parser "^4.2.0" -stylelint@16.3.1: - version "16.3.1" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.3.1.tgz#006cc6cd4bd8e7b3acb1607bb8e8de85121b7847" - integrity sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw== +stylelint@16.5.0: + version "16.5.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.5.0.tgz#4e3aff7cc2294fa54da729b972a6c38bf2a584a0" + integrity sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw== dependencies: "@csstools/css-parser-algorithms" "^2.6.1" "@csstools/css-tokenizer" "^2.2.4" "@csstools/media-query-list-parser" "^2.1.9" - "@csstools/selector-specificity" "^3.0.2" + "@csstools/selector-specificity" "^3.0.3" "@dual-bundle/import-meta-resolve" "^4.0.0" balanced-match "^2.0.0" colord "^2.9.3" cosmiconfig "^9.0.0" - css-functions-list "^3.2.1" + css-functions-list "^3.2.2" css-tree "^2.3.1" debug "^4.3.4" fast-glob "^3.3.2" @@ -3435,7 +3443,7 @@ stylelint@16.3.1: strip-ansi "^7.1.0" supports-hyperlinks "^3.0.0" svg-tags "^1.0.0" - table "^6.8.1" + table "^6.8.2" write-file-atomic "^5.0.1" supports-color@^2.0.0: @@ -3490,10 +3498,10 @@ svgo@3.2.0: csso "^5.0.5" picocolors "^1.0.0" -table@^6.8.1: - version "6.8.1" - resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf" - integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA== +table@^6.8.2: + version "6.8.2" + resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58" + integrity sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA== dependencies: ajv "^8.0.1" lodash.truncate "^4.4.2" @@ -3769,10 +3777,10 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== -yaml@2.4.1: - version "2.4.1" - resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed" - integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg== +yaml@2.4.2, yaml@^2.4.1: + version "2.4.2" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.2.tgz#7a2b30f2243a5fc299e1f14ca58d475ed4bc5362" + integrity sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA== yaml@^2.0.0: version "2.3.1"