dxc-technology · raquelarrojo · Dec 11, 2024 · Dec 10, 2024
diff --git a/packages/lib/src/bulleted-list/BulletedList.test.tsx b/packages/lib/src/bulleted-list/BulletedList.test.tsx
@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import DxcBulletedList from "./BulletedList";
+
+describe("Bulleted list component tests", () => {
+  test("The component renders properly", () => {
+    const { getByText } = render(
+      <DxcBulletedList>
+        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
+        <DxcBulletedList.Item>Usage</DxcBulletedList.Item>
+        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
+      </DxcBulletedList>
+    );
+    expect(getByText("Code")).toBeTruthy();
+    expect(getByText("Usage")).toBeTruthy();
+    expect(getByText("Specifications")).toBeTruthy();
+  });
+});
diff --git a/packages/lib/src/button/Button.test.tsx b/packages/lib/src/button/Button.test.tsx
@@ -2,25 +2,30 @@ import { render, fireEvent } from "@testing-library/react";
 import DxcButton from "./Button";
 
 describe("Button component tests", () => {
-  test("Button renders with correct text", () => {
-    // const { getByText } = render(<DxcButton label="Button" />);
-    expect("Hola").toBeTruthy();
-  });
-
   test("Calls correct function on click", () => {
     const onClick = jest.fn();
-    const { getByText } = render(<DxcButton label="Button" onClick={onClick} />);
-
+    const { getByText } = render(<DxcButton label="Button" onClick={onClick} size={{ height: "medium" }} semantic="success" />);
     const button = getByText("Button");
     fireEvent.click(button);
     expect(onClick).toHaveBeenCalled();
   });
 
   test("Renders with correct accessibility attributes", () => {
-    const { getByRole } = render(<DxcButton label="Home" title="Go home" tabIndex={1} />);
-
+    const { getByRole } = render(<DxcButton label="Home" title="Go home" tabIndex={1} semantic="error" />);
     const button = getByRole("button");
     expect(button.getAttribute("aria-label")).toBe("Go home");
     expect(button.getAttribute("tabindex")).toBe("1");
   });
+
+  test("Triggers form submit event on button click", () => {
+    const handleSubmit = jest.fn();
+    const { getByRole } = render(
+      <form onSubmit={handleSubmit}>
+        <DxcButton label="Submit" type="submit" />
+      </form>
+    );
+    const button = getByRole("button", { name: "Submit" });
+    fireEvent.click(button);
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx
@@ -33,7 +33,7 @@ const DxcButton = ({
           }}
           tabIndex={disabled ? -1 : tabIndex}
           type={type}
-          $mode={mode === "primary" || mode === "secondary" || mode === "tertiary" ? mode : "primary"}
+          $mode={mode}
           hasLabel={label ? true : false}
           hasIcon={icon ? true : false}
           iconPosition={iconPosition}
@@ -64,7 +64,7 @@ const calculateWidth = (margin: ButtonPropsType["margin"], size: ButtonPropsType
     ? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
     : widths[size?.width];
 
-const getHeight = (height) => {
+const getHeight = (height: ButtonPropsType["size"]["height"]) => {
   switch (height) {
     case "small":
       return 1.5;
@@ -403,7 +403,7 @@ const Button = styled.button<{
   gap: 0.5rem;
   align-items: center;
   justify-content: center;
-  height: ${(props) => getHeight(props.size?.height && props.size?.height) + "rem"};
+  height: ${(props) => getHeight(props.size?.height) + "rem"};
   width: ${(props) => calculateWidth(props.margin, props.size)};
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>

diff --git a/packages/lib/src/container/Container.test.tsx b/packages/lib/src/container/Container.test.tsx
@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import DxcContainer from "./Container";
+
+describe("Container component tests", () => {
+  test("The component renders properly", () => {
+    const { getByText } = render(
+      <DxcContainer
+        boxSizing="border-box"
+        width="200px"
+        height="200px"
+        background={{ color: "color_purple_400" }}
+        border={{
+          top: {
+            width: "2px",
+            color: "color_blue_600",
+            style: "solid",
+          },
+          bottom: {
+            width: "thick",
+            color: "color_purple_600",
+            style: "solid",
+          },
+        }}
+        borderRadius="0 0 0.25rem 0.25rem"
+        padding="medium"
+        margin="large"
+      >
+        <b>Example text</b>
+      </DxcContainer>
+    );
+    expect(getByText("Example text")).toBeTruthy();
+  });
+});
diff --git a/packages/lib/src/container/Container.tsx b/packages/lib/src/container/Container.tsx
@@ -1,24 +1,7 @@
 import styled from "styled-components";
 import { getCoreColorToken } from "../common/coreTokens";
 import ContainerPropsType, { BorderProperties, StyledProps } from "./types";
-
-/**
- * This values correspond to the spaces defined in the design system
- * https://developer.dxc.com/halstack/next/principles/spacing/#component-spacing-tokens
- */
-const spaces = {
-  xxsmall: "4px",
-  xsmall: "8px",
-  small: "12px",
-  medium: "16px",
-  large: "24px",
-  xlarge: "32px",
-  xxlarge: "48px",
-};
-
-const DxcContainer = ({ display, width, height, overflow, ...props }: ContainerPropsType) => (
-  <Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} />
-);
+import { spaces } from "../common/variables";
 
 const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) =>
   `border-${direction}: ${borderProperties?.width ?? ""} ${borderProperties?.style ?? ""} ${
@@ -95,4 +78,6 @@ const Container = styled.div<StyledProps>`
   padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")};
 `;
 
-export default DxcContainer;
+export default function DxcContainer({ display, width, height, overflow, ...props }: ContainerPropsType) {
+  return <Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} />;
+}
diff --git a/packages/lib/src/grid/Grid.tsx b/packages/lib/src/grid/Grid.tsx
@@ -3,58 +3,94 @@ import GridPropsType, { GridItemProps } from "./types";
 
 const Grid = styled.div<GridPropsType>`
   display: grid;
-  ${({ templateColumns }) => templateColumns && `grid-template-columns: ${templateColumns.join(" ")};`}
-  ${({ templateRows }) => templateRows && `grid-template-rows: ${templateRows.join(" ")};`}
-  ${({ templateAreas }) => templateAreas && `grid-template-areas: ${templateAreas.map((row) => `"${row}"`).join(" ")};`}
-  ${({ autoColumns }) => autoColumns && `grid-auto-columns: ${autoColumns};`}
-  ${({ autoRows }) => autoRows && `grid-auto-rows: ${autoRows};`}
-  ${({ autoFlow }) => autoFlow && `grid-auto-flow: ${autoFlow};`}
-  ${({ gap }) =>
-    gap != null &&
-    (typeof gap === "string" ? `gap: ${gap};` : `row-gap: ${gap.rowGap ?? ""}; column-gap: ${gap.columnGap ?? ""};`)}
-  ${({ placeItems }) =>
-    placeItems &&
-    (typeof placeItems === "string"
-      ? `place-items: ${placeItems}`
-      : `align-items: ${placeItems.alignItems ?? ""}; justify-items: ${placeItems.justifyItems ?? ""};`)}
-  ${({ placeContent }) =>
-    placeContent &&
-    (typeof placeContent === "string"
-      ? `place-content: ${placeContent}`
-      : `align-content: ${placeContent.alignContent ?? ""}; justify-content: ${placeContent.justifyContent ?? ""};`)}
-
-  ${({ areaName }) => areaName && `grid-area: ${areaName};`}
-  ${({ column }) =>
-    column &&
-    `grid-column: ${
-      typeof column === "string" || typeof column === "number" ? column : `${column.start} / ${column.end};`
-    };`}
-  ${({ row }) =>
-    row && `grid-row: ${typeof row === "string" || typeof row === "number" ? row : `${row.start} / ${row.end};`};`}
-  ${({ placeSelf }) =>
-    placeSelf &&
-    (typeof placeSelf === "string"
-      ? `place-self: ${placeSelf}`
-      : `align-self: ${placeSelf.alignSelf ?? ""}; justify-self: ${placeSelf.justifySelf ?? ""};`)}
+  ${(props) => `
+    ${props.templateColumns ? `grid-template-columns: ${props.templateColumns.join(" ")};` : ""}
+    ${props.templateRows ? `grid-template-rows: ${props.templateRows.join(" ")};` : ""}
+    ${props.templateAreas ? `grid-template-areas: ${props.templateAreas.map((row) => `"${row}"`).join(" ")};` : ""}
+    ${props.autoColumns ? `grid-auto-columns: ${props.autoColumns};` : ""}
+    ${props.autoRows ? `grid-auto-rows: ${props.autoRows};` : ""}
+    ${props.autoFlow ? `grid-auto-flow: ${props.autoFlow};` : ""}
+    ${props.areaName ? `grid-area: ${props.areaName};` : ""}
+    ${
+      props.gap != null
+        ? typeof props.gap === "string"
+          ? `gap: ${props.gap};`
+          : `row-gap: ${props.gap.rowGap ?? ""}; column-gap: ${props.gap.columnGap ?? ""};`
+        : ""
+    }
+    ${
+      props.placeItems
+        ? typeof props.placeItems === "string"
+          ? `place-items: ${props.placeItems};`
+          : `align-items: ${props.placeItems.alignItems ?? ""}; justify-items: ${props.placeItems.justifyItems ?? ""};`
+        : ""
+    }
+    ${
+      props.placeContent
+        ? typeof props.placeContent === "string"
+          ? `place-content: ${props.placeContent};`
+          : `align-content: ${props.placeContent.alignContent ?? ""}; justify-content: ${props.placeContent.justifyContent ?? ""};`
+        : ""
+    }
+    ${
+      props.column
+        ? `grid-column: ${
+            typeof props.column === "string" || typeof props.column === "number"
+              ? props.column
+              : `${props.column.start} / ${props.column.end};`
+          };`
+        : ""
+    }
+    ${
+      props.row
+        ? `grid-row: ${
+            typeof props.row === "string" || typeof props.row === "number"
+              ? props.row
+              : `${props.row.start} / ${props.row.end};`
+          };`
+        : ""
+    }
+    ${
+      props.placeSelf
+        ? typeof props.placeSelf === "string"
+          ? `place-self: ${props.placeSelf};`
+          : `align-self: ${props.placeSelf.alignSelf ?? ""}; justify-self: ${props.placeSelf.justifySelf ?? ""};`
+        : ""
+    }
+  `}
 `;
 
 const GridItem = styled.div<GridItemProps>`
-  ${({ areaName }) => areaName && `grid-area: ${areaName};`}
-  ${({ column }) =>
-    column &&
-    `grid-column: ${
-      typeof column === "string" || typeof column === "number" ? column : `${column.start} / ${column.end};`
-    };`}
-  ${({ row }) =>
-    row && `grid-row: ${typeof row === "string" || typeof row === "number" ? row : `${row.start} / ${row.end};`};`}
-  ${({ placeSelf }) =>
-    placeSelf &&
-    (typeof placeSelf === "string"
-      ? `place-self: ${placeSelf}`
-      : `align-self: ${placeSelf.alignSelf ?? ""}; justify-self: ${placeSelf.justifySelf ?? ""};`)}
+  ${(props) => `
+    ${props.areaName ? `grid-area: ${props.areaName};` : ""}
+    ${
+      props.column
+        ? `grid-column: ${
+            typeof props.column === "string" || typeof props.column === "number"
+              ? props.column
+              : `${props.column.start} / ${props.column.end};`
+          };`
+        : ""
+    }
+    ${
+      props.row
+        ? `grid-row: ${
+            typeof props.row === "string" || typeof props.row === "number"
+              ? props.row
+              : `${props.row.start} / ${props.row.end};`
+          };`
+        : ""
+    }
+    ${
+      props.placeSelf
+        ? typeof props.placeSelf === "string"
+          ? `place-self: ${props.placeSelf};`
+          : `align-self: ${props.placeSelf.alignSelf ?? ""}; justify-self: ${props.placeSelf.justifySelf ?? ""};`
+        : ""
+    }
+  `}
 `;
 
 const DxcGrid = (props: GridPropsType) => <Grid {...props} />;
-
 DxcGrid.Item = GridItem;
 export default DxcGrid;
diff --git a/packages/lib/src/image/Image.test.tsx b/packages/lib/src/image/Image.test.tsx
@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import DxcImage from "./Image";
+
+describe("Image component tests", () => {
+  test("The component renders properly", () => {
+    const { getByText } = render(
+      <DxcImage
+        alt="Example image"
+        caption="Example caption"
+        width="100%"
+        src="https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg"
+      />
+    );
+    expect(getByText("Example caption")).toBeTruthy();
+  });
+});
diff --git a/packages/lib/src/paragraph/Paragraph.test.tsx b/packages/lib/src/paragraph/Paragraph.test.tsx
@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import DxcParagraph from "./Paragraph";
+
+describe("Paragraph component tests", () => {
+  test("The component renders properly", () => {
+    const { getByText } = render(
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget
+        nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu
+        dignissim, fringilla turpis.
+      </DxcParagraph>
+    );
+    expect(getByText(/Lorem ipsum/i)).toBeTruthy();
+  });
+});
diff --git a/packages/lib/src/quick-nav/QuickNav.test.tsx b/packages/lib/src/quick-nav/QuickNav.test.tsx
@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react";
+import DxcQuickNav from "./QuickNav";
+
+const links = [
+  {
+    label: "Overview",
+  },
+  {
+    label: "Principles",
+    links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Accordion",
+      },
+      {
+        label: "Button",
+      },
+    ],
+  },
+];
+
+describe("QuickNav component tests", () => {
+  test("The component renders properly", () => {
+    const { getByText } = render(<DxcQuickNav links={links} />);
+    expect(getByText("Overview")).toBeTruthy();
+    expect(getByText("Spacing")).toBeTruthy();
+    expect(getByText("Button")).toBeTruthy();
+  });
+});