Skip to content

Commit

Permalink
Merge pull request #1047 from dnbexperience/fix/form-status-markup
Browse files Browse the repository at this point in the history 
GlobalStatus refactor
  • Loading branch information
@tujoworker
tujoworker authored Oct 19, 2021
2 parents 9f743eb + 67c53ec commit 88f003f
Show file tree
Hide file tree
Showing 25 changed files with 769 additions and 556 deletions.
2 changes: 2 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const GlobalStatusError = () => (
show="true"
autoscroll="false"
no_animation="true"
omit_set_focus="true"
id="demo-1"
/>
`}
Expand All @@ -39,6 +40,7 @@ export const GlobalStatusInfo = () => (
show="true"
autoscroll="false"
no_animation="true"
omit_set_focus="true"
id="demo-4"
/>
`}
Expand Down
137 changes: 137 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
/**
* UI lib Component Example
*
*/

import React from 'react'
import ComponentBox from 'Src/shared/tags/ComponentBox'

export const SectionDemo = () => (
<ComponentBox hideCode data-visual-test="section-default">
{() => /* jsx */ `
<Section>
<P top="xx-large">Visual DNB Section: <Anchor href="#">default</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoSpacing = () => (
<ComponentBox hideCode data-visual-test="section-spacing">
{() => /* jsx */ `
<Section spacing="large">
<P space={0}>Visual DNB Section: <Anchor href="#">default with spacing</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoWhite = () => (
<ComponentBox hideCode data-visual-test="section-white">
{() => /* jsx */ `
<Section spacing="true" style_type="white">
<P space={0}>Visual DNB Section: <Anchor href="#">white</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoDivier = () => (
<ComponentBox hideCode data-visual-test="section-divider">
{() => /* jsx */ `
<Section spacing="true" style_type="divider">
<P space={0}>Visual DNB Section: <Anchor href="#">divider</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoMintGreen = () => (
<ComponentBox hideCode data-visual-test="section-mint-green">
{() => /* jsx */ `
<Section spacing="true" style_type="mint-green">
<P space={0}>Visual DNB Section: <Anchor href="#">mint-green</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoSeaGreen = () => (
<ComponentBox hideCode data-visual-test="section-sea-green">
{() => /* jsx */ `
<Section spacing="true" style_type="sea-green">
<P space={0}>Visual DNB Section: <Anchor href="#">sea-green</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoEmeraldGreen = () => (
<ComponentBox hideCode data-visual-test="section-emerald-green">
{() => /* jsx */ `
<Section spacing="true" style_type="emerald-green">
<P space={0}>Visual DNB Section: <Anchor href="#">emerald-green</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoLavender = () => (
<ComponentBox data-visual-test="section-lavender">
{() => /* jsx */ `
<Section spacing="true" style_type="lavender">
<P space={0}>Visual DNB Section: <Anchor href="#">lavender</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoBlack3 = () => (
<ComponentBox data-visual-test="section-black-3">
{() => /* jsx */ `
<Section spacing="true" style_type="black-3">
<P space={0}>Visual DNB Section: <Anchor href="#">black-3</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoSandYellow = () => (
<ComponentBox data-visual-test="section-sand-yellow">
{() => /* jsx */ `
<Section spacing="true" style_type="sand-yellow">
<P space={0}>Visual DNB Section: <Anchor href="#">sand-yellow</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoPistachio = () => (
<ComponentBox data-visual-test="section-pistachio">
{() => /* jsx */ `
<Section spacing="true" style_type="pistachio">
<P space={0}>Visual DNB Section: <Anchor href="#">pistachio</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoFireRed = () => (
<ComponentBox data-visual-test="section-fire-red">
{() => /* jsx */ `
<Section spacing="true" style_type="fire-red">
<P space={0}>Visual DNB Section: <Anchor href="#">fire-red</Anchor></P>
</Section>
`}
</ComponentBox>
)

export const SectionDemoFireRed8 = () => (
<ComponentBox data-visual-test="section-fire-red-8">
{() => /* jsx */ `
<Section spacing="true" style_type="fire-red-8">
<P space={0}>Visual DNB Section: <Anchor href="#">fire-red-8</Anchor></P>
</Section>
`}
</ComponentBox>
)
134 changes: 35 additions & 99 deletions packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,136 +4,72 @@ showTabs: true

import ComponentBox from 'Src/shared/tags/ComponentBox'

import {
SectionDemo,
SectionDemoSpacing,
SectionDemoWhite,
SectionDemoDivier,
SectionDemoMintGreen,
SectionDemoSeaGreen,
SectionDemoEmeraldGreen,
SectionDemoLavender,
SectionDemoBlack3,
SectionDemoSandYellow,
SectionDemoPistachio,
SectionDemoFireRed,
SectionDemoFireRed8,
} from 'Pages/uilib/components/section/Examples'

## Demos

### Default Section without spacing

<ComponentBox hideCode data-visual-test="section-default">
{
/* @html */ `
<Section>
<P top="xx-large">Visual DNB Section: <code className="dnb-code">default</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemo />

### Default Section with large spacing

<ComponentBox hideCode data-visual-test="section-spacing">
{
/* @html */ `
<Section spacing="large">
<P space={0}>Visual DNB Section: <code className="dnb-code">default with spacing</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoSpacing />

### White Section

<ComponentBox hideCode data-visual-test="section-white">
{
/* @html */ `
<Section spacing="true" style_type="white">
<P space={0}>Visual DNB Section: <code className="dnb-code">white</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoWhite />

### Divider Section

<ComponentBox hideCode data-visual-test="section-divider">
{
/* @html */ `
<Section spacing="true" style_type="divider">
<P space={0}>Visual DNB Section: <code className="dnb-code">divider</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoDivier />

### Mint-Green Section

<ComponentBox hideCode data-visual-test="section-mint-green">
{
/* @html */ `
<Section spacing="true" style_type="mint-green">
<P space={0}>Visual DNB Section: <code className="dnb-code">mint-green</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoMintGreen />

### Sea-Green Section

<SectionDemoSeaGreen />

### Emerald-Green Section

<ComponentBox hideCode data-visual-test="section-emerald-green">
{
/* @html */ `
<Section spacing="true" style_type="emerald-green">
<P space={0}>Visual DNB Section: <code className="dnb-code">emerald-green</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoEmeraldGreen />

### Lavender Section

<ComponentBox data-visual-test="section-lavender">
{
/* @html */ `
<Section spacing="true" style_type="lavender">
<P space={0}>Visual DNB Section: <code className="dnb-code">lavender</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoLavender />

### Grey Section

<ComponentBox data-visual-test="section-black-3">
{
/* @html */ `
<Section spacing="true" style_type="black-3">
<P space={0}>Visual DNB Section: <code className="dnb-code">black-3</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoBlack3 />

### Sand-Yellow Section

<ComponentBox data-visual-test="section-sand-yellow">
{
/* @html */ `
<Section spacing="true" style_type="sand-yellow">
<P space={0}>Visual DNB Section: <code className="dnb-code">sand-yellow</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoSandYellow />

### Pistachio Section

<ComponentBox data-visual-test="section-pistachio">
{
/* @html */ `
<Section spacing="true" style_type="pistachio">
<P space={0}>Visual DNB Section: <code className="dnb-code">pistachio</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoPistachio />

### Fire-Red Section

<ComponentBox data-visual-test="section-fire-red">
{
/* @html */ `
<Section spacing="true" style_type="fire-red">
<P space={0}>Visual DNB Section: <code className="dnb-code">fire-red</code></P>
</Section>
`
}
</ComponentBox>
<SectionDemoFireRed />

### Fire-Red-8 Section

<SectionDemoFireRed8 />
18 changes: 14 additions & 4 deletions packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
Button,
FormRow,
FormSet,
Autocomplete,
} from '@dnb/eufemia/src/components'
import {
H2,
Expand Down Expand Up @@ -49,10 +50,19 @@ export const ComponentAsLabel = () => {
</ToggleButton>

<FormRow>
<Input label={<Component />} status={status} />
<Input
label={<Component />}
status={status ? status + '1' : undefined}
/>
</FormRow>
<Input label={<Component />} status={status} />
<Input label={<Component />} status={status} />
<Input
label={<Component />}
status={status ? status + '2' : undefined}
/>
<Autocomplete
label={<Component />}
status={status ? status + '3' : undefined}
/>
</FormSet>
</>
)
Expand Down Expand Up @@ -249,7 +259,7 @@ const ModalExample = () => (
</Modal>
)

const SimulateSteps = () => {
export const SimulateSteps = () => {
const [count, toggleUpdateStatus] = React.useState(0)
return (
<>
Expand Down
Loading

0 comments on commit 88f003f

Please sign in to comment.