Topbar typescript story (#758)

* ♻️ Changed story type * Updates to story & component
equinor · Nov 13, 2020 · 050c6f0 · 050c6f0
1 parent 66f20dd
commit 050c6f0
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 42 deletions.
diff --git a/...torybook-react/stories/TopBar.stories.jsx → ...torybook-react/stories/TopBar.stories.tsx b/...torybook-react/stories/TopBar.stories.jsx → ...torybook-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<TopbarProps> = (props): JSX.Element => {
   return (
-    <Wrapper tabIndex="0">
-      <TopBar>
-        <Header>{LEFT_CHOICES[leftChoice]}</Header>
-        <CustomContent>{CENTER_CHOICES[centerChoice]}</CustomContent>
-        <Actions>{RIGHT_CHOICES[rightChoice]}</Actions>
+    <Wrapper>
+      <TopBar {...props}>
+        <Header>{LEFT_CHOICES['text+icon']}</Header>
       </TopBar>
       <Body>
         <p>Top of page</p>
@@ -127,3 +122,18 @@ export const Page = () => {
     </Wrapper>
   )
 }
+
+export const WithSearchAndIcons: Story<TopbarProps> = (): JSX.Element => (
+  <Wrapper>
+    <TopBar>
+      <Header>{LEFT_CHOICES['text+icon']}</Header>
+      <CustomContent>{CENTER_CHOICES.search}</CustomContent>
+      <Actions>{RIGHT_CHOICES.icons}</Actions>
+    </TopBar>
+    <Body>
+      <p>Top of page</p>
+      <p>Middle of page</p>
+      <p>Bottom of page</p>
+    </Body>
+  </Wrapper>
+)
diff --git 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<HTMLInputElement>
+} & InputHTMLAttributes<HTMLInputElement>
 
 const TextField = React.forwardRef<HTMLInputElement, Props>(function TextField(
   props,

diff --git 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<HTMLDivElement>
+type ActionsProps = HTMLAttributes<HTMLDivElement>
 
 const StyledActions = styled.div`
   grid-area: right;
   text-align: right;
 `
 
-export const Actions = forwardRef<HTMLDivElement, Props>(
-  function EdsTopBarActions({ children, ...props }, ref) {
+export const Actions = forwardRef<HTMLDivElement, ActionsProps>(
+  function Actions({ children, ...props }, ref) {
     return (
       <StyledActions ref={ref} {...props}>
         {children}

diff --git 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<HTMLDivElement>
+type CustomContentProps = HTMLAttributes<HTMLDivElement>
 
 const StyledCustomContent = styled.div`
   grid-area: center;
 `
 
-export const CustomContent = forwardRef<HTMLDivElement, Props>(
-  function EdsTopBarCustomContent({ children, ...props }, ref) {
+export const CustomContent = forwardRef<HTMLDivElement, CustomContentProps>(
+  function CustomContent({ children, ...props }, ref) {
     return (
       <StyledCustomContent ref={ref} {...props}>
         {children}

diff --git 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<HTMLDivElement>
+type HeaderProps = HTMLAttributes<HTMLDivElement>
 
 const {
   title: { typography },
@@ -19,14 +19,15 @@ const StyledHeader = styled.div`
   ${typographyTemplate(typography)}
 `
 
-export const Header = forwardRef<HTMLDivElement, Props>(
-  function EdsTopBarHeader({ children, ...props }, ref) {
-    return (
-      <StyledHeader ref={ref} {...props}>
-        {children}
-      </StyledHeader>
-    )
-  },
-)
+export const Header = forwardRef<HTMLDivElement, HeaderProps>(function Header(
+  { children, ...props },
+  ref,
+) {
+  return (
+    <StyledHeader ref={ref} {...props}>
+      {children}
+    </StyledHeader>
+  )
+})
 
 // Header.displayName = 'eds-topbar-header'
diff --git 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<HTMLElement>
+export type TopbarProps = HTMLAttributes<HTMLElement>
 
 const {
   background,
@@ -31,7 +31,7 @@ const StyledTopBar = styled.header`
   ${typographyTemplate(typography)}
 `
 
-export const TopBar = forwardRef<HTMLElement, Props>(function EdsTopBar(
+export const TopBar = forwardRef<HTMLElement, TopbarProps>(function TopBar(
   { children, ...props },
   ref,
 ) {

diff --git 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
@@ -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'