@dxc-technology/halstack-react 9.0.0 → 9.1.0

package/grid/Grid.stories.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import styled from "styled-components";
+import DxcGrid from "./Grid";
+import DxcInset from "../inset/Inset";
+
+export default {
+  title: "Grid",
+  component: DxcGrid,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <ExampleContainer>
+      <DxcGrid>
+        <ColoredContainer />
+        <ColoredContainer />
+        <ColoredContainer />
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Place items" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateRows={["200px"]} placeItems="center">
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+      <DxcGrid placeItems={{ justifyItems: "end" }}>
+        <ColoredContainer />
+        <ColoredContainer />
+        <ColoredContainer />
+      </DxcGrid>
+      <DxcGrid templateRows={["repeat(3, 100px)"]} placeItems={{ alignItems: "end", justifyItems: "center" }}>
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Place content" level={4} />
+    <Container height="200px">
+      <DxcGrid placeContent="center">
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Container height="200px">
+      <DxcGrid placeContent={{ alignContent: "center" }}>
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Container height="200px">
+      <DxcGrid placeContent={{ alignContent: "center", justifyContent: "end" }}>
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Title title="Place self" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateRows={["repeat(3, 100px)"]}>
+        <DxcGrid.GridItem placeSelf="center">
+          <ColoredContainer height="50px" width="50px" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem placeSelf={{ alignSelf: "end" }}>
+          <ColoredContainer height="40px" width="40px" />
+          <ColoredContainer height="30px" width="30px" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
+          <ColoredContainer height="50px" width="50px" />
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Halstack layout using template areas" level={4} />
+    <ExampleContainer>
+      <DxcGrid
+        templateColumns={["repeat(4, 1fr)"]}
+        templateRows={["40px", "200px", "60px"]}
+        templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]}
+        gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
+      >
+        <DxcGrid.GridItem areaName="header" as="header">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem areaName="main" as="main">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem areaName="sidenav" as="nav">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem areaName="footer" as="footer">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Template rows and columns with flexible sizes" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["1fr", "1fr", "1fr"]} templateRows={["1fr", "3fr", "1fr"]} gap="0.5rem">
+        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+          <ColoredContainer color="yellow" height="100%">
+            Header
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem column={1}>
+          <ColoredContainer color="lightcyan" height="100%">
+            Sidenav
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid
+          column={{ start: 2, end: -1 }}
+          templateRows={["repeat(4, 1fr)"]}
+          templateColumns={["repeat(2, 1fr)"]}
+          gap="1rem"
+        >
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+        </DxcGrid>
+        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+          <ColoredContainer color="black" height="100%">
+            Footer
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Overlapping" level={4} />
+    <DxcInset bottom="2rem">
+      <ExampleContainer>
+        <DxcGrid templateRows={["50px", "50px"]}>
+          <ColoredContainer color="yellow" height="100px">
+            1
+          </ColoredContainer>
+          <ColoredContainer color="transparent" height="100px">
+            2
+          </ColoredContainer>
+        </DxcGrid>
+      </ExampleContainer>
+    </DxcInset>
+    <Title title="Implicit rows and columns" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["50px"]} templateRows={["50px", "50px"]} autoRows="50px" autoColumns="50px">
+        <DxcGrid.GridItem>
+          <ColoredContainer height="50px">1</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={2}>
+          <ColoredContainer height="50px">3</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={6} column={1}>
+          <ColoredContainer height="50px">5</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={3}>
+          <ColoredContainer height="50px">4</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
+          <ColoredContainer height="50px">2</ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Autoflow 'row' (default)" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="row" autoColumns="1fr">
+        <DxcGrid.GridItem row={{ start: 1, end: "span 2" }} column={1}>
+          <ColoredContainer height="100%">1</ColoredContainer>
+        </DxcGrid.GridItem>
+        <ColoredContainer color="lightyellow">2</ColoredContainer>
+        <ColoredContainer color="lightcyan">3</ColoredContainer>
+        <ColoredContainer color="lightgreen">4</ColoredContainer>
+        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+          <ColoredContainer color="lightpink" height="100%">
+            5
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Autoflow 'column'" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="column" autoColumns="1fr">
+        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={1}>
+          <ColoredContainer height="100%">1</ColoredContainer>
+        </DxcGrid.GridItem>
+        <ColoredContainer color="lightyellow">2</ColoredContainer>
+        <ColoredContainer color="lightcyan">3</ColoredContainer>
+        <ColoredContainer color="lightgreen">4</ColoredContainer>
+        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+          <ColoredContainer color="lightpink" height="100%">
+            5
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+  </>
+);
+
+const Container = styled.div<{ height?: string }>`
+  display: grid;
+  overflow: auto;
+  margin: 2.5rem;
+  ${({ height }) => height && `height: ${height}`};
+`;
+
+const ColoredContainer = styled.div<{ color?: string; width?: string; height?: string }>`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ color }) => color ?? "#e5d5f6"};
+  padding: 1rem;
+  border: 1px solid #a46ede;
+  border-radius: 0.5rem;
+  font-family: Open Sans, sans-serif;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #a46ede;
+
+  ${({ width }) => width && `width: ${width}`};
+  ${({ height }) => height && `height: ${height}`};
+`;

package/grid/types.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+declare type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+declare type Gap = {
+    rowGap: Spaces;
+    columnGap?: Spaces;
+} | {
+    rowGap?: Spaces;
+    columnGap: Spaces;
+} | Spaces;
+declare type GridCell = {
+    start: number | string;
+    end: number | string;
+};
+declare type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
+declare type PlaceContentValues = "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline";
+declare type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
+declare type PlaceObject<Type, Suffix extends string> = {
+    [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
+};
+declare type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
+    justify?: PlaceValues;
+    align: PlaceValues;
+}, Element> | PlaceObject<{
+    justify: PlaceValues;
+    align?: PlaceValues;
+}, Element> | PlaceValues;
+export declare type GridItemProps = {
+    /**
+     * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
+     */
+    areaName?: string;
+    /**
+     * Sets the grid-column CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+     */
+    column?: number | string | GridCell;
+    /**
+     * Sets the grid-row CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+    row?: number | string | GridCell;
+    /**
+     * Sets the place-self CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
+     */
+    placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
+    /**
+     * Sets a custom HTML tag.
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Custom content inside the grid container.
+     */
+    children: React.ReactNode;
+};
+declare type Props = GridItemProps & {
+    /**
+     * Sets the grid-auto-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+     */
+    autoColumns?: string;
+    /**
+     * Sets the grid-auto-flow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+     */
+    autoFlow?: "row" | "column" | "row dense" | "column dense";
+    /**
+     * Sets the grid-auto-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+     */
+    autoRows?: string;
+    /**
+     * Sets the gap CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     */
+    gap?: Spaces | Gap;
+    /**
+     * Sets the place-content CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
+     */
+    placeContent?: PlaceGeneric<PlaceContentValues, "content">;
+    /**
+     * Sets the place-items CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
+     */
+    placeItems?: PlaceGeneric<PlaceItemsValues, "items">;
+    /**
+     * Sets the grid-template-areas CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+     */
+    templateAreas?: string[];
+    /**
+     * Sets the grid-template-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+     */
+    templateColumns?: string[];
+    /**
+     * Sets the grid-template-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+     */
+    templateRows?: string[];
+};
+export default Props;

package/grid/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/header/Header.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import React from "react";
+import DxcDropdown from "../dropdown/Dropdown";
 import HeaderPropsType from "./types";
 declare const DxcHeader: {
     ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: HeaderPropsType): JSX.Element;
-    Dropdown: (props: any) => JSX.Element;
+    Dropdown: (props: React.ComponentProps<typeof DxcDropdown>) => JSX.Element;
 };
 export default DxcHeader;

package/header/Header.js

@@ -23,7 +23,7 @@ var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
 
 var _Icons = require("./Icons");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -257,7 +257,7 @@ var HamburguerTrigger = _styledComponents["default"].button(_templateObject8 ||
 
 var MainContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n"])));
 
-var ResponsiveMenu = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: ", ";\n\n  @media (max-width: ", "rem) and (min-width: ", "rem) {\n    //tablet\n    width: ", ";\n  }\n\n  @media (not((max-width: ", "rem) and (min-width: ", "rem))) {\n    //mobile phones\n    width: ", ";\n  }\n\n  height: 100vh;\n  padding: 20px;\n  transform: ", ";\n  opacity: ", ";\n  transition-property: transform, opacity;\n  transition-duration: 0.6s;\n  transition-timing-function: ease-in-out;\n  box-sizing: border-box;\n"])), function (props) {
+var ResponsiveMenu = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: ", ";\n\n  @media (max-width: ", "rem) and (min-width: ", "rem) {\n    width: ", ";\n  }\n\n  @media (not((max-width: ", "rem) and (min-width: ", "rem))) {\n    width: ", ";\n  }\n\n  height: 100vh;\n  padding: 20px;\n  transform: ", ";\n  opacity: ", ";\n  transition-property: transform, opacity;\n  transition-duration: 0.6s;\n  transition-timing-function: ease-in-out;\n  box-sizing: border-box;\n"])), function (props) {
   return props.theme.menuBackgroundColor;
 }, function (props) {
   return props.theme.menuZindex;
@@ -287,7 +287,7 @@ var MenuContent = _styledComponents["default"].div(_templateObject14 || (_templa
   return props.backgroundType === "dark" ? props.theme.contentColorOnDark : props.theme.contentColor;
 });
 
-var Overlay = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: ", ";\n  opacity: ", " !important;\n  visibility: ", ";\n  opacity: ", ";\n\n  @media (max-width: ", "rem) {\n    //mobile phones\n    display: none;\n  }\n\n  transition: opacity 0.2s 0.2s ease-in-out;\n  z-index: ", ";\n"])), function (props) {
+var Overlay = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: ", ";\n  opacity: ", " !important;\n  visibility: ", ";\n  opacity: ", ";\n\n  @media (max-width: ", "rem) {\n    display: none;\n  }\n\n  transition: opacity 0.2s 0.2s ease-in-out;\n  z-index: ", ";\n"])), function (props) {
   return props.theme.overlayColor;
 }, function (props) {
   return props.theme.overlayOpacity;

package/header/Header.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Header = _interopRequireDefault(require("./Header"));
+var _Header = _interopRequireDefault(require("./Header.tsx"));
 
 describe("Header component tests", function () {
   beforeAll(function () {
@@ -68,7 +68,7 @@ describe("Header component tests", function () {
     });
 
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-      responsiveContent: function responsiveContent(closeMenu) {
+      responsiveContent: function responsiveContent() {
         return /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text");
       }
     })),

package/header/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Padding = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Padding = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/heading/Heading.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 

package/heading/Heading.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Heading = _interopRequireDefault(require("./Heading"));
+var _Heading = _interopRequireDefault(require("./Heading.tsx"));
 
 describe("Heading component tests", function () {
   test("Heading renders with default level", function () {

package/inset/Inset.stories.tsx

@@ -225,5 +225,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;

package/layout/ApplicationLayout.d.ts

@@ -4,14 +4,14 @@ declare const DxcApplicationLayout: {
     ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
     Header: {
         ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: import("../header/types").default): JSX.Element;
-        Dropdown: (props: any) => JSX.Element;
+        Dropdown: (props: import("../dropdown/types").default) => JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
     Footer: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
     SideNav: {
-        ({ children, title }: import("../sidenav/types").default): JSX.Element;
+        ({ title, children }: import("../sidenav/types").default): JSX.Element;
         Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;
-        Group: ({ children, title, collapsable, icon }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
+        Group: ({ title, collapsable, icon, children }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
         Link: React.ForwardRefExoticComponent<import("../sidenav/types").SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
         Title: ({ children }: import("../sidenav/types").SidenavTitlePropsType) => JSX.Element;
     };

package/layout/ApplicationLayout.js

@@ -23,7 +23,7 @@ var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _Icons = require("./Icons");
 

package/layout/types.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-declare type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
 export declare type AppLayoutMainPropsType = {
     /**
      * Everything between the tags will be displayed as the content of the main part of the application.
@@ -35,8 +34,8 @@ declare type AppLayoutPropsType = {
      */
     footer?: React.ReactNode;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * Use the DxcApplicationLayout.Main provided to render main content.
      */
-    children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
+    children: React.ReactElement<AppLayoutMainPropsType>;
 };
 export default AppLayoutPropsType;

package/link/Link.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -82,7 +82,7 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   })));
 });
 
-var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: baseline;\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  text-decoration-color: transparent;\n  width: fit-content;\n\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: baseline;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  text-decoration-color: transparent;\n  width: fit-content;\n  ", "\n  ", "\n  color: ", ";\n  ", "\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";

package/link/Link.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Link = _interopRequireDefault(require("./Link"));
+var _Link = _interopRequireDefault(require("./Link.tsx"));
 
 describe("Link component tests", function () {
   test("Link renders with correct text", function () {
@@ -33,9 +33,7 @@ describe("Link component tests", function () {
     expect(getByText("Link").hasAttribute("href")).toBeFalsy();
 
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-      onClick: function onClick() {
-        return console.log("Andorra");
-      },
+      onClick: function onClick() {},
       disabled: true
     }, "LinkButton")),
         getByTextLinkButton = _render4.getByText;

package/link/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/main.d.ts

@@ -39,6 +39,7 @@ import DxcFlex from "./flex/Flex";
 import DxcTypography from "./typography/Typography";
 import DxcParagraph from "./paragraph/Paragraph";
 import DxcBulletedList from "./bulleted-list/BulletedList";
+import DxcGrid from "./grid/Grid";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };
+export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, };

package/main.js

@@ -115,6 +115,12 @@ Object.defineProperty(exports, "DxcFlex", {
     return _Flex["default"];
   }
 });
+Object.defineProperty(exports, "DxcGrid", {
+  enumerable: true,
+  get: function get() {
+    return _Grid["default"];
+  }
+});
 Object.defineProperty(exports, "DxcHeading", {
   enumerable: true,
   get: function get() {
@@ -360,6 +366,8 @@ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
 
 var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
 
+var _Grid = _interopRequireDefault(require("./grid/Grid"));
+
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 
 var _BackgroundColorContext = require("./BackgroundColorContext");

package/nav-tabs/NavTabs.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _NavTabs = _interopRequireDefault(require("./NavTabs"));
+var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
 
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels and attributes", function () {

package/nav-tabs/Tab.js

@@ -23,7 +23,7 @@ var _Badge = _interopRequireDefault(require("../badge/Badge"));
 
 var _NavTabs = require("./NavTabs");
 
-var _Typography = _interopRequireDefault(require("../typography/Typography"));
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -99,7 +99,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     iconPosition: iconPosition
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: icon
-  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
     color: disabled ? colorsTheme.navTabs.disabledFontColor : active ? colorsTheme.navTabs.selectedFontColor : colorsTheme.navTabs.unselectedFontColor,
     fontFamily: colorsTheme.navTabs.fontFamily,
     fontSize: colorsTheme.navTabs.fontSize,
@@ -109,7 +109,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     letterSpacing: "0.025em",
     lineHeight: "1.715em"
   }, children), notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
-    notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
+    notificationText: typeof notificationNumber === "number" && notificationNumber > 99 ? "+99" : notificationNumber,
     disabled: disabled
   })))));
 });
@@ -124,16 +124,16 @@ var TabContainer = _styledComponents["default"].div(_templateObject || (_templat
   return props.theme.disabledIconColor;
 });
 
-var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  text-decoration-color: transparent;\n  cursor: ", ";\n  background: ", ";\n\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n\n  border-radius: 4px;\n\n  ", "\n"])), function (props) {
+var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n  border-radius: 4px;\n  background: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {
   return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
 }, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
+  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
 }, function (props) {
   return props.active ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor;
 }, function (props) {
-  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
-  return !props.disabled && ":hover {\n    background: ".concat(props.theme.hoverBackgroundColor, ";\n  }\n\n  :focus {\n    outline: 2px solid ").concat(props.theme.focusOutline, ";\n  }\n\n  :active {\n    background: ").concat(props.theme.pressedBackgroundColor, ";\n    outline: 2px solid #33aaff};\n  }");
+  return !props.disabled && "\n      :hover {\n        background: ".concat(props.theme.hoverBackgroundColor, ";\n      }\n      :focus {\n        outline: 2px solid ").concat(props.theme.focusOutline, ";\n      }\n      :active {\n        background: ").concat(props.theme.pressedBackgroundColor, ";\n        outline: 2px solid #33aaff};\n      }\n  ");
 });
 
 var TabIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n\n  img,\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {

package/number-input/NumberInput.test.js

@@ -8,7 +8,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _NumberInput = _interopRequireDefault(require("./NumberInput"));
+var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
 
 describe("Number input component tests", function () {
   test("Number input renders with label", function () {