feat(hr): add height prop

src/components/hr/hr.component.tsx

@@ -10,13 +10,16 @@ export interface HrProps extends MarginProps {
   /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
    * Enables the adaptive behaviour when set */
   adaptiveMxBreakpoint?: number;
+  /** Set the height of the component. Accepts one of "small", "medium", or "large" */
+  height?: "small" | "medium" | "large";
 }
 
 export const Hr = ({
   adaptiveMxBreakpoint,
   ml,
   mr,
   "aria-hidden": ariaHidden,
+  height = "small",
   ...rest
 }: HrProps): JSX.Element => {
   const largeScreen = useIsAboveBreakpoint(adaptiveMxBreakpoint);
@@ -32,6 +35,7 @@ export const Hr = ({
       aria-hidden={ariaHidden}
       data-component="hr"
       data-role="hr"
+      height={height}
       ml={marginLeft}
       mr={marginRight}
       mt={rest.mt || 3}

src/components/hr/hr.mdx

@@ -36,6 +36,12 @@ The `mb` and `mt` props set the vertical spacing. These props are mulitipliers a
 
 <Canvas of={HrStories.DifferentSpacing} />
 
+### With different heights
+
+The `height` prop sets the height of the hr. Accepts `"small"`, `"medium"` and `"large"`.
+
+<Canvas of={HrStories.DifferentHeights} />
+
 ### Inside a form
 
 <Canvas of={HrStories.InsideForm} />

src/components/hr/hr.pw.tsx

@@ -20,6 +20,23 @@ test.describe("Hr component", () => {
     await expect(hrComponent(page)).toHaveCSS("margin-bottom", "24px");
   });
 
+  test("renders with a small height", async ({ mount, page }) => {
+    await mount(<HrComponent height="small" />);
+
+    await expect(hrComponent(page)).toHaveCSS("height", "1px");
+  });
+
+  test("renders with a medium height", async ({ mount, page }) => {
+    await mount(<HrComponent height="medium" />);
+
+    await expect(hrComponent(page)).toHaveCSS("height", "2px");
+  });
+
+  test("renders with a large height", async ({ mount, page }) => {
+    await mount(<HrComponent height="large" />);
+
+    await expect(hrComponent(page)).toHaveCSS("height", "3px");
+  });
   [
     [799, 80, 320],
     [800, 80, 320],
@@ -72,6 +89,33 @@ test.describe("Accessibility tests for Hr component", () => {
     await checkAccessibility(page);
   });
 
+  test("should pass accessibility tests when rendered with a small height", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<HrComponent height="small" />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests when rendered with a medium height", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<HrComponent height="medium" />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests when rendered with a  large height", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<HrComponent height="large" />);
+
+    await checkAccessibility(page);
+  });
+
   test("should pass accessibility tests for EnablingAdaptiveBehaviour example", async ({
     mount,
     page,

src/components/hr/hr.stories.tsx

@@ -5,6 +5,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import generateStyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 import Hr from ".";
+import Box from "../box";
 import Form from "../form";
 import Textbox from "../textbox";
 import Button from "../button";
@@ -37,6 +38,20 @@ export const DifferentSpacing: Story = () => {
 };
 DifferentSpacing.storyName = "Different Spacing";
 
+export const DifferentHeights: Story = () => {
+  const heights = ["small", "medium", "large"] as const;
+  return (
+    <Box>
+      {heights.map((height) => (
+        <Box key={height} mb={3}>
+          <Hr height={height} />
+        </Box>
+      ))}
+    </Box>
+  );
+};
+DifferentHeights.storyName = "Different Heights";
+
 export const InsideForm: Story = () => {
   return (
     <Form

src/components/hr/hr.style.ts

@@ -2,11 +2,19 @@ import styled from "styled-components";
 import { margin, MarginProps } from "styled-system";
 import baseTheme from "../../style/themes/base";
 
-const StyledHr = styled.hr<MarginProps>`
+const heightMap = {
+  small: 1,
+  medium: 2,
+  large: 3,
+};
+
+const StyledHr = styled.hr<
+  MarginProps & { height: "small" | "medium" | "large" }
+>`
   ${margin}
   width: inherit;
   border: 0;
-  height: 1px;
+  height: ${({ height }) => heightMap[height]}px;
   background: var(--colorsUtilityMajor100);
 `;
 

src/components/hr/hr.test.tsx

@@ -17,6 +17,27 @@ testStyledSystemMargin(
   },
 );
 
+test("should render with a small height", () => {
+  render(<Hr height="small" />);
+  const hr = screen.getByRole("separator");
+
+  expect(hr).toHaveStyle("height: 1px");
+});
+
+test("should render with a medium height", () => {
+  render(<Hr height="medium" />);
+  const hr = screen.getByRole("separator");
+
+  expect(hr).toHaveStyle("height: 2px");
+});
+
+test("should render with a large height", () => {
+  render(<Hr height="large" />);
+  const hr = screen.getByRole("separator");
+
+  expect(hr).toHaveStyle("height: 3px");
+});
+
 test("should apply the expected margin top", () => {
   render(
     <CarbonProvider validationRedesignOptIn>