Skip to content

Commit 48f51e5

Browse files
dancormierclaude
dancormier
and
claude
committed
feat(docs-next): add Example component and style example containers
Example.svelte wraps live demos in a light gray bordered container with padding, keeping examples visually distinct from prose and code blocks. Used in activity-indicator.md as the pattern to follow. Also adds TODO comments in both the script block and the two avatar examples noting where IconShieldXSm should be added once the icon is published in @stackoverflow/stacks-icons. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent ef9600a commit 48f51e5

2 files changed

Lines changed: 76 additions & 55 deletions

File tree

‎packages/stacks-docs-next/src/components/Example.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
4+
interface Props {
5+
children: Snippet;
6+
}
7+
8+
let { children }: Props = $props();
9+
</script>
10+
11+
<div class="ba bc-black-100 bar-sm p16 mb32">
12+
{@render children()}
13+
</div>

‎packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Prod
88
<script lang="ts">
99
import { ActivityIndicator, Icon } from '@stackoverflow/stacks-svelte';
1010
import { IconNotification } from '@stackoverflow/stacks-icons/icons';
11+
// TODO: import IconShieldXSm once it is added to @stackoverflow/stacks-icons
1112
import ClassTable from '$components/ClassTable.svelte';
13+
import Example from '$components/Example.svelte';
1214
import type { ClassTableRow } from '$components/ClassTable.svelte';
1315

1416
const classes: ClassTableRow[] = [
@@ -67,7 +69,7 @@ By default, the indicator has no positioning applied — use [atomic positioning
6769
<div class="v-visible-sr">New activity</div>
6870
</div>
6971
<div class="s-avatar--letter">G</div>
70-
<!-- badge icon -->
72+
<!-- TODO: add badge icon once IconShieldXSm is in @stackoverflow/stacks-icons -->
7173
</div>
7274
<span class="pl4">Grayson</span>
7375
</a>
@@ -92,33 +94,36 @@ By default, the indicator has no positioning applied — use [atomic positioning
9294
</div>
9395
```
9496

95-
<div class="d-flex g24 ai-center fw-wrap">
96-
<ActivityIndicator label="New activity" />
97-
<ActivityIndicator label="New activity" content={3} />
98-
<ActivityIndicator label="New activity" content={12} />
99-
<ActivityIndicator label="New activity" content={370} />
100-
<ActivityIndicator label="New activity" content="new" />
101-
102-
<a href="#" class="s-link s-link__muted">
103-
<div class="s-avatar bg-red-400 d:bg-red-200 ps-relative">
104-
<ActivityIndicator label="New activity" size="sm" class="s-avatar--indicator" />
105-
<div class="s-avatar--letter">G</div>
106-
</div>
107-
<span class="pl4">Grayson</span>
108-
</a>
97+
<Example>
98+
<div class="d-flex g24 ai-center fw-wrap">
99+
<ActivityIndicator label="New activity" />
100+
<ActivityIndicator label="New activity" content={3} />
101+
<ActivityIndicator label="New activity" content={12} />
102+
<ActivityIndicator label="New activity" content={370} />
103+
<ActivityIndicator label="New activity" content="new" />
104+
105+
<a href="#" class="s-link s-link__muted">
106+
<div class="s-avatar bg-red-400 d:bg-red-200 ps-relative">
107+
<ActivityIndicator label="New activity" size="sm" class="s-avatar--indicator" />
108+
<div class="s-avatar--letter">G</div>
109+
<!-- TODO: add <Icon src={IconShieldXSm} class="native s-avatar--badge" /> once IconShieldXSm is in @stackoverflow/stacks-icons -->
110+
</div>
111+
<span class="pl4">Grayson</span>
112+
</a>
109113

110-
<div class="fc-medium ps-relative">
111-
<Icon src={IconNotification} />
112-
<ActivityIndicator label="New activity" size="sm" class="ps-absolute tn4 rn4 ba baw2 bc-white box-content" />
113-
</div>
114+
<div class="fc-medium ps-relative">
115+
<Icon src={IconNotification} />
116+
<ActivityIndicator label="New activity" size="sm" class="ps-absolute tn4 rn4 ba baw2 bc-white box-content" />
117+
</div>
114118

115-
<div class="fc-medium ps-relative">
116-
<Icon src={IconNotification} />
117-
<div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
118-
<ActivityIndicator label="New activity" content={3} />
119+
<div class="fc-medium ps-relative">
120+
<Icon src={IconNotification} />
121+
<div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
122+
<ActivityIndicator label="New activity" content={3} />
123+
</div>
119124
</div>
120125
</div>
121-
</div>
126+
</Example>
122127

123128
### Variations
124129

@@ -136,38 +141,41 @@ Stacks also provides alternative styling for success, warning, and danger states
136141
</div>
137142
```
138143

139-
<div class="d-flex fd-column g24">
140-
{#each [
141-
{ variant: 'success', bg: 'bg-blue-400 d:bg-blue-200' },
142-
{ variant: 'warning', bg: 'bg-yellow-400 d:bg-yellow-200' },
143-
{ variant: 'danger', bg: 'bg-red-400 d:bg-red-200' },
144-
] as { variant, bg }}
145-
<div class="d-flex g24 ai-center fw-wrap">
146-
<ActivityIndicator label="New activity" {variant} />
147-
<ActivityIndicator label="New activity" {variant} content={3} />
148-
<ActivityIndicator label="New activity" {variant} content={12} />
149-
<ActivityIndicator label="New activity" {variant} content={370} />
150-
<ActivityIndicator label="New activity" {variant} content="new" />
151-
152-
<a href="#" class="s-link s-link__muted">
153-
<div class="s-avatar {bg} ps-relative">
154-
<ActivityIndicator label="New activity" {variant} size="sm" class="s-avatar--indicator" />
155-
<div class="s-avatar--letter">G</div>
144+
<Example>
145+
<div class="d-flex fd-column g24">
146+
{#each [
147+
{ variant: 'success', bg: 'bg-blue-400 d:bg-blue-200' },
148+
{ variant: 'warning', bg: 'bg-yellow-400 d:bg-yellow-200' },
149+
{ variant: 'danger', bg: 'bg-red-400 d:bg-red-200' },
150+
] as { variant, bg }}
151+
<div class="d-flex g24 ai-center fw-wrap">
152+
<ActivityIndicator label="New activity" {variant} />
153+
<ActivityIndicator label="New activity" {variant} content={3} />
154+
<ActivityIndicator label="New activity" {variant} content={12} />
155+
<ActivityIndicator label="New activity" {variant} content={370} />
156+
<ActivityIndicator label="New activity" {variant} content="new" />
157+
158+
<a href="#" class="s-link s-link__muted">
159+
<div class="s-avatar {bg} ps-relative">
160+
<ActivityIndicator label="New activity" {variant} size="sm" class="s-avatar--indicator" />
161+
<div class="s-avatar--letter">G</div>
162+
<!-- TODO: add <Icon src={IconShieldXSm} class="native s-avatar--badge" /> once IconShieldXSm is in @stackoverflow/stacks-icons -->
163+
</div>
164+
<span class="pl4">Grayson</span>
165+
</a>
166+
167+
<div class="fc-medium ps-relative">
168+
<Icon src={IconNotification} />
169+
<ActivityIndicator label="New activity" {variant} size="sm" class="ps-absolute tn4 rn4 ba baw2 bc-white box-content" />
156170
</div>
157-
<span class="pl4">Grayson</span>
158-
</a>
159171

160-
<div class="fc-medium ps-relative">
161-
<Icon src={IconNotification} />
162-
<ActivityIndicator label="New activity" {variant} size="sm" class="ps-absolute tn4 rn4 ba baw2 bc-white box-content" />
163-
</div>
164-
165-
<div class="fc-medium ps-relative">
166-
<Icon src={IconNotification} />
167-
<div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
168-
<ActivityIndicator label="New activity" {variant} content={3} />
172+
<div class="fc-medium ps-relative">
173+
<Icon src={IconNotification} />
174+
<div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
175+
<ActivityIndicator label="New activity" {variant} content={3} />
176+
</div>
169177
</div>
170178
</div>
171-
</div>
172-
{/each}
173-
</div>
179+
{/each}
180+
</div>
181+
</Example>

0 commit comments

Comments
 (0)