Skip to content

Commit

Permalink
docs(GlobalStatus): refactor jsx examples to tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz committed Apr 12, 2023
1 parent b464ab1 commit 10dd04f
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 73 deletions.
83 changes: 83 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Input,
Section,
ToggleButton,
FormSet,
} from '@dnb/eufemia/src'

export const GlobalStatusError = () => (
Expand Down Expand Up @@ -294,3 +295,85 @@ export const GlobalStatusUpdate = () => (
}}
</ComponentBox>
)

export const GlobalStatusInfoExample1 = () => (
<ComponentBox hidePreview hideToolbar>
<GlobalStatus id="other-global-status" />
</ComponentBox>
)

export const GlobalStatusInfoExample2 = () => (
<ComponentBox hidePreview hideToolbar>
<GlobalStatus id="other-global-status" />
<Input global_status_id="other-global-status" />
</ComponentBox>
)

export const GlobalStatusInfoExample3 = () => (
<ComponentBox hidePreview hideToolbar>
<GlobalStatus id="other-global-status" />
<FormSet global_status_id="other-global-status">
<Input status="Message" />
</FormSet>
</ComponentBox>
)

export const GlobalStatusInfoExampleManipulate1 = () => (
<ComponentBox hidePreview hideToolbar>
{() => {
// 1. Update / extend the the status like so:

const statusOne = GlobalStatus.create({
id: 'other-global-status', // or main
status_id: 'custom-id-1',
text: 'New Text',
item: 'Item from status #1',
})

// 2. and removes "custom-id-1" again if needed

statusOne.update({
text: 'Updated Text',
})

// 3. and removes "custom-id-1" again if needed

statusOne.remove()

return <GlobalStatus id="other-global-status" />
}}
</ComponentBox>
)

export const GlobalStatusInfoExampleManipulate2 = () => (
<ComponentBox hidePreview hideToolbar>
{/* 1. Place it under the header bar */}
<GlobalStatus text="Optional default text" />
{/* 2. later on, you can show a message */}
<GlobalStatus.Add
status_id="custom-id-1"
title="New title"
text="First long info text ..."
item="Item from status #1"
/>
{/* 3. and remove it again */}
<GlobalStatus.Remove status_id="custom-id-1" />
</ComponentBox>
)

export const GlobalStatusInfoExampleManipulate3 = () => (
<ComponentBox hidePreview hideToolbar>
{/* 1. Place it somewhere in your application */}
<GlobalStatus id="custom-status" />
{/* 2. later on, you can show a message */}
<GlobalStatus.Add
id="custom-status"
status_id="custom-id-1"
title="New title"
text="First long info text ..."
item="Item from status #1"
/>
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-status" status_id="custom-id-1" />
</ComponentBox>
)
89 changes: 16 additions & 73 deletions packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
showTabs: true
---

import {
GlobalStatusInfoExample1,
GlobalStatusInfoExample2,
GlobalStatusInfoExample3,
GlobalStatusInfoExampleManipulate1,
GlobalStatusInfoExampleManipulate2,
GlobalStatusInfoExampleManipulate3,
} from 'Docs/uilib/components/global-status/Examples'

## Description

The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form ( displaying form errors, messages etc. ).
Expand All @@ -18,31 +27,18 @@ By default, the `GlobalStatus` is automatically connected together with the [For

Normally, you only want to have **one** `GlobalStatus` inside your application. But you can have several in parallel. But make sure you give every other a new ID:

```jsx
<GlobalStatus id="other-global-status" />
```
<GlobalStatusInfoExample1 />

### Where to put it

- The `GlobalStatus` component should be positioned right under the header. By default, it uses `main` as the ID.
- Or as a secondary summary of errors in a submit form. Keep in mind, by default, form components like [Input](/uilib/components/input) are using the ID `main`. To make sure the build in [FormStatus](/uilib/components/form-status) is sending along the message to another `GlobalStatus`, you have to set the `global_status_id`, like:

```jsx
<GlobalStatus id="other-global-status" />
...
<Input global_status_id="other-global-status" ... />
```
<GlobalStatusInfoExample2 />

But you can also make use of the [FormSet](/uilib/components/form-set) or [FormRow](/uilib/components/form-row) which will send along the `global_status_id` the underlying/wrapped components, like:

```jsx
<GlobalStatus id="other-global-status" />
...
<FormSet global_status_id="other-global-status">
<Input status="Message" />
...
</FormSet>
```
<GlobalStatusInfoExample3 />

### Manually updates

Expand All @@ -56,69 +52,16 @@ You can access and manipulate an existing GlobalStatus from outside of the React

1. Given you have already defined a GlobalStatus in JSX:

```jsx
<GlobalStatus id="other-global-status" />
```
<GlobalStatusInfoExample1 />

2. Then you can control it from within a JavaScript context whenever you need to:

```js
import { GlobalStatus } from '@dnb/eufemia/components'

// 1. Update / extend the the status like so:
const statusOne = GlobalStatus.create({
id: 'other-global-status', // or main
status_id: 'custom-id-1',
text: 'New Text',
item: 'Item from status #1',
})

// 2. and removes "custom-id-1" again if needed
statusOne.update({
text: 'Updated Text',
})

// 3. and removes "custom-id-1" again if needed
statusOne.remove()
```
<GlobalStatusInfoExampleManipulate1 />

### JSX

```jsx
import { GlobalStatus } from '@dnb/eufemia/components'

// 1. Place it under the header bar
<GlobalStatus text="Optional default text" />

// 2. later on, you can show a message
<GlobalStatus.Add
status_id="custom-id-1"
title="New title"
text="First long info text ..."
item="Item from status #1"
/>

// 3. and remove it again
<GlobalStatus.Remove status_id="custom-id-1" />
```
<GlobalStatusInfoExampleManipulate2 />

If you need an additional `GlobalStatus`, define a custom ID (custom-status):

```jsx
import { GlobalStatus } from '@dnb/eufemia/components'

// 1. Place it somewhere in your application
<GlobalStatus id="custom-status" />

// 2. later on, you can show a message
<GlobalStatus.Add
id="custom-status"
status_id="custom-id-1"
title="New title"
text="First long info text ..."
item="Item from status #1"
/>

// 3. and remove it again
<GlobalStatus.Remove id="custom-status" status_id="custom-id-1" />
```
<GlobalStatusInfoExampleManipulate3 />

0 comments on commit 10dd04f

Please sign in to comment.