@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/list/list.spec.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+
+import List, { TableListProps } from './list'
+
+const list: string[] = ['First', 'Second', 'Third']
+const tableData: TableListProps[] = [
+  {
+    title: 'title',
+    definition: ['description 1'],
+  },
+  {
+    title: 'title 2',
+    definition: ['description 2'],
+  },
+]
+
+describe('List', () => {
+  it('Should render ordered list', () => {
+    render(<List listType="ordered">{list}</List>)
+    list.map((text, index) =>
+      expect(screen.getByText(text).textContent).toBe(list[index]),
+    )
+  })
+
+  it('Should render unordered list', () => {
+    render(<List listType="unordered">{list}</List>)
+    list.map((text, index) =>
+      expect(screen.getByText(text).textContent).toBe(list[index]),
+    )
+  })
+
+  it('Should render check list', () => {
+    render(<List listType="check">{list}</List>)
+    list.map((text, index) =>
+      expect(screen.getByText(text).textContent).toBe(list[index]),
+    )
+  })
+
+  it('Should render description list', () => {
+    render(<List listType="table" tableData={tableData}></List>)
+    expect(screen.getByText('description 1')).toBeTruthy()
+    expect(screen.getByText('description 2')).toBeTruthy()
+  })
+
+  it('Check list should have check class name', () => {
+    const { container } = render(<List listType="check">{list}</List>)
+    list.map((text, index) =>
+      expect(screen.getByText(text).textContent).toBe(list[index]),
+    )
+    expect(container.getElementsByClassName('check')).toBeTruthy()
+  })
+})

package/src/lib/list/list.stories.tsx

@@ -0,0 +1,40 @@
+import List from './list'
+
+const Template = ({ children, ...props }) => <List {...props}>{children}</List>
+
+const TableListTemplate = ({ ...props }) => <List {...props} />
+
+export default {
+  title: 'Components/Lists',
+  component: List,
+}
+
+export const OrderedList = {
+  render: Template.bind({}),
+  name: 'Ordered-list',
+
+  args: {
+    listType: 'ordered',
+    children: ['First', 'Second', 'Third', 'Fourth'],
+  },
+}
+
+export const UnorderedList = {
+  render: Template.bind({}),
+  name: 'Unordered-list',
+
+  args: {
+    listType: 'unordered',
+    children: ['First', 'Second', 'Third', 'Fourth'],
+  },
+}
+
+export const CheckList = {
+  render: Template.bind({}),
+  name: 'Check-list',
+
+  args: {
+    listType: 'check',
+    children: ['First', 'Second', 'Third', 'Fourth'],
+  },
+}

package/src/lib/list/list.tsx

@@ -0,0 +1,56 @@
+import { HTMLAttributes, ReactNode } from 'react'
+
+import { ListType } from '@sebgroup/extract'
+import ListItem from './listItem'
+
+export interface ListProps
+  extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {
+  listType?: ListType
+  tableCaption?: string
+  tableData?: TableListProps[]
+  children?: ReactNode[]
+}
+
+export interface TableListProps {
+  title: string
+  definition: string[]
+}
+
+export const List = ({
+  listType,
+  tableCaption,
+  tableData,
+  children,
+  ...props
+}: ListProps) => {
+  if (listType === 'ordered') {
+    return (
+      <ol {...props}>
+        {children?.map((child, index) => (
+          <ListItem key={index}>{child}</ListItem>
+        ))}
+      </ol>
+    )
+  } else if (listType !== 'table') {
+    return (
+      <ul {...props} className={listType}>
+        {children?.map((child, index) => (
+          <ListItem key={index}>{child}</ListItem>
+        ))}
+      </ul>
+    )
+  } else {
+    return (
+      <figure>
+        <figcaption className="table-list-caption">{tableCaption}</figcaption>
+        <dl>
+          {tableData?.map((data, index) => (
+            <ListItem listType={listType} tableRowData={data} key={index} />
+          ))}
+        </dl>
+      </figure>
+    )
+  }
+}
+
+export default List

package/src/lib/list/listItem.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+
+import { TableListProps } from './list'
+import ListItem from './listItem'
+
+const tableListItem: TableListProps = {
+  title: 'title',
+  definition: ['description'],
+}
+
+describe('List', () => {
+  it('Should render list item element', () => {
+    render(<ListItem>First</ListItem>)
+
+    expect(screen.getByText('First')).toBeTruthy()
+  })
+
+  it('Should render list item element as description dd tag', () => {
+    render(
+      <ListItem listType="table" tableRowData={tableListItem}>
+        First
+      </ListItem>,
+    )
+
+    expect(screen.getByText('description')).toBeTruthy()
+  })
+})

package/src/lib/list/listItem.tsx

@@ -0,0 +1,34 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+
+import { ListType } from '@sebgroup/extract'
+import { TableListProps } from './list'
+
+interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+  listType?: ListType
+  tableRowData?: TableListProps
+  children?: ReactNode
+}
+
+const ListItem = ({
+  listType,
+  tableRowData,
+  children,
+  ...props
+}: ListItemProps) => {
+  if (listType === 'table') {
+    return (
+      <dl>
+        <div>
+          <dt>{tableRowData?.title}</dt>
+          {tableRowData?.definition.map((item, index) => (
+            <dd key={index}>{item}</dd>
+          ))}
+        </div>
+      </dl>
+    )
+  } else {
+    return <li {...props}>{children}</li>
+  }
+}
+
+export default ListItem

package/src/lib/list/valueList.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta } from '@storybook/blocks'
+import * as Stories from './valueList.stories.tsx'
+
+<Meta of={Stories} />
+
+## Value List <span className="badge warning" style={{ background: 'var(--background)' }}>Deprecated</span>
+
+This component is deprecated in favour of [`GroupedList`](/docs/components-grouped-list--page)
+
+<Canvas of={Stories.Primary} />
+
+### Value List Props
+
+### Import
+
+```javascript
+import { ValueList } from '@sebgroup/green-react'
+```

package/src/lib/list/valueList.spec.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+
+import { ValueList } from './index'
+
+describe('Value List', () => {
+  it('Should render ordered list', () => {
+    render(
+      <ValueList.List>
+        <ValueList.Label>Label</ValueList.Label>
+        <ValueList.Value>Value</ValueList.Value>
+      </ValueList.List>,
+    )
+
+    expect(screen.getByText('Label').tagName).toEqual('DT')
+    expect(screen.getByText('Value').tagName).toEqual('DD')
+  })
+
+  it('Should add inverted class', () => {
+    const { container } = render(
+      <ValueList.List inverted>
+        <ValueList.Label>Label</ValueList.Label>
+        <ValueList.Value>Value</ValueList.Value>
+      </ValueList.List>,
+    )
+
+    expect(
+      container.querySelector('dl')?.classList.contains('gds-list--inverted'),
+    ).toEqual(true)
+  })
+})

package/src/lib/list/valueList.stories.tsx

@@ -0,0 +1,27 @@
+import ValueList from './valueList'
+
+const meta: Meta = {
+  title: 'Components/Lists/ValueList',
+  component: ValueList,
+}
+
+export default meta
+
+export const Primary = {
+  render: (props) => (
+    <ValueList.List {...props}>
+      <ValueList.Label>Ni vill sälja</ValueList.Label>
+      <ValueList.Value>Fritidshus</ValueList.Value>
+      <ValueList.Label>Lån på bostaden</ValueList.Label>
+      <ValueList.Value>1 000 000 kr</ValueList.Value>
+      <ValueList.Label>Ni köpte bostaden för</ValueList.Label>
+      <ValueList.Value>5 000 000 kr</ValueList.Value>
+      <ValueList.Label>Lägsta försäljningsbelopp</ValueList.Label>
+      <ValueList.Value>2 500 000 kr</ValueList.Value>
+      <ValueList.Label>Mäklararvode</ValueList.Label>
+      <ValueList.Value>50 000 kr</ValueList.Value>
+      <ValueList.Label>Kontantinsats från överskottet</ValueList.Label>
+      <ValueList.Value>375 000 kr</ValueList.Value>
+    </ValueList.List>
+  ),
+}

package/src/lib/list/valueList.tsx

@@ -0,0 +1,44 @@
+import { ReactElement } from 'react'
+
+interface ValueListProps {
+  children?:
+    | ReactElement<ValueListItemProps>
+    | ReactElement<ValueListItemProps>[]
+  inverted?: boolean
+}
+
+interface ValueListItemProps {
+  children: string
+}
+
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+export const Label = ({ children }: ValueListItemProps) => {
+  return <dt>{children}</dt>
+}
+
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+export const Value = ({ children }: ValueListItemProps) => {
+  return <dd>{children}</dd>
+}
+
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+export const List = ({ children, inverted }: ValueListProps) => {
+  let classNames = 'gds-list'
+  if (inverted) classNames += ' gds-list--inverted'
+  return <dl className={classNames}>{children}</dl>
+}
+
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+export default { List, Label, Value }

package/src/lib/modal/index.tsx

@@ -0,0 +1 @@
+export * from './modal'

package/src/lib/modal/modal.spec.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import Modal from './modal'
+
+describe('Modal', () => {
+  const MockModal = () => {
+    const [toggle, setToggle] = useState(true)
+    return (
+      <Modal
+        isOpen={toggle}
+        onClose={() => setToggle(false)}
+        dismiss="Dismiss"
+        confirm="Confirm"
+      >
+        This is a modal body
+      </Modal>
+    )
+  }
+
+  it('renders', () => {
+    render(<Modal isOpen={true}>Hello</Modal>)
+    expect(screen.getByText('Hello')).toBeVisible()
+  })
+
+  it('Should render modal header, body and footer', () => {
+    render(
+      <Modal
+        header="This is modal header"
+        isOpen={true}
+        dismiss="Nope"
+        confirm="Ok"
+      >
+        modal body
+      </Modal>,
+    )
+    expect(screen.getByRole('heading').textContent).toBe('This is modal header')
+    expect(screen.getByText('modal body')).toBeInTheDocument()
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Nope')).toBeInTheDocument()
+    expect(screen.getByText('Ok')).toBeInTheDocument()
+  })
+
+  it('Should close modal with header close button click', () => {
+    render(<MockModal />)
+    expect(screen.getByText('This is a modal body')).toBeInTheDocument()
+    fireEvent.click(screen.getByLabelText('Close Modal'))
+    expect(screen.queryByText('This is a modal body')).toBe(null)
+  })
+
+  it('Should close modal when footer confirm button click', () => {
+    render(<MockModal />)
+    expect(screen.getByText('This is a modal body')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Confirm'))
+    expect(screen.queryByText('This is a modal body')).toBe(null)
+  })
+
+  it('Should close modal when footer dismiss button click', () => {
+    render(<MockModal />)
+    expect(screen.getByText('This is a modal body')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Dismiss'))
+    expect(screen.queryByText('This is a modal body')).toBe(null)
+  })
+
+  it('Should render slide-out modal', () => {
+    const { container } = render(
+      <Modal header="This is modal header" isOpen={true} type="slideout">
+        modal body
+      </Modal>,
+    )
+    expect(container.querySelector('aside')).toBeInTheDocument()
+  })
+  it('Should render take-over modal', () => {
+    const { container } = render(
+      <Modal header="This is modal header" isOpen={true} type="takeover">
+        modal body
+      </Modal>,
+    )
+    expect(container.querySelector('main')).toBeInTheDocument()
+  })
+
+  it('Should fire onComfirm function', () => {
+    const mockOnConfirm: jest.Mock = jest.fn()
+    render(
+      <Modal
+        isOpen={true}
+        dismiss="Nope"
+        confirm="Ok"
+        onConfirm={mockOnConfirm}
+      >
+        modal body
+      </Modal>,
+    )
+    fireEvent.click(screen.getByText('Ok'))
+    expect(mockOnConfirm).toBeCalled()
+  })
+  it('Should fire onDismiss function', () => {
+    const mockOnDismiss: jest.Mock = jest.fn()
+    render(
+      <Modal
+        isOpen={true}
+        dismiss="Nope"
+        confirm="Ok"
+        onDismiss={mockOnDismiss}
+      >
+        modal body
+      </Modal>,
+    )
+    fireEvent.click(screen.getByText('Nope'))
+    expect(mockOnDismiss).toBeCalled()
+  })
+
+  it('Should close modal with backdrop grey area clicked', () => {
+    render(<MockModal />)
+    expect(screen.getByText('This is a modal body')).toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('modal-backdrop'))
+    expect(screen.queryByText('This is a modal body')).toBe(null)
+  })
+})

package/src/lib/modal/modal.stories.tsx

@@ -0,0 +1,106 @@
+/* eslint no-console: "off" */
+import React from 'react'
+import { useArgs } from '@storybook/preview-api'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+import Modal, { ModalProps } from './modal'
+
+const Template: Story<ModalProps> = (props) => {
+  const [{ isOpen }, updateArgs] = useArgs()
+  const handleClose = () => {
+    updateArgs({ isOpen: false })
+  }
+
+  const openModal = () => {
+    updateArgs({ isOpen: true })
+  }
+  const onConfirm = () => {
+    console.log('ok clicked')
+  }
+
+  return (
+    <div>
+      {!isOpen && (
+        <button className="button" onClick={openModal}>
+          open modal
+        </button>
+      )}
+      <Modal
+        {...props}
+        onClose={handleClose}
+        isOpen={isOpen}
+        onConfirm={onConfirm}
+      />
+    </div>
+  )
+}
+
+export const ModalDefault: Story<ModalProps> = Template.bind({})
+
+ModalDefault.args = {
+  type: 'default',
+  header: 'Default Modal',
+  closeText: 'Custom Close Label',
+  children: 'Body content',
+  confirm: 'OK',
+  dismiss: 'Nope',
+}
+
+export const SlideOutSmall: Story<ModalProps> = Template.bind({})
+SlideOutSmall.args = {
+  type: 'slideout',
+  header: 'SlideOut Modal - Small',
+  closeText: 'Custom Close Label',
+  children: 'Body content',
+  confirm: 'OK',
+  dismiss: 'Nope',
+  size: 'sm',
+}
+
+export const SlideOutMedium: Story<ModalProps> = Template.bind({})
+SlideOutMedium.args = {
+  type: 'slideout',
+  header: 'SlideOut Modal - Medium',
+  closeText: 'Custom Close Label',
+  children: 'Body content',
+  confirm: 'OK',
+  dismiss: 'Nope',
+  size: 'md',
+}
+
+export const SlideOutLarge: Story<ModalProps> = Template.bind({})
+SlideOutLarge.args = {
+  type: 'slideout',
+  header: 'SlideOut Modal - Large',
+  closeText: 'Custom Close Label',
+  children: 'Body content',
+  confirm: 'OK',
+  dismiss: 'Nope',
+  size: 'lg',
+}
+
+export const TakeOver: Story<ModalProps> = Template.bind({})
+TakeOver.args = {
+  type: 'takeover',
+  header: 'TakeOver Modal',
+  closeText: 'Custom Close Label',
+  children: 'Body content',
+  confirm: 'OK',
+  dismiss: 'Nope',
+}
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  tags: ['autodocs'],
+  component: Modal,
+  parameters: {
+    componentIds: [
+      'component-dialogue',
+      'component-slideout',
+      'component-foldout',
+      'component-takeover',
+    ],
+  },
+}
+
+export default meta