uui-card-media-story: fix code snippet indentions, add image to examples, use decorator for size

Author: madsrasmussen

packages/uui-card-media/lib/uui-card-media.story.ts

@@ -10,19 +10,20 @@ export default {
   parameters: {
     chromatic: { disableSnapshot: true },
   },
+  decorators: [
+    (Story: any) => html`<div style="width: 200px;">${Story()}</div>`,
+  ],
 };
 
 export const AAAOverview: Story = props =>
   html`
-    <div style="width: 200px">
-      <uui-card-media
-        name=${props.name}
-        file-ext=${props.fileExt}
-        ?selectable=${props.selectable}
-        ?selected=${props.selected}
-        ?error=${props.error}
-        ?disabled=${props.disabled}></uui-card-media>
-    </div>
+    <uui-card-media
+      name=${props.name}
+      file-ext=${props.fileExt}
+      ?selectable=${props.selectable}
+      ?selected=${props.selected}
+      ?error=${props.error}
+      ?disabled=${props.disabled}></uui-card-media>
   `;
 AAAOverview.storyName = 'Overview';
 
@@ -37,10 +38,7 @@ AAAOverview.args = {
 
 export const File: Story = props =>
   html`
-    <div style="width: 200px">
-      <uui-card-media name="File name" .fileExt=${props.fileExt}>
-      </uui-card-media>
-    </div>
+    <uui-card-media name="File name" .fileExt=${props.fileExt}></uui-card-media>
   `;
 
 File.args = {
@@ -59,54 +57,50 @@ File.parameters = {
 
 export const Tag: Story = () =>
   html`
-    <div style="width: 200px">
-      <uui-card-media name="File name">
-        <uui-tag slot="tag" size="s" look="danger">Trashed</uui-tag>
-        <img src="https://placedog.net/1447/?random" alt="" />
-      </uui-card-media>
-    </div>
+    <uui-card-media name="File name">
+      <uui-tag slot="tag" size="s" look="danger">Trashed</uui-tag>
+      <img src="https://placedog.net/1447/?random" alt="" />
+    </uui-card-media>
   `;
 Tag.parameters = {
   docs: {
     source: {
-      code: `<uui-card-media name="File name">
-        <uui-tag slot="tag" size="s" look="danger">Trashed</uui-tag>
-      </uui-card-media>`,
+      code: `
+<uui-card-media name="File name">
+  <uui-tag slot="tag" size="s" look="danger">Trashed</uui-tag>
+  <img src="https://placedog.net/1447/?random" alt="" />
+</uui-card-media>`,
     },
   },
 };
 
 export const Actions: Story = () =>
   html`
-    <div style="width: 200px">
-      <uui-card-media name="File name">
-        <uui-action-bar slot="actions">
-          <uui-button label="Remove">Remove</uui-button>
-        </uui-action-bar>
-        <img src="https://placedog.net/1447/?random" alt="" />
-      </uui-card-media>
-    </div>
+    <uui-card-media name="File name">
+      <uui-action-bar slot="actions">
+        <uui-button label="Remove">Remove</uui-button>
+      </uui-action-bar>
+      <img src="https://placedog.net/1447/?random" alt="" />
+    </uui-card-media>
   `;
 Actions.parameters = {
   docs: {
     source: {
-      code: `<uui-card-media name="File name">
-        <uui-action-bar slot="actions">
-          <uui-button label="Remove">Remove</uui-button>
-        </uui-action-bar>
-      </uui-card-media>`,
+      code: `
+<uui-card-media name="File name">
+  <uui-action-bar slot="actions">
+    <uui-button label="Remove">Remove</uui-button>
+  </uui-action-bar>
+
+  <img src="https://placedog.net/1447/?random" alt="" />
+</uui-card-media>`,
     },
   },
 };
 
 export const Folder: Story = () =>
-  html`
-    <div style="width: 200px">
-      <uui-card-media name="Folder Name"></uui-card-media>
-    </div>
-  `;
+  html` <uui-card-media name="Folder Name"></uui-card-media> `;
 Folder.parameters = {
-  controls: { include: ['error'] },
   docs: {
     source: {
       code: `<uui-card-media name="Folder Name"></uui-card-media>`,
@@ -116,15 +110,12 @@ Folder.parameters = {
 
 export const Image: Story = () =>
   html`
-    <div style="width: 200px;">
-      <uui-card-media name="File name">
-        <img src="https://placedog.net/1447/?random" alt="" />
-      </uui-card-media>
-    </div>
+    <uui-card-media name="File name">
+      <img src="https://placedog.net/1447/?random" alt="" />
+    </uui-card-media>
   `;
 
 Image.parameters = {
-  controls: { include: ['error'] },
   docs: {
     source: {
       code: `
@@ -137,11 +128,9 @@ Image.parameters = {
 
 export const Error: Story = props =>
   html`
-    <div style="width: 200px;">
-      <uui-card-media name="File name" ?error=${props.error}
-        ><img src="https://placedog.net/1447/?random" alt=""
-      /></uui-card-media>
-    </div>
+    <uui-card-media name="File name" ?error=${props.error}
+      ><img src="https://placedog.net/1447/?random" alt=""
+    /></uui-card-media>
   `;
 
 Error.args = {
@@ -152,42 +141,41 @@ Error.parameters = {
   controls: { include: ['error'] },
   docs: {
     source: {
-      code: `<uui-card-media name="File name" error></uui-card-media>`,
+      code: `
+<uui-card-media name="File name" error>
+  <img src="https://placedog.net/1447/?random" alt="" />
+</uui-card-media>`,
     },
   },
 };
 
 export const Selectable: Story = props =>
   html`
-    <div style="width: 200px;">
-      <uui-card-media
-        name="File name"
-        ?selectable=${props.selectable}
-        ?selected=${props.selected}
-        ><img src="https://placedog.net/1447/?random" alt=""
-      /></uui-card-media>
-    </div>
+    <uui-card-media name="File name" ?selectable=${props.selectable}
+      ><img src="https://placedog.net/1447/?random" alt=""
+    /></uui-card-media>
   `;
 Selectable.args = {
   selectable: true,
 };
 
 Selectable.parameters = {
-  controls: { include: ['selectable, selected'] },
+  controls: { include: ['selectable'] },
   docs: {
     source: {
-      code: `<uui-card-media name="File name" selectable></uui-card-media>`,
+      code: `
+<uui-card-media name="File name" selectable>
+  <img src="https://placedog.net/1447/?random" alt="" />
+</uui-card-media>`,
     },
   },
 };
 
 export const Disabled: Story = props =>
   html`
-    <div style="width: 200px;">
-      <uui-card-media name="File name" ?disabled=${props.disabled}
-        ><img src="https://placedog.net/1447/?random" alt=""
-      /></uui-card-media>
-    </div>
+    <uui-card-media name="File name" ?disabled=${props.disabled}
+      ><img src="https://placedog.net/1447/?random" alt=""
+    /></uui-card-media>
   `;
 
 Disabled.args = {
@@ -198,7 +186,11 @@ Disabled.parameters = {
   controls: { include: ['disabled'] },
   docs: {
     source: {
-      code: `<uui-card-media name="File name" disabled></uui-card-media>`,
+      code: `
+<uui-card-media name="File name" disabled>
+  <img src="https://placedog.net/1447/?random" alt="" />
+</uui-card-media>
+`,
     },
   },
 };