Skip to content

Commit

Permalink
docs(GlobalStatus): refactor jsx examples to tsx (#2202)
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz @tujoworker
langz authored and tujoworker committed May 31, 2023
1 parent fde3012 commit d4da191
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 92 deletions.
131 changes: 131 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,133 @@ 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',
title: 'New Title',
show: true,
})

// 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
id="custom-id"
status_id="custom-id-1"
title="New title"
text="First long info text ..."
item="Item from status #1"
on_close={({ status_id }) => {
console.log('on_close', status_id)
}}
/>
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-id" 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"
on_close={({ status_id }) => {
console.log('on_close', status_id)
}}
/>
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-status" status_id="custom-id-1" />
</ComponentBox>
)

export const GlobalStatusExampleControllers = () => (
<ComponentBox hidePreview hideToolbar>
{/* Place the status where ever you have to.*/}
<GlobalStatus id="custom-id" />
{/* Manipulate the status later on. Every property is optional.*/}
<GlobalStatus.Add
id="custom-id"
status_id="status-1"
item="Item #1"
text="New Text"
on_close={({ status_id }) => {
console.log('on_close', status_id)
}}
/>
<GlobalStatus.Add
id="custom-id"
status_id="status-2"
item="Item #2"
text="New Text"
title="New Title"
on_close={({ status_id }) => {
console.log('on_close', status_id)
}}
/>
<GlobalStatus.Add
id="custom-id"
status_id="status-3"
item="Item #3"
text="Text #3"
on_close={({ status_id }) => {
console.log('on_close', status_id)
}}
/>
{/* or update the status.*/}
<GlobalStatus.Update id="custom-id" text="text" />
{/* Later you can remove a resolved item.*/}
<GlobalStatus.Remove id="custom-id" status_id="status-3" />
</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 />
18 changes: 3 additions & 15 deletions ...dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
showTabs: true
---

import { GlobalStatusExampleControllers } from 'Docs/uilib/components/global-status/Examples'

## Properties

| Properties | Description |
Expand Down Expand Up @@ -50,21 +52,7 @@ const items = [
In React, you can make use of the helper components, the function as a kind of a controller component.
The goal is to update the content (properties/events) of the target GlobalStatus.

```jsx
// Place the status where ever you have to.
<GlobalStatus id="custom-id" />

// Manipulate the status later on. Every property is optional.
<GlobalStatus.Add id="custom-id" status_id="status-1" item="Item #1" text="New Text" />
<GlobalStatus.Add id="custom-id" status_id="status-2" item="Item #2" title="New Title" />
<GlobalStatus.Add id="custom-id" status_id="status-3" item="Item #3" />

// or update the status.
<GlobalStatus.Update id="custom-id" show />

// Later you can remove a resolved item.
<GlobalStatus.Remove id="custom-id" status_id="status-3" />
```
<GlobalStatusExampleControllers />

| Controller Properties | Description |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down
8 changes: 5 additions & 3 deletions packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export type GlobalStatusText =
| string
| ((...args: any[]) => any)
| React.ReactNode;
export type GlobalStatusItems = string | ((...args: any[]) => any) | any[];
export type GlobalStatusItem = string | ((...args: any[]) => any) | any;
export type GlobalStatusState = 'error' | 'info';
export type GlobalStatusShow = 'auto' | any | any | 'true' | 'false';
export type GlobalStatusDelay = string | number;
Expand Down Expand Up @@ -38,7 +38,7 @@ export interface GlobalStatusProps
/**
* The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. See "Item Object" example below.
*/
items?: GlobalStatusItems;
items?: GlobalStatusItem[];

/**
* The icon shown before the status title. Defaults to `exclamation`.
Expand Down Expand Up @@ -197,6 +197,7 @@ export type GlobalStatusInterceptorProps = {
* Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
*/
show: boolean;
item?: GlobalStatusItem;
};
export type GlobalStatusInterceptorUpdateEvents = {
/**
Expand All @@ -218,6 +219,7 @@ export type GlobalStatusInterceptorUpdateEvents = {
* Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
*/
show?: boolean;
text?: string;
};
export type GlobalStatusInterceptor = {
update: (props: GlobalStatusInterceptorUpdateEvents) => void;
Expand All @@ -234,7 +236,7 @@ export default class GlobalStatus extends React.Component<
static Add: (props: GlobalStatusAddProps) => JSX.Element;
static Update: (
props: GlobalStatusUpdateProps
) => GlobalStatusInterceptor;
) => JSX.Element & GlobalStatusInterceptor;
static Remove: (props: GlobalStatusRemoveProps) => JSX.Element;
render(): JSX.Element;
}
2 changes: 1 addition & 1 deletion packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ const DemoAnimation = () => {
<GlobalStatus
title="Demo Animation"
text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
items='["Status text 1", "Status text 2"]'
items={['Status text 1', 'Status text 2']}
// items={['Status text 1', 'Status text 2']}
// items={items}
// demo={showDemo}
Expand Down

0 comments on commit d4da191

Please sign in to comment.