@coorpacademy/components 11.40.12 → 11.40.13-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/es/molecule/dashboard/cards-list/style.css +4 -4
  2. package/es/molecule/quick-filters/index.d.ts +25 -3
  3. package/es/molecule/quick-filters/index.d.ts.map +1 -1
  4. package/es/molecule/quick-filters/index.js +54 -22
  5. package/es/molecule/quick-filters/index.js.map +1 -1
  6. package/es/molecule/quick-filters/style.css +87 -6
  7. package/es/molecule/quick-filters/types.d.ts +0 -4
  8. package/es/molecule/quick-filters/types.d.ts.map +1 -1
  9. package/es/molecule/quick-filters/types.js +0 -2
  10. package/es/molecule/quick-filters/types.js.map +1 -1
  11. package/es/template/common/search-page/index.d.ts +65 -0
  12. package/es/template/common/search-page/index.d.ts.map +1 -1
  13. package/es/template/common/search-page/index.js +12 -3
  14. package/es/template/common/search-page/index.js.map +1 -1
  15. package/es/template/common/search-page/style.css +4 -3
  16. package/lib/molecule/dashboard/cards-list/style.css +4 -4
  17. package/lib/molecule/quick-filters/index.d.ts +25 -3
  18. package/lib/molecule/quick-filters/index.d.ts.map +1 -1
  19. package/lib/molecule/quick-filters/index.js +55 -23
  20. package/lib/molecule/quick-filters/index.js.map +1 -1
  21. package/lib/molecule/quick-filters/style.css +87 -6
  22. package/lib/molecule/quick-filters/types.d.ts +0 -4
  23. package/lib/molecule/quick-filters/types.d.ts.map +1 -1
  24. package/lib/molecule/quick-filters/types.js +0 -2
  25. package/lib/molecule/quick-filters/types.js.map +1 -1
  26. package/lib/template/common/search-page/index.d.ts +65 -0
  27. package/lib/template/common/search-page/index.d.ts.map +1 -1
  28. package/lib/template/common/search-page/index.js +12 -3
  29. package/lib/template/common/search-page/index.js.map +1 -1
  30. package/lib/template/common/search-page/style.css +4 -3
  31. package/package.json +2 -2
package/es/molecule/dashboard/cards-list/style.css CHANGED
@@ -3,13 +3,13 @@
3
3
  @value mobile from breakpoints;
4
4
  @value tablet from breakpoints;
5
5
  @value desktop from breakpoints;
6
- @value dark from colors;
7
6
  @value black from colors;
8
7
  @value lightMediumGray from colors;
9
8
  @value medium from colors;
10
9
  @value light from colors;
11
10
  @value cm_grey_100 from colors;
12
11
  @value cm_grey_75 from colors;
12
+ @value cm_grey_500 from colors;
13
13
 
14
14
  .wrapper {
15
15
  padding: 16px 30px 8px;
@@ -47,7 +47,7 @@
47
47
  display: flex;
48
48
  align-items: center;
49
49
  flex-grow: 1;
50
- color: dark;
50
+ color: cm_grey_500;
51
51
  }
52
52
 
53
53
  .titleNode {
@@ -71,13 +71,13 @@
71
71
  cursor: pointer;
72
72
  display: flex;
73
73
  align-items: center;
74
- color: dark;
74
+ color: cm_grey_500;
75
75
  padding-right: 16px;
76
76
  margin-right: 16px;
77
77
  }
78
78
  .showMoreBar {
79
79
  composes: showMore;
80
- border-right: 1px solid color(dark a(70%));
80
+ border-right: 1px solid color(cm_grey_500 a(70%));
81
81
  height: 16px;
82
82
  margin: auto 16px auto auto;
83
83
  padding-top: 2px;
package/es/molecule/quick-filters/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
+ import { WebContextValues } from '../../atom/provider/web-context';
2
3
  import { QuickFiltersProps } from './types';
3
4
  export declare const handleScroll: (direction: number, listRef: React.RefObject<HTMLDivElement>) => void;
4
5
  declare const QuickFilters: {
5
- ({ primaryOption, filterOptions, filterButton, nextFilterAriaLabel, previousFilterAriaLabel, filterOptionsAriaLabel }: QuickFiltersProps): JSX.Element;
6
+ ({ primaryOption, filterOptions, filterButton, filterOptionsAriaLabel }: QuickFiltersProps, context: WebContextValues): JSX.Element;
6
7
  propTypes: {
7
8
  primaryOption: import("prop-types").Requireable<import("prop-types").InferProps<{
8
9
  defaultLabel: import("prop-types").Requireable<string>;
@@ -12,8 +13,6 @@ declare const QuickFilters: {
12
13
  defaultAriaLabel: import("prop-types").Requireable<string>;
13
14
  onDefaultClick: import("prop-types").Requireable<(...args: any[]) => any>;
14
15
  }>>;
15
- nextFilterAriaLabel: import("prop-types").Requireable<string>;
16
- previousFilterAriaLabel: import("prop-types").Requireable<string>;
17
16
  filterOptionsAriaLabel: import("prop-types").Requireable<string>;
18
17
  filterOptions: import("prop-types").Requireable<(import("prop-types").InferProps<{
19
18
  iconName: import("prop-types").Requireable<string>;
@@ -70,6 +69,29 @@ declare const QuickFilters: {
70
69
  customLabelClassName: import("prop-types").Requireable<string>;
71
70
  }>>;
72
71
  };
72
+ contextTypes: {
73
+ skin: import("prop-types").Requireable<import("prop-types").InferProps<{
74
+ common: import("prop-types").Requireable<{
75
+ [x: string]: any;
76
+ }>;
77
+ images: import("prop-types").Requireable<import("prop-types").InferProps<{
78
+ 'logo-mobile': import("prop-types").Requireable<any>;
79
+ logo: import("prop-types").Requireable<any>;
80
+ 'logo-email': import("prop-types").Requireable<any>;
81
+ login: import("prop-types").Requireable<any>;
82
+ }>>;
83
+ icons: import("prop-types").Requireable<{
84
+ [x: string]: any;
85
+ }>;
86
+ mod: import("prop-types").Requireable<{
87
+ [x: string]: any;
88
+ }>;
89
+ courses: import("prop-types").Requireable<any[]>;
90
+ texts: import("prop-types").Requireable<{
91
+ [x: string]: any;
92
+ }>;
93
+ }>>;
94
+ };
73
95
  };
74
96
  export default QuickFilters;
75
97
  //# sourceMappingURL=index.d.ts.map
package/es/molecule/quick-filters/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AA0BF,QAAA,MAAM,YAAY;2HAOf,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GnB,CAAC;AAGF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AAyCF,QAAA,MAAM,YAAY;6EACsD,iBAAiB,WAC9E,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH1B,CAAC;AAMF,eAAe,YAAY,CAAC"}
package/es/molecule/quick-filters/index.js CHANGED
@@ -1,13 +1,15 @@
1
+ import _get from "lodash/fp/get";
1
2
  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); }
2
3
  import React, { useCallback, useRef, useEffect } from 'react';
3
4
  import classNames from 'classnames';
4
5
  import FaIcon from '../../atom/icon';
5
6
  import { COLORS } from '../../variables/colors';
6
7
  import ButtonLink from '../../atom/button-link';
8
+ import Provider, { GetSkinFromContext } from '../../atom/provider';
7
9
  import style from './style.css';
8
10
  import { propTypes } from './types';
9
- const SCROLL_RIGHT_SIZE = 380;
10
- const SCROLL_LEFT_SIZE = -380;
11
+ const SCROLL_RIGHT_SIZE = 400;
12
+ const SCROLL_LEFT_SIZE = -400;
11
13
  export const handleScroll = (direction, listRef) => {
12
14
  if (listRef.current) {
13
15
  listRef.current.scrollBy({
@@ -16,16 +18,20 @@ export const handleScroll = (direction, listRef) => {
16
18
  });
17
19
  }
18
20
  };
19
- const getFilterButton = filterButtonProps => {
21
+ const getFilterButton = (filterButtonProps, primarySkinColor) => {
20
22
  if (!filterButtonProps) return null;
21
23
  const {
22
- tag
24
+ tag,
25
+ ...rest
23
26
  } = filterButtonProps;
24
27
  return /*#__PURE__*/React.createElement("div", {
25
- className: tag ? style.filterButtonWrapper : ''
28
+ className: style.filterButtonWrapper,
29
+ style: {
30
+ borderColor: tag?.label ? primarySkinColor : 'transparent'
31
+ }
26
32
  }, /*#__PURE__*/React.createElement("div", {
27
33
  className: style.filterButton
28
- }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, filterButtonProps, {
34
+ }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, rest, {
29
35
  icon: {
30
36
  position: 'left',
31
37
  faIcon: {
@@ -34,6 +40,14 @@ const getFilterButton = filterButtonProps => {
34
40
  color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500
35
41
  }
36
42
  },
43
+ tag: tag ? {
44
+ label: tag.label,
45
+ customStyle: {
46
+ backgroundColor: primarySkinColor,
47
+ color: '#FFFFFF'
48
+ }
49
+ } : undefined,
50
+ className: style.filterButton,
37
51
  "data-testid": "open-filters-modal-button",
38
52
  customStyle: {
39
53
  borderRadius: '12px'
@@ -44,10 +58,10 @@ const QuickFilters = ({
44
58
  primaryOption,
45
59
  filterOptions,
46
60
  filterButton,
47
- nextFilterAriaLabel,
48
- previousFilterAriaLabel,
49
61
  filterOptionsAriaLabel
50
- }) => {
62
+ }, context) => {
63
+ const skin = GetSkinFromContext(context);
64
+ const primarySkinColor = _get('common.primary', skin);
51
65
  const {
52
66
  defaultLabel,
53
67
  defaultIconName,
@@ -72,9 +86,12 @@ const QuickFilters = ({
72
86
  if (!list || !leftButton || !rightButton) return;
73
87
  const update = () => {
74
88
  const rightArrowWidth = rightButton.offsetWidth;
75
- rightButton.style.visibility = list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth ? 'visible' : 'hidden';
76
- leftButton.style.visibility = list.scrollLeft > 0 ? 'visible' : 'hidden';
77
- leftButton.style.display = list.scrollLeft > 0 ? 'flex' : 'none';
89
+ const showingRightButton = list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;
90
+ const showingLeftButton = list.scrollLeft > 0;
91
+ rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';
92
+ rightButton.style.opacity = showingRightButton ? '1' : '0';
93
+ leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';
94
+ leftButton.style.opacity = showingLeftButton ? '1' : '0';
78
95
  };
79
96
  list.addEventListener('scroll', update);
80
97
  window.addEventListener('resize', update);
@@ -85,7 +102,8 @@ const QuickFilters = ({
85
102
  };
86
103
  }, [filterOptions]);
87
104
  return /*#__PURE__*/React.createElement("div", {
88
- className: style.filtersMainContainer
105
+ className: style.filtersMainContainer,
106
+ "data-name": "search"
89
107
  }, /*#__PURE__*/React.createElement("div", {
90
108
  className: style.leftArrowButton,
91
109
  ref: leftBtnRef,
@@ -101,11 +119,11 @@ const QuickFilters = ({
101
119
  }
102
120
  },
103
121
  onClick: handleScrollLeft,
122
+ className: style.leftArrowButton,
104
123
  customStyle: {
105
124
  height: '36px'
106
125
  },
107
- "data-testid": "scroll-left-button",
108
- "aria-label": previousFilterAriaLabel
126
+ "data-testid": "scroll-left-button"
109
127
  })), /*#__PURE__*/React.createElement("div", {
110
128
  className: style.filtersList,
111
129
  ref: filtersListRef,
@@ -121,11 +139,15 @@ const QuickFilters = ({
121
139
  faSize: 20,
122
140
  wrapperSize: 20
123
141
  },
124
- iconColor: defaultSelected ? COLORS.cm_grey_700 : COLORS.neutral_500,
125
142
  "aria-label": defaultAriaLabel
126
143
  }), /*#__PURE__*/React.createElement("span", {
127
144
  className: style.filterLabel
128
- }, defaultLabel)), /*#__PURE__*/React.createElement("div", {
145
+ }, defaultLabel), /*#__PURE__*/React.createElement("div", {
146
+ className: style.bar,
147
+ style: {
148
+ background: primarySkinColor
149
+ }
150
+ })), /*#__PURE__*/React.createElement("div", {
129
151
  className: style.filterSeparator
130
152
  }), /*#__PURE__*/React.createElement("div", {
131
153
  className: style.filtersContainer
@@ -142,16 +164,23 @@ const QuickFilters = ({
142
164
  key: idx,
143
165
  className: classNames(style.filterOption, selected && style.filterSelected),
144
166
  "data-testid": `filter-${value}-${idx}`,
167
+ style: {
168
+ borderBottomColor: primarySkinColor
169
+ },
145
170
  onClick: onClick
146
171
  }, /*#__PURE__*/React.createElement(FaIcon, {
147
172
  iconName: iconName,
148
- iconColor: selected ? COLORS.cm_grey_700 : COLORS.neutral_500,
149
173
  size: {
150
174
  faSize: 20,
151
175
  wrapperSize: 20
152
176
  },
153
177
  "aria-label": ariaLabel
154
- }), /*#__PURE__*/React.createElement("span", null, label));
178
+ }), /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("div", {
179
+ className: style.bar,
180
+ style: {
181
+ background: primarySkinColor
182
+ }
183
+ }));
155
184
  }), /*#__PURE__*/React.createElement("div", {
156
185
  className: style.rightArrowButton,
157
186
  ref: rightBtnRef,
@@ -166,14 +195,17 @@ const QuickFilters = ({
166
195
  size: 15
167
196
  }
168
197
  },
198
+ className: style.rightArrowButton,
169
199
  onClick: handleScrollRight,
170
200
  customStyle: {
171
201
  height: '36px'
172
202
  },
173
- "data-testid": "scroll-right-button",
174
- "aria-label": nextFilterAriaLabel
175
- })))), getFilterButton(filterButton));
203
+ "data-testid": "scroll-right-button"
204
+ })))), getFilterButton(filterButton, primarySkinColor));
176
205
  };
177
206
  QuickFilters.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
207
+ QuickFilters.contextTypes = {
208
+ skin: Provider.childContextTypes.skin
209
+ };
178
210
  export default QuickFilters;
179
211
  //# sourceMappingURL=index.js.map
package/es/molecule/quick-filters/index.js.map CHANGED
@@ -1 +1 @@
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":[]}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\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 = (\n filterButtonProps: ButtonLinkProps | undefined,\n primarySkinColor: string\n) => {\n if (!filterButtonProps) return null;\n const {tag, ...rest} = filterButtonProps;\n return (\n <div\n className={style.filterButtonWrapper}\n style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n >\n <div className={style.filterButton}>\n <ButtonLink\n {...rest}\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 tag={\n tag\n ? {\n label: tag.label,\n customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n }\n : undefined\n }\n className={style.filterButton}\n data-testid=\"open-filters-modal-button\"\n customStyle={{borderRadius: '12px'}}\n />\n </div>\n </div>\n );\n};\n\nconst QuickFilters = (\n {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n context: WebContextValues\n) => {\n const skin = GetSkinFromContext(context);\n const primarySkinColor = get('common.primary', skin);\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 const showingRightButton =\n list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n const showingLeftButton = list.scrollLeft > 0;\n rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n rightButton.style.opacity = showingRightButton ? '1' : '0';\n leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n leftButton.style.opacity = showingLeftButton ? '1' : '0';\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} data-name=\"search\">\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 className={style.leftArrowButton}\n customStyle={{height: '36px'}}\n data-testid=\"scroll-left-button\"\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 aria-label={defaultAriaLabel}\n />\n <span className={style.filterLabel}>{defaultLabel}</span>\n <div className={style.bar} style={{background: primarySkinColor}} />\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 style={{borderBottomColor: primarySkinColor}}\n onClick={onClick}\n >\n <FaIcon\n iconName={iconName}\n size={{faSize: 20, wrapperSize: 20}}\n aria-label={ariaLabel}\n />\n <span>{label}</span>\n <div className={style.bar} style={{background: primarySkinColor}} />\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 className={style.rightArrowButton}\n onClick={handleScrollRight}\n customStyle={{height: '36px'}}\n data-testid=\"scroll-right-button\"\n />\n </div>\n </div>\n </div>\n {getFilterButton(filterButton, primarySkinColor)}\n </div>\n );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}
package/es/molecule/quick-filters/style.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @value colors: "../../variables/colors.css";
2
2
  @value breakpoints: "../../variables/breakpoints.css";
3
3
  @value mobile from breakpoints;
4
+ @value cm_grey_75 from colors;
4
5
  @value cm_grey_100 from colors;
5
6
  @value cm_grey_500 from colors;
6
7
  @value cm_grey_700 from colors;
@@ -18,6 +19,27 @@
18
19
  composes: textBase;
19
20
  display: flex;
20
21
  align-items: center;
22
+ max-width: 1080px;
23
+ margin: auto;
24
+ box-sizing: content-box;
25
+ position: sticky;
26
+ padding: 20px 20px 0px 20px;
27
+ margin: 0px 20px;
28
+ left: calc(50% - 560px);
29
+ top: 40px;
30
+ background: #fff;
31
+ z-index: 1;
32
+ }
33
+
34
+ .filtersMainContainer:after {
35
+ content: '';
36
+ position: absolute;
37
+ top: 92px;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 40px;
41
+ background: linear-gradient(to bottom, #fff 0%, transparent 100%);
42
+ pointer-events: none;
21
43
  }
22
44
 
23
45
  .filtersContainer {
@@ -36,6 +58,15 @@
36
58
  margin-right: 40px;
37
59
  }
38
60
 
61
+ .bar {
62
+ height: 3px;
63
+ width: 0;
64
+ bottom: 0;
65
+ position: absolute;
66
+ left: 50%;
67
+ transition: all 0.2s ease-out;
68
+ }
69
+
39
70
  .filterOption, .defaultOption {
40
71
  display: flex;
41
72
  color: cm_grey_500;
@@ -46,11 +77,38 @@
46
77
  height: 72px;
47
78
  cursor: pointer;
48
79
  box-sizing: border-box;
80
+ transition: color 0.3s;
81
+ position: relative;
82
+ }
83
+
84
+ .filterOption:hover, .defaultOption:hover , .filterOption:hover svg, .defaultOption:hover svg {
85
+ color: cm_grey_700;
86
+ }
87
+
88
+ .filterOption:hover .bar, .defaultOption:hover .bar {
89
+ left: -8px;
90
+ right: -8px;
91
+ width: calc(100% + 16px);
92
+ }
93
+
94
+ .filterOption svg, .defaultOption svg {
95
+ color: cm_grey_500;
96
+ transition: color 0.3s;
49
97
  }
50
98
 
51
99
  .filterSelected {
52
100
  color: cm_grey_700;
53
- border-bottom: 2px solid cm_primary_blue;
101
+ position: relative;
102
+ }
103
+
104
+ .filterSelected svg{
105
+ color: cm_grey_700;
106
+ }
107
+
108
+ .filterSelected .bar {
109
+ left: -8px;
110
+ right: -8px;
111
+ width: calc(100% + 16px);
54
112
  }
55
113
 
56
114
  .filterLabel {
@@ -75,8 +133,15 @@
75
133
  .filterButton {
76
134
  margin-left: auto;
77
135
  box-sizing: border-box;
136
+ background-color: cm_grey_75;
137
+ color: cm_grey_500;
138
+ border-radius: 15px;
78
139
  }
79
140
 
141
+ .filterButton:hover {
142
+ background-color: cm_grey_100;
143
+ color: cm_grey_700;
144
+ }
80
145
  .leftArrowButton, .rightArrowButton {
81
146
  display: flex;
82
147
  align-items: center;
@@ -84,27 +149,43 @@
84
149
  width: 36px;
85
150
  height: 36px;
86
151
  cursor: pointer;
87
- background-color: cm_grey_100;
88
- border-radius: 50%;
152
+ background-color: cm_grey_75;
153
+ color: cm_grey_500;
89
154
  position: sticky;
90
155
  z-index: 1;
156
+ transition: all 0.3s;
91
157
  transform: translateY(-10%);
92
158
  }
93
159
 
160
+
161
+ .leftArrowButton:hover, .rightArrowButton:hover {
162
+ background-color: cm_grey_100;
163
+ color: cm_grey_700;
164
+ }
165
+
166
+ .leftArrowButton:hover svg, .rightArrowButton:hover svg {
167
+ color: cm_grey_700;
168
+ }
169
+ .leftArrowButton svg, .rightArrowButton svg {
170
+ color: cm_grey_500;
171
+ transition: all 0.3s;
172
+ }
173
+
94
174
  .rightArrowButton {
95
175
  right: 0;
96
- box-shadow: -20px 0 40px 40px white, 30px 0 40px 40px white;
176
+ box-shadow: 0px 0 40px 30px white;
97
177
  }
98
178
 
99
179
  .leftArrowButton {
100
180
  left: 0;
101
- box-shadow: 20px 0 40px 40px white;
181
+ box-shadow: 0px 0 40px 30px white;
102
182
  }
103
183
 
104
184
  .filterButtonWrapper {
105
185
  padding: 2px;
106
186
  border-radius: 16px;
107
- border: 2px solid cm_primary_blue;
187
+ border-width: 2px;
188
+ border-style: solid;
108
189
  box-sizing: border-box;
109
190
  }
110
191
 
package/es/molecule/quick-filters/types.d.ts CHANGED
@@ -9,8 +9,6 @@ export declare type QuickFiltersProps = {
9
9
  onDefaultClick: () => void;
10
10
  defaultAriaLabel: string;
11
11
  };
12
- nextFilterAriaLabel: string;
13
- previousFilterAriaLabel: string;
14
12
  filterOptionsAriaLabel: string;
15
13
  filterOptions: FilterOption[];
16
14
  filterButton?: ButtonLinkProps;
@@ -36,8 +34,6 @@ export declare const propTypes: {
36
34
  defaultAriaLabel: PropTypes.Requireable<string>;
37
35
  onDefaultClick: PropTypes.Requireable<(...args: any[]) => any>;
38
36
  }>>;
39
- nextFilterAriaLabel: PropTypes.Requireable<string>;
40
- previousFilterAriaLabel: PropTypes.Requireable<string>;
41
37
  filterOptionsAriaLabel: PropTypes.Requireable<string>;
42
38
  filterOptions: PropTypes.Requireable<(PropTypes.InferProps<{
43
39
  iconName: PropTypes.Requireable<string>;
package/es/molecule/quick-filters/types.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
package/es/molecule/quick-filters/types.js CHANGED
@@ -9,8 +9,6 @@ export const propTypes = {
9
9
  defaultAriaLabel: PropTypes.string,
10
10
  onDefaultClick: PropTypes.func
11
11
  }),
12
- nextFilterAriaLabel: PropTypes.string,
13
- previousFilterAriaLabel: PropTypes.string,
14
12
  filterOptionsAriaLabel: PropTypes.string,
15
13
  filterOptions: PropTypes.arrayOf(PropTypes.shape({
16
14
  iconName: PropTypes.string,
package/es/molecule/quick-filters/types.js.map CHANGED
@@ -1 +1 @@
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":[]}
1
+ {"version":3,"file":"types.js","names":["PropTypes","ButtonLink","propTypes","primaryOption","shape","defaultLabel","string","defaultValue","defaultIconName","defaultSelected","bool","defaultAriaLabel","onDefaultClick","func","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 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 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;AA8B/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,sBAAsB,EAAEd,SAAS,CAACM,MAAM;EACxCS,aAAa,EAAEf,SAAS,CAACgB,OAAO,CAC9BhB,SAAS,CAACI,KAAK,CAAC;IACda,QAAQ,EAAEjB,SAAS,CAACM,MAAM;IAC1BY,KAAK,EAAElB,SAAS,CAACM,MAAM;IACvBa,KAAK,EAAEnB,SAAS,CAACM,MAAM;IACvBc,OAAO,EAAEpB,SAAS,CAACa,IAAI;IACvBQ,QAAQ,EAAErB,SAAS,CAACU,IAAI;IACxBY,SAAS,EAAEtB,SAAS,CAACM;EACvB,CAAC,CACH,CAAC;EACDiB,YAAY,EAAEvB,SAAS,CAACI,KAAK,CAACH,UAAU,CAACC,SAAS;AACpD,CAAC","ignoreList":[]}
package/es/template/common/search-page/index.d.ts CHANGED
@@ -78,6 +78,71 @@ declare namespace SearchPage {
78
78
  filterGroupAriaLabel: PropTypes.Requireable<string>;
79
79
  sortAriaLabel: PropTypes.Requireable<string>;
80
80
  }>>;
81
+ const quickFilters: PropTypes.Requireable<PropTypes.InferProps<{
82
+ primaryOption: PropTypes.Requireable<PropTypes.InferProps<{
83
+ defaultLabel: PropTypes.Requireable<string>;
84
+ defaultValue: PropTypes.Requireable<string>;
85
+ defaultIconName: PropTypes.Requireable<string>;
86
+ defaultSelected: PropTypes.Requireable<boolean>;
87
+ defaultAriaLabel: PropTypes.Requireable<string>;
88
+ onDefaultClick: PropTypes.Requireable<(...args: any[]) => any>;
89
+ }>>;
90
+ filterOptionsAriaLabel: PropTypes.Requireable<string>;
91
+ filterOptions: PropTypes.Requireable<(PropTypes.InferProps<{
92
+ iconName: PropTypes.Requireable<string>;
93
+ label: PropTypes.Requireable<string>;
94
+ value: PropTypes.Requireable<string>;
95
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
96
+ selected: PropTypes.Requireable<boolean>;
97
+ ariaLabel: PropTypes.Requireable<string>;
98
+ }> | null | undefined)[]>;
99
+ filterButton: PropTypes.Requireable<PropTypes.InferProps<{
100
+ type: PropTypes.Requireable<string>;
101
+ usage: PropTypes.Requireable<string>;
102
+ label: PropTypes.Requireable<string>;
103
+ content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
104
+ 'aria-label': PropTypes.Requireable<string>;
105
+ tooltipText: PropTypes.Requireable<string>;
106
+ tooltipPlacement: PropTypes.Requireable<string>;
107
+ 'data-name': PropTypes.Requireable<string>;
108
+ 'data-testid': PropTypes.Requireable<string>;
109
+ icon: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
110
+ position: PropTypes.Requireable<string>;
111
+ type: PropTypes.Requireable<string>;
112
+ faIcon: PropTypes.Requireable<PropTypes.InferProps<{
113
+ name: PropTypes.Validator<string>;
114
+ color: PropTypes.Requireable<string>;
115
+ backgroundColor: PropTypes.Requireable<string>;
116
+ size: PropTypes.Requireable<number>;
117
+ customStyle: PropTypes.Requireable<object>;
118
+ }>>;
119
+ }> | (PropTypes.InferProps<{
120
+ position: PropTypes.Requireable<string>;
121
+ type: PropTypes.Requireable<string>;
122
+ faIcon: PropTypes.Requireable<PropTypes.InferProps<{
123
+ name: PropTypes.Validator<string>;
124
+ color: PropTypes.Requireable<string>;
125
+ backgroundColor: PropTypes.Requireable<string>;
126
+ size: PropTypes.Requireable<number>;
127
+ customStyle: PropTypes.Requireable<object>;
128
+ }>>;
129
+ }> | null | undefined)[] | null | undefined>>;
130
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
131
+ link: PropTypes.Requireable<PropTypes.InferProps<{
132
+ href: PropTypes.Requireable<string>;
133
+ download: PropTypes.Requireable<boolean>;
134
+ target: PropTypes.Requireable<string>;
135
+ }>>;
136
+ hoverBackgroundColor: PropTypes.Requireable<string>;
137
+ hoverColor: PropTypes.Requireable<string>;
138
+ disabled: PropTypes.Requireable<boolean>;
139
+ className: PropTypes.Requireable<string>;
140
+ customStyle: PropTypes.Requireable<object>;
141
+ contentCustomStyle: PropTypes.Requireable<object>;
142
+ useTitle: PropTypes.Requireable<boolean>;
143
+ customLabelClassName: PropTypes.Requireable<string>;
144
+ }>>;
145
+ }>>;
81
146
  const cards: PropTypes.Requireable<PropTypes.InferProps<{
82
147
  list: PropTypes.Requireable<((PropTypes.InferPropsInner<Pick<any, any>> & Partial<PropTypes.InferPropsInner<Pick<any, never>>>) | null | undefined)[]>;
83
148
  customStyle: PropTypes.Requireable<{
package/es/template/common/search-page/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAkBA,mEAiJC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAmBA,mEAqJC"}