Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(Section): move deprecated styles into a seperate docs page
Browse files Browse the repository at this point in the history
This is an addition to PR #2582
tujoworker committed Aug 23, 2023
1 parent 968efdd commit 25b9a7f
Showing 13 changed files with 199 additions and 131 deletions.
Original file line number Diff line number Diff line change
@@ -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_
Original file line number Diff line number Diff line change
@@ -78,7 +78,7 @@ export const SectionDemoEmeraldGreen = () => (
)

export const SectionDemoLavender = () => (
<ComponentBox data-visual-test="section-lavender">
<ComponentBox hideCode data-visual-test="section-lavender">
<Section spacing="small" style_type="lavender">
<P space={0}>
Visual DNB Section: <Anchor href="#">lavender</Anchor>
@@ -88,7 +88,7 @@ export const SectionDemoLavender = () => (
)

export const SectionDemoBlack3 = () => (
<ComponentBox data-visual-test="section-black-3">
<ComponentBox hideCode data-visual-test="section-black-3">
<Section spacing style_type="black-3">
<P space={0}>
Visual DNB Section: <Anchor href="#">black-3</Anchor>
@@ -98,7 +98,7 @@ export const SectionDemoBlack3 = () => (
)

export const SectionDemoSandYellow = () => (
<ComponentBox data-visual-test="section-sand-yellow">
<ComponentBox hideCode data-visual-test="section-sand-yellow">
<Section spacing style_type="sand-yellow">
<P space={0}>
Visual DNB Section: <Anchor href="#">sand-yellow</Anchor>
@@ -108,7 +108,7 @@ export const SectionDemoSandYellow = () => (
)

export const SectionDemoPistachio = () => (
<ComponentBox data-visual-test="section-pistachio">
<ComponentBox hideCode data-visual-test="section-pistachio">
<Section spacing style_type="pistachio">
<P space={0}>
Visual DNB Section: <Anchor href="#">pistachio</Anchor>
@@ -118,7 +118,7 @@ export const SectionDemoPistachio = () => (
)

export const SectionDemoFireRed = () => (
<ComponentBox data-visual-test="section-fire-red">
<ComponentBox hideCode data-visual-test="section-fire-red">
<Section spacing style_type="fire-red">
<P space={0}>
Visual DNB Section: <Anchor href="#">fire-red</Anchor>
@@ -128,7 +128,7 @@ export const SectionDemoFireRed = () => (
)

export const SectionDemoFireRed8 = () => (
<ComponentBox data-visual-test="section-fire-red-8">
<ComponentBox hideCode data-visual-test="section-fire-red-8">
<Section spacing style_type="fire-red-8">
<P space={0}>
Visual DNB Section: <Anchor href="#">fire-red-8</Anchor>
@@ -139,7 +139,7 @@ export const SectionDemoFireRed8 = () => (

export const SectionZIndex = () =>
!globalThis.IS_TEST ? null : (
<ComponentBox data-visual-test="section-z-index">
<ComponentBox hideCode data-visual-test="section-z-index">
<Section spacing style_type="mint-green-12">
mint-green-12
<div>
@@ -190,7 +190,7 @@ export const SectionZIndex = () =>
)

export const SectionDemoInfo = () => (
<ComponentBox data-visual-test="section-info">
<ComponentBox hideCode data-visual-test="section-info">
<Section spacing variant="info">
<P space={0}>
Generic info section: <Anchor href="#">info</Anchor>
@@ -200,7 +200,7 @@ export const SectionDemoInfo = () => (
)

export const SectionDemoError = () => (
<ComponentBox data-visual-test="section-error">
<ComponentBox hideCode data-visual-test="section-error">
<Section spacing variant="error">
<P space={0}>
Error section: <Anchor href="#">error</Anchor>
@@ -210,7 +210,7 @@ export const SectionDemoError = () => (
)

export const SectionDemoWarning = () => (
<ComponentBox data-visual-test="section-warning">
<ComponentBox hideCode data-visual-test="section-warning">
<Section spacing variant="warning">
<P space={0}>
Warning section: <Anchor href="#">warning</Anchor>
@@ -220,11 +220,11 @@ export const SectionDemoWarning = () => (
)

export const SectionDemoSuccess = () => (
<ComponentBox data-visual-test="section-success">
<ComponentBox hideCode data-visual-test="section-success">
<Section spacing variant="success">
<P space={0}>
Success section: <Anchor href="#">success</Anchor>
</P>
</Section>
</ComponentBox>
)
)
Original file line number Diff line number Diff line change
@@ -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 {

<SectionDemoDivider />

<VisibilityByTheme hidden="sbanken">

### Mint-Green Section

<SectionDemoMintGreen />

### Sea-Green Section

<SectionDemoSeaGreen />

### Emerald-Green Section

<SectionDemoEmeraldGreen />

### Lavender Section

<SectionDemoLavender />

### Grey Section

<SectionDemoBlack3 />

### Sand-Yellow Section

<SectionDemoSandYellow />

### Pistachio Section

<SectionDemoPistachio />

### Fire-Red Section

<SectionDemoFireRed />

### Fire-Red-8 Section

<SectionDemoFireRed8 />

<SectionZIndex />

</VisibilityByTheme>

### Info Section

<SectionDemoInfo />
@@ -99,3 +52,4 @@ import {

<SectionDemoSuccess />

<SectionZIndex />
Original file line number Diff line number Diff line change
@@ -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

<SectionDemoMintGreen />

### Sea-Green Section

<SectionDemoSeaGreen />

### Emerald-Green Section

<SectionDemoEmeraldGreen />

### Lavender Section

<SectionDemoLavender />

### Black-3 Section

<SectionDemoBlack3 />

### Sand-Yellow Section

<SectionDemoSandYellow />

### Pistachio Section

<SectionDemoPistachio />

### Fire-Red Section

<SectionDemoFireRed />

### Fire-Red-8 Section

<SectionDemoFireRed8 />
Original file line number Diff line number Diff line change
@@ -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 `<section>`. |
| `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) |
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;
}
17 changes: 12 additions & 5 deletions packages/dnb-eufemia/src/components/section/Section.tsx
Original file line number Diff line number Diff line change
@@ -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 =
Original file line number Diff line number Diff line change
@@ -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()
}
)
})
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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,22 +64,25 @@
}
}

&--sand-yellow, &--warning {
&--sand-yellow,/** deprecated */
&--warning {
color: var(--color-black-80);

&::after {
color: var(--color-sand-yellow);
}
}

&--pistachio, &--info {
&--pistachio,/** deprecated */
&--info {
color: var(--color-black-80);

&::after {
color: var(--color-pistachio);
}
}

/** 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);
}
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 25b9a7f

Please sign in to comment.