Typescript for list stories (#753)

* 🚚 Rename to .tsx

* 📝 Update story with args table, ts and 6.0 storybook api

* 🐛 Remove displayName

apps/storybook-react/stories/Lists.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { List, ListProps } from '@equinor/eds-core-react'
+import { Meta, Story } from '@storybook/react'
+
+const { ListItem } = List
+
+const start = '15'
+
+export default {
+  title: 'Components/Lists',
+  component: List,
+} as Meta
+
+export const Default: Story<ListProps> = (args) => (
+  <List {...args}>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>
+      List item
+      <List {...args}>
+        <ListItem>List item</ListItem>
+        <ListItem>List item</ListItem>
+        <ListItem>List item</ListItem>
+      </List>
+    </ListItem>
+  </List>
+)
+
+export const Unordered: Story<ListProps> = () => (
+  <List variant="bullet">
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>
+      List item
+      <List>
+        <ListItem>List item</ListItem>
+        <ListItem>List item</ListItem>
+        <ListItem>List item</ListItem>
+      </List>
+    </ListItem>
+  </List>
+)
+
+export const Ordered: Story<ListProps> = () => (
+  <List variant="numbered">
+    <ListItem>List item</ListItem>
+    <ListItem>
+      List item
+      <List variant="numbered">
+        <ListItem>List item</ListItem>
+        <ListItem>List item</ListItem>
+        <ListItem>
+          List item
+          <List variant="numbered">
+            <ListItem>List item</ListItem>
+            <ListItem>List item</ListItem>
+            <ListItem>List item</ListItem>
+          </List>
+        </ListItem>
+      </List>
+    </ListItem>
+    <ListItem>List item</ListItem>
+  </List>
+)
+
+export const OrderedStartingOn15: Story<ListProps> = () => (
+  <List variant="numbered" start={start}>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+    <ListItem>List item</ListItem>
+  </List>
+)

libraries/core-react/src/List/List.tsx

@@ -22,14 +22,14 @@ const StyledList = styled.div<StyledListProps>(
     `,
 )
 
-type Props = {
+export type ListProps = {
   /** Is the list an ordered or unordered list */
   variant?: 'bullet' | 'numbered'
   /** Start number if other than 1 for ordered lists */
   start?: string
 } & HTMLAttributes<HTMLUListElement | HTMLOListElement>
 
-const List = forwardRef<HTMLUListElement | HTMLOListElement, Props>(
+const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
   function List({ children, variant = 'bullet', ...props }, ref) {
     const as: ElementType = variant === 'numbered' ? 'ol' : 'ul'
 

libraries/core-react/src/List/index.ts

@@ -1,12 +1,12 @@
 import { List as BaseComponent } from './List'
 import { ListItem } from './ListItem'
 
-type ListTypes = typeof BaseComponent & {
+type ListProps = typeof BaseComponent & {
   ListItem: typeof ListItem
 }
 
-const List = BaseComponent as ListTypes
+const List = BaseComponent as ListProps
 
 List.ListItem = ListItem
 
-export { List }
+export { List, ListProps }

libraries/core-react/src/index.ts

@@ -5,7 +5,7 @@ export { Table } from './Table'
 export * from './Divider'
 export { TextField } from './TextField'
 export { Icon } from './Icon'
-export { List } from './List'
+export * from './List'
 export { Accordion } from './Accordion'
 export { Tabs } from './Tabs'
 export * from './TopBar'