carbon-react 104.34.1 → 104.37.0

package/esm/__spec_helper__/test-utils.js

@@ -0,0 +1,341 @@
+import { mount } from "enzyme";
+import { sprintf } from "sprintf-js";
+import { carbonThemeList } from "../style/themes";
+import { mockMatchMedia } from "./mock-match-media";
+
+const isUpper = char => char.toUpperCase() === char;
+
+const humpToDash = (acc, char) => `${acc}${isUpper(char) ? `-${char.toLowerCase()}` : char}`;
+
+const toCSSCase = str => {
+  return str.split("").reduce(humpToDash, "");
+};
+
+const assertStyleMatch = (styleSpec, component, opts) => {
+  Object.entries(styleSpec).forEach(([attr, value]) => {
+    expect(component).toHaveStyleRule(toCSSCase(attr), value, opts);
+  });
+};
+
+const makeArrayKeys = n => [...Array(n).keys()];
+
+const dispatchKeyPress = code => {
+  const ev = new KeyboardEvent("keydown", {
+    which: code
+  });
+  document.dispatchEvent(ev);
+};
+
+const keyMap = {
+  UpArrow: "38",
+  DownArrow: "40",
+  RightArrow: "39",
+  LeftArrow: "37",
+  Enter: "13",
+  Tab: "9",
+  Space: "32",
+  Escape: "27",
+  End: "35",
+  Home: "36",
+  D: "68",
+  E: "69",
+  P: "80",
+  Z: "90",
+  1: "49"
+};
+
+const repeat = action => (n = 1) => makeArrayKeys(n).forEach(() => action());
+
+const keyboard = Object.keys(keyMap).reduce((acc, key) => {
+  acc[`press${key}`] = () => repeat(dispatchKeyPress(keyMap[key]));
+
+  return acc;
+}, {}); // Build an object of Enzyme simulate helpers
+// e.g. simulate.keydown.pressTab(target, { shiftKey: true })
+// e.g. simulate.keydown.pressEscape(target)
+
+const keydown = Object.keys(keyMap).reduce((acc, key) => {
+  acc[`press${key}`] = (target, {
+    shiftKey
+  } = {
+    shiftKey: false
+  }) => {
+    target.simulate("keydown", {
+      shiftKey,
+      key,
+      which: parseInt(keyMap[key], 0)
+    });
+  };
+
+  return acc;
+}, {});
+const simulate = {
+  keydown
+};
+
+const listFrom = wrapper => wrapper.find("ul");
+
+const childrenFrom = node => node.children();
+
+const hoverList = wrapper => item => {
+  childrenFrom(listFrom(wrapper)).at(item).simulate("mouseover");
+};
+
+const simulateEvent = eventName => wrapper => wrapper.simulate(eventName);
+
+const click = simulateEvent("click");
+
+const selectedItemOf = wrapper => wrapper.state().selectedItem;
+
+const isUnique = (val, index, self) => self.indexOf(val) === index;
+
+const isSelectableGiven = nonSelectables => i => !nonSelectables.includes(i);
+
+const selectedItemReducer = method => wrapper => (acc, i) => {
+  method(wrapper)(i);
+  return [...acc, selectedItemOf(wrapper)];
+};
+
+const arraysEqual = (arr1, arr2) => arr1.sort().join(",") === arr2.sort().join(",");
+
+const assertCorrectTraversal = method => expect => ({
+  num,
+  nonSelectables = []
+}) => wrapper => {
+  const array = makeArrayKeys(num);
+  const validIndexes = array.filter(isSelectableGiven(nonSelectables));
+  const selectedItem = selectedItemOf(wrapper);
+  const indexesThatWereSelected = array.reduce(selectedItemReducer(method)(wrapper), [selectedItem]).filter(isUnique);
+  expect(arraysEqual(validIndexes, indexesThatWereSelected)).toBeTruthy();
+};
+
+const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressDownArrow)(expect);
+const assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
+const carbonThemesJestTable = carbonThemeList.map(theme => [theme.name, theme]);
+const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"], ["mt", "marginTop"], ["mb", "marginBottom"], ["mx", "marginLeft"], ["mx", "marginRight"], ["my", "marginTop"], ["my", "marginBottom"]];
+const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
+const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];
+const widthProps = ["width", "width", "200px"];
+const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
+const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
+const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
+
+const getDefaultValue = value => {
+  if (typeof value === "number") {
+    return `${value * 8}px`;
+  }
+
+  return value;
+};
+
+const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
+  describe("default props", () => {
+    const wrapper = mount(component());
+    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    it("should set the correct margins", () => {
+      let margin;
+      let marginLeft;
+      let marginRight;
+      let marginTop;
+      let marginBottom;
+
+      if (defaults) {
+        margin = getDefaultValue(defaults.m || undefined);
+        marginLeft = getDefaultValue(defaults.ml || defaults.mx || undefined);
+        marginRight = getDefaultValue(defaults.mr || defaults.mx || undefined);
+        marginTop = getDefaultValue(defaults.mt || defaults.my || undefined);
+        marginBottom = getDefaultValue(defaults.mb || defaults.my || undefined);
+        expect(assertStyleMatch({
+          margin,
+          marginLeft,
+          marginRight,
+          marginTop,
+          marginBottom
+        }, StyleElement, assertOpts));
+      } else {
+        expect(StyleElement).not.toHaveStyleRule("marginLeft");
+        expect(StyleElement).not.toHaveStyleRule("marginRight");
+        expect(StyleElement).not.toHaveStyleRule("marginTop");
+        expect(StyleElement).not.toHaveStyleRule("marginBottom");
+        expect(StyleElement).not.toHaveStyleRule("margin");
+      }
+    });
+  });
+  describe.each(marginProps)('when a custom spacing is specified using the "%s" styled system props', (styledSystemProp, propName) => {
+    it(`then that ${propName} should have been set correctly`, () => {
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: 2
+      };
+      wrapper = mount(component({ ...props
+      }));
+      expect(assertStyleMatch({
+        [propName]: "16px"
+      }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
+    });
+  });
+};
+
+const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
+  describe("default props", () => {
+    const wrapper = mount(component());
+    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    it("should set the correct paddings", () => {
+      let padding;
+      let paddingLeft;
+      let paddingRight;
+      let paddingTop;
+      let paddingBottom;
+
+      if (defaults) {
+        padding = getDefaultValue(defaults.p || undefined);
+        paddingLeft = getDefaultValue(defaults.pl || defaults.px || undefined);
+        paddingRight = getDefaultValue(defaults.pr || defaults.px || undefined);
+        paddingTop = getDefaultValue(defaults.pt || defaults.py || undefined);
+        paddingBottom = getDefaultValue(defaults.pb || defaults.py || undefined);
+        expect(assertStyleMatch({
+          padding,
+          paddingLeft,
+          paddingRight,
+          paddingTop,
+          paddingBottom
+        }, StyleElement, assertOpts));
+      } else {
+        expect(StyleElement).not.toHaveStyleRule("paddingLeft");
+        expect(StyleElement).not.toHaveStyleRule("paddingRight");
+        expect(StyleElement).not.toHaveStyleRule("paddingTop");
+        expect(StyleElement).not.toHaveStyleRule("paddingBottom");
+        expect(StyleElement).not.toHaveStyleRule("padding");
+      }
+    });
+  });
+  describe.each(paddingProps)('when a custom spacing is specified using the "%s" styled system props', (styledSystemProp, propName) => {
+    it(`then that ${propName} should have been set correctly`, () => {
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: 2
+      };
+      wrapper = mount(component({ ...props
+      }));
+      expect(assertStyleMatch({
+        [propName]: "16px"
+      }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
+    });
+  });
+};
+
+const testStyledSystemSpacing = (component, defaults, styleContainer, assertOpts) => {
+  testStyledSystemMargin(component, defaults, styleContainer, assertOpts);
+  testStyledSystemPadding(component, defaults, styleContainer, assertOpts);
+};
+
+const testStyledSystemColor = (component, styleContainer) => {
+  describe.each(colorProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
+    it(`then ${propName} should have been set correctly`, () => {
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: value
+      };
+      wrapper = mount(component({ ...props
+      })); // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
+
+      expect(wrapper).toHaveStyleRule(propName, value, styleContainer ? styleContainer(wrapper) : wrapper);
+    });
+  });
+};
+
+const testStyledSystemWidth = (component, styleContainer) => {
+  describe("when a width prop is specified using styled system props", () => {
+    it("then width should have been set correctly", () => {
+      const [styledSystemProp, propName, value] = widthProps;
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: value
+      };
+      wrapper = mount(component({ ...props
+      }));
+      expect(wrapper).toHaveStyleRule(propName, value, styleContainer ? styleContainer(wrapper) : wrapper);
+    });
+  });
+};
+
+const testStyledSystemLayout = (component, styleContainer) => {
+  describe.each(layoutProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
+    it(`then ${propName} should have been set correctly`, () => {
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: value
+      };
+      wrapper = mount(component({ ...props
+      })); // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
+
+      expect(wrapper).toHaveStyleRule(propName, value, styleContainer ? styleContainer(wrapper) : wrapper);
+    });
+  });
+};
+
+const testStyledSystemFlexBox = (component, styleContainer) => {
+  describe.each(flexBoxProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
+    it(`then ${propName} should have been set correctly`, () => {
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: value
+      };
+      wrapper = mount(component({ ...props
+      }));
+      expect(assertStyleMatch({
+        [propName]: value
+      }, styleContainer ? styleContainer(wrapper) : wrapper));
+    });
+  });
+};
+
+const testStyledSystemBackground = (component, styleContainer) => {
+  describe.each(backgroundProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
+    it(`then ${propName} should have been set correctly`, () => {
+      let wrapper = mount(component());
+      const props = {
+        [styledSystemProp]: value
+      };
+      wrapper = mount(component({ ...props
+      }));
+      expect(assertStyleMatch({
+        [styledSystemProp]: value
+      }, styleContainer ? styleContainer(wrapper) : wrapper));
+    });
+  });
+};
+
+const expectError = errorMessage => {
+  if (!errorMessage) {
+    throw new Error("no error message provided");
+  }
+
+  expect.assertions(1);
+  const {
+    error
+  } = global.console;
+  let errorArgs;
+  jest.spyOn(global.console, "error").mockImplementation((...args) => {
+    if (!args.length) return;
+    const msg = args.join(" ");
+    const params = args.slice(1, args.length);
+
+    if (sprintf(msg, ...params).includes(errorMessage)) {
+      errorArgs = args;
+      return;
+    }
+
+    error(...args);
+  });
+  return () => {
+    if (errorArgs) {
+      // eslint-disable-next-line no-console
+      expect(console.error).toHaveBeenCalledWith(...errorArgs);
+    }
+
+    global.console.error = error;
+  };
+};
+
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectError };

package/esm/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -0,0 +1,10 @@
+export default AccordionGroup;
+declare function AccordionGroup({ children, ...rest }: {
+    [x: string]: any;
+    children: any;
+}): JSX.Element;
+declare namespace AccordionGroup {
+    namespace propTypes {
+        function children(props: any, propName: any, componentName: any): undefined;
+    }
+}

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

@@ -0,0 +1,66 @@
+import React, { useMemo, useCallback } from "react";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemMarginProps } from "../../../style/utils";
+import Events from "../../../__internal__/utils/helpers/events";
+import Accordion from "../accordion.component.js";
+import { StyledAccordionGroup } from "../accordion.style.js";
+const marginProptypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const AccordionGroup = ({
+  children,
+  ...rest
+}) => {
+  const filteredChildren = useMemo(() => React.Children.toArray(children), [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();
+    } else if (index === refs.length) {
+      refs[0].current.focus();
+    } else {
+      refs[index].current.focus();
+    }
+  }, [refs]);
+  const handleKeyboardAccessibility = useCallback((ev, index) => {
+    if (Events.isUpKey(ev)) {
+      focusAccordion(ev, index - 1);
+    }
+
+    if (Events.isDownKey(ev)) {
+      focusAccordion(ev, index + 1);
+    }
+
+    if (Events.isHomeKey(ev)) {
+      focusAccordion(ev, 0);
+    }
+
+    if (Events.isEndKey(ev)) {
+      focusAccordion(ev, refs.length - 1);
+    }
+  }, [focusAccordion, refs]);
+  return /*#__PURE__*/React.createElement(StyledAccordionGroup, rest, filteredChildren.map((child, index) => /*#__PURE__*/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;
+  }
+};
+export default AccordionGroup;

package/esm/components/accordion/accordion-group/accordion-group.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+import { AccordionProps } from "../accordion";
+
+type AccordionElement =
+  | React.ReactElement<AccordionProps>
+  | boolean
+  | null
+  | undefined;
+
+export interface AccordionGroupProps extends MarginProps {
+  children?: AccordionElement | AccordionElement[];
+}
+
+declare function AccordionGroup(props: AccordionGroupProps): JSX.Element;
+
+export default AccordionGroup;

package/esm/components/accordion/accordion.component.d.ts

@@ -0,0 +1,3 @@
+export default Accordion;
+declare const Accordion: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

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

@@ -0,0 +1,194 @@
+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, { useState, useRef, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import propTypes from "@styled-system/prop-types";
+import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
+import createGuid from "../../__internal__/utils/helpers/guid";
+import Events from "../../__internal__/utils/helpers/events";
+import { StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionSubTitle, StyledAccordionIcon, StyledAccordionContentContainer, StyledAccordionContent } from "./accordion.style";
+import ValidationIcon from "../../__internal__/validations";
+const Accordion = /*#__PURE__*/React.forwardRef(({
+  borders = "default",
+  defaultExpanded,
+  expanded,
+  onChange,
+  children,
+  handleKeyboardAccessibility,
+  // eslint-disable-line react/prop-types
+  id,
+  index,
+  // eslint-disable-line react/prop-types
+  iconType = "chevron_down",
+  iconAlign = "right",
+  scheme = "white",
+  size = "large",
+  subTitle,
+  title,
+  width,
+  headerSpacing,
+  disableContentPadding = false,
+  error,
+  warning,
+  info,
+  buttonHeading,
+  buttonWidth = 150,
+  openTitle,
+  ...rest
+}, ref) => {
+  const isControlled = expanded !== undefined;
+  const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded || false);
+  const [contentHeight, setContentHeight] = useState(isExpandedInternal ? "auto" : 0);
+  const accordionContent = useRef(null);
+  const isExpanded = isControlled ? expanded : isExpandedInternal;
+  useResizeObserver(accordionContent, () => {
+    setContentHeight(accordionContent.current.scrollHeight);
+  });
+  useEffect(() => {
+    setContentHeight(accordionContent.current.scrollHeight);
+  }, [isExpanded, children]);
+  const toggleAccordion = useCallback(ev => {
+    if (!isControlled) {
+      setIsExpandedInternal(!isExpanded);
+    }
+
+    if (onChange) onChange(ev, !isExpanded);
+  }, [isControlled, isExpanded, onChange]);
+  const handleKeyDown = useCallback(ev => {
+    if (handleKeyboardAccessibility) {
+      handleKeyboardAccessibility(ev, index);
+    }
+
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
+      toggleAccordion(ev);
+    }
+  }, [handleKeyboardAccessibility, index, toggleAccordion]);
+  const guid = useRef(createGuid());
+  const accordionId = id || `Accordion_${guid.current}`;
+  const headerId = `AccordionHeader_${guid.current}`;
+  const contentId = `AccordionContent_${guid.current}`;
+  const showValidationIcon = !!(error || warning || info);
+
+  const getTitle = () => isExpanded ? openTitle || title : title;
+
+  return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
+    id: accordionId,
+    "data-component": "accordion",
+    width: width,
+    borders: borders,
+    scheme: scheme,
+    buttonHeading: buttonHeading
+  }, rest), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
+    "data-element": "accordion-title-container",
+    id: headerId,
+    "aria-expanded": isExpanded,
+    "aria-controls": contentId,
+    onClick: toggleAccordion,
+    onKeyDown: handleKeyDown,
+    tabIndex: 0,
+    iconAlign: iconAlign,
+    ref: ref,
+    size: size,
+    isExpanded: isExpanded,
+    buttonHeading: buttonHeading,
+    buttonWidth: buttonWidth,
+    hasButtonProps: buttonHeading && headerSpacing,
+    role: "button"
+  }, buttonHeading && {
+    p: 0
+  }, headerSpacing), /*#__PURE__*/React.createElement(StyledAccordionHeadingsContainer, {
+    "data-element": "accordion-headings-container",
+    hasValidationIcon: showValidationIcon,
+    buttonHeading: buttonHeading
+  }, !buttonHeading && typeof title === "string" ? /*#__PURE__*/React.createElement(StyledAccordionTitle, {
+    "data-element": "accordion-title",
+    size: size
+  }, title) : getTitle(), !buttonHeading && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
+    error: error,
+    warning: warning,
+    info: info,
+    tooltipPosition: "top",
+    tabIndex: 0,
+    ml: 1
+  }), subTitle && size === "large" && /*#__PURE__*/React.createElement(StyledAccordionSubTitle, null, subTitle))), /*#__PURE__*/React.createElement(StyledAccordionIcon, {
+    "data-element": "accordion-icon",
+    type: iconType,
+    isExpanded: isExpanded,
+    iconAlign: iconAlign
+  })), /*#__PURE__*/React.createElement(StyledAccordionContentContainer, {
+    isExpanded: isExpanded,
+    maxHeight: contentHeight
+  }, /*#__PURE__*/React.createElement(StyledAccordionContent, {
+    role: "region",
+    "data-element": "accordion-content",
+    id: contentId,
+    "aria-labelledby": headerId,
+    ref: accordionContent,
+    disableContentPadding: disableContentPadding
+  }, children)));
+});
+Accordion.propTypes = {
+  /** Styled system spacing props */
+  ...propTypes.space,
+
+  /** Styled system spacing props provided to Accordion Title */
+  headerSpacing: PropTypes.object,
+
+  /** Disable padding for the content */
+  disableContentPadding: PropTypes.bool,
+  children: PropTypes.node,
+  id: PropTypes.string,
+
+  /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
+  defaultExpanded: PropTypes.bool,
+
+  /** Sets the expansion state of the Accordion if component is meant to be used as controlled */
+  expanded: PropTypes.bool,
+
+  /** Sets icon type - accepted values: 'chevron_down' (default), 'dropdown' */
+  iconType: PropTypes.oneOf(["chevron_down", "dropdown"]),
+
+  /** Sets icon alignment - accepted values: 'left', 'right' (default) */
+  iconAlign: PropTypes.oneOf(["left", "right"]),
+
+  /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
+  onChange: PropTypes.func,
+
+  /** Sets accordion title. Will render inside a h3 if set to a string */
+  title: PropTypes.node.isRequired,
+
+  /** Sets accordion sub title */
+  subTitle: PropTypes.string,
+
+  /** Sets accordion size */
+  size: PropTypes.oneOf(["large", "small"]),
+
+  /** Toggles left and right borders */
+  borders: PropTypes.oneOf(["default", "full", "none"]),
+
+  /** Sets background as white or transparent */
+  scheme: PropTypes.oneOf(["white", "transparent"]),
+
+  /** Sets accordion width */
+  width: PropTypes.string,
+
+  /** An error message to be displayed in the tooltip */
+  error: PropTypes.string,
+
+  /** A warning message to be displayed in the tooltip */
+  warning: PropTypes.string,
+
+  /** An info message to be displayed in the tooltip */
+  info: PropTypes.string,
+
+  /** Renders the accordion heading in the style of a tertiary button */
+  buttonHeading: PropTypes.bool,
+
+  /** Width of the buttonHeading when it's set, defaults to 150px */
+  buttonWidth: PropTypes.number,
+
+  /** When the Accordion is open the title can change to this */
+  openTitle: PropTypes.string
+};
+Accordion.displayName = "Accordion";
+export default Accordion;

package/esm/components/accordion/accordion.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface AccordionProps extends SpaceProps {
+  /** Toggles left and right borders */
+  borders?: "default" | "full" | "none";
+  /** Renders the accordion heading in the style of a tertiary button */
+  buttonHeading?: boolean;
+  /** Width of the buttonHeading when it's set, defaults to 150px */
+  buttonWidth?: number;
+  children?: React.ReactNode;
+  /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
+  defaultExpanded?: boolean;
+  /** Disable padding for the content */
+  disableContentPadding?: boolean;
+  /** Sets the expansion state of the Accordion if component is meant to be used as controlled */
+  expanded?: boolean;
+  /** An error message to be displayed in the tooltip */
+  error?: string;
+  /** Styled system spacing props provided to Accordion Title */
+  headerSpacing?: SpaceProps;
+  id?: string;
+  /** Sets icon type - accepted values: 'chevron_down' (default), 'dropdown' */
+  iconType?: "chevron_down" | "dropdown";
+  /** Sets icon alignment - accepted values: 'left', 'right' (default) */
+  iconAlign?: "left" | "right";
+  /** Sets accordion title */
+  title: React.ReactNode;
+  /** An info message to be displayed in the tooltip */
+  info?: string;
+  /** Callback fired when expansion state changes */
+  onChange?: (
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    isExpanded: boolean
+  ) => void;
+  /** When the Accordion is open the title can change to this */
+  openTitle?: string;
+  /** Sets background as white or transparent */
+  scheme?: "white" | "transparent";
+  /** Sets accordion size */
+  size?: "large" | "small";
+  /** Sets accordion sub title */
+  subTitle?: string;
+  /** A warning message to be displayed in the tooltip */
+  warning?: string;
+  /** Sets accordion width */
+  width?: string;
+}
+
+declare function Accordion(
+  props: AccordionProps & React.RefAttributes<HTMLDivElement>
+): JSX.Element;
+
+export default Accordion;