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

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

@@ -0,0 +1,99 @@
+import React, { ReactNode, useEffect, useState } from 'react'
+
+import { AlertRibbonType } from '@sebgroup/extract'
+import { Check, SquareExclamation, SquareInfo } from '../icons'
+
+export interface AlertRibbonProps {
+  children: ReactNode
+  type?: AlertRibbonType
+  header?: ReactNode
+  footer?: ReactNode
+  isCloseable?: boolean
+  closeText?: string
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  role?: 'alert'
+  'aria-live'?: React.AriaAttributes['aria-live']
+  closeAriaLabel?: string
+}
+
+export function AlertRibbon({
+  type,
+  header,
+  footer,
+  children,
+  closeText,
+  isCloseable = true,
+  onClose,
+  role,
+  'aria-live': ariaLive,
+  closeAriaLabel,
+}: AlertRibbonProps) {
+  const [closeButton, setCloseButton] = useState<ReactNode>()
+  useEffect(() => {
+    if (!isCloseable) {
+      setCloseButton(null)
+    } else {
+      if (closeText)
+        setCloseButton(
+          <button className="close" aria-label={closeText}>
+            <i></i>
+          </button>,
+        )
+      else
+        setCloseButton(
+          <button className="close" aria-label="Close">
+            <i></i>
+          </button>,
+        )
+    }
+  }, [isCloseable, closeText])
+
+  const renderIcon = () => {
+    switch (type) {
+      case 'danger':
+      case 'warning':
+        return <SquareExclamation aria-hidden={true} />
+      case 'success':
+        return <Check aria-hidden={true} />
+      default:
+        return <SquareInfo aria-hidden={true} />
+    }
+  }
+
+  const renderHeader = () => {
+    if (!header) {
+      return null
+    }
+
+    return React.isValidElement(header) ? (
+      header
+    ) : (
+      <span className="header">{header}</span>
+    )
+  }
+
+  return (
+    <div className={`alert-ribbon ${type}`} role={role} aria-live={ariaLive}>
+      <i aria-hidden="true">{renderIcon()}</i>
+      <div className="alert-ribbon__content">
+        {renderHeader()}
+        <p>{children}</p>
+      </div>
+      {closeButton && (
+        <button
+          className="close"
+          type="button"
+          aria-label={closeAriaLabel ?? closeText ?? 'Close alert'}
+          onClick={(event) => {
+            onClose && onClose(event)
+          }}
+        >
+          <i></i>
+        </button>
+      )}
+      {footer && <div className="alert-ribbon__footer"> {footer} </div>}
+    </div>
+  )
+}
+
+export default AlertRibbon

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

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

package/src/lib/badge/badge.mdx

@@ -0,0 +1,31 @@
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/blocks'
+import Badge from './badge'
+import * as BadgeStories from './badge.stories';
+
+export const Template = ({ ...props }) => <Badge {...props} />
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+Simple Badge Component
+
+<Canvas of={BadgeStories.Default} />
+
+#
+
+### Types
+
+Badges are available in a number of different variants. Please note that the colors used in the examples below are not final yet.
+
+<Canvas of={BadgeStories.Default} />
+<Canvas of={BadgeStories.Info} />
+<Canvas of={BadgeStories.Success} />
+<Canvas of={BadgeStories.Warning} />
+<Canvas of={BadgeStories.Danger} />
+<Canvas of={BadgeStories.Light} />
+<Canvas of={BadgeStories.Dark} />
+
+# Props
+
+<ArgTypes />

package/src/lib/badge/badge.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+
+import Badge from './badge'
+
+describe('Badge', () => {
+  it('Should render badge with title', () => {
+    render(<Badge>title</Badge>)
+
+    expect(screen.getByText('title')).toBeDefined()
+  })
+  it('Should set badge type class', () => {
+    render(<Badge badgeType="success">title</Badge>)
+
+    expect(document.body.querySelector('.success')).not.toBeNull()
+  })
+  it('Should render close button', () => {
+    render(
+      <Badge badgeType="success" isCloseable>
+        title
+      </Badge>,
+    )
+
+    expect(screen.getByRole('button').classList.contains('close')).toBe(true)
+  })
+})

package/src/lib/badge/badge.stories.tsx

@@ -0,0 +1,112 @@
+import Badge from './badge'
+
+const Template = ({ ...props }) => <Badge {...props} />
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Default',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Default',
+    isCloseable: false,
+  },
+}
+
+export const Info = {
+  render: Template.bind({}),
+  name: 'Info',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Info',
+    badgeType: 'info',
+    isCloseable: false,
+  },
+}
+
+export const Success = {
+  render: Template.bind({}),
+  name: 'Success',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Success',
+    badgeType: 'success',
+    isCloseable: false,
+  },
+}
+
+export const Warning = {
+  render: Template.bind({}),
+  name: 'Warning',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Warning',
+    badgeType: 'warning',
+    isCloseable: false,
+  },
+}
+
+export const Danger = {
+  render: Template.bind({}),
+  name: 'Danger',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Danger',
+    badgeType: 'danger',
+    isCloseable: false,
+  },
+}
+
+export const Light = {
+  render: Template.bind({}),
+  name: 'Light',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Light',
+    badgeType: 'light',
+    isCloseable: false,
+  },
+}
+
+export const Dark = {
+  render: Template.bind({}),
+  name: 'Dark',
+
+  parameters: {
+    componentIds: ['component-badge'],
+  },
+
+  args: {
+    children: 'Dark',
+    badgeType: 'dark',
+    isCloseable: false,
+  },
+}

package/src/lib/badge/badge.tsx

@@ -0,0 +1,71 @@
+import React, { HTMLProps, ReactNode } from 'react'
+
+import { BadgeType } from '@sebgroup/extract'
+
+export interface BadgeProps extends HTMLProps<HTMLSpanElement> {
+  children?: ReactNode
+  badgeType?: BadgeType
+  isCloseable?: boolean
+  closeText?: string
+  customColor?: string
+  customBackgroundColor?: string
+}
+
+/**
+ * Renders a badge component.
+ *
+ * @param {React.ReactNode} props.children - The content of the badge.
+ * @param {string} props.badgeType - The type of the badge.
+ * @param {boolean} props.isCloseable - Indicates if the badge is closeable.
+ * @param {string} props.closeText - The text for the close button.
+ * @param {string} props.customColor - The custom color for the badge.
+ * @param {string} props.customBackgroundColor - The custom background color for the badge.
+ * @returns {React.ReactNode} The rendered badge component.
+ */
+export function Badge({
+  children,
+  badgeType,
+  isCloseable,
+  closeText,
+  customColor,
+  customBackgroundColor,
+  ...props
+}: BadgeProps) {
+  const [isClosed, setIsClosed] = React.useState<boolean>(false)
+  const [type, setType] = React.useState<BadgeType | ''>('')
+
+  React.useEffect(() => {
+    if (badgeType) {
+      setType(badgeType as BadgeType)
+    }
+
+    if (!!customColor || !!customBackgroundColor) {
+      setType('')
+    }
+  }, [badgeType, customColor, customBackgroundColor])
+
+  return !isClosed ? (
+    <span
+      {...props}
+      className={`badge ${type}`}
+      style={{
+        color: customColor,
+        backgroundColor: customBackgroundColor,
+      }}
+    >
+      <strong>{children}</strong>
+      {isCloseable && (
+        <button
+          type="button"
+          className="close"
+          onClick={() => setIsClosed(true)}
+        >
+          {closeText}
+          <i></i>
+        </button>
+      )}
+    </span>
+  ) : null
+}
+
+export default Badge

package/src/lib/badge/index.tsx

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

package/src/lib/breadcrumb/breadcrumb.mdx

@@ -0,0 +1,56 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Breadcrumb, BreadcrumbItem } from './breadcrumb'
+import * as BreadcrumbStories from './breadcrumb.stories';
+
+export const Template = () => (
+  <div className="card">
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <a href="">Home</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <a href="">Cart</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <a href="">Shopping</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem>Billing</BreadcrumbItem>
+    </Breadcrumb>
+  </div>
+)
+
+<Meta of={BreadcrumbStories} />
+
+# Breadcrumb
+
+Displays the path to the current resource using a hierarchy of links.
+
+<Story of={BreadcrumbStories.Default} />
+
+<br />
+
+<br />
+
+## Usage
+
+```typescript
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+} from '@sebgroup/green-react/src/lib/breadcrumbs'
+```
+
+```tsx
+<Breadcrumb>
+  <BreadcrumbItem>
+    <a href="/home">Home</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/home/cart">Cart</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/home/cart/shopping">Shopping</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>Billing</BreadcrumbItem>
+</Breadcrumb>
+```

package/src/lib/breadcrumb/breadcrumb.spec.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+
+import { Breadcrumb, BreadcrumbItem } from './breadcrumb'
+
+describe('Breadcrumb', () => {
+  it('Should render', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem>Item 1</BreadcrumbItem>
+        <BreadcrumbItem>Item 2</BreadcrumbItem>
+        <BreadcrumbItem>Item 3</BreadcrumbItem>
+      </Breadcrumb>,
+    )
+    expect(screen.getAllByText(/Item/)).toHaveLength(3)
+  })
+})

package/src/lib/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,32 @@
+import { Breadcrumb, BreadcrumbItem } from './breadcrumb'
+
+const Template = () => (
+  <div className="card">
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <a href="">Home</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <a href="">Cart</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <a href="">Shopping</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem>Billing</BreadcrumbItem>
+    </Breadcrumb>
+  </div>
+)
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Breadcrumb',
+
+  parameters: {
+    componentIds: ['component-breadcrumb'],
+  },
+}

package/src/lib/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,46 @@
+import React, { JSX, PropsWithChildren, ReactElement } from 'react'
+import classNames from 'classnames'
+
+export type BreadcrumbProps = {
+  className?: string
+}
+
+export type BreadcrumItembProps = JSX.IntrinsicElements['li']
+
+export const Breadcrumb: React.FC<PropsWithChildren<BreadcrumbProps>> = ({
+  children,
+  className,
+}) => {
+  return (
+    <ul className={classNames('breadcrumb', className)}>
+      {React.Children.map(
+        children as ReactElement,
+        (Child: ReactElement, childIndex: number) => {
+          return (
+            <React.Fragment key={childIndex}>
+              {Child}
+              {childIndex !== React.Children.count(children) - 1 && (
+                <BreadcrumbItem className="icon">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z"
+                      fill="#333333"
+                    />
+                  </svg>
+                </BreadcrumbItem>
+              )}
+            </React.Fragment>
+          )
+        },
+      )}
+    </ul>
+  )
+}
+
+export const BreadcrumbItem: React.FC<BreadcrumItembProps> = (props) => {
+  return <li {...props} />
+}

package/src/lib/breadcrumb/index.tsx

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

package/src/lib/card/card.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/blocks'
+import Card from './card'
+import Button from '../form/button/button'
+import Link from '../link/link'
+import * as CardStories from './card.stories';
+
+export const Template = ({ children, ...props }) => (
+  <Card {...props}>{children}</Card>
+)
+
+export const Header = () => (
+  <>
+    <h3>Card Headline</h3>
+    <Button variant="close">
+      <span className="sr-only">Close</span>
+      <i></i>
+    </Button>
+  </>
+)
+
+export const Footer = () => (
+  <>
+    <Link href="https://seb.se" className="button link">
+      Link
+    </Link>
+    <Button>Default button</Button>
+    <Button variant="primary">Primary</Button>
+  </>
+)
+
+<Meta of={CardStories} />
+
+# Cards
+
+A card is container for short content, related pieces of information, and action on a specific content.
+
+<Canvas of={CardStories.Default} />
+
+## Card without header
+
+<Card>
+  <p>
+    <strong>Not passing header prop, but creating it in body</strong>
+  </p>
+  <p class="mb-5">
+    Then you don't get the close button because it's styling is tied to the
+    header
+  </p>
+  <div>
+    <button class="primary">Primary button</button>
+  </div>
+</Card>
+
+## Headline and text content
+<Card header={<h3>Card one headline</h3>}>Card one content text</Card>
+<br /><br />
+<Card header={<h3>Card two headline</h3>} />
+
+## Card with button
+
+<Card header={<Header />} footer={<Footer />}>
+  Here is some content with link and two buttons footer
+</Card>
+
+## Props
+
+<ArgTypes />

package/src/lib/card/card.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+
+import Button from '../form/button/button'
+import Card from './card'
+
+describe('Card', () => {
+  const Header = () => <h3>Card Headline</h3>
+
+  const Footer = () => (
+    <>
+      <Button>Default button</Button>
+      <Button variant="primary">Primary</Button>
+    </>
+  )
+  it('renders', () => {
+    render(<Card>Hello</Card>)
+    expect(screen.getByText('Hello')).toBeDefined()
+  })
+  it('renders header, content and footer', () => {
+    render(
+      <Card header={<Header />} footer={<Footer />}>
+        Hello
+      </Card>,
+    )
+
+    expect(screen.getByRole('heading').textContent).toEqual('Card Headline')
+    expect(screen.getByText('Hello')).toBeDefined()
+    expect(screen.getAllByRole('button')[0].textContent).toContain(
+      'Default button',
+    )
+    expect(screen.getAllByRole('button')[1].textContent).toContain('Primary')
+  })
+  it('doesnt render header, content and footer', () => {
+    const { container } = render(<Card>Hello</Card>)
+
+    expect(container.querySelector('header')).toBeNull()
+    expect(container.querySelector('footer')).toBeNull()
+    expect(screen.getByText('Hello')).toBeDefined()
+  })
+})

package/src/lib/card/card.stories.tsx

@@ -0,0 +1,45 @@
+import Button from '../form/button/button'
+import Link from '../link/link'
+import Card from './card'
+
+const Template = ({ children, ...props }) => <Card {...props}>{children}</Card>
+
+const Header = () => (
+  <>
+    <h3>Card Headline</h3>
+    <Button variant="close">
+      <span className="sr-only">Close</span>
+      <i></i>
+    </Button>
+  </>
+)
+
+const Footer = () => (
+  <>
+    <Link href="https://seb.se" className="button link">
+      Link
+    </Link>
+    <Button>Default button</Button>
+    <Button variant="primary">Primary</Button>
+  </>
+)
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Card',
+
+  parameters: {
+    componentIds: ['component-card'],
+  },
+
+  args: {
+    header: <Header />,
+    footer: <Footer />,
+    children: 'Card content',
+  },
+}

package/src/lib/card/card.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+/* eslint-disable-next-line */
+export interface CardProps {
+  children?: ReactNode
+  header?: ReactNode
+  footer?: ReactNode
+}
+
+export function Card({ children, header, footer }: CardProps) {
+  return (
+    <section className="card">
+      {header && <header>{header}</header>}
+      {children}
+      {footer && <footer>{footer}</footer>}
+    </section>
+  )
+}
+
+export default Card

package/src/lib/card/index.tsx

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