@soul-refiner/design-system 0.1.18 → 0.1.20

package/src/components/card/person/person.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+
+export interface PersonCardProps {
+  actions?: React.ReactElement | React.ReactElement[];
+  href: string;
+  image: string;
+  subtitle: string;
+  sx?: string;
+  title: string;
+}
+
+export const PersonCard = ({
+  actions,
+  href,
+  image,
+  subtitle,
+  sx,
+  title,
+}: PersonCardProps) => {
+  return (
+    <Wrapper $image={image} as={href ? 'a' : 'div'}>
+      <Person $sx={sx}>
+        <Shadow>
+          <img src={image} alt="" />
+        </Shadow>
+        <Figcaption>
+          <H as="span" $bold $color="white" $fontSize={24} $lineHeight={36}>
+            {title}
+          </H>
+          <P as="span" $color="white" $fontSize={14} $lineHeight={20}>
+            {subtitle}
+          </P>
+          {actions && (
+            <Box $display="flex" $dir="row" $gap={8} sx="margin-top: 16px;">
+              {React.Children.toArray(actions)}
+            </Box>
+          )}
+        </Figcaption>
+      </Person>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{
+  $image: string;
+}>`
+  width: 312px;
+  height: 400px;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+  }
+`;
+
+const Shadow = styled.div`
+  border-radius: 16px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
+    transparent 50% / cover no-repeat;
+`;
+
+const Person = styled.figure<{
+  $sx?: string;
+}>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figcaption = styled.figcaption`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+`;

package/src/components/card/price/index.ts

@@ -0,0 +1,2 @@
+export { PriceCard } from './price';
+export type { PriceCardProps } from './price';

package/src/components/card/price/price.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+import { Checkmark } from 'icons';
+
+export interface PriceCardProps {
+  actions: React.ReactElement;
+  content: string;
+  features: string[];
+  featureTitle: string;
+  price: string;
+  title: string;
+}
+
+export const PriceCard = ({
+  actions,
+  content,
+  featureTitle,
+  features,
+  price,
+  title,
+}: PriceCardProps) => {
+  const id = React.useId();
+  return (
+    <Price>
+      <Box
+        $align="stretch"
+        $display="flex"
+        $dir="column"
+        $gap={24}
+        sx={`
+          padding: 24px 48px; 
+          background-color: var(--color-grey-10); 
+          border-radius: 16px 16px 0px 0px;
+        `}
+      >
+        <H
+          as="h6"
+          $fontSize={24}
+          $lineHeight={36}
+          $semiBold
+          $textAlign="center"
+        >
+          {title}
+        </H>
+        <Box $dir="column">
+          <H
+            as="p"
+            $bold
+            $fontSize={32}
+            $lineHeight={48}
+            $textClampLines={5}
+            $textAlign="center"
+          >
+            {price}
+          </H>
+          <P as="span" $color="grey-4" $textAlign="center">
+            /month
+          </P>
+        </Box>
+        {actions}
+      </Box>
+      <Box
+        sx="padding: 16px 24px; position: relative;"
+        $display="flex"
+        $dir="column"
+      >
+        <P sx="padding: 16px 0px;">{content}</P>
+        <Divider />
+        <Box sx="padding: 16px 0px;" $dir="column" $gap={8}>
+          <P $color="grey-2" $mediumBold>
+            {featureTitle}
+          </P>
+          {features.map((item, index) => (
+            <Box key={id + index.toString(36)} $align="center" $gap={12}>
+              <Checkmark
+                color="green-5"
+                sx="padding: 2px; border-radius: 50%; background-color: var(--color-green-9);"
+              />
+              <P $fontSize={14} $lineHeight={20}>
+                {item}
+              </P>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Price>
+  );
+};
+
+const Price = styled.figure`
+  margin: 0px;
+  padding: 0px;
+  width: 280px;
+  height: fit-content;
+  border-radius: 16px;
+  box-shadow: var(--elevation-2);
+  user-select: none;
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-3);
+  }
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-grey-9);
+`;

package/src/components/card/regular/index.ts

@@ -0,0 +1,2 @@
+export { RegularCard } from './regular';
+export type { RegularCardProps } from './regular';

package/src/components/card/regular/regular.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+
+export interface RegularCardProps extends React.PropsWithChildren {
+  href?: string;
+  image: string;
+  sx?: string;
+}
+
+export const RegularCard = ({
+  children,
+  href,
+  image,
+  sx,
+}: RegularCardProps) => {
+  return (
+    <Wrapper $isLink={!!href} $sx={sx} as={href ? 'a' : 'div'} href={href}>
+      <img src={image} alt="" />
+      <Box $dir="column" $padding={24}>
+        {children}
+      </Box>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{
+  $isLink: boolean;
+  $sx?: string;
+}>`
+  position: relative;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: 16px;
+  background-color: var(--color-white);
+
+  ${({ $isLink }) =>
+    $isLink
+      ? `
+    &:hover {
+      border: 1px solid var(--color-primary-blue-3);
+    }`
+      : ''}
+
+  img {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;

package/src/components/card/video/index.ts

@@ -0,0 +1,2 @@
+export { VideoEpisodeCard } from './video';
+export type { VideoEpisodeCardProps } from './video';

package/src/components/card/video/video.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Rate } from 'components';
+
+export interface VideoEpisodeCardProps {
+  actions: React.ReactElement[];
+  actionDropdown?: React.ReactElement;
+  content: string;
+  cta: React.ReactElement;
+  href: string;
+  image: string;
+  logo?: React.ReactElement;
+  numRating: number;
+  rating: number;
+  subtitle: string;
+  supportLabel?: string;
+  sx?: string;
+  title: string;
+}
+
+export const VideoEpisodeCard = ({
+  actions,
+  actionDropdown,
+  content,
+  cta,
+  href,
+  image,
+  logo,
+  numRating,
+  rating,
+  subtitle,
+  supportLabel,
+  sx,
+  title,
+}: VideoEpisodeCardProps) => {
+  const hasLogo = !!logo;
+
+  return (
+    <Wrapper $sx={sx} href={href}>
+      <Figure>
+        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
+        <img className="thumbnail" src={image} alt="" />
+        <Figcaption>
+          <Box $display="block" className="hidden">
+            {cta}
+          </Box>
+          <Box $align="center" $dir="row" $gap={16}>
+            {logo}
+            <Box $dir="column">
+              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
+                {title}
+              </H>
+              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
+                {subtitle}
+              </P>
+            </Box>
+            {supportLabel && (
+              <P
+                className="not-hover"
+                $color="grey-4"
+                $fontSize={12}
+                $lineHeight={16}
+                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
+              >
+                {supportLabel}
+              </P>
+            )}
+          </Box>
+          <P
+            $color="grey-5"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={4}
+            className="hidden"
+          >
+            {content}
+          </P>
+          <Box className="hidden" $align="center" $dir="row">
+            <Rate isRateable={false} percent={rating} size="small" />
+            <P
+              $color="grey-4"
+              $fontSize={12}
+              $lineHeight={16}
+              sx="margin: 0px auto 0px 4px;"
+            >
+              ({numRating})
+            </P>
+            <Box $align="center" $dir="row" $gap={8}>
+              {React.Children.toArray(actions)}
+            </Box>
+          </Box>
+        </Figcaption>
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.a<{ $sx?: string }>`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  user-select: none;
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    .hidden {
+      display: flex;
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+    }
+
+    figure {
+      aspect-ratio: 410 / 414;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+    }
+
+    figcaption {
+      margin-top: -40px;
+      padding: 24px;
+    }
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figure = styled.figure`
+  max-width: 410px;
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 410 / 239;
+    border-radius: 16px;
+  }
+`;
+
+const Figcaption = styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`;
+
+const DropdownWrapper = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;

package/src/components/card/written/index.ts

@@ -0,0 +1,2 @@
+export { WrittenEpisodeCard } from './written';
+export type { WrittenEpisodeCardProps } from './written';

package/src/components/card/written/written.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Rate } from 'components';
+
+export interface WrittenEpisodeCardProps {
+  actions: React.ReactElement[];
+  actionDropdown?: React.ReactElement;
+  content: string;
+  cta: React.ReactElement;
+  href: string;
+  image: string;
+  logo?: React.ReactElement;
+  numRating: number;
+  rating: number;
+  subtitle: string;
+  supportLabel?: string;
+  sx?: string;
+  title: string;
+}
+
+export const WrittenEpisodeCard = ({
+  actions,
+  actionDropdown,
+  content,
+  cta,
+  href,
+  image,
+  logo,
+  numRating,
+  rating,
+  subtitle,
+  supportLabel,
+  sx,
+  title,
+}: WrittenEpisodeCardProps) => {
+  const hasLogo = !!logo;
+
+  return (
+    <Wrapper $sx={sx} href={href}>
+      <Figure>
+        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
+        <img className="thumbnail" src={image} alt="" />
+        <Figcaption>
+          <Box $display="block" className="hidden">
+            {cta}
+          </Box>
+          <Box $align="center" $dir="row" $gap={16}>
+            {logo}
+            <Box $dir="column">
+              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
+                {title}
+              </H>
+              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
+                {subtitle}
+              </P>
+            </Box>
+            {supportLabel && (
+              <P
+                className="not-hover"
+                $color="grey-4"
+                $fontSize={12}
+                $lineHeight={16}
+                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
+              >
+                {supportLabel}
+              </P>
+            )}
+          </Box>
+          <P
+            $color="grey-5"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={6}
+            className="hidden inline"
+          >
+            {content}
+          </P>
+          <Box className="hidden" $align="center" $dir="row">
+            <Rate isRateable={false} percent={rating} size="small" />
+            <P
+              $color="grey-4"
+              $fontSize={12}
+              $lineHeight={16}
+              sx="margin: 0px auto 0px 4px;"
+            >
+              ({numRating})
+            </P>
+            <Box $align="center" $dir="row" $gap={8}>
+              {React.Children.toArray(actions)}
+            </Box>
+          </Box>
+        </Figcaption>
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.a<{ $sx?: string }>`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  user-select: none;
+
+  figure {
+    max-width: 228px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    .hidden {
+      display: flex;
+
+      &.inline {
+        display: -webkit-box;
+      }
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+      aspect-ratio: 228 / 228;
+    }
+
+    figure {
+      max-width: 280px;
+      aspect-ratio: 280 / 434;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+    }
+
+    figcaption {
+      margin-top: -80px;
+      padding: 24px;
+    }
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figure = styled.figure`
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    border-radius: 16px;
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 228 / 326;
+  }
+`;
+
+const Figcaption = styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`;
+
+const DropdownWrapper = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;

package/src/components/iconography/avatar/avatar.tsx

@@ -186,9 +186,11 @@ const Container = styled.div<{
   $size: number;
   href?: string;
 }>`
+  flex-shrink: 0;
   display: flex;
   flex-flow: row nowrap;
-  cursor: pointer;
+  cursor: ${({ as }) =>
+    as && (as === 'a' || as === 'button') ? 'pointer' : 'initial'};
   padding: 0px;
   border: 0px;
   position: relative;
@@ -196,6 +198,7 @@ const Container = styled.div<{
 
   > img,
   > svg {
+    flex-shrink: 0;
     border-radius: 50%;
     overflow: hidden;
     object-fit: cover;

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './actions';
 export * from './atoms';
+export * from './card';
 export * from './feedback';
 export * from './iconography';
 export * from './input';