Accordian typescript (#686)

* Accordian typescript

* Types are green!

* Accordian is no more

* removed unecessary type

libraries/core-react/package.json

@@ -81,6 +81,7 @@
     "@equinor/eds-icons": "workspace:*",
     "@equinor/eds-tokens": "workspace:*",
     "@testing-library/react-hooks": "^3.3.0",
+    "@types/lodash": "^4.14.162",
     "csstype": "^3.0.3",
     "focus-visible": "^5.1.0",
     "lodash": "^4.17.19"

libraries/core-react/src/Accordion/Accordion.test.jsx → libraries/core-react/src/Accordion/Accordion.test.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable no-undef */
-// @ts-nocheck
 import React from 'react'
-import PropTypes from 'prop-types'
 import { render, cleanup, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 // eslint-disable-next-line camelcase
 import { attach_file, notifications } from '@equinor/eds-icons'
 import { Accordion } from '.'
-import { Icon, Button } from '..'
+import { Button } from '../Button'
+import { Icon } from '../Icon'
+import type { AccordionProps } from './Accordion.types'
 
 const {
   AccordionItem,
@@ -21,7 +21,10 @@ Icon.add({ attach_file, notifications })
 
 afterEach(cleanup)
 
-const SimpleAccordion = ({ headerLevel, chevronPosition }) => (
+const SimpleAccordion = ({
+  headerLevel = 'h2',
+  chevronPosition = 'left',
+}: AccordionProps) => (
   <Accordion headerLevel={headerLevel} chevronPosition={chevronPosition}>
     <AccordionItem isExpanded>
       <AccordionHeader>Summary 1</AccordionHeader>
@@ -34,16 +37,6 @@ const SimpleAccordion = ({ headerLevel, chevronPosition }) => (
   </Accordion>
 )
 
-SimpleAccordion.propTypes = {
-  headerLevel: PropTypes.string,
-  chevronPosition: PropTypes.string,
-}
-
-SimpleAccordion.defaultProps = {
-  headerLevel: 'h2',
-  chevronPosition: 'left',
-}
-
 const AccordionWithIcons = () => (
   <Accordion>
     <AccordionItem>

libraries/core-react/src/Accordion/Accordion.tokens.js → libraries/core-react/src/Accordion/Accordion.tokens.ts

@@ -1,9 +1,9 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
+import type { Typography } from '@equinor/eds-tokens'
 
 const {
   typography: {
-    ui: { accordion_header: header },
+    ui: { accordion_header: typography },
   },
   colors: {
     ui: {
@@ -23,11 +23,24 @@ const {
   },
 } = tokens
 
-export const accordion = {
+type AccordionToken = {
   header: {
-    ...header,
+    typography: Typography
+    color: typeof token.header.color
+    background: typeof token.header.background
+  }
+  border: string
+  outline: string
+  outlineOffset: string
+  chevronColor: typeof token.chevronColor
+  iconColor: typeof token.iconColor
+}
+
+const token = {
+  header: {
+    typography,
     color: {
-      default: header.color,
+      default: typography.color,
       disabled: disabledColor,
       activated: activatedColor,
     },
@@ -52,3 +65,5 @@ export const accordion = {
     },
   },
 }
+
+export const accordion: AccordionToken = token

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

@@ -0,0 +1,32 @@
+import React, { forwardRef, useMemo, ReactElement } from 'react'
+import createId from 'lodash/uniqueId'
+import type { AccordionProps } from './Accordion.types'
+
+const Accordion = forwardRef<
+  HTMLDivElement,
+  AccordionProps & JSX.IntrinsicElements['div']
+>(function Accordion(
+  { headerLevel = 'h2', chevronPosition = 'left', children, ...props },
+  ref,
+) {
+  const accordionId = useMemo<string>(() => createId('accordion-'), [])
+
+  const AccordionItems = React.Children.map(children, (child, index) => {
+    return React.cloneElement(child as ReactElement, {
+      accordionId,
+      index,
+      headerLevel,
+      chevronPosition,
+    })
+  })
+
+  return (
+    <div {...props} ref={ref}>
+      {AccordionItems}
+    </div>
+  )
+})
+
+Accordion.displayName = 'eds-accordion'
+
+export { Accordion }

libraries/core-react/src/Accordion/Accordion.types.ts

@@ -0,0 +1,6 @@
+export type AccordionProps = {
+  /** The header level, i.e. h1, h2, h3 etc. */
+  headerLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  /** Which side the chevron should be on  */
+  chevronPosition?: 'left' | 'right'
+}