@goodhood-web/ui 0.0.6 → 1.0.0-development.2

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

@@ -1,51 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-.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

@@ -1,72 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.ccBtn {
-  display: flex;
-  width: 100%;
-  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

@@ -1,14 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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/src/lib/Divider/Divider.module.scss

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

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