Skip to content

Commit ecb8820

Browse files
FionobleFionoble
committed
add additional previews
1 parent 29ed083 commit ecb8820

File tree

44 files changed

+285
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+285
-0
lines changed

‎packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-badge.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Badge/examples/preview.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<s-stack gap="base">
2+
<s-badge tone="info">Info</s-badge>
3+
<s-badge tone="success">Fulfilled</s-badge>
4+
<s-badge tone="warning">Warning</s-badge>
5+
<s-badge tone="error">Error</s-badge>
6+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-banner.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Banner/examples/preview.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<s-banner tone="info">
2+
<s-text>This is a banner</s-text>
3+
</s-banner>
4+
5+
<s-banner tone="success" dismissible>
6+
<s-text>This is a success banner</s-text>
7+
</s-banner>
8+
9+

‎packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-box.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Box/examples/preview.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<s-stack gap="base">
2+
<!-- Basic box -->
3+
<s-box padding="base" background="surface">
4+
Basic box with padding and background
5+
</s-box>
6+
7+
<!-- Box with borders -->
8+
<s-box padding="base" border="base" borderRadius="base">
9+
Box with border and rounded corners
10+
</s-box>
11+
12+
<!-- Box with custom sizing -->
13+
<s-box
14+
padding="large"
15+
background="surface-active"
16+
inlineSize="300px"
17+
blockSize="100px"
18+
>
19+
Box with custom dimensions
20+
</s-box>
21+
22+
<!-- Box as flex container -->
23+
<s-box
24+
padding="base"
25+
display="flex"
26+
background="surface-selected"
27+
justifyContent="center"
28+
alignItems="center"
29+
>
30+
Centered content
31+
</s-box>
32+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-choice-list.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/preview.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<s-choice-list label="Choose a fruit">
2+
<s-choice-list-item value="1" label="Apple">
3+
</s-choice-list-item>
4+
<s-choice-list-item value="2" label="Banana">
5+
</s-choice-list-item>
6+
<s-choice-list-item value="3" label="Cherry">
7+
</s-choice-list-item>
8+
</s-choice-list>

‎packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-clickable.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/preview.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<s-clickable onclick="console.log('clicked');document.getElementById('clickable-badge').textContent = 'Clicked!';document.getElementById('clickable-badge').tone = 'success';">
2+
<s-badge id="clickable-badge" tone="info">Click me!</s-badge>
3+
</s-clickable>

‎packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-divider.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Divider/examples/preview.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<s-stack direction="vertical" gap="base">
2+
<s-text>Hello</s-text>
3+
<s-divider ></s-divider>
4+
<s-text>World</s-text>
5+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-email-field.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/preview.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<s-email-field
2+
label="Email"
3+
value="[email protected]"
4+
onchange="console.log(event.target.value)"
5+
/>

‎packages/ui-extensions/src/surfaces/admin/components/Grid/Grid.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-grid.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Grid/examples/preview.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<s-grid gap="10px" columns="1fr 1fr"ß>
2+
<s-section>
3+
<s-text>Grid item 1</s-text>
4+
</s-section>
5+
<s-section>
6+
<s-text>Grid item 2</s-text>
7+
</s-section>
8+
</s-grid>

‎packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-heading.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Heading/examples/preview.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<s-heading>Heading 1</s-heading>
2+
<s-section>
3+
<s-heading>Heading 2</s-heading>
4+
</s-section>

‎packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-icon.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Icon/examples/preview.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<s-stack gap="base" direction="column">
2+
<!-- Basic icons -->
3+
<s-stack gap="base">
4+
<s-icon type="home" ></s-icon>
5+
<s-icon type="order" ></s-icon>
6+
<s-icon type="product" ></s-icon>
7+
<s-icon type="settings" ></s-icon>
8+
</s-stack>
9+
10+
<!-- Colored icons -->
11+
<s-stack gap="base">
12+
<s-icon type="alert-circle" tone="critical" ></s-icon>
13+
<s-icon type="check-circle" tone="success" ></s-icon>
14+
<s-icon type="info-circle" tone="info" ></s-icon>
15+
<s-icon type="warning-circle" tone="warning" ></s-icon>
16+
</s-stack>
17+
18+
<!-- Different sizes -->
19+
<s-stack gap="base">
20+
<s-icon type="star" size="small" ></s-icon>
21+
<s-icon type="star" size="base" ></s-icon>
22+
</s-stack>
23+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ const data: ReferenceEntityTemplateSchema = {
3131
code: './examples/basic-image.example.ts',
3232
language: 'js',
3333
},
34+
{
35+
title: 'Preview',
36+
code: './examples/preview.html',
37+
language: 'preview',
38+
},
3439
],
3540
},
3641
},

‎packages/ui-extensions/src/surfaces/admin/components/Image/examples/preview.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<s-stack gap="base">
2+
<s-box inlinesize="100px">
3+
<s-image src="https://shopify.dev/assets/icons/64/pickaxe-1.png" alt="Pickaxe" inlinesize="fill" />
4+
</s-box>
5+
<s-box inlinesize="200px">
6+
<s-image src="https://shopify.dev/assets/icons/64/pickaxe-1.png" alt="Pickaxe" inlinesize="fill" />
7+
</s-box>
8+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/app-link.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Link/examples/preview.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<s-link href="https://shopify.dev">Link</s-link>

‎packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-money-field.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/preview.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<s-money-field label="Price" value="99.99" currency="USD" />

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ const data: ReferenceEntityTemplateSchema = {
3333
code: './examples/basic-number-field.example.ts',
3434
language: 'js',
3535
},
36+
{
37+
title: 'Preview',
38+
code: './examples/preview.html',
39+
language: 'preview',
40+
},
3641
],
3742
},
3843
},

‎packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/preview.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<s-number-field label="Amount" value="10" step="5" min="0" max="100" />

‎packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-paragraph.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/preview.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<s-paragraph>
2+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3+
</s-paragraph>

‎packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-section.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Section/examples/preview.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<s-section>
2+
<s-heading>Section</s-heading>
3+
<s-paragraph>
4+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5+
</s-paragraph>
6+
</s-section>

‎packages/ui-extensions/src/surfaces/admin/components/Spinner/Spinner.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-spinner.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Spinner/examples/preview.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<s-stack gap="base">
2+
<s-spinner size="small" />
3+
<s-spinner />
4+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-stack.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

‎packages/ui-extensions/src/surfaces/admin/components/Stack/examples/preview.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<s-stack gap="base">
2+
<s-badge>Badge</s-badge>
3+
<s-badge>Badge</s-badge>
4+
<s-badge>Badge</s-badge>
5+
</s-stack>
6+
7+
<s-stack gap="base" direction="block">
8+
<s-badge>Badge</s-badge>
9+
<s-badge>Badge</s-badge>
10+
<s-badge>Badge</s-badge>
11+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Table/Table.doc.ts

+5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
3232
code: './examples/basic-table.example.ts',
3333
language: 'js',
3434
},
35+
{
36+
title: 'Preview',
37+
code: './examples/preview.html',
38+
language: 'preview',
39+
},
3540
],
3641
},
3742
},

0 commit comments

Comments
 (0)