@soul-refiner/design-system 1.7.13 → 1.7.15

package/dist/components/card/audio/audio.d.ts

@@ -8,10 +8,11 @@ export interface AudioEpisodeCardProps {
     image: string;
     logo?: React.ReactElement;
     numRating: number;
+    purchaseText?: string;
     rating: number;
     subtitle: string;
     supportLabel?: string;
     sx?: string;
     title: string;
 }
-export declare const AudioEpisodeCard: ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }: AudioEpisodeCardProps) => React.JSX.Element;
+export declare const AudioEpisodeCard: ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }: AudioEpisodeCardProps) => React.JSX.Element;

package/dist/components/card/audio/audio.js

@@ -2,18 +2,23 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { PurchaseTextWrapper } from '../card';
 import { Box, H, P, Rate } from '../../';
-export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
+import { CartFilled } from '../../../icons/shopping/cart_filled';
+export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
     const hasLogo = !!logo;
-    return (React.createElement(Wrapper, { "$sx": sx, href: href },
+    return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
+                React.createElement(CartFilled, { color: "yellow-5", size: 24 }),
+                React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
             React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 228 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
                     logo,
-                    React.createElement(Box, { "$dir": "column" },
+                    React.createElement(Box, { "$dir": "column", "$gap": 4 },
                         React.createElement(H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
                         React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
                     supportLabel && (React.createElement(P, { className: "not-hover", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;" }, supportLabel))),
@@ -39,6 +44,13 @@ const Wrapper = styled.a `
   figure {
     transition: width 0.3s;
     width: 213px;
+    ${({ $hasPurchaseText }) => $hasPurchaseText
+    ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
+    : ''}
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
   }
 
   .hidden {
@@ -77,6 +89,10 @@ const Wrapper = styled.a `
         rgba(255, 255, 255, 0.85) 55%,
         rgba(255, 255, 255, 0.1) 80%
       );
+
+      img {
+        box-shadow: none;
+      }
     }
 
     figcaption {
@@ -97,6 +113,7 @@ const Figure = styled.figure `
     position: relative;
     z-index: -1;
     width: 100%;
+    height: 225px;
     aspect-ratio: 228 / 228;
   }
 `;

package/dist/components/card/card.d.ts

@@ -13,4 +13,5 @@ export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardPr
     type: CardType;
 };
 export declare const Card: ({ type, ...rest }: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const PurchaseTextWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../atoms/box").BoxProps, never>> & Omit<({ $display, sx, ...args }: import("../atoms/box").BoxProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export {};

package/dist/components/card/card.js

@@ -1,5 +1,7 @@
 'use client';
 import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../atoms/box';
 import { ActionCard } from './action';
 import { AudioEpisodeCard } from './audio';
 import { FeatureCard } from './feature';
@@ -23,3 +25,11 @@ export const Card = ({ type = 'regular', ...rest }) => {
     };
     return lookup[type];
 };
+export const PurchaseTextWrapper = styled(Box) `
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: calc(100% - 32px);
+  gap: 8px;
+  align-items: center;
+`;

package/dist/components/card/video/video.d.ts

@@ -8,10 +8,11 @@ export interface VideoEpisodeCardProps {
     image: string;
     logo?: React.ReactElement;
     numRating: number;
+    purchaseText?: string;
     rating: number;
     subtitle: string;
     supportLabel?: string;
     sx?: string;
     title: string;
 }
-export declare const VideoEpisodeCard: ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }: VideoEpisodeCardProps) => React.JSX.Element;
+export declare const VideoEpisodeCard: ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }: VideoEpisodeCardProps) => React.JSX.Element;

package/dist/components/card/video/video.js

@@ -2,18 +2,23 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { PurchaseTextWrapper } from '../card';
 import { Box, H, P, Rate } from '../../';
-export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
+import { CartFilled } from '../../../icons/shopping/cart_filled';
+export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
     const hasLogo = !!logo;
-    return (React.createElement(Wrapper, { "$sx": sx, href: href },
+    return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
+                React.createElement(CartFilled, { color: "yellow-5", size: 24 }),
+                React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
             React.createElement(Image, { alt: "", className: "thumbnail", height: 213, quality: 100, src: image, width: 379 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
                     logo,
-                    React.createElement(Box, { "$dir": "column" },
+                    React.createElement(Box, { "$dir": "column", "$gap": 4 },
                         React.createElement(H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
                         React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
                     supportLabel && (React.createElement(P, { className: "not-hover", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;" }, supportLabel))),
@@ -40,6 +45,13 @@ const Wrapper = styled.a `
   figure {
     transition: width 0.3s;
     width: 379px;
+    ${({ $hasPurchaseText }) => $hasPurchaseText
+    ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
+    : ''}
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
   }
 
   .hidden {
@@ -72,6 +84,10 @@ const Wrapper = styled.a `
         rgba(255, 255, 255, 0.85) 55%,
         rgba(255, 255, 255, 0.1) 80%
       );
+
+      img {
+        box-shadow: none;
+      }
     }
 
     figcaption {
@@ -94,7 +110,7 @@ const Figure = styled.figure `
     z-index: -1;
     width: 100%;
     aspect-ratio: 379 / 213;
-    height: 228px;
+    height: 225px;
     border-radius: 16px;
   }
 `;

package/dist/components/card/written/written.d.ts

@@ -8,10 +8,11 @@ export interface WrittenEpisodeCardProps {
     image: string;
     logo?: React.ReactElement;
     numRating: number;
+    purchaseText?: string;
     rating: number;
     subtitle: string;
     supportLabel?: string;
     sx?: string;
     title: string;
 }
-export declare const WrittenEpisodeCard: ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }: WrittenEpisodeCardProps) => React.JSX.Element;
+export declare const WrittenEpisodeCard: ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }: WrittenEpisodeCardProps) => React.JSX.Element;

package/dist/components/card/written/written.js

@@ -2,18 +2,23 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { PurchaseTextWrapper } from '../card';
 import { Box, H, P, Rate } from '../../';
-export const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
+import { CartFilled } from '../../../icons/shopping/cart_filled';
+export const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
     const hasLogo = !!logo;
-    return (React.createElement(Wrapper, { "$sx": sx, href: href },
+    return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
+                React.createElement(CartFilled, { color: "yellow-5", size: 24, sx: "flex-shrink: 0;" }),
+                React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
             React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 176 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
                     logo,
-                    React.createElement(Box, { "$dir": "column" },
+                    React.createElement(Box, { "$dir": "column", "$gap": 4 },
                         React.createElement(H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
                         React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
                     supportLabel && (React.createElement(P, { className: "not-hover", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;" }, supportLabel))),
@@ -32,13 +37,20 @@ const Wrapper = styled.a `
   position: relative;
   z-index: 1;
   user-select: none;
-  width: 149px;
+  aspect-ratio: 149 / 275;
   height: 288px;
   transition: transform 0.3s;
 
   figure {
     transition: width 0.3s;
-    width: 149px;
+    width: 100%;
+    ${({ $hasPurchaseText }) => $hasPurchaseText
+    ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
+    : ''}
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
   }
 
   .hidden {
@@ -77,6 +89,10 @@ const Wrapper = styled.a `
         rgba(255, 255, 255, 0.85) 55%,
         rgba(255, 255, 255, 0.1) 80%
       );
+
+      img {
+        box-shadow: none;
+      }
     }
 
     figcaption {
@@ -97,8 +113,8 @@ const Figure = styled.figure `
     position: relative;
     z-index: -1;
     width: 100%;
-    height: 228px;
-    aspect-ratio: 228 / 326;
+    height: 225px;
+    aspect-ratio: 149 / 213;
   }
 `;
 const Figcaption = styled.figcaption `

package/dist/components/input/filter/filter.d.ts

@@ -9,26 +9,30 @@ export interface FilterProps {
     defaultValue?: string | string[];
     disabled?: boolean;
     graphic?: React.ReactElement;
+    graphicAlignment?: 'left' | 'right';
     label?: string;
     sx?: string;
     triggerType: FilterTriggerTypes;
     options: (Omit<FilterOptionProps, 'selected' | 'onClick'> | 'break')[];
     closeOnChange?: boolean;
     optionOnChange?: (event: React.MouseEvent) => void;
+    optionShowClose?: boolean;
     checkbox?: boolean;
     applyOnClick?: (event: React.MouseEvent) => void;
     resetOnClick?: (event: React.MouseEvent) => void;
+    applyResetActions?: boolean;
 }
 declare const Filter: {
-    ({ closeOnBlur, disabled, graphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, checkbox, applyOnClick, resetOnClick, }: FilterProps): React.JSX.Element;
+    ({ closeOnBlur, disabled, graphic, graphicAlignment, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
     Trigger: {
-        ({ disabled, graphic, label, onClick, open, type, value, }: FilterTriggerProps): React.JSX.Element;
+        ({ disabled, graphic, graphicAlignment, label, onClick, open, type, value, }: FilterTriggerProps): React.JSX.Element;
         displayName: string;
     };
 };
 export interface FilterTriggerProps {
     disabled?: boolean;
     graphic?: React.ReactElement;
+    graphicAlignment?: 'left' | 'right';
     label?: string;
     onClick?: (event: React.MouseEvent) => void;
     open: boolean;

package/dist/components/input/filter/filter.js

@@ -5,7 +5,7 @@ import { Box, Button, P } from '../../';
 import { ChevronDown, ChevronUp } from '../../../icons';
 import { Styles } from '../../../common';
 import { Spacer, Option } from './filter_option';
-const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, checkbox, applyOnClick, resetOnClick, }) => {
+const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
     const multiple = !!checkbox;
     const wrapperRef = React.useRef(null);
     const optionsRef = React.useRef(null);
@@ -92,16 +92,18 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, trigger
             if (typeof option === 'string' && option === 'break') {
                 return React.createElement(Spacer, { key: `${React.useId()}-spacer-${index}` });
             }
-            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 }));
+            return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: optionShowClose === undefined
+                    ? index === 0 && triggerType === 'pill'
+                    : optionShowClose, onClose: () => setOpen(false), ...option }));
         }),
         triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
     ];
     return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
         open && (React.createElement(Container, { ref: optionsRef },
             React.createElement(React.Fragment, null,
                 dropdownOptions,
-                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" },
+                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" },
                     React.createElement(Button, { onClick: (event) => {
                             resetOnClick && resetOnClick(event);
                             setSelected(multiple ? [] : '');
@@ -149,11 +151,12 @@ const wrapperProps = {
     $dir: 'row',
     $gap: 16,
 };
-const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }) => {
+const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, open, type, value, }) => {
     if (type === 'pill') {
         return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
-            graphic,
+            graphicAlignment === 'left' ? graphic : null,
             React.createElement(P, { ...textProps }, value),
+            graphicAlignment === 'right' ? graphic : null,
             !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
     }
     if (type === 'labeled') {
@@ -177,8 +180,10 @@ const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }
             open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
     }
     return (React.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
+        graphicAlignment === 'left' ? graphic : null,
         graphic,
         React.createElement(P, { ...textProps }, value),
+        graphicAlignment === 'right' ? graphic : null,
         !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
 };
 Filter.Trigger = FilterTrigger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {