Skip to content

Commit 49cd1d1

Browse files
davebcn87davebcn87
authored
Merge pull request #3386 from Shopify/examples-structure-2
Added examples to admin Structure components (Part II)
2 parents 87aa8c5 + c755ffb commit 49cd1d1

Some content is hidden

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

43 files changed

+1195
-52
lines changed

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

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,91 @@ const data: AdminReferenceEntityTemplateSchema = {
2525
tabs: [
2626
{
2727
code: './examples/default.html',
28-
language: 'preview',
28+
language: 'html',
29+
layout: 'none',
30+
},
31+
{
32+
code: './examples/default.jsx',
33+
language: 'preview-jsx',
2934
layout: 'none',
3035
},
3136
],
3237
},
3338
},
3439
related: [],
40+
examples: {
41+
description: 'Component examples',
42+
exampleGroups: [
43+
{
44+
title: 'Basic usage',
45+
examples: [
46+
{
47+
description:
48+
'Shows a page with a clear heading and descriptive text, illustrating how to use the page component with a title.',
49+
codeblock: {
50+
title: 'Page with heading',
51+
tabs: [
52+
{
53+
code: './examples/page-with-heading.html',
54+
language: 'html',
55+
layout: 'none',
56+
},
57+
{
58+
code: './examples/page-with-heading.jsx',
59+
language: 'preview-jsx',
60+
layout: 'none',
61+
},
62+
],
63+
},
64+
},
65+
{
66+
description:
67+
'Illustrates a page with a small inline size, ideal for focused, compact content like settings or forms with minimal information.',
68+
codeblock: {
69+
title: 'Small inline size for focused content',
70+
tabs: [
71+
{
72+
code: './examples/small-inline-size-for-focused-content.html',
73+
language: 'html',
74+
layout: 'none',
75+
},
76+
{
77+
code: './examples/small-inline-size-for-focused-content.jsx',
78+
language: 'preview-jsx',
79+
layout: 'none',
80+
customStyles: {
81+
minHeight: '400px',
82+
},
83+
},
84+
],
85+
},
86+
},
87+
{
88+
description:
89+
'Demonstrates a page with a large inline size, perfect for displaying broader content like analytics or dashboards with multiple information sections.',
90+
codeblock: {
91+
title: 'Large inline size for wide content',
92+
tabs: [
93+
{
94+
code: './examples/large-inline-size-for-wide-content.html',
95+
language: 'html',
96+
layout: 'none',
97+
},
98+
{
99+
code: './examples/large-inline-size-for-wide-content.jsx',
100+
language: 'preview-jsx',
101+
layout: 'none',
102+
customStyles: {
103+
minHeight: '400px',
104+
},
105+
},
106+
],
107+
},
108+
},
109+
],
110+
},
111+
],
112+
},
35113
};
36114

37115
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<s-page heading="Store analytics" inline-size="large">
2+
<s-section>
3+
<s-stack gap="base">
4+
<s-text>Monitor your store performance across all channels.</s-text>
5+
<s-grid>
6+
<s-grid-item>
7+
<s-box
8+
padding="base"
9+
background="base"
10+
borderWidth="base"
11+
borderColor="base"
12+
borderRadius="base"
13+
>
14+
<s-heading>Sales</s-heading>
15+
<s-text type="strong">$12,456</s-text>
16+
</s-box>
17+
</s-grid-item>
18+
<s-grid-item>
19+
<s-box
20+
padding="base"
21+
background="base"
22+
borderWidth="base"
23+
borderColor="base"
24+
borderRadius="base"
25+
>
26+
<s-heading>Orders</s-heading>
27+
<s-text type="strong">145</s-text>
28+
</s-box>
29+
</s-grid-item>
30+
</s-grid>
31+
</s-stack>
32+
</s-section>
33+
</s-page>

‎packages/ui-extensions/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<s-page heading="Store analytics" inline-size="large">
2+
<s-section>
3+
<s-stack gap="base">
4+
<s-text>Monitor your store performance across all channels.</s-text>
5+
<s-grid>
6+
<s-grid-item>
7+
<s-box
8+
padding="base"
9+
background="base"
10+
borderWidth="base"
11+
borderColor="base"
12+
borderRadius="base"
13+
>
14+
<s-heading>Sales</s-heading>
15+
<s-text type="strong">$12,456</s-text>
16+
</s-box>
17+
</s-grid-item>
18+
<s-grid-item>
19+
<s-box
20+
padding="base"
21+
background="base"
22+
borderWidth="base"
23+
borderColor="base"
24+
borderRadius="base"
25+
>
26+
<s-heading>Orders</s-heading>
27+
<s-text type="strong">145</s-text>
28+
</s-box>
29+
</s-grid-item>
30+
</s-grid>
31+
</s-stack>
32+
</s-section>
33+
</s-page>

‎packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-heading.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<s-page heading="Product catalog" inline-size="base">
2+
<s-section>
3+
<s-text>Manage your product catalog and inventory.</s-text>
4+
</s-section>
5+
</s-page>

‎packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-heading.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<s-page heading="Product catalog" inline-size="base">
2+
<s-section>
3+
<s-text>Manage your product catalog and inventory.</s-text>
4+
</s-section>
5+
</s-page>

‎packages/ui-extensions/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<s-page heading="Store settings" inline-size="small">
2+
<s-section>
3+
<s-stack gap="base">
4+
<s-text>Configure your basic store preferences.</s-text>
5+
<s-text-field label="Store name"></s-text-field>
6+
<s-button variant="primary">Save</s-button>
7+
</s-stack>
8+
</s-section>
9+
</s-page>

‎packages/ui-extensions/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<s-page heading="Store settings" inline-size="small">
2+
<s-section>
3+
<s-stack gap="base">
4+
<s-text>Configure your basic store preferences.</s-text>
5+
<s-text-field label="Store name" />
6+
<s-button variant="primary">Save</s-button>
7+
</s-stack>
8+
</s-section>
9+
</s-page>

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

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,96 @@ const data: AdminReferenceEntityTemplateSchema = {
4545
language: 'html',
4646
layout: 'page',
4747
},
48-
4948
{
5049
code: './examples/default.jsx',
5150
language: 'preview-jsx',
51+
layout: 'page',
5252
},
5353
],
5454
},
5555
},
56+
examples: {
57+
description: 'Component examples',
58+
exampleGroups: [
59+
{
60+
title: 'Basic usage',
61+
examples: [
62+
{
63+
description:
64+
'Demonstrates a level 1 section with a heading and multiple form fields. This example shows how sections provide visual hierarchy and structure for input elements.',
65+
codeblock: {
66+
title: 'Top-Level Section with Form Elements',
67+
tabs: [
68+
{
69+
code: './examples/top-level-section-with-form-elements.html',
70+
language: 'html',
71+
},
72+
73+
{
74+
code: './examples/top-level-section-with-form-elements.jsx',
75+
language: 'preview-jsx',
76+
},
77+
],
78+
},
79+
},
80+
{
81+
description:
82+
'Illustrates how sections can be nested to create a hierarchical layout, with each nested section automatically adjusting its visual style. This example demonstrates the automatic visual leveling of nested sections.',
83+
codeblock: {
84+
title: 'Nested Sections with Visual Level Differences',
85+
tabs: [
86+
{
87+
code: './examples/nested-sections-with-visual-level-differences.html',
88+
language: 'html',
89+
},
90+
91+
{
92+
code: './examples/nested-sections-with-visual-level-differences.jsx',
93+
language: 'preview-jsx',
94+
},
95+
],
96+
},
97+
},
98+
{
99+
description:
100+
'Shows how to add an accessibility label to a section, providing an additional hidden heading for screen readers while maintaining a visible heading.',
101+
codeblock: {
102+
title: 'Section with Accessibility Label',
103+
tabs: [
104+
{
105+
code: './examples/section-with-accessibility-label.html',
106+
language: 'html',
107+
},
108+
109+
{
110+
code: './examples/section-with-accessibility-label.jsx',
111+
language: 'preview-jsx',
112+
},
113+
],
114+
},
115+
},
116+
{
117+
description:
118+
'Demonstrates using a section with `padding="none"` to create a full-width layout, ideal for displaying tables or other content that requires edge-to-edge rendering.',
119+
codeblock: {
120+
title: 'Full-width Content Layout',
121+
tabs: [
122+
{
123+
code: './examples/full-width-content-layout.html',
124+
language: 'html',
125+
},
126+
127+
{
128+
code: './examples/full-width-content-layout.jsx',
129+
language: 'preview-jsx',
130+
},
131+
],
132+
},
133+
},
134+
],
135+
},
136+
],
137+
},
56138
};
57139

58140
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/Section/examples/full-width-content-layout.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<s-section padding="none">
2+
<s-table>
3+
<s-table-header-row>
4+
<s-table-header listSlot="primary">Product</s-table-header>
5+
<s-table-header listSlot="labeled">Price</s-table-header>
6+
<s-table-header listSlot="inline">Status</s-table-header>
7+
</s-table-header-row>
8+
<s-table-body>
9+
<s-table-row>
10+
<s-table-cell>Cotton t-shirt</s-table-cell>
11+
<s-table-cell>$29.99</s-table-cell>
12+
<s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
13+
</s-table-row>
14+
</s-table-body>
15+
</s-table>
16+
</s-section>

‎packages/ui-extensions/src/surfaces/admin/components/Section/examples/full-width-content-layout.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<s-section padding="none">
2+
<s-table>
3+
<s-table-header-row>
4+
<s-table-header listSlot="primary">Product</s-table-header>
5+
<s-table-header listSlot="labeled">Price</s-table-header>
6+
<s-table-header listSlot="inline">Status</s-table-header>
7+
</s-table-header-row>
8+
<s-table-body>
9+
<s-table-row>
10+
<s-table-cell>Cotton t-shirt</s-table-cell>
11+
<s-table-cell>$29.99</s-table-cell>
12+
<s-table-cell>
13+
<s-badge tone="success">Active</s-badge>
14+
</s-table-cell>
15+
</s-table-row>
16+
</s-table-body>
17+
</s-table>
18+
</s-section>

0 commit comments

Comments
 (0)