@soul-refiner/design-system 1.7.14 → 1.7.15

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 (6) hide show
  1. package/dist/components/card/audio/audio.js +5 -2
  2. package/dist/components/card/video/video.js +5 -2
  3. package/dist/components/card/written/written.js +7 -4
  4. package/dist/components/input/filter/filter.d.ts +6 -2
  5. package/dist/components/input/filter/filter.js +11 -6
  6. package/package.json +1 -1
package/dist/components/card/audio/audio.js CHANGED
@@ -7,10 +7,10 @@ import { Box, H, P, Rate } from '../../';
7
7
  import { CartFilled } from '../../../icons/shopping/cart_filled';
8
8
  export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
9
9
  const hasLogo = !!logo;
10
- return (React.createElement(Wrapper, { "$sx": sx, href: href },
10
+ return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
11
11
  React.createElement(Figure, null,
12
12
  actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
13
- purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
13
+ !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
14
14
  React.createElement(CartFilled, { color: "yellow-5", size: 24 }),
15
15
  React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
16
16
  React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 228 }),
@@ -44,6 +44,9 @@ const Wrapper = styled.a `
44
44
  figure {
45
45
  transition: width 0.3s;
46
46
  width: 213px;
47
+ ${({ $hasPurchaseText }) => $hasPurchaseText
48
+ ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
49
+ : ''}
47
50
 
48
51
  img {
49
52
  box-shadow: var(--elevation-3);
package/dist/components/card/video/video.js CHANGED
@@ -7,10 +7,10 @@ import { Box, H, P, Rate } from '../../';
7
7
  import { CartFilled } from '../../../icons/shopping/cart_filled';
8
8
  export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
9
9
  const hasLogo = !!logo;
10
- return (React.createElement(Wrapper, { "$sx": sx, href: href },
10
+ return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
11
11
  React.createElement(Figure, null,
12
12
  actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
13
- purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
13
+ !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
14
14
  React.createElement(CartFilled, { color: "yellow-5", size: 24 }),
15
15
  React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
16
16
  React.createElement(Image, { alt: "", className: "thumbnail", height: 213, quality: 100, src: image, width: 379 }),
@@ -45,6 +45,9 @@ const Wrapper = styled.a `
45
45
  figure {
46
46
  transition: width 0.3s;
47
47
  width: 379px;
48
+ ${({ $hasPurchaseText }) => $hasPurchaseText
49
+ ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
50
+ : ''}
48
51
 
49
52
  img {
50
53
  box-shadow: var(--elevation-3);
package/dist/components/card/written/written.js CHANGED
@@ -7,10 +7,10 @@ import { Box, H, P, Rate } from '../../';
7
7
  import { CartFilled } from '../../../icons/shopping/cart_filled';
8
8
  export const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
9
9
  const hasLogo = !!logo;
10
- return (React.createElement(Wrapper, { "$sx": sx, href: href },
10
+ return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
11
11
  React.createElement(Figure, null,
12
12
  actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
13
- purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
13
+ !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
14
14
  React.createElement(CartFilled, { color: "yellow-5", size: 24, sx: "flex-shrink: 0;" }),
15
15
  React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
16
16
  React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 176 }),
@@ -43,7 +43,10 @@ const Wrapper = styled.a `
43
43
 
44
44
  figure {
45
45
  transition: width 0.3s;
46
- width: 149px;
46
+ width: 100%;
47
+ ${({ $hasPurchaseText }) => $hasPurchaseText
48
+ ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
49
+ : ''}
47
50
 
48
51
  img {
49
52
  box-shadow: var(--elevation-3);
@@ -111,7 +114,7 @@ const Figure = styled.figure `
111
114
  z-index: -1;
112
115
  width: 100%;
113
116
  height: 225px;
114
- aspect-ratio: 228 / 326;
117
+ aspect-ratio: 149 / 213;
115
118
  }
116
119
  `;
117
120
  const Figcaption = styled.figcaption `
package/dist/components/input/filter/filter.d.ts CHANGED
@@ -9,26 +9,30 @@ export interface FilterProps {
9
9
  defaultValue?: string | string[];
10
10
  disabled?: boolean;
11
11
  graphic?: React.ReactElement;
12
+ graphicAlignment?: 'left' | 'right';
12
13
  label?: string;
13
14
  sx?: string;
14
15
  triggerType: FilterTriggerTypes;
15
16
  options: (Omit<FilterOptionProps, 'selected' | 'onClick'> | 'break')[];
16
17
  closeOnChange?: boolean;
17
18
  optionOnChange?: (event: React.MouseEvent) => void;
19
+ optionShowClose?: boolean;
18
20
  checkbox?: boolean;
19
21
  applyOnClick?: (event: React.MouseEvent) => void;
20
22
  resetOnClick?: (event: React.MouseEvent) => void;
23
+ applyResetActions?: boolean;
21
24
  }
22
25
  declare const Filter: {
23
- ({ closeOnBlur, disabled, graphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, checkbox, applyOnClick, resetOnClick, }: FilterProps): React.JSX.Element;
26
+ ({ closeOnBlur, disabled, graphic, graphicAlignment, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
24
27
  Trigger: {
25
- ({ disabled, graphic, label, onClick, open, type, value, }: FilterTriggerProps): React.JSX.Element;
28
+ ({ disabled, graphic, graphicAlignment, label, onClick, open, type, value, }: FilterTriggerProps): React.JSX.Element;
26
29
  displayName: string;
27
30
  };
28
31
  };
29
32
  export interface FilterTriggerProps {
30
33
  disabled?: boolean;
31
34
  graphic?: React.ReactElement;
35
+ graphicAlignment?: 'left' | 'right';
32
36
  label?: string;
33
37
  onClick?: (event: React.MouseEvent) => void;
34
38
  open: boolean;
package/dist/components/input/filter/filter.js CHANGED
@@ -5,7 +5,7 @@ import { Box, Button, P } from '../../';
5
5
  import { ChevronDown, ChevronUp } from '../../../icons';
6
6
  import { Styles } from '../../../common';
7
7
  import { Spacer, Option } from './filter_option';
8
- const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, checkbox, applyOnClick, resetOnClick, }) => {
8
+ const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
9
9
  const multiple = !!checkbox;
10
10
  const wrapperRef = React.useRef(null);
11
11
  const optionsRef = React.useRef(null);
@@ -92,16 +92,18 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, trigger
92
92
  if (typeof option === 'string' && option === 'break') {
93
93
  return React.createElement(Spacer, { key: `${React.useId()}-spacer-${index}` });
94
94
  }
95
- return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: index === 0 && triggerType === 'pill', onClose: () => setOpen(false), ...option }));
95
+ return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: optionShowClose === undefined
96
+ ? index === 0 && triggerType === 'pill'
97
+ : optionShowClose, onClose: () => setOpen(false), ...option }));
96
98
  }),
97
99
  triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
98
100
  ];
99
101
  return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
100
- React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
102
+ React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
101
103
  open && (React.createElement(Container, { ref: optionsRef },
102
104
  React.createElement(React.Fragment, null,
103
105
  dropdownOptions,
104
- triggerType === 'pill' && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
106
+ triggerType === 'pill' && applyResetActions && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
105
107
  React.createElement(Button, { onClick: (event) => {
106
108
  resetOnClick && resetOnClick(event);
107
109
  setSelected(multiple ? [] : '');
@@ -149,11 +151,12 @@ const wrapperProps = {
149
151
  $dir: 'row',
150
152
  $gap: 16,
151
153
  };
152
- const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }) => {
154
+ const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, open, type, value, }) => {
153
155
  if (type === 'pill') {
154
156
  return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
155
- graphic,
157
+ graphicAlignment === 'left' ? graphic : null,
156
158
  React.createElement(P, { ...textProps }, value),
159
+ graphicAlignment === 'right' ? graphic : null,
157
160
  !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
158
161
  }
159
162
  if (type === 'labeled') {
@@ -177,8 +180,10 @@ const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }
177
180
  open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
178
181
  }
179
182
  return (React.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
183
+ graphicAlignment === 'left' ? graphic : null,
180
184
  graphic,
181
185
  React.createElement(P, { ...textProps }, value),
186
+ graphicAlignment === 'right' ? graphic : null,
182
187
  !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
183
188
  };
184
189
  Filter.Trigger = FilterTrigger;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "1.7.14",
3
+ "version": "1.7.15",
4
4
  "main": "dist/index.js",
5
5
  "license": "MIT",
6
6
  "publishConfig": {