Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Example Panel

The examples live at the right, the page in the middle, the parts at the left. One example showing at a time, its code beneath it in a Code Block. Below xl the same example and code sit inside the section as an Example Slot; nothing is shown in only one place.

HANDLE
example-panel
LIVES IN
src/components/SystemShell.jsx (ExamplePanel, ExampleSlot) · .xpanel-* in src/index.css
USED ON
System pages, right column from xl; folds into each section below that
PROPS
items from exampleItems(ids): id · label · node · framed · code · embedded. With several items the active example follows the section in view (data-example-section) and the picker jumps to it
EXAMPLE
LIVE

As it renders.

CODE
COPY AND PASTE

How it is called.

JSX
import SystemShell, { ExampleSlot } from '../components/SystemShell.jsx'
import { exampleItems } from '../system/examples.jsx'

const items = exampleItems(['eyebrow', 'hairline'])

<SystemShell examples={items}>                    {/* panel at the right from xl */}
  <section data-example-section="eyebrow">        {/* the panel follows this into view */}
    …
    <ExampleSlot item={items[0]} />                {/* the same example, in the flow below xl */}
  </section>
</SystemShell>
RULES

What must stay true.

The examples live at the right, the page in the middle, the parts at the left. One example showing at a time, its code beneath it in a Code Block. Below xl the same example and code sit inside the section as an Example Slot; nothing is shown in only one place.