From 25b9a7f87204e391500eb3ff570de7bfcdc2b9af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 23 Aug 2023 15:14:25 +0200 Subject: [PATCH] docs(Section): move deprecated styles into a seperate docs page This is an addition to PR #2582 --- .../releases/eufemia/v11-info.mdx | 15 +++++ .../uilib/components/section/Examples.tsx | 24 +++---- .../docs/uilib/components/section/demos.mdx | 58 ++-------------- .../uilib/components/section/deprecated.mdx | 53 +++++++++++++++ .../uilib/components/section/properties.mdx | 40 +++++------ .../__snapshots__/Breadcrumb.test.tsx.snap | 2 +- .../__snapshots__/GlobalStatus.test.tsx.snap | 2 +- .../src/components/section/Section.tsx | 17 +++-- .../__tests__/Section.screenshot.test.ts | 67 ++++++++++++------- .../__snapshots__/Section.test.tsx.snap | 11 ++- .../components/section/style/dnb-section.scss | 4 +- .../style/themes/dnb-section-theme-ui.scss | 35 ++++++---- .../__snapshots__/SkipContent.test.tsx.snap | 2 +- 13 files changed, 199 insertions(+), 131 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/section/deprecated.mdx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx index f4803124d5f..0552dcbafe3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx @@ -7,6 +7,7 @@ draft: true - [v11](#v11) - [Migration](#migration) - [Install](#install) + - [Section](#section) ## Migration @@ -22,4 +23,18 @@ $ npm i @dnb/eufemia@11 $ yarn add @dnb/eufemia@11 ``` +## Section + +1. Most of the `type_style` where removed. Instead use the new `variant` property: + +- `mint-green` +- `sea-green` +- `emerald-green` +- `lavender` +- `black-3` +- `sand-yellow` +- `pistachio` +- `fire-red` +- `fire-red-8` + _June, 1. 2023_ diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.tsx index 79725647393..1ef53b6e150 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.tsx @@ -78,7 +78,7 @@ export const SectionDemoEmeraldGreen = () => ( ) export const SectionDemoLavender = () => ( - +

Visual DNB Section: lavender @@ -88,7 +88,7 @@ export const SectionDemoLavender = () => ( ) export const SectionDemoBlack3 = () => ( - +

Visual DNB Section: black-3 @@ -98,7 +98,7 @@ export const SectionDemoBlack3 = () => ( ) export const SectionDemoSandYellow = () => ( - +

Visual DNB Section: sand-yellow @@ -108,7 +108,7 @@ export const SectionDemoSandYellow = () => ( ) export const SectionDemoPistachio = () => ( - +

Visual DNB Section: pistachio @@ -118,7 +118,7 @@ export const SectionDemoPistachio = () => ( ) export const SectionDemoFireRed = () => ( - +

Visual DNB Section: fire-red @@ -128,7 +128,7 @@ export const SectionDemoFireRed = () => ( ) export const SectionDemoFireRed8 = () => ( - +

Visual DNB Section: fire-red-8 @@ -139,7 +139,7 @@ export const SectionDemoFireRed8 = () => ( export const SectionZIndex = () => !globalThis.IS_TEST ? null : ( - +

mint-green-12
@@ -190,7 +190,7 @@ export const SectionZIndex = () => ) export const SectionDemoInfo = () => ( - +

Generic info section: info @@ -200,7 +200,7 @@ export const SectionDemoInfo = () => ( ) export const SectionDemoError = () => ( - +

Error section: error @@ -210,7 +210,7 @@ export const SectionDemoError = () => ( ) export const SectionDemoWarning = () => ( - +

Warning section: warning @@ -220,11 +220,11 @@ export const SectionDemoWarning = () => ( ) export const SectionDemoSuccess = () => ( - +

Success section: success

-) \ No newline at end of file +) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx index 39f442daefe..99d75924b49 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx @@ -7,22 +7,17 @@ import { SectionDemoSpacing, SectionDemoWhite, SectionDemoDivider, - SectionDemoMintGreen, - SectionDemoSeaGreen, - SectionDemoEmeraldGreen, - SectionDemoLavender, - SectionDemoBlack3, - SectionDemoSandYellow, - SectionDemoPistachio, - SectionDemoFireRed, - SectionDemoFireRed8, SectionZIndex, SectionDemoInfo, SectionDemoError, SectionDemoWarning, - SectionDemoSuccess + SectionDemoSuccess, } from 'Docs/uilib/components/section/Examples' +### Deprecated color styles + +These [color styles](/uilib/components/section/deprecated/) are deprecated and will be removed in v11 of Eufemia. + ## Demos ### Default Section without spacing @@ -41,48 +36,6 @@ import { - - ### Info Section @@ -99,3 +52,4 @@ import { + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/deprecated.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/deprecated.mdx new file mode 100644 index 00000000000..cea9fc4aac7 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/deprecated.mdx @@ -0,0 +1,53 @@ +--- +showTabs: true +--- + +import { + SectionDemoMintGreen, + SectionDemoSeaGreen, + SectionDemoEmeraldGreen, + SectionDemoLavender, + SectionDemoBlack3, + SectionDemoSandYellow, + SectionDemoPistachio, + SectionDemoFireRed, + SectionDemoFireRed8, +} from 'Docs/uilib/components/section/Examples' + +## Deprecated styles + +### Mint-Green Section + + + +### Sea-Green Section + + + +### Emerald-Green Section + + + +### Lavender Section + + + +### Black-3 Section + + + +### Sand-Yellow Section + + + +### Pistachio Section + + + +### Fire-Red Section + + + +### Fire-Red-8 Section + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx index 99845c7f56a..283ef107028 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx @@ -6,36 +6,36 @@ showTabs: true | Properties | Description | | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `style_type` | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`. | | `variant` | _(optional)_ Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop | | `spacing` | _(optional)_ will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`. | | `element` | _(optional)_ define what HTML element should be used. Defaults to `
`. | +| `style_type` | _(optional)_ to define the style of the visual helper. Defaults to `mint-green-12`. | | `inner_ref` | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | ## Variants -| Variant | Description | -| ------- | ------------------------------------------------------------------------------------------------ | -| Info | Neutral, informational. | -| Error | Indicates an erroneous state. | -| Warning | Draws attention to a potential problem that may or may not require an action on the user's part. | -| Success | Indicates a successful state. | +| Variant | Description | +| --------- | ------------------------------------------------------------------------------------------------ | +| `info` | Neutral, informational. | +| `error` | Indicates an erroneous state. | +| `warning` | Draws attention to a potential problem that may or may not require an action on the user's part. | +| `success` | Indicates a successful state. | ## Styles You can easily [customize the color](/uilib/components/section#customize-color). -| Style | Description | -| --------------- | --------------------------------------------------------------------------------------------------- | -| `mint-green-12` | _(default)_ uses `--color-mint-green-12`. | -| `white` | uses `--color-white`. | -| `mint-green` | uses `--color-mint-green`. | -| `lavender` | uses `--color-lavender`. | -| `sand-yellow` | uses `--color-sand-yellow`. | -| `pistachio` | uses `--color-pistachio`. | -| `black-3` | uses `--color-black-3`. | -| `emerald-green` | uses `--color-emerald-green`. | -| `fire-red` | uses `--color-fire-red`. Is used by [GlobalStatus](/uilib/components/global-status) | -| `divider` | uses `--color-white` as background with a border-line on top and bottom. | -| `transparent` | CSS transparent. Used in situations where a Section is of interest, but without a color as a basis. | +| Style | Description | +| ------------------- | --------------------------------------------------------------------------------------------------- | +| `white` | uses `--color-white`. | +| `divider` | uses `--color-white` as background with a border-line on top and bottom. | +| `transparent` | CSS transparent. Used in situations where a Section is of interest, but without a color as a basis. | +| ~~`mint-green-12`~~ | _(default)_ uses `--color-mint-green-12`. | +| ~~`mint-green`~~ | uses `--color-mint-green`. | +| ~~`lavender`~~ | uses `--color-lavender`. | +| ~~`sand-yellow`~~ | uses `--color-sand-yellow`. | +| ~~`pistachio`~~ | uses `--color-pistachio`. | +| ~~`black-3`~~ | uses `--color-black-3`. | +| ~~`emerald-green`~~ | uses `--color-emerald-green`. | +| ~~`fire-red`~~ | uses `--color-fire-red`. Is used by [GlobalStatus](/uilib/components/global-status) | diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index 3e0c63ca636..fe5091abe82 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -578,7 +578,7 @@ button.dnb-button::-moz-focus-inner { top: 0; width: 100vw; height: 100%; - color: var(--color-mint-green-12); + color: var(--color-mint-green-12); /** deprecated: should be white in v11 */ background-color: currentcolor; box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap index 87fcb4d0970..adf89f7557e 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap @@ -578,7 +578,7 @@ button.dnb-button::-moz-focus-inner { top: 0; width: 100vw; height: 100%; - color: var(--color-mint-green-12); + color: var(--color-mint-green-12); /** deprecated: should be white in v11 */ background-color: currentcolor; box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } diff --git a/packages/dnb-eufemia/src/components/section/Section.tsx b/packages/dnb-eufemia/src/components/section/Section.tsx index caea84409a1..81d5cee8a7f 100644 --- a/packages/dnb-eufemia/src/components/section/Section.tsx +++ b/packages/dnb-eufemia/src/components/section/Section.tsx @@ -14,25 +14,32 @@ import { import { createSpacingClasses } from '../space/SpacingHelper' import type { DynamicElement, SpacingProps } from '../../shared/types' -export type SectionVariants = - | 'error' - | 'info' - | 'warning' - | 'success' +export type SectionVariants = 'error' | 'info' | 'warning' | 'success' export type SectionStyleTypes = | 'divider' | 'white' | 'transparent' + + /** @deprecated in v11 use "variant" prop instead */ | 'lavender' + /** @deprecated in v11 use "variant" prop instead */ | 'pistachio' + /** @deprecated in v11 use "variant" prop instead */ | 'emerald-green' + /** @deprecated in v11 use "variant" prop instead */ | 'sea-green' + /** @deprecated in v11 use "variant" prop instead */ | 'fire-red' + /** @deprecated in v11 use "variant" prop instead */ | 'fire-red-8' + /** @deprecated in v11 use "variant" prop instead */ | 'sand-yellow' + /** @deprecated in v11 use "variant" prop instead */ | 'black-3' + /** @deprecated in v11 use "variant" prop instead */ | 'mint-green' + /** @deprecated in v11 use "variant" prop instead */ | 'mint-green-12' export type SectionSpacing = diff --git a/packages/dnb-eufemia/src/components/section/__tests__/Section.screenshot.test.ts b/packages/dnb-eufemia/src/components/section/__tests__/Section.screenshot.test.ts index 631e1218b60..14309535869 100644 --- a/packages/dnb-eufemia/src/components/section/__tests__/Section.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/section/__tests__/Section.screenshot.test.ts @@ -13,40 +13,57 @@ const sections = { 'default', 'white', 'divider', - 'mint-green', - 'black-3', - 'sea-green', - 'emerald-green', - 'lavender', - 'sand-yellow', - 'pistachio', - 'fire-red', 'z-index', 'info', 'error', 'warning', - 'success' + 'success', ], - sbanken: [ - 'default', - 'white', - 'info', - 'error', - 'warning', - 'success' - ] + sbanken: ['default', 'white', 'info', 'error', 'warning', 'success'], } -describe.each(['ui', 'sbanken'])('Section for %s', themeName => { +describe.each(['ui', 'sbanken'])('Section for %s', (themeName) => { + setupPageScreenshot({ + themeName, + url: '/uilib/components/section/demos', + }) + + test.each(sections[themeName])( + 'have to match %p section', + async (sectionName) => { + const screenshot = await makeScreenshot({ + selector: `[data-visual-test="section-${sectionName}"]`, + }) + expect(screenshot).toMatchImageSnapshot() + } + ) +}) + +// Should be removed in v11 +const deprecatedStyles = [ + 'mint-green', + 'black-3', + 'sea-green', + 'emerald-green', + 'lavender', + 'sand-yellow', + 'pistachio', + 'fire-red', +] + +describe.each(['ui'])('Section for %s', (themeName) => { setupPageScreenshot({ themeName, - url: '/uilib/components/section/demos' + url: '/uilib/components/section/deprecated', }) - test.each(sections[themeName])("have to match %p section", async sectionName => { - const screenshot = await makeScreenshot({ - selector: `[data-visual-test="section-${sectionName}"]`, - }) - expect(screenshot).toMatchImageSnapshot() - }); + test.each(deprecatedStyles)( + 'have to match %p section', + async (sectionName) => { + const screenshot = await makeScreenshot({ + selector: `[data-visual-test="section-${sectionName}"]`, + }) + expect(screenshot).toMatchImageSnapshot() + } + ) }) diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap index a0022684b6e..1012e0cc93d 100644 --- a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap @@ -27,7 +27,7 @@ exports[`Section scss has to match style dependencies css 1`] = ` top: 0; width: 100vw; height: 100%; - color: var(--color-mint-green-12); + color: var(--color-mint-green-12); /** deprecated: should be white in v11 */ background-color: currentcolor; box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } @@ -87,6 +87,15 @@ exports[`Section scss have to match default theme snapshot 1`] = ` /* * Utilities */ +.dnb-section { + /** deprecated: default should be white in v11 */ + /** deprecated */ + /** deprecated */ + /** deprecated */ + /** deprecated */ + /** deprecated */ + /** deprecated */ +} .dnb-section--divider { color: var(--color-black-80); } diff --git a/packages/dnb-eufemia/src/components/section/style/dnb-section.scss b/packages/dnb-eufemia/src/components/section/style/dnb-section.scss index 89c8f22c6b3..46f56597b3e 100644 --- a/packages/dnb-eufemia/src/components/section/style/dnb-section.scss +++ b/packages/dnb-eufemia/src/components/section/style/dnb-section.scss @@ -20,7 +20,9 @@ top: 0; width: 100vw; height: 100%; - color: var(--color-mint-green-12); + color: var( + --color-mint-green-12 + ); /** deprecated: should be white in v11 */ background-color: currentcolor; // we use box-shadow to avoid a horizontal scrollbar diff --git a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss index fbfd243da4d..b346885fb02 100644 --- a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss @@ -28,7 +28,9 @@ } } - &--mint-green-12, &--default { + /** deprecated: default should be white in v11 */ + &--mint-green-12, + &--default { color: var(--color-black-80); &::after { @@ -44,6 +46,7 @@ } } + /** deprecated */ &--mint-green { color: var(--color-black-80); @@ -52,6 +55,7 @@ } } + /** deprecated */ &--lavender { color: var(--color-black-80); @@ -60,7 +64,8 @@ } } - &--sand-yellow, &--warning { + &--sand-yellow,/** deprecated */ + &--warning { color: var(--color-black-80); &::after { @@ -68,7 +73,8 @@ } } - &--pistachio, &--info { + &--pistachio,/** deprecated */ + &--info { color: var(--color-black-80); &::after { @@ -76,6 +82,7 @@ } } + /** deprecated */ &--black-3 { color: var(--color-black-80); @@ -84,6 +91,7 @@ } } + /** deprecated */ &--emerald-green { color: var(--color-mint-green); @@ -92,6 +100,7 @@ } } + /** deprecated */ &--sea-green { color: var(--color-white); @@ -100,6 +109,7 @@ } } + /** deprecated */ &--fire-red { color: var(--color-white); @@ -108,7 +118,8 @@ } } - &--fire-red-8, &--error { + &--fire-red-8,/** deprecated */ + &--error { color: var(--color-black-80); &::after { @@ -125,16 +136,16 @@ } // Contrast styles - &--fire-red .dnb-anchor, - &--emerald-green .dnb-anchor, - &--sea-green .dnb-anchor, + &--fire-red .dnb-anchor,/** deprecated */ + &--emerald-green .dnb-anchor,/** deprecated */ + &--sea-green .dnb-anchor,/** deprecated */ &--success .dnb-anchor { @include useAnchorContrastStyle(); } - &--fire-red .dnb-button--tertiary, - &--emerald-green .dnb-button--tertiary, - &--sea-green .dnb-button--tertiary { + &--fire-red .dnb-button--tertiary,/** deprecated */ + &--emerald-green .dnb-button--tertiary,/** deprecated */ + &--sea-green .dnb-button--tertiary /** deprecated */ { color: var(--color-white); &:hover { @@ -155,8 +166,8 @@ } // contrast color - &--fire-red, - &--mint-green { + &--fire-red,/** deprecated */ + &--mint-green /** deprecated */ { ::selection { background-color: var(--color-white); } diff --git a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap index b8dad2350ed..0517d87bc87 100644 --- a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap @@ -578,7 +578,7 @@ button.dnb-button::-moz-focus-inner { top: 0; width: 100vw; height: 100%; - color: var(--color-mint-green-12); + color: var(--color-mint-green-12); /** deprecated: should be white in v11 */ background-color: currentcolor; box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; }