@transferwise/components 0.0.0-experimental-9956441 → 0.0.0-experimental-47c6fe8

package/src/divider/Divider.story.tsx

@@ -1,132 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Divider from './Divider';
-
-/**
- * Wraps stories with a container (e.g., centered or padded).
- * Adjust styles to your needs.
- */
-const withContainer = (Story: any) => (
-  <div style={{ padding: '1rem' }}>
-    <Story />
-  </div>
-);
-
-/**
- * Not all stories need access to all controls as it causes unnecessary UI noise.
- */
-const hideControls = (args: string[]) => {
-  const hidden = ['variant', 'as', 'className', 'testId', ...args];
-
-  return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
-};
-
-/**
- * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
- * Variants allow customization for different visual separation needs.
- *
- * For more details, please refer to the [design documentation](https://wise.design/components/divider).
- *
- *
- */
-const meta: Meta<typeof Divider> = {
-  component: Divider,
-  title: 'Layouts/Divider',
-  tags: ['autodocs'],
-  decorators: [withContainer],
-  parameters: {
-    actions: { argTypesRegex: null },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['section', 'subsection', 'content'],
-      description: 'Choose the Divider variant.',
-      table: {
-        category: 'Appearance',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'section' },
-      },
-    },
-    isContent: {
-      control: 'boolean',
-      description: 'Render as a semantic <hr> (true) or non-semantic <div> (false).',
-      table: {
-        category: 'Appearance',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    className: {
-      description: 'Add custom class names to the Divider.',
-      table: {
-        category: 'Appearance',
-        type: { summary: 'string' },
-      },
-    },
-    testId: {
-      description: 'Add a data-testid attribute for testing.',
-      table: {
-        category: 'Testing',
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    isContent: false,
-    className: '',
-    testId: '',
-    variant: 'section',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Divider>;
-
-export const Playground: Story = {
-  args: {
-    variant: 'section',
-  },
-  tags: ['!autodocs'],
-};
-
-/**
- * There are three different types of divider – `section`, `subsection`, and `content` –
- * each designed to visually separate or group content. <br />
- * [Design documentation](https://wise.design/components/divider)
- */
-export const Variant: Story = {
-  argTypes: {
-    ...hideControls(['testId', 'className', 'isContent']),
-  },
-  args: {
-    variant: 'section',
-  },
-};
-
-/**
- * The `isContent` prop determines whether the divider is rendered as a semantic `<hr>` or a non-semantic `<div>`.
- */
-export const ContentDivider: Story = {
-  argTypes: {
-    ...hideControls(['variant', 'testId', 'className']),
-  },
-  args: {
-    isContent: true,
-  },
-};
-
-export const AllVariants: Story = {
-  render: function Render() {
-    return (
-      <>
-        <Divider variant="section" />
-        <Divider variant="subsection" />
-        <Divider variant="content" />
-      </>
-    );
-  },
-  argTypes: {
-    ...hideControls(['variant', 'testId', 'className', 'isContent']),
-  },
-  tags: ['!autodocs'],
-};

package/src/divider/Divider.tsx

@@ -1,56 +0,0 @@
-import { clsx } from 'clsx';
-import React, { FunctionComponent } from 'react';
-
-export interface DividerProps {
-  /**
-   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.
-   * Otherwise, a non-semantic `<div role="presentation">` is used for purely visual separation.
-   * @default false
-   */
-  isContent?: boolean;
-
-  /**
-   * Appends additional class names to style the `Divider`.
-   */
-  className?: string;
-
-  /**
-   * Provides a `data-testid` attribute for testing.
-   */
-  testId?: string;
-
-  /**
-   * Alters the visual style of the divider, accommodating different types
-   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
-   * @default 'section'
-   */
-  variant?: 'section' | 'subsection' | 'content';
-}
-
-/**
- * @see {@link Divider} for further information.
- * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
- */
-const Divider: FunctionComponent<DividerProps> = ({
-  className,
-  isContent = false,
-  testId,
-  variant = 'section',
-  ...props
-}) => {
-  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
-
-  const commonProps = {
-    className: clsx('wds-Divider', variantClass, className),
-    'data-testid': testId,
-  };
-
-  const divProps = {
-    ...commonProps,
-    role: 'presentation',
-  };
-
-  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;
-};
-
-export default Divider;

package/src/divider/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Divider';
-export type { DividerProps } from './Divider';