@dxc-technology/halstack-react 0.0.0-0e90110 → 0.0.0-1021ecf

package/footer/{Footer.stories.jsx → Footer.stories.tsx}

@@ -28,28 +28,7 @@ const social = [
   },
   {
     href: "https://twitter.com/dxctechnology",
-    logo: (
-      <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 438.536 438.536" fill="currentColor">
-        <g>
-          <path
-            d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
-  C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
-  h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
-  C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71
-  c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115
-  c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836
-  c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991
-  c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279
-  c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571
-  c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264
-  c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704
-  c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846
-  c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708
-  C357.458,149.793,347.462,160.166,335.471,168.735z"
-          />
-        </g>
-      </svg>
-    ),
+    logo: "http://assets.stickpng.com/images/580b57fcd9996e24bc43c53e.png",
   },
   {
     href: "https://www.facebook.com/DXCTechnology/",

package/footer/Icons.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const dxcLogo: JSX.Element;

package/footer/Icons.js

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.dxcLogo = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _default = /*#__PURE__*/_react["default"].createElement("svg", {
+var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
   xmlns: "http://www.w3.org/2000/svg",
   width: "280.781",
@@ -74,4 +74,4 @@ var _default = /*#__PURE__*/_react["default"].createElement("svg", {
   fill: "#fff"
 })));
 
-exports["default"] = _default;
+exports.dxcLogo = dxcLogo;

package/footer/types.d.ts

@@ -6,30 +6,26 @@ declare type Size = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.SVGProps<SVGSVGElement>;
 declare type SocialLink = {
     /**
      * Element used as the icon for the link.
      */
-    logo?: SVG;
-    /**
-     * @deprecated The path of an icon for the link.
-     */
-    logoSrc?: string;
+    logo: string | SVG;
     /**
      * URL of the page the link goes to.
      */
-    href?: string;
+    href: string;
 };
 declare type BottomLink = {
     /**
      * Text for the link.
      */
-    text?: string;
+    text: string;
     /**
      * URL of the page the link goes to.
      */
-    href?: string;
+    href: string;
 };
 declare type FooterPropsType = {
     /**

package/header/Icons.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const dxcLogo: JSX.Element;

package/heading/Heading.stories.tsx

@@ -28,9 +28,9 @@ export const Chromatic = () => (
       <Title title="'light' Weight" theme="light" level={4} />
       <DxcHeading text="Heading for sections within the page" level={2} weight="light" />
       <Title title="'normal' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={4} weight="normal" />
+      <DxcHeading text="Heading for sections within the page" level={2} weight="normal" />
       <Title title="'bold' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" weight="bold" />
+      <DxcHeading text="Heading for sections within the page" level={2} weight="bold" />
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
@@ -48,6 +48,7 @@ export const Chromatic = () => (
       <DxcHeading text="Xlarge" margin="xlarge" />
       <Title title="Xxlarge" theme="light" level={4} />
       <DxcHeading text="Xxlarge" margin="xxlarge" />
+      <hr />
     </ExampleContainer>
   </>
 );

package/layout/ApplicationLayout.js

@@ -169,6 +169,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
   }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(SideNavArrowContainer, {
     isSideNavVisible: isSideNavVisible
   }, sideNav, /*#__PURE__*/_react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && /*#__PURE__*/_react["default"].createElement(ArrowTrigger, {
+    role: "button",
     tabIndex: 0,
     onClick: handleSidenav,
     isSideNavVisible: isSideNavVisible
@@ -212,7 +213,7 @@ var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8 ||
 
 var ArrowContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  height: calc(100vh - 64px);\n  left: 279px;\n"])));
 
-var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  top: 45vh;\n  width: 42px;\n  min-height: 42px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.4s ease-in-out;\n  z-index: 1250;\n  cursor: pointer;\n  & > svg {\n    fill: ", ";\n  }\n"])), function (props) {
+var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  top: 45vh;\n  width: 42px;\n  min-height: 42px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.4s ease-in-out;\n  z-index: 1250;\n  cursor: pointer;\n  & > svg {\n    fill: ", ";\n  }\n  :focus {\n    outline: #0095ff auto 1px;\n  }\n"])), function (props) {
   return "".concat(props.theme.arrowContainerColor);
 }, function (props) {
   return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";

package/layout/ApplicationLayout.stories.tsx

@@ -0,0 +1,171 @@
+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';
+import { userEvent, within, waitFor } from "@storybook/testing-library";
+
+export default {
+  title: "Application Layout ",
+  component: DxcApplicationLayout,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    }
+  }
+};
+
+export const DefaultApplicationLayout = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.Main>
+        <Title title="Default application layout" theme="light" level={4} />
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithPushSidenav = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.SideNav mode="push">
+        <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithArrowSidenav = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.SideNav mode="overlay" displayArrow>
+        <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithResponsiveSidenav = () => (
+  <>
+    <DxcApplicationLayout>
+      <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+ApplicationLayoutWithResponsiveSidenav.parameters = {
+  viewport: {
+    defaultViewport: 'pixel',
+  },
+};
+
+export const ApplicationLayoutWithCustomHeader = () => (
+  <>
+    <DxcApplicationLayout>
+      <DxcApplicationLayout.Header> <p>Custom Header</p> </DxcApplicationLayout.Header>
+      <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.Main>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutWithCustomFooter = () => (
+  <>
+    <DxcApplicationLayout>
+      <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.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>
+  </>
+);
+
+export const ApplicationLayoutWithClosingSidenav = ApplicationLayoutWithArrowSidenav.bind({});
+ApplicationLayoutWithClosingSidenav.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const arrow = canvas.getByRole("button");
+  await userEvent.click(arrow);
+};

package/list/List.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare type ListProps = {
+    children: React.ReactNode;
+    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    type?: "disc" | "circle" | "square" | "number";
+};
+declare function List({ children, type, gutter }: ListProps): JSX.Element;
+export default List;

package/list/List.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Stack = _interopRequireDefault(require("../stack/Stack"));
+
+var _Text = _interopRequireDefault(require("../text/Text"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function List(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "disc" : _ref$type,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
+  return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+    as: type === "number" ? "ol" : "ul",
+    gutter: gutter
+  }, _react["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
+  }));
+}
+
+var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  user-select: none;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
+
+var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: black;\n  width: 5px;\n  height: 5px;\n  flex-shrink: 0;\n  margin-top: 8px;\n  margin-right: 10px;\n"])));
+
+var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  border: 1px solid black;\n  flex-shrink: 0;\n  margin-top: 8px;\n  margin-right: 10px;\n  box-sizing: border-box;\n"])));
+
+var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: black;\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 8px;\n  margin-right: 10px;\n"])));
+
+var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  padding: 0px;\n  list-style: none;\n  display: flex;\n"])));
+
+var _default = List;
+exports["default"] = _default;

package/list/List.stories.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import styled from "styled-components";
+import Title from "../../.storybook/components/Title";
+import DxcList from "./List";
+import DxcText from "../text/Text";
+
+export default {
+  title: "List",
+  component: DxcList,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default list" theme="light" level={4} />
+    <DxcList>
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="Number" theme="light" level={4} />
+    <DxcList type="number">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="Square" theme="light" level={4} />
+    <DxcList type="square">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="Circle" theme="light" level={4} />
+    <DxcList type="circle">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="Multiple lines" theme="light" level={4} />
+    <Container>
+      <DxcList>
+        <DxcText>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </DxcText>
+        <DxcText>Text 2.</DxcText>
+      </DxcList>
+    </Container>
+    <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <DxcList gutter="xxsmall">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = xxsmall" theme="light" level={4} />
+    <DxcList gutter="xxsmall">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = xsmall" theme="light" level={4} />
+    <DxcList gutter="xsmall">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = small" theme="light" level={4} />
+    <DxcList gutter="small">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = medium" theme="light" level={4} />
+    <DxcList gutter="medium">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = large" theme="light" level={4} />
+    <DxcList gutter="large">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = xlarge" theme="light" level={4} />
+    <DxcList gutter="xlarge">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = xxlarge" theme="light" level={4} />
+    <DxcList gutter="xxlarge">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+    <Title title="gutter = xxxlarge" theme="light" level={4} />
+    <DxcList gutter="xxxlarge">
+      <DxcText>Text 1.</DxcText>
+      <DxcText>Text 2.</DxcText>
+    </DxcList>
+
+  </>
+);
+
+const Container = styled.div`
+  width: 400px;
+`;

package/main.d.ts

@@ -39,6 +39,10 @@ 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 ThemeContext, { ThemeProvider } from "./ThemeContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, V3DxcSelect, DxcInput, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcDate, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcUpload, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, V3DxcTextarea, DxcResultsetTable, DxcChip, DxcApplicationLayout, ThemeContext, ThemeProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, };
+export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, V3DxcSelect, DxcInput, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcDate, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcUpload, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, V3DxcTextarea, DxcResultsetTable, DxcChip, DxcApplicationLayout, ThemeContext, ThemeProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, };

package/main.js

@@ -133,6 +133,12 @@ Object.defineProperty(exports, "DxcLink", {
     return _Link["default"];
   }
 });
+Object.defineProperty(exports, "DxcList", {
+  enumerable: true,
+  get: function get() {
+    return _List["default"];
+  }
+});
 Object.defineProperty(exports, "DxcNumberInput", {
   enumerable: true,
   get: function get() {
@@ -169,6 +175,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() {
@@ -193,6 +205,12 @@ 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() {
@@ -217,6 +235,12 @@ 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() {
@@ -354,6 +378,14 @@ 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 _ThemeContext = _interopRequireWildcard(require("./ThemeContext"));
 
 var _BackgroundColorContext = require("./BackgroundColorContext");

package/number-input/NumberInput.js

@@ -20,13 +20,11 @@ var _NumberInputContext = _interopRequireDefault(require("./NumberInputContext")
 var _templateObject;
 
 var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       _ref$disabled = _ref.disabled,
@@ -43,8 +41,7 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
       step = _ref$step === void 0 ? 1 : _ref$step,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-0e90110",
+  "version": "0.0.0-1021ecf",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -24,6 +24,8 @@
     "@material-ui/lab": "4.0.0-alpha.17",
     "@material-ui/pickers": "3.2.2",
     "@material-ui/styles": "4.0.2",
+    "@types/styled-components": "^5.1.24",
+    "@types/uuid": "^8.3.4",
     "color": "^3.1.3",
     "date-fns": "^2.0.0-beta.4",
     "moment": "2.24.0",
@@ -52,8 +54,8 @@
     "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-links": "^6.4.9",
     "@storybook/react": "^6.4.9",
-    "@testing-library/react": "^11.2.5",
     "@storybook/testing-library": "0.0.7",
+    "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",

package/paginator/Paginator.js

@@ -67,9 +67,6 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: itemsPerPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
   }))), /*#__PURE__*/_react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
@@ -109,9 +106,6 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: currentPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
   }))) || /*#__PURE__*/_react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",