create dev test stories

Author: langermank

src/Button/Button.dev.stories.tsx

@@ -0,0 +1,58 @@
+import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
+import React from 'react'
+import {Button} from '.'
+
+export default {
+  title: 'Components/Button/DevOnly',
+}
+
+export const InvisibleVariants = () => {
+  const count = 4
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button variant="invisible">Button</Button>
+      <Button variant="invisible" leadingIcon={SearchIcon}>
+        Button
+      </Button>
+      <Button variant="invisible" trailingAction={TriangleDownIcon}>
+        Button
+      </Button>
+      <Button variant="invisible">
+        Button
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" leadingIcon={EyeIcon}>
+        Button
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" leadingIcon={EyeIcon} trailingAction={TriangleDownIcon}>
+        Button
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+    </div>
+  )
+}
+
+export const TestSxProp = () => {
+  const count = 4
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button variant="invisible" sx={{color: 'deeppink'}}>
+        Pink
+      </Button>
+      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
+        Pink
+      </Button>
+      <Button size="small" variant="invisible" sx={{width: 32, height: 32}}>
+        Custom size
+      </Button>
+      <Button size="small" block variant="invisible" sx={{width: 320}}>
+        Overriden Block
+      </Button>
+      <Button>
+        Watch
+        <Button.Counter sx={{fontSize: 16}}>{count}</Button.Counter>
+      </Button>
+    </div>
+  )
+}

src/Button/Button.features.stories.tsx

@@ -1,4 +1,4 @@
-import {EyeIcon, TriangleDownIcon, HeartIcon, SearchIcon} from '@primer/octicons-react'
+import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
 
@@ -41,51 +41,3 @@ export const Small = () => <Button size="small">Default</Button>
 export const Medium = () => <Button size="medium">Default</Button>
 
 export const Large = () => <Button size="large">Default</Button>
-
-export const InvisibleVariants = () => {
-  const count = 4
-  return (
-    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
-      <Button variant="invisible">Button</Button>
-      <Button variant="invisible" leadingIcon={SearchIcon}>
-        Button
-      </Button>
-      <Button variant="invisible" trailingAction={TriangleDownIcon}>
-        Button
-      </Button>
-      <Button variant="invisible">
-        Button
-        <Button.Counter>{count}</Button.Counter>
-      </Button>
-      <Button variant="invisible" leadingIcon={EyeIcon}>
-        Button
-        <Button.Counter>{count}</Button.Counter>
-      </Button>
-      <Button variant="invisible" leadingIcon={EyeIcon} trailingAction={TriangleDownIcon}>
-        Button
-        <Button.Counter>{count}</Button.Counter>
-      </Button>
-    </div>
-  )
-}
-
-export const Test = () => {
-  const count = 4
-  return (
-    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
-      <Button variant="invisible" sx={{color: 'deeppink'}}>
-        Pink
-      </Button>
-      <Button size="small" variant="invisible" sx={{width: 32, height: 32}}>
-        Custom size
-      </Button>
-      <Button size="small" block variant="invisible" sx={{width: 320}}>
-        Overriden Block
-      </Button>
-      <Button>
-        Watch
-        <Button.Counter sx={{fontSize: 16}}>{count}</Button.Counter>
-      </Button>
-    </div>
-  )
-}

src/Button/IconButton.dev.stories.tsx

@@ -0,0 +1,11 @@
+import {ChevronDownIcon} from '@primer/octicons-react'
+import React from 'react'
+import {IconButton} from '.'
+
+export default {
+  title: 'Components/IconButton/DevOnly',
+}
+
+export const CustomSize = () => (
+  <IconButton aria-label="Expand" variant="primary" size="small" icon={ChevronDownIcon} sx={{width: 16, height: 16}} />
+)

src/Button/IconButton.features.stories.tsx

@@ -21,8 +21,3 @@ export const Small = () => <IconButton size="small" icon={HeartIcon} aria-label=
 export const Medium = () => <IconButton size="medium" icon={HeartIcon} aria-label="Default" />
 
 export const Large = () => <IconButton size="large" icon={HeartIcon} aria-label="Default" />
-
-// remove before merging
-export const CustomSize = () => (
-  <IconButton aria-label="Expand" variant="primary" size="small" icon={ChevronDownIcon} sx={{width: 16, height: 16}} />
-)