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

package/src/lib/modal/modal.tsx

@@ -0,0 +1,285 @@
+import {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  MouseEvent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import {
+  clearAllBodyScrollLocks,
+  disableBodyScroll,
+  enableBodyScroll,
+} from 'body-scroll-lock'
+import classNames from 'classnames'
+
+import { ModalType, randomId, Size } from '@sebgroup/extract'
+import Button from '../form/button/button'
+
+type ModalEventListener = (
+  event: MouseEvent<HTMLButtonElement | HTMLDivElement> | null,
+) => unknown
+
+export interface ModalProps {
+  type?: ModalType
+  header?: string
+  children: ReactNode
+  confirm?: string
+  dismiss?: string
+  closeText?: string
+  size?: Size
+  id?: string
+  isOpen?: boolean
+  onClose?: ModalEventListener
+  onConfirm?: ModalEventListener
+  onDismiss?: ModalEventListener
+  preventBackdropClose?: boolean
+  enableBodyScrollLock?: boolean
+}
+
+interface ModalHeaderProps
+  extends Pick<ModalProps, 'type' | 'header' | 'closeText' | 'id' | 'onClose'> {
+  setStatus?: (status: string) => void
+  setShouldRender?: (shouldRender: boolean) => void
+}
+
+const ModalHeader = ({
+  type,
+  setStatus,
+  setShouldRender,
+  header = '',
+  closeText = 'Close Modal',
+  id,
+  onClose,
+}: ModalHeaderProps) => {
+  const handleClose: ModalEventListener = (event) => {
+    if (type === 'slideout') {
+      setStatus && setStatus(IS_EXITING)
+      setTimeout(() => {
+        if (onClose) onClose(event)
+        setStatus && setStatus(UNMOUNTED)
+        setShouldRender && setShouldRender(false)
+      }, DELAY)
+    } else {
+      if (onClose) onClose(event)
+      setStatus && setStatus(UNMOUNTED)
+      setShouldRender && setShouldRender(false)
+    }
+  }
+  return (
+    <div className="header">
+      <h3 id={id}>{header}</h3>
+      <button className="close" aria-label={closeText} onClick={handleClose}>
+        <i></i>
+      </button>
+    </div>
+  )
+}
+
+const ModalBody = ({ children, id }: Partial<ModalProps>) => {
+  return (
+    <div className="body" id={id}>
+      {children}
+    </div>
+  )
+}
+
+const ModalFooter = ({
+  confirm,
+  dismiss,
+  onClose,
+  onConfirm,
+  onDismiss,
+  preventBackdropClose = false,
+}: Partial<ModalProps>) => {
+  const handleConfirm: ModalEventListener = (event) => {
+    if (onConfirm) onConfirm(event)
+    if (onClose) onClose(event)
+  }
+  const handleDismiss: ModalEventListener = (event) => {
+    if (onDismiss) onDismiss(event)
+    if (onClose) onClose(event)
+  }
+  return (
+    <div className="footer">
+      {dismiss && (
+        <Button variant="secondary" onClick={handleDismiss}>
+          {dismiss}
+        </Button>
+      )}
+      {confirm && (
+        <Button variant="primary" onClick={handleConfirm}>
+          {confirm}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+/* This delay is the same as the one used in the aside modal mixin: /libs/chlorophyll/scss/components/modal/_mixins.scss */
+const DELAY = 500
+
+const UNMOUNTED = 'unmounted'
+const IS_MOUNTING = 'is-mounting'
+const IS_ENTERING = 'is-entering'
+const ENTERED = 'entered'
+const IS_EXITING = 'is-exiting'
+
+export const Modal = ({
+  type = 'default',
+  id = randomId(),
+  isOpen,
+  size = 'sm',
+  enableBodyScrollLock = true,
+  ...props
+}: ModalProps) => {
+  const [uuid, _] = useState(id)
+  const [status, setStatus] = useState<string>(UNMOUNTED)
+  const [shouldRender, setShouldRender] = useState<boolean | undefined>(false)
+
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isOpen && !shouldRender && status === UNMOUNTED) {
+      setShouldRender(true)
+      setStatus(IS_MOUNTING)
+    }
+
+    if (isOpen && shouldRender && status === IS_MOUNTING) {
+      setStatus(IS_ENTERING)
+      setTimeout(() => {
+        setStatus(ENTERED)
+      }, DELAY)
+    }
+
+    if (!isOpen && status === ENTERED) {
+      setStatus(IS_EXITING)
+      setTimeout(() => {
+        setStatus(UNMOUNTED)
+        setShouldRender(false)
+      }, DELAY)
+    }
+    if (isOpen && modalRef.current && enableBodyScrollLock) {
+      // Disable scrolling on the body when the modal is open
+      disableBodyScroll(modalRef.current, {
+        allowTouchMove: (el) => {
+          // Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
+          return modalRef.current?.contains(el) || false
+        },
+      })
+    } else if (modalRef.current) {
+      // Enable scrolling on the body when the modal is closed
+      enableBodyScroll(modalRef.current)
+    }
+
+    return () => {
+      // Cleanup by enabling body scroll and removing all scroll locks
+      clearAllBodyScrollLocks()
+    }
+  }, [isOpen, shouldRender, status, enableBodyScrollLock])
+
+  if (!isOpen) return null
+
+  const bodyId = `${uuid}_body`
+  const headerId = `${uuid}_header`
+
+  const dialogProps: DetailedHTMLProps<
+    HTMLAttributes<HTMLElement>,
+    HTMLElement
+  > = {
+    id: uuid,
+    role: 'dialog',
+    'aria-modal': true,
+    'aria-labelledby': headerId,
+    'aria-describedby': bodyId,
+  }
+
+  let modalContent
+
+  switch (type) {
+    case 'slideout': {
+      const className: string | undefined = classNames(status, {
+        'gds-slide-out--960': size === 'lg',
+        'gds-slide-out--768': size === 'md',
+      })
+
+      modalContent = (
+        <aside className={className} {...dialogProps} ref={modalRef}>
+          <ModalHeader
+            id={headerId}
+            setStatus={setStatus}
+            setShouldRender={setShouldRender}
+            type={type}
+            {...props}
+          />
+          <ModalBody id={bodyId} {...props} />
+          <ModalFooter {...props} />
+        </aside>
+      )
+      break
+    }
+    case 'takeover': {
+      modalContent = (
+        <main {...dialogProps} ref={modalRef}>
+          <ModalHeader id={headerId} {...props} />
+          <ModalBody id={bodyId} {...props} />
+          <ModalFooter {...props} />
+        </main>
+      )
+      break
+    }
+    default: {
+      modalContent = (
+        <div className="gds-dialog-wrapper" ref={modalRef}>
+          <section {...dialogProps}>
+            <ModalHeader id={headerId} {...props} />
+            <ModalBody id={bodyId} {...props} />
+            <ModalFooter {...props} />
+          </section>
+        </div>
+      )
+      break
+    }
+  }
+
+  const backdropClassnames: string | undefined = classNames(
+    'backdrop',
+    {
+      'backdrop--transparent': type === 'slideout',
+    },
+    status,
+  )
+
+  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (props.onClose && !props.preventBackdropClose) {
+      if (type === 'slideout') {
+        setStatus && setStatus(IS_EXITING)
+        setTimeout(() => {
+          if (props.onClose) props.onClose(event)
+          setStatus && setStatus(UNMOUNTED)
+          setShouldRender && setShouldRender(false)
+        }, DELAY)
+      } else {
+        if (props.onClose) props.onClose(event)
+        setStatus && setStatus(UNMOUNTED)
+        setShouldRender && setShouldRender(false)
+      }
+    }
+  }
+
+  return (
+    <>
+      {modalContent}
+      {/* Backdrop */}
+      <div
+        data-testid="modal-backdrop"
+        className={backdropClassnames}
+        onClick={(e) => handleBackdropClick(e)}
+        aria-hidden="true"
+      ></div>
+    </>
+  )
+}
+
+export default Modal

package/src/lib/navbar/index.tsx

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

package/src/lib/navbar/navbar.mdx

@@ -0,0 +1,37 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import Navbar from './navbar'
+import * as NavbarStories from './navbar.stories';
+
+export const Template = ({ children, ...props }) => (
+  <Navbar {...props}>{children}</Navbar>
+)
+
+# Navbar
+
+Simple navbar component.
+
+<Meta of={NavbarStories} />
+
+## Variants
+
+### Transparent
+
+<Canvas of={NavbarStories.Transparent} />
+
+### Light
+
+<Canvas of={NavbarStories.Light} />
+
+### Dark
+
+<Canvas of={NavbarStories.Dark} />
+
+## Content
+
+### Light navbar with grid and additional content
+
+<Canvas of={NavbarStories.Content} />
+
+#### Available props
+
+<Controls />

package/src/lib/navbar/navbar.spec.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react'
+
+import Navbar from './navbar'
+
+describe('Navbar', () => {
+  const title = 'Header'
+
+  it('renders', () => {
+    render(<Navbar></Navbar>)
+
+    expect(screen.getByRole('navigation')).toBeVisible()
+  })
+  it('renders content', () => {
+    render(<Navbar title={title}></Navbar>)
+
+    expect(screen.getByRole('navigation')).toHaveTextContent('Header')
+  })
+
+  it('renders children', () => {
+    render(<Navbar title={title}>Test Data</Navbar>)
+    expect(screen.getByRole('navigation')).toHaveTextContent('Test Data')
+  })
+
+  it('should have render variant bg-light', () => {
+    render(<Navbar title={title} variant="bg-light" />)
+    expect(screen.getByRole('navigation')).toHaveClass('bg-light')
+  })
+
+  it('should have render variant bg-dark', () => {
+    render(<Navbar title={title} variant="bg-dark" />)
+    expect(screen.getByRole('navigation')).toHaveClass('bg-dark')
+  })
+
+  it('should have render variant transparent', () => {
+    render(<Navbar title={title} />)
+    expect(screen.getByRole('navigation').classList.length).toBe(0)
+  })
+
+  it('should render default title', () => {
+    const { container } = render(<Navbar title={title} />)
+    expect(container.querySelectorAll('a')[1]).toBeFalsy()
+    expect(container.querySelector('h1')?.textContent).toBe('Header')
+  })
+
+  it('should render linkable title', () => {
+    const { container } = render(<Navbar title={title} titleLink="#" />)
+    const anchorElement: HTMLAnchorElement = container.querySelectorAll('a')[1]
+    expect(anchorElement).toBeTruthy()
+    expect(anchorElement.href).toBe('http://localhost/#')
+    expect(anchorElement.textContent).toBe('Header')
+  })
+
+  it('should have custom brand link and aria-label', () => {
+    const { container } = render(
+      <Navbar
+        title={title}
+        brandLink="www.random.com"
+        brandAriaLabel="Opens random com"
+      />,
+    )
+    const anchorElement: HTMLAnchorElement = container.querySelectorAll('a')[0]
+    expect(anchorElement).toBeInTheDocument()
+    expect(anchorElement.getAttribute('href')).toBe('www.random.com')
+    expect(anchorElement.getAttribute('aria-label')).toBe('Opens random com')
+  })
+})

package/src/lib/navbar/navbar.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import Navbar from './navbar'
+
+const Template = ({ children, ...props }) => (
+  <Navbar {...props}>{children}</Navbar>
+)
+
+export default {
+  title: 'Components/Navbar',
+  component: Navbar,
+
+  argTypes: {
+    variant: {
+      options: [undefined, 'bg-light', 'bg-dark'],
+    },
+  },
+}
+
+export const Transparent = {
+  render: Template.bind({}),
+  name: 'Transparent',
+
+  args: {
+    title: 'Transparent navbar',
+    titleLink: 'http://seb.se',
+    variant: undefined,
+  },
+}
+
+export const Light = {
+  render: Template.bind({}),
+  name: 'Light',
+
+  args: {
+    title: 'Light navbar',
+    titleLink: 'http://seb.se',
+    variant: 'bg-light',
+  },
+}
+
+export const Dark = {
+  render: Template.bind({}),
+  name: 'Dark',
+
+  args: {
+    title: 'Dark navbar',
+    titleLink: 'http://seb.se',
+    variant: 'bg-dark',
+  },
+}
+
+export const Content = {
+  render: Template.bind({}),
+  name: 'Content',
+
+  args: {
+    title: 'Page heading',
+    variant: 'bg-light',
+    children: [
+      <input type="text" placeholder="Input field" />,
+      <button type="button" className="ghost">
+        Search
+      </button>,
+    ],
+  },
+}

package/src/lib/navbar/navbar.tsx

@@ -0,0 +1,60 @@
+import { HTMLAttributes, ReactNode, useEffect, useState } from 'react'
+
+import { NavbarVariant } from '@sebgroup/extract'
+import Link from '../link/link'
+
+export interface NavProps extends HTMLAttributes<HTMLElement> {
+  title?: string
+  titleLink?: string
+  brandLink?: string
+  brandAriaLabel?: string
+  variant?: NavbarVariant
+  children?: ReactNode
+}
+
+//TODO: Add variants
+export const Navbar = ({
+  children,
+  variant,
+  title,
+  titleLink,
+  brandLink = 'https://www.seb.se',
+  brandAriaLabel = 'Open seb.se in new tab',
+}: NavProps) => {
+  const [props, setProps] = useState<HTMLAttributes<HTMLElement>>({})
+  useEffect(() => {
+    const classNames: string[] = []
+    if (variant) classNames.push(variant)
+    setProps({ ...props, className: classNames.join(' ') })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [variant])
+
+  return (
+    <nav role="navigation" {...props}>
+      <Link
+        aria-label={brandAriaLabel}
+        href={brandLink}
+        target="_blank"
+        className="brand"
+      />
+      <div className="container-fluid">
+        <div className="row justify-content-between align-items-center">
+          <div className="col-auto">
+            {titleLink ? (
+              <Link className="mx-4" href={titleLink}>
+                <h1>{title}</h1>
+              </Link>
+            ) : (
+              <h1>{title}</h1>
+            )}
+          </div>
+          <div className="col-auto">
+            <div className="group size-sm">{children}</div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

package/src/lib/popover/index.tsx

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

package/src/lib/popover/popover.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Popover } from './popover'
+import { Button } from '../form'
+import * as PopoverStories from './popover.stories'
+
+<Meta of={PopoverStories} />
+
+# Popover
+
+[Source code](https://github.com/seb-oss/green/tree/main/libs/react/src/lib/popover)
+
+## Importing the component
+
+To use the component, import `Popover` like this:
+
+```jsx
+import { Popover, Button } from '@sebgroup/green-react/src/lib/popover'
+
+// Use as JSX element in your app
+return (
+  <Popover>
+    <Button slot="trigger">Open popover</Button>
+    <div style={{ padding: '1rem;' }}>Content in popover</div>
+  </Popover>
+)
+```
+
+<Canvas of={PopoverStories.Default} />
+
+## More examples
+
+For various examples of how to use the component, head over to the [Green Core storybook](https://storybook.seb.io/latest/core/?path=/story/components-popover--page)

package/src/lib/popover/popover.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+
+import { Button } from '../form'
+import { Popover } from './popover'
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+} as Meta
+
+export const Default = () => (
+  <Popover>
+    <Button slot="trigger">Open popover</Button>
+    <div style={{ padding: '1rem' }}>Content in popover</div>
+  </Popover>
+)

package/src/lib/popover/popover.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+import { createComponent } from '@lit/react'
+
+import { GdsPopover } from '@sebgroup/green-core/components/popover/popover.component'
+import * as PopoverTransitionalStyles from '@sebgroup/green-core/components/popover/popover.trans.styles'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+
+GdsPopover.define()
+PopoverTransitionalStyles.register()
+
+export const Popover = createComponent({
+  tagName: getScopedTagName('gds-popover'),
+  elementClass: GdsPopover,
+  react: React,
+})

package/src/lib/segmented-control/index.tsx

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

package/src/lib/segmented-control/segmented-control.mdx

@@ -0,0 +1,83 @@
+import { Meta, Story, Canvas, Markdown } from '@storybook/blocks'
+import { SegmentedControl, Segment } from './segmented-control'
+import { provideProtractorTestingSupport } from '@angular/platform-browser'
+import * as SegmentedControlStories from './segmented-control.stories';
+
+export const Template = (props) => (
+  <SegmentedControl {...props}>
+    <Segment value="1">1 month</Segment>
+    <Segment value="2">This year</Segment>
+    <Segment value="3">1 year</Segment>
+    <Segment value="4">3 years</Segment>
+    <Segment value="5" disabled>
+      5 years
+    </Segment>
+    <Segment value="6">10 years</Segment>
+  </SegmentedControl>
+)
+
+# Segmented Control
+
+A segmented control is a group of 2-5 buttons that lets the user switch views or sort elements.
+
+<Meta of={SegmentedControlStories} />
+
+<Canvas of={SegmentedControlStories.Default} />
+
+### Small
+
+There is a small and a medium version which can be configured using the `size` prop.
+
+<SegmentedControl size="small">
+  <Segment value="1">1 month</Segment>
+  <Segment value="2">This year</Segment>
+  <Segment value="3">1 year</Segment>
+</SegmentedControl>
+
+
+### Segment Size
+
+Segments can have different widths depending on the content, and if there are too many segments to fit in the container, scroll buttons will appear to the left and/or right.
+
+Segment with can also be controlled individually on the segments using the `width`, `min-width` and `max-width` Style Expression properties.
+
+<SegmentedControl>
+  <Segment value="1">1 month</Segment>
+  <Segment value="2">This year</Segment>
+  <Segment value="3" minWidth='350px' >1 year</Segment>
+  <Segment value="4">3 years</Segment>
+  <Segment value="5">5 years</Segment>
+  <Segment value="6">10 years</Segment>
+</SegmentedControl>
+
+Available `SegmentedControl` component props
+
+<Markdown>
+  {`
+  | Props        | Type                                                                    | Description                    |
+  | :----------- | :---------------------------------------------------------------------- | :----------------------------- |
+  |  value       | \` string \`                                                            | The value of the currently selected segment. Setting this property will select the segment with the matching value.  |
+  |  size        | \` small | medium \`                                                    | Size of the segmented control |
+  |  onChange    | \` (event: Event) => void \`                                            | Fires when the selected segment is changed, use \` event.target.value \` to retrive the value         |
+  |  className   | \` string \`                                                            | Component className         |
+  |  children    | \` ReactNode | ReactNode[] \`                                           | Pass down Segment component as child |
+  `}
+</Markdown>
+
+<br />
+
+Available `Segment` component props
+
+<Markdown>
+  {`
+  | Props        | Type                                                                    | Description                    |
+  | :----------- | :---------------------------------------------------------------------- | :----------------------------- |
+  |  value       | \` string \`                                                            | The value of the segment. |
+  |  className   | \` string \`                                                            | Component className         |
+  |  disabled    | \` boolean \`                                                           | To disabled segment button |
+  |  children    | \` ReactNode | ReactNode[] \`                                           | Pass down labels or Reactnode as child |
+  |  width       | \` string \`                                                            | Controls the \` width \` css property of the segment. |
+  |  minWidth   | \` string \`                                                             | Controls the \` minWidth \` css property of the segment. |
+  |  maxWidth   | \` string \`                                                             | Controls the \` maxWidth \` css property of the segment. |
+  `}
+</Markdown>