@dxc-technology/halstack-react 0.0.0-dcd93c4 → 0.0.0-dddc3c4

package/layout/ApplicationLayout.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import DxcApplicationLayout from "./ApplicationLayout";
-import DxcSidenav from "../sidenav/Sidenav";
 import Title from "../../.storybook/components/Title";
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
@@ -30,15 +29,25 @@ export const DefaultApplicationLayout = () => (
 
 export const ApplicationLayoutWithDefaultSidenav = () => (
   <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with sidenav</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
@@ -51,15 +60,26 @@ export const ApplicationLayoutWithDefaultSidenav = () => (
 
 export const ApplicationLayoutWithResponsiveSidenav = () => (
   <>
-    <DxcApplicationLayout visibilityToggleLabel="Example">
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      visibilityToggleLabel="Example"
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
@@ -74,23 +94,31 @@ ApplicationLayoutWithResponsiveSidenav.parameters = {
   viewport: {
     defaultViewport: "pixel",
   },
+  chromatic: { viewports: [540] },
 };
 
 export const ApplicationLayoutWithCustomHeader = () => (
   <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.Header>
-        {" "}
-        <p>Custom Header</p>{" "}
-      </DxcApplicationLayout.Header>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with custom header</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      header={<p>Custom Header</p>}
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
@@ -103,24 +131,32 @@ export const ApplicationLayoutWithCustomHeader = () => (
 
 export const ApplicationLayoutWithCustomFooter = () => (
   <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with custom footer</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
+    <DxcApplicationLayout
+      footer={<p>Custom Footer</p>}
+      sidenav={
+        <DxcApplicationLayout.SideNav
+          title={
+            <DxcApplicationLayout.SideNav.Title>
+              Application layout with push sidenav
+            </DxcApplicationLayout.SideNav.Title>
+          }
+        >
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
       <DxcApplicationLayout.Main>
         <p>Main Content</p>
         <p>Main Content</p>
         <p>Main Content</p>
         <p>Main Content</p>
       </DxcApplicationLayout.Main>
-      <DxcApplicationLayout.Footer>
-        <p>Custom Footer</p>
-      </DxcApplicationLayout.Footer>
     </DxcApplicationLayout>
   </>
 );

package/layout/types.d.ts

@@ -1,42 +1,20 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type ChildrenType = AppLayoutHeaderPropsType | AppLayoutMainPropsType | AppLayoutFooterPropsType | AppLayoutSidenavPropsType;
-export declare type AppLayoutHeaderPropsType = {
-    /**
-     * Everything between this tags will be displayed as a header, at the top of the screen.
-     * This is optional and if it is not specified, the DxcHeader will be shown by default.
-     */
-    children?: React.ReactNode;
-};
+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.
      */
     children: React.ReactNode;
 };
-export declare type AppLayoutFooterPropsType = {
-    /**
-     * Everything between the tags will be displayed as a footer, at the bottom of the screen.
-     * This is optional and if it is not specified, the DxcFooter will be shown by default.
-     */
-    children?: React.ReactNode;
-};
 export declare type AppLayoutSidenavPropsType = {
     /**
-     * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
-    padding?: Space | Padding;
+    children: React.ReactNode;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
-    children: React.ReactNode;
+    title?: React.ReactNode;
 };
 declare type AppLayoutPropsType = {
     /**
@@ -44,6 +22,18 @@ declare type AppLayoutPropsType = {
      * visibility of the sidenav.
      */
     visibilityToggleLabel?: string;
+    /**
+     * Header content.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sidenav content
+     */
+    sidenav?: React.ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: React.ReactNode;
     /**
      * The area inside the sidenav. This area can be used to render custom content.
      */

package/link/Link.js

@@ -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  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\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) {
   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.stories.tsx

@@ -68,11 +68,18 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Long text with hover" theme="light" level={4} />
-      Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
-      do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum.
+      Lorem{" "}
+      <DxcLink href="https://www.google.com" icon={icon}>
+        Test
+      </DxcLink>{" "}
+      ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit{" "}
+      <DxcLink href="https://www.google.com" icon={icon} iconPosition="after">
+        Test
+      </DxcLink>{" "}
+      anim id est laborum.
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Long text with focus" theme="light" level={4} />

package/link/types.d.ts

@@ -6,7 +6,7 @@ export declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 export declare type LinkProps = {
     /**
      * If true, the color is inherited from parent.

package/main.d.ts

@@ -5,8 +5,6 @@ import DxcCard from "./card/Card";
 import DxcCheckbox from "./checkbox/Checkbox";
 import DxcDialog from "./dialog/Dialog";
 import DxcDropdown from "./dropdown/Dropdown";
-import DxcFooter from "./footer/Footer";
-import DxcHeader from "./header/Header";
 import DxcSlider from "./slider/Slider";
 import DxcSwitch from "./switch/Switch";
 import DxcTabs from "./tabs/Tabs";
@@ -16,7 +14,6 @@ import DxcTable from "./table/Table";
 import DxcBox from "./box/Box";
 import DxcTag from "./tag/Tag";
 import DxcPaginator from "./paginator/Paginator";
-import DxcSidenav from "./sidenav/Sidenav";
 import DxcWizard from "./wizard/Wizard";
 import DxcLink from "./link/Link";
 import DxcHeading from "./heading/Heading";
@@ -33,16 +30,15 @@ import DxcNumberInput from "./number-input/NumberInput";
 import DxcTextarea from "./textarea/Textarea";
 import DxcSelect from "./select/Select";
 import DxcFileInput from "./file-input/FileInput";
-import DxcStack from "./stack/Stack";
-import DxcRow from "./row/Row";
-import DxcText from "./text/Text";
-import DxcList from "./list/List";
 import DxcRadioGroup from "./radio-group/RadioGroup";
 import DxcBleed from "./bleed/Bleed";
 import DxcInset from "./inset/Inset";
 import DxcQuickNav from "./quick-nav/QuickNav";
 import DxcNavTabs from "./tabs-nav/NavTabs";
-import DxcInline from "./inline/Inline";
+import DxcFlex from "./flex/Flex";
+import DxcTypography from "./typography/Typography";
+import DxcParagraph from "./paragraph/Paragraph";
+import DxcBulletedList from "./bulleted-list/BulletedList";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcInline, };
+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, };

package/main.js

@@ -55,6 +55,12 @@ Object.defineProperty(exports, "DxcBox", {
     return _Box["default"];
   }
 });
+Object.defineProperty(exports, "DxcBulletedList", {
+  enumerable: true,
+  get: function get() {
+    return _BulletedList["default"];
+  }
+});
 Object.defineProperty(exports, "DxcButton", {
   enumerable: true,
   get: function get() {
@@ -103,16 +109,10 @@ Object.defineProperty(exports, "DxcFileInput", {
     return _FileInput["default"];
   }
 });
-Object.defineProperty(exports, "DxcFooter", {
+Object.defineProperty(exports, "DxcFlex", {
   enumerable: true,
   get: function get() {
-    return _Footer["default"];
-  }
-});
-Object.defineProperty(exports, "DxcHeader", {
-  enumerable: true,
-  get: function get() {
-    return _Header["default"];
+    return _Flex["default"];
   }
 });
 Object.defineProperty(exports, "DxcHeading", {
@@ -121,12 +121,6 @@ Object.defineProperty(exports, "DxcHeading", {
     return _Heading["default"];
   }
 });
-Object.defineProperty(exports, "DxcInline", {
-  enumerable: true,
-  get: function get() {
-    return _Inline["default"];
-  }
-});
 Object.defineProperty(exports, "DxcInset", {
   enumerable: true,
   get: function get() {
@@ -139,12 +133,6 @@ Object.defineProperty(exports, "DxcLink", {
     return _Link["default"];
   }
 });
-Object.defineProperty(exports, "DxcList", {
-  enumerable: true,
-  get: function get() {
-    return _List["default"];
-  }
-});
 Object.defineProperty(exports, "DxcNavTabs", {
   enumerable: true,
   get: function get() {
@@ -163,6 +151,12 @@ Object.defineProperty(exports, "DxcPaginator", {
     return _Paginator["default"];
   }
 });
+Object.defineProperty(exports, "DxcParagraph", {
+  enumerable: true,
+  get: function get() {
+    return _Paragraph["default"];
+  }
+});
 Object.defineProperty(exports, "DxcPasswordInput", {
   enumerable: true,
   get: function get() {
@@ -193,24 +187,12 @@ Object.defineProperty(exports, "DxcResultsetTable", {
     return _ResultsetTable["default"];
   }
 });
-Object.defineProperty(exports, "DxcRow", {
-  enumerable: true,
-  get: function get() {
-    return _Row["default"];
-  }
-});
 Object.defineProperty(exports, "DxcSelect", {
   enumerable: true,
   get: function get() {
     return _Select["default"];
   }
 });
-Object.defineProperty(exports, "DxcSidenav", {
-  enumerable: true,
-  get: function get() {
-    return _Sidenav["default"];
-  }
-});
 Object.defineProperty(exports, "DxcSlider", {
   enumerable: true,
   get: function get() {
@@ -223,12 +205,6 @@ Object.defineProperty(exports, "DxcSpinner", {
     return _Spinner["default"];
   }
 });
-Object.defineProperty(exports, "DxcStack", {
-  enumerable: true,
-  get: function get() {
-    return _Stack["default"];
-  }
-});
 Object.defineProperty(exports, "DxcSwitch", {
   enumerable: true,
   get: function get() {
@@ -253,12 +229,6 @@ Object.defineProperty(exports, "DxcTag", {
     return _Tag["default"];
   }
 });
-Object.defineProperty(exports, "DxcText", {
-  enumerable: true,
-  get: function get() {
-    return _Text["default"];
-  }
-});
 Object.defineProperty(exports, "DxcTextInput", {
   enumerable: true,
   get: function get() {
@@ -277,6 +247,12 @@ Object.defineProperty(exports, "DxcToggleGroup", {
     return _ToggleGroup["default"];
   }
 });
+Object.defineProperty(exports, "DxcTypography", {
+  enumerable: true,
+  get: function get() {
+    return _Typography["default"];
+  }
+});
 Object.defineProperty(exports, "DxcWizard", {
   enumerable: true,
   get: function get() {
@@ -316,10 +292,6 @@ var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
 
 var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
 
-var _Footer = _interopRequireDefault(require("./footer/Footer"));
-
-var _Header = _interopRequireDefault(require("./header/Header"));
-
 var _Slider = _interopRequireDefault(require("./slider/Slider"));
 
 var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -338,8 +310,6 @@ var _Tag = _interopRequireDefault(require("./tag/Tag"));
 
 var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
 
-var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
-
 var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
 
 var _Link = _interopRequireDefault(require("./link/Link"));
@@ -372,14 +342,6 @@ var _Select = _interopRequireDefault(require("./select/Select"));
 
 var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
 
-var _Stack = _interopRequireDefault(require("./stack/Stack"));
-
-var _Row = _interopRequireDefault(require("./row/Row"));
-
-var _Text = _interopRequireDefault(require("./text/Text"));
-
-var _List = _interopRequireDefault(require("./list/List"));
-
 var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
 
 var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
@@ -390,7 +352,13 @@ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
 
 var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
 
-var _Inline = _interopRequireDefault(require("./inline/Inline"));
+var _Flex = _interopRequireDefault(require("./flex/Flex"));
+
+var _Typography = _interopRequireDefault(require("./typography/Typography"));
+
+var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
+
+var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
 
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-dcd93c4",
+  "version": "0.0.0-dddc3c4",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
-  "homepage": "http://developer.dxc.com/tools/react",
+  "homepage": "https://developer.dxc.com/halstack",
   "license": "Apache-2.0",
   "author": {
     "name": "DXC Technology",
     "email": "DigitalInsurance@dxc.com",
-    "url": "https://dxc.com"
+    "url": "https://developer.dxc.com"
   },
   "main": "./main.js",
   "types": "./main.d.ts",
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.0.1"
   },
   "dependencies": {
@@ -56,9 +56,9 @@
     "@storybook/addon-links": "^6.4.9",
     "@storybook/react": "^6.4.9",
     "@storybook/testing-library": "0.0.7",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^12.6.3",
-    "@types/react": "16.9.5",
+    "@types/react": "^18.0.18",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "chromatic": "^6.3.3",
@@ -73,8 +73,8 @@
     "eslint-plugin-storybook": "^0.5.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.5.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-test-renderer": "^16.8.6",
     "storybook-addon-pseudo-states": "^1.0.0",
     "styled-components": "^5.0.1",

package/paragraph/Paragraph.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type ParagraphPropsType = {
+    children: React.ReactNode;
+};
+declare const Paragraph: ({ children }: ParagraphPropsType) => JSX.Element;
+export default Paragraph;

package/paragraph/Paragraph.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Typography = _interopRequireDefault(require("../typography/Typography"));
+
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Paragraph = function Paragraph(_ref) {
+  var children = _ref.children;
+  var colorsTheme = (0, _useTheme["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    as: "p",
+    display: colorsTheme.paragraph.display,
+    fontSize: colorsTheme.paragraph.fontSize,
+    fontWeight: colorsTheme.paragraph.fontWeight,
+    color: backgroundType && backgroundType === "dark" ? colorsTheme.paragraph.fontColorOnDark : colorsTheme.paragraph.fontColor
+  }, children);
+};
+
+var _default = Paragraph;
+exports["default"] = _default;

package/paragraph/Paragraph.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import DxcParagraph from "./Paragraph";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DarkContainer from "../../.storybook/components/DarkSection";
+
+export default {
+  title: "Paragraph",
+  component: DxcParagraph,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default Paragraph" level={4} />
+      <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. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur
+        semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus
+        eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit
+        iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa
+        condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl.
+        Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.
+      </DxcParagraph>
+    </ExampleContainer>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <Title title="Default Paragraph" theme="dark" level={4} />
+        <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. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur
+          semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus
+          eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit
+          iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa
+          condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl.
+          Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.
+        </DxcParagraph>
+      </DarkContainer>
+    </BackgroundColorProvider>
+  </>
+);

package/progress-bar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import ProgressBarPropsType from "./types";
-declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: ProgressBarPropsType) => JSX.Element;
+import { Props } from "./types";
+declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props) => JSX.Element;
 export default DxcProgressBar;