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

package/src/lib/accordion/accordion.spec.tsx

@@ -0,0 +1,168 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import Accordion from './accordion'
+import { AccordionItemInterface } from './accordion-item'
+
+const items: AccordionItemInterface[] = [
+  {
+    label: 'This the first Accordion label',
+    subLabel: 'This is the first Accordion sub label',
+    content: (
+      <>
+        <p>First accordion region</p>
+        <a href="/#">And this is a link</a>
+      </>
+    ),
+    labelElementLevel: 2,
+  },
+  {
+    customLabel: <>This is the second Accordion label</>,
+    subLabel: 'This is the second Accordion sub label',
+    content: (
+      <>
+        <p>Second accordion region</p>
+        <a href="/#">And this is a link</a>
+      </>
+    ),
+    labelElementLevel: 2,
+  },
+  {
+    label: 'This is the third Accordion label',
+    content: (
+      <>
+        <p>Third accordion region</p>
+        <a href="/#">And this is a link</a>
+      </>
+    ),
+    labelElementLevel: 2,
+    defaultOpen: true,
+  },
+]
+
+describe('Accordion', () => {
+  it('renders', () => {
+    render(<Accordion items={items} />)
+    expect(screen.getByText('This the first Accordion label')).toBeTruthy()
+  })
+
+  it('should have buttons ', () => {
+    render(<Accordion items={items} />)
+
+    expect(screen.getAllByRole('button').length).toEqual(3)
+  })
+
+  it('should show item when clicked', () => {
+    render(<Accordion items={items} />)
+
+    fireEvent.click(screen.getAllByRole('button')[0])
+
+    expect(screen.getAllByRole('region')[0].hidden).toBeFalsy()
+    expect(
+      screen.getAllByRole('button')[0].getAttribute('aria-expanded'),
+    ).toEqual('true')
+  })
+
+  it('should have correct aria attributes', () => {
+    render(<Accordion items={items} />)
+
+    fireEvent.click(screen.getAllByRole('button')[0])
+
+    expect(screen.getAllByRole('button')[0].id).toEqual(
+      screen.getAllByRole('region')[0].getAttribute('aria-labelledby'),
+    )
+    expect(screen.getAllByRole('region')[0].id).toEqual(
+      screen.getAllByRole('button')[0].getAttribute('aria-controls'),
+    )
+  })
+
+  it('should call the onClick handler passed as prop', function () {
+    const mockFunction = jest.fn()
+
+    render(
+      <Accordion
+        items={[
+          { ...items[0], onClick: mockFunction },
+          { ...items[1], onClick: mockFunction },
+          { ...items[2], onClick: mockFunction },
+        ]}
+      />,
+    )
+
+    fireEvent.click(screen.getAllByRole('button')[0])
+    fireEvent.click(screen.getAllByRole('button')[1])
+    fireEvent.click(screen.getAllByRole('button')[2])
+
+    expect(mockFunction).toHaveBeenCalledTimes(3)
+  })
+
+  it('should call the onOpen and onClose handler passed as prop when opening/closing', function () {
+    const mockFunctionOnOpen = jest.fn()
+    const mockFunctionOnClose = jest.fn()
+
+    render(
+      <Accordion
+        items={[
+          {
+            ...items[0],
+            onOpen: mockFunctionOnOpen,
+            onClose: mockFunctionOnClose,
+          },
+          { ...items[1] },
+          { ...items[2] },
+        ]}
+      />,
+    )
+
+    fireEvent.click(screen.getAllByRole('button')[0])
+    fireEvent.click(screen.getAllByRole('button')[0])
+
+    expect(mockFunctionOnOpen).toHaveBeenCalledTimes(1)
+    expect(mockFunctionOnClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should be able to tab to buttons', async () => {
+    const user = userEvent.setup()
+
+    render(<Accordion items={items} />)
+
+    await user.tab()
+    await user.tab()
+    await user.tab()
+
+    expect(document.activeElement).toBe(screen.getAllByRole('button')[2])
+  })
+
+  it('should open with enter', function () {
+    userEvent.setup()
+
+    render(<Accordion items={items} />)
+
+    userEvent.type(screen.getAllByRole('button')[0], '{enter}', {
+      skipClick: true,
+    })
+
+    expect(screen.getByText('First accordion region')).toBeDefined()
+  })
+  it('should open with space', function () {
+    userEvent.setup()
+
+    render(<Accordion items={items} />)
+
+    userEvent.type(screen.getAllByRole('button')[0], '{space}', {
+      skipClick: true,
+    })
+
+    expect(screen.getByText('First accordion region')).toBeDefined()
+  })
+
+  it('accordion is open when defautlOpen is true', () => {
+    render(<Accordion items={items} />)
+    expect(screen.getByText('Third accordion region')).toBeVisible()
+
+    // Check that the content of the first and second items are not visible
+    expect(screen.queryByText('First accordion region')).not.toBeVisible()
+    expect(screen.queryByText('Second accordion region')).not.toBeVisible()
+  })
+})

package/src/lib/accordion/accordion.stories.tsx

@@ -0,0 +1,71 @@
+import Accordion from './accordion'
+
+const Template = (args) => <Accordion {...args} />
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Accordion',
+
+  parameters: {
+    componentIds: ['component-accordion'],
+  },
+
+  args: {
+    items: [
+      {
+        label: 'First accordion heading',
+        subLabel: 'First accordion sublabel',
+
+        content: (
+          <>
+            <p>
+              In such a case, we can debounce the resize handling and thus the
+              re-rendering. This will mean to throttle or wait between calls to
+              our handleResize function. There are solid debounce
+              implementations. Let's add a short and simple one to our example
+            </p>
+            <a href="#">And this is a link</a>
+          </>
+        ),
+
+        labelElementLevel: 2,
+        defaultOpen: true,
+      },
+      {
+        label: 'Second accordion heading',
+
+        content: (
+          <>
+            <p>
+              When adding an event listener, such as we are for the resize
+              event, we should make sure to clean up after ourselves. In the
+              example so far, we haven't, and that could cause our app problems
+              later.
+            </p>
+            <a href="#">And this is a link</a>
+          </>
+        ),
+
+        labelElementLevel: 2,
+      },
+      {
+        label: 'Third accordion heading',
+        subLabel: 'Third accordion sublabel',
+
+        content: (
+          <>
+            <p>This is a paragraph in the thrid accordion.</p>
+            <a href="#">This is the second link example</a>
+          </>
+        ),
+
+        labelElementLevel: 2,
+      },
+    ],
+  },
+}

package/src/lib/accordion/accordion.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { randomId } from '@sebgroup/extract'
+import AccordionItem, { AccordionItemInterface } from './accordion-item'
+
+export interface AccordionInterface {
+  items: AccordionItemInterface[]
+}
+
+export const Accordion = ({ items }: AccordionInterface) => {
+  const [uuid, _] = React.useState(randomId())
+
+  return (
+    <div className="accordion">
+      {items &&
+        items.map((item, index) => (
+          <AccordionItem
+            key={`accordion-${uuid}-${index}`}
+            item={item}
+            index={index}
+            uuid={uuid}
+          />
+        ))}
+    </div>
+  )
+}
+
+export default Accordion

package/src/lib/accordion/index.tsx

@@ -0,0 +1,2 @@
+export * from './accordion'
+export * from './accordion-item'

package/src/lib/alert-ribbon/alert-ribbon.mdx

@@ -0,0 +1,91 @@
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/blocks'
+import AlertRibbon from './alert-ribbon'
+import { Button } from '../form/button/button'
+import * as AlertRibbonStories from './alert-ribbon.stories';
+
+export const Template = ({ children, ...props }) => (
+  <AlertRibbon {...props}>{children}</AlertRibbon>
+)
+
+export const Footer = () => (
+  <>
+    <Button>Stäng</Button>
+  </>
+)
+
+export const FooterInfo = () => (
+  <>
+    <Button>Info button</Button>
+  </>
+)
+
+export const FooterSuccess = () => (
+  <>
+    <Button>Success button</Button>
+  </>
+)
+
+export const FooterWarning = () => (
+  <>
+    <Button>Warning button</Button>
+  </>
+)
+
+export const FooterDanger = () => (
+  <>
+    <Button>Danger button</Button>
+  </>
+)
+
+<Meta of={AlertRibbonStories} />
+
+# Alert ribbon
+
+Simple Alert ribbon component
+
+<Story of={AlertRibbonStories.Default} />
+
+#
+
+## Types
+
+Set a alert type for color coded alerts. Please note that inline links can only be in the end of the AlertRibbon in Figma/Design Library so this code might be utpdated to that.
+
+<Canvas of={AlertRibbonStories.Info} />
+
+<Canvas of={AlertRibbonStories.Success} />
+
+<Canvas of={AlertRibbonStories.Warning} />
+
+<Canvas of={AlertRibbonStories.Danger} />
+
+## AlertRibbon with Close button
+
+Close button icon
+
+<Canvas of={AlertRibbonStories.InfoWithCloseButton} />
+
+<Canvas of={AlertRibbonStories.SuccessWithCloseButton} />
+
+<Canvas of={AlertRibbonStories.WarningWithCloseButton} />
+
+<Canvas of={AlertRibbonStories.DangerWithCloseButton} />
+
+<Canvas of={AlertRibbonStories.InfoWithCustomCloseButton} />
+
+
+## AlertRibbon with Footer Buttons
+
+Button components can be passed in as a footer
+
+<Canvas of={AlertRibbonStories.InfoWithFooterButtons} />
+
+<Canvas of={AlertRibbonStories.SuccessWithFooterButtons} />
+
+<Canvas of={AlertRibbonStories.WarningWithFooterButtons} />
+
+<Canvas of={AlertRibbonStories.DangerWithFooterButtons} />
+
+## Props
+
+<ArgTypes />

package/src/lib/alert-ribbon/alert-ribbon.spec.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react'
+
+import Button from '../form/button/button'
+import AlertRibbon from './alert-ribbon'
+
+describe('AlertRibbon', () => {
+  const Header = () => <h3>Card Headline</h3>
+
+  const Footer = () => <Button>Default Button</Button>
+
+  it('renders', () => {
+    const { container } = render(<AlertRibbon>AlertRibbon</AlertRibbon>)
+
+    expect(container.getElementsByClassName('alert-ribbon')[0]).toBeTruthy()
+  })
+  it('sets type class', () => {
+    render(
+      <AlertRibbon type="warning" role="alert">
+        AlertRibbon
+      </AlertRibbon>,
+    )
+
+    expect(screen.getByRole('alert').classList.contains('warning')).toEqual(
+      true,
+    )
+  })
+  it('renders content', () => {
+    render(<AlertRibbon>AlertRibbon</AlertRibbon>)
+
+    expect(screen.getByText('AlertRibbon').tagName).toEqual('P')
+    expect(screen.getByText('AlertRibbon').textContent).toEqual('AlertRibbon')
+  })
+  it('renders heading', () => {
+    render(<AlertRibbon header={<Header />}>AlertRibbon</AlertRibbon>)
+
+    expect(screen.getByRole('heading').textContent).toEqual('Card Headline')
+  })
+
+  it('renders heading with h3 styling if just string', () => {
+    render(<AlertRibbon header={'header'}>AlertRibbon</AlertRibbon>)
+
+    expect(screen.getByText('header').tagName).toEqual('SPAN')
+    expect(screen.getByText('header').classList.contains('header')).toEqual(
+      true,
+    )
+  })
+
+  it('renders footer', () => {
+    render(<AlertRibbon footer={<Footer />}>AlertRibbon</AlertRibbon>)
+
+    expect(screen.getByText('Default Button')).toBeTruthy()
+  })
+
+  it('should not render close button', () => {
+    render(
+      <AlertRibbon isCloseable={false} role="alert" header={<Header />}>
+        AlertRibbon
+      </AlertRibbon>,
+    )
+
+    expect(screen.getByRole('alert')).not.toContain(<button />)
+  })
+
+  it('should show the passed aria-label for close button', () => {
+    render(
+      <AlertRibbon isCloseable={true} closeAriaLabel={'Close message'}>
+        AlertRibbon
+      </AlertRibbon>,
+    )
+
+    expect(screen.getByLabelText('Close message').tagName).toEqual('BUTTON')
+    expect(
+      screen.getByLabelText('Close message').classList.contains('close'),
+    ).toEqual(true)
+  })
+})

package/src/lib/alert-ribbon/alert-ribbon.stories.tsx

@@ -0,0 +1,250 @@
+import { Button } from '../form/button/button'
+import AlertRibbon from './alert-ribbon'
+
+const Template = ({ children, ...props }) => (
+  <AlertRibbon {...props}>{children}</AlertRibbon>
+)
+
+const Footer = () => (
+  <>
+    <Button>Stäng</Button>
+  </>
+)
+
+const FooterInfo = () => (
+  <>
+    <Button>Info button</Button>
+  </>
+)
+
+const FooterSuccess = () => (
+  <>
+    <Button>Success button</Button>
+  </>
+)
+
+const FooterWarning = () => (
+  <>
+    <Button>Warning button</Button>
+  </>
+)
+
+const FooterDanger = () => (
+  <>
+    <Button>Danger button</Button>
+  </>
+)
+
+export default {
+  title: 'Components/AlertRibbon',
+  component: AlertRibbon,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'AlertRibbon',
+
+  parameters: {
+    componentIds: ['component-alertribbon'],
+  },
+
+  args: {
+    type: '',
+    header: 'Heading',
+    footer: <Footer />,
+    children:
+      'Eftersom du vill låna med någon annan än din partner vill vi prata med dig. Du är välkommen att kontakta oss på 0771-365 365 eller boka ett rådgivningsmöte',
+    isCloseable: false,
+    closeText: '',
+  },
+}
+
+export const Info = Template.bind({})
+Info.args = {
+  type: '',
+  header: 'Info heading.',
+  footer: null,
+  children: (
+    <>
+      AlertRibbon content placed inside a paragraph. Inline links,{' '}
+      <a href="#">info</a>, will inherit color from alert to make sure contrast
+      is applied.
+    </>
+  ),
+  isCloseable: false,
+  closeText: '',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  type: 'success',
+  header: 'Success heading.',
+  footer: null,
+  children: (
+    <>
+      AlertRibbon content placed inside a paragraph. Inline links,{' '}
+      <a href="#">success</a>, will inherit color from alert to make sure
+      contrast is applied.
+    </>
+  ),
+  isCloseable: false,
+  closeText: '',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  type: 'warning',
+  header: 'Warning heading.',
+  footer: null,
+  children: (
+    <>
+      AlertRibbon content placed inside a paragraph. Inline links,{' '}
+      <a href="#">warning</a>, will inherit color from alert to make sure
+      contrast is applied, like this .
+    </>
+  ),
+  isCloseable: false,
+  closeText: '',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  type: 'danger',
+  header: 'Danger heading.',
+  footer: null,
+  children: (
+    <>
+      AlertRibbon content placed inside a paragraph. Inline links,{' '}
+      <a href="#">danger</a>, will inherit color from alert to make sure
+      contrast is applied, like this .
+    </>
+  ),
+  isCloseable: false,
+  closeText: '',
+}
+
+export const InfoWithCloseButton = Template.bind({})
+InfoWithCloseButton.args = {
+  type: '',
+  header: 'Info',
+  footer: null,
+  children: (
+    <>
+      This is an alert type <a href="#">info with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const SuccessWithCloseButton = Template.bind({})
+SuccessWithCloseButton.args = {
+  type: 'success',
+  header: 'Success',
+  footer: null,
+  children: (
+    <>
+      This is an alert type <a href="#">success with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const WarningWithCloseButton = Template.bind({})
+WarningWithCloseButton.args = {
+  type: 'warning',
+  header: 'Warning',
+  footer: null,
+  children: (
+    <>
+      This is an alert type <a href="#">warning with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const DangerWithCloseButton = Template.bind({})
+DangerWithCloseButton.args = {
+  type: 'danger',
+  header: 'Danger',
+  footer: null,
+  children: (
+    <>
+      This is an alert type <a href="#">danger with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const InfoWithCustomCloseButton = Template.bind({})
+InfoWithCustomCloseButton.args = {
+  type: '',
+  header: 'Info',
+  footer: null,
+  children: (
+    <>
+      This is an alert type with a custom close label.
+    </>
+  ),
+  isCloseable: true,
+  closeText: 'Stäng',
+}
+
+export const InfoWithFooterButtons = Template.bind({})
+InfoWithFooterButtons.args = {
+  type: '',
+  header: 'Info',
+  footer: <FooterInfo />,
+  children: (
+    <>
+      This is an alert type <a href="#">info with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const SuccessWithFooterButtons = Template.bind({})
+SuccessWithFooterButtons.args = {
+  type: 'success',
+  header: 'Success',
+  footer: <FooterSuccess />,
+  children: (
+    <>
+      This is an alert type <a href="#">success with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const WarningWithFooterButtons = Template.bind({})
+WarningWithFooterButtons.args = {
+  type: 'warning',
+  header: 'Warning',
+  footer: <FooterWarning />,
+  children: (
+    <>
+      This is an alert type <a href="#">warning with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}
+
+export const DangerWithFooterButtons = Template.bind({})
+DangerWithFooterButtons.args = {
+  type: 'danger',
+  header: 'Danger',
+  footer: <FooterDanger />,
+  children: (
+    <>
+      This is an alert type <a href="#">danger with a link</a>.
+    </>
+  ),
+  isCloseable: true,
+  closeText: '',
+}