@soul-refiner/design-system 0.1.17 → 0.1.19

package/src/components/card/feature/feature.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, Button, Modal } from 'components';
+import { Camera, Checkmark, Close, Pencil } from 'icons';
+
+export interface FeatureCardProps {
+  content: string;
+  editable?: boolean;
+  href?: string;
+  image: string;
+  onSave?: (title: string, content: string) => void;
+  sx?: string;
+  title: string;
+  uploadModal?: React.ReactElement;
+}
+
+export const FeatureCard = ({
+  content = '',
+  editable,
+  href,
+  image,
+  onSave,
+  sx,
+  title = '',
+  uploadModal,
+}: FeatureCardProps) => {
+  const [editing, setEditing] = React.useState(false);
+  const [editingTitle, setTitle] = React.useState(() => title);
+  const [editingContent, setContent] = React.useState(() => content);
+
+  const handleSetEditing = () => setEditing(true);
+
+  const handleCancelEdit = () => {
+    setTitle(title);
+    setContent(content);
+    setEditing(false);
+  };
+
+  const handleSave = () => {
+    setEditing(false);
+    onSave && onSave(editingTitle, editingContent);
+  };
+
+  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+  };
+
+  const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setContent(event.target.value);
+  };
+
+  const showEditIcon = !editing && editable;
+  const isLink = !!href;
+
+  return (
+    <Wrapper as={isLink ? 'div' : 'a'} href={href}>
+      <Figure $editing={editing} $isLink={isLink} $sx={sx}>
+        <img alt={title} src={image} />
+        {!editing && (
+          <Title>
+            {editingTitle}
+            <figure>
+              <Content>{editingContent}</Content>
+            </figure>
+            {showEditIcon && (
+              <Pencil className="edit" onClick={handleSetEditing} />
+            )}
+            {editable && uploadModal && (
+              <Modal>
+                <Modal.Trigger>
+                  <Button
+                    icon={<Camera />}
+                    type="outlined"
+                    size="small"
+                    sx="position: absolute; right: 8px; top: -72px;"
+                  >
+                    Edit
+                  </Button>
+                </Modal.Trigger>
+                <Modal.Content>{uploadModal}</Modal.Content>
+              </Modal>
+            )}
+          </Title>
+        )}
+        {editing && (
+          <Box
+            $align="flex-end"
+            $display="flex"
+            $dir="column"
+            $gap={8}
+            sx="position: relative;"
+          >
+            <EditTitle onChange={handleTitleChange} value={editingTitle} />
+            <EditContent
+              onChange={handleContentChange}
+              value={editingContent}
+            />
+            <Box $gap={8}>
+              <Checkmark
+                onClick={handleSave}
+                sx={`
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                `}
+              />
+              <Close
+                onClick={handleCancelEdit}
+                sx={`
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                `}
+              />
+            </Box>
+          </Box>
+        )}
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  text-decoration: none;
+`;
+
+const Figure = styled.figure<{
+  $editing: boolean;
+  $isLink: boolean;
+  $sx?: string;
+}>`
+  max-width: 352px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 16px;
+  padding: 16px;
+  margin: 0px;
+  border-radius: 16px;
+  box-shadow: var(--elevation-1);
+  border: 1px solid var(--color-white);
+
+  &:hover {
+    ${({ $isLink }) =>
+      $isLink
+        ? 'border: 1px solid var(--color-primary-blue-3); cursor: pointer;'
+        : 'cursor: arrow;'}
+
+    button {
+      display: flex;
+    }
+
+    .edit {
+      display: block;
+    }
+  }
+
+  img {
+    max-width: 352px;
+    aspect-ratio: 1/1;
+  }
+
+  figure {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 4px;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  button {
+    display: none;
+  }
+
+  .edit {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+  }
+
+  ${({ $editing }) =>
+    $editing
+      ? `
+    background-color: var(--color-grey-9);`
+      : `
+    background-color: var(--color-white);`}
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Title = styled.figcaption`
+  position: relative;
+  padding-right: 32px;
+  color: var(--color-grey-2);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  user-select: none;
+`;
+
+const Content = styled.figcaption`
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;
+
+const EditTitle = styled.input`
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: var(--color-white);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+`;
+
+const EditContent = styled(EditTitle)`
+  padding: 6px 12px;
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;

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

@@ -0,0 +1,2 @@
+export { FeatureCard } from './feature';
+export type { FeatureCardProps } from './feature';

package/src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export type { CardProps } from './card';

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

@@ -0,0 +1,2 @@
+export { PersonCard } from './person';
+export type { PersonCardProps } from './person';

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';