ScrollyStep

One block of the narrative. Marked aria-current="step" and data-active while it is the active one.

Import

import { ScrollyStep } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/scrolly.

Usage

export const Default: Story = {
  render: (args) => (
    <div style={{ padding: 16 }}>
      <Narrative side={args.graphicSide} />
    </div>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
children *	ReactNode
minHeight	string	"70svh"	Minimum height of the step, any CSS length; a tall step gives the reader time with the graphic.
className	string

* marks a required prop.

Storybook stories

• Default
• Narrow
• With Step Indicator
• Brutal Preset

Source

packages/ui/src/containers/scrolly/scrolly.tsx