@dfds-ui/react-components 0.9.7-alpha.3a2ef8a2 → 0.9.7-alpha.3c63be7b

package/accordion/AccordionContent.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { css } from '@emotion/react';
 import { theme } from '@dfds-ui/theme';
+import { typography } from '@dfds-ui/typography';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var AccordionContent = function AccordionContent(_ref) {
   var variant = _ref.variant,
@@ -18,7 +19,7 @@ export var AccordionContent = function AccordionContent(_ref) {
 
   return ___EmotionJSX("div", _extends({
     className: "accordion__content",
-    css: /*#__PURE__*/css("margin-bottom:", variant === 'default' ? theme.spacing.xs : '0', ";padding:0 ", theme.spacing.s, " ", theme.spacing.s, ";background-color:white;color:", theme.colors.text.dark.primary, ";font-family:", theme.fontFamilies.body, ";font-size:", theme.fontSizes.body.medium, ";font-weight:", theme.fontWeights.body.regular, ";line-height:", theme.lineHeights.body.regular, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:AccordionContent;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hY2NvcmRpb24vQWNjb3JkaW9uQ29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JjIiwiZmlsZSI6Ii4uLy4uL3NyYy9hY2NvcmRpb24vQWNjb3JkaW9uQ29udGVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvbkNvbnRlbnRQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBjb21wcmVzc2VkIHZhcmlhbnQgcmVtb3ZlcyB0aGUgYG1hcmdpbi1ib3R0b21gIG9mIHRoZSBBY2NvcmRpb24uXG4gICAqL1xuICB2YXJpYW50PzogJ2RlZmF1bHQnIHwgJ2NvbXByZXNzZWQnXG4gIC8qKlxuICAgKiBTcGVjaWZ5IHRoZSBjb250ZW50IHBhZGRpbmcgb2YgdGhlIEFjY29yZGlvbi5cbiAgICovXG4gIHR5cGU/OiAnc21hbGwnIHwgJ21lZGl1bSdcbn1cblxuZXhwb3J0IGNvbnN0IEFjY29yZGlvbkNvbnRlbnQ6IFJlYWN0LkZ1bmN0aW9uQ29tcG9uZW50PEFjY29yZGlvbkNvbnRlbnRQcm9wcz4gPSAoe1xuICB2YXJpYW50LFxuICB0eXBlLFxuICBjaGlsZHJlbixcbiAgLi4ucmVzdFxufSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT1cImFjY29yZGlvbl9fY29udGVudFwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogJHt2YXJpYW50ID09PSAnZGVmYXVsdCcgPyB0aGVtZS5zcGFjaW5nLnhzIDogJzAnfTtcbiAgICAgICAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcuc30gJHt0aGVtZS5zcGFjaW5nLnN9O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQuZGFyay5wcmltYXJ5fTtcbiAgICAgICAgZm9udC1mYW1pbHk6ICR7dGhlbWUuZm9udEZhbWlsaWVzLmJvZHl9O1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVzLmJvZHkubWVkaXVtfTtcbiAgICAgICAgZm9udC13ZWlnaHQ6ICR7dGhlbWUuZm9udFdlaWdodHMuYm9keS5yZWd1bGFyfTtcbiAgICAgICAgbGluZS1oZWlnaHQ6ICR7dGhlbWUubGluZUhlaWdodHMuYm9keS5yZWd1bGFyfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucmVzdH1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9kaXY+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgQWNjb3JkaW9uQ29udGVudFxuIl19 */")
+    css: /*#__PURE__*/css(typography.body, ";margin-bottom:", variant === 'default' ? theme.spacing.xs : '0', ";padding:0 ", theme.spacing.s, " ", theme.spacing.s, ";background-color:white;color:", theme.colors.text.dark.primary, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:AccordionContent;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hY2NvcmRpb24vQWNjb3JkaW9uQ29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJjIiwiZmlsZSI6Ii4uLy4uL3NyYy9hY2NvcmRpb24vQWNjb3JkaW9uQ29udGVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uQ29udGVudFByb3BzID0ge1xuICAvKipcbiAgICogVGhlIGNvbXByZXNzZWQgdmFyaWFudCByZW1vdmVzIHRoZSBgbWFyZ2luLWJvdHRvbWAgb2YgdGhlIEFjY29yZGlvbi5cbiAgICovXG4gIHZhcmlhbnQ/OiAnZGVmYXVsdCcgfCAnY29tcHJlc3NlZCdcbiAgLyoqXG4gICAqIFNwZWNpZnkgdGhlIGNvbnRlbnQgcGFkZGluZyBvZiB0aGUgQWNjb3JkaW9uLlxuICAgKi9cbiAgdHlwZT86ICdzbWFsbCcgfCAnbWVkaXVtJ1xufVxuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uQ29udGVudDogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8QWNjb3JkaW9uQ29udGVudFByb3BzPiA9ICh7XG4gIHZhcmlhbnQsXG4gIHR5cGUsXG4gIGNoaWxkcmVuLFxuICAuLi5yZXN0XG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPVwiYWNjb3JkaW9uX19jb250ZW50XCJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICAke3R5cG9ncmFwaHkuYm9keX07XG4gICAgICAgIG1hcmdpbi1ib3R0b206ICR7dmFyaWFudCA9PT0gJ2RlZmF1bHQnID8gdGhlbWUuc3BhY2luZy54cyA6ICcwJ307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnN9ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgICAgIGNvbG9yOiAke3RoZW1lLmNvbG9ycy50ZXh0LmRhcmsucHJpbWFyeX07XG4gICAgICBgfVxuICAgICAgey4uLnJlc3R9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IEFjY29yZGlvbkNvbnRlbnRcbiJdfQ== */")
   }, rest), children);
 };
 export default AccordionContent;

package/cjs/accordion/Accordion.d.ts

@@ -0,0 +1,97 @@
+import React, { ReactNode } from 'react';
+import { CollapseProps } from '@kunukn/react-collapse';
+export declare type AccordionHeaderProps = {
+    /**
+     * Add heading to the Accordion.
+     */
+    heading?: string;
+    /**
+     * Add secondary heading to the Accordion.
+     */
+    secondaryHeading?: ReactNode;
+    /**
+     * Specify the duration of the transition between open and closed.
+     */
+    transitionDuration?: string;
+    /**
+     * If set to `true` the Accordion is open.
+     */
+    isOpen?: boolean;
+    /**
+     * Disable the Accordion.
+     */
+    disabled?: boolean;
+    /**
+     * Use the Accordion without animation.
+     */
+    noAnimation?: boolean;
+    /**
+     * Hide the secondary heading when the Accordion is opened.
+     */
+    noSecondaryHeadingWhenOpen?: boolean;
+    /**
+     * Callback when toggling the accordion
+     */
+    onToggle?: () => void;
+};
+export declare const AccordionHeader: React.FunctionComponent<AccordionHeaderProps>;
+export declare type AccordionProps = {
+    /**
+     * Add heading to the Accordion.
+     */
+    heading?: string;
+    /**
+     * Add a custom header to the Accordion.
+     */
+    header?: ReactNode;
+    /**
+     * Add secondary heading to the Accordion.
+     */
+    secondaryHeading?: ReactNode;
+    /**
+     * Specify the duration of the transition between open and closed.
+     */
+    transitionDuration?: string;
+    /**
+     * If set to `true` the Accordion is open.
+     */
+    isOpen?: boolean;
+    /**
+     * Disable the Accordion.
+     */
+    disabled?: boolean;
+    /**
+     * Callback when toggling the accordion
+     */
+    onToggle?: () => void;
+    /**
+     * Props passed on to the Collapse component
+     */
+    collapseProps?: CollapseProps;
+    /**
+     * Use the Accordion without animation.
+     */
+    noAnimation?: boolean;
+    /**
+     * The compressed variant removes the `margin-bottom` of the Accordion.
+     */
+    variant?: 'default' | 'compressed';
+    /**
+     * Specify the content padding of the Accordion.
+     */
+    type?: 'small' | 'medium';
+    /**
+     * Add a className to the Accordion.
+     */
+    className?: string;
+    /**
+     * Hide the secondary heading when the Accordion is opened.
+     */
+    noSecondaryHeadingWhenOpen?: boolean;
+    /**
+     * Hide the Divider (the grey line under the header)
+     */
+    hideDivider?: boolean;
+};
+export declare const Accordion: React.FunctionComponent<AccordionProps>;
+export default Accordion;