Feat(web-react): Introduce UNSTABLE_Divider component #DS-1303

Please use it with caution.

packages/web-react/scripts/entryPoints.js

@@ -45,6 +45,7 @@ const entryPoints = [
   { dirs: ['components', 'TextFieldBase'] },
   { dirs: ['components', 'Toast'] },
   { dirs: ['components', 'Tooltip'] },
+  { dirs: ['components', 'UNSTABLE_Divider'] },
   { dirs: ['components', 'VisuallyHidden'] },
 ];
 

packages/web-react/src/components/UNSTABLE_Divider/README.md

@@ -0,0 +1,20 @@
+# UNSTABLE Divider
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.
+
+The `UNSTABLE_Divider` component is used to separate content in a layout.
+
+```jsx
+<UNSTABLE_Divider />
+```
+
+## API
+
+The components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
+[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
+[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props

packages/web-react/src/components/UNSTABLE_Divider/UNSTABLE_Divider.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from '../../hooks';
+import { SpiritDividerProps } from '../../types';
+import { useDividerStyleProps } from './useDividerStyleProps';
+
+export const UNSTABLE_Divider = (props: SpiritDividerProps): JSX.Element => {
+  const { classProps, props: modifiedProps } = useDividerStyleProps(props);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  return <hr {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)} />;
+};
+
+export default UNSTABLE_Divider;

packages/web-react/src/components/UNSTABLE_Divider/__tests__/UNSTABLE_Divider.test.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import UNSTABLE_Divider from '../UNSTABLE_Divider';
+
+describe('UNSTABLE_Divider', () => {
+  classNamePrefixProviderTest(UNSTABLE_Divider, 'UNSTABLE_Divider');
+
+  stylePropsTest(UNSTABLE_Divider);
+
+  restPropsTest(UNSTABLE_Divider, 'hr');
+
+  it('should have default classname', () => {
+    render(<UNSTABLE_Divider />);
+
+    expect(screen.getByRole('separator')).toHaveClass('UNSTABLE_Divider');
+  });
+});

packages/web-react/src/components/UNSTABLE_Divider/__tests__/useDividerStyleProps.test.ts

@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useDividerStyleProps } from '../useDividerStyleProps';
+
+describe('useDividerStyleProps', () => {
+  it('should return defaults', () => {
+    const props = {};
+    const { result } = renderHook(() => useDividerStyleProps(props));
+
+    expect(result.current.classProps).toBe('UNSTABLE_Divider');
+  });
+});

packages/web-react/src/components/UNSTABLE_Divider/demo/DividerDefault.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import UNSTABLE_Divider from '../UNSTABLE_Divider';
+
+const DividerDefault = () => <UNSTABLE_Divider />;
+
+export default DividerDefault;

packages/web-react/src/components/UNSTABLE_Divider/demo/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import DocsSection from '../../../../docs/DocsSections';
+import DividerDefault from './DividerDefault';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <DocsSection title="Default" stackAlignment="stretch">
+      <DividerDefault />
+    </DocsSection>
+  </React.StrictMode>,
+);

packages/web-react/src/components/UNSTABLE_Divider/index.html

@@ -0,0 +1 @@
+{{> web-react/demo}}

packages/web-react/src/components/UNSTABLE_Divider/index.ts

@@ -0,0 +1,3 @@
+export * from './UNSTABLE_Divider';
+export * from './useDividerStyleProps';
+export { default as UNSTABLE_Divider } from './UNSTABLE_Divider';

packages/web-react/src/components/UNSTABLE_Divider/stories/UNSTABLE_Divider.stories.tsx

@@ -0,0 +1,24 @@
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import ReadMe from '../README.md';
+import { UNSTABLE_Divider } from '..';
+
+const meta: Meta<typeof UNSTABLE_Divider> = {
+  title: 'Components/UNSTABLE_Divider',
+  component: UNSTABLE_Divider,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof UNSTABLE_Divider>;
+
+export const Playground: Story = {
+  name: 'UNSTABLE_Divider',
+};

packages/web-react/src/components/UNSTABLE_Divider/useDividerStyleProps.ts

@@ -0,0 +1,18 @@
+import { useClassNamePrefix } from '../../hooks';
+import { SpiritDividerProps } from '../../types';
+
+export interface DividerStyles {
+  /** className props */
+  classProps: string;
+  /** props to be passed to the element */
+  props: SpiritDividerProps;
+}
+
+export function useDividerStyleProps(props: SpiritDividerProps): DividerStyles {
+  const DividerClass = useClassNamePrefix('UNSTABLE_Divider');
+
+  return {
+    classProps: DividerClass,
+    props,
+  };
+}

packages/web-react/src/components/index.ts

@@ -33,4 +33,5 @@ export * from './TextField';
 export * from './TextFieldBase';
 export * from './Toast';
 export * from './Tooltip';
+export * from './UNSTABLE_Divider';
 export * from './VisuallyHidden';

packages/web-react/src/types/divider.ts

@@ -0,0 +1,3 @@
+import { StyleProps, TransferProps } from './shared';
+
+export interface SpiritDividerProps extends StyleProps, TransferProps {}

packages/web-react/src/types/index.ts

@@ -4,6 +4,7 @@ export * from './breadcrumbs';
 export * from './button';
 export * from './checkbox';
 export * from './collapse';
+export * from './divider';
 export * from './dropdown';
 export * from './fieldGroup';
 export * from './fileUploader';