diff --git a/.changeset/clean-dancers-film.md b/.changeset/clean-dancers-film.md deleted file mode 100644 index 85f8e31cfe..0000000000 --- a/.changeset/clean-dancers-film.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@swisspost/design-system-documentation': patch -'@swisspost/design-system-styles': patch ---- - -Added official way to use label in a floating-label select as a placeholder. diff --git a/.changeset/fuzzy-forks-type.md b/.changeset/fuzzy-forks-type.md deleted file mode 100644 index b690b5c7f9..0000000000 --- a/.changeset/fuzzy-forks-type.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/design-system-styles': patch ---- - -Fixed display of button-group input when using checkbox or radio variant. diff --git a/.changeset/giant-teachers-shout.md b/.changeset/giant-teachers-shout.md deleted file mode 100644 index 8348882823..0000000000 --- a/.changeset/giant-teachers-shout.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/design-system-documentation': patch ---- - -Extended the `@swisspost/design-system-components` package getting-started docs page to show multiple ways how it can be used/imported in different project setups. diff --git a/.changeset/gorgeous-clouds-trade.md b/.changeset/gorgeous-clouds-trade.md deleted file mode 100644 index c136ca3456..0000000000 --- a/.changeset/gorgeous-clouds-trade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/design-system-documentation': minor ---- - -Added docs page on how to use columns. diff --git a/.changeset/gorgeous-gorillas-confess.md b/.changeset/gorgeous-gorillas-confess.md deleted file mode 100644 index 44d75479b1..0000000000 --- a/.changeset/gorgeous-gorillas-confess.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/design-system-styles': patch ---- - -Fixed offset of radio button when checked and in inline layout. diff --git a/.changeset/mighty-crews-thank.md b/.changeset/mighty-crews-thank.md deleted file mode 100644 index 081e197f87..0000000000 --- a/.changeset/mighty-crews-thank.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/internet-header': minor ---- - -Replaced the old twitter logo with the new X logo. diff --git a/.changeset/neat-maps-give.md b/.changeset/neat-maps-give.md deleted file mode 100644 index e1a400cee3..0000000000 --- a/.changeset/neat-maps-give.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/design-system-styles': patch ---- - -The following placeholders from the `\_text.scss` file are depreacted an will be removed in a future version: `%list-adjustment`, `%module-container`, `%default-module-spacer`, `%text-container`. diff --git a/.changeset/tricky-tables-warn.md b/.changeset/tricky-tables-warn.md new file mode 100644 index 0000000000..ec7e2b0d9d --- /dev/null +++ b/.changeset/tricky-tables-warn.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added a documentation page for the `.container` and `.container-fluid` classes. diff --git a/.changeset/wet-lions-fly.md b/.changeset/wet-lions-fly.md deleted file mode 100644 index b5c529adae..0000000000 --- a/.changeset/wet-lions-fly.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@swisspost/design-system-intranet-header': patch ---- - -Added a descriptive text to the Post logo home link. diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md index 99b1fd4e5d..ca9cec24b5 100644 --- a/packages/components-react/CHANGELOG.md +++ b/packages/components-react/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-components-react +## 1.0.22 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-components@1.6.2 + ## 1.0.21 ### Patch Changes diff --git a/packages/components-react/package.json b/packages/components-react/package.json index b333a265c5..62af440c1b 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-react", - "version": "1.0.21", + "version": "1.0.22", "license": "Apache-2.0", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -19,7 +19,7 @@ "tsc": "tsc -p ." }, "dependencies": { - "@swisspost/design-system-components": "workspace:1.6.1" + "@swisspost/design-system-components": "workspace:1.6.2" }, "devDependencies": { "@types/node": "18.18.8", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2f3149d0b4..b2483d159f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-components +## 1.6.2 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@6.4.4 + ## 1.6.1 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 85dfa275cd..df1a5c5ac6 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components", - "version": "1.6.1", + "version": "1.6.2", "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.", "license": "Apache-2.0", "main": "loader/index.cjs.js", @@ -40,7 +40,7 @@ "@floating-ui/dom": "1.5.3", "@oddbird/popover-polyfill": "0.3.1", "@stencil/core": "4.7.0", - "@swisspost/design-system-styles": "workspace:6.4.3", + "@swisspost/design-system-styles": "workspace:6.4.4", "ally.js": "1.4.1", "long-press-event": "2.4.6" }, diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md index ea47c968d2..277a6ef875 100644 --- a/packages/demo/CHANGELOG.md +++ b/packages/demo/CHANGELOG.md @@ -1,5 +1,13 @@ # @swisspost/design-system-demo +## 7.0.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@6.4.4 + - @swisspost/design-system-intranet-header@5.0.4 + ## 7.0.3 ### Patch Changes diff --git a/packages/demo/package.json b/packages/demo/package.json index e9e164fa00..dea2928ad8 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-demo", - "version": "7.0.3", + "version": "7.0.4", "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -25,8 +25,8 @@ "@ng-bootstrap/ng-bootstrap": "15.1.2", "@popperjs/core": "2.11.8", "@swimlane/ngx-datatable": "20.1.0", - "@swisspost/design-system-intranet-header": "workspace:5.0.3", - "@swisspost/design-system-styles": "workspace:6.4.3", + "@swisspost/design-system-intranet-header": "workspace:5.0.4", + "@swisspost/design-system-styles": "workspace:6.4.4", "bootstrap": "5.3.2", "core-js": "3.33.2", "highlight.js": "11.9.0", diff --git a/packages/demo/src/app/home/home.component.html b/packages/demo/src/app/home/home.component.html index 806120afe6..eb5a2e83ee 100644 --- a/packages/demo/src/app/home/home.component.html +++ b/packages/demo/src/app/home/home.component.html @@ -60,14 +60,81 @@

The Swiss Post Design System is now compatible with An rel="noopener" target="_blank" > - Support chanel + Support channel in Teams.

+
+

Compatibility

-
-
+

List of compatible version numbers with external dependencies.

+ +
+
+

Styles

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Package @swisspost/design-system-styles
VersionBootstrapAngularNg-Bootstrap
5.x5.014.x13.x
6.25.215.x14.x
6.45.316.x15.x
+
+
+

Common Web Frontend

+ + + + + + + + + + + + + + + + + + + +
Package @ch-post-common/common-web-frontend
VersionBootstrapAngularNg-Bootstrap
4.x4.612.x9.x
+
+
+
+ +
+

Setup for migration instructions

+
What environment is your application for? diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html index ccf9660a86..fb924e1d43 100644 --- a/packages/demo/src/app/intranet-layout/intranet-layout.component.html +++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.html @@ -9,25 +9,40 @@

Installation

Angular component and as such, only works with Angular projects.

-

The supported Angular versions are:

- - - - - - - - - - - - - - - - - -
Intranet HeaderAngular
4.x15.x
5.x16.x
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
List of compatible version numbers with external dependencies.
Intranet-headerBootstrapAngularNg-Bootstrap
3.x4.x14.x13.x
4.x5.215.x14.x
5.x5.216.x15.x
+

Install the latest version of the Intranet Header with:

{ multiple.forEach(multiple => { it(multiple, () => { cy.visit(`${SELECTBASEURL}${multiple}`); + cy.get('.form-select', { timeout: 30000 }).should('be.visible'); cy.percySnapshot(`Selects-${multiple}`, { widths: [400] }); }); }); - }); }); diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 0c3b7f05a6..3a3e174eb8 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-documentation", - "version": "2.3.1", + "version": "2.4.0", "description": "Swiss Post Design System Documentation.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -25,11 +25,11 @@ "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9" }, "dependencies": { - "@swisspost/design-system-components": "workspace:1.6.1", - "@swisspost/design-system-components-react": "workspace:1.0.21", + "@swisspost/design-system-components": "workspace:1.6.2", + "@swisspost/design-system-components-react": "workspace:1.0.22", "@swisspost/design-system-icons": "workspace:1.0.14", - "@swisspost/design-system-styles": "workspace:6.4.3", - "@swisspost/internet-header": "workspace:1.12.1", + "@swisspost/design-system-styles": "workspace:6.4.4", + "@swisspost/internet-header": "workspace:1.13.0", "bootstrap": "5.3.2" }, "devDependencies": { diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx index a8ab51994f..9ada585596 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx +++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx @@ -1,9 +1,12 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'; import * as TopicTeaserStories from './topic-teaser.stories'; import StylesPackageImport from '../../../shared/styles-package-import.mdx'; +import './topic-teaser.styles.scss'; +
+ # Topic Teaser
@@ -13,9 +16,14 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx'; If you use multiple topic teasers on one page, each topic teaser must have a different background. - -
+
+ + + +
- +
+ +
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts index 127280968d..8b69ba1dc0 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts +++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts @@ -7,6 +7,7 @@ const meta: Meta = { title: 'Components/Topic Teaser', parameters: { badges: [BADGE.NEEDS_REVISION], + layout: 'fullscreen', }, args: { title: 'Loremipsum', diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss new file mode 100644 index 0000000000..aeeee57ac2 --- /dev/null +++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss @@ -0,0 +1,6 @@ +@use '@swisspost/design-system-styles/core' as post; + +.topic-teaser-full-width-storybook > div > div:first-child { + overflow: hidden; + @include post.responsive-size('huge', 'padding-bottom', 'calc($value + 2rem)'); +} diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss deleted file mode 100644 index 98df3dfd65..0000000000 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@swisspost/design-system-styles/core' as post; - -@each $key, $value in post.$grid-breakpoints { - ... -} diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss index 19b499f360..f1d8a8c71a 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss @@ -1,3 +1,5 @@ +@use '@swisspost/design-system-styles/core' as post; + @include post.media-breakpoint-between(sm, lg) { .custom-class { display: block; diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss index febe98b129..5db268f38a 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss @@ -1,3 +1,5 @@ +@use '@swisspost/design-system-styles/core' as post; + // No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... } @include post.media-breakpoint-down(lg) { .custom-class { diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss index 1f7ab6b26c..20603a62c9 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss @@ -1,3 +1,5 @@ +@use '@swisspost/design-system-styles/core' as post; + // No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... } .custom-class { display: none; diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss index 149edc020c..6cce81517c 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss @@ -1,3 +1,5 @@ +@use '@swisspost/design-system-styles/core' as post; + @include post.media-breakpoint-only(xs) { .custom-class { display: block; diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx index 171d3426bb..1b7135f6b0 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx @@ -1,33 +1,36 @@ import { forEach } from '../../../../utils/react'; import { parse } from '../../../../utils/sass-export'; +import { SpecTable } from '../shared.blocks'; import scss from './breakpoints.module.scss'; export const SCSS_VARIABLES = parse(scss); export const BreakpointTable = () => ( -
- - - - - - - - - - {forEach( - SCSS_VARIABLES.breakpoint, - (data: { key: number; value: { name: string; infix: any; dimensions: string } }) => { - return ( - - - - - - ); - }, - )} - -
Class infixDimensions
{data.value.name}{data.value.dimensions}
-
+ + + Name + {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { name: string } }) => ( + + {data.value.name} + + ))} + + + + Code name + {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string }) => ( + + {data.key} + + ))} + + + Class infix + {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { infix: string } }) => ( + + {data.value.infix === 'none' ? 'none' : -{data.value.infix}-} + + ))} + + ); diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx index 01c0ff390f..bd479ccdda 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx @@ -1,7 +1,7 @@ import { Meta, Source } from '@storybook/blocks'; +import { formatAsMap } from '../../../../utils/sass-export'; import { BreakpointTable, SCSS_VARIABLES } from './breakpoints.blocks'; import * as BreakpointStories from './breakpoints.stories'; -import SampleAvailable from './breakpoints-available.sample.scss?raw'; import SampleMinWidth from './breakpoints-min-width.sample.scss?raw'; import SampleMaxWidth from './breakpoints-max-width.sample.scss?raw'; import SampleSingle from './breakpoints-single.sample.scss?raw'; @@ -24,18 +24,25 @@ breakpoints, sometimes referred to as grid tiers, for building responsively. The -You’ll find these breakpoints in a Sass map in our styles core. +## CSS + +When using our source Sass files, you have the option of using Sass variables to change the breakpoints (not recommended). + +### Sass variables + dark + code={Object.entries(SCSS_VARIABLES.variables) + .map(([key, value]) => `$${key}: ${formatAsMap(value)};`) + .join('\n')} +> -## Mixins +### Sass mixins There are several mixins available to use in your own Sass to help with building responsive layouts. -### Min-width +#### Min-width We primarily use the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. @@ -44,7 +51,7 @@ We primarily use the following media query ranges—or breakpoints—in our sour language="scss" /> -### Max-width +#### Max-width We occasionally use media queries that go in the other direction. @@ -53,7 +60,7 @@ We occasionally use media queries that go in the other direction. language="scss" /> -### Single breakpoint +#### Single breakpoint There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. @@ -62,7 +69,7 @@ There are also media queries and mixins for targeting a single segment of screen language="scss" /> -### Between breakpoints +#### Between breakpoints Similarly, media queries may span multiple breakpoint widths. diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss index 27545bd139..4eca9d885c 100644 --- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss +++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss @@ -1,24 +1,11 @@ -@use 'sass:list'; -@use 'sass:map'; @use '@swisspost/design-system-styles/core' as post; -@use '../layout.shared' as shared; +@use '../shared.module' as shared; :export { - @each $breakpoint, $value in post.$grid-breakpoints { - $i: list.index(post.$grid-breakpoints, $breakpoint $value); - $name: map.get(shared.$breakpointNames, $breakpoint) or $breakpoint; - - breakpoint_#{$breakpoint}_name: $name; + // Variables used in the spec table (some variables used on the page are defined in the shared module) - @if $i == 1 { - $keys: map.keys(post.$grid-breakpoints); - $nextValue: map.get(post.$grid-breakpoints, list.nth($keys, $i + 1)); - - breakpoint_#{$breakpoint}_infix: none; - breakpoint_#{$breakpoint}_dimensions: #{'<' + $nextValue}; - } @else { - breakpoint_#{$breakpoint}_infix: #{'' + $breakpoint + ''}; - breakpoint_#{$breakpoint}_dimensions: #{'≥' + $value}; - } + // Variables to expose under sass variables section + @each $breakpoint, $value in post.$grid-breakpoints { + variables_grid-breakpoints_#{$breakpoint}: $value; } } diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.blocks.tsx b/packages/documentation/src/stories/foundation/layout/containers/containers.blocks.tsx new file mode 100644 index 0000000000..111bbe27c3 --- /dev/null +++ b/packages/documentation/src/stories/foundation/layout/containers/containers.blocks.tsx @@ -0,0 +1,42 @@ +import { parse } from '../../../../utils/sass-export'; +import { forEach } from '../../../../utils/react'; +import { SpecTable } from '../shared.blocks'; +import scss from './containers.module.scss'; + +export const SCSS_VARIABLES = parse(scss); + +export const ContainersTable = () => ( + + + + Container max-width + + {forEach( + SCSS_VARIABLES.container, + (data: { key: string; value: { ['max-width']: string } }) => ( + {data.value['max-width']} + ), + )} + + + + Container padding + + {forEach(SCSS_VARIABLES.container, (data: { key: string; value: { padding: string } }) => ( + {data.value.padding} + ))} + + + + + Container-Fluid padding + + {forEach( + SCSS_VARIABLES.container, + (data: { key: string; value: { fluid: { padding: string } } }) => ( + {data.value.fluid.padding} + ), + )} + + +); diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx b/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx new file mode 100644 index 0000000000..1efc2ac81a --- /dev/null +++ b/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx @@ -0,0 +1,47 @@ +import { Meta, Source } from '@storybook/blocks'; +import { formatAsMap } from '../../../../utils/sass-export'; +import { ContainersTable, SCSS_VARIABLES } from './containers.blocks'; +import * as ContainerStories from './containers.stories'; + + + +# Containers + +

Containers are a fundamental building block of our Design-System that contain, pad, and align your content within a given device or viewport. They are required, when using our grid-system. While containers can be nested, most layouts do not require a nested container.

+ +We can distinguish between two different container types: + +- .container, which defines a max-width on some breakpoints. +- .container-fluid, which is width: 100% at all breakpoints. + + + +## Default container + +Our default `.container` class is a responsive, fixed-width container. + + + +
`} language="scss"/> + +## Fluid containers + +Use `.container-fluid` for a full width container, spanning the entire width of the viewport on every breakpoint. + + + +
`} language="scss"/> + +## CSS + +When using our source Sass files, you have the option of using Sass variables for customization (not recommended). + +### Sass variables + + `$${key}: ${formatAsMap(value)};`) + .join('\n')} +> diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss b/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss new file mode 100644 index 0000000000..4c578c2f7f --- /dev/null +++ b/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss @@ -0,0 +1,30 @@ +@use 'sass:map'; +@use '@swisspost/design-system-styles/core' as post; +@use '../shared.module' as shared; + +:export { + // Variables used in the spec table (some variables used on the page are defined in the shared module) + @each $breakpoint, $value in post.$grid-breakpoints { + container_#{$breakpoint}_max-width: map.get(post.$container-max-widths, $breakpoint) or none; + container_#{$breakpoint}_padding: map.get(post.$grid-container-padding, $breakpoint); + container_#{$breakpoint}_fluid_padding: map.get( + post.$grid-container-fluid-padding, + $breakpoint + ); + } + + // Variables to expose under sass variables section + @each $breakpoint, $value in post.$grid-breakpoints { + variables_container-max-widths_#{$breakpoint}: map.get(post.$container-max-widths, $breakpoint); + variables_grid-container-padding_#{$breakpoint}: map.get( + post.$grid-container-padding, + $breakpoint + ) or + none; + variables_grid-container-fluid-padding_#{$breakpoint}: map.get( + post.$grid-container-fluid-padding, + $breakpoint + ) or + none; + } +} diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts new file mode 100644 index 0000000000..0544acac1f --- /dev/null +++ b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { BADGE } from '../../../../../.storybook/constants'; + +const meta: Meta = { + title: 'Foundations/Layout/Containers', + parameters: { + badges: [BADGE.NEEDS_REVISION], + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss b/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss index 03f905f5a0..947e459731 100644 --- a/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss +++ b/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss @@ -1,12 +1,14 @@ +@use '@swisspost/design-system-styles/core' as post; + // Creates a wrapper for a series of columns -@include make-row(); +@include post.make-row(); // Make the column element grid-ready (applying everything but the width) -@include make-col-ready(); +@include post.make-col-ready(); // Without optional size values, the mixin will create equal columns (similar to using .col) -@include make-col(); -@include make-col($size, $columns: $grid-columns); +@include post.make-col(); +@include post.make-col($size, $columns: post.$grid-columns); // Offset with margins -@include make-col-offset($size, $columns: $grid-columns); +@include post.make-col-offset($size, $columns: post.$grid-columns); diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx index 62bf8a5cae..44d28a59cd 100644 --- a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx +++ b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx @@ -1,122 +1,60 @@ import LinkTo from '@storybook/addon-links/react'; import { parse } from '../../../../utils/sass-export'; import { forEach } from '../../../../utils/react'; +import { SpecTable } from '../shared.blocks'; import scss from './grid.module.scss'; export const SCSS_VARIABLES = parse(scss); -export const GridBreakpoints = () => ( -
- - - - - {forEach( - SCSS_VARIABLES.breakpoint, - (data: { key: string; value: { dimensions: string } }) => ( - - ), - )} - - - - - - {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { name: string } }) => ( - - ))} - - - - - {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { infix: string } }) => ( - - ))} - - - - - {forEach( - SCSS_VARIABLES.container, - (data: { key: string; value: { ['max-width']: string } }) => ( - - ), - )} - - - - {forEach( - SCSS_VARIABLES.container, - (data: { key: string; value: { padding: string } }) => ( - - ), - )} - - - - - {forEach( - SCSS_VARIABLES.container, - (data: { key: string; value: { fluid: { padding: string } } }) => ( - - ), - )} - - - - - {forEach( - SCSS_VARIABLES.grid, - (data: { key: string; value: { ['gutter-width']: string } }) => ( - - ), - )} - - - - - - - - - - - - - - - - - - - - -
- {data.key} -
- {data.value.dimensions} -
Name - {data.value.name} -
Class infixes - {data.value.infix === 'none' ? 'none' : {`-${data.key}-`}} -
- Container max-width - {data.value['max-width']}
- Container padding - {data.value.padding}
- Container-Fluid padding - {data.value.fluid.padding}
Gutter width{data.value['gutter-width']}
Amount of columns{SCSS_VARIABLES['grid-columns']}
Custom gutters - - yes - -
Nestable - - yes - -
Column ordering - - yes - -
-
+export const GridTable = () => ( + + + Class prefix + {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { infix: string } }) => ( + + .col-{data.value.infix === 'none' ? '' : `${data.value.infix}-`} + + ))} + + + + Gutter width + {forEach( + SCSS_VARIABLES.grid, + (data: { key: string; value: { ['gutter-width']: string } }) => ( + {data.value['gutter-width']} + ), + )} + + + + Amount of columns + {SCSS_VARIABLES['grid-columns']} + + + + Custom gutters + + + yes + + + + + Nestable + + + yes + + + + + Column ordering + + + yes + + + + ); diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx index 02d38c8a92..b160898b1f 100644 --- a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx +++ b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx @@ -1,6 +1,6 @@ import { Meta, Canvas, Source } from '@storybook/blocks'; import { formatAsMap } from '../../../../utils/sass-export'; -import { GridBreakpoints, SCSS_VARIABLES } from './grid.blocks'; +import { GridTable, SCSS_VARIABLES } from './grid.blocks'; import * as GridStories from './grid.stories'; import './grid.styles.scss'; import SampleContainer from './grid-container.sample.html?raw'; @@ -8,7 +8,7 @@ import SampleScssMixins from './grid-scss-mixins.sample.scss?raw'; -# Grid +# Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a @@ -49,7 +49,7 @@ Breaking it down, here’s how the grid system comes together: Our grid system can adapt across all {Object.keys(SCSS_VARIABLES.breakpoint).length} breakpoints. Each of these breakpoints have their own specifications, a unique class prefix, and some modifiers. - + ## Auto-layout columns diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss index 524ffb401d..cd9c6968b0 100644 --- a/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss +++ b/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss @@ -1,48 +1,21 @@ @use 'sass:list'; @use 'sass:map'; @use '@swisspost/design-system-styles/core' as post; -@use '../layout.shared' as shared; +@use '../shared.module' as shared; :export { - // Variables to build the grid options table - breakpoint-count: length(post.$grid-breakpoints); + // Variables used in the spec table (some variables used on the page are defined in the shared module) grid-columns: post.$grid-columns; @each $breakpoint, $value in post.$grid-breakpoints { - $i: list.index(post.$grid-breakpoints, $breakpoint $value); - - breakpoint_#{$breakpoint}_name: map.get(shared.$breakpointNames, $breakpoint) or $breakpoint; - breakpoint_#{$breakpoint}_dimensions: if( - $i == 1, - #{'<' + map.get(post.$grid-breakpoints, list.nth(map.keys(post.$grid-breakpoints), $i + 1))}, - #{'≥' + $value} - ); - breakpoint_#{$breakpoint}_infix: if($i == 1, none, $breakpoint); - - container_#{$breakpoint}_max-width: map.get(post.$container-max-widths, $breakpoint) or none; - container_#{$breakpoint}_padding: map.get(post.$grid-container-padding, $breakpoint); - container_#{$breakpoint}_fluid_padding: map.get( - post.$grid-container-fluid-padding, - $breakpoint - ); - grid_#{$breakpoint}_gutter-width: map.get(post.$grid-gutter-x, $breakpoint); } // Variables to expose under sass variables section variables_grid-columns: post.$grid-columns; - variables_grid-gutter-width: post.$grid-gutter-width; variables_grid-row-columns: post.$grid-row-columns; @each $breakpoint, $value in post.$grid-breakpoints { - variables_grid-breakpoints_#{$breakpoint}: $value; - variables_grid-container-max-width_#{$breakpoint}: map.get( - post.$container-max-widths, - $breakpoint - ); - variables_grid-container-padding_#{$breakpoint}: map.get( - post.$grid-container-padding, - $breakpoint - ); + variables_grid-gutter-x_#{$breakpoint}: map.get(post.$grid-gutter-x, $breakpoint); } } diff --git a/packages/documentation/src/stories/foundation/layout/layout.docs.mdx b/packages/documentation/src/stories/foundation/layout/layout.docs.mdx index 5344d33e57..d41e0e90e8 100644 --- a/packages/documentation/src/stories/foundation/layout/layout.docs.mdx +++ b/packages/documentation/src/stories/foundation/layout/layout.docs.mdx @@ -8,9 +8,9 @@ import * as LayoutStories from './layout.stories';

TODO:

-Breakpoints, Containers, - Grid, Columns -, Gutters +Breakpoints, Containers, + Grid +, Columns, Gutters Document differences and link over to bootstrap for the rest diff --git a/packages/documentation/src/stories/foundation/layout/layout.shared.scss b/packages/documentation/src/stories/foundation/layout/layout.shared.scss deleted file mode 100644 index 7d29f39964..0000000000 --- a/packages/documentation/src/stories/foundation/layout/layout.shared.scss +++ /dev/null @@ -1,9 +0,0 @@ -$breakpointNames: ( - xs: Extra small, - sm: Small, - rg: Regular, - md: Medium, - lg: Large, - xl: Extra large, - xxl: Extra extra large, -); diff --git a/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx b/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx new file mode 100644 index 0000000000..1225a1e01e --- /dev/null +++ b/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx @@ -0,0 +1,28 @@ +import { parse } from '../../../utils/sass-export'; +import { forEach } from '../../../utils/react'; +import scss from './shared.module.scss'; + +export const SCSS_VARIABLES = parse(scss); + +export const SpecTable = (props: { children: string | JSX.Element | JSX.Element[] }) => ( +
+ + + + + {forEach( + SCSS_VARIABLES.breakpoint, + (data: { key: string; value: { dimensions: string } }) => ( + + ), + )} + + + {props.children} +
+ {data.key} +
+ {data.value.dimensions} +
+
+); diff --git a/packages/documentation/src/stories/foundation/layout/shared.module.scss b/packages/documentation/src/stories/foundation/layout/shared.module.scss new file mode 100644 index 0000000000..2bb151d2fe --- /dev/null +++ b/packages/documentation/src/stories/foundation/layout/shared.module.scss @@ -0,0 +1,29 @@ +@use 'sass:list'; +@use 'sass:map'; +@use '@swisspost/design-system-styles/core' as post; + +$breakpointNames: ( + xs: Extra small, + sm: Small, + rg: Regular, + md: Medium, + lg: Large, + xl: Extra large, + xxl: Extra extra large, +); + +:export { + breakpoint-count: length(post.$grid-breakpoints); + + @each $breakpoint, $value in post.$grid-breakpoints { + $i: list.index(post.$grid-breakpoints, $breakpoint $value); + + breakpoint_#{$breakpoint}_name: map.get($breakpointNames, $breakpoint) or $breakpoint; + breakpoint_#{$breakpoint}_dimensions: if( + $i == 1, + #{'<' + map.get(post.$grid-breakpoints, list.nth(map.keys(post.$grid-breakpoints), $i + 1))}, + #{'≥' + $value} + ); + breakpoint_#{$breakpoint}_infix: if($i == 1, none, $breakpoint); + } +} diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx b/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx new file mode 100644 index 0000000000..c5b668ac6d --- /dev/null +++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx @@ -0,0 +1,107 @@ +import { Meta } from '@storybook/blocks'; +import * as GettingStartedStories from './compatibility.stories'; + + + +# Compatibility + +

List of compatible version numbers with external dependencies.

+ +## Intranet-header + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Package @swisspost/design-system-intranet-header
VersionBootstrapAngularNg-Bootstrap
3.x4.x14.x13.x
4.x5.215.x14.x
5.x5.216.x15.x
+
+ +## Styles + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Package @swisspost/design-system-styles
VersionBootstrapAngularNg-Bootstrap
5.x5.014.x13.x
6.25.215.x14.x
6.45.316.x15.x
+
+ +## Common Web Frontend + +
+ + + + + + + + + + + + + + + + + + + +
Package @.../common-web-frontend
VersionBootstrapAngularNg-Bootstrap
4.x4.612.x9.x
+
diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts new file mode 100644 index 0000000000..63e2462935 --- /dev/null +++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from '@storybook/web-components'; +import { BADGE } from '../../../../.storybook/constants'; + +const meta: Meta = { + title: 'Getting Started/Compatibility', + parameters: { + badges: [BADGE.NEEDS_REVISION], + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/documentation/src/stories/icons/getting-started.docs.mdx b/packages/documentation/src/stories/icons/getting-started.docs.mdx index 4d3412fbb7..d31c7a3e31 100644 --- a/packages/documentation/src/stories/icons/getting-started.docs.mdx +++ b/packages/documentation/src/stories/icons/getting-started.docs.mdx @@ -18,19 +18,13 @@ The comprehensive collection of Swiss Post icons. diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md index e9671fb68e..a3a1274f0a 100644 --- a/packages/internet-header/CHANGELOG.md +++ b/packages/internet-header/CHANGELOG.md @@ -1,5 +1,17 @@ # @swisspost/internet-header +## 1.13.0 + +### Minor Changes + +- Added a link to settings in the user drop-down menu for business users. (by [@alizedebray](https://github.com/alizedebray) with [#2234](https://github.com/swisspost/design-system/pull/2234)) + +### Patch Changes + +- Replaced the old twitter logo with the new X logo. (by [@b1aserlu](https://github.com/b1aserlu) with [#2176](https://github.com/swisspost/design-system/pull/2176)) +- Updated dependencies: + - @swisspost/design-system-styles@6.4.4 + ## 1.12.1 ### Patch Changes diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index 379e87c967..a8e0cc6a59 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/internet-header", - "version": "1.12.1", + "version": "1.13.0", "description": "The header for client facing applications.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -43,7 +43,7 @@ "dependencies": { "@stencil/core": "4.7.0", "@stencil/store": "2.0.11", - "@swisspost/design-system-styles": "workspace:6.4.3", + "@swisspost/design-system-styles": "workspace:6.4.4", "body-scroll-lock": "4.0.0-beta.0", "iframe-resizer": "4.3.7", "jquery": "3.7.1", @@ -69,7 +69,7 @@ "cypress-each": "1.13.3", "cypress-storybook": "0.5.1", "eslint-plugin-react": "7.33.2", - "globby": "13.2.2", + "globby": "14.0.0", "jest": "27.5.1", "rimraf": "5.0.5", "rollup-plugin-node-polyfills": "0.2.1", diff --git a/packages/internet-header/src/assets/js/klp-login-widget.js b/packages/internet-header/src/assets/js/klp-login-widget.js index f86caff57e..1417b6e537 100644 --- a/packages/internet-header/src/assets/js/klp-login-widget.js +++ b/packages/internet-header/src/assets/js/klp-login-widget.js @@ -1190,19 +1190,18 @@ const vertx = window.vertx || {}; ''; } - if (sessionData.userType === 'B2C') { - const settingEnvLinks = { - dev01: 'https://serviceint1.post.ch/kvm/app/ui', - dev02: 'https://serviceint1.post.ch/kvm/app/ui', - devs1: 'https://serviceint1.post.ch/kvm/app/ui', - test: 'https://serviceint1.post.ch/kvm/app/ui', - int01: 'https://serviceint1.post.ch/kvm/app/ui', - int02: 'https://serviceint2.post.ch/kvm/app/ui', - prod: 'https://service.post.ch/kvm/app/ui', - }; - const settingsLink = `${settingEnvLinks[environment]}/settings`; + const settingEnvLinks = { + dev01: 'https://serviceint1.post.ch/kvm/app/ui', + dev02: 'https://serviceint1.post.ch/kvm/app/ui', + devs1: 'https://serviceint1.post.ch/kvm/app/ui', + test: 'https://serviceint1.post.ch/kvm/app/ui', + int01: 'https://serviceint1.post.ch/kvm/app/ui', + int02: 'https://serviceint2.post.ch/kvm/app/ui', + prod: 'https://service.post.ch/kvm/app/ui', + }; + const settingsLink = `${settingEnvLinks[environment]}/settings?lang=${currentLang}`; - menuList += ` + menuList += `
  • @@ -1212,7 +1211,6 @@ const vertx = window.vertx || {};
    • `; - } let changeCompanyEntry = ''; if (isOldChangeCompany()) { diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md index ec34c6bef5..66e4f1d2df 100644 --- a/packages/intranet-header-workspace/CHANGELOG.md +++ b/packages/intranet-header-workspace/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header-workspace +## 3.0.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@6.4.4 + ## 3.0.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json index 97546a8677..bdc3f015dd 100644 --- a/packages/intranet-header-workspace/package.json +++ b/packages/intranet-header-workspace/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-intranet-header-workspace", - "version": "3.0.3", + "version": "3.0.4", "license": "Apache-2.0", "private": true, "scripts": { @@ -21,7 +21,7 @@ "@angular/router": "16.2.12", "@ng-bootstrap/ng-bootstrap": "15.1.2", "@popperjs/core": "2.11.8", - "@swisspost/design-system-styles": "workspace:6.4.3", + "@swisspost/design-system-styles": "workspace:6.4.4", "rxjs": "7.8.1", "tslib": "2.6.2", "watch": "1.0.2", diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md index ff9e834458..0538db0cf8 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md +++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md @@ -1,5 +1,13 @@ # @swisspost/design-system-intranet-header +## 5.0.4 + +### Patch Changes + +- Added a descriptive text to the Post logo home link. (by [@b1aserlu](https://github.com/b1aserlu) with [#2101](https://github.com/swisspost/design-system/pull/2101)) +- Updated dependencies: + - @swisspost/design-system-styles@6.4.4 + ## 5.0.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json index af9fde90a8..9cce6af275 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/package.json +++ b/packages/intranet-header-workspace/projects/intranet-header/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-intranet-header", - "version": "5.0.3", + "version": "5.0.4", "description": "Intranet header for internal Swiss Post applications as an Angular component.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -18,10 +18,10 @@ "linkDirectory": true }, "dependencies": { - "@swisspost/design-system-styles": "workspace:6.4.3", + "@swisspost/design-system-styles": "workspace:6.4.4", "tslib": "2.6.2" }, "devDependencies": { - "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.3" + "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.4" } } diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index c5af7aa38a..f8f4c66708 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -1,5 +1,19 @@ # @swisspost/design-system-styles +## 6.4.4 + +### Patch Changes + +- Added official way to use label in a floating-label select as a placeholder. (by [@imagoiq](https://github.com/imagoiq) with [#2200](https://github.com/swisspost/design-system/pull/2200)) + +- Fixed display of button-group input when using checkbox or radio variant. (by [@imagoiq](https://github.com/imagoiq) with [#2133](https://github.com/swisspost/design-system/pull/2133)) + +- Fixed offset of radio button when checked and in inline layout. (by [@imagoiq](https://github.com/imagoiq) with [#2065](https://github.com/swisspost/design-system/pull/2065)) + +- The following placeholders from the `\_text.scss` file are depreacted an will be removed in a future version: `%list-adjustment`, `%module-container`, `%default-module-spacer`, `%text-container`. (by [@b1aserlu](https://github.com/b1aserlu) with [#2171](https://github.com/swisspost/design-system/pull/2171)) + +- Fixed default icon flashing when using a `post-icon` on alerts. (by [@imagoiq](https://github.com/imagoiq) with [#2244](https://github.com/swisspost/design-system/pull/2244)) + ## 6.4.3 ### Patch Changes diff --git a/packages/styles/package.json b/packages/styles/package.json index ac586c8953..fbcf777e5f 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-styles", - "version": "6.4.3", + "version": "6.4.4", "description": "Design System Styles for the Swiss Post web platform.", "author": "Swiss Post ", "license": "Apache-2.0", diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss index 278b32d2a1..a19c69ffc0 100644 --- a/packages/styles/src/mixins/_notification.scss +++ b/packages/styles/src/mixins/_notification.scss @@ -111,7 +111,12 @@ @include icons-mx.icon($icon); } - // icon override (post-icon) + // Prevent flashing when using post-icon + &:has(> post-icon)::before { + content: none; + } + + // icon override (post-icon), needed when :has is not supported > post-icon { background-color: $color; } diff --git a/packages/styles/src/variables/_grid.scss b/packages/styles/src/variables/_grid.scss index f7ca5b9e27..3be0a4b33a 100644 --- a/packages/styles/src/variables/_grid.scss +++ b/packages/styles/src/variables/_grid.scss @@ -5,33 +5,11 @@ $grid-breakpoints-list: xs sm rg md lg xl xxl; // Grid containers -// -// Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( xl: 1280px, xxl: 1440px, ) !default; -// Grid columns -// -// Set the number of columns and specify the width of the gutters. - -$grid-columns: 12 !default; - -/* Deprecated: $grid-gutter-width */ -$grid-gutter-width: 30px !default; - -/* Deprecated: "rg" breakpoint */ -$grid-gutter-x: ( - xs: 12px, - sm: 16px, - rg: 16px, - md: 16px, - lg: 16px, - xl: 16px, - xxl: 16px, -) !default; - /* Deprecated: "rg" breakpoint */ $grid-container-padding: ( xs: 12px, @@ -53,3 +31,20 @@ $grid-container-fluid-padding: ( xl: map.get($grid-container-padding, lg), xxl: map.get($grid-container-padding, lg), ) !default; + +// Grid columns +$grid-columns: 12 !default; + +/* Deprecated: $grid-gutter-width */ +$grid-gutter-width: 30px !default; + +/* Deprecated: "rg" breakpoint */ +$grid-gutter-x: ( + xs: 12px, + sm: 16px, + rg: 16px, + md: 16px, + lg: 16px, + xl: 16px, + xxl: 16px, +) !default; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cccd1a8aed..891273e364 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.1' +lockfileVersion: '6.0' settings: autoInstallPeers: true @@ -67,7 +67,7 @@ importers: specifier: 4.7.0 version: 4.7.0 '@swisspost/design-system-styles': - specifier: workspace:6.4.3 + specifier: workspace:6.4.4 version: link:../styles/dist ally.js: specifier: 1.4.1 @@ -137,7 +137,7 @@ importers: packages/components-react: dependencies: '@swisspost/design-system-components': - specifier: workspace:1.6.1 + specifier: workspace:1.6.2 version: link:../components devDependencies: '@types/node': @@ -228,10 +228,10 @@ importers: specifier: 20.1.0 version: 20.1.0(@angular/common@16.2.12)(@angular/core@16.2.12)(@angular/platform-browser@16.2.12)(rxjs@7.8.1) '@swisspost/design-system-intranet-header': - specifier: workspace:5.0.3 + specifier: workspace:5.0.4 version: link:../intranet-header-workspace/dist/intranet-header '@swisspost/design-system-styles': - specifier: workspace:6.4.3 + specifier: workspace:6.4.4 version: link:../styles/dist bootstrap: specifier: 5.3.2 @@ -263,7 +263,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 16.2.9 - version: 16.2.9(@angular/compiler-cli@16.2.12)(@angular/localize@16.2.12)(@types/node@18.18.8)(karma@6.4.2)(ng-packagr@16.2.3)(typescript@4.9.5) + version: 16.2.9(@angular/compiler-cli@16.2.12)(@angular/localize@16.2.12)(@types/node@18.17.19)(karma@6.4.2)(typescript@5.1.6) '@angular-eslint/builder': specifier: 16.2.0 version: 16.2.0(eslint@8.53.0)(typescript@5.1.6) @@ -361,19 +361,19 @@ importers: packages/documentation: dependencies: '@swisspost/design-system-components': - specifier: workspace:1.6.1 + specifier: workspace:1.6.2 version: link:../components '@swisspost/design-system-components-react': - specifier: workspace:1.0.21 + specifier: workspace:1.0.22 version: link:../components-react '@swisspost/design-system-icons': specifier: workspace:1.0.14 version: link:../icons '@swisspost/design-system-styles': - specifier: workspace:6.4.3 + specifier: workspace:6.4.4 version: link:../styles/dist '@swisspost/internet-header': - specifier: workspace:1.12.1 + specifier: workspace:1.13.0 version: link:../internet-header bootstrap: specifier: 5.3.2 @@ -536,7 +536,7 @@ importers: specifier: 2.0.11 version: 2.0.11(@stencil/core@4.7.0) '@swisspost/design-system-styles': - specifier: workspace:6.4.3 + specifier: workspace:6.4.4 version: link:../styles/dist body-scroll-lock: specifier: 4.0.0-beta.0 @@ -609,8 +609,8 @@ importers: specifier: 7.33.2 version: 7.33.2(eslint@8.53.0) globby: - specifier: 13.2.2 - version: 13.2.2 + specifier: 14.0.0 + version: 14.0.0 jest: specifier: 27.5.1 version: 27.5.1 @@ -675,7 +675,7 @@ importers: specifier: 2.11.8 version: 2.11.8 '@swisspost/design-system-styles': - specifier: workspace:6.4.3 + specifier: workspace:6.4.4 version: link:../styles/dist rxjs: specifier: 7.8.1 @@ -760,14 +760,14 @@ importers: packages/intranet-header-workspace/projects/intranet-header: dependencies: '@swisspost/design-system-styles': - specifier: workspace:6.4.3 + specifier: workspace:6.4.4 version: link:../../../styles/dist tslib: specifier: 2.6.2 version: 2.6.2 devDependencies: '@swisspost/design-system-intranet-header-workspace': - specifier: workspace:3.0.3 + specifier: workspace:3.0.4 version: link:../.. publishDirectory: ../../dist/intranet-header @@ -899,6 +899,130 @@ packages: - chokidar dev: true + /@angular-devkit/build-angular@16.2.9(@angular/compiler-cli@16.2.12)(@angular/localize@16.2.12)(@types/node@18.17.19)(karma@6.4.2)(typescript@5.1.6): + resolution: {integrity: sha512-S1C4UYxRVyNt3C0wCxbT2jZ1dN5i37kS0mol3PQjbR8gQ0GQzHmzhjTBl1oImo8aouET9yhrk9etk65oat4mBQ==} + engines: {node: ^16.14.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} + peerDependencies: + '@angular/compiler-cli': ^16.0.0 + '@angular/localize': ^16.0.0 + '@angular/platform-server': ^16.0.0 + '@angular/service-worker': ^16.0.0 + jest: ^29.5.0 + jest-environment-jsdom: ^29.5.0 + karma: ^6.3.0 + ng-packagr: ^16.0.0 + protractor: ^7.0.0 + tailwindcss: ^2.0.0 || ^3.0.0 + typescript: '>=4.9.3 <5.2' + peerDependenciesMeta: + '@angular/localize': + optional: true + '@angular/platform-server': + optional: true + '@angular/service-worker': + optional: true + jest: + optional: true + jest-environment-jsdom: + optional: true + karma: + optional: true + ng-packagr: + optional: true + protractor: + optional: true + tailwindcss: + optional: true + dependencies: + '@ampproject/remapping': 2.2.1 + '@angular-devkit/architect': 0.1602.9(chokidar@3.5.3) + '@angular-devkit/build-webpack': 0.1602.9(chokidar@3.5.3)(webpack-dev-server@4.15.1)(webpack@5.88.2) + '@angular-devkit/core': 16.2.9(chokidar@3.5.3) + '@angular/compiler-cli': 16.2.12(@angular/compiler@16.2.12)(typescript@5.1.6) + '@angular/localize': 16.2.12(@angular/compiler-cli@16.2.12)(@angular/compiler@16.2.12) + '@babel/core': 7.22.9 + '@babel/generator': 7.22.9 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.22.9) + '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-runtime': 7.22.9(@babel/core@7.22.9) + '@babel/preset-env': 7.22.9(@babel/core@7.22.9) + '@babel/runtime': 7.22.6 + '@babel/template': 7.22.5 + '@discoveryjs/json-ext': 0.5.7 + '@ngtools/webpack': 16.2.9(@angular/compiler-cli@16.2.12)(typescript@5.1.6)(webpack@5.88.2) + '@vitejs/plugin-basic-ssl': 1.0.1(vite@4.4.7) + ansi-colors: 4.1.3 + autoprefixer: 10.4.14(postcss@8.4.31) + babel-loader: 9.1.3(@babel/core@7.22.9)(webpack@5.88.2) + babel-plugin-istanbul: 6.1.1 + browserslist: 4.21.10 + chokidar: 3.5.3 + copy-webpack-plugin: 11.0.0(webpack@5.88.2) + critters: 0.0.20 + css-loader: 6.8.1(webpack@5.88.2) + esbuild-wasm: 0.18.17 + fast-glob: 3.3.1 + guess-parser: 0.4.22(typescript@5.1.6) + https-proxy-agent: 5.0.1 + inquirer: 8.2.4 + jsonc-parser: 3.2.0 + karma: 6.4.2 + karma-source-map-support: 1.4.0 + less: 4.1.3 + less-loader: 11.1.0(less@4.1.3)(webpack@5.88.2) + license-webpack-plugin: 4.0.2(webpack@5.88.2) + loader-utils: 3.2.1 + magic-string: 0.30.1 + mini-css-extract-plugin: 2.7.6(webpack@5.88.2) + mrmime: 1.0.1 + open: 8.4.2 + ora: 5.4.1 + parse5-html-rewriting-stream: 7.0.0 + picomatch: 2.3.1 + piscina: 4.0.0 + postcss: 8.4.31 + postcss-loader: 7.3.3(postcss@8.4.31)(webpack@5.88.2) + resolve-url-loader: 5.0.0 + rxjs: 7.8.1 + sass: 1.64.1 + sass-loader: 13.3.2(sass@1.64.1)(webpack@5.88.2) + semver: 7.5.4 + source-map-loader: 4.0.1(webpack@5.88.2) + source-map-support: 0.5.21 + terser: 5.19.2 + text-table: 0.2.0 + tree-kill: 1.2.2 + tslib: 2.6.1 + typescript: 5.1.6 + vite: 4.4.7(@types/node@18.17.19)(less@4.1.3)(sass@1.69.5) + webpack: 5.88.2(esbuild@0.18.17) + webpack-dev-middleware: 6.1.1(webpack@5.88.2) + webpack-dev-server: 4.15.1(webpack@5.89.0) + webpack-merge: 5.9.0 + webpack-subresource-integrity: 5.1.0(webpack@5.88.2) + optionalDependencies: + esbuild: 0.18.17 + transitivePeerDependencies: + - '@swc/core' + - '@types/node' + - bufferutil + - canvas + - debug + - fibers + - html-webpack-plugin + - lightningcss + - node-sass + - sass-embedded + - stylus + - sugarss + - supports-color + - uglify-js + - utf-8-validate + - webpack-cli + dev: true + /@angular-devkit/build-angular@16.2.9(@angular/compiler-cli@16.2.12)(@angular/localize@16.2.12)(@types/node@18.18.8)(karma@6.4.2)(ng-packagr@16.2.3)(typescript@4.9.5): resolution: {integrity: sha512-S1C4UYxRVyNt3C0wCxbT2jZ1dN5i37kS0mol3PQjbR8gQ0GQzHmzhjTBl1oImo8aouET9yhrk9etk65oat4mBQ==} engines: {node: ^16.14.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} @@ -998,7 +1122,7 @@ packages: tslib: 2.6.1 typescript: 4.9.5 vite: 4.4.7(@types/node@18.18.8)(less@4.1.3)(sass@1.64.1)(terser@5.19.2) - webpack: 5.88.2(esbuild@0.18.17) + webpack: 5.88.2 webpack-dev-middleware: 6.1.1(webpack@5.88.2) webpack-dev-server: 4.15.1(webpack@5.88.2) webpack-merge: 5.9.0 @@ -5307,6 +5431,19 @@ packages: dependencies: '@angular/compiler-cli': 16.2.12(@angular/compiler@16.2.12)(typescript@4.9.5) typescript: 4.9.5 + webpack: 5.88.2 + dev: true + + /@ngtools/webpack@16.2.9(@angular/compiler-cli@16.2.12)(typescript@5.1.6)(webpack@5.88.2): + resolution: {integrity: sha512-rOclD7FfT4OSwVA0nDnULbJS6TORJ0+sQiuT2ebaNFErYr3LOm6Zut05tnmzFw8q1cePrILbG+xpnbggNr9Pyw==} + engines: {node: ^16.14.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} + peerDependencies: + '@angular/compiler-cli': ^16.0.0 + typescript: '>=4.9.3 <5.2' + webpack: ^5.54.0 + dependencies: + '@angular/compiler-cli': 16.2.12(@angular/compiler@16.2.12)(typescript@5.1.6) + typescript: 5.1.6 webpack: 5.88.2(esbuild@0.18.17) dev: true @@ -6385,6 +6522,11 @@ packages: resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} dev: true + /@sindresorhus/merge-streams@1.0.0: + resolution: {integrity: sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==} + engines: {node: '>=18'} + dev: true + /@sinonjs/commons@1.8.6: resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==} dependencies: @@ -6924,7 +7066,7 @@ packages: magic-string: 0.30.1 rollup: 3.26.2 typescript: 5.1.6 - vite: 4.4.7(@types/node@18.18.8)(less@4.1.3)(sass@1.64.1)(terser@5.19.2) + vite: 4.4.7(@types/node@18.17.19)(less@4.1.3)(sass@1.69.5) transitivePeerDependencies: - encoding - supports-color @@ -8348,7 +8490,7 @@ packages: peerDependencies: vite: ^3.0.0 || ^4.0.0 dependencies: - vite: 4.4.7(@types/node@18.18.8)(less@4.1.3)(sass@1.64.1)(terser@5.19.2) + vite: 4.4.7(@types/node@18.17.19)(less@4.1.3)(sass@1.69.5) dev: true /@web-types/lit@2.0.0-3: @@ -8482,6 +8624,25 @@ packages: - utf-8-validate dev: true + /@wessberg/ts-evaluator@0.0.27(typescript@5.1.6): + resolution: {integrity: sha512-7gOpVm3yYojUp/Yn7F4ZybJRxyqfMNf0LXK5KJiawbPfL0XTsJV+0mgrEDjOIR6Bi0OYk2Cyg4tjFu1r8MCZaA==} + engines: {node: '>=10.1.0'} + deprecated: this package has been renamed to ts-evaluator. Please install ts-evaluator instead + peerDependencies: + typescript: '>=3.2.x || >= 4.x' + dependencies: + chalk: 4.1.2 + jsdom: 16.7.0 + object-path: 0.11.8 + tslib: 2.6.2 + typescript: 5.1.6 + transitivePeerDependencies: + - bufferutil + - canvas + - supports-color + - utf-8-validate + dev: true + /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} dev: true @@ -9212,7 +9373,7 @@ packages: engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: browserslist: 4.21.10 caniuse-lite: 1.0.30001538 @@ -9228,7 +9389,7 @@ packages: engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: browserslist: 4.21.10 caniuse-lite: 1.0.30001538 @@ -10516,7 +10677,7 @@ packages: dependencies: nice-try: 1.0.5 path-key: 2.0.1 - semver: 5.7.2 + semver: 7.5.4 shebang-command: 1.2.0 which: 1.3.1 dev: true @@ -12243,6 +12404,17 @@ packages: micromatch: 4.0.5 dev: true + /fast-glob@3.3.2: + resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + dev: true + /fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} dev: true @@ -13029,12 +13201,24 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dependencies: dir-glob: 3.0.1 - fast-glob: 3.3.0 + fast-glob: 3.3.1 ignore: 5.2.4 merge2: 1.4.1 slash: 4.0.0 dev: true + /globby@14.0.0: + resolution: {integrity: sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==} + engines: {node: '>=18'} + dependencies: + '@sindresorhus/merge-streams': 1.0.0 + fast-glob: 3.3.2 + ignore: 5.2.4 + path-type: 5.0.0 + slash: 5.1.0 + unicorn-magic: 0.1.0 + dev: true + /globjoin@0.1.4: resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==} dev: true @@ -13078,6 +13262,20 @@ packages: - utf-8-validate dev: true + /guess-parser@0.4.22(typescript@5.1.6): + resolution: {integrity: sha512-KcUWZ5ACGaBM69SbqwVIuWGoSAgD+9iJnchR9j/IarVI1jHVeXv+bUXBIMeqVMSKt3zrn0Dgf9UpcOEpPBLbSg==} + peerDependencies: + typescript: '>=3.7.5' + dependencies: + '@wessberg/ts-evaluator': 0.0.27(typescript@5.1.6) + typescript: 5.1.6 + transitivePeerDependencies: + - bufferutil + - canvas + - supports-color + - utf-8-validate + dev: true + /gulp-cli@2.3.0: resolution: {integrity: sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==} engines: {node: '>= 0.10'} @@ -13117,7 +13315,7 @@ packages: resolution: {integrity: sha512-9QUHam5JyXwGUxaaMvoFQVT44tohpEFpM8xBdPfdwTYGM0AItS1iTQz0MpsF8Jroh7GF5Jt2GVPaYgvy8qD2Fw==} engines: {node: ^10 || ^12 || >=14} peerDependencies: - postcss: ^8.0.0 + postcss: '>=8.4.31' dependencies: fancy-log: 1.3.3 plugin-error: 1.0.1 @@ -13572,7 +13770,7 @@ packages: resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -16066,7 +16264,7 @@ packages: engines: {node: '>=6'} dependencies: pify: 4.0.1 - semver: 5.7.2 + semver: 7.5.4 dev: true /make-dir@3.1.0: @@ -16830,7 +17028,7 @@ packages: dependencies: hosted-git-info: 2.8.9 resolve: 1.22.3 - semver: 5.7.2 + semver: 7.5.4 validate-npm-package-license: 3.0.4 dev: true @@ -17607,6 +17805,11 @@ packages: engines: {node: '>=8'} dev: true + /path-type@5.0.0: + resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==} + engines: {node: '>=12'} + dev: true + /pathe@1.1.1: resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==} dev: true @@ -17779,7 +17982,7 @@ packages: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: - postcss: '>=8.0.9' + postcss: '>=8.4.31' ts-node: '>=9.0.0' peerDependenciesMeta: postcss: @@ -17796,7 +17999,7 @@ packages: resolution: {integrity: sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==} engines: {node: '>= 14.15.0'} peerDependencies: - postcss: ^7.0.0 || ^8.0.1 + postcss: '>=8.4.31' webpack: ^5.0.0 dependencies: cosmiconfig: 8.2.0 @@ -17814,7 +18017,7 @@ packages: resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17823,7 +18026,7 @@ packages: resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -17835,7 +18038,7 @@ packages: resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 postcss-selector-parser: 6.0.13 @@ -17845,7 +18048,7 @@ packages: resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: - postcss: ^8.1.0 + postcss: '>=8.4.31' dependencies: icss-utils: 5.1.0(postcss@8.4.31) postcss: 8.4.31 @@ -17859,7 +18062,7 @@ packages: resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==} engines: {node: '>=12.0'} peerDependencies: - postcss: ^8.3.3 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17868,7 +18071,7 @@ packages: resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==} engines: {node: '>=12.0'} peerDependencies: - postcss: ^8.4.29 + postcss: '>=8.4.31' dependencies: postcss: 8.4.31 dev: true @@ -17885,7 +18088,7 @@ packages: resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==} engines: {node: '>=10'} peerDependencies: - postcss: ^8.0.0 + postcss: '>=8.4.31' dependencies: make-dir: 3.1.0 mime: 2.5.2 @@ -19069,11 +19272,6 @@ packages: sver-compat: 1.5.0 dev: true - /semver@5.7.2: - resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==} - hasBin: true - dev: true - /semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true @@ -19253,6 +19451,11 @@ packages: engines: {node: '>=12'} dev: true + /slash@5.1.0: + resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==} + engines: {node: '>=14.16'} + dev: true + /slice-ansi@3.0.0: resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==} engines: {node: '>=8'} @@ -19845,7 +20048,7 @@ packages: resolution: {integrity: sha512-+Rr2Dd4b72CWA4qoj1Kk+y449nP/WJsrD0nzQAWkmPPIuyVcy2GMIcfNr0Z8JJOLjRvtlkKxa49FCNXMePBikQ==} engines: {node: ^14.13.1 || >=16.13.0 || >=18.0.0} peerDependencies: - postcss: ^8.4.21 + postcss: '>=8.4.31' stylelint: ^15.2.0 || >=15 dependencies: postcss: 8.4.31 @@ -20148,6 +20351,54 @@ packages: webpack: 5.88.2(esbuild@0.18.17) dev: true + /terser-webpack-plugin@5.3.8(webpack@5.88.2): + resolution: {integrity: sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==} + engines: {node: '>= 10.13.0'} + peerDependencies: + '@swc/core': '*' + esbuild: '*' + uglify-js: '*' + webpack: ^5.1.0 + peerDependenciesMeta: + '@swc/core': + optional: true + esbuild: + optional: true + uglify-js: + optional: true + dependencies: + '@jridgewell/trace-mapping': 0.3.18 + jest-worker: 27.5.1 + schema-utils: 3.3.0 + serialize-javascript: 6.0.1 + terser: 5.19.2 + webpack: 5.88.2 + dev: true + + /terser-webpack-plugin@5.3.8(webpack@5.89.0): + resolution: {integrity: sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==} + engines: {node: '>= 10.13.0'} + peerDependencies: + '@swc/core': '*' + esbuild: '*' + uglify-js: '*' + webpack: ^5.1.0 + peerDependenciesMeta: + '@swc/core': + optional: true + esbuild: + optional: true + uglify-js: + optional: true + dependencies: + '@jridgewell/trace-mapping': 0.3.18 + jest-worker: 27.5.1 + schema-utils: 3.3.0 + serialize-javascript: 6.0.1 + terser: 5.19.2 + webpack: 5.89.0 + dev: true + /terser@5.19.2: resolution: {integrity: sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==} engines: {node: '>=10'} @@ -20776,6 +21027,11 @@ packages: engines: {node: '>=4'} dev: true + /unicorn-magic@0.1.0: + resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==} + engines: {node: '>=18'} + dev: true + /union-value@1.0.1: resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==} engines: {node: '>=0.10.0'} @@ -21131,6 +21387,44 @@ packages: replace-ext: 1.0.1 dev: true + /vite@4.4.7(@types/node@18.17.19)(less@4.1.3)(sass@1.69.5): + resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 18.17.19 + esbuild: 0.18.17 + less: 4.1.3 + postcss: 8.4.31 + rollup: 3.26.2 + sass: 1.69.5 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite@4.4.7(@types/node@18.18.8)(less@4.1.3)(sass@1.64.1)(terser@5.19.2): resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -21414,6 +21708,46 @@ packages: resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==} dev: true + /webpack@5.88.2: + resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==} + engines: {node: '>=10.13.0'} + hasBin: true + peerDependencies: + webpack-cli: '*' + peerDependenciesMeta: + webpack-cli: + optional: true + dependencies: + '@types/eslint-scope': 3.7.4 + '@types/estree': 1.0.1 + '@webassemblyjs/ast': 1.11.6 + '@webassemblyjs/wasm-edit': 1.11.6 + '@webassemblyjs/wasm-parser': 1.11.6 + acorn: 8.9.0 + acorn-import-assertions: 1.9.0(acorn@8.9.0) + browserslist: 4.21.10 + chrome-trace-event: 1.0.3 + enhanced-resolve: 5.15.0 + es-module-lexer: 1.2.1 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 3.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.8(webpack@5.88.2) + watchpack: 2.4.0 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + dev: true + /webpack@5.88.2(esbuild@0.18.17): resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==} engines: {node: '>=10.13.0'} @@ -21485,7 +21819,7 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.8(esbuild@0.18.17)(webpack@5.88.2) + terser-webpack-plugin: 5.3.8(webpack@5.89.0) watchpack: 2.4.0 webpack-sources: 3.2.3 transitivePeerDependencies: