From 050c6f0029379423a64ecb323946081a06601a53 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 27 Oct 2020 15:28:36 +0100 Subject: [PATCH] Topbar typescript story (#758) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ♻️ Changed story type * Updates to story & component --- ...{TopBar.stories.jsx => TopBar.stories.tsx} | 38 ++++++++++++------- .../core-react/src/TextField/TextField.tsx | 4 +- libraries/core-react/src/TopBar/Actions.tsx | 8 ++-- .../core-react/src/TopBar/CustomContent.tsx | 8 ++-- libraries/core-react/src/TopBar/Header.tsx | 23 +++++------ libraries/core-react/src/TopBar/TopBar.tsx | 6 +-- libraries/core-react/src/TopBar/index.tsx | 6 +-- libraries/core-react/src/index.ts | 2 +- 8 files changed, 53 insertions(+), 42 deletions(-) rename apps/storybook-react/stories/{TopBar.stories.jsx => TopBar.stories.tsx} (71%) diff --git a/apps/storybook-react/stories/TopBar.stories.jsx b/apps/storybook-react/stories/TopBar.stories.tsx similarity index 71% rename from apps/storybook-react/stories/TopBar.stories.jsx rename to apps/storybook-react/stories/TopBar.stories.tsx index a3291f0968..f3542bf525 100644 --- a/apps/storybook-react/stories/TopBar.stories.jsx +++ b/apps/storybook-react/stories/TopBar.stories.tsx @@ -1,7 +1,7 @@ import React, { Fragment } from 'react' -import { withKnobs, select } from '@storybook/addon-knobs' import styled from 'styled-components' -import { TopBar, Icon, TextField } from '@equinor/eds-core-react' +import { TopBar, Icon, TextField, TopbarProps } from '@equinor/eds-core-react' +import { Story, Meta } from '@storybook/react' import { account_circle, @@ -23,7 +23,7 @@ const icons = { Icon.add(icons) -const Wrapper = styled.div` +const Wrapper = styled.div.attrs({ tabIndex: 0 })` height: 100vh; overflow: auto; ` @@ -105,19 +105,14 @@ const RIGHT_CHOICES = { export default { title: 'Components/TopBar', component: TopBar, - decorators: [withKnobs], -} + subcomponents: { Actions, Header, CustomContent }, +} as Meta -export const Page = () => { - const leftChoice = select('Left', Object.keys(LEFT_CHOICES), 'text') - const centerChoice = select('Center', Object.keys(CENTER_CHOICES), 'none') - const rightChoice = select('Right', Object.keys(RIGHT_CHOICES), 'icons') +export const Basic: Story = (props): JSX.Element => { return ( - - -
{LEFT_CHOICES[leftChoice]}
- {CENTER_CHOICES[centerChoice]} - {RIGHT_CHOICES[rightChoice]} + + +
{LEFT_CHOICES['text+icon']}

Top of page

@@ -127,3 +122,18 @@ export const Page = () => { ) } + +export const WithSearchAndIcons: Story = (): JSX.Element => ( + + +
{LEFT_CHOICES['text+icon']}
+ {CENTER_CHOICES.search} + {RIGHT_CHOICES.icons} + + +

Top of page

+

Middle of page

+

Bottom of page

+ + +) diff --git a/libraries/core-react/src/TextField/TextField.tsx b/libraries/core-react/src/TextField/TextField.tsx index 652ba5418b..1842cd4a7c 100644 --- a/libraries/core-react/src/TextField/TextField.tsx +++ b/libraries/core-react/src/TextField/TextField.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react' +import React, { ReactNode, InputHTMLAttributes } from 'react' import styled from 'styled-components' import { Input } from './Input' import { Label } from './Label' @@ -40,7 +40,7 @@ type Props = { value?: string /** Read Only */ readOnly?: boolean -} & React.HTMLAttributes +} & InputHTMLAttributes const TextField = React.forwardRef(function TextField( props, diff --git a/libraries/core-react/src/TopBar/Actions.tsx b/libraries/core-react/src/TopBar/Actions.tsx index c6375a19be..ee9f765e56 100644 --- a/libraries/core-react/src/TopBar/Actions.tsx +++ b/libraries/core-react/src/TopBar/Actions.tsx @@ -1,15 +1,15 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, HTMLAttributes } from 'react' import styled from 'styled-components' -type Props = React.HTMLAttributes +type ActionsProps = HTMLAttributes const StyledActions = styled.div` grid-area: right; text-align: right; ` -export const Actions = forwardRef( - function EdsTopBarActions({ children, ...props }, ref) { +export const Actions = forwardRef( + function Actions({ children, ...props }, ref) { return ( {children} diff --git a/libraries/core-react/src/TopBar/CustomContent.tsx b/libraries/core-react/src/TopBar/CustomContent.tsx index 9eb57d9f93..d180e843f6 100644 --- a/libraries/core-react/src/TopBar/CustomContent.tsx +++ b/libraries/core-react/src/TopBar/CustomContent.tsx @@ -1,14 +1,14 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, HTMLAttributes } from 'react' import styled from 'styled-components' -type Props = React.HTMLAttributes +type CustomContentProps = HTMLAttributes const StyledCustomContent = styled.div` grid-area: center; ` -export const CustomContent = forwardRef( - function EdsTopBarCustomContent({ children, ...props }, ref) { +export const CustomContent = forwardRef( + function CustomContent({ children, ...props }, ref) { return ( {children} diff --git a/libraries/core-react/src/TopBar/Header.tsx b/libraries/core-react/src/TopBar/Header.tsx index dc9491c2eb..eccdc2765b 100644 --- a/libraries/core-react/src/TopBar/Header.tsx +++ b/libraries/core-react/src/TopBar/Header.tsx @@ -1,10 +1,10 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, HTMLAttributes } from 'react' import styled from 'styled-components' import { typographyTemplate } from '../_common/templates' import { topbar as tokens } from './TopBar.tokens' -type Props = React.HTMLAttributes +type HeaderProps = HTMLAttributes const { title: { typography }, @@ -19,14 +19,15 @@ const StyledHeader = styled.div` ${typographyTemplate(typography)} ` -export const Header = forwardRef( - function EdsTopBarHeader({ children, ...props }, ref) { - return ( - - {children} - - ) - }, -) +export const Header = forwardRef(function Header( + { children, ...props }, + ref, +) { + return ( + + {children} + + ) +}) // Header.displayName = 'eds-topbar-header' diff --git a/libraries/core-react/src/TopBar/TopBar.tsx b/libraries/core-react/src/TopBar/TopBar.tsx index 300f9f341a..4b1c79d874 100644 --- a/libraries/core-react/src/TopBar/TopBar.tsx +++ b/libraries/core-react/src/TopBar/TopBar.tsx @@ -1,9 +1,9 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, HTMLAttributes } from 'react' import styled from 'styled-components' import { spacingsTemplate, typographyTemplate } from '../_common/templates' import { topbar as tokens } from './TopBar.tokens' -type Props = React.HTMLAttributes +export type TopbarProps = HTMLAttributes const { background, @@ -31,7 +31,7 @@ const StyledTopBar = styled.header` ${typographyTemplate(typography)} ` -export const TopBar = forwardRef(function EdsTopBar( +export const TopBar = forwardRef(function TopBar( { children, ...props }, ref, ) { diff --git a/libraries/core-react/src/TopBar/index.tsx b/libraries/core-react/src/TopBar/index.tsx index 9cbde98b42..86c2da7dde 100644 --- a/libraries/core-react/src/TopBar/index.tsx +++ b/libraries/core-react/src/TopBar/index.tsx @@ -3,16 +3,16 @@ import { Actions } from './Actions' import { Header } from './Header' import { CustomContent } from './CustomContent' -type TopbarTypes = typeof BaseComponent & { +type TopbarProps = typeof BaseComponent & { Actions: typeof Actions Header: typeof Header CustomContent: typeof CustomContent } -const TopBar = BaseComponent as TopbarTypes +const TopBar = BaseComponent as TopbarProps TopBar.Actions = Actions TopBar.Header = Header TopBar.CustomContent = CustomContent -export { TopBar } +export { TopBar, TopbarProps } diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts index f84b2cf833..dd23c6e1c1 100644 --- a/libraries/core-react/src/index.ts +++ b/libraries/core-react/src/index.ts @@ -8,7 +8,7 @@ export { Icon } from './Icon' export { List } from './List' export { Accordion } from './Accordion' export { Tabs } from './Tabs' -export { TopBar } from './TopBar' +export * from './TopBar' export { Card } from './Card' export { Dialog } from './Dialog' export { Scrim } from './Scrim'