@dxc-technology/halstack-react 0.0.0-84c9364 → 0.0.0-850ec24

package/file-input/FileInput.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import FileInputPropsType from "./types";
+declare const DxcFileInput: ({ name, mode, label, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, value, margin, tabIndex, }: FileInputPropsType) => JSX.Element;
+export default DxcFileInput;

package/file-input/FileInput.js

@@ -23,8 +23,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _uuid = require("uuid");
@@ -103,7 +101,8 @@ var DxcFileInput = function DxcFileInput(_ref) {
       callbackFile = _ref.callbackFile,
       value = _ref.value,
       margin = _ref.margin,
-      tabIndex = _ref.tabIndex;
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -329,8 +328,7 @@ var DxcFileInput = function DxcFileInput(_ref) {
     theme: colorsTheme.fileInput
   }, /*#__PURE__*/_react["default"].createElement(FileInputContainer, {
     margin: margin,
-    name: name,
-    tabIndex: tabIndex
+    name: name
   }, /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: fileInputId,
     disabled: disabled
@@ -368,7 +366,8 @@ var DxcFileInput = function DxcFileInput(_ref) {
       numFiles: files.length,
       preview: file.preview,
       type: file.file.type,
-      onDelete: onDelete
+      onDelete: onDelete,
+      tabIndex: tabIndex
     })));
   })) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(DragDropArea, {
     isDragging: isDragging,
@@ -408,7 +407,8 @@ var DxcFileInput = function DxcFileInput(_ref) {
       numFiles: files.length,
       preview: file.preview,
       type: file.file.type,
-      onDelete: onDelete
+      onDelete: onDelete,
+      tabIndex: tabIndex
     }));
   }))));
 };
@@ -507,26 +507,5 @@ var ErrorMessage = _styledComponents["default"].div(_templateObject11 || (_templ
   return props.theme.errorMessageLineHeight;
 });
 
-DxcFileInput.propTypes = {
-  name: _propTypes["default"].string,
-  mode: _propTypes["default"].oneOf(["file", "filedrop", "dropzone"]),
-  label: _propTypes["default"].string,
-  helperText: _propTypes["default"].string,
-  accept: _propTypes["default"].array,
-  maxSize: _propTypes["default"].number,
-  minSize: _propTypes["default"].number,
-  multiple: _propTypes["default"].bool,
-  showPreview: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  callbackFile: _propTypes["default"].func,
-  value: _propTypes["default"].array,
-  tabIndex: _propTypes["default"].number,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
 var _default = DxcFileInput;
 exports["default"] = _default;

package/file-input/FileItem.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare const FileItem: ({ mode, multiple, name, error, showPreview, preview, type, numFiles, onDelete, tabIndex, }: {
+    mode: any;
+    multiple: any;
+    name?: string;
+    error?: string;
+    showPreview: any;
+    preview: any;
+    type: any;
+    numFiles: any;
+    onDelete: any;
+    tabIndex: any;
+}) => JSX.Element;
+export default FileItem;

package/file-input/FileItem.js

@@ -13,8 +13,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
@@ -59,7 +57,8 @@ var FileItem = function FileItem(_ref) {
       preview = _ref.preview,
       type = _ref.type,
       numFiles = _ref.numFiles,
-      onDelete = _ref.onDelete;
+      onDelete = _ref.onDelete,
+      tabIndex = _ref.tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
   var isImage = type.includes("image");
 
@@ -104,7 +103,8 @@ var FileItem = function FileItem(_ref) {
     onClick: function onClick() {
       return onDelete(name);
     },
-    "aria-label": "Remove ".concat(name)
+    "aria-label": "Remove ".concat(name),
+    tabIndex: tabIndex
   }, deleteIcon)), error && (multiple || numFiles > 1) && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, error))));
 };
 
@@ -178,16 +178,5 @@ var ErrorMessage = _styledComponents["default"].span(_templateObject10 || (_temp
   return props.theme.errorMessageLineHeight;
 });
 
-FileItem.propTypes = {
-  mode: _propTypes["default"].string,
-  multiple: _propTypes["default"].bool,
-  name: _propTypes["default"].string,
-  type: _propTypes["default"].string,
-  showPreview: _propTypes["default"]["boolean"],
-  numFiles: _propTypes["default"].number,
-  preview: _propTypes["default"].string,
-  error: _propTypes["default"].string,
-  onDelete: _propTypes["default"].func
-};
 var _default = FileItem;
 exports["default"] = _default;

package/file-input/types.d.ts

@@ -0,0 +1,87 @@
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type FileData = {
+    /**
+     * Selected file.
+     */
+    file: File;
+    /**
+     * Error of the file. If it is defined, it will be shown and the file item will be mark as invalid.
+     */
+    error?: string;
+    /**
+     * Preview of the file.
+     */
+    preview?: string;
+};
+declare type Props = {
+    /**
+     * Name attribute.
+     */
+    name?: string;
+    /**
+     * Text to be placed above the component.
+     */
+    label?: string;
+    /**
+     * Uses one of the available file input modes:
+     *    'file': Files are selected by clicking the button and selecting it through the file explorer.
+     *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
+     */
+    mode?: "file" | "filedrop" | "dropzone";
+    /**
+     * Helper text to be placed above the component.
+     */
+    helperText?: string;
+    /**
+     * The file types that the component accepts. Its value must be one of all the possible values of the HTML file input's accept attribute.
+     */
+    accept?: string;
+    /**
+     * An array of files representing the selected files.
+     */
+    value: FileData[];
+    /**
+     * The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error.
+     */
+    minSize?: number;
+    /**
+     * The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error.
+     */
+    maxSize?: number;
+    /**
+     * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
+     */
+    showPreview?: boolean;
+    /**
+     * If true, the component allows multiple file items and will show all of them. If false, only one file will be shown, and if there is already one
+     *  file selected and a new one is chosen, it will be replaced by the new selected one.
+     */
+    multiple?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * This function will be called when the user selects or drops a file. The list of files will be sent as a parameter.
+     * In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.
+     */
+    callbackFile: (files: FileData[]) => void;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/file-input/types.js

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

package/footer/types.d.ts

@@ -38,7 +38,7 @@ declare type FooterPropsType = {
      * The center section of the footer. Can be used to render custom
      * content in this area.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * The text that will be displayed as copyright disclaimer.
      */

package/header/Header.stories.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import DxcHeader from "./Header";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+
+export default {
+  title: "Header",
+  component: DxcHeader,
+};
+
+const options: any = [
+  {
+    value: 1,
+    label: "Amazon",
+  },
+];
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default with dropdown" theme="light" level={4} />
+      <DxcHeader content={<DxcHeader.Dropdown options={options} label="Default Dropdown" />} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Underlined with text" theme="light" level={4} />
+      <DxcHeader underlined content={<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Responsive" theme="light" level={4} />
+      <div style={{ width: "400px" }}>
+        <DxcHeader
+          responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+          underlined
+        />
+      </div>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xxsmall" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xsmall" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcHeader underlined margin="small" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcHeader underlined margin="medium" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcHeader underlined margin="large" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xlarge" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xxlarge" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+
+    <Title title="Paddings" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small padding" theme="light" level={4} />
+      <DxcHeader underlined padding="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium padding" theme="light" level={4} />
+      <DxcHeader underlined padding="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large padding" theme="light" level={4} />
+      <DxcHeader underlined padding="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xxlarge" />
+    </ExampleContainer>
+  </>
+);
+
+const RespHeader = () => (
+  <ExampleContainer>
+    <Title title="Responsive" theme="light" level={4} />
+    <div style={{ maxWidth: "400px" }}>
+      <DxcHeader
+        responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+        underlined
+      />
+    </div>
+  </ExampleContainer>
+);
+
+const RespHeaderFocus = () => (
+  <ExampleContainer pseudoState="pseudo-focus">
+    <Title title="Responsive" theme="light" level={4} />
+    <div style={{ maxWidth: "400px" }}>
+      <DxcHeader
+        responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
+        underlined
+      />
+    </div>
+  </ExampleContainer>
+);
+
+const RespHeaderHover = () => (
+  <ExampleContainer pseudoState="pseudo-hover">
+    <Title title="Responsive" theme="light" level={4} />
+    <div style={{ maxWidth: "400px" }}>
+      <DxcHeader
+        responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
+        underlined
+      />
+    </div>
+  </ExampleContainer>
+);
+
+export const ResponsiveHeader = RespHeader.bind({});
+ResponsiveHeader.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
+  await userEvent.click(canvas.getByText("Menu"));
+};
+
+export const ResponsiveHeaderFocus = RespHeaderFocus.bind({});
+ResponsiveHeaderFocus.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
+  await userEvent.click(canvas.getByText("Menu"));
+};
+
+export const ResponsiveHeaderHover = RespHeaderHover.bind({});
+ResponsiveHeaderHover.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
+  await userEvent.click(canvas.getByText("Menu"));
+};

package/header/types.d.ts

@@ -27,11 +27,13 @@ declare type Props = {
      */
     onClick?: () => void;
     /**
-     * Size of the bottom margin to be applied to the header.
+     * Size of the bottom margin to be applied to the header
+     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      */
     margin?: Space;
     /**
-     * Size of the padding to be applied to the custom area of the component.
+     * Size of the padding to be applied to the custom area of the component
+     * ('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.
      */

package/heading/Heading.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import HeadingPropsType from "./types";
+declare const DxcHeading: ({ level, text, as, weight, margin }: HeadingPropsType) => JSX.Element;
+export default DxcHeading;

package/heading/Heading.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -19,8 +17,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
@@ -37,8 +33,7 @@ var DxcHeading = function DxcHeading(_ref) {
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? "" : _ref$text,
       as = _ref.as,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? "" : _ref$weight,
+      weight = _ref.weight,
       margin = _ref.margin;
   var colorsTheme = (0, _useTheme["default"])();
 
@@ -51,19 +46,19 @@ var DxcHeading = function DxcHeading(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(HeadingContainer, {
     margin: margin
   }, level === 1 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel1, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : level === 2 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel2, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : level === 3 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel3, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : level === 4 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel4, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : /*#__PURE__*/_react["default"].createElement(HeadingLevel5, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text)));
 };
@@ -160,17 +155,5 @@ var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6 || (_templa
   return props.theme.level5FontColor;
 });
 
-DxcHeading.propTypes = {
-  level: _propTypes["default"].number,
-  text: _propTypes["default"].string,
-  as: _propTypes["default"].oneOf(["h1", "h2", "h3", "h4", "h5"]),
-  weight: _propTypes["default"].oneOf(["light", "normal", "bold", ""]),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
 var _default = DxcHeading;
 exports["default"] = _default;

package/heading/Heading.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import DxcHeading from "./Heading";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Heading",
+  component: DxcHeading,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Levels" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Level 1" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" />
+      <Title title="Level 2" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={2} />
+      <Title title="Level 3" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={3} />
+      <Title title="Level 4" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={4} />
+      <Title title="Level 5" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={5} />
+    </ExampleContainer>
+    <Title title="Weights" theme="light" level={2} />
+    <ExampleContainer>
+      <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" />
+      <Title title="'bold' Weight" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" weight="bold" />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcHeading text="Xxsmall" margin="xxsmall" />
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcHeading text="Xsmall" margin="xsmall" />
+      <Title title="Small" theme="light" level={4} />
+      <DxcHeading text="Small" margin="small" />
+      <Title title="Medium" theme="light" level={4} />
+      <DxcHeading text="Medium" margin="medium" />
+      <Title title="Large" theme="light" level={4} />
+      <DxcHeading text="Large" margin="large" />
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcHeading text="Xlarge" margin="xlarge" />
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcHeading text="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+  </>
+);

package/heading/types.d.ts

@@ -0,0 +1,33 @@
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
+     * The html tag of the heading will be the one specified in the 'as' prop.
+     * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
+     */
+    level?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * Heading text.
+     */
+    text: string;
+    /**
+     * Specifies the html tag of the heading.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5";
+    /**
+     * Modifies the default weight of the heading.
+     */
+    weight?: "light" | "normal" | "bold";
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+};
+export default Props;

package/heading/types.js

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

package/link/Link.js

@@ -89,7 +89,7 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_tem
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  ", "\n\n  text-decoration-color: transparent;\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-width: 2px;\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  ", "\n\n  text-decoration-color: transparent;\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.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
 }, function (props) {
   return props.disabled ? "pointer-events: none;" : "";
@@ -109,7 +109,7 @@ var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateOb
   return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
 });
 
-var StyledButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  text-decoration-color: transparent;\n\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:hover {\n    ", "\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-width: 2px;\n    outline-offset: 1px;\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var StyledButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  text-decoration-color: transparent;\n\n  ", "\n  ", "\n  color: ", ";\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 "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
 }, function (props) {
   return props.disabled && "cursor: default;";