@dxc-technology/halstack-react 0.0.0-9e54008 → 0.0.0-9e83fd2

package/grid/Grid.stories.tsx

@@ -56,16 +56,16 @@ export const Chromatic = () => (
     <Title title="Place self" level={4} />
     <ExampleContainer>
       <DxcGrid templateRows={["repeat(3, 100px)"]}>
-        <DxcGrid.GridItem placeSelf="center">
+        <DxcGrid.Item placeSelf="center">
           <ColoredContainer height="50px" width="50px" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem placeSelf={{ alignSelf: "end" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "end" }}>
           <ColoredContainer height="40px" width="40px" />
           <ColoredContainer height="30px" width="30px" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
           <ColoredContainer height="50px" width="50px" />
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Halstack layout using template areas" level={4} />
@@ -76,33 +76,33 @@ export const Chromatic = () => (
         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">
+        <DxcGrid.Item areaName="header" as="header">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="main" as="main">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="main" as="main">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="sidenav" as="nav">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="sidenav" as="nav">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="footer" as="footer">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="footer" as="footer">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </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 }}>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
           <ColoredContainer color="yellow" height="100%">
             Header
           </ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem column={1}>
+        </DxcGrid.Item>
+        <DxcGrid.Item column={1}>
           <ColoredContainer color="lightcyan" height="100%">
             Sidenav
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <DxcGrid
           column={{ start: 2, end: -1 }}
           templateRows={["repeat(4, 1fr)"]}
@@ -118,11 +118,11 @@ export const Chromatic = () => (
           <ColoredContainer />
           <ColoredContainer />
         </DxcGrid>
-        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
           <ColoredContainer color="black" height="100%">
             Footer
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Overlapping" level={4} />
@@ -141,53 +141,53 @@ export const Chromatic = () => (
     <Title title="Implicit rows and columns" level={4} />
     <ExampleContainer>
       <DxcGrid templateColumns={["50px"]} templateRows={["50px", "50px"]} autoRows="50px" autoColumns="50px">
-        <DxcGrid.GridItem>
+        <DxcGrid.Item>
           <ColoredContainer height="50px">1</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={2}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={2}>
           <ColoredContainer height="50px">3</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={6} column={1}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={6} column={1}>
           <ColoredContainer height="50px">5</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={3}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={3}>
           <ColoredContainer height="50px">4</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
           <ColoredContainer height="50px">2</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </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}>
+        <DxcGrid.Item row={{ start: 1, end: "span 2" }} column={1}>
           <ColoredContainer height="100%">1</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <ColoredContainer color="lightyellow">2</ColoredContainer>
         <ColoredContainer color="lightcyan">3</ColoredContainer>
         <ColoredContainer color="lightgreen">4</ColoredContainer>
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
           <ColoredContainer color="lightpink" height="100%">
             5
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </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}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={1}>
           <ColoredContainer height="100%">1</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <ColoredContainer color="lightyellow">2</ColoredContainer>
         <ColoredContainer color="lightcyan">3</ColoredContainer>
         <ColoredContainer color="lightgreen">4</ColoredContainer>
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
           <ColoredContainer color="lightpink" height="100%">
             5
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
   </>

package/layout/ApplicationLayout.js

@@ -65,13 +65,16 @@ var defaultFooter = function defaultFooter() {
     }],
     socialLinks: [{
       href: "https://www.linkedin.com/company/dxctechnology",
-      logo: _Icons.linkedinLogo
+      logo: _Icons.linkedinLogo,
+      title: "Linkedin"
     }, {
       href: "https://twitter.com/dxctechnology",
-      logo: _Icons.twitterLogo
+      logo: _Icons.twitterLogo,
+      title: "Twitter"
     }, {
       href: "https://www.facebook.com/DXCTechnology/",
-      logo: _Icons.facebookLogo
+      logo: _Icons.facebookLogo,
+      title: "Facebook"
     }]
   });
 };
@@ -160,7 +163,7 @@ var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_te
 
 var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 
-var MainContentContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
+var MainContentContainer = _styledComponents["default"].main(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n  background-color: #fff;\n"])));
 
 DxcApplicationLayout.Header = _Header["default"];
 DxcApplicationLayout.Main = Main;

package/number-input/NumberInput.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
 import NumberInputPropsType from "./types";
+declare type NumberInputContextProps = {
+    typeNumber?: string;
+    minNumber?: number;
+    maxNumber?: number;
+    stepNumber?: number;
+};
+export declare const NumberInputContext: React.Context<NumberInputContextProps>;
 declare const DxcNumberInput: React.ForwardRefExoticComponent<NumberInputPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcNumberInput;

package/number-input/NumberInput.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.NumberInputContext = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,10 +15,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
-var _NumberInputContext = _interopRequireDefault(require("./NumberInputContext"));
-
 var _templateObject;
 
+var NumberInputContext = /*#__PURE__*/_react["default"].createContext(null);
+
+exports.NumberInputContext = NumberInputContext;
+
 var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
       name = _ref.name,
@@ -41,7 +43,7 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
       margin = _ref.margin,
       size = _ref.size,
       tabIndex = _ref.tabIndex;
-  return /*#__PURE__*/_react["default"].createElement(_NumberInputContext["default"].Provider, {
+  return /*#__PURE__*/_react["default"].createElement(NumberInputContext.Provider, {
     value: {
       typeNumber: "number",
       minNumber: min,