From 9a5104d0225a7b14f084f6e37c9add694bef3bfa Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 3 Nov 2020 08:56:11 +0100 Subject: [PATCH] Icon typescript story (#812) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ♻️ Renamed story * 🚧 updating story * 🚧 Working story but typescript error * 🐛 Fixed typescript error in story --- .../{Icon.stories.jsx => Icon.stories.tsx} | 54 ++++++++++--------- libraries/core-react/src/Icon/Icon.tsx | 12 ++--- libraries/core-react/src/Icon/index.ts | 3 +- libraries/core-react/src/index.ts | 2 +- 4 files changed, 37 insertions(+), 34 deletions(-) rename apps/storybook-react/stories/{Icon.stories.jsx => Icon.stories.tsx} (53%) diff --git a/apps/storybook-react/stories/Icon.stories.jsx b/apps/storybook-react/stories/Icon.stories.tsx similarity index 53% rename from apps/storybook-react/stories/Icon.stories.jsx rename to apps/storybook-react/stories/Icon.stories.tsx index 016bcc724d..32eb88e0d2 100644 --- a/apps/storybook-react/stories/Icon.stories.jsx +++ b/apps/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 = (args) => + +export const IconExamples: Story = () => (

Sizes

@@ -78,27 +100,7 @@ export const IconExamples = () => (

Using data prop with custom icon

- - -

With knobs

- - +
) diff --git a/libraries/core-react/src/Icon/Icon.tsx b/libraries/core-react/src/Icon/Icon.tsx index 44ef151047..27b003f730 100644 --- 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(({ 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 + /** @ignore */ + ref?: Ref +} & SVGProps -export const Icon = forwardRef(function EdsIcon( +export const Icon = forwardRef(function Icon( { size = 24, color = 'currentColor', diff --git a/libraries/core-react/src/Icon/index.ts b/libraries/core-react/src/Icon/index.ts index 8945832d93..26ba00f7dc 100644 --- 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 index 0883a97a36..cc51acea01 100644 --- 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'