@goodhood-web/ui 0.0.3 → 0.0.4

package/src/lib/Card/Card.utils.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { filterAllowedElements, findAllowedElement } from './Card.utils';
+
+describe('findAllowedElement', () => {
+  it('should find an allowed element among children', () => {
+    const children = [<div key="1" />, <React.Fragment key="2" />, <span key="3" />];
+    const result = findAllowedElement(children, React.Fragment);
+    expect(result).toBeDefined();
+    expect((result as React.ReactElement).type).toBe(React.Fragment);
+  });
+
+  it('should return undefined if no allowed elements are found', () => {
+    const children = [<div key={0} />, <span key={1} />];
+    expect(findAllowedElement(children, React.Fragment)).toBeUndefined();
+    expect(findAllowedElement(null, React.Fragment)).toBeUndefined();
+    expect(findAllowedElement(undefined, React.Fragment)).toBeUndefined();
+  });
+});
+
+describe('filterAllowedElements', () => {
+  let originalEnv: typeof process.env;
+
+  beforeEach(() => {
+    originalEnv = { ...process.env };
+  });
+
+  afterEach(() => {
+    process.env = originalEnv; // Restore original environment variables
+    jest.restoreAllMocks(); // Restore all mocks
+  });
+
+  it('should filter out disallowed elements', () => {
+    const children = [
+      <div key="1" />,
+      <React.Fragment key="2">Child</React.Fragment>,
+      <span key="3" />,
+    ];
+    const allowedElements = [React.Fragment];
+    const result = filterAllowedElements(children, allowedElements);
+    expect(result.length).toBe(1);
+    expect((result[0] as React.ReactElement).type).toBe(React.Fragment);
+  });
+
+  it('should return an empty array if no allowed elements are present', () => {
+    const children = [<div key={0} />, <span key={1} />];
+    const allowedElements = [React.Fragment];
+    const result = filterAllowedElements(children, allowedElements);
+    expect(result.length).toBe(0);
+  });
+});

package/src/lib/Card/Card.utils.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const isAllowedElement = (
+  element: React.ReactNode,
+  allowedElementsList: React.ElementType[],
+): boolean =>
+  React.isValidElement(element) &&
+  typeof element.type !== 'string' &&
+  allowedElementsList.includes(element.type);
+
+export const findAllowedElement = (
+  elements: React.ReactNode,
+  type: React.ElementType,
+): React.ReactNode =>
+  React.Children.toArray(elements).find((el) => isAllowedElement(el, [type]));
+
+export const filterAllowedElements = (
+  elements: React.ReactNode,
+  allowedElements: React.ElementType[],
+): React.ReactNode[] =>
+  React.Children.toArray(elements).filter((el) => {
+    return isAllowedElement(el, allowedElements);
+  });

package/src/lib/Card/CardBody/CardBody.module.scss

@@ -0,0 +1,4 @@
+.root {
+  padding: getSpacing('sm') 0;
+  color: inherit;
+}

package/src/lib/Card/CardBody/CardBody.spec.tsx

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+import CardBody from './CardBody';
+
+describe('CardBody', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <CardBody>
+        <p>render successfully</p>
+      </CardBody>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/Card/CardBody/CardBody.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CardBody from './CardBody';
+
+const meta: Meta<typeof CardBody> = {
+  component: CardBody,
+  title: 'Components/Card/CardBody',
+};
+export default meta;
+type Story = StoryObj<typeof CardBody>;
+
+const CardBodyComponent = () => {
+  return (
+    <>
+      <CardBody>
+        <p
+          style={{
+            color: '#201649',
+            fontFamily: 'sans-serif',
+            fontSize: '14px',
+            marginBottom: '16px',
+          }}
+        >
+          Warum hältst du den Inhalt für problematisch?
+        </p>
+        <div
+          style={{
+            border: 'solid 1px #A6A2B6',
+            borderRadius: '16px',
+            fontFamily: 'sans-serif',
+            padding: '16px',
+          }}
+        >
+          <p
+            style={{
+              color: '#201649',
+              fontFamily: 'sans-serif',
+              fontSize: '16px',
+              fontWeight: 500,
+            }}
+          >
+            Haustiere & Zubehör
+          </p>
+        </div>
+      </CardBody>
+      <CardBody>
+        <p
+          style={{
+            color: '#635C80',
+            fontFamily: 'sans-serif',
+            fontSize: '12px',
+            fontWeight: 500,
+            lineHeight: '16px',
+          }}
+        >
+          Mit Klick auf &quot;Absenden&quot; bestätigst du, in gutem Glauben davon
+          überzeugt zu sein, dass die in der Meldung enthaltenen Angaben und Anführungen
+          richtig und vollständig sind.
+        </p>
+        <p
+          style={{
+            color: '#635C80',
+            fontFamily: 'sans-serif',
+            fontSize: '12px',
+            fontWeight: 500,
+            lineHeight: '16px',
+          }}
+        >
+          Weitere Informationen zum Meldeprozess und Beschwerdegründen in den{' '}
+          <span
+            style={{
+              color: '#01819C',
+              fontFamily: 'sans-serif',
+              fontWeight: 700,
+            }}
+          >
+            Beitragsrichtlinien
+          </span>{' '}
+          und zur Verarbeitung personenbezogener Daten in den{' '}
+          <span
+            style={{
+              color: '#01819C',
+              fontFamily: 'sans-serif',
+              fontWeight: 700,
+            }}
+          >
+            Datenschutzbestimmungen
+          </span>
+          .
+        </p>
+      </CardBody>
+    </>
+  );
+};
+
+export const Primary: Story = {
+  argTypes: {
+    children: {
+      control: { readonly: true, type: 'string' },
+      description: `"children" prop is a versatile way to include various components and content within the CardBody, allowing you to customize and structure the content according to your needs.`,
+    },
+    className: {
+      control: { readonly: true, type: 'string' },
+      description: `"className" prop used to assign one or more CSS class names to the HTML element.`,
+    },
+  },
+  render: () => CardBodyComponent(),
+};

package/src/lib/Card/CardBody/CardBody.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+
+import styles from './CardBody.module.scss';
+import { CardBodyProps } from './CardBody.types';
+
+const CardBody = ({ children, className }: CardBodyProps) => (
+  <div className={clsx(styles.root, className)}>{children}</div>
+);
+export default CardBody;

package/src/lib/Card/CardBody/CardBody.types.ts

@@ -0,0 +1,4 @@
+export interface CardBodyProps {
+  children: React.ReactNode;
+  className?: string;
+}

package/src/lib/Card/CardHeader/CardHeader.module.scss

@@ -0,0 +1,12 @@
+.root {
+  display: flex;
+  align-items: center;
+  padding-bottom: getSpacing('md');
+  color: inherit;
+  gap: getSpacing('sm');
+}
+
+.title {
+  flex-grow: 1;
+  margin: 0;
+}

package/src/lib/Card/CardHeader/CardHeader.spec.tsx

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import { BaseButton, Icon } from '@goodhood-web/ui';
+
+import CardHeader from './CardHeader';
+
+describe('CardHeader', () => {
+  it('renders headline with default heading type', () => {
+    render(<CardHeader headline="Test Headline" />);
+    const heading = screen.getByRole('heading', { name: 'Test Headline' });
+    expect(heading).toBeInTheDocument();
+    expect(heading.tagName).toBe('H3');
+    expect(heading).toHaveTextContent('Test Headline');
+  });
+
+  it('renders left and right elements when provided', () => {
+    const leftElement = <Icon name="arrow_left" size="24" />;
+    const rightElement = (
+      <BaseButton
+        onClick={() => {
+          console.log('Right button clicked');
+        }}
+      >
+        Right Button
+      </BaseButton>
+    );
+
+    render(
+      <CardHeader
+        headline="Test Headline"
+        leftElement={leftElement}
+        rightElement={rightElement}
+      />,
+    );
+
+    expect(screen.getByRole('presentation')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Right Button' })).toBeInTheDocument();
+  });
+
+  it('does not render left or right elements if they are not allowed', () => {
+    const leftElement = <div>Unallowed Element</div>;
+    const rightElement = <span>Another Unallowed Element</span>;
+
+    render(
+      <CardHeader
+        headline="Test Headline"
+        leftElement={leftElement}
+        rightElement={rightElement}
+      />,
+    );
+
+    expect(screen.queryByText('Unallowed Element')).not.toBeInTheDocument();
+    expect(screen.queryByText('Another Unallowed Element')).not.toBeInTheDocument();
+  });
+
+  it('does not render elements that are not specified as allowed', () => {
+    const leftElement = <div data-testid="unallowed-left">Unallowed Left</div>;
+    const rightElement = <div data-testid="unallowed-right">Unallowed Right</div>;
+
+    render(
+      <CardHeader
+        headline="No Unallowed Elements"
+        leftElement={leftElement}
+        rightElement={rightElement}
+      />,
+    );
+
+    expect(screen.queryByTestId('unallowed-left')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('unallowed-right')).not.toBeInTheDocument();
+  });
+});

package/src/lib/Card/CardHeader/CardHeader.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BaseButton, Icon } from '@goodhood-web/ui';
+
+import CardHeader from './CardHeader';
+
+const meta: Meta<typeof CardHeader> = {
+  component: CardHeader,
+  title: 'Components/Card/CardHeader',
+};
+export default meta;
+type Story = StoryObj<typeof CardHeader>;
+
+const typesOptions = [
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'h7',
+  'h8',
+  'body-large',
+  'body-regular',
+  'body-semibold',
+  'body-italic',
+  'detail-medium',
+  'detail-bold',
+  'detail-upper-case',
+];
+
+const asOptions = ['h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8'];
+
+export const Primary: Story = {
+  argTypes: {
+    as: {
+      control: { type: 'select' },
+      defaultValue: { summary: 'h3' },
+      description: `'headerAs': An optional prop to specify the HTML tag (element) to be used for the header. If not provided, it defaults to the 'h3' specified in the type prop.`,
+      options: asOptions,
+    },
+    headline: {
+      defaultValue: { summary: '""' },
+      description: `'headline': This is the main text content of the header.`,
+    },
+    leftElement: {
+      control: { readonly: true, type: 'string' },
+      defaultValue: { summary: 'undefined' },
+      description: `'leftElement': prop in the CardHeader component can accept components, such as Icon and IconButton.`,
+    },
+    rightElement: {
+      control: { readonly: true, type: 'string' },
+      defaultValue: { summary: 'undefined' },
+      description: `'rightElement' props in the CardHeader component can accept components, such as Button.`,
+    },
+
+    type: {
+      control: { type: 'select' },
+      defaultValue: { summary: 'h3' },
+      description: `'type': A string that specifies the type of the headline (default is 'h3').`,
+      options: typesOptions,
+    },
+  },
+  args: {
+    as: 'h3',
+    headline: 'Headline',
+    leftElement: <Icon name="chevron_left" size="24" />,
+    rightElement: <BaseButton onClick={() => console.log('clicked')}>Action</BaseButton>,
+    type: 'h2',
+  },
+
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=6105%3A12944&mode=dev',
+    },
+  },
+};

package/src/lib/Card/CardHeader/CardHeader.tsx

@@ -0,0 +1,29 @@
+import { BaseButton, Icon, Typography } from '@goodhood-web/ui';
+
+import { filterAllowedElements } from '../Card.utils';
+
+import styles from './CardHeader.module.scss';
+import { CardHeaderProps } from './CardHeader.type';
+
+const CardHeader = ({
+  as,
+  headline,
+  leftElement,
+  rightElement,
+  type = 'h3',
+}: CardHeaderProps) => {
+  const currentLeftElement = filterAllowedElements(leftElement, [Icon, BaseButton]);
+  const currentRightElement = filterAllowedElements(rightElement, [BaseButton]);
+
+  return (
+    <header className={styles.root}>
+      {currentLeftElement && currentLeftElement}
+      <Typography type={type} as={as} className={styles.title}>
+        {headline}
+      </Typography>
+      {currentRightElement && currentRightElement}
+    </header>
+  );
+};
+
+export default CardHeader;

package/src/lib/Card/CardHeader/CardHeader.type.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactElement } from 'react';
+
+import { BaseButton, Icon } from '@goodhood-web/ui';
+
+import { TypographyProps } from '../../Typography/Typography.types';
+
+export type CardHeaderProps = {
+  as?: Exclude<TypographyProps['as'], 'h1' | 'p' | 'span'>;
+  headline: string;
+  // TODO Update to IconButton when it's ready
+  leftElement?: ReactElement<ComponentProps<typeof Icon | typeof BaseButton>>;
+  rightElement?: ReactElement<ComponentProps<typeof BaseButton>>;
+  type?: Exclude<TypographyProps['type'], 'h1'>;
+};

package/src/lib/ContentCreatorButton/ContentCreatorButton.module.scss

@@ -0,0 +1,13 @@
+.ccBtn {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  align-self: stretch;
+  padding: getSpacing('sm') getSpacing('lg');
+  border-color: transparent;
+  border-radius: mapGet($tokens, borderRadius, md);
+  background-color: getSemanticColor('surface', 'surfaceContainer');
+  color: getSemanticColor('surface', 'onSurface');
+  cursor: pointer;
+  font-size: 14px;
+}

package/src/lib/ContentCreatorButton/ContentCreatorButton.spec.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+
+import ContentCreatorButton from './ContentCreatorButton';
+
+describe('ContentCreatorButton', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <ContentCreatorButton onClick={() => console.log('clicked')}>
+        Render successfully
+      </ContentCreatorButton>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/ContentCreatorButton/ContentCreatorButton.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ContentCreatorButton from './ContentCreatorButton';
+
+const meta: Meta<typeof ContentCreatorButton> = {
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Text on the button',
+    },
+    onClick: { action: 'clicked', description: 'On click event callback' },
+  },
+  component: ContentCreatorButton,
+  title: 'Components/ContentCreatorButton',
+};
+export default meta;
+type Story = StoryObj<typeof ContentCreatorButton>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Neuen Beitrag erstellen',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=397%3A6149',
+    },
+  },
+};

package/src/lib/ContentCreatorButton/ContentCreatorButton.tsx

@@ -0,0 +1,35 @@
+import { useButton } from '@mui/base';
+import clsx from 'clsx';
+
+import BaseButton from '../BaseButton/BaseButton';
+import Typography from '../Typography/Typography';
+
+import styles from './ContentCreatorButton.module.scss';
+import { ContentCreatorButtonProps } from './ContentCreatorButton.types';
+
+const ContentCreatorButton = ({
+  children,
+  onClick,
+  ...baseButtonProps
+}: ContentCreatorButtonProps) => {
+  const { active, focusVisible } = useButton();
+
+  const classes = {
+    [styles['ccBtn--active']]: active,
+    [styles['ccBtn--focusVisible']]: focusVisible,
+  };
+
+  return (
+    <BaseButton
+      {...baseButtonProps}
+      className={clsx(styles.ccBtn, classes)}
+      onClick={onClick}
+    >
+      <Typography type="body-regular" as="span">
+        {children}
+      </Typography>
+    </BaseButton>
+  );
+};
+
+export default ContentCreatorButton;

package/{lib/ContentCreatorButton/ContentCreatorButton.types.d.ts → src/lib/ContentCreatorButton/ContentCreatorButton.types.ts}

@@ -1,5 +1,6 @@
 import { BaseButtonProps } from '../BaseButton/BaseButton';
+
 export interface ContentCreatorButtonProps extends BaseButtonProps {
-    children: string;
-    onClick: () => void;
+  children: string;
+  onClick: () => void;
 }

package/src/lib/Divider/Divider.module.scss

@@ -0,0 +1,10 @@
+.dividerContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dividerLine {
+  height: 1px;
+  flex-grow: 1;
+  background-color: getSemanticColor('outline', 'outlineVariant');
+}

package/src/lib/Divider/Divider.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+
+import Divider from './Divider';
+
+describe('Divider', () => {
+  it('should render with default full width', () => {
+    const { container } = render(<Divider />);
+
+    const dividerLine = container.querySelector('.dividerLine');
+
+    expect(dividerLine).not.toBeNull();
+    expect(dividerLine?.getAttribute('style')).toBe(
+      'margin-left: 0px; margin-right: 0px;',
+    );
+  });
+
+  it('should render with 8 offset on the left', () => {
+    const { container } = render(<Divider offsetLeft={8} />);
+
+    const dividerLine = container.querySelector('.dividerLine');
+
+    expect(dividerLine).not.toBeNull();
+    expect(dividerLine?.getAttribute('style')).toBe(
+      'margin-left: 8px; margin-right: 0px;',
+    );
+  });
+
+  it('should render with 16 offset on the right', () => {
+    const { container } = render(<Divider offsetRight={16} />);
+
+    const dividerLine = container.querySelector('.dividerLine');
+
+    expect(dividerLine).not.toBeNull();
+    expect(dividerLine?.getAttribute('style')).toBe(
+      'margin-left: 0px; margin-right: 16px;',
+    );
+  });
+
+  it('should render with role "separator"', () => {
+    render(<Divider />);
+
+    const divider = screen.getByRole('separator');
+
+    expect(divider).toBeVisible();
+  });
+});

package/src/lib/Divider/Divider.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Divider from './Divider';
+
+const meta: Meta<typeof Divider> = {
+  argTypes: {
+    offsetLeft: {
+      control: { type: 'select' },
+      options: [0, 8, 16],
+    },
+    offsetRight: {
+      control: { type: 'select' },
+      options: [0, 8, 16],
+    },
+  },
+  component: Divider,
+  title: 'Components/Divider',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Primary: Story = {
+  args: {
+    offsetLeft: 0,
+    offsetRight: 0,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=231%3A3089&mode=dev',
+    },
+  },
+};

package/src/lib/Divider/Divider.tsx

@@ -0,0 +1,17 @@
+import styles from './Divider.module.scss';
+import { DividerProps } from './Divider.types';
+
+const Divider = ({ offsetLeft = 0, offsetRight = 0 }: DividerProps) => (
+  <div className={styles.dividerContainer}>
+    <div
+      className={styles.dividerLine}
+      style={{
+        marginLeft: `${offsetLeft}px`,
+        marginRight: `${offsetRight}px`,
+      }}
+      role="separator"
+    />
+  </div>
+);
+
+export default Divider;

package/src/lib/Divider/Divider.types.ts

@@ -0,0 +1,6 @@
+type OffsetType = 0 | 8 | 16;
+
+export interface DividerProps {
+  offsetLeft?: OffsetType;
+  offsetRight?: OffsetType;
+}

package/src/lib/Fieldset/Fieldset.module.scss

@@ -0,0 +1,3 @@
+.fieldset {
+  border: none;
+}