UI kit reference

components/HowItWorks

import { … } from 'zidane-ui'ui/src/components/HowItWorks.tsx

Components#

Renders a tutorial: a scene beside numbered steps, played in turn when the scene takes the step.

TypeScript

function HowItWorks(props: HowItWorksProps): Element

Parameters
Name	Type	Description
props	`HowItWorksProps`	Component props.

Element

HowItWorks props
Name	Type	Default	Description
actions?	`ReactNode`		Buttons or links that act on what the tutorial explains, such as "Build an extension".
className?	`string`		Extra classes on the block.
illustration	`ReactNode \| ((step: number) => ReactNode)`		A decorative scene of the steps at work, with nothing to click. A function of the step on show (from 0) makes a tour: the steps play in turn, and a click on a step shows it.
steps	`readonly HowItWorksStep[]`		The steps, in order. Two to four read best.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
surface?	`'tray' \| 'raised'`	`'tray'`	The block's surface: `tray` sits into the page (a settings page), `raised` lifts it off a bare panel so it stands out there.
title	`ReactNode`		The tutorial's heading, such as "How skills work".

TypeScript

interface HowItWorksProps

HowItWorksProps properties
Name	Type	Default	Description
actions?	`ReactNode`		Buttons or links that act on what the tutorial explains, such as "Build an extension".
className?	`string`		Extra classes on the block.
illustration	`ReactNode \| ((step: number) => ReactNode)`		A decorative scene of the steps at work, with nothing to click. A function of the step on show (from 0) makes a tour: the steps play in turn, and a click on a step shows it.
steps	`readonly HowItWorksStep[]`		The steps, in order. Two to four read best.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
surface?	`'tray' \| 'raised'`	`'tray'`	The block's surface: `tray` sits into the page (a settings page), `raised` lifts it off a bare panel so it stands out there.
title	`ReactNode`		The tutorial's heading, such as "How skills work".

One step of a HowItWorks.

TypeScript

interface HowItWorksStep

HowItWorksStep properties
Name	Type	Description
detail?	`ReactNode`	One or two sentences more.
title	`ReactNode`	What happens, in a few words.