@soul-refiner/design-system 1.7.12 → 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/dist/components/surfaces/post/post.js

@@ -24,22 +24,41 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, a
             else if (event.key === 'ArrowRight') {
                 handleIncrement();
             }
+            else if (event.key === 'Escape' || event.key === 'Enter') {
+                setCurr(-1);
+            }
         };
-        if (typeof document !== 'undefined') {
+        if (typeof document !== 'undefined' && !!images?.length) {
             document.addEventListener('keydown', handleKeyEvent);
         }
         return () => {
-            document.removeEventListener('keydown', handleKeyEvent);
+            images?.length &&
+                document.removeEventListener('keydown', handleKeyEvent);
         };
     }, []);
     const _actions = React.Children.toArray(actions);
     const _comments = React.Children.toArray(children);
     const handleImageLoad = (event) => {
         const { naturalHeight, naturalWidth } = event.target;
-        setModalContentSize({
-            x: `${naturalWidth}px`,
-            y: `${naturalHeight}px`,
-        });
+        let x = `${naturalWidth}px`;
+        let y = `${naturalHeight}px`;
+        // if natural size is smaller than window height and width
+        if (window?.innerHeight < naturalHeight &&
+            window?.innerWidth < naturalWidth) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+            // just smaller than height
+        }
+        else if (window?.innerHeight < naturalHeight) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = '95vh';
+            // just smaller than width
+        }
+        else if (window?.innerWidth < naturalWidth) {
+            x = '95vw';
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+        }
+        setModalContentSize({ x, y });
     };
     const handleIncrement = () => {
         setCurr((prev) => {
@@ -62,7 +81,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, a
         });
     };
     return (React.createElement(Wrapper, { id: id },
-        curr > -1 && !!images?.[curr] && (React.createElement(Modal, { controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
+        curr > -1 && !!images?.[curr] && (React.createElement(Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
             React.createElement(Modal.Content, { sx: `
             position: relative; 
             height: ${modalContentSize.y}; 
@@ -71,7 +90,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, a
             ` },
                 React.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
                     React.createElement(ChevronLeft, { color: "white", size: 48 })),
-                React.createElement(Image, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'contain' } }),
+                React.createElement(Image, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
                 React.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
                     React.createElement(ChevronRight, { color: "white", size: 48 }))))),
         React.createElement(Header, null,

package/package.json

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