✨ Types for List (#658)

* ✨ Types for List #575

* Add body_short as typography token

* Some cleanup

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

@@ -0,0 +1,9 @@
+import { tokens } from '@equinor/eds-tokens'
+
+const {
+  typography: { paragraph },
+} = tokens
+
+export const list = {
+  typography: paragraph.body_short,
+}

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

@@ -0,0 +1,46 @@
+import React, { forwardRef, HTMLAttributes, ElementType } from 'react'
+import styled, { css } from 'styled-components'
+import { list as tokens } from './List.tokens'
+import { typographyTemplate } from '../_common/templates'
+
+const { typography } = tokens
+
+type StyledListProps = {
+  as: ElementType
+}
+
+const StyledList = styled.div<StyledListProps>(
+  ({ as }) =>
+    as === 'ol' &&
+    css`
+      & ol {
+        list-style-type: lower-alpha;
+      }
+    `,
+  `
+    ${typographyTemplate(typography)}
+    `,
+)
+
+type Props = {
+  /** 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>(
+  function List({ children, variant = 'bullet', ...props }, ref) {
+    const as: ElementType = variant === 'numbered' ? 'ol' : 'ul'
+
+    return (
+      <StyledList as={as} ref={ref} {...props}>
+        {children}
+      </StyledList>
+    )
+  },
+)
+
+List.displayName = 'List'
+
+export { List }

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

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react'
+
+export type ListItemProps = React.HTMLAttributes<HTMLLIElement>
+
+const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(
+  { children, ...props },
+  ref,
+) {
+  return (
+    <li {...props} ref={ref}>
+      {children}
+    </li>
+  )
+})
+
+ListItem.displayName = 'ListItem'
+
+export { ListItem }

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

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