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

package/src/lib/dropdown/dropdown.stories.tsx

@@ -0,0 +1,144 @@
+/* eslint no-console: "off" */
+import React from 'react'
+
+import { Dropdown } from './dropdown'
+
+const Template = ({ align, ...props }) => <Dropdown {...props}></Dropdown>
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Dropdown',
+
+  parameters: {
+    componentIds: ['component-dropdown'],
+  },
+
+  args: {
+    options: [
+      {
+        label: 'Select',
+        value: null,
+      },
+      {
+        label: 'Tacos',
+        value: 'tacos',
+      },
+      {
+        label: 'Pizza',
+        value: 'pizza',
+      },
+      {
+        label: 'Sushi',
+        value: 'sushi',
+      },
+    ],
+
+    label: 'Dropdown label',
+    multiSelect: false,
+    searchable: false,
+
+    texts: {
+      selected: 'selected',
+      placeholder: 'Select',
+      close: 'Close',
+      optionsDescription: 'Options',
+    },
+
+    onChange: (value) => {
+      console.log('OnChange', value)
+    },
+
+    label: 'Dropdown label',
+    syncPopoverWidth: false,
+  },
+}
+
+export const TextAndPlaceholder = {
+  name: 'TextAndPlaceholder',
+  render: Template.bind({}),
+
+  args: {
+    texts: {
+      placeholder: 'Select me please!',
+    },
+    label: 'Awesome label!!',
+    informationLabel: 'Awesome informationLabel!!',
+    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),
+  },
+}
+
+export const OptionHeadings = {
+  name: 'OptionHeadings',
+  render: Template.bind({}),
+
+  args: {
+    label: 'Option headings',
+    options: [
+      { label: 'Lunch', heading: true },
+      { label: 'Tacos', value: 'tacos' },
+      { label: 'Pizza', value: 'pizza' },
+      { label: 'Sushi', value: 'sushi' },
+      { label: 'Dinner', heading: true },
+      { label: 'Burger', value: 'burger' },
+      { label: 'Pasta', value: 'pasta' },
+      { label: 'Ramen', value: 'ramen' },
+    ],
+  },
+}
+
+export const MultiSelect = {
+  name: 'MultiSelect',
+  render: Template.bind({}),
+
+  args: {
+    label: 'Multi Select',
+    multiSelect: true,
+    options: [
+      { label: 'Tacos', value: 'tacos' },
+      { label: 'Pizza', value: 'pizza' },
+      { label: 'Sushi', value: 'sushi' },
+    ],
+  },
+}
+
+export const Small = {
+  name: 'Small',
+  render: Template.bind({}),
+  args: {
+    label: 'Small dropdown',
+    size: 'small',
+    hideLabel: true,
+    options: [
+      { label: 'Tacos', value: 'tacos' },
+      { label: 'Pizza', value: 'pizza' },
+      { label: 'Sushi', value: 'sushi' },
+    ],
+  },
+}
+
+export const WithValidation = {
+  render: Template.bind({}),
+  args: {
+    label: 'Dropdown with validation',
+    options: [
+      { label: 'Tacos', value: 'tacos' },
+      { label: 'Pizza', value: 'pizza' },
+      { label: 'Sushi', value: 'sushi' },
+    ],
+    validator: {
+      message: 'This is an error message',
+      indicator: 'error',
+    },
+  },
+}

package/src/lib/dropdown/dropdown.tsx

@@ -0,0 +1,188 @@
+import React from 'react'
+import { createComponent } from '@lit/react'
+
+import {
+  GdsDropdown,
+  GdsOption,
+} from '@sebgroup/green-core/components/dropdown/dropdown.component'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+import { CoreMenuHeading } from '../context-menu/context-menu'
+import { IconTriangleExclamation } from '../icon/icons/IconTriangleExclamation'
+
+export type CompareWith<T = any> = (o1: T, o2: T) => boolean
+export type SearchFilter<T = any> = (search: string, value: T) => boolean
+export type DropdownPlacements = 'bottom-start' | 'top-start'
+export type OnChange<T = any> = (value: T) => void
+
+export type IndicatorType = 'success' | 'error' | 'info'
+export type ValidatorType = 'Required' | 'Email'
+
+export interface ValidatorRules {
+  type: ValidatorType
+  custom?: () => string | undefined
+}
+
+export interface IValidator {
+  message: string
+  indicator: IndicatorType
+  rules?: ValidatorRules
+}
+
+export interface DropdownArgs {
+  compareWith?: CompareWith
+  display?: string // option key to display
+  id?: string
+  informationLabel?: string
+  label?: string
+  multiSelect?: boolean
+  options: DropdownOption[]
+  searchFilter?: SearchFilter
+  searchable?: boolean
+  texts?: DropdownTexts
+  useValue?: string // option key to use as value
+  validator?: IValidator
+  value?: any
+
+  /** Force width of the popover to match trigger */
+  syncPopoverWidth?: boolean
+
+  /** Size of the dropdown trigger */
+  size?: 'small' | 'medium'
+
+  /** Hide the label */
+  hideLabel?: boolean
+
+  /** Max height of the dropdown */
+  maxHeight?: number
+
+  /** Whether to disable the mobile styles */
+  disableMobileStyles?: boolean
+
+  /** Event handler for when the dropdown is opened or closed */
+  onGdsUiState?: (e: CustomEvent) => void
+}
+export interface DropdownTexts {
+  placeholder?: string
+}
+export interface DropdownOption {
+  label?: string
+  value?: any
+  selected?: boolean
+  heading?: boolean
+  [key: string]: any
+}
+
+GdsDropdown.define()
+registerTransitionalStyles()
+
+export const CoreDropdown = createComponent({
+  tagName: getScopedTagName('gds-dropdown'),
+  elementClass: GdsDropdown,
+  events: { onChange: 'change', onGdsUiState: 'gds-ui-state' },
+  react: React,
+})
+
+export const CoreOption = createComponent({
+  tagName: getScopedTagName('gds-option'),
+  elementClass: GdsOption,
+  react: React,
+})
+
+export interface DropdownProps extends DropdownArgs {
+  onChange?: OnChange
+  required?: boolean
+}
+
+export const Dropdown = ({
+  compareWith,
+  display = 'label',
+  id,
+  informationLabel,
+  label,
+  multiSelect,
+  onChange,
+  options,
+  searchFilter,
+  searchable,
+  texts,
+  useValue = 'value',
+  validator,
+  value,
+  syncPopoverWidth,
+  disableMobileStyles,
+  onGdsUiState,
+  required,
+  ...props
+}: DropdownProps) => {
+  const handleOnChange = (e: any) => {
+    if ('value' in e.detail) {
+      onChange?.(e.detail.value)
+    }
+  }
+
+  // These adapter functions are used to maintain backwards compatibility with the old interface
+  const compareWithAdapter = (o1: DropdownOption, o2: DropdownOption) => {
+    const compareFn = compareWith || ((a, b) => a === b)
+    return compareFn(o1, o2)
+  }
+
+  const searchFilterAdapter = (q: string, o: GdsOption) => {
+    if (searchFilter) return searchFilter(q, o.value[useValue])
+    else
+      return ((q: string, o: GdsOption) =>
+        o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o)
+  }
+
+  return (
+    <div className="form-group">
+      <CoreDropdown
+        id={id}
+        label={label}
+        searchable={searchable}
+        multiple={multiSelect}
+        onChange={handleOnChange}
+        invalid={validator?.indicator === 'error'}
+        compareWith={compareWithAdapter}
+        value={value}
+        searchFilter={searchFilterAdapter}
+        syncPopoverWidth={syncPopoverWidth}
+        size={props.size}
+        hideLabel={props.hideLabel}
+        maxHeight={props.maxHeight}
+        disableMobileStyles={disableMobileStyles}
+        required={required}
+        onGdsUiState={(e: Event) => onGdsUiState?.(e as CustomEvent)}
+      >
+        {informationLabel && <span slot="sub-label">{informationLabel}</span>}
+        {validator && (
+          <div slot="message" style={{ display: 'flex', gap: '0.25rem' }}>
+            {validator.indicator === 'error' && (
+              <IconTriangleExclamation></IconTriangleExclamation>
+            )}
+            {validator.message}
+          </div>
+        )}
+        <CoreOption isPlaceholder aria-hidden>
+          {texts?.placeholder || 'Select'}
+        </CoreOption>
+        {options.map((option) => {
+          if (option.heading) {
+            return (
+              <CoreMenuHeading key={option.label}>
+                {option[display]}
+              </CoreMenuHeading>
+            )
+          }
+          return (
+            <CoreOption key={option[useValue]} value={option[useValue]}>
+              {option[display]}
+            </CoreOption>
+          )
+        })}
+      </CoreDropdown>
+    </div>
+  )
+}
+
+export default Dropdown

package/src/lib/dropdown/index.tsx

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

package/src/lib/filter-chips/filter-chip.mdx

@@ -0,0 +1,52 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import { FilterChips, FilterChip } from './filter-chips'
+import * as FilterChipStories from './filter-chip.stories'
+
+<Meta of={FilterChipStories} />
+
+# Filter Chips
+
+[Source code](https://github.com/seb-oss/green/tree/main/libs/react/src/lib/filter-chips)
+&nbsp;|&nbsp;
+[Usage guidelines](https://designlibrary.sebgroup.com/components/filter-chip)
+
+## Importing the component
+
+To use the component, import `FilterChips` and `FilterChip` like this:
+
+```jsx
+import {
+  FilterChips,
+  FilterChip,
+} from '@sebgroup/green-react/src/lib/filter-chips'
+
+// Use as JSX element in your app
+return (
+  <FilterChips value="division" label="Select a filter category">
+    <FilterChip value="all">All</FilterChip>
+    <FilterChip value="top-news">Top news</FilterChip>
+    <FilterChip value="division">Division</FilterChip>
+    <FilterChip value="global">Global</FilterChip>
+    <FilterChip value="country">Country</FilterChip>
+    <FilterChip value="lcfi">
+      Large Corporate & Financial Institutions
+    </FilterChip>
+  </FilterChips>
+)
+```
+
+<FilterChips value="division" label="Select a filter category">
+  <FilterChip value="all">All</FilterChip>
+  <FilterChip value="top-news">Top news</FilterChip>
+  <FilterChip value="division">Division</FilterChip>
+  <FilterChip value="global">Global</FilterChip>
+  <FilterChip value="country">Country</FilterChip>
+  <FilterChip value="lcfi">Large Corporate & Financial Institutions</FilterChip>
+</FilterChips>
+
+
+**Note:** It is important to remember to set the label attribute. Omitting it will cause poor accessibility for screen reader useSharedState. Internally in the component, the label attribute will be used to set `aria-label` for the appropriate element.
+
+## 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-filter-chips--page)

package/src/lib/filter-chips/filter-chip.stories.tsx

@@ -0,0 +1,32 @@
+import { FilterChip, FilterChips } from './filter-chips'
+
+const Template = ({ children, ...props }) => (
+  <FilterChips {...props}>{children}</FilterChips>
+)
+
+export default {
+  title: 'Components/Filter Chips',
+  component: FilterChips,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Filter Chips',
+
+  parameters: {
+    componentIds: ['component-filterchips'],
+  },
+
+  args: {
+    children: [
+      <FilterChip value="all">All</FilterChip>,
+      <FilterChip value="top-news">Top news</FilterChip>,
+      <FilterChip value="division">Division</FilterChip>,
+      <FilterChip value="global">Global</FilterChip>,
+      <FilterChip value="country">Country</FilterChip>,
+      <FilterChip value="lcfi">
+        Large Corporate & Financial Institutions
+      </FilterChip>,
+    ],
+  },
+}

package/src/lib/filter-chips/filter-chips.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+import { createComponent } from '@lit/react'
+
+import {
+  GdsFilterChip,
+  GdsFilterChips,
+} from '@sebgroup/green-core/components/filter-chips/filter-chips.component'
+import { register as registerTranistionalStyles } from '@sebgroup/green-core/components/filter-chips/filter-chips.trans.styles.js'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+
+GdsFilterChips.define()
+registerTranistionalStyles()
+
+export const FilterChips = createComponent({
+  tagName: getScopedTagName('gds-filter-chips'),
+  elementClass: GdsFilterChips,
+  react: React,
+})
+
+export const FilterChip = createComponent({
+  tagName: getScopedTagName('gds-filter-chip'),
+  elementClass: GdsFilterChip,
+  react: React,
+})

package/src/lib/filter-chips/index.tsx

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

package/src/lib/form/button/button.mdx

@@ -0,0 +1,69 @@
+import { Controls, Meta, Story, Canvas } from '@storybook/blocks'
+import Button from './button'
+import * as ButtonStories from './button.stories';
+
+export const Template = ({ children, ...props }) => (
+  <Button {...props}>{children}</Button>
+)
+
+<Meta of={ButtonStories} />
+
+# Buttons
+
+Simple Button Component
+
+<Canvas of={ButtonStories.Default} />
+
+#
+
+## Types
+
+Specifying a type will cause the button to automatically render the appropriate variant for that type of button.
+
+<Button type="button">Button Type</Button>
+<Button type="submit">Submit Type</Button>
+<Button type="reset">Reset Type</Button>
+
+
+## Variants
+
+Variant can also be specified explicitly.
+
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="tertiary">Tertiary</Button>
+<Button variant="ghost">Ghost</Button>
+
+
+## Sizes
+
+<Button>Default</Button>
+<Button size="small">Small</Button>
+<Button size="large">Large</Button>
+
+
+## Close button
+
+When using the close button variant, take special care to provide an appropriate label!
+
+
+<Button variant="close" aria-label="Close" />
+
+
+## Disabled button
+
+Buttons can be disabled by setting the `disabled` prop. In general, this should be strictly
+avoided though. Rather than using disabled buttons, you should allow the user to click the
+button and and instead provide an explanation of why the action is not available.
+
+
+<Button variant="primary" disabled>Primary Button</Button>
+
+<Button variant="secondary" disabled>Secondary Button</Button>
+
+<Button variant="ghost" disabled>Ghost Button</Button>
+
+
+## Properties
+
+<Controls />

package/src/lib/form/button/button.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import Button from './button'
+
+describe('Button', () => {
+  it('renders', () => {
+    render(<Button>Hello</Button>)
+
+    expect(screen.getByRole('button').textContent).toEqual('Hello')
+  })
+  it('sets type', () => {
+    render(<Button type="submit">Hello</Button>)
+
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+  })
+  it('defaults to button type', () => {
+    render(<Button>Hello</Button>)
+
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'button')
+  })
+  it('sets variant', () => {
+    render(<Button variant="ghost">Hello</Button>)
+
+    expect(screen.getByRole('button')).toHaveClass('ghost')
+  })
+
+  it('ref becomes button element', () => {
+    const ref = React.createRef<HTMLButtonElement>()
+    render(
+      <Button variant="primary" ref={ref}>
+        Label
+      </Button>,
+    )
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+  })
+})

package/src/lib/form/button/button.stories.tsx

@@ -0,0 +1,23 @@
+import Button from './button'
+
+const Template = ({ children, ...props }) => (
+  <Button {...props}>{children}</Button>
+)
+
+export default {
+  title: 'Components/Form/Button',
+  component: Button,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Button',
+
+  parameters: {
+    componentIds: ['component-button'],
+  },
+
+  args: {
+    children: 'Button',
+  },
+}

package/src/lib/form/button/button.tsx

@@ -0,0 +1,67 @@
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+} from 'react'
+import classNames from 'classnames'
+
+import { ButtonSize, ButtonVariant } from '@sebgroup/extract'
+
+export interface ButtonProps
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  /** Button styling. Available options: 'primary', 'secondary', 'ghost' and 'tertiary'. */
+  variant?: ButtonVariant
+  /** Styling button as active or not */
+  active?: boolean
+  /** Button size. Available options: 'small' and 'large'. */
+  size?: ButtonSize
+  /** Renders as a `data-testid` attribute on the `<button>` element, useful in testing scenarios. */
+  testId?: string
+}
+
+export const Button = forwardRef(
+  (
+    {
+      className,
+      variant,
+      active = false,
+      type = 'button',
+      size,
+      testId,
+      ...props
+    }: ButtonProps,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    const buttonClassName =
+      classNames(className, variant, size, {
+        active: active,
+      }) || undefined
+
+    return variant == 'close' ? (
+      <button
+        className={buttonClassName}
+        type={type}
+        aria-label={props['aria-label'] ?? 'Close'}
+        data-testid={testId}
+        ref={ref}
+        {...props}
+      >
+        <i></i>
+      </button>
+    ) : (
+      <button
+        className={buttonClassName}
+        type={type}
+        data-testid={testId}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+
+export default Button

package/src/lib/form/button/index.tsx

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

package/src/lib/form/buttonGroup/buttonGroup.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import { ButtonGroup } from './buttonGroup'
+import { Button } from '../button/button'
+import * as ButtonGroupStories from './buttonGroup.stories';
+
+export const Template = ({ children, ...props }) => (
+  <ButtonGroup {...props}>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+  </ButtonGroup>
+)
+
+<Meta of={ButtonGroupStories} />
+
+# Buttons aka button group
+
+Grouping Button Components
+
+<Canvas of={ButtonGroupStories.Default} />
+
+### Sizes
+
+You can add the class `size-sm` to the button group to make the buttons smaller.
+