@dxc-technology/halstack-react 0.0.0-d238e47 → 0.0.0-d30020b

package/accordion-group/AccordionGroup.stories.tsx

@@ -0,0 +1,225 @@
+import React from "react";
+import DxcAccordionGroup from "./AccordionGroup";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Accordion group",
+  component: DxcAccordionGroup,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="States" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcAccordionGroup>
+        <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Expanded" theme="light" level={4} />
+      <DxcAccordionGroup indexActive={1}>
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcAccordionGroup disabled>
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcAccordionGroup margin="xxsmall">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcAccordionGroup margin="xsmall">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcAccordionGroup margin="small">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcAccordionGroup margin="medium">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcAccordionGroup margin="large">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcAccordionGroup margin="xlarge">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcAccordionGroup margin="xxlarge">
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem 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.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+  </>
+);

package/accordion-group/types.d.ts

@@ -12,20 +12,16 @@ declare type Padding = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.SVGProps<SVGSVGElement>;
 export declare type AccordionPropsType = {
     /**
      * The panel label.
      */
-    label?: string;
+    label: string;
     /**
-     * Element used as the icon that will be placed next to panel label.
+     * Element or path used as the icon that will be placed next to panel label.
      */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon that will be placed next to panel label.
-     */
-    iconSrc?: string;
+    icon?: string | SVG;
     /**
      * Assistive text to be placed on the right side of the panel.
      */

package/alert/Alert.js

@@ -21,9 +21,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 

package/badge/Badge.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject;
 

package/bleed/Bleed.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import BleedPropsType from "./types";
+export default function Bleed({ space, horizontal, vertical, top, right, bottom, left, children, }: BleedPropsType): JSX.Element;

package/bleed/Bleed.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Bleed;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function Bleed(_ref) {
+  var space = _ref.space,
+      horizontal = _ref.horizontal,
+      vertical = _ref.vertical,
+      top = _ref.top,
+      right = _ref.right,
+      bottom = _ref.bottom,
+      left = _ref.left,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledBleed, {
+    space: space,
+    horizontal: horizontal,
+    vertical: vertical,
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left
+  }, children);
+}
+
+function getSpacingValue(spacingName) {
+  switch (spacingName) {
+    case "none":
+      return "0rem";
+
+    case "xxxsmall":
+      return "0.125rem";
+
+    case "xxsmall":
+      return "0.25rem";
+
+    case "xsmall":
+      return "0.5rem";
+
+    case "small":
+      return "1rem";
+
+    case "medium":
+      return "1.5rem";
+
+    case "large":
+      return "2rem";
+
+    case "xlarge":
+      return "3rem";
+
+    case "xxlarge":
+      return "4rem";
+
+    case "xxxlarge":
+      return "5rem";
+
+    default:
+      return "0rem";
+  }
+}
+
+var StyledBleed = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {
+  var space = _ref2.space,
+      horizontal = _ref2.horizontal,
+      vertical = _ref2.vertical,
+      top = _ref2.top,
+      right = _ref2.right,
+      bottom = _ref2.bottom,
+      left = _ref2.left;
+  return "\n    margin: -".concat(getSpacingValue(top || vertical || space), " -").concat(getSpacingValue(right || horizontal || space), " -").concat(getSpacingValue(bottom || vertical || space), " -").concat(getSpacingValue(left || horizontal || space), ";\n");
+});