carbon-react 106.6.6 → 106.6.7

package/esm/components/accordion/accordion-group/accordion-group.component.js

@@ -1,26 +1,43 @@
 import React, { useMemo, useCallback } from "react";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { filterStyledSystemMarginProps } from "../../../style/utils";
+import PropTypes from "prop-types";
+import invariant from "invariant";
 import Events from "../../../__internal__/utils/helpers/events";
-import Accordion from "../accordion.component.js";
-import { StyledAccordionGroup } from "../accordion.style.js";
-const marginProptypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+import Accordion from "../accordion.component";
+import { StyledAccordionGroup } from "../accordion.style";
 
 const AccordionGroup = ({
   children,
   ...rest
 }) => {
-  const filteredChildren = useMemo(() => React.Children.toArray(children), [children]);
+  const hasProperChildren = useMemo(() => {
+    let hasAccordionChildren = true;
+    React.Children.toArray(children).forEach(child => {
+      if (typeof child === "string" || /*#__PURE__*/React.isValidElement(child) && child.type.displayName !== "Accordion") {
+        hasAccordionChildren = false;
+      }
+    });
+    return hasAccordionChildren;
+  }, [children]);
+  invariant(hasProperChildren, `AccordionGroup accepts only children of type \`${Accordion.displayName}\`.`);
+  const filteredChildren = useMemo(() => React.Children.toArray(children).filter(child => {
+    return /*#__PURE__*/React.isValidElement(child);
+  }), [children]);
   const refs = useMemo(() => filteredChildren.map(child => child.ref || /*#__PURE__*/React.createRef()), [filteredChildren]);
   const focusAccordion = useCallback((ev, index) => {
     ev.preventDefault();
 
     if (index === -1) {
-      refs[refs.length - 1].current.focus();
+      var _refs$current;
+
+      (_refs$current = refs[refs.length - 1].current) === null || _refs$current === void 0 ? void 0 : _refs$current.focus();
     } else if (index === refs.length) {
-      refs[0].current.focus();
+      var _refs$0$current;
+
+      (_refs$0$current = refs[0].current) === null || _refs$0$current === void 0 ? void 0 : _refs$0$current.focus();
     } else {
-      refs[index].current.focus();
+      var _refs$index$current;
+
+      (_refs$index$current = refs[index].current) === null || _refs$index$current === void 0 ? void 0 : _refs$index$current.focus();
     }
   }, [refs]);
   const handleKeyboardAccessibility = useCallback((ev, index) => {
@@ -40,27 +57,207 @@ const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/React.createElement(StyledAccordionGroup, rest, filteredChildren.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
+  return /*#__PURE__*/React.createElement(StyledAccordionGroup, rest, filteredChildren.map((child, index) =>
+  /*#__PURE__*/
+  // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
+  React.cloneElement(child, {
     ref: refs[index],
     index,
     handleKeyboardAccessibility
   })));
 };
 
-AccordionGroup.propTypes = { ...marginProptypes,
-  children: (props, propName, componentName) => {
-    let error;
-    const prop = props[propName];
-    React.Children.forEach(prop, child => {
-      if (!child) {
-        return;
-      }
-
-      if (Accordion.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${Accordion.displayName}\`.`);
-      }
-    });
-    return error;
-  }
+AccordionGroup.propTypes = {
+  "children": PropTypes.oneOfType([PropTypes.element, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "__@unscopables": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "copyWithin": PropTypes.func.isRequired,
+    "entries": PropTypes.func.isRequired,
+    "every": PropTypes.func.isRequired,
+    "fill": PropTypes.func.isRequired,
+    "filter": PropTypes.func.isRequired,
+    "find": PropTypes.func.isRequired,
+    "findIndex": PropTypes.func.isRequired,
+    "flat": PropTypes.func.isRequired,
+    "flatMap": PropTypes.func.isRequired,
+    "forEach": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "join": PropTypes.func.isRequired,
+    "keys": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "map": PropTypes.func.isRequired,
+    "pop": PropTypes.func.isRequired,
+    "push": PropTypes.func.isRequired,
+    "reduce": PropTypes.func.isRequired,
+    "reduceRight": PropTypes.func.isRequired,
+    "reverse": PropTypes.func.isRequired,
+    "shift": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "some": PropTypes.func.isRequired,
+    "sort": PropTypes.func.isRequired,
+    "splice": PropTypes.func.isRequired,
+    "toLocaleString": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "unshift": PropTypes.func.isRequired,
+    "values": PropTypes.func.isRequired
+  }), PropTypes.bool]),
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
+export { AccordionGroup };
 export default AccordionGroup;

package/esm/components/accordion/accordion-test.stories.js

@@ -0,0 +1,79 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Accordion, AccordionGroup } from ".";
+import Textbox from "../textbox";
+import Box from "../box";
+export default {
+  title: "Accordion/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    iconAlign: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      }
+    },
+    iconType: {
+      options: ["chevron_down", "dropdown"],
+      control: {
+        type: "select"
+      }
+    },
+    borders: {
+      options: ["default", "full"],
+      control: {
+        type: "select"
+      }
+    },
+    size: {
+      options: ["large", "small"],
+      control: {
+        type: "select"
+      }
+    },
+    scheme: {
+      options: ["white", "transparent"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+export const Default = ({ ...args
+}) => /*#__PURE__*/React.createElement(Accordion, _extends({
+  onChange: action("expansionToggled"),
+  iconAlign: "right",
+  customPadding: 0,
+  title: "Title",
+  subTitle: "Sub Title",
+  width: "100%"
+}, args), /*#__PURE__*/React.createElement("div", null, "Content"), /*#__PURE__*/React.createElement("div", null, "Content"), /*#__PURE__*/React.createElement("div", null, "Content"));
+export const Grouped = () => /*#__PURE__*/React.createElement(AccordionGroup, null, /*#__PURE__*/React.createElement(Accordion, {
+  title: "First Accordion",
+  onChange: action("expansionToggled")
+}, /*#__PURE__*/React.createElement(Box, {
+  p: 2
+}, /*#__PURE__*/React.createElement(Textbox, {
+  label: "Textbox in an Accordion"
+}))), /*#__PURE__*/React.createElement(Accordion, {
+  title: "Second Accordion",
+  onChange: action("expansionToggled")
+}, /*#__PURE__*/React.createElement(Box, {
+  p: 2
+}, /*#__PURE__*/React.createElement(Textbox, {
+  label: "Textbox in an Accordion"
+}))), /*#__PURE__*/React.createElement(Accordion, {
+  title: "Third Accordion",
+  onChange: action("expansionToggled")
+}, /*#__PURE__*/React.createElement(Box, {
+  p: 2
+}, /*#__PURE__*/React.createElement("div", null, "Content"), /*#__PURE__*/React.createElement("div", null, "Content"), /*#__PURE__*/React.createElement("div", null, "Content"))));