fix(Artboard): changed default value of demo prop (#376)

Author: yoshi6jp

src/Artboard/Artboard.stories.tsx

@@ -8,59 +8,83 @@ export default {
   component: Artboard,
 } as Meta
 
-export const Default: Story<ArtboardProps> = (args) => {
-  return <Artboard {...args}>Example</Artboard>
+const Template: Story<ArtboardProps> = ({ children, ...args }) => {
+  return <Artboard {...args}>{children}</Artboard>
 }
+export const Default = Template.bind({})
 Default.args = {
   size: 1,
+  children: ' 320×568',
 }
 
-export const Sizes: Story<ArtboardProps> = (args) => {
-  return (
-    <div className="flex w-auto space-x-10 flex-nowrap overflow-x-auto p-8 bg-neutral rounded-2xl">
-      <Artboard {...args} size={1}>
-        phone-1
-      </Artboard>
-      <Artboard {...args} size={2}>
-        phone-2
-      </Artboard>
-      <Artboard {...args} size={3}>
-        phone-3
-      </Artboard>
-      <Artboard {...args} size={4}>
-        phone-4
-      </Artboard>
-      <Artboard {...args} size={5}>
-        phone-5
-      </Artboard>
-      <Artboard {...args} size={6}>
-        phone-6
-      </Artboard>
-    </div>
-  )
+export const Size2 = Template.bind({})
+Size2.args = {
+  size: 2,
+  children: ' 375×667',
 }
 
-export const Horizontal: Story<ArtboardProps> = (args) => {
-  return (
-    <div className="flex w-auto space-x-4 flex-nowrap overflow-x-auto p-8 bg-neutral rounded-2xl">
-      <Artboard {...args} size={1} horizontal>
-        phone-1
-      </Artboard>
-      <Artboard {...args} size={2} horizontal>
-        phone-2
-      </Artboard>
-      <Artboard {...args} size={3} horizontal>
-        phone-3
-      </Artboard>
-      <Artboard {...args} size={4} horizontal>
-        phone-4
-      </Artboard>
-      <Artboard {...args} size={5} horizontal>
-        phone-5
-      </Artboard>
-      <Artboard {...args} size={6} horizontal>
-        phone-6
-      </Artboard>
-    </div>
-  )
+export const Size3 = Template.bind({})
+Size3.args = {
+  size: 3,
+  children: ' 414×736',
+}
+
+export const Size4 = Template.bind({})
+Size4.args = {
+  size: 4,
+  children: ' 375×812',
+}
+
+export const Size5 = Template.bind({})
+Size5.args = {
+  size: 5,
+  children: ' 414×896',
+}
+
+export const Size6 = Template.bind({})
+Size6.args = {
+  size: 6,
+  children: ' 320×1024',
+}
+
+export const HorizontalSize1 = Template.bind({})
+HorizontalSize1.args = {
+  size: 1,
+  children: '568×320',
+  horizontal: true,
+}
+
+export const HorizontalSize2 = Template.bind({})
+HorizontalSize2.args = {
+  size: 2,
+  children: ' 667×375',
+  horizontal: true,
+}
+
+export const HorizontalSize3 = Template.bind({})
+HorizontalSize3.args = {
+  size: 3,
+  children: ' 736×414',
+  horizontal: true,
+}
+
+export const HorizontalSize4 = Template.bind({})
+HorizontalSize4.args = {
+  size: 4,
+  children: ' 812×375',
+  horizontal: true,
+}
+
+export const HorizontalSize5 = Template.bind({})
+HorizontalSize5.args = {
+  size: 5,
+  children: ' 896×414',
+  horizontal: true,
+}
+
+export const HorizontalSize6 = Template.bind({})
+HorizontalSize6.args = {
+  size: 6,
+  children: ' 1024×320',
+  horizontal: true,
 }

src/Artboard/Artboard.test.tsx

@@ -18,6 +18,20 @@ describe('Artboard', () => {
     expect(screen.getByLabelText('Artboard')).toHaveClass('horizontal')
   })
 
+  it.each`
+    demo         | expected
+    ${undefined} | ${true}
+    ${true}      | ${true}
+    ${false}     | ${false}
+  `('renders a demo', ({ demo, expected }) => {
+    render(<Artboard demo={demo}>Test</Artboard>)
+    if (expected) {
+      expect(screen.getByLabelText('Artboard')).toHaveClass('artboard-demo')
+    } else {
+      expect(screen.getByLabelText('Artboard')).not.toHaveClass('artboard-demo')
+    }
+  })
+
   it('should be able to access the native div', () => {
     const artboardRef = createRef<HTMLDivElement>()
     render(<Artboard ref={artboardRef}>Test</Artboard>)

src/Artboard/Artboard.tsx

@@ -13,7 +13,7 @@ export type ArtboardProps = React.HTMLAttributes<HTMLDivElement> &
 
 const Artboard = forwardRef<HTMLDivElement, ArtboardProps>(
   (
-    { children, demo, size, horizontal, dataTheme, className, ...props },
+    { children, demo = true, size, horizontal, dataTheme, className, ...props },
     ref
   ): JSX.Element => {
     const classes = twMerge(