@coorpacademy/components 11.39.5-alpha.9 → 11.40.1-alpha.10

package/es/molecule/quick-filters/index.js

@@ -0,0 +1,179 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import FaIcon from '../../atom/icon';
+import { COLORS } from '../../variables/colors';
+import ButtonLink from '../../atom/button-link';
+import style from './style.css';
+import { propTypes } from './types';
+const SCROLL_RIGHT_SIZE = 380;
+const SCROLL_LEFT_SIZE = -380;
+export const handleScroll = (direction, listRef) => {
+  if (listRef.current) {
+    listRef.current.scrollBy({
+      left: direction,
+      behavior: 'smooth'
+    });
+  }
+};
+const getFilterButton = filterButtonProps => {
+  if (!filterButtonProps) return null;
+  const {
+    tag
+  } = filterButtonProps;
+  return /*#__PURE__*/React.createElement("div", {
+    className: tag ? style.filterButtonWrapper : ''
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.filterButton
+  }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, filterButtonProps, {
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'sliders',
+        size: 14,
+        color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500
+      }
+    },
+    "data-testid": "open-filters-modal-button",
+    customStyle: {
+      borderRadius: '12px'
+    }
+  }))));
+};
+const QuickFilters = ({
+  primaryOption,
+  filterOptions,
+  filterButton,
+  nextFilterAriaLabel,
+  previousFilterAriaLabel,
+  filterOptionsAriaLabel
+}) => {
+  const {
+    defaultLabel,
+    defaultIconName,
+    defaultSelected,
+    defaultAriaLabel,
+    onDefaultClick
+  } = primaryOption;
+  const filtersListRef = React.useRef(null);
+  const rightBtnRef = useRef(null);
+  const leftBtnRef = useRef(null);
+  const handleScrollRight = useCallback(() => {
+    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);
+  }, [filtersListRef]);
+  const handleScrollLeft = useCallback(() => {
+    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);
+  }, [filtersListRef]);
+  useEffect(() => {
+    const list = filtersListRef.current;
+    const rightButton = rightBtnRef.current;
+    const leftButton = leftBtnRef.current;
+    /* istanbul ignore next */ // not testable without complex mocking useRef
+    if (!list || !leftButton || !rightButton) return;
+    const update = () => {
+      const rightArrowWidth = rightButton.offsetWidth;
+      rightButton.style.visibility = list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth ? 'visible' : 'hidden';
+      leftButton.style.visibility = list.scrollLeft > 0 ? 'visible' : 'hidden';
+      leftButton.style.display = list.scrollLeft > 0 ? 'flex' : 'none';
+    };
+    list.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+    update();
+    return () => {
+      list.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [filterOptions]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.filtersMainContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.leftArrowButton,
+    ref: leftBtnRef,
+    style: {
+      visibility: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'arrow-left',
+        size: 15
+      }
+    },
+    onClick: handleScrollLeft,
+    customStyle: {
+      height: '36px'
+    },
+    "data-testid": "scroll-left-button",
+    "aria-label": previousFilterAriaLabel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.filtersList,
+    ref: filtersListRef,
+    "data-testid": "filters-options-list",
+    "aria-label": filterOptionsAriaLabel
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "all-option",
+    className: classNames(style.defaultOption, defaultSelected && style.filterSelected),
+    onClick: onDefaultClick
+  }, /*#__PURE__*/React.createElement(FaIcon, {
+    iconName: defaultIconName,
+    size: {
+      faSize: 20,
+      wrapperSize: 20
+    },
+    iconColor: defaultSelected ? COLORS.cm_grey_700 : COLORS.neutral_500,
+    "aria-label": defaultAriaLabel
+  }), /*#__PURE__*/React.createElement("span", {
+    className: style.filterLabel
+  }, defaultLabel)), /*#__PURE__*/React.createElement("div", {
+    className: style.filterSeparator
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.filtersContainer
+  }, filterOptions.map((filterOption, idx) => {
+    const {
+      iconName,
+      label,
+      selected,
+      value,
+      onClick,
+      ariaLabel
+    } = filterOption;
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      className: classNames(style.filterOption, selected && style.filterSelected),
+      "data-testid": `filter-${value}-${idx}`,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(FaIcon, {
+      iconName: iconName,
+      iconColor: selected ? COLORS.cm_grey_700 : COLORS.neutral_500,
+      size: {
+        faSize: 20,
+        wrapperSize: 20
+      },
+      "aria-label": ariaLabel
+    }), /*#__PURE__*/React.createElement("span", null, label));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.rightArrowButton,
+    ref: rightBtnRef,
+    style: {
+      visibility: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'arrow-right',
+        size: 15
+      }
+    },
+    onClick: handleScrollRight,
+    customStyle: {
+      height: '36px'
+    },
+    "data-testid": "scroll-right-button",
+    "aria-label": nextFilterAriaLabel
+  })))), getFilterButton(filterButton));
+};
+QuickFilters.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default QuickFilters;
+//# sourceMappingURL=index.js.map

package/es/molecule/quick-filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","tag","createElement","className","filterButtonWrapper","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","borderRadius","QuickFilters","primaryOption","filterOptions","nextFilterAriaLabel","previousFilterAriaLabel","filterOptionsAriaLabel","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","visibility","scrollLeft","clientWidth","scrollWidth","display","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","iconColor","filterLabel","filterSeparator","filtersContainer","map","filterOption","idx","label","selected","value","ariaLabel","key","rightArrowButton","process","env","NODE_ENV"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 380;\nconst SCROLL_LEFT_SIZE = -380;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (filterButtonProps: ButtonLinkProps | undefined) => {\n  if (!filterButtonProps) return null;\n  const {tag} = filterButtonProps;\n  return (\n    <div className={tag ? style.filterButtonWrapper : ''}>\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...filterButtonProps}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = ({\n  primaryOption,\n  filterOptions,\n  filterButton,\n  nextFilterAriaLabel,\n  previousFilterAriaLabel,\n  filterOptionsAriaLabel\n}: QuickFiltersProps) => {\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      rightButton.style.visibility =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth\n          ? 'visible'\n          : 'hidden';\n      leftButton.style.visibility = list.scrollLeft > 0 ? 'visible' : 'hidden';\n      leftButton.style.display = list.scrollLeft > 0 ? 'flex' : 'none';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer}>\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n          aria-label={previousFilterAriaLabel}\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            iconColor={defaultSelected ? COLORS.cm_grey_700 : COLORS.neutral_500}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  iconColor={selected ? COLORS.cm_grey_700 : COLORS.neutral_500}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span>{label}</span>\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n              aria-label={nextFilterAriaLabel}\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/quick-filters/style.css

@@ -0,0 +1,119 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+@value cm_primary_blue from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.filtersMainContainer {
+    composes: textBase;
+    display: flex;
+    align-items: center;
+}
+
+.filtersContainer {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.filtersList {
+    overflow-x: auto;
+    scrollbar-width: none;
+    align-items: center;
+    display: flex;
+    flex: 1;
+    position: relative;
+    margin-right: 40px;
+}
+
+.filterOption, .defaultOption {
+    display: flex;
+    color: cm_grey_500;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    flex-shrink: 0;
+    height: 72px;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+.filterSelected {
+    color: cm_grey_700;
+    border-bottom: 2px solid cm_primary_blue;
+}
+
+.filterLabel {
+    min-width: 70px;
+}
+
+.filterSeparator {
+    padding: 24px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.filterSeparator::before {
+  content: '';
+  width: 1px;
+  height: 24px;
+  background-color: cm_grey_100;
+}
+
+.filterButton {
+    margin-left: auto;
+    box-sizing: border-box;
+}
+
+.leftArrowButton, .rightArrowButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    background-color: cm_grey_100;
+    border-radius: 50%;
+    position: sticky;
+    z-index: 1;
+    transform: translateY(-10%);
+}
+
+.rightArrowButton {
+  right: 0;         
+  box-shadow: -20px 0 40px 40px white, 30px  0 40px 40px white;
+}
+
+.leftArrowButton {
+  left: 0;          
+  box-shadow: 20px 0 40px 40px white;
+}
+
+.filterButtonWrapper {
+    padding: 2px;
+    border-radius: 16px;
+    border: 2px solid cm_primary_blue;
+    box-sizing: border-box;
+}
+
+@media mobile {
+    .leftArrowButton, .rightArrowButton, .filterButton, .filterButtonWrapper {
+        display: none!important;
+    }
+
+    .filtersList{
+        margin-right: 0;
+    }
+}

package/es/molecule/quick-filters/types.d.ts

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import { ButtonLinkProps } from '../../atom/button-link/types';
+export declare type QuickFiltersProps = {
+    primaryOption: {
+        defaultLabel: string;
+        defaultValue: string;
+        defaultIconName: string;
+        defaultSelected: boolean;
+        onDefaultClick: () => void;
+        defaultAriaLabel: string;
+    };
+    nextFilterAriaLabel: string;
+    previousFilterAriaLabel: string;
+    filterOptionsAriaLabel: string;
+    filterOptions: FilterOption[];
+    filterButton?: ButtonLinkProps;
+};
+export declare type ScrollByOptions = {
+    left: number;
+    behavior: string;
+};
+declare type FilterOption = {
+    iconName: string;
+    label: string;
+    value: string;
+    onClick: () => void;
+    selected: boolean;
+    ariaLabel: string;
+};
+export declare const propTypes: {
+    primaryOption: PropTypes.Requireable<PropTypes.InferProps<{
+        defaultLabel: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        defaultIconName: PropTypes.Requireable<string>;
+        defaultSelected: PropTypes.Requireable<boolean>;
+        defaultAriaLabel: PropTypes.Requireable<string>;
+        onDefaultClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }>>;
+    nextFilterAriaLabel: PropTypes.Requireable<string>;
+    previousFilterAriaLabel: PropTypes.Requireable<string>;
+    filterOptionsAriaLabel: PropTypes.Requireable<string>;
+    filterOptions: PropTypes.Requireable<(PropTypes.InferProps<{
+        iconName: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        selected: PropTypes.Requireable<boolean>;
+        ariaLabel: PropTypes.Requireable<string>;
+    }> | null | undefined)[]>;
+    filterButton: PropTypes.Requireable<PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        usage: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-label': PropTypes.Requireable<string>;
+        tooltipText: PropTypes.Requireable<string>;
+        tooltipPlacement: PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        'data-testid': PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            position: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                color: PropTypes.Requireable<string>;
+                backgroundColor: PropTypes.Requireable<string>;
+                size: PropTypes.Requireable<number>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                }>;
+            }>>;
+        }>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        link: PropTypes.Requireable<PropTypes.InferProps<{
+            href: PropTypes.Requireable<string>;
+            download: PropTypes.Requireable<boolean>;
+            target: PropTypes.Requireable<string>;
+        }>>;
+        hoverBackgroundColor: PropTypes.Requireable<string>;
+        hoverColor: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        customStyle: PropTypes.Requireable<{
+            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+        }>;
+        useTitle: PropTypes.Requireable<boolean>;
+        customLabelClassName: PropTypes.Requireable<string>;
+    }>>;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/molecule/quick-filters/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,iBAAiB,GAAG;IAC9B,aAAa,EAAE;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBrB,CAAC"}

package/es/molecule/quick-filters/types.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import ButtonLink from '../../atom/button-link';
+export const propTypes = {
+  primaryOption: PropTypes.shape({
+    defaultLabel: PropTypes.string,
+    defaultValue: PropTypes.string,
+    defaultIconName: PropTypes.string,
+    defaultSelected: PropTypes.bool,
+    defaultAriaLabel: PropTypes.string,
+    onDefaultClick: PropTypes.func
+  }),
+  nextFilterAriaLabel: PropTypes.string,
+  previousFilterAriaLabel: PropTypes.string,
+  filterOptionsAriaLabel: PropTypes.string,
+  filterOptions: PropTypes.arrayOf(PropTypes.shape({
+    iconName: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onClick: PropTypes.func,
+    selected: PropTypes.bool,
+    ariaLabel: PropTypes.string
+  })),
+  filterButton: PropTypes.shape(ButtonLink.propTypes)
+};
+//# sourceMappingURL=types.js.map

package/es/molecule/quick-filters/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["PropTypes","ButtonLink","propTypes","primaryOption","shape","defaultLabel","string","defaultValue","defaultIconName","defaultSelected","bool","defaultAriaLabel","onDefaultClick","func","nextFilterAriaLabel","previousFilterAriaLabel","filterOptionsAriaLabel","filterOptions","arrayOf","iconName","label","value","onClick","selected","ariaLabel","filterButton"],"sources":["../../../src/molecule/quick-filters/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport ButtonLink from '../../atom/button-link';\n\nexport type QuickFiltersProps = {\n  primaryOption: {\n    defaultLabel: string;\n    defaultValue: string;\n    defaultIconName: string;\n    defaultSelected: boolean;\n    onDefaultClick: () => void;\n    defaultAriaLabel: string;\n  };\n  nextFilterAriaLabel: string;\n  previousFilterAriaLabel: string;\n  filterOptionsAriaLabel: string;\n  filterOptions: FilterOption[];\n  filterButton?: ButtonLinkProps;\n};\n\nexport type ScrollByOptions = {\n  left: number;\n  behavior: string;\n};\n\ntype FilterOption = {\n  iconName: string;\n  label: string;\n  value: string;\n  onClick: () => void;\n  selected: boolean;\n  ariaLabel: string;\n};\n\nexport const propTypes = {\n  primaryOption: PropTypes.shape({\n    defaultLabel: PropTypes.string,\n    defaultValue: PropTypes.string,\n    defaultIconName: PropTypes.string,\n    defaultSelected: PropTypes.bool,\n    defaultAriaLabel: PropTypes.string,\n    onDefaultClick: PropTypes.func\n  }),\n  nextFilterAriaLabel: PropTypes.string,\n  previousFilterAriaLabel: PropTypes.string,\n  filterOptionsAriaLabel: PropTypes.string,\n  filterOptions: PropTypes.arrayOf(\n    PropTypes.shape({\n      iconName: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.string,\n      onClick: PropTypes.func,\n      selected: PropTypes.bool,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  filterButton: PropTypes.shape(ButtonLink.propTypes)\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAElC,OAAOC,UAAU,MAAM,wBAAwB;AAgC/C,OAAO,MAAMC,SAAS,GAAG;EACvBC,aAAa,EAAEH,SAAS,CAACI,KAAK,CAAC;IAC7BC,YAAY,EAAEL,SAAS,CAACM,MAAM;IAC9BC,YAAY,EAAEP,SAAS,CAACM,MAAM;IAC9BE,eAAe,EAAER,SAAS,CAACM,MAAM;IACjCG,eAAe,EAAET,SAAS,CAACU,IAAI;IAC/BC,gBAAgB,EAAEX,SAAS,CAACM,MAAM;IAClCM,cAAc,EAAEZ,SAAS,CAACa;EAC5B,CAAC,CAAC;EACFC,mBAAmB,EAAEd,SAAS,CAACM,MAAM;EACrCS,uBAAuB,EAAEf,SAAS,CAACM,MAAM;EACzCU,sBAAsB,EAAEhB,SAAS,CAACM,MAAM;EACxCW,aAAa,EAAEjB,SAAS,CAACkB,OAAO,CAC9BlB,SAAS,CAACI,KAAK,CAAC;IACde,QAAQ,EAAEnB,SAAS,CAACM,MAAM;IAC1Bc,KAAK,EAAEpB,SAAS,CAACM,MAAM;IACvBe,KAAK,EAAErB,SAAS,CAACM,MAAM;IACvBgB,OAAO,EAAEtB,SAAS,CAACa,IAAI;IACvBU,QAAQ,EAAEvB,SAAS,CAACU,IAAI;IACxBc,SAAS,EAAExB,SAAS,CAACM;EACvB,CAAC,CACH,CAAC;EACDmB,YAAY,EAAEzB,SAAS,CAACI,KAAK,CAACH,UAAU,CAACC,SAAS;AACpD,CAAC","ignoreList":[]}

package/es/molecule/translation-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/translation-modal/index.js"],"names":[],"mappings":";AAqBA,gFA4EC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/translation-modal/index.js"],"names":[],"mappings":";AAmBA,gFA4EC"}

package/es/molecule/translation-modal/index.js

@@ -98,7 +98,7 @@ const TranslationModal = (props, context) => {
     title: outputLanguage,
     inputProps: targetInputText,
     textAreaProps: targetTextArea,
-    readOnly: readOnly
+    readOnly
   }))));
 };
 TranslationModal.contextTypes = {

package/es/molecule/translation-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useCallback","PropTypes","BaseModal","Provider","COLORS","InputText","TextArea","style","renderInputGroup","title","inputProps","textAreaProps","readOnly","disabled","createElement","className","inputGroup","_extends","TranslationModal","props","context","isOpen","onCancel","onConfirm","onClose","source","inputText","sourceInputText","textArea","sourceTextArea","inputLanguage","target","targetInputText","targetTextArea","language","outputLanguage","translate","detectScrollbar","handleCancel","handleClose","footer","cancelButton","label","confirmButton","undefined","iconName","color","cm_primary_blue","description","headerIcon","name","backgroundColor","translationModal","horizontalSection","separator","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func","shape","theme","string"],"sources":["../../../src/molecule/translation-modal/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport BaseModal from '../base-modal';\nimport Provider from '../../atom/provider';\nimport {COLORS} from '../../variables/colors';\nimport InputText from '../../atom/input-text';\nimport TextArea from '../../atom/input-textarea';\nimport style from './style.css';\n\nconst renderInputGroup = ({title, inputProps, textAreaProps, readOnly, disabled}) => {\n  \n  return (\n    <div className={style.inputGroup}>\n      <div className={style.title}>{title}</div>\n            <InputText {...inputProps} readOnly={readOnly} disabled={disabled} />\n      <TextArea {...textAreaProps} readOnly={readOnly} disabled={disabled} />\n\n    </div>\n  );\n};\n\nconst TranslationModal = (props, context) => {\n  const {\n    isOpen,\n    onCancel,\n    onConfirm,\n    onClose,\n    disabled = false,\n    source: {inputText: sourceInputText, textArea: sourceTextArea, inputLanguage},\n    target: {inputText: targetInputText, textArea: targetTextArea, language: outputLanguage},\n    readOnly = false\n  } = props;\n  const {translate} = context;\n\n  const detectScrollbar = true;\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const footer = useMemo(() => {\n    const cancelButton = {\n      onCancel: handleCancel,\n      label: translate(readOnly ? 'close' : 'cancel')\n    };\n    return {\n      cancelButton,\n      confirmButton: {\n        onConfirm: readOnly ? undefined : onConfirm,\n        label: translate('confirm'),\n        iconName: 'check',\n        disabled: disabled || readOnly,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, translate, readOnly, disabled]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('translation_title')}\n      description={translate('translation_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'language',\n        backgroundColor: '#D6E6FF'\n      }}\n      detectScrollbar={detectScrollbar}\n    >\n      <div className={style.translationModal}>\n        <div className={style.horizontalSection}>\n          {renderInputGroup({\n            title: inputLanguage,\n            inputProps: sourceInputText,\n            textAreaProps: sourceTextArea,\n            readOnly: true,\n          })}\n\n          <div className={style.separator} />\n\n          {renderInputGroup({\n            title: outputLanguage,\n            inputProps: targetInputText,\n            textAreaProps: targetTextArea,\n            readOnly: readOnly,\n          })}\n        </div>\n      </div>\n    </BaseModal>\n  );\n};\n\nTranslationModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nTranslationModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func,\n  disabled: PropTypes.bool,\n  source: PropTypes.shape({\n    inputText: PropTypes.shape({\n      ...InputText.propTypes,\n      theme: PropTypes.string\n    }),\n    textArea: PropTypes.shape({\n      ...TextArea.propTypes,\n      theme: PropTypes.string\n    }),\n    inputLanguage: PropTypes.string\n  }),\n  target: PropTypes.shape({\n    inputText: PropTypes.shape({\n      ...InputText.propTypes,\n      theme: PropTypes.string\n    }),\n    textArea: PropTypes.shape({\n      ...TextArea.propTypes,\n      theme: PropTypes.string\n    }),\n    language: PropTypes.string\n  }),\n  readOnly: PropTypes.bool\n};\n\nexport default TranslationModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useCallback","PropTypes","BaseModal","Provider","COLORS","InputText","TextArea","style","renderInputGroup","title","inputProps","textAreaProps","readOnly","disabled","createElement","className","inputGroup","_extends","TranslationModal","props","context","isOpen","onCancel","onConfirm","onClose","source","inputText","sourceInputText","textArea","sourceTextArea","inputLanguage","target","targetInputText","targetTextArea","language","outputLanguage","translate","detectScrollbar","handleCancel","handleClose","footer","cancelButton","label","confirmButton","undefined","iconName","color","cm_primary_blue","description","headerIcon","name","backgroundColor","translationModal","horizontalSection","separator","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func","shape","theme","string"],"sources":["../../../src/molecule/translation-modal/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport BaseModal from '../base-modal';\nimport Provider from '../../atom/provider';\nimport {COLORS} from '../../variables/colors';\nimport InputText from '../../atom/input-text';\nimport TextArea from '../../atom/input-textarea';\nimport style from './style.css';\n\nconst renderInputGroup = ({title, inputProps, textAreaProps, readOnly, disabled}) => {\n  return (\n    <div className={style.inputGroup}>\n      <div className={style.title}>{title}</div>\n      <InputText {...inputProps} readOnly={readOnly} disabled={disabled} />\n      <TextArea {...textAreaProps} readOnly={readOnly} disabled={disabled} />\n    </div>\n  );\n};\n\nconst TranslationModal = (props, context) => {\n  const {\n    isOpen,\n    onCancel,\n    onConfirm,\n    onClose,\n    disabled = false,\n    source: {inputText: sourceInputText, textArea: sourceTextArea, inputLanguage},\n    target: {inputText: targetInputText, textArea: targetTextArea, language: outputLanguage},\n    readOnly = false\n  } = props;\n  const {translate} = context;\n\n  const detectScrollbar = true;\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const footer = useMemo(() => {\n    const cancelButton = {\n      onCancel: handleCancel,\n      label: translate(readOnly ? 'close' : 'cancel')\n    };\n    return {\n      cancelButton,\n      confirmButton: {\n        onConfirm: readOnly ? undefined : onConfirm,\n        label: translate('confirm'),\n        iconName: 'check',\n        disabled: disabled || readOnly,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, translate, readOnly, disabled]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('translation_title')}\n      description={translate('translation_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'language',\n        backgroundColor: '#D6E6FF'\n      }}\n      detectScrollbar={detectScrollbar}\n    >\n      <div className={style.translationModal}>\n        <div className={style.horizontalSection}>\n          {renderInputGroup({\n            title: inputLanguage,\n            inputProps: sourceInputText,\n            textAreaProps: sourceTextArea,\n            readOnly: true\n          })}\n\n          <div className={style.separator} />\n\n          {renderInputGroup({\n            title: outputLanguage,\n            inputProps: targetInputText,\n            textAreaProps: targetTextArea,\n            readOnly\n          })}\n        </div>\n      </div>\n    </BaseModal>\n  );\n};\n\nTranslationModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nTranslationModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func,\n  disabled: PropTypes.bool,\n  source: PropTypes.shape({\n    inputText: PropTypes.shape({\n      ...InputText.propTypes,\n      theme: PropTypes.string\n    }),\n    textArea: PropTypes.shape({\n      ...TextArea.propTypes,\n      theme: PropTypes.string\n    }),\n    inputLanguage: PropTypes.string\n  }),\n  target: PropTypes.shape({\n    inputText: PropTypes.shape({\n      ...InputText.propTypes,\n      theme: PropTypes.string\n    }),\n    textArea: PropTypes.shape({\n      ...TextArea.propTypes,\n      theme: PropTypes.string\n    }),\n    language: PropTypes.string\n  }),\n  readOnly: PropTypes.bool\n};\n\nexport default TranslationModal;\n"],"mappings":"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","ignoreList":[]}

package/lib/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA6D7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAQA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA8D7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/lib/atom/button-link/index.js

@@ -9,13 +9,14 @@ var _link = _interopRequireDefault(require("../link"));
 var _icon = _interopRequireWildcard(require("../icon"));
 var _buttonIcons = require("../../util/button-icons");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
+var _tag = _interopRequireDefault(require("../tag"));
 var _types = _interopRequireDefault(require("./types"));
 var _style = _interopRequireDefault(require("./style.css"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor, customLabelClassName) => {
+const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor, customLabelClassName, tag) => {
   const {
     type,
     faIcon,
@@ -57,7 +58,7 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
     className: _style.default.buttonContent
   }, position === 'left' ? iconComponent : null, content ? /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.label
-  }, content) : null, position === 'right' ? iconComponent : null);
+  }, content) : null, tag ? /*#__PURE__*/_react.default.createElement(_tag.default, tag) : null, position === 'right' ? iconComponent : null);
 };
 const ButtonLink = props => {
   const {
@@ -80,7 +81,8 @@ const ButtonLink = props => {
     className,
     customStyle,
     useTitle = true,
-    customLabelClassName
+    customLabelClassName,
+    tag
   } = props;
   const styleButton = (0, _classnames.default)(link && _style.default.link, className, _style.default.button, !label && _style.default.iconButton, type === 'primary' && _style.default.primary, type === 'secondary' && _style.default.secondary, type === 'tertiary' && _style.default.tertiary, type === 'text' && _style.default.text, type === 'dangerous' && _style.default.dangerous, disabled && _style.default.disabled);
   const [hovered, setHovered] = (0, _react.useState)(false);
@@ -128,7 +130,7 @@ const ButtonLink = props => {
       hoverBackgroundColor: hoverBackgroundColor,
       onMouseEnter: handleMouseOver,
       onMouseLeave: handleMouseLeave
-    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, customLabelClassName), renderToolTip());
+    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, customLabelClassName, tag), renderToolTip());
   }
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, useTitle && {
     title: ariaLabel || label
@@ -149,7 +151,7 @@ const ButtonLink = props => {
     onMouseLeave: handleMouseLeave,
     tabIndex: 0,
     disabled: disabled
-  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor), renderToolTip());
+  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, customLabelClassName, tag), renderToolTip());
 };
 ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
 var _default = exports.default = ButtonLink;