@dxc-technology/halstack-react 0.0.0-e201636 → 0.0.0-e26622f

package/dropdown/DropdownMenu.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownMenuProps } from "./types";
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLUListElement>>>;
+export default _default;

package/dropdown/DropdownMenu.js

@@ -0,0 +1,80 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _DropdownMenuItem = _interopRequireDefault(require("./DropdownMenuItem"));
+
+var _templateObject;
+
+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 DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      dropdownTriggerId = _ref.dropdownTriggerId,
+      iconsPosition = _ref.iconsPosition,
+      visualFocusIndex = _ref.visualFocusIndex,
+      menuItemOnClick = _ref.menuItemOnClick,
+      onKeyDown = _ref.onKeyDown,
+      options = _ref.options,
+      styles = _ref.styles;
+  var colorsTheme = (0, _useTheme["default"])();
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.dropdown
+  }, /*#__PURE__*/_react["default"].createElement(DropdownMenuContainer, {
+    onMouseDown: function onMouseDown(event) {
+      // Prevent the onBlur event from closing menu when clicking on the menu since it is implemented with a Portal and the menu is not a child of the container
+      event.preventDefault();
+    },
+    onKeyDown: onKeyDown,
+    id: id,
+    role: "menu",
+    "aria-labelledby": dropdownTriggerId,
+    "aria-orientation": "vertical",
+    "aria-activedescendant": "option-".concat(visualFocusIndex),
+    tabIndex: -1,
+    style: styles,
+    ref: ref
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownMenuItem["default"], {
+      id: "option-".concat(index),
+      key: "option-".concat(index),
+      visuallyFocused: index === visualFocusIndex,
+      iconPosition: iconsPosition,
+      onClick: menuItemOnClick,
+      option: option
+    });
+  })));
+});
+
+var DropdownMenuContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 230px;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  border-radius: ", ";\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  outline: none;\n"])), function (props) {
+  return props.theme.optionBackgroundColor;
+}, function (props) {
+  return props.theme.borderThickness;
+}, function (props) {
+  return props.theme.borderStyle;
+}, function (props) {
+  return props.theme.borderColor;
+}, function (props) {
+  return props.theme.borderRadius;
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(DropdownMenu);
+
+exports["default"] = _default;

package/dropdown/DropdownMenuItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownMenuItemProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ id, visuallyFocused, iconPosition, onClick, option, }: DropdownMenuItemProps) => JSX.Element>;
+export default _default;

package/dropdown/DropdownMenuItem.js

@@ -0,0 +1,92 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 DropdownMenuItem = function DropdownMenuItem(_ref) {
+  var id = _ref.id,
+      visuallyFocused = _ref.visuallyFocused,
+      iconPosition = _ref.iconPosition,
+      _onClick = _ref.onClick,
+      option = _ref.option;
+  var colorsTheme = (0, _useTheme["default"])();
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.dropdown
+  }, /*#__PURE__*/_react["default"].createElement(DropdownMenuItemContainer, {
+    visuallyFocused: visuallyFocused,
+    onClick: function onClick() {
+      _onClick(option.value);
+    },
+    id: id,
+    role: "menuitem",
+    tabIndex: -1
+  }, iconPosition === "after" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemIcon, {
+    iconPosition: iconPosition,
+    label: option.label,
+    role: typeof option.icon === "string" ? undefined : "img"
+  }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: option.icon
+  }) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label)));
+};
+
+var DropdownMenuItemContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: 36px;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.theme.optionIconSpacing;
+}, function (props) {
+  return props.theme.optionPaddingTop;
+}, function (props) {
+  return props.theme.optionPaddingBottom;
+}, function (props) {
+  return props.theme.optionPaddingLeft;
+}, function (props) {
+  return props.theme.optionPaddingRight;
+}, function (props) {
+  return props.visuallyFocused && "outline: ".concat(props.theme.focusColor, " solid 2px; outline-offset: -2px;");
+}, function (props) {
+  return props.theme.hoverOptionBackgroundColor;
+}, function (props) {
+  return props.theme.activeOptionBackgroundColor;
+});
+
+var DropdownMenuItemLabel = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5rem;\n  color: ", ";\n"])), function (props) {
+  return props.theme.optionFontFamily;
+}, function (props) {
+  return props.theme.optionFontSize;
+}, function (props) {
+  return props.theme.optionFontStyle;
+}, function (props) {
+  return props.theme.optionFontWeight;
+}, function (props) {
+  return props.theme.optionFontColor;
+});
+
+var DropdownMenuItemIcon = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  color: ", ";\n\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+  return props.theme.optionIconColor;
+}, function (props) {
+  return props.theme.optionIconSize;
+}, function (props) {
+  return props.theme.optionIconSize;
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(DropdownMenuItem);
+
+exports["default"] = _default;

package/dropdown/types.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
-declare type Option = {
+export declare type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export declare type Option = {
     /**
      * Option display value.
      */
@@ -67,7 +68,7 @@ declare type Props = {
     /**
      * Size of the component.
      */
-    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    size?: Size;
     /**
      * Value of the tabindex.
      */
@@ -77,4 +78,23 @@ declare type Props = {
      */
     disabled?: boolean;
 };
+export declare type DropdownMenuProps = {
+    id: string;
+    dropdownTriggerId: string;
+    iconsPosition: "before" | "after";
+    visualFocusIndex: number;
+    menuItemOnClick: (value: string) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    options: Option[];
+    styles: {
+        width: number;
+    };
+};
+export declare type DropdownMenuItemProps = {
+    id: string;
+    visuallyFocused: boolean;
+    iconPosition: "before" | "after";
+    onClick: (value: string) => void;
+    option: Option;
+};
 export default Props;

package/flex/Flex.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import FlexPropsType from "./types";
+declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: FlexPropsType) => JSX.Element;
+export default DxcFlex;

package/flex/Flex.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var _excluded = ["direction", "wrap", "gap", "order", "grow", "shrink", "basis", "children"],
+    _excluded2 = ["justifyContent", "alignItems", "alignContent", "alignSelf"];
+
+var DxcFlex = function DxcFlex(_ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? "row" : _ref$direction,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? "nowrap" : _ref$wrap,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? "0" : _ref$gap,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$grow = _ref.grow,
+      grow = _ref$grow === void 0 ? 0 : _ref$grow,
+      _ref$shrink = _ref.shrink,
+      shrink = _ref$shrink === void 0 ? 1 : _ref$shrink,
+      _ref$basis = _ref.basis,
+      basis = _ref$basis === void 0 ? "auto" : _ref$basis,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(Flex, (0, _extends2["default"])({
+    $direction: direction,
+    $wrap: wrap,
+    $order: order,
+    $grow: grow,
+    $shrink: shrink,
+    $basis: basis,
+    $gap: gap
+  }, props), children);
+};
+
+var Flex = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n"])), function (_ref2) {
+  var _ref2$justifyContent = _ref2.justifyContent,
+      justifyContent = _ref2$justifyContent === void 0 ? "flex-start" : _ref2$justifyContent,
+      _ref2$alignItems = _ref2.alignItems,
+      alignItems = _ref2$alignItems === void 0 ? "stretch" : _ref2$alignItems,
+      _ref2$alignContent = _ref2.alignContent,
+      alignContent = _ref2$alignContent === void 0 ? "normal" : _ref2$alignContent,
+      _ref2$alignSelf = _ref2.alignSelf,
+      alignSelf = _ref2$alignSelf === void 0 ? "auto" : _ref2$alignSelf,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return "\n    flex-direction: ".concat(props.$direction, "; \n    flex-wrap: ").concat(props.$wrap, "; \n    justify-content: ").concat(justifyContent, "; \n    align-items: ").concat(alignItems, ";\n    align-content: ").concat(alignContent, ";\n    align-self: ").concat(alignSelf, ";\n    gap: ").concat((0, _typeof2["default"])(props.$gap) === "object" ? "".concat(props.$gap.rowGap, " ").concat(props.$gap.columnGap) : props.$gap, ";\n    order: ").concat(props.$order, ";\n    flex-grow: ").concat(props.$grow, ";\n    flex-shrink: ").concat(props.$shrink, ";\n    flex-basis: ").concat(props.$basis, ";\n  ");
+});
+
+var _default = DxcFlex;
+exports["default"] = _default;

package/flex/Flex.stories.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcFlex from "./Flex";
+
+export default {
+  title: "Flex",
+  component: DxcFlex,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <Container>
+      <DxcFlex>
+        <Placeholder />
+        <Placeholder width="50px" />
+        <Placeholder />
+        <Placeholder width="50px" />
+        <Placeholder width="50px" />
+      </DxcFlex>
+    </Container>
+    <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
+    <Container>
+      <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="20px">
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+      </DxcFlex>
+    </Container>
+    <Title title="Wrap with align content space between, row and column gaps, and as a span" level={4} />
+    <Container height="250px">
+      <DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "10px", columnGap: "20px" }}>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+      </DxcFlex>
+    </Container>
+    <Title title="Basis 100%, order, grow and align self" level={4} />
+    <Container height="75px">
+      <DxcFlex basis="100%">
+        <DxcFlex order={3} grow={1} alignSelf="flex-end">
+          <PlaceholderGrowAndShrink>order 3, grow 1, align self end</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex order={-1} grow={4}>
+          <PlaceholderGrowAndShrink>order -1, grow 4</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex order={5} grow={1}>
+          <PlaceholderGrowAndShrink>order 5, grow 1</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex order={2} grow={2}>
+          <PlaceholderGrowAndShrink>order 2. grow 2</PlaceholderGrowAndShrink>
+        </DxcFlex>
+      </DxcFlex>
+    </Container>
+    <Title title="Basis and shrink" level={4} />
+    <Container>
+      <DxcFlex basis="600px">
+        <DxcFlex shrink={4} basis="400px">
+          <PlaceholderGrowAndShrink>shrink 4</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex shrink={2} basis="400px">
+          <PlaceholderGrowAndShrink>shrink 2</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex shrink={1} basis="400px">
+          <PlaceholderGrowAndShrink>shrink 1</PlaceholderGrowAndShrink>
+        </DxcFlex>
+      </DxcFlex>
+    </Container>
+  </>
+);
+
+const Container = styled.div<{ height?: string }>`
+  display: flex;
+  background: #f2eafa;
+  margin: 2.5rem;
+  ${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
+`;
+
+const Placeholder = styled.div<{ width?: string }>`
+  height: 40px;
+  min-width: ${({ width }) => width || "200px"};
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;
+
+const PlaceholderGrowAndShrink = styled.div`
+  height: 40px;
+  width: 100%;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;

package/flex/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+declare type Gap = {
+    rowGap: string;
+    columnGap: string;
+};
+declare type CommonProps = {
+    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
+    alignContent?: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+};
+declare type Props = CommonProps & {
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    gap?: string | Gap;
+    order?: number;
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    as?: keyof HTMLElementTagNameMap;
+    children: React.ReactNode;
+};
+export declare type StyledProps = CommonProps & {
+    $direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    $wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    $gap?: string | Gap;
+    $order?: number;
+    $grow?: number;
+    $shrink?: number;
+    $basis?: string;
+};
+export default Props;

package/footer/Footer.stories.tsx

@@ -28,7 +28,14 @@ const social = [
   },
   {
     href: "https://twitter.com/dxctechnology",
-    logo: "http://assets.stickpng.com/images/580b57fcd9996e24bc43c53e.png",
+    logo: (
+      <svg viewBox="0 0 248 204" fill="currentColor">
+        <path
+          fill="#1d9bf0"
+          d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"
+        />
+      </svg>
+    ),
   },
   {
     href: "https://www.facebook.com/DXCTechnology/",

package/footer/Icons.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
   xmlns: "http://www.w3.org/2000/svg",
-  width: "280.781",
+  width: "100%",
   height: "32",
   viewBox: "0 0 280.781 32"
 }, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {

package/footer/types.d.ts

@@ -6,7 +6,7 @@ declare type Size = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type SocialLink = {
     /**
      * Element used as the icon for the link.
@@ -57,6 +57,7 @@ declare type FooterPropsType = {
      */
     margin?: Space | Size;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the custom area of the component.
      * You can pass an object with properties in order to specify different padding sizes.
      */