diff --git a/packages/lib/src/bulleted-list/BulletedList.test.tsx b/packages/lib/src/bulleted-list/BulletedList.test.tsx new file mode 100644 index 0000000000..3ae6170d1f --- /dev/null +++ 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( + + Code + Usage + Specifications + + ); + 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 index 60de5cbb53..b3299f6d6c 100644 --- 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(); - expect("Hola").toBeTruthy(); - }); - test("Calls correct function on click", () => { const onClick = jest.fn(); - const { getByText } = render(); - + const { getByText } = render(); const button = getByText("Button"); fireEvent.click(button); expect(onClick).toHaveBeenCalled(); }); test("Renders with correct accessibility attributes", () => { - const { getByRole } = render(); - + const { getByRole } = render(); 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( +
+ + + ); + 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 index 54a51db86c..96169b5976 100644 --- 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 new file mode 100644 index 0000000000..0e54c959d1 --- /dev/null +++ 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( + + Example text + + ); + expect(getByText("Example text")).toBeTruthy(); + }); +}); diff --git a/packages/lib/src/container/Container.tsx b/packages/lib/src/container/Container.tsx index a32c845c72..b9ac1aaf84 100644 --- 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) => ( - -); +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` padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")}; `; -export default DxcContainer; +export default function DxcContainer({ display, width, height, overflow, ...props }: ContainerPropsType) { + return ; +} diff --git a/packages/lib/src/grid/Grid.tsx b/packages/lib/src/grid/Grid.tsx index 964ef6d946..c74f60e3f5 100644 --- 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` 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` - ${({ 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) => ; - DxcGrid.Item = GridItem; export default DxcGrid; diff --git a/packages/lib/src/image/Image.test.tsx b/packages/lib/src/image/Image.test.tsx new file mode 100644 index 0000000000..838ab9a397 --- /dev/null +++ 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( + + ); + expect(getByText("Example caption")).toBeTruthy(); + }); +}); diff --git a/packages/lib/src/paragraph/Paragraph.test.tsx b/packages/lib/src/paragraph/Paragraph.test.tsx new file mode 100644 index 0000000000..787b29d71b --- /dev/null +++ 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( + + 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. + + ); + 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 new file mode 100644 index 0000000000..0acb764971 --- /dev/null +++ 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(); + expect(getByText("Overview")).toBeTruthy(); + expect(getByText("Spacing")).toBeTruthy(); + expect(getByText("Button")).toBeTruthy(); + }); +});