add additional previews

Author: Fionoble

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

@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: './examples/basic-badge.example.ts',
           language: 'js',
         },
+        {
+          title: 'Preview',
+          code: './examples/preview.html',
+          language: 'preview',
+        },
       ],
     },
   },

packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts

@@ -1,6 +1,22 @@
 export default function extension() {
   const badge = document.createElement('s-badge');
   badge.tone = 'info';
-  badge.textContent = 'Fulfilled';
-  document.body.appendChild(badge);
+  badge.textContent = 'Info';
+  const successBadge = document.createElement('s-badge');
+  successBadge.tone = 'success';
+  successBadge.textContent = 'Success';
+  const warningBadge = document.createElement('s-badge');
+  warningBadge.tone = 'warning';
+  warningBadge.textContent = 'Warning';
+  const errorBadge = document.createElement('s-badge');
+  errorBadge.tone = 'error';
+  errorBadge.textContent = 'Error';
+
+  const stack = document.createElement('s-stack');
+  stack.gap = 'base';
+  stack.appendChild(badge);
+  stack.appendChild(successBadge);
+  stack.appendChild(warningBadge);
+  stack.appendChild(errorBadge);
+  document.body.appendChild(stack);
 }

packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx

@@ -2,5 +2,13 @@ import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 
 export default function extension() {
-  render(<s-badge tone="info">Fulfilled</s-badge>, document.body);
+  render(
+    <s-stack gap="base">
+      <s-badge tone="info">Info</s-badge>
+      <s-badge tone="success">Fulfilled</s-badge>
+      <s-badge tone="warning">Warning</s-badge>
+      <s-badge tone="error">Error</s-badge>
+    </s-stack>,
+    document.body,
+  );
 }

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

@@ -0,0 +1,6 @@
+<s-stack gap="base">
+  <s-badge tone="info">Info</s-badge>
+  <s-badge tone="success">Fulfilled</s-badge>
+  <s-badge tone="warning">Warning</s-badge>
+  <s-badge tone="error">Error</s-badge>
+</s-stack>

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

@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: './examples/basic-banner.example.ts',
           language: 'js',
         },
+        {
+          title: 'Preview',
+          code: './examples/preview.html',
+          language: 'preview',
+        },
       ],
     },
   },

packages/ui-extensions/src/surfaces/admin/components/Banner/examples/basic-banner.example.ts

@@ -1,11 +1,14 @@
 // Basic example for Banner
 export default function extension() {
   const banner = document.createElement('s-banner');
-  banner.heading = 'Success';
-  banner.message = 'Your action was successful';
-  banner.tone = 'success';
-  banner.dismissible = true;
-  banner.onDismiss = () => {
+  banner.tone = 'info';
+  banner.textContent = 'This is a banner';
+
+  const banner2 = document.createElement('s-banner');
+  banner2.tone = 'success';
+  banner2.textContent = 'This is a success banner';
+  banner2.dismissible = true;
+  banner2.onDismiss = () => {
     console.log('Banner closed');
   };
 

packages/ui-extensions/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx

@@ -1,20 +1,21 @@
 import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
+import {Fragment, render} from 'preact';
 
 export default function extension() {
   const onDismiss = () => {
     console.log('Banner dismissed');
   };
 
   render(
-    <s-banner 
-      heading="Success" 
-      tone="success" 
-      dismissible 
-      onDismiss={onDismiss}
-    >
-      Your action was successful
-    </s-banner>,
+    <Fragment>
+      <s-banner tone="info">
+        <s-text>This is a banner</s-text>
+      </s-banner>
+
+      <s-banner tone="success" dismissible onDismiss={onDismiss}>
+        <s-text>This is a success banner</s-text>
+      </s-banner>
+    </Fragment>,
     document.body,
   );
 }

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

@@ -0,0 +1,9 @@
+<s-banner tone="info">
+  <s-text>This is a banner</s-text>
+</s-banner>
+
+<s-banner tone="success" dismissible>
+  <s-text>This is a success banner</s-text>
+</s-banner>
+
+

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

@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: './examples/basic-box.example.ts',
           language: 'js',
         },
+        {
+          title: 'Preview',
+          code: './examples/preview.html',
+          language: 'preview',
+        },
       ],
     },
   },

packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts

@@ -1,6 +1,34 @@
 export default function extension() {
+  const stack = document.createElement('s-stack');
+  stack.gap = 'base';
+
   const box = document.createElement('s-box');
   box.padding = 'base';
-  box.textContent = 'Box';
-  document.body.appendChild(box);
+  box.textContent = 'Basic box with padding';
+  stack.appendChild(box);
+
+  const box2 = document.createElement('s-box');
+  box2.padding = 'base';
+  box2.textContent = 'Box with border and rounded corners';
+  box2.border = 'base';
+  box2.borderRadius = 'base';
+  stack.appendChild(box2);
+
+  const box3 = document.createElement('s-box');
+  box3.padding = 'large';
+  box3.textContent = 'Box with custom dimensions';
+  box3.inlineSize = '300px';
+  box3.blockSize = '100px';
+  stack.appendChild(box3);
+
+  const box4 = document.createElement('s-box');
+  box4.padding = 'base';
+  box4.display = 'flex';
+  box4.background = 'surface-selected';
+  box4.justifyContent = 'center';
+  box4.alignItems = 'center';
+  box4.textContent = 'Centered content';
+  stack.appendChild(box4);
+
+  document.body.appendChild(stack);
 }

packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.tsx

@@ -2,5 +2,33 @@ import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 
 export default function extension() {
-  render(<s-box padding="base">Box</s-box>, document.body);
+  render(
+    <s-stack gap="base">
+      <s-box padding="base">Basic box with padding</s-box>
+
+      <s-box padding="base" border="base" borderRadius="base">
+        Box with border and rounded corners
+      </s-box>
+
+      <s-box
+        padding="large"
+        background="surface-active"
+        inlineSize="300px"
+        blockSize="100px"
+      >
+        Box with custom dimensions
+      </s-box>
+
+      <s-box
+        padding="base"
+        display="flex"
+        background="surface-selected"
+        justifyContent="center"
+        alignItems="center"
+      >
+        Centered content
+      </s-box>
+    </s-stack>,
+    document.body,
+  );
 }

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

@@ -0,0 +1,32 @@
+<s-stack gap="base">
+  <!-- Basic box -->
+  <s-box padding="base">
+    Basic box with padding
+  </s-box>
+
+  <!-- Box with borders -->
+  <s-box padding="base" border="base" borderRadius="base">
+    Box with border and rounded corners
+  </s-box>
+
+  <!-- Box with custom sizing -->
+  <s-box 
+    padding="large" 
+    background="surface-active"
+    inlineSize="300px"
+    blockSize="100px"
+  >
+    Box with custom dimensions
+  </s-box>
+
+  <!-- Box as flex container -->
+  <s-box 
+    padding="base" 
+    display="flex" 
+    background="surface-selected"
+    justifyContent="center"
+    alignItems="center"
+  >
+    Centered content
+  </s-box>
+</s-stack>

packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts

@@ -1,6 +1,18 @@
 export default function extension() {
+  const stack = document.createElement('s-stack');
+  stack.gap = 'base';
+
   const button = document.createElement('s-button');
-  button.onclick = () => console.log('onClick event');
-  button.textContent = 'Click here';
-  document.body.appendChild(button);
+  button.onclick = () => console.log('clicked primary');
+  button.variant = 'primary';
+  button.textContent = 'Click me';
+  stack.appendChild(button);
+
+  const button2 = document.createElement('s-button');
+  button2.onclick = () => console.log('clicked secondary');
+  button2.variant = 'secondary';
+  button2.textContent = 'Click me';
+  stack.appendChild(button2);
+
+  document.body.appendChild(stack);
 }

packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.tsx

@@ -3,9 +3,20 @@ import {render} from 'preact';
 
 export default function extension() {
   render(
-    <s-button onClick={() => console.log('onPress event')}>
-      Click here
-    </s-button>,
+    <s-stack gap="base">
+      <s-button
+        variant="primary"
+        onClick={() => console.log('clicked primary')}
+      >
+        Click me
+      </s-button>
+      <s-button
+        variant="secondary"
+        onClick={() => console.log('clicked secondary')}
+      >
+        Click me
+      </s-button>
+    </s-stack>,
     document.body,
   );
 }

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

@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: './examples/basic-choice-list.example.ts',
           language: 'js',
         },
+        {
+          title: 'Preview',
+          code: './examples/preview.html',
+          language: 'preview',
+        },
       ],
     },
   },

packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/basic-choice-list.example.ts

@@ -3,6 +3,8 @@ export default function extension() {
   const choiceList = document.createElement('s-choice-list');
 
   choiceList.label = "What's your favourite fruit?";
+  choiceList.details = 'Pick the one you love';
+  choiceList.name = 'Favorite Fruit';
 
   const choice1 = document.createElement('s-choice');
   choice1.label = 'Apple';

packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/basic-choice-list.example.tsx

@@ -3,10 +3,14 @@ import {render} from 'preact';
 
 export default function extension() {
   render(
-    <s-choice-list label="What's your favourite fruit?">
-      <s-choice label="Apple" value="apple" />
-      <s-choice label="Banana" value="banana" />
-      <s-choice label="Orange" value="orange" />
+    <s-choice-list
+      details="Pick the one you love"
+      label="Choose your favorite fruit?"
+      name="Favorite Fruit"
+    >
+      <s-choice label="Apple" value="apple"></s-choice>
+      <s-choice label="Banana" value="banana"></s-choice>
+      <s-choice label="Mango" value="mango"></s-choice>
     </s-choice-list>,
     document.body,
   );

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

@@ -0,0 +1,9 @@
+<s-choice-list
+  details="Pick the one you love"
+  label="Choose your favorite fruit?"
+  name="Favorite Fruit"
+>
+  <s-choice label="Apple" value="apple"></s-choice>
+  <s-choice label="Banana" value="banana"></s-choice>
+  <s-choice label="Mango" value="mango"></s-choice>
+</s-choice-list>

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

@@ -32,6 +32,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: './examples/basic-clickable.example.ts',
           language: 'js',
         },
+        {
+          title: 'Preview',
+          code: './examples/preview.html',
+          language: 'preview',
+        },
       ],
     },
   },

packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-clickable.example.ts

@@ -7,6 +7,7 @@ export default function extension() {
   clickable.addEventListener('click', () => {
     console.log('clicked');
     badge.textContent = 'Clicked';
+    badge.tone = 'success';
   });
 
   clickable.appendChild(badge);

packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-clickable.example.tsx

@@ -10,8 +10,10 @@ export default function extension() {
 
   render(
     <s-clickable onClick={onClick}>
-      <s-badge>{clicked ? 'Clicked' : 'Click me'}</s-badge>
+      <s-badge tone={clicked ? 'success' : 'info'}>
+        {clicked ? 'Clicked' : 'Click me'}
+      </s-badge>
     </s-clickable>,
     document.body,
   );
-};
+}

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

@@ -0,0 +1,12 @@
+<script>
+  function handleClick() {
+    console.log('clicked');
+    const badge = document.getElementById('clickable-badge');
+    badge.textContent = 'Clicked!';
+    badge.tone = 'success';
+  }
+</script>
+
+<s-clickable onclick="handleClick()">
+  <s-badge id="clickable-badge" tone="info">Click me!</s-badge>
+</s-clickable>