diff --git a/.changeset/upset-hats-care.md b/.changeset/upset-hats-care.md new file mode 100644 index 0000000000..e00d6454a0 --- /dev/null +++ b/.changeset/upset-hats-care.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': major +--- + +Aligned viewport-based utility classes with named percentage sizes. diff --git a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts index e539797cc7..d745f399f9 100644 --- a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts +++ b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts @@ -6,7 +6,7 @@ describe('Sizing', () => { cy.percySnapshot('Sizing', { widths: [320, 1440] }); }); - // Percentage sizing classes relative to viewport [e.g. vh-25, vw-33, min-vh-50, max-vw-100, etc.] + //sizing classes relative to viewport [e.g. vh-quarter, vw-third, min-vh-half, max-vw-full, etc.] it('Sizing Viewport Percentages', () => { cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing'); cy.get('.snapshot', { timeout: 30000 }).should('be.visible'); diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx index 7d3a4d8cbd..22597ae75a 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx +++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx @@ -54,9 +54,9 @@ See - `min-vh-100` -> - `min-vw-100` -> - `vh-100` -> - `vw-100` +> - `vw-{suffix}`, `vh-{suffix}` +> - `min-vw-{suffix}`, `min-vh-{suffix}` +> - `max-vw-{suffix}`, `max-vh-{suffix}` diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts index 0ddd51a5ef..88ae136aaf 100644 --- a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts @@ -26,21 +26,6 @@ const samples = [ { w: 'full', h: 'half', maxW: 'full', minW: 'third', maxH: 'auto', minH: 'auto' }, ]; -const vpSamples = [ - { w: '33', h: '100', maxvW: '33', minvW: '100', maxvH: '50', minvH: '66' }, - { w: '50', h: '50', maxvW: '25', minvW: '50', maxvH: '100', minvH: '25' }, - { w: '50', h: '25', maxvW: '50', minvW: '25', maxvH: '66', minvH: '33' }, - { - w: '75', - h: '25', - maxvW: '75', - minvW: '25', - maxvH: '50', - minvH: '25', - }, - { w: '100', h: '50', maxvW: '100', minvW: '33', maxvH: 'auto', minvH: 'auto' }, -]; - const pxSamples = [ { w: '12', h: '16', maxW: '32', minW: '12', maxH: '48', minH: '16' }, { w: '24', h: '32', maxW: '32', minW: '12', maxH: '40', minH: '24' }, @@ -56,30 +41,27 @@ const pxSamples = [ ]; function generateClassNames(sample: Record, isViewport = false) { - const prefix = isViewport ? 'v' : ''; - - const classNames = ['content']; - - classNames.push(prefix + 'h-' + sample.h); - classNames.push(prefix + 'w-' + sample.w); - - if (sample['max' + prefix + 'H'] && sample['max' + prefix + 'H'] !== 'none') { - classNames.push('max-vh-' + sample['max' + prefix + 'H']); - } - - if (sample['max' + prefix + 'W'] && sample['max' + prefix + 'W'] !== 'none') { - classNames.push('max-vw-' + sample['max' + prefix + 'W']); + const classes: string[] = ['content']; + + if (isViewport) { + if (sample.w) classes.push(`vw-${sample.w}`); + if (sample.h) classes.push(`vh-${sample.h}`); + + if (sample.minvW) classes.push(`min-vw-${sample.minvW}`); + if (sample.maxvW) classes.push(`max-vw-${sample.maxvW}`); + if (sample.minvH) classes.push(`min-vh-${sample.minvH}`); + if (sample.maxvH) classes.push(`max-vh-${sample.maxvH}`); + } else { + if (sample.w) classes.push(`w-${sample.w}`); + if (sample.h) classes.push(`h-${sample.h}`); + + if (sample.minW) classes.push(`min-w-${sample.minW}`); + if (sample.maxW) classes.push(`max-w-${sample.maxW}`); + if (sample.minH) classes.push(`min-h-${sample.minH}`); + if (sample.maxH) classes.push(`max-h-${sample.maxH}`); } - if (sample['min' + prefix + 'H'] && sample['min' + prefix + 'H'] !== 'none') { - classNames.push('min-vh-' + sample['min' + prefix + 'H']); - } - - if (sample['min' + prefix + 'W'] && sample['min' + prefix + 'W'] !== 'none') { - classNames.push('min-vw-' + sample['min' + prefix + 'W']); - } - - return classNames.filter(Boolean).join(' '); + return classes.join(' '); } export const PercentageSizing: StoryObj = { @@ -102,21 +84,19 @@ export const PercentageSizing: StoryObj = { export const PercentageVpSizing: StoryObj = { render() { return schemes( - () => { - return html` + () => html` +
- ${vpSamples.map(sample => { - return html` -
-
-
-
+ ${samples.map( + sample => html` +
+
- `; - })} + `, + )}
- `; - }, +
+ `, { filter: scheme => scheme === COLOR_SCHEMES.light }, ); }, diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 334588ac5a..57c379bc5e 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -30,26 +30,6 @@ $position-values: ( 100: 100%, ); -$vw-values: ( - 0: 0, - 25: 25vw, - 33: 25vw, - 50: 50vw, - 66: 66vw, - 75: 75vw, - 100: 100vw, -); - -$vh-values: ( - 0: 0, - 25: 25vh, - 33: 33vh, - 50: 50vh, - 66: 66vh, - 75: 75vh, - 100: 100vh, -); - $utilities: ( 'border': ( property: border, @@ -214,37 +194,42 @@ $utilities: ( responsive: true, property: width, class: vw, - values: $vw-values, + values: $post-viewport-width-sizes, ), + 'viewport-height': ( responsive: true, property: height, class: vh, - values: $vh-values, + values: $post-viewport-height-sizes, ), + 'min-viewport-width': ( responsive: true, property: min-width, class: min-vw, - values: $vw-values, + values: $post-viewport-width-sizes, ), + 'min-viewport-height': ( responsive: true, property: min-height, class: min-vh, - values: $vh-values, + values: $post-viewport-height-sizes, ), + 'max-viewport-width': ( responsive: true, property: max-width, class: max-vw, - values: $vw-values, + values: $post-viewport-width-sizes, ), + 'max-viewport-height': ( responsive: true, property: max-height, class: max-vh, - values: $vh-values, + values: $post-viewport-height-sizes, ), 'align': ( property: vertical-align, diff --git a/packages/styles/src/variables/_sizing.scss b/packages/styles/src/variables/_sizing.scss index 6061413772..4dd9edb460 100644 --- a/packages/styles/src/variables/_sizing.scss +++ b/packages/styles/src/variables/_sizing.scss @@ -15,3 +15,29 @@ $post-percentage-sizes: map.merge( ), $post-percentage-sizes ); + +$post-viewport-height-sizes: () !default; +$post-viewport-height-sizes: map.merge( + ( + 'quarter': 25vh, + 'third': 33vh, + 'half': 50vh, + 'two-thirds': 66vh, + 'three-quarters': 75vh, + 'full': 100vh, + ), + $post-viewport-height-sizes +); + +$post-viewport-width-sizes: () !default; +$post-viewport-width-sizes: map.merge( + ( + 'quarter': 25vw, + 'third': 33vw, + 'half': 50vw, + 'two-thirds': 66vw, + 'three-quarters': 75vw, + 'full': 100vw, + ), + $post-viewport-width-sizes +);