Feat(web-react): Introduce Divider component #DS-1391

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

@@ -4,11 +4,11 @@ import { useStyleProps } from '../../hooks';
 import { SpiritDividerProps } from '../../types';
 import { useDividerStyleProps } from './useDividerStyleProps';
 
-export const UNSTABLE_Divider = (props: SpiritDividerProps): JSX.Element => {
+export const 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;
+export default Divider;

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

@@ -1,12 +1,9 @@
-# UNSTABLE Divider
+# 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.
+The `Divider` component is used to separate content in a layout.
 
 ```jsx
-<UNSTABLE_Divider />
+<Divider />
 ```
 
 ## API

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

@@ -4,18 +4,18 @@ 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';
+import Divider from '../Divider';
 
-describe('UNSTABLE_Divider', () => {
-  classNamePrefixProviderTest(UNSTABLE_Divider, 'UNSTABLE_Divider');
+describe('Divider', () => {
+  classNamePrefixProviderTest(Divider, 'Divider');
 
-  stylePropsTest(UNSTABLE_Divider);
+  stylePropsTest(Divider);
 
-  restPropsTest(UNSTABLE_Divider, 'hr');
+  restPropsTest(Divider, 'hr');
 
   it('should have default classname', () => {
-    render(<UNSTABLE_Divider />);
+    render(<Divider />);
 
-    expect(screen.getByRole('separator')).toHaveClass('UNSTABLE_Divider');
+    expect(screen.getByRole('separator')).toHaveClass('Divider');
   });
 });

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

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

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

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

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

@@ -2,11 +2,11 @@ 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 '..';
+import { Divider } from '..';
 
-const meta: Meta<typeof UNSTABLE_Divider> = {
-  title: 'Experimental/UNSTABLE_Divider',
-  component: UNSTABLE_Divider,
+const meta: Meta<typeof Divider> = {
+  title: 'Experimental/Divider',
+  component: Divider,
   parameters: {
     docs: {
       page: () => <Markdown>{ReadMe}</Markdown>,
@@ -17,8 +17,8 @@ const meta: Meta<typeof UNSTABLE_Divider> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof UNSTABLE_Divider>;
+type Story = StoryObj<typeof Divider>;
 
 export const Playground: Story = {
-  name: 'UNSTABLE_Divider',
+  name: 'Divider',
 };

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

@@ -9,7 +9,7 @@ export interface DividerStyles {
 }
 
 export function useDividerStyleProps(props: SpiritDividerProps): DividerStyles {
-  const DividerClass = useClassNamePrefix('UNSTABLE_Divider');
+  const DividerClass = useClassNamePrefix('Divider');
 
   return {
     classProps: DividerClass,

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

@@ -34,7 +34,7 @@ export * from './TextFieldBase';
 export * from './Toast';
 export * from './Tooltip';
 export * from './UNSTABLE_Avatar';
-export * from './UNSTABLE_Divider';
+export * from './Divider';
 export * from './UNSTABLE_PartnerLogo';
 export * from './UNSTABLE_ProductLogo';
 export * from './VisuallyHidden';