Icon typescript story (#812)

* ♻️ Renamed story * 🚧 updating story * 🚧 Working story but typescript error * 🐛 Fixed typescript error in story
equinor · Nov 13, 2020 · 9a5104d · 9a5104d
1 parent d65f72d
commit 9a5104d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 34 deletions.
diff --git a/.../storybook-react/stories/Icon.stories.jsx → .../storybook-react/stories/Icon.stories.tsx b/.../storybook-react/stories/Icon.stories.jsx → .../storybook-react/stories/Icon.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
-import { withKnobs, select, text } from '@storybook/addon-knobs'
 import styled from 'styled-components'
-import { Icon } from '@equinor/eds-core-react'
+import { Icon, IconProps } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
+
 import {
   layers,
   layers_off,
@@ -39,13 +40,34 @@ const Wrapper = styled.div`
   grid-template-columns: repeat(5, fit-content(100%));
 `
 
+const customIconData = {
+  name: 'moon',
+  prefix: 'starwars',
+  height: '24',
+  width: '24',
+  svgPathData:
+    'M19.629,9.655c-0.021-0.589-0.088-1.165-0.21-1.723h-3.907V7.244h1.378V6.555h-2.756V5.866h2.067V5.177h-0.689V4.488h-1.378V3.799h0.689V3.11h-1.378V2.421h0.689V1.731V1.294C12.88,0.697,11.482,0.353,10,0.353c-5.212,0-9.446,4.135-9.629,9.302H19.629z M6.555,2.421c1.522,0,2.756,1.234,2.756,2.756S8.077,7.933,6.555,7.933S3.799,6.699,3.799,5.177S5.033,2.421,6.555,2.421z M12.067,18.958h-0.689v-0.689h2.067v-0.689h0.689V16.89h2.067v-0.689h0.689v-0.689h-1.378v-0.689h-2.067v-0.689h1.378v-0.689h2.756v-0.689h-1.378v-0.689h3.218c0.122-0.557,0.189-1.134,0.21-1.723H0.371c0.183,5.167,4.418,9.302,9.629,9.302c0.711,0,1.401-0.082,2.067-0.227V18.958z',
+}
+
 export default {
   title: 'Components/Icon',
   component: Icon,
-  decorators: [withKnobs],
-}
+  argTypes: {
+    name: {
+      defaultValue: 'save',
+    },
+    color: {
+      control: 'color',
+    },
+    data: {
+      control: 'object',
+    },
+  },
+} as Meta
 
-export const IconExamples = () => (
+export const Default: Story<IconProps> = (args) => <Icon {...args} />
+
+export const IconExamples: Story<IconProps> = () => (
   <div>
     <h2>Sizes</h2>
     <Wrapper>
@@ -78,27 +100,7 @@ export const IconExamples = () => (
     </Wrapper>
     <h2>Using data prop with custom icon</h2>
     <Wrapper>
-      <Icon
-        title="Its a moon"
-        data={{
-          name: 'moon',
-          prefix: 'starwars',
-          height: '24',
-          width: '24',
-          svgPathData:
-            'M19.629,9.655c-0.021-0.589-0.088-1.165-0.21-1.723h-3.907V7.244h1.378V6.555h-2.756V5.866h2.067V5.177h-0.689V4.488h-1.378V3.799h0.689V3.11h-1.378V2.421h0.689V1.731V1.294C12.88,0.697,11.482,0.353,10,0.353c-5.212,0-9.446,4.135-9.629,9.302H19.629z M6.555,2.421c1.522,0,2.756,1.234,2.756,2.756S8.077,7.933,6.555,7.933S3.799,6.699,3.799,5.177S5.033,2.421,6.555,2.421z M12.067,18.958h-0.689v-0.689h2.067v-0.689h0.689V16.89h2.067v-0.689h0.689v-0.689h-1.378v-0.689h-2.067v-0.689h1.378v-0.689h2.756v-0.689h-1.378v-0.689h3.218c0.122-0.557,0.189-1.134,0.21-1.723H0.371c0.183,5.167,4.418,9.302,9.629,9.302c0.711,0,1.401-0.082,2.067-0.227V18.958z',
-        }}
-      />
-    </Wrapper>
-    <h2>With knobs</h2>
-    <Wrapper>
-      <Icon
-        name={select('Name', Object.keys(icons), 'save')}
-        size={select('Sizes', [16, 24, 32, 40, 48], 24)}
-        rotation={select('Rotation', [0, 90, 180, 270], 0)}
-        color={text('Color', '#000eb7')}
-        title={text('Title', '')}
-      />
+      <Icon title="Its a moon" data={customIconData} />
     </Wrapper>
   </div>
 )
diff --git a/libraries/core-react/src/Icon/Icon.tsx b/libraries/core-react/src/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, Ref, SVGProps } from 'react'
 import styled from 'styled-components'
 import { get } from './library'
 import type { IconData } from '@equinor/eds-icons'
@@ -48,9 +48,7 @@ const StyledPath = styled.path.attrs<StyledProps>(({ height, size }) => ({
   transform: size / height !== 1 ? `scale(${size / height})` : null,
 }))``
 
-type Props = {
-  /** @ignore */
-  className?: string
+export type IconProps = {
   /** Title for icon when used semantically */
   title?: string
   /** Color */
@@ -63,9 +61,11 @@ type Props = {
   name?: Name
   /** Manually specify which icon data to use */
   data?: IconData
-} & React.HTMLAttributes<SVGSVGElement>
+  /** @ignore */
+  ref?: Ref<SVGSVGElement>
+} & SVGProps<SVGSVGElement>
 
-export const Icon = forwardRef<SVGSVGElement, Props>(function EdsIcon(
+export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   {
     size = 24,
     color = 'currentColor',

diff --git a/libraries/core-react/src/Icon/index.ts b/libraries/core-react/src/Icon/index.ts
@@ -1,4 +1,4 @@
-import { Icon as IconComponent } from './Icon'
+import { Icon as IconComponent, IconProps } from './Icon'
 import { add } from './library'
 import type { IconType } from './Icon.types'
 
@@ -7,3 +7,4 @@ const Icon = IconComponent as IconType
 Icon.add = add
 
 export { Icon }
+export type { IconProps }
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -5,7 +5,7 @@ export * from './Typography'
 export * from './Table'
 export * from './Divider'
 export * from './TextField'
-export { Icon } from './Icon'
+export * from './Icon'
 export * from './List'
 export * from './Accordion'
 export { Tabs } from './Tabs'