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

package/src/lib/context-menu/context-menu.mdx

@@ -0,0 +1,91 @@
+import { Meta, Canvas, Markdown } from '@storybook/blocks'
+import { ContextMenu, MenuItem } from './context-menu'
+import * as ContextMenuStories from './context-menu.stories'
+
+<Meta of={ContextMenuStories} />
+
+# Context Menu
+
+[Source code](https://github.com/seb-oss/green/tree/main/libs/react/src/lib/context-menu)
+&nbsp;|&nbsp;
+[Usage guidelines](https://designlibrary.sebgroup.com/components/component-moremenu)
+
+## Overview
+
+The context menu is a clickable button that opens a menu where you can find the action connected to an area or item. This component is a wrapper and uses the [Green Core Context Menu](https://github.com/seb-oss/green/tree/main/libs/core/src/components/context-menu) component under the hood.
+
+## Importing the component
+
+To use the `ContextMenu` component, you need to import the component:
+
+```jsx
+import { ContextMenu } from '@sebgroup/green-react/src/lib/context-menu'
+```
+
+## Examples
+
+In the example below, we are listening to the `onMenuItemClick` event on the `ContextMenu` component.\
+(`onMenuItemClick={(e) => console.log(e)}`)
+
+<Canvas of={ContextMenuStories.Default} />
+
+A more typical usage would be to listen to `onClick` events on individual `MenuItem`s, while mapping to your specific data:
+
+```jsx
+<ContextMenu buttonLabel="Choose an action">
+  {myListOfActions.map((action) => (
+    <MenuItem key={action.id} onClick={() => console.log(action.id)}>
+      {action.name}
+    </MenuItem>
+  ))}
+</ContextMenu>
+```
+
+### Show label
+
+You can show the label by setting the `showLabel` prop to `true`.
+
+<ContextMenu showLabel buttonLabel="Choose an action" onMenuItemClick={(e) => console.log(e)}>
+  <MenuItem>Action 1</MenuItem>
+  <MenuItem>Action 2</MenuItem>
+  <MenuItem>Action 3</MenuItem>
+</ContextMenu>
+
+### Custom menu item content
+
+You can put any type of content within the `MenuItem` component, including icons, images, or other components.
+
+<ContextMenu label="Choose an action" onMenuItemClick={(e) => console.log(e)}>
+  <MenuItem>Action 1</MenuItem>
+  <MenuItem>Action 2</MenuItem>
+  <MenuItem>Action 3</MenuItem>
+</ContextMenu>
+
+## Component API
+
+### ContextMenu
+
+<Markdown>
+  {`
+  | Prop            | Type                           | Description                                                                  |
+  | :-------------- | :----------------------------- | :--------------------------------------------------------------------------- |
+  | open            | \`boolean\`                      | control if the menu should be open or not                                    |
+  | buttonLabel     | \`string\`                       | label for button next to icon                                                |
+  | ariaLabel       | \`string\`                       | aria-label of icon button                                                    |
+  | label           | \`string\`                       | List of items in the accordion                                               |
+  | showLabel       | \`boolean\`                      | Control if the label should be visually shown                                |
+  | onMenuItemClick | \`(event: CustomEvent) => void\` | A callback function to trigger when item is clicked, is applied to all items |
+  `}
+</Markdown>
+
+### MenuItem
+
+### MenuItem
+
+<Markdown>
+  {`
+  | Prop    | Type                                | Description                                         |
+  | :------ | :---------------------------------- | :-------------------------------------------------- |
+  | onClick | \`(event: React.MouseEvent) => void\` | A callback function to trigger when item is clicked |
+  `}
+</Markdown>

package/src/lib/context-menu/context-menu.stories.tsx

@@ -0,0 +1,29 @@
+/* eslint no-console: "off" */
+import { ContextMenu, MenuItem } from './context-menu'
+
+const Template = ({ children, ...props }) => (
+  <ContextMenu {...props}>{children}</ContextMenu>
+)
+
+export default {
+  title: 'Components/Context Menu',
+  component: ContextMenu,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Context Menu',
+
+  parameters: {
+    componentIds: ['component-contextmenu'],
+  },
+
+  args: {
+    onMenuItemClick: (e) => console.log(e),
+    children: [
+      <MenuItem>Action 1</MenuItem>,
+      <MenuItem>Action 2</MenuItem>,
+      <MenuItem>Action 3</MenuItem>,
+    ],
+  },
+}

package/src/lib/context-menu/context-menu.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { createComponent } from '@lit/react'
+
+import {
+  GdsContextMenu,
+  GdsMenuHeading,
+  GdsMenuItem,
+} from '@sebgroup/green-core/components/context-menu/context-menu.component'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+
+GdsContextMenu.define()
+GdsMenuHeading.define()
+registerTransitionalStyles()
+
+export const ContextMenu = createComponent({
+  tagName: getScopedTagName('gds-context-menu'),
+  elementClass: GdsContextMenu,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click',
+    onUiStateChange: 'gds-ui-state',
+  },
+  react: React,
+})
+
+export const MenuItem = createComponent({
+  tagName: getScopedTagName('gds-menu-item'),
+  elementClass: GdsMenuItem,
+  events: { onMenuItemClick: 'gds-menu-item-click' },
+  react: React,
+})
+
+export const CoreMenuHeading = createComponent({
+  tagName: getScopedTagName('gds-menu-heading'),
+  elementClass: GdsMenuHeading,
+  react: React,
+})

package/src/lib/context-menu/index.tsx

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

package/src/lib/datepicker/datepicker.spec.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import exp from 'constants'
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { formatISO } from 'date-fns'
+
+import { GdsDatepicker } from '@sebgroup/green-core'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import { Datepicker } from './datepicker'
+
+const tick = (ms?: number) => new Promise<void>((r) => setTimeout(r, ms || 0))
+
+const pad = (num: number): string => `${num < 10 ? '0' : ''}${num}`
+
+describe('Datepicker', () => {
+  it('renders', async () => {
+    const component = render(<Datepicker />)
+    await act(() => tick())
+    expect(component).toBeTruthy()
+  })
+
+  it('finds web component by testId', async () => {
+    const { findByTestId } = render(<Datepicker testId="datepicker" />)
+    await act(() => tick())
+
+    const gdsDatepicker = (await findByTestId('datepicker')) as GdsDatepicker
+
+    expect(gdsDatepicker).toBeTruthy()
+  })
+
+  it('gets invalidated', async () => {
+    const { container, findByTestId } = render(
+      <Datepicker testId="datepicker" invalid>
+        <span slot="message">My custom message</span>
+      </Datepicker>,
+    )
+
+    const gdsDatepicker = (await findByTestId('datepicker')) as GdsDatepicker
+
+    gdsDatepicker.invalid = true
+    await gdsDatepicker.updateComplete
+
+    expect(gdsDatepicker.invalid).toBeTruthy()
+    expect(
+      container
+        ?.querySelector(getScopedTagName('gds-datepicker'))
+        ?.shadowRoot?.querySelector('slot[name="message"]')
+        ?.assignedNodes()[0].textContent,
+    ).toEqual('My custom message')
+  })
+
+  it('gets the correct ref element', async () => {
+    const ref = React.createRef<GdsDatepicker>()
+    const { container } = render(<Datepicker ref={ref} />)
+    await act(() => tick())
+
+    const gdsDatepicker = (await container?.querySelector(
+      getScopedTagName('gds-datepicker'),
+    )) as GdsDatepicker
+
+    expect(ref.current).toEqual(gdsDatepicker)
+  })
+})

package/src/lib/datepicker/datepicker.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+import { GdsDatePicker } from '@sebgroup/green-core'
+import Datepicker from './datepicker'
+
+type Story = StoryObj<typeof Datepicker>
+
+/**
+ * Date pickers are used when users need to enter a date. The user can enter the date as text, but the date picker also allows the user to select the date in a visual representation of a calendar.
+ */
+const meta: Meta<typeof Datepicker> = {
+  title: 'Components/Datepicker',
+  component: Datepicker,
+  argTypes: {},
+  parameters: {
+    componentIds: ['component-datepicker'],
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const Default: Story = {
+  args: {
+    label: 'Choose date',
+  },
+}
+
+/**
+ * To handle validation of the `Datepicker`, you can pass a `validator` object to the `Datepicker` component. The `validator` object should have a `validate` function that takes the `Datepicker` element as an argument and returns an array of the validity state and an optional validation message.
+ *
+ * ```tsx
+ * <Datepicker validator={{ validator: (el: GdsDatepicker) => {
+ *     // Put your custom validation logic
+ *      if (el.value !== 'correctValue') {
+ *        // And return a validator array
+ *        return [
+ *            {
+ *              badInput: true,
+ *              customError: true,
+ *              patternMismatch: true,
+ *              rangeOverflow: true,
+ *              rangeUnderflow: true,
+ *              stepMismatch: true,
+ *              tooLong: true,
+ *              tooShort: true,
+ *              typeMismatch: true,
+ *              valid: false,
+ *              valueMissing: true,
+ *            },
+ *            'My custom validation message',
+ *      ] : [ValidityState, string]
+ * }}} />
+ *
+ *
+ * ```
+ *
+ * For more information on validation in Green Core, see the [Form Validation](https://storybook.seb.io/latest/core/?path=/docs/docs-form-validation-documentation--docs) example.
+ */
+export const Validation: Story = {
+  args: {
+    label: 'Choose date',
+    validator: {
+      validate: (el: GdsDatePicker) => {
+        /** Put your custom validation logic */
+        if (el.value !== 'correctValue') {
+          /** And return a validator array */
+          return [
+            {
+              badInput: true,
+              customError: true,
+              patternMismatch: true,
+              rangeOverflow: true,
+              rangeUnderflow: true,
+              stepMismatch: true,
+              tooLong: true,
+              tooShort: true,
+              typeMismatch: true,
+              valid: false,
+              valueMissing: true,
+            },
+            'My custom validation message',
+          ]
+        }
+      },
+      disabled: true,
+    },
+    value: new Date(),
+    testId: 'test',
+    ref: React.createRef(),
+  },
+  render: (args) => <Datepicker {...args} />,
+}

package/src/lib/datepicker/datepicker.tsx

@@ -0,0 +1,195 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import { createComponent } from '@lit/react'
+
+import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/datepicker.component'
+import { GdsValidator } from '@sebgroup/green-core/components/form/form-control'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+
+GdsDatepicker.define()
+registerTransitionalStyles()
+
+export const CoreDatepicker = createComponent({
+  tagName: getScopedTagName('gds-datepicker'),
+  elementClass: GdsDatepicker,
+  events: { onchange: 'change' },
+  react: React,
+})
+
+export type DatepickerOptions = {
+  /**
+   * An array of dates that should be disabled in the calendar.
+   */
+  disabledDates?: Date[]
+
+  /**
+   * Whether to disable weekends in the calendar.
+   */
+  disabledWeekends?: boolean
+
+  /**
+   * Whether to hide the label above the input field.
+   */
+  hideLabel?: boolean
+
+  /**
+   * Validation state of the form control. Setting this to true triggers the invalid state of the control.
+   */
+  invalid?: boolean
+
+  /**
+   * Validate the form control element. Should return the validity state and an optional validation message.
+   */
+  validator?: GdsValidator
+
+  /**
+   * The label text displayed above the datepicker. This should always be set to a descriptive label.
+   */
+  label?: string
+
+  /**
+   * The maximum date that can be selected.
+   */
+  maxDate?: Date
+
+  /**
+   * The minimum date that can be selected.
+   */
+  minDate?: Date
+
+  /**
+   * Controls whether the datepicker popover is open.
+   */
+  open?: boolean
+
+  /**
+   * Callback function that is called when the value of the Datepicker changes.
+   */
+  onChange?: (value: any) => void
+
+  /**
+   * Sets the datepicker as a required field for forms.
+   */
+  required?: boolean
+
+  /**
+   * Whether to show a column of week numbers in the calendar.
+   */
+  showWeeks?: boolean
+
+  /**
+   * Whether to use the small variant of the datepicker field.
+   */
+  size?: 'small' | 'medium'
+
+  /**
+   * The test ID used for testing.
+   */
+  testId?: string
+
+  /**
+   * The Date value of the datepicker. This can be set to undefined to clear the datepicker.
+   * This can be a string if set via the value attribute in markup, or via the setAttribute DOM API.
+   */
+  value?: Date
+
+  /**
+   * The ref to the datepicker element.
+   */
+  ref?: React.Ref<GdsDatepicker>
+
+  /**
+   * The children of the datepicker.
+   */
+  children?: React.ReactNode
+
+  /**
+   * If the it will be possible to clear the selected date.
+   */
+  clearable?: boolean
+
+  /**
+   * Whether to hide the today button under the calendar.
+   */
+  hideTodayButton?: boolean
+
+  /**
+   * @deprecated Use `value` instead.
+   */
+  selectedDate?: Date
+
+  /**
+   * @deprecated Use `value` instead.
+   */
+  currentDate?: Date
+}
+
+export const Datepicker = forwardRef(
+  (
+    {
+      label = 'Date',
+      onChange,
+      minDate,
+      maxDate,
+      value,
+      showWeeks,
+      testId,
+      validator,
+      size,
+      selectedDate,
+      currentDate,
+      ...props
+    }: DatepickerOptions,
+    ref,
+  ) => {
+    if (currentDate && !value) value = currentDate
+    if (selectedDate && !value) value = selectedDate
+
+    const min = minDate
+      ? minDate
+      : new Date(new Date().getFullYear() - 10, 0, 1)
+    const max = maxDate
+      ? maxDate
+      : new Date(new Date().getFullYear() + 10, 0, 1)
+
+    const onChangeHandler = (e: any) => {
+      if (onChange) {
+        onChange(e.target.value)
+      }
+    }
+
+    const _ref = useRef<GdsDatepicker | null>(null)
+
+    useImperativeHandle(ref, () => _ref.current, [_ref])
+
+    useEffect(() => {
+      if (_ref?.current) {
+        _ref.current.validator = validator
+      }
+    }, [validator])
+
+    return (
+      <div className="form-group">
+        <CoreDatepicker
+          data-testid={testId}
+          label={label}
+          min={min}
+          max={max}
+          showWeekNumbers={showWeeks}
+          onchange={onChangeHandler}
+          value={value}
+          ref={_ref}
+          size={size === 'small' ? 'small' : 'large'}
+          {...props}
+        />
+      </div>
+    )
+  },
+)
+
+export default Datepicker

package/src/lib/datepicker/index.tsx

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

package/src/lib/dropdown/dropdown.mdx

@@ -0,0 +1,101 @@
+import { Controls, Canvas, Meta, Story, Markdown } from '@storybook/blocks'
+import { Dropdown } from './dropdown'
+import * as DropdownStories from './dropdown.stories';
+
+<Meta of={DropdownStories} />
+
+# Dropdown
+
+Dropdown Component
+
+<Canvas of={DropdownStories.Default} />
+
+## Options
+
+The dropdown options should be provided as an array of objects with label and value. When a user chooses an option the value will be selected and emitted to onChange.
+
+```typescript
+const options = [
+  { label: 'Select', value: null },
+  { label: 'Tacos', value: 'tacos' },
+  { label: 'Pizza', value: 'pizza' },
+  { label: 'Sushi', value: 'sushi' },
+]
+```
+
+Set the `value` prop to set the selected option/options. In multiple select mode, the value should be an array of values.
+
+By default, the dropdown will look for a label and value pair for the data. The following inputs can be set to alter the options if neccesary.
+
+<Markdown>
+  {`
+  | Input (attribute) | Description                                                          | Default |
+  | :---------------- | :------------------------------------------------------------------- | :------ |
+  | useValue          | Which key to use as value.                                           | \`value\` |
+  | display           | Which key to use as display value when selected and in options list. | \`label\` |
+  `}
+</Markdown>
+
+## Value Object
+
+Dropdown option values can even be an object, but note that it requires a `compareWith` function to uniquely identify each object. Eg:
+
+<Dropdown
+  label="Complex values"
+  options={[
+    { label: 'Tacos', value: { id: 'tacos', kitchen: 'mexican' } },
+    { label: 'Pizza', value: { id: 'pizza', kitchen: 'italian' } },
+    { label: 'Sushi', value: { id: 'sushi', kitchen: 'japanese' } },
+  ]}
+  compareWith={(meal1, meal2) => meal1.id === meal2.id}
+  onChange={(value) => console.log('OnChange', value)}
+/>
+
+```jsx
+<Dropdown
+  label="Complex values"
+  options={[
+    { label: 'Tacos', value: { id: 'tacos', kitchen: 'mexican' } },
+    { label: 'Pizza', value: { id: 'pizza', kitchen: 'italian' } },
+    { label: 'Sushi', value: { id: 'sushi', kitchen: 'japanese' } },
+  ]}
+  compareWith={(meal1, meal2) => meal1.id === meal2.id}
+  onChange={(value) => console.log('OnChange', value)}
+/>
+```
+
+## Texts and placeholder
+
+Custom texts can be set using the `texts` prop which takes an object with the following keys:
+
+<Markdown>
+  {`
+  | Key           | Type     | Description                                 |
+  | :------------ | :------- | :------------------------------------------ |
+  | \`placeholder\` | \`string\` | Text to display when no option is selected. |
+  `}
+</Markdown>
+
+<Canvas of={DropdownStories.TextAndPlaceholder} />
+
+## Option headings
+
+You can add an option heading by adding the `heading` property to the to the option object and set it to `true`.
+
+<Canvas of={DropdownStories.OptionHeadings} />
+
+## Multi select
+
+<Canvas of={DropdownStories.MultiSelect} />
+
+## Small dropdown
+
+Size can be controlled using the `size` prop. The default size is `medium`.
+
+Optionally, the label can also be hidden using the `hideLabel` prop.
+
+<Canvas of={DropdownStories.Small} />
+
+## Available props
+
+<Controls />

package/src/lib/dropdown/dropdown.spec.tsx

@@ -0,0 +1,28 @@
+import { act, render, RenderResult, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Dropdown, DropdownProps } from './dropdown'
+
+const tick = (t = 0) => new Promise<void>((r) => setTimeout(r, t))
+jest.setTimeout(50000)
+
+describe('Dropdown', () => {
+  let props: DropdownProps
+  let component: RenderResult
+  let options: HTMLElement[]
+  beforeEach(async () => {
+    props = {
+      options: [
+        { label: 'A', value: 1 },
+        { label: 'B', value: 2 },
+        { label: 'C', value: 3 },
+      ],
+    }
+    component = render(<Dropdown {...props} />)
+    await act(() => tick())
+  })
+  afterEach(() => component.unmount())
+  it('renders', () => {
+    expect(component.baseElement).toBeTruthy()
+  })
+})