Merge pull request #1835 from dxc-technology/Mil4n0r/divider-component

Added new `Divider` component

Author: GomezIvann

lib/src/date-input/types.ts

@@ -123,11 +123,11 @@ export type CalendarPropsType = {
    */
   selectedDate: Dayjs;
   /**
-   * Date showed by the calendar.
+   * Date shown by the calendar.
    */
   innerDate: Dayjs;
   /**
-   * Function called when the showed date needs to be updated.
+   * Function called when the shown date needs to be updated.
    */
   onInnerDateChange: (date: Dayjs) => void;
   /**

lib/src/divider/Divider.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import DxcDivider from "./Divider";
+
+describe("Divider Component", () => {
+  test("Default renders horizontal divider correctly", () => {
+    const { container } = render(<DxcDivider />);
+    const divider = container.querySelector("hr");
+
+    expect(divider.getAttribute("aria-orientation")).toBe("horizontal");
+  });
+
+  test("Renders vertical divider correctly", () => {
+    const { container } = render(<DxcDivider orientation="vertical" />);
+    const divider = container.querySelector("hr");
+    expect(divider.getAttribute("aria-orientation")).toBe("vertical");
+  });
+
+  test("Renders divider as a decorative resource by default", () => {
+    const { container } = render(<DxcDivider />);
+    const divider = container.querySelector("hr");
+    expect(divider).toBeTruthy();
+    expect(divider.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  test("Renders divider as a separator if it is not decorative", () => {
+    const { getByRole } = render(<DxcDivider decorative={false} />);
+    const divider = getByRole("separator");
+    expect(divider).toBeTruthy();
+    expect(divider.getAttribute("aria-hidden")).toBe("false");
+  });
+});

lib/src/divider/Divider.test.js

@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import DividerPropsType from "./types";
+import CoreTokens from "../common/coreTokens";
+
+const DxcDivider = ({
+  orientation = "horizontal",
+  weight = "regular",
+  color = "mediumGrey",
+  decorative = true
+}: DividerPropsType): JSX.Element => (
+  <StyledDivider orientation={orientation} weight={weight} color={color} aria-orientation={orientation} aria-hidden={decorative} />
+);
+
+const StyledDivider = styled.hr<DividerPropsType>`
+  ${({ orientation, weight, color }) => `
+    border-color: ${
+      color === "lightGrey"
+        ? CoreTokens.color_grey_200
+        : color === "mediumGrey"
+        ? CoreTokens.color_grey_400
+        : CoreTokens.color_grey_700
+    };
+    ${orientation === "horizontal" ? "width" : "min-height"}: 100%;
+    ${orientation === "horizontal" ? "height" : "width"}: 0px;
+    ${
+      orientation === "horizontal"
+        ? "border-width: " + (weight === "regular" ? "1px 0 0 0" : "2px 0 0 0")
+        : "border-width: " + (weight === "regular" ? "0 0 0 1px" : "0 0 0 2px")
+    };
+    margin: 0px;
+  `}
+`;
+
+export default DxcDivider;

lib/src/divider/Divider.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  /**
+   * The divider can be shown in horizontal or vertical.
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Modifies the thickness of the divider.
+   */
+  weight?: "regular" | "strong";
+  /**
+   * Modifies the color of the divider.
+   */
+  color?: "lightGrey" | "mediumGrey" | "darkGrey";
+  /**
+   * Indicates whether the divider is just a decorative resource or it works as a semantic separator of content.
+   */
+  decorative?: boolean;
+};
+
+export default Props;

lib/src/divider/types.ts

@@ -56,7 +56,7 @@ type Props = {
    */
   disabled?: boolean;
   /**
-   * If true, the options are showed when the dropdown is hover.
+   * If true, the options are shown when the dropdown is hover.
    */
   expandOnHover?: boolean;
   /**

lib/src/dropdown/types.ts

@@ -6,13 +6,13 @@ type Props = {
    */
   underlined?: boolean;
   /**
-   * Content showed in the header. Take into account that the component applies styles
+   * Content shown in the header. Take into account that the component applies styles
    * for the first child in the content, so we recommend the use of React.Fragment
    * to be applied correctly. Otherwise, the styles can be modified.
    */
   content?: React.ReactNode;
   /**
-   * Content showed in responsive version. It receives the close menu handler that can
+   * Content shown in responsive version. It receives the close menu handler that can
    * be used to add that functionality when a element is clicked.
    */
   responsiveContent?: (closeHandler: () => void) => React.ReactNode;

lib/src/header/types.ts

@@ -12,6 +12,7 @@ import SidenavPropsType, {
 import DxcFlex from "../flex/Flex";
 import DxcBleed from "../bleed/Bleed";
 import icons from "./Icons";
+import CoreTokens from "../common/coreTokens";
 
 const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => {
   const colorsTheme = useTheme();
@@ -155,7 +156,7 @@ const SidenavTitle = styled.div`
 const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background-color: #999999;
+  background-color: ${CoreTokens.color_grey_400};
 
   &:last-child {
     display: none;

lib/src/sidenav/Sidenav.tsx

@@ -32,7 +32,7 @@ export type StepProps = {
 
 type Props = {
   /**
-   * The wizard can be showed in horizontal or vertical.
+   * The wizard can be shown in horizontal or vertical.
    */
   mode?: "horizontal" | "vertical";
   /**

lib/src/wizard/types.ts

@@ -84,7 +84,7 @@ const sections = [
         <DxcParagraph>
           The overlay element makes possible to get the user attention into the
           dialog creating a layer between the actual application and the modal
-          information showed in the user interface.
+          information shown in the user interface.
         </DxcParagraph>
       </>
     ),