Skip to content

Commit

Permalink
docs(Skeleton): refactor jsx examples to tsx (#2203)
Browse files Browse the repository at this point in the history 
* docs(Skeleton): refactor jsx examples to tsx

* Avoid TypeScript issue

---------

Co-authored-by: Tobias Høegh <tobias@tujo.no>
  • Loading branch information
@langz @tujoworker
langz and tujoworker committed May 31, 2023
1 parent 7285389 commit 14a9f5e
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 73 deletions.
92 changes: 91 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
*
*/

import React from 'react'
import React, { Suspense } from 'react'
import { createBrowserHistory } from 'history'
import ComponentBox from '../../../../shared/tags/ComponentBox'
import Context from '@dnb/eufemia/src/shared/Context'
import {
Input,
H2,
Expand All @@ -13,10 +15,15 @@ import {
Skeleton,
ToggleButton,
FormRow,
Div,
} from '@dnb/eufemia/src'
import { AllComponents } from '../form-row/Examples'
import Provider from '@dnb/eufemia/src/shared/Provider'
import { Article } from '@dnb/eufemia/src/components/skeleton/figures'
import {
createSkeletonClass,
skeletonDOMAttributes,
} from '@dnb/eufemia/src/components/skeleton/SkeletonHelper'

export const SkeletonInputExample = () => (
<ComponentBox>
Expand Down Expand Up @@ -124,3 +131,86 @@ export const SkeletonVisualTests = () => {
</>
)
}

export const SkeletonInfoProvider = () => (
<ComponentBox hidePreview>
<Div id="your-app">
<Skeleton show={true}>
<Input>I'm hidden behind the skeleton</Input>
<Input>I'm hidden behind the skeleton</Input>
</Skeleton>
</Div>
</ComponentBox>
)

export const SkeletonInfoGlobalProvider = () => (
<ComponentBox scope={{ Provider }} hidePreview>
<Provider locale="nb-NO">
<Div id="your-app">
<Provider skeleton={true}>
<Input>I'm hidden behind the skeleton</Input>
<Input>I'm hidden behind the skeleton</Input>
</Provider>
</Div>
</Provider>
</ComponentBox>
)

export const SkeletonInfoExclude = () => (
<ComponentBox hidePreview>
<Skeleton show={true}>
<Input>I'm hidden behind the skeleton</Input>

<Skeleton.Exclude>
<Input>I'm NOT hidden</Input>
</Skeleton.Exclude>
</Skeleton>
</ComponentBox>
)

export const SkeletonInfoSuspense = () => (
<ComponentBox scope={{ Suspense }} hidePreview hideToolbar>
<Suspense
fallback={
<Skeleton show={true}>
<Div id="user-data" />
</Skeleton>
}
>
<Div id="user-data" />
</Suspense>
</ComponentBox>
)

export const SkeletonInfoCustom = () => (
<ComponentBox
hidePreview
hideToolbar
scope={{
createBrowserHistory,
skeletonDOMAttributes,
createSkeletonClass,
Context,
}}
>
{() => {
function Component({ skeleton = false, ...params } = {}) {
const context = React.useContext(Context)

// Handle accessibility features
skeletonDOMAttributes(params, skeleton, context)

// Handle CSS classes – use either "shape" or "font"
const className = createSkeletonClass('font', skeleton, context)

return (
<div {...params} id="my-component" className={className}>
Hello World
</div>
)
}

return <Component />
}}
</ComponentBox>
)
85 changes: 13 additions & 72 deletions packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
showTabs: true
---

import {
SkeletonInfoProvider,
SkeletonInfoGlobalProvider,
SkeletonInfoExclude,
SkeletonInfoSuspense,
SkeletonInfoCustom,
} from 'Docs/uilib/components/skeleton/Examples'

## Description

The Skeleton component is a visual building block helper. It will provide loading placeholders that display a non-interactive preview of the app’s actual UI to visually communicate that content is being processed.
Expand Down Expand Up @@ -55,95 +63,28 @@ If you use the skeleton as a provider, the [Space](/uilib/components/space) comp

But the Skeleton component also supports a set of ready-to-use figures. Use it like `figure="article"`.

```jsx
<App>
...
<Skeleton show={true}>
...
<Input>I'm hidden behind the skeleton</Input>
<Input>I'm hidden behind the skeleton</Input>
...
</Skeleton>
...
</App>
```
<SkeletonInfoProvider />

### Global Provider

You can also use the global [Eufemia Provider](/uilib/usage/customisation/provider) to enable the underlying skeletons. You can even have multiple providers wrapped.

```jsx
<Provider locale="nb-NO">
<App>
...
<Provider skeleton={true}>
...
<Input>I'm hidden behind the skeleton</Input>
<Input>I'm hidden behind the skeleton</Input>
...
</Provider>
...
</App>
</Provider>
```
<SkeletonInfoGlobalProvider />

### Exclude a part

You can easily exclude a part from being transformed to a skeleton by using `Skeleton.Exclude`.

```jsx
<Skeleton show={true}>
<Input>I'm hidden behind the skeleton</Input>
<Skeleton.Exclude>
<Input>I'm NOT hidden</Input>
</Skeleton.Exclude>
</Skeleton>
```
<SkeletonInfoExclude />

### Suspense

You can take advantage of an async component by using the React Suspense with a skeleton fallback.

```jsx
...
<Suspense
fallback={
<Skeleton show={true}>
<UserData />
</Skeleton>
}
>
<UserData />
</Suspense>
...
```
<SkeletonInfoSuspense />

### Create a custom skeleton

In order to create the same skeletons as the build-ins, you can make use of a couple of helper tools.

```jsx
import EufemiaContext from '@dnb/eufemia/shared/Context'
import {
skeletonDOMAttributes,
createSkeletonClass,
} from '@dnb/eufemia/components/skeleton/SkeletonHelper'

function Component({ className, skeleton = false, ...params } = {}) {
const context = React.useContext(EufemiaContext)

// Handle accessibility features
skeletonDOMAttributes(params, skeleton, context)

// Handle CSS classes – use either "shape" or "font"
params.className = createSkeletonClass(
'shape',
skeleton,
context,
className
)

return <my-component {...params} />
}
```
<SkeletonInfoCustom />

0 comments on commit 14a9f5e

Please sign in to comment.