✨ Types for List equinor#575

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

@@ -0,0 +1,11 @@
+import { tokens } from '@equinor/eds-tokens'
+
+const { colors } = tokens
+
+export const list = {
+  color: colors.text.static_icons__default.hex,
+  typography: {
+    lineHeight: '1.5em',
+    fontSize: '1rem',
+  },
+}

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'
+
+const { color, typography } = tokens
+
+type StyledListProps = {
+  as: ElementType
+}
+
+const StyledList = styled.div<StyledListProps>(
+  ({ as }) =>
+    as === 'ol' &&
+    css`
+      & ol {
+        list-style-type: lower-alpha;
+      }
+    `,
+  `
+    line-height: ${typography.lineHeight};
+    font-size: ${typography.fontSize};
+    color: ${color};
+  `,
+)
+
+type Props = {
+  /** Is the list an ordered or unordered list */
+  variant?: 'bullet' | 'numbered'
+  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 = 'eds-list'
+
+export { List }

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+type Props = React.HTMLAttributes<HTMLElement>
+
+const ListItem = forwardRef<HTMLLIElement, Props>(function ListItem(
+  { children, ...props },
+  ref,
+) {
+  return (
+    <li {...props} ref={ref}>
+      {children}
+    </li>
+  )
+})
+
+ListItem.displayName = 'eds-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 }