✨ feat: changed Divider to use hr by default (#139)

Author: e1en0r

__tests__/components/Divider/ColoredDivider.test.tsx

@@ -5,6 +5,6 @@ import { render } from '../../utils';
 describe('<ColoredDivider />', () => {
   it('should render a divider', () => {
     const { container } = render(<ColoredDivider colorId="P10" />);
-    expect(container.firstChild?.nodeName).toBe('DIV');
+    expect(container.firstChild?.nodeName).toBe('HR');
   });
 });

__tests__/components/Divider/Divider.test.tsx

@@ -1,18 +1,24 @@
+import '@testing-library/jest-dom';
 import React from 'react';
 import { Divider } from 'lib';
 import { render } from '../../utils';
 
 describe('<Divider />', () => {
-  it('should render a divider', () => {
+  it('should render a default hr element', () => {
     const { container } = render(<Divider />);
+    expect(container.firstChild?.nodeName).toBe('HR');
+  });
+
+  it('should render a div element when specified', () => {
+    const { container } = render(<Divider<'div'> as="div" />);
     expect(container.firstChild?.nodeName).toBe('DIV');
   });
 
-  it('should accept the rest of the props', () => {
+  it('should accept additional props', () => {
     render(
       <Divider
         unthemed
-        className="divider"
+        className="custom-divider"
         id="divider"
         orientation="vertical"
         style={{ color: 'red' }}
@@ -23,7 +29,18 @@ describe('<Divider />', () => {
     );
 
     const divider = document.getElementById('divider');
-    expect(divider?.nodeName).toBe('DIV');
+    expect(divider?.nodeName).toBe('HR');
     expect(divider?.style.getPropertyValue('color')).toBe('red');
+    expect(divider?.classList).toContain('custom-divider');
+  });
+
+  it('should have role="separator"', () => {
+    const { container } = render(<Divider />);
+    expect(container.firstChild).toHaveAttribute('role', 'separator');
+  });
+
+  it('should have the correct aria-orientation', () => {
+    const { container } = render(<Divider orientation="vertical" />);
+    expect(container.firstChild).toHaveAttribute('aria-orientation', 'vertical');
   });
 });

__tests__/components/Divider/StyledDivider.test.tsx

@@ -9,6 +9,6 @@ const styles = {
 describe('<StyledDivider />', () => {
   it('should render a divider', () => {
     const { container } = render(<StyledDivider {...styles} />);
-    expect(container.firstChild?.nodeName).toBe('DIV');
+    expect(container.firstChild?.nodeName).toBe('HR');
   });
 });

src/components/Divider/Divider.tsx

@@ -1,10 +1,13 @@
 import { cx } from '@emotion/css';
 import React from 'react';
-import { ThemeProps, Orientation, SequentialVariant, Volume } from '../../types';
+import { ThemeProps, Orientation, SequentialVariant, Volume, AsReactType } from '../../types';
 import { useThemeId } from '../../context/Theme';
 import styles from './styles/Divider.module.css';
 
-export type DividerProps = React.HTMLAttributes<HTMLDivElement> &
+export type DividerElementType = 'div' | 'hr';
+
+export type DividerProps<T extends DividerElementType = 'hr'> = AsReactType<T> &
+  React.HTMLAttributes<HTMLElementTagNameMap[T]> &
   ThemeProps & {
     className?: string;
     orientation?: Orientation;
@@ -17,7 +20,8 @@ export type DividerProps = React.HTMLAttributes<HTMLDivElement> &
  * A divider is a vertical or horizontal rule
  * that can be one of several colors.
  */
-export function Divider({
+export function Divider<T extends DividerElementType = 'hr'>({
+  as,
   className,
   contrast = false,
   orientation = 'horizontal',
@@ -26,24 +30,24 @@ export function Divider({
   variant: initVariant = 'primary',
   volume,
   ...props
-}: DividerProps): JSX.Element {
+}: DividerProps<T>): JSX.Element {
   const themeId = useThemeId(initThemeId);
   const variant = contrast ? 'contrast' : initVariant;
+  const element = as || 'hr';
 
-  return (
-    <div
-      aria-hidden={true}
-      className={cx(
-        styles.divider,
-        styles[`divider--${orientation}`],
-        themeId && !unthemed && styles[`divider--${themeId}`],
-        variant && styles[`divider--${variant}`],
-        volume && styles[`divider--${volume}`],
-        className,
-      )}
-      {...props}
-    />
-  );
+  return React.createElement(element, {
+    'aria-orientation': orientation,
+    className: cx(
+      styles.divider,
+      styles[`divider--${orientation}`],
+      themeId && !unthemed && styles[`divider--${themeId}`],
+      variant && styles[`divider--${variant}`],
+      volume && styles[`divider--${volume}`],
+      className,
+    ),
+    role: 'separator',
+    ...props,
+  });
 }
 
 Divider.displayName = 'Divider';

src/components/Divider/stories/Divider.stories.tsx

@@ -148,3 +148,15 @@ Vertical.args = {
   ...defaultArgs,
   orientation: 'vertical',
 };
+
+export const HorizontalRule = (args: DividerProps<'hr'>): JSX.Element => <Divider<'hr'> {...args} />;
+HorizontalRule.args = {
+  ...defaultArgs,
+  as: 'hr',
+};
+
+export const Div = (args: DividerProps<'div'>): JSX.Element => <Divider<'div'> {...args} />;
+Div.args = {
+  ...defaultArgs,
+  as: 'div',
+};

src/components/Divider/styles/Divider.module.css

@@ -3,6 +3,10 @@
   flex: none;
 }
 
+hr.divider {
+  border: none;
+}
+
 .divider--horizontal {
   height: 1px;
   width: 100%;