chore: adds stories for globalStatus prop

dnbexperience · May 31, 2023 · 173b040 · 173b040
1 parent 5bcf549
commit 173b040
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 3 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.tsx
@@ -13,6 +13,7 @@ import {
   IconPrimary,
   Button,
   FormRow,
+  GlobalStatus,
 } from '../..'
 import { Anchor } from '../../../'
 import { Context } from '../../../shared'
@@ -908,3 +909,19 @@ export function DataSuffix() {
     </WideStyle>
   )
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Autocomplete
+        no_animation
+        label="Label:"
+        data={numbers}
+        search_numbers
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/button/stories/Button.stories.tsx b/packages/dnb-eufemia/src/components/button/stories/Button.stories.tsx
@@ -8,6 +8,7 @@ import { Wrapper, Box } from 'storybook-utils/helpers'
 import styled from '@emotion/styled'
 
 import Button from '../Button'
+import { GlobalStatus } from '../..'
 
 const WrappedButton = styled(Button)`
   /* width: 10rem; */
@@ -345,3 +346,16 @@ export const IconButton = Template.bind({})
 IconButton.args = {
   icon: 'bell',
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Button
+        text="Text"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/checkbox/stories/Checkbox.stories.tsx b/packages/dnb-eufemia/src/components/checkbox/stories/Checkbox.stories.tsx
@@ -7,7 +7,7 @@ import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 import styled from '@emotion/styled'
 
-import { Checkbox, Button, FormLabel, FormRow } from '../..'
+import { Checkbox, Button, FormLabel, FormRow, GlobalStatus } from '../..'
 
 export default {
   title: 'Eufemia/Components/Checkbox',
@@ -143,3 +143,16 @@ function ControlledVsUncontrolled() {
     </>
   )
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Checkbox
+        label="Checkbox"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx b/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx
@@ -23,6 +23,7 @@ import {
   Dropdown,
   Input,
   Section,
+  GlobalStatus,
 } from '../..'
 
 export default {
@@ -498,3 +499,19 @@ const CustomDate = () => {
 //     </Section>
 //   )
 // }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <DatePicker
+        label="Date Picker 1:"
+        right="small"
+        date="1981-01-15"
+        title="My Button"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx
@@ -17,6 +17,7 @@ import {
   FormRow,
   NumberFormat,
   Drawer,
+  GlobalStatus,
 } from '../..'
 import { Link } from '../../..'
 import { DrawerListData } from '../../../fragments/DrawerList'
@@ -986,3 +987,17 @@ export function UpdateData() {
     </>
   )
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Dropdown
+        title="Default"
+        data={dropdownData}
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx b/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx
@@ -19,6 +19,7 @@ import {
   Space,
   Dialog,
   HelpButton,
+  GlobalStatus,
 } from '../..'
 import { Link } from '../../..'
 
@@ -204,3 +205,17 @@ export const ToggleAnimation = () => {
     </Wrapper>
   )
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <FormStatus
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        state="error"
+      >
+        Some text
+      </FormStatus>
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/input/stories/Input.stories.tsx b/packages/dnb-eufemia/src/components/input/stories/Input.stories.tsx
@@ -15,6 +15,7 @@ import {
   FormSet,
   FormRow,
   FormLabel,
+  GlobalStatus,
 } from '../..'
 import InputPassword from '../InputPassword'
 import { format } from '../../number-format/NumberUtils'
@@ -536,3 +537,16 @@ export function ControlledInput() {
     </>
   )
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Input
+        title="Default"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/radio/stories/Radio.stories.tsx b/packages/dnb-eufemia/src/components/radio/stories/Radio.stories.tsx
@@ -12,6 +12,7 @@ import {
   FormLabel,
   Button,
   HelpButton,
+  GlobalStatus,
 } from '../..'
 
 import { H2 } from '../../..'
@@ -287,3 +288,17 @@ const shuffleArray = (arr) =>
     .map((a) => [Math.random(), a])
     .sort((a, b) => a[0] - b[0])
     .map((a) => a[1])
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Radio
+        label="First"
+        value="first"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/switch/stories/Switch.stories.tsx b/packages/dnb-eufemia/src/components/switch/stories/Switch.stories.tsx
@@ -6,7 +6,7 @@
 import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 
-import { Switch, FormLabel, HelpButton } from '../..'
+import { Switch, FormLabel, HelpButton, GlobalStatus } from '../..'
 
 export default {
   title: 'Eufemia/Components/Switch',
@@ -83,3 +83,17 @@ export const SwitchSandbox = () => (
     </Box>
   </Wrapper>
 )
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Switch
+        label="First"
+        value="first"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/textarea/stories/Textarea.stories.tsx b/packages/dnb-eufemia/src/components/textarea/stories/Textarea.stories.tsx
@@ -7,7 +7,7 @@ import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 
 import Provider from '../../../shared/Provider'
-import { Textarea, FormRow } from '../..'
+import { Textarea, FormRow, GlobalStatus } from '../..'
 
 export default {
   title: 'Eufemia/Components/Textarea',
@@ -149,3 +149,17 @@ export const TextareaSandbox = () => (
     </Box>
   </Wrapper>
 )
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <Textarea
+        label="First"
+        value="first"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/toggle-button/stories/ToggleButton.stories.tsx b/packages/dnb-eufemia/src/components/toggle-button/stories/ToggleButton.stories.tsx
@@ -14,6 +14,7 @@ import {
   // FormSet,
   FormRow,
   FormLabel,
+  GlobalStatus,
 } from '../..'
 
 import { H2 } from '../../..'
@@ -404,3 +405,18 @@ export function MultiselectRerender() {
     </>
   )
 }
+
+export const GlobalStatusExample = () => {
+  return (
+    <>
+      <GlobalStatus id="my-id" />
+      <ToggleButton
+        variant="checkbox"
+        text="Item 3"
+        value="item_3"
+        globalStatus={{ id: 'my-id', message: 'my message' }}
+        status="Message"
+      />
+    </>
+  )
+}