@soul-refiner/design-system 1.7.13 → 1.7.14

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 },
         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,10 @@ const Wrapper = styled.a `
   figure {
     transition: width 0.3s;
     width: 213px;
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
   }
 
   .hidden {
@@ -77,6 +86,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 +110,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 },
         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,10 @@ const Wrapper = styled.a `
   figure {
     transition: width 0.3s;
     width: 379px;
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
   }
 
   .hidden {
@@ -72,6 +81,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 +107,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 },
         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,17 @@ 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;
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
   }
 
   .hidden {
@@ -77,6 +86,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,7 +110,7 @@ const Figure = styled.figure `
     position: relative;
     z-index: -1;
     width: 100%;
-    height: 228px;
+    height: 225px;
     aspect-ratio: 228 / 326;
   }
 `;

package/package.json

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