chore(AspectRatio): added Storybook Controls (#12383)

* chore(aspect-ratio): scaffolding * chore(aspect-ratio): updated controls
carbon-design-system · Oct 27, 2022 · ad3b045 · ad3b045
1 parent 607b441
commit ad3b045
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 107 deletions.
diff --git a/packages/react/src/components/AspectRatio/AspectRatio-story.js b/packages/react/src/components/AspectRatio/AspectRatio-story.js
diff --git a/packages/react/src/components/AspectRatio/AspectRatio.mdx b/packages/react/src/components/AspectRatio/AspectRatio.mdx
@@ -1,6 +1,6 @@
 import { Story, Props, Source, Preview } from '@storybook/addon-docs';
 import { Grid, Row, Column } from '../Grid';
-import { AspectRatio } from '../AspectRatio';
+import { AspectRatio } from '.';
 
 # AspectRatio
 
@@ -28,7 +28,7 @@ spanning 100% of the space available in your layout, and the height will be
 determined by the ratio that you specified.
 
 <Preview>
-  <Story id="components-aspectratio--aspect-ratio-story" />
+  <Story id="components-aspectratio--default" />
 </Preview>
 
 To see the full list of ratios supported by the `ratio` prop, check out the prop

diff --git a/...s/AspectRatio/next/AspectRatio.stories.js → ...onents/AspectRatio/AspectRatio.stories.js b/...s/AspectRatio/next/AspectRatio.stories.js → ...onents/AspectRatio/AspectRatio.stories.js
@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '../AspectRatio-story.scss';
+import './AspectRatio-story.scss';
 
 import React from 'react';
-import { Grid, Column } from '../../Grid';
-import { AspectRatio } from '../';
-import mdx from '../AspectRatio.mdx';
+import { Grid, Column } from '../Grid';
+import { AspectRatio } from './';
+import mdx from './AspectRatio.mdx';
 
 export default {
   title: 'Components/AspectRatio',
@@ -49,33 +49,9 @@ export const Default = () => {
 };
 
 export const Playground = {
-  argTypes: {
-    as: {
-      control: {
-        type: null,
-      },
-    },
-    children: {
-      control: {
-        type: null,
-      },
-    },
-    className: {
-      control: {
-        type: null,
-      },
-    },
-    ratio: {
-      control: {
-        type: 'select',
-      },
-      defaultValue: '1x1',
-      options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
-    },
-  },
-  render: ({ ratio }) => {
+  render: ({ ratio }, ...args) => {
     return (
-      <Grid>
+      <Grid {...args}>
         <Column sm={1} md={2} lg={4}>
           <AspectRatio ratio={ratio}>Content</AspectRatio>
         </Column>
@@ -92,3 +68,28 @@ export const Playground = {
     );
   },
 };
+
+Playground.argTypes = {
+  as: {
+    table: {
+      disable: true,
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  ratio: {
+    control: {
+      type: 'select',
+    },
+    defaultValue: '1x1',
+    options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
+  },
+};