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

package/src/lib/layout/flexbox/flexbox.mdx

@@ -0,0 +1,138 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Flexbox } from '../'
+import { Card } from '../../card/card'
+import * as FlexboxStories from './flexbox.stories';
+
+export const Template = (props) => (
+  <div className="custom-card-storybook">
+    <Styles />
+    <Flexbox {...props}>
+      <Card>1</Card>
+      <Card>2</Card>
+      <Card>3</Card>
+      <Card>4</Card>
+      <Card>5</Card>
+    </Flexbox>
+  </div>
+)
+
+export const Styles = () => (
+  <style>
+    {`
+    .custom-card-storybook .card{
+      border: 3px solid #007ac7;
+      margin: 1rem;
+      min-width: 8rem;
+    }
+    .custom-card-storybook .card p {
+      text-align:center;
+      font-weight: 500;
+      font-size: 1.1rem;
+    }
+  `}
+  </style>
+)
+
+<Meta of={FlexboxStories} />
+
+# Flexbox
+
+This is just a simple wrapper around the flexbox css properties. It is used to create a flex container and apply flex properties to its children.
+
+<Canvas of={FlexboxStories.Default} />
+
+### Space evenly
+
+<div className="custom-card-storybook">
+  <Flexbox justifyContent="around" alignItems="stretch">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+  </Flexbox>
+</div>
+
+### Flex-start
+
+<div className="custom-card-storybook">
+  <Flexbox justifyContent="start">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+  </Flexbox>
+</div>
+
+### Flex-center
+
+<div className="custom-card-storybook">
+  <Flexbox justifyContent="center">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+  </Flexbox>
+</div>
+
+### Flex-end
+
+
+<div className="custom-card-storybook">
+  <Flexbox justifyContent="end">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+  </Flexbox>
+</div>
+
+
+### Flex-direction - column
+
+<div className="custom-card-storybook">
+  <Flexbox flexDirection="column">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+  </Flexbox>
+</div>
+
+### Flex-direction - column-reverse
+
+<div className="custom-card-storybook">
+  <Flexbox flexDirection="column-reverse">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+  </Flexbox>
+</div>
+
+
+### Flex-wrap
+
+<div className="custom-card-storybook">
+  <Flexbox flexWrap="wrap">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+    <Card>4</Card>
+    <Card>5</Card>
+    <Card>6</Card>
+    <Card>7</Card>
+  </Flexbox>
+</div>
+
+
+### Flex-wrap-reverse
+
+<div className="custom-card-storybook">
+  <Flexbox flexWrap="wrap-reverse">
+    <Card>1</Card>
+    <Card>2</Card>
+    <Card>3</Card>
+    <Card>4</Card>
+    <Card>5</Card>
+    <Card>6</Card>
+    <Card>7</Card>
+  </Flexbox>
+</div>
+
+**Note** - Flexbox component supports breakpoints for `sm, md, lg, xl and xxl` which is part of the properties .
+
+<Controls />

package/src/lib/layout/flexbox/flexbox.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+
+import Flexbox, { FlexboxProps } from './flexbox'
+
+describe('Component: FlexBox', () => {
+  const flexboxProps: FlexboxProps = {
+    alignContent: 'start',
+    alignItems: 'start',
+    alignSelf: 'auto',
+    justifyContent: 'start',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+  }
+
+  it('Should render', () => {
+    render(<Flexbox>i am child</Flexbox>)
+    expect(screen.getByText('i am child'))
+  })
+
+  it('Should render props', () => {
+    render(<Flexbox {...flexboxProps}>i am child</Flexbox>)
+    const className: string = screen
+      .getByText('i am child')
+      .getAttribute('class') as string
+    expect(className).toBe(
+      'd-flex align-items-start align-content-start align-self-auto justify-content-start flex-column flex-wrap',
+    )
+  })
+
+  it('Should pass in custom classname', () => {
+    render(
+      <Flexbox className="customName" {...flexboxProps}>
+        i am child
+      </Flexbox>,
+    )
+    expect(screen.getByText('i am child').getAttribute('class')).toContain(
+      'customName',
+    )
+  })
+})

package/src/lib/layout/flexbox/flexbox.stories.tsx

@@ -0,0 +1,46 @@
+import { Flexbox } from '../'
+import { Card } from '../../card/card'
+
+const Template = (props) => (
+  <div className="custom-card-storybook">
+    <Styles />
+    <Flexbox {...props}>
+      <Card>1</Card>
+      <Card>2</Card>
+      <Card>3</Card>
+      <Card>4</Card>
+      <Card>5</Card>
+    </Flexbox>
+  </div>
+)
+
+const Styles = () => (
+  <style>
+    {`
+    .custom-card-storybook .card{
+      border: 3px solid #007ac7;
+      margin: 1rem;
+      min-width: 8rem;
+    }
+    .custom-card-storybook .card p {
+      text-align:center;
+      font-weight: 500;
+      font-size: 1.1rem;
+    }
+  `}
+  </style>
+)
+
+export default {
+  title: 'Components/Layout/Flexbox',
+  component: Flexbox,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Flexbox',
+
+  args: {
+    justifyContent: 'between',
+  },
+}

package/src/lib/layout/flexbox/flexbox.tsx

@@ -0,0 +1,70 @@
+import { HTMLProps, PropsWithChildren, useLayoutEffect, useState } from 'react'
+
+import {
+  AlignContentType,
+  AlignType,
+  FlexDirectionType,
+  FlexWrapType,
+  JustifyContentType,
+} from './types'
+
+export interface FlexboxProps extends HTMLProps<HTMLDivElement> {
+  alignContent?: AlignContentType
+  alignItems?: AlignType
+  alignSelf?: AlignType | 'auto'
+  justifyContent?: JustifyContentType
+  flexDirection?: FlexDirectionType
+  flexWrap?: FlexWrapType
+  className?: string
+}
+
+export const Flexbox = ({
+  alignContent,
+  alignItems,
+  alignSelf,
+  children,
+  justifyContent,
+  flexDirection,
+  flexWrap,
+  className,
+  ...props
+}: PropsWithChildren<FlexboxProps>) => {
+  const [classes, setClasses] = useState<string[]>(['d-flex'])
+  const [flexClassName, setFlexClassName] = useState<string>('d-flex')
+
+  // // update className when classes change
+  useLayoutEffect(() => {
+    const newClassName = classes.join(' ')
+    if (newClassName !== flexClassName) setFlexClassName(newClassName)
+  }, [classes, flexClassName])
+
+  // // update classes when props change
+  useLayoutEffect(() => {
+    const newClasses = ['d-flex']
+    alignItems && newClasses.push(`align-items-${alignItems}`)
+    alignContent && newClasses.push(`align-content-${alignContent}`)
+    alignSelf && newClasses.push(`align-self-${alignSelf}`)
+    justifyContent && newClasses.push(`justify-content-${justifyContent}`)
+    flexDirection && newClasses.push(`flex-${flexDirection}`)
+    flexWrap && newClasses.push(`flex-${flexWrap}`)
+    className && newClasses.push(className)
+
+    setClasses(newClasses)
+  }, [
+    alignContent,
+    alignItems,
+    alignSelf,
+    justifyContent,
+    flexDirection,
+    flexWrap,
+    className,
+  ])
+
+  return (
+    <div className={flexClassName} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export default Flexbox

package/src/lib/layout/flexbox/types.ts

@@ -0,0 +1,153 @@
+export type AlignContentType =
+  | 'start'
+  | 'between'
+  | 'center'
+  | 'stretch'
+  | 'around'
+  | 'end'
+  | 'sm-start'
+  | 'sm-between'
+  | 'sm-center'
+  | 'sm-stretch'
+  | 'sm-around'
+  | 'sm-end'
+  | 'md-start'
+  | 'md-between'
+  | 'md-center'
+  | 'md-stretch'
+  | 'md-around'
+  | 'md-end'
+  | 'lg-start'
+  | 'lg-between'
+  | 'lg-center'
+  | 'lg-stretch'
+  | 'lg-around'
+  | 'lg-end'
+  | 'xl-start'
+  | 'xl-between'
+  | 'xl-center'
+  | 'xl-stretch'
+  | 'xl-around'
+  | 'xl-end'
+  | 'xxl-start'
+  | 'xxl-between'
+  | 'xxl-center'
+  | 'xxl-stretch'
+  | 'xxl-around'
+  | 'xxl-end'
+
+export type AlignType =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'baseline'
+  | 'stretch'
+  | 'sm-start'
+  | 'sm-end'
+  | 'sm-center'
+  | 'sm-baseline'
+  | 'sm-stretch'
+  | 'md-start'
+  | 'md-end'
+  | 'md-center'
+  | 'md-baseline'
+  | 'md-stretch'
+  | 'lg-start'
+  | 'lg-end'
+  | 'lg-center'
+  | 'lg-baseline'
+  | 'lg-stretch'
+  | 'xl-start'
+  | 'xl-end'
+  | 'xl-center'
+  | 'xl-baseline'
+  | 'xl-stretch'
+  | 'xxl-start'
+  | 'xxl-end'
+  | 'xxl-center'
+  | 'xxl-baseline'
+  | 'xxl-stretch'
+
+export type JustifyContentType =
+  | 'start'
+  | 'between'
+  | 'center'
+  | 'evenly'
+  | 'around'
+  | 'end'
+  | 'sm-start'
+  | 'sm-between'
+  | 'sm-center'
+  | 'sm-evenly'
+  | 'sm-around'
+  | 'sm-end'
+  | 'md-start'
+  | 'md-between'
+  | 'md-center'
+  | 'md-evenly'
+  | 'md-around'
+  | 'md-end'
+  | 'lg-start'
+  | 'lg-between'
+  | 'lg-center'
+  | 'lg-evenly'
+  | 'lg-around'
+  | 'lg-end'
+  | 'xl-start'
+  | 'xl-between'
+  | 'xl-center'
+  | 'xl-evenly'
+  | 'xl-around'
+  | 'xl-end'
+  | 'xxl-start'
+  | 'xxl-between'
+  | 'xxl-center'
+  | 'xxl-evenly'
+  | 'xxl-around'
+  | 'xxl-end'
+
+export type FlexDirectionType =
+  | 'row'
+  | 'row-reverse'
+  | 'column'
+  | 'column-reverse'
+  | 'sm-row'
+  | 'sm-row-reverse'
+  | 'sm-column'
+  | 'sm-column-reverse'
+  | 'md-row'
+  | 'md-row-reverse'
+  | 'md-column'
+  | 'md-column-reverse'
+  | 'lg-row'
+  | 'lg-row-reverse'
+  | 'lg-column'
+  | 'lg-column-reverse'
+  | 'xl-row'
+  | 'xl-row-reverse'
+  | 'xl-column'
+  | 'xl-column-reverse'
+  | 'xxl-row'
+  | 'xxl-row-reverse'
+  | 'xxl-column'
+  | 'xxl-column-reverse'
+
+export type FlexWrapType =
+  | 'nowrap'
+  | 'wrap'
+  | 'wrap-reverse'
+  | 'sm-nowrap'
+  | 'sm-wrap'
+  | 'sm-wrap-reverse'
+  | 'md-nowrap'
+  | 'md-wrap'
+  | 'md-wrap-reverse'
+  | 'lg-nowrap'
+  | 'lg-wrap'
+  | 'lg-wrap-reverse'
+  | 'xl-nowrap'
+  | 'xl-wrap'
+  | 'xl-wrap-reverse'
+  | 'xxl-nowrap'
+  | 'xxl-wrap'
+  | 'xxl-wrap-reverse'

package/src/lib/layout/index.ts

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

package/src/lib/link/index.tsx

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

package/src/lib/link/link.mdx

@@ -0,0 +1,50 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import Link from './link'
+import { createComponent } from '@lit/react'
+import { IconArrowRight } from '../../../../../dist/libs/core/src/components/icon/icons/arrow-right.js'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import * as LinkStories from './link.stories';
+
+export const GdsIconArrowRight = createComponent({
+  tagName: getScopedTagName('gds-icon-arrow-right'),
+  elementClass: IconArrowRight,
+  react: React,
+})
+
+export const Template = ({ ...props }) => <Link {...props} />
+
+<Meta of={LinkStories} />
+
+# Link
+
+Simple link component
+
+<Canvas of={LinkStories.Default} />
+
+
+## Link on backgrounds
+
+Links will by default have their color adjusted and use the color which gives best contrast against background of immediate parent.
+Currently, it works with all the intent colors using the pattern \*-\{intent} e.g. bg-info, alert-success, alert-danger etc.
+
+<Canvas of={LinkStories.OnBackground} />
+
+
+## Style links as button
+
+Sometimes you want to use links but style them as buttons, just add the class button and optionally a variant like primary or ghost and voilà -
+now you've got a link which looks and behaves like a button!
+
+<Canvas of={LinkStories.AsButton} />
+
+
+## Secondary link (Dark grey)
+
+The secondary link is mostly used when the link is a stand alone, but the blue link can also be used there.
+
+<Canvas of={LinkStories.Secondary} />
+
+
+### Available props
+
+<Controls />

package/src/lib/link/link.spec.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+
+import Link from './link'
+
+describe('Link', () => {
+  it('renders text', () => {
+    render(<Link>Foo</Link>)
+    expect(screen.getByText('Foo')).toBeVisible()
+  })
+  it('renders href', () => {
+    render(<Link href="https://test.com/">Foo</Link>)
+    const link: HTMLAnchorElement = screen.getByText('Foo')
+    expect(link.href).toEqual('https://test.com/')
+  })
+  it('renders role', () => {
+    render(
+      <Link href="https://test.com/" role="menuitem">
+        Foo
+      </Link>,
+    )
+    const link: HTMLAnchorElement = screen.getByText('Foo')
+    expect(link.getAttribute('role')).toEqual('menuitem')
+  })
+  it('renders boolean button prop', () => {
+    render(<Link button>Foo</Link>)
+    const link: HTMLAnchorElement = screen.getByText('Foo')
+    expect(link.className).toEqual('button')
+  })
+  it('renders named button prop', () => {
+    render(<Link button="ghost">Foo</Link>)
+    const link: HTMLAnchorElement = screen.getByText('Foo')
+    expect(link.className).toEqual('button ghost')
+  })
+  it('sets role button', () => {
+    render(<Link button>Foo</Link>)
+    const link: HTMLAnchorElement = screen.getByText('Foo')
+    expect(link.getAttribute('role')).toEqual('button')
+  })
+  it('renders boolean secondary prop', () => {
+    render(<Link secondary>Foo</Link>)
+    const link: HTMLAnchorElement = screen.getByText('Foo')
+    expect(link.className).toEqual('link gds-link-arrow')
+  })
+})

package/src/lib/link/link.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { createComponent } from '@lit/react'
+
+import { IconArrowRight } from '@sebgroup/green-core/components/icon/icons/arrow-right.js'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import Link from './link'
+
+const GdsIconArrowRight = createComponent({
+  tagName: getScopedTagName('gds-icon-arrow-right'),
+  elementClass: IconArrowRight,
+  react: React,
+})
+
+const Template = ({ ...props }) => <Link {...props} />
+
+export default {
+  title: 'Components/Link',
+  component: Link,
+
+  argTypes: {
+    button: {
+      options: [undefined, 'primary', 'secondary', 'ghost'],
+    },
+  },
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Link',
+
+  parameters: {
+    componentIds: ['component-inlinelinks'],
+  },
+
+  args: {
+    children: 'Go to seb.se',
+    href: 'https://seb.se',
+  },
+}
+
+export const OnBackground = {
+  render: () => (
+    <div>
+      <div className="bg-info p-4 my-4">
+        <Link href="https://seb.se" className="bg-info">
+          Go to seb.se in blue
+        </Link>
+      </div>
+
+      <div className="bg-success p-4 my-4">
+        <Link href="https://seb.se">Go to seb.se in green</Link>
+      </div>
+
+      <div className="bg-warning p-4 my-4">
+        <Link href="https://seb.se">Go to seb.se in yellow</Link>
+      </div>
+
+      <div className="bg-danger p-4 my-4">
+        <Link href="https://seb.se">Go to seb.se in red</Link>
+      </div>
+    </div>
+  ),
+}
+
+export const AsButton = {
+  render: () => (
+    <div>
+      <Link button href="https://seb.se">
+        Go to seb.se as default button
+      </Link>
+      <Link button="primary" href="https://seb.se">
+        Go to seb.se as primary button
+      </Link>
+      <Link button="ghost" href="https://seb.se">
+        Go to seb.se as ghost button
+      </Link>
+    </div>
+  ),
+}
+
+export const Secondary = {
+  render: () => (
+    <div>
+      <Link secondary href="#">
+        Go to page
+        <GdsIconArrowRight />
+      </Link>
+    </div>
+  ),
+}

package/src/lib/link/link.tsx

@@ -0,0 +1,34 @@
+import { HTMLProps, PropsWithChildren } from 'react'
+import classNames from 'classnames'
+
+import { ButtonVariant } from '@sebgroup/extract'
+
+interface LinkProps extends HTMLProps<HTMLAnchorElement> {
+  button?: boolean | ButtonVariant
+  secondary?: boolean
+}
+
+export const Link = ({
+  button,
+  secondary,
+  children,
+  className,
+  role,
+  ...otherProps
+}: PropsWithChildren<LinkProps>) => {
+  const linkClassName = classNames(className, { button: button }, button, {
+    'link gds-link-arrow': secondary,
+  })
+
+  return (
+    <a
+      className={linkClassName}
+      role={button ? 'button' : role}
+      {...otherProps}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default Link

package/src/lib/list/index.ts

@@ -0,0 +1,2 @@
+export * from './list'
+export * as ValueList from './valueList'

package/src/lib/list/list.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import List from './list'
+import * as ListStories from './list.stories';
+
+export const Template = ({ children, ...props }) => (
+  <List {...props}>{children}</List>
+)
+
+export const TableListTemplate = ({ ...props }) => <List {...props} />
+
+<Meta of={ListStories} />
+
+# List
+
+### Ordered List
+
+<Canvas of={ListStories.OrderedList} />
+
+<Canvas of={ListStories.UnorderedList} />
+
+### Check List
+
+<Canvas of={ListStories.CheckList} />