Typescript for Chip story (#795)

* 🚚 Rename to .tsx extension * ♻️ Rewrite to typescript. No argsTable is showing * 📝 Add stories for chips
equinor · Nov 13, 2020 · 11d1c3a · 11d1c3a
1 parent ae25265
commit 11d1c3a
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 156 deletions.
diff --git a/apps/storybook-react/stories/Chips.stories.jsx b/apps/storybook-react/stories/Chips.stories.jsx
diff --git a/apps/storybook-react/stories/Chips.stories.tsx b/apps/storybook-react/stories/Chips.stories.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import styled from 'styled-components'
+import { Icon, Chip, ChipProps, Avatar } from '@equinor/eds-core-react'
+import { Meta, Story } from '@storybook/react'
+import { save } from '@equinor/eds-icons'
+
+const icons = {
+  save,
+}
+
+Icon.add(icons)
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-gap: 32px;
+  grid-template-columns: repeat(3, fit-content(100%));
+`
+
+export default {
+  title: 'Components/Chips',
+  component: Chip,
+} as Meta
+
+const handleDelete = action('onDelete')
+const handleClick = action('onClick')
+
+const CatImage = () => (
+  <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} alt="cat" />
+)
+
+export const Default: Story<ChipProps> = (args) => (
+  <Chip {...args}>Play with me</Chip>
+)
+
+export const Text: Story<ChipProps> = () => (
+  <Wrapper>
+    <Chip>normal</Chip>
+    <Chip variant="active">active</Chip>
+    <Chip variant="active" onDelete={handleDelete}>
+      active + deletable
+    </Chip>
+    <Chip variant="error">error</Chip>
+    <Chip variant="error" onDelete={handleDelete}>
+      error + deletable
+    </Chip>
+    <Chip variant="error" onDelete={handleDelete} onClick={handleClick}>
+      error + deletable + clickable
+    </Chip>
+    <Chip onClick={handleClick}>clickable</Chip>
+    <Chip onDelete={handleDelete}>deletable</Chip>
+    <Chip onDelete={handleDelete} onClick={handleClick}>
+      deletable + clickable
+    </Chip>
+    <Chip onDelete={handleDelete} disabled>
+      disabled
+    </Chip>
+  </Wrapper>
+)
+
+export const TextAndIcon: Story<ChipProps> = () => (
+  <Wrapper>
+    <Chip>
+      <Icon name="save" />
+      normal
+    </Chip>
+    <Chip variant="active">
+      <Icon name="save" />
+      active
+    </Chip>
+    <Chip variant="active" onDelete={handleDelete}>
+      <Icon name="save" />
+      active + deletable
+    </Chip>
+    <Chip variant="error">
+      <Icon name="save" />
+      error
+    </Chip>
+    <Chip variant="error" onDelete={handleDelete}>
+      <Icon name="save" />
+      error + deletable
+    </Chip>
+    <Chip variant="error" onDelete={handleDelete} onClick={handleClick}>
+      <Icon name="save" />
+      error + deletable + clickable
+    </Chip>
+    <Chip onClick={handleClick}>
+      <Icon name="save" />
+      clickable
+    </Chip>
+    <Chip onDelete={handleDelete}>
+      <Icon name="save" />
+      deletable
+    </Chip>
+    <Chip onDelete={handleDelete} onClick={handleClick}>
+      <Icon name="save" />
+      deletable + clickable
+    </Chip>
+    <Chip onDelete={handleDelete} disabled>
+      <Icon name="save" />
+      disabled
+    </Chip>
+  </Wrapper>
+)
+export const TextAndAvatar: Story<ChipProps> = () => (
+  <Wrapper>
+    <Chip>
+      <CatImage />
+      normal
+    </Chip>
+    <Chip variant="active">
+      <CatImage />
+      active
+    </Chip>
+    <Chip variant="active" onDelete={handleDelete}>
+      <CatImage />
+      active + deletable
+    </Chip>
+    <Chip variant="error">
+      <CatImage />
+      error
+    </Chip>
+    <Chip variant="error" onDelete={handleDelete}>
+      <CatImage />
+      error + deletable
+    </Chip>
+    <Chip variant="error" onDelete={handleDelete} onClick={handleClick}>
+      <CatImage />
+      error + deletable + clickable
+    </Chip>
+    <Chip onClick={handleClick}>
+      <CatImage />
+      clickable
+    </Chip>
+    <Chip onDelete={handleDelete}>
+      <CatImage />
+      deletable
+    </Chip>
+    <Chip onDelete={handleDelete} onClick={handleClick}>
+      <CatImage />
+      deletable + clickable
+    </Chip>
+    <Chip onDelete={handleDelete} disabled>
+      <CatImage />
+      disabled
+    </Chip>
+  </Wrapper>
+)
+
+TextAndIcon.storyName = 'Text and icon'
+TextAndAvatar.storyName = 'Text and avatar'
diff --git a/libraries/core-react/src/Chip/Chip.tsx b/libraries/core-react/src/Chip/Chip.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { Icon } from './Icon'
 import { chip as tokens } from './Chip.tokens'
@@ -133,16 +133,16 @@ const StyledChips = styled.div.attrs<StyleProps>(
       padding-left: 8px;
     `}
 `
-type Props = {
+export type ChipProps = {
   /** Disabled */
   disabled?: boolean
   /** Delete callback */
   onDelete?: (Event) => void
   /** Variant */
   variant?: 'active' | 'error' | 'default'
-} & React.HTMLAttributes<HTMLDivElement>
+} & HTMLAttributes<HTMLDivElement>
 
-export const Chip = forwardRef<HTMLDivElement, Props>(function EdsChips(
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chips(
   {
     children,
     onDelete,

diff --git a/libraries/core-react/src/Chip/index.ts b/libraries/core-react/src/Chip/index.ts
@@ -1 +1 @@
-export { Chip } from './Chip'
+export * from './Chip'
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -14,7 +14,7 @@ export { Dialog } from './Dialog'
 export { Scrim } from './Scrim'
 export { TableOfContents } from './TableOfContents'
 export { SideSheet } from './SideSheet'
-export { Chip } from './Chip'
+export * from './Chip'
 export * from './Avatar'
 export * from './Search'
 export { Slider } from './Slider'