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/releases.yml b/releases.yml index 9569b7d4a5..5de4d2b068 100644 --- a/releases.yml +++ b/releases.yml @@ -4,6 +4,18 @@ 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 + 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/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; diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss index 86cf518b56..71623ed67c 100644 --- a/scss/_patterns_equal-height-row.scss +++ b/scss/_patterns_equal-height-row.scss @@ -1,108 +1,21 @@ @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; - padding-bottom: $spv--strip-regular * 0.5; position: relative; .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; 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) { @@ -123,76 +36,56 @@ @media screen and (width >= $breakpoint-large) { border: none; grid-column: span calc($grid-columns / 4); - padding-bottom: 0; + margin-bottom: 0; } } - // 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-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 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-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; } - @include position-divider-by-order-in-grid(1, $large-screen: true) { + &.has-divider-1::before { grid-row: 2; } - @include position-divider-by-order-in-grid(2, $large-screen: true) { + &.has-divider-2::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-divider-3:not(.has-divider-1)::before, + // when 3rd-divider is present and 2nd-divider is not present + &.has-divider-3:not(.has-divider-2)::after, + // when only 3rd-divider is present + &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before { grid-row: 4; } + + &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after { + display: none; + } } } 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; } } } 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/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/side-navigation.yaml b/side-navigation.yaml index 9a56582130..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 @@ -52,6 +55,8 @@ url: /docs/patterns/grid - title: Heading icon url: /docs/patterns/heading-icon + - title: Hero + url: /docs/patterns/hero - title: Icons url: /docs/patterns/icons - title: Images @@ -107,6 +112,7 @@ - title: Tooltips url: /docs/patterns/tooltips - heading: Utilities + ordering: alphabetical subheadings: - title: Align url: /docs/utilities/align @@ -151,6 +157,7 @@ - title: Vertically center url: /docs/utilities/vertically-center - heading: Layouts + ordering: alphabetical subheadings: - title: Application url: /docs/layouts/application @@ -165,6 +172,7 @@ - title: Sticky footer url: /docs/layouts/sticky-footer - heading: Settings + ordering: alphabetical subheadings: - title: Animations url: /docs/settings/animation-settings @@ -185,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/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.

-
-
-
- -
-
- -{% 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.

-
- -
-
-
-{% 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/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/examples/patterns/hero/hero-404.html b/templates/docs/examples/patterns/hero/hero-404.html new file mode 100644 index 0000000000..e129870f71 --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-404.html @@ -0,0 +1,37 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / 404{% endblock %} +{% block standalone_css %}patterns_hero{% 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/patterns/hero/hero-blog.html b/templates/docs/examples/patterns/hero/hero-blog.html new file mode 100644 index 0000000000..bc78a49111 --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-blog.html @@ -0,0 +1,103 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Blog{% endblock %} +{% block standalone_css %}patterns_hero{% endblock %} + +{% set is_paper = True %} +{% block content %} + +
+
+
+
+
+ +
+
+

+ + Canonical + +
+ on 13 December 2023 +

+
+
+
+
+
+

Canonical joins the OpenAirInterface Software Alliance

+
+
+ +
+
+
+{% endblock %} + + + +
+ +
+
+

Canonical joins the OpenAirInterface
Software Alliance

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

Archive

+
+
+
+ +{% endblock %} diff --git a/templates/docs/examples/patterns/hero/hero-heading-2.html b/templates/docs/examples/patterns/hero/hero-heading-2.html new file mode 100644 index 0000000000..0969946a5a --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-heading-2.html @@ -0,0 +1,17 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Subtitle{% endblock %} +{% block standalone_css %}patterns_hero{% 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/patterns/hero/hero-line-breaks.html b/templates/docs/examples/patterns/hero/hero-line-breaks.html new file mode 100644 index 0000000000..a1d1eec43d --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-line-breaks.html @@ -0,0 +1,44 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Line break{% endblock %} +{% block standalone_css %}patterns_hero{% 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/patterns/hero/hero-nested-grid.html b/templates/docs/examples/patterns/hero/hero-nested-grid.html new file mode 100644 index 0000000000..d2a3656136 --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-nested-grid.html @@ -0,0 +1,47 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Nested grid{% endblock %} +{% block standalone_css %}patterns_hero{% 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.

+
+ +
+ +
+
+
+ +{% endblock %} + + + + + diff --git a/templates/docs/examples/patterns/hero/hero-rules.html b/templates/docs/examples/patterns/hero/hero-rules.html new file mode 100644 index 0000000000..dbda122706 --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-rules.html @@ -0,0 +1,26 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Horizontal rules{% endblock %} +{% block standalone_css %}patterns_hero{% 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.

+
+
+ +
+
+
+{% endblock %} diff --git a/templates/docs/examples/patterns/hero/hero-sections-search.html b/templates/docs/examples/patterns/hero/hero-sections-search.html new file mode 100644 index 0000000000..1a7551a11b --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-sections-search.html @@ -0,0 +1,36 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Search{% endblock %} +{% block standalone_css %}patterns_hero{% 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/patterns/hero/hero-sections.html b/templates/docs/examples/patterns/hero/hero-sections.html new file mode 100644 index 0000000000..b3b3ef6bf5 --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-sections.html @@ -0,0 +1,19 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Sections{% endblock %} +{% block standalone_css %}patterns_hero{% 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 %} diff --git a/templates/docs/examples/patterns/hero/hero-signpost.html b/templates/docs/examples/patterns/hero/hero-signpost.html new file mode 100644 index 0000000000..f5c51b14ae --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-signpost.html @@ -0,0 +1,28 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Hero / Signpost logo{% endblock %} +{% block standalone_css %}patterns_hero{% 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/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/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 @@

-
-
-
-
-
-
-
-

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.

-
-
- -
-
-
-

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

-
-
- -
-
-
-

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.

-
-
- -
-
Work in progress
diff --git a/templates/docs/patterns/equal-height-row.md b/templates/docs/patterns/equal-height-row.md index 538aa7e92d..dd5dd4ff4b 100644 --- a/templates/docs/patterns/equal-height-row.md +++ b/templates/docs/patterns/equal-height-row.md @@ -43,18 +43,11 @@ 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`. - -
-
-
Note:
-

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

-
-
+You can also insert dividers that span across all columns within a row using `.has-divider-1`, `.has-divider-2` and `.has-divider-3`.
-

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.

diff --git a/templates/docs/patterns/hero.md b/templates/docs/patterns/hero.md new file mode 100644 index 0000000000..d0ed5a01d5 --- /dev/null +++ b/templates/docs/patterns/hero.md @@ -0,0 +1,306 @@ +--- +wrapper_template: '_layouts/docs.html' +context: + title: Hero | Components +--- + +This article explains how to design and build hero sections on brochure sites: + +
    +
  • Considerations for different types of content
  • +
  • Considerations based on the volume of content
  • +
  • How to use the different Suru backgrounds
  • +
  • Responsive layouts
  • +
+ +## Content + +### 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 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. + + + +[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 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: + + + +[See example of a hero with a heading and a subtitle](/docs/examples/patterns/hero/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. + +In the following example, we have a headings section, then pause, then a paragraph: + + + +[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/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/patterns/hero/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? + +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/patterns/hero/hero-line-breaks) + +## Layouts + +### 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 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: + + + +[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/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/patterns/hero/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: + + + +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)). + + + +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: + + + + + +[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/patterns/hero/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. 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. + ## 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. +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. 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`. + + + +The table layout utility classes also apply to tables nested inside an element with the utility class. + + 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__, 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"