@soul-refiner/design-system 0.1.17 → 0.1.19

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