Skip to content

Commit eb4d28b

Browse files
koculukoculu
committed
Update layout and content component guides.
1 parent 249c12b commit eb4d28b

14 files changed

Lines changed: 1925 additions & 84 deletions

File tree

‎frontend/docs/componentGuide.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,54 @@ export function registerComponentGuideStyles() {
6060
const neutral = palette.semanticTone.neutral
6161
const accent = palette.semanticTone.accent
6262
root.select('.component-guide-card > .badge').css({ alignSelf: 'start' })
63+
root.select('.layout-demo-track').css({
64+
minHeight: '7rem',
65+
padding: '0.75rem',
66+
border: `1px dashed ${accent.border.subtle}`,
67+
borderRadius: '0.5rem',
68+
background: neutral.surface.rest.background,
69+
gap: '0.5rem',
70+
})
71+
root.select('.layout-demo-item').css({
72+
display: 'flex',
73+
alignItems: 'center',
74+
justifyContent: 'center',
75+
minWidth: '2rem',
76+
padding: '0.5rem',
77+
borderRadius: '0.4rem',
78+
background: accent.surface.rest.background,
79+
color: accent.text.default,
80+
fontWeight: '600',
81+
})
82+
root
83+
.select('.layout-demo-item--tall')
84+
.css({ minHeight: '4rem', fontSize: '1.3rem' })
85+
root.select('.layout-demo-scroll').css({ overflowX: 'auto', minWidth: '0' })
86+
root
87+
.select('.layout-demo-track--narrow')
88+
.css({ width: '9rem', minHeight: '7rem' })
89+
root.select('.layout-grid-demo').css({ gap: '0.25rem', minWidth: '0' })
90+
root.select('.layout-grid-tile').css({
91+
padding: '0.65rem 0',
92+
textAlign: 'center',
93+
minWidth: '0',
94+
fontSize: '0.6rem',
95+
borderRadius: '0.25rem',
96+
background: accent.surface.rest.background,
97+
color: accent.text.default,
98+
})
99+
root.select('.layout-icon-sample').css({
100+
display: 'inline-flex',
101+
justifyContent: 'center',
102+
color: accent.text.default,
103+
})
104+
root.select('.layout-icon-sample--sm').css({ fontSize: '1rem' })
105+
root.select('.layout-icon-sample--md').css({ fontSize: '1.75rem' })
106+
root.select('.layout-icon-sample--lg').css({ fontSize: '2.5rem' })
107+
root
108+
.media('min-width: 640px')
109+
.select('.layout-featured-card')
110+
.css({ gridColumn: 'span 2' })
63111
root.select('.component-header').css({
64112
position: 'relative',
65113
overflow: 'hidden',

‎frontend/purestack.studio/components/layout/expandable-panel/expandable-panel.mdx‎

Lines changed: 208 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,22 @@ nav:
1313

1414
# Expandable<wbr/>Panel
1515

16-
Progressively disclose details with a native, keyboard-operable summary and a themed content surface.
16+
<ComponentHeader name="ExpandablePanel" kind="Progressive disclosure" summary="Keep the overview easy to scan and reveal details on demand. Native disclosure with an expressive summary." source="https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/expandablePanel/expandablePanel.ts" section="Layout &amp; content" sectionHref="/components/layout/"/>
1717

18-
<Badge tone="accent" variant="surface">ExpandablePanel</Badge>
18+
## In context
1919

20-
[View source](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/expandablePanel/expandablePanel.ts) · [API reference](#api-reference)
20+
<ComponentExample label="A release checklist" caption="The summary includes title, description, metadata, badge, and icon. This example starts open; click or press Enter on its summary to collapse it.">
21+
<ExpandablePanel title="Release readiness" description="The essentials before you publish." meta="3 checks" badge="Ready" icon="lucide:check" tone="success" variant="surface" summaryVariant="outline" :open="true"><Flex direction="column"><p>Content reviewed, navigation checked, and themes verified.</p><BtnLink href="/guides/" tone="success" variant="outline">Read the guides</BtnLink></Flex></ExpandablePanel>
22+
</ComponentExample>
2123

24+
```html
25+
<ExpandablePanel title="Release readiness" description="The essentials before you publish." meta="3 checks" badge="Ready" icon="lucide:check" tone="success" variant="surface" summaryVariant="outline" :open="true">
26+
<Flex direction="column">
27+
<p>Content reviewed, navigation checked, and themes verified.</p>
28+
<BtnLink href="/guides/" tone="success" variant="outline">Read the guides</BtnLink>
29+
</Flex>
30+
</ExpandablePanel>
31+
```
2232

2333

2434
## Release details
@@ -27,6 +37,7 @@ Open the summary to reveal supporting information. Native details preserves a us
2737

2838
<Tabs group="expandable-panel-sample-1" selectedTab="expandable-panel-sample-1-preview" ariaLabel="Release details example" tone="neutral" variant="surface" tabVariant="underline">
2939
<TabPane id="expandable-panel-sample-1-preview" label="Preview">
40+
<div class="component-preview-stage">
3041
<ExpandablePanel
3142
title="What ships with a component?"
3243
description="Source, theme styles and composition"
@@ -41,7 +52,10 @@ Open the summary to reveal supporting information. Native details preserves a us
4152
<li>Composable slots and native HTML.</li>
4253
</ul>
4354
</ExpandablePanel>
44-
</TabPane>
55+
56+
57+
</div>
58+
</TabPane>
4559
<TabPane id="expandable-panel-sample-1-source-0" label="release-details.mdx">
4660
```html
4761
<ExpandablePanel
@@ -68,6 +82,7 @@ An initially open panel can sit beside a closed one. These disclosures are indep
6882

6983
<Tabs group="expandable-panel-sample-2" selectedTab="expandable-panel-sample-2-preview" ariaLabel="Independent disclosure sections example" tone="neutral" variant="surface" tabVariant="underline">
7084
<TabPane id="expandable-panel-sample-2-preview" label="Preview">
85+
<div class="component-preview-stage">
7186
<Flex direction="column">
7287
<ExpandablePanel
7388
title="Content authoring"
@@ -81,7 +96,10 @@ An initially open panel can sit beside a closed one. These disclosures are indep
8196
<p>Mount a RegorApp when a sample needs reactive state.</p>
8297
</ExpandablePanel>
8398
</Flex>
84-
</TabPane>
99+
100+
101+
</div>
102+
</TabPane>
85103
<TabPane id="expandable-panel-sample-2-source-0" label="initial-state.mdx">
86104
```html
87105
<Flex direction="column">
@@ -107,6 +125,7 @@ Replace the generated summary content while preserving the native summary elemen
107125

108126
<Tabs group="expandable-panel-sample-3" selectedTab="expandable-panel-sample-3-preview" ariaLabel="A custom summary example" tone="neutral" variant="surface" tabVariant="underline">
109127
<TabPane id="expandable-panel-sample-3-preview" label="Preview">
128+
<div class="component-preview-stage">
110129
<ExpandablePanel tone="success">
111130
<template #summary>
112131
<Flex align="center" justify="between" wrap="true">
@@ -116,7 +135,10 @@ Replace the generated summary content while preserving the native summary elemen
116135
</template>
117136
<p>The documentation build completed successfully.</p>
118137
</ExpandablePanel>
119-
</TabPane>
138+
139+
140+
</div>
141+
</TabPane>
120142
<TabPane id="expandable-panel-sample-3-source-0" label="custom-summary.mdx">
121143
```html
122144
<ExpandablePanel tone="success">
@@ -132,6 +154,186 @@ Replace the generated summary content while preserving the native summary elemen
132154
</TabPane>
133155
</Tabs>
134156

157+
## All semantic tones
158+
159+
All ten supported tones. A semantic palette communicates intent; visible labels keep the meaning explicit.
160+
161+
<ComponentExample label="All semantic tones" caption="Every value is visible. Compare treatments in the site’s light and dark themes.">
162+
<div class="component-appearance-grid">
163+
<div class="component-appearance-cell"><code>neutral</code>
164+
<ExpandablePanel title="neutral" tone="neutral" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
165+
</div>
166+
<div class="component-appearance-cell"><code>accent</code>
167+
<ExpandablePanel title="accent" tone="accent" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
168+
</div>
169+
<div class="component-appearance-cell"><code>feature</code>
170+
<ExpandablePanel title="feature" tone="feature" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
171+
</div>
172+
<div class="component-appearance-cell"><code>secondary</code>
173+
<ExpandablePanel title="secondary" tone="secondary" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
174+
</div>
175+
<div class="component-appearance-cell"><code>custom</code>
176+
<ExpandablePanel title="custom" tone="custom" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
177+
</div>
178+
<div class="component-appearance-cell"><code>ghost</code>
179+
<ExpandablePanel title="ghost" tone="ghost" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
180+
</div>
181+
<div class="component-appearance-cell"><code>info</code>
182+
<ExpandablePanel title="info" tone="info" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
183+
</div>
184+
<div class="component-appearance-cell"><code>success</code>
185+
<ExpandablePanel title="success" tone="success" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
186+
</div>
187+
<div class="component-appearance-cell"><code>warning</code>
188+
<ExpandablePanel title="warning" tone="warning" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
189+
</div>
190+
<div class="component-appearance-cell"><code>danger</code>
191+
<ExpandablePanel title="danger" tone="danger" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
192+
</div>
193+
</div>
194+
</ComponentExample>
195+
196+
## All visual variants
197+
198+
All eighteen supported treatments, shown together.
199+
200+
<ComponentExample label="All visual variants" caption="Every value is visible. Compare treatments in the site’s light and dark themes.">
201+
<div class="component-appearance-grid">
202+
<div class="component-appearance-cell"><code>solid</code>
203+
<ExpandablePanel title="solid" variant="solid" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
204+
</div>
205+
<div class="component-appearance-cell"><code>surface</code>
206+
<ExpandablePanel title="surface" variant="surface" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
207+
</div>
208+
<div class="component-appearance-cell"><code>surfaceAlt</code>
209+
<ExpandablePanel title="surfaceAlt" variant="surfaceAlt" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
210+
</div>
211+
<div class="component-appearance-cell"><code>spotlight</code>
212+
<ExpandablePanel title="spotlight" variant="spotlight" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
213+
</div>
214+
<div class="component-appearance-cell"><code>glass</code>
215+
<ExpandablePanel title="glass" variant="glass" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
216+
</div>
217+
<div class="component-appearance-cell"><code>flat</code>
218+
<ExpandablePanel title="flat" variant="flat" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
219+
</div>
220+
<div class="component-appearance-cell"><code>flatAlt</code>
221+
<ExpandablePanel title="flatAlt" variant="flatAlt" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
222+
</div>
223+
<div class="component-appearance-cell"><code>flatSolid</code>
224+
<ExpandablePanel title="flatSolid" variant="flatSolid" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
225+
</div>
226+
<div class="component-appearance-cell"><code>outlineFill</code>
227+
<ExpandablePanel title="outlineFill" variant="outlineFill" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
228+
</div>
229+
<div class="component-appearance-cell"><code>outline</code>
230+
<ExpandablePanel title="outline" variant="outline" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
231+
</div>
232+
<div class="component-appearance-cell"><code>subtle</code>
233+
<ExpandablePanel title="subtle" variant="subtle" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
234+
</div>
235+
<div class="component-appearance-cell"><code>subtleBtn</code>
236+
<ExpandablePanel title="subtleBtn" variant="subtleBtn" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
237+
</div>
238+
<div class="component-appearance-cell"><code>link</code>
239+
<ExpandablePanel title="link" variant="link" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
240+
</div>
241+
<div class="component-appearance-cell"><code>sheen</code>
242+
<ExpandablePanel title="sheen" variant="sheen" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
243+
</div>
244+
<div class="component-appearance-cell"><code>underline</code>
245+
<ExpandablePanel title="underline" variant="underline" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
246+
</div>
247+
<div class="component-appearance-cell"><code>rail</code>
248+
<ExpandablePanel title="rail" variant="rail" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
249+
</div>
250+
<div class="component-appearance-cell"><code>bracket</code>
251+
<ExpandablePanel title="bracket" variant="bracket" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
252+
</div>
253+
<div class="component-appearance-cell"><code>none</code>
254+
<ExpandablePanel title="none" variant="none" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
255+
</div>
256+
</div>
257+
</ComponentExample>
258+
259+
## All summary treatments
260+
261+
summaryVariant styles the disclosure summary independently from the outer variant. All eighteen values are visible with their details expanded.
262+
263+
<ComponentExample label="All summary treatments" caption="Every value is visible. Compare treatments in the site’s light and dark themes.">
264+
<div class="component-appearance-grid">
265+
<div class="component-appearance-cell"><code>solid</code>
266+
<ExpandablePanel title="solid" summaryVariant="solid" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
267+
</div>
268+
<div class="component-appearance-cell"><code>surface</code>
269+
<ExpandablePanel title="surface" summaryVariant="surface" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
270+
</div>
271+
<div class="component-appearance-cell"><code>surfaceAlt</code>
272+
<ExpandablePanel title="surfaceAlt" summaryVariant="surfaceAlt" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
273+
</div>
274+
<div class="component-appearance-cell"><code>spotlight</code>
275+
<ExpandablePanel title="spotlight" summaryVariant="spotlight" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
276+
</div>
277+
<div class="component-appearance-cell"><code>glass</code>
278+
<ExpandablePanel title="glass" summaryVariant="glass" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
279+
</div>
280+
<div class="component-appearance-cell"><code>flat</code>
281+
<ExpandablePanel title="flat" summaryVariant="flat" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
282+
</div>
283+
<div class="component-appearance-cell"><code>flatAlt</code>
284+
<ExpandablePanel title="flatAlt" summaryVariant="flatAlt" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
285+
</div>
286+
<div class="component-appearance-cell"><code>flatSolid</code>
287+
<ExpandablePanel title="flatSolid" summaryVariant="flatSolid" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
288+
</div>
289+
<div class="component-appearance-cell"><code>outlineFill</code>
290+
<ExpandablePanel title="outlineFill" summaryVariant="outlineFill" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
291+
</div>
292+
<div class="component-appearance-cell"><code>outline</code>
293+
<ExpandablePanel title="outline" summaryVariant="outline" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
294+
</div>
295+
<div class="component-appearance-cell"><code>subtle</code>
296+
<ExpandablePanel title="subtle" summaryVariant="subtle" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
297+
</div>
298+
<div class="component-appearance-cell"><code>subtleBtn</code>
299+
<ExpandablePanel title="subtleBtn" summaryVariant="subtleBtn" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
300+
</div>
301+
<div class="component-appearance-cell"><code>link</code>
302+
<ExpandablePanel title="link" summaryVariant="link" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
303+
</div>
304+
<div class="component-appearance-cell"><code>sheen</code>
305+
<ExpandablePanel title="sheen" summaryVariant="sheen" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
306+
</div>
307+
<div class="component-appearance-cell"><code>underline</code>
308+
<ExpandablePanel title="underline" summaryVariant="underline" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
309+
</div>
310+
<div class="component-appearance-cell"><code>rail</code>
311+
<ExpandablePanel title="rail" summaryVariant="rail" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
312+
</div>
313+
<div class="component-appearance-cell"><code>bracket</code>
314+
<ExpandablePanel title="bracket" summaryVariant="bracket" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
315+
</div>
316+
<div class="component-appearance-cell"><code>none</code>
317+
<ExpandablePanel title="none" summaryVariant="none" :open="true"><p>Details stay close to their summary.</p></ExpandablePanel>
318+
</div>
319+
</div>
320+
</ComponentExample>
321+
322+
## Open and closed states
323+
324+
The open prop selects the initial native details state. Both summaries remain keyboard-operable.
325+
326+
<ComponentExample label="Open and closed states" caption="Every value is visible. Compare treatments in the site’s light and dark themes.">
327+
<div class="component-appearance-grid">
328+
<div class="component-appearance-cell"><code>false</code>
329+
<ExpandablePanel title="Initially collapsed" :open="false" badge="3 checks" description="Click the summary to toggle."><p>Content in the default slot.</p></ExpandablePanel>
330+
</div>
331+
<div class="component-appearance-cell"><code>true</code>
332+
<ExpandablePanel title="Initially expanded" :open="true" badge="3 checks" description="Click the summary to toggle."><p>Content in the default slot.</p></ExpandablePanel>
333+
</div>
334+
</div>
335+
</ComponentExample>
336+
135337
## Behavior and accessibility
136338

137339
Focus the summary and press Enter or Space to toggle it. Do not put nested buttons or links inside a summary. The native `toggle` event reports open state; the open prop sets the element state but native user toggling does not write back to a parent ref automatically.

0 commit comments

Comments
 (0)