feat: add FeedImage component

Author: choihooo

apps/storybook/src/FeedImage.stories.tsx

@@ -0,0 +1,93 @@
+import { FeedImage, themeClass, typography, vars } from '@comma/design-system';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+type FeedImageStoryArgs = {
+  heart: boolean;
+  imageSrc?: string;
+};
+
+const meta = {
+  title: 'Design System/FeedImage',
+  argTypes: {
+    heart: {
+      control: 'boolean'
+    },
+    imageSrc: {
+      control: 'text'
+    }
+  },
+  args: {
+    heart: false
+  }
+} satisfies Meta<FeedImageStoryArgs>;
+
+export default meta;
+
+type Story = StoryObj<FeedImageStoryArgs>;
+
+const storySurfaceStyle: React.CSSProperties = {
+  minHeight: 620,
+  display: 'grid',
+  placeItems: 'center',
+  padding: 32,
+  background: vars.color.backgroundPrimary,
+  fontFamily: vars.font.body
+};
+
+const variantsSurfaceStyle: React.CSSProperties = {
+  minHeight: 620,
+  display: 'grid',
+  alignContent: 'center',
+  gap: 16,
+  padding: 32,
+  background: vars.color.backgroundPrimary,
+  fontFamily: vars.font.body
+};
+
+const variantGridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 393px))',
+  gap: 16
+};
+
+const labelStyle: React.CSSProperties = {
+  margin: 0,
+  color: vars.color.textTertiary,
+  ...typography.captionB
+};
+
+export const HeartOff: Story = {
+  render: ({ heart, imageSrc }) => (
+    <div className={themeClass} style={storySurfaceStyle}>
+      <FeedImage heart={heart} imageSrc={imageSrc} />
+    </div>
+  )
+};
+
+export const HeartOn: Story = {
+  args: {
+    heart: true
+  },
+  render: ({ heart, imageSrc }) => (
+    <div className={themeClass} style={storySurfaceStyle}>
+      <FeedImage heart={heart} imageSrc={imageSrc} />
+    </div>
+  )
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className={themeClass} style={variantsSurfaceStyle}>
+      <div style={variantGridStyle}>
+        <div style={{ display: 'grid', gap: 8 }}>
+          <h3 style={labelStyle}>heart off</h3>
+          <FeedImage />
+        </div>
+        <div style={{ display: 'grid', gap: 8 }}>
+          <h3 style={labelStyle}>heart on</h3>
+          <FeedImage heart />
+        </div>
+      </div>
+    </div>
+  )
+};

packages/design-system/assets/feed/feed-image.svg

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+export const feedImage = style({
+  position: 'relative',
+  width: 393,
+  maxWidth: '100%',
+  aspectRatio: '393 / 499',
+  overflow: 'hidden',
+  background: vars.color.backgroundFill
+});
+
+export const image = style({
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  objectFit: 'cover'
+});
+
+export const heartIcon = style({
+  position: 'absolute',
+  right: 24,
+  bottom: 24,
+  width: 32,
+  height: 32,
+  display: 'grid',
+  placeItems: 'center',
+  color: vars.color.iconPrimary
+});

packages/design-system/src/FeedImage/FeedImage.css.ts

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { designAssets } from '../assets';
+import { Icon } from '../Icon';
+import { feedImage, heartIcon, image } from './FeedImage.css';
+
+export type FeedImageProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+  imageSrc?: string;
+  imageAlt?: string;
+  heart?: boolean;
+};
+
+export function FeedImage({
+  imageSrc = designAssets.feed.image.src,
+  imageAlt = '',
+  heart = false,
+  className,
+  ...divProps
+}: FeedImageProps) {
+  const rootClassName = [feedImage, className].filter(Boolean).join(' ');
+
+  return (
+    <div className={rootClassName} {...divProps}>
+      <img alt={imageAlt} className={image} src={imageSrc} />
+      <span aria-hidden="true" className={heartIcon}>
+        <Icon height={32} name="heart" variant={heart ? 'on' : 'off'} width={32} />
+      </span>
+    </div>
+  );
+}

packages/design-system/src/FeedImage/FeedImage.tsx

@@ -0,0 +1,2 @@
+export type { FeedImageProps } from './FeedImage';
+export { FeedImage } from './FeedImage';

packages/design-system/src/FeedImage/index.ts

@@ -7,6 +7,15 @@ export type DesignAsset = {
 };
 
 export const designAssets = {
+  feed: {
+    image: {
+      src: new URL('../assets/feed/feed-image.svg', import.meta.url).href,
+      width: 393,
+      height: 499,
+      figmaNodeId: '1:13781',
+      description: 'Feed image'
+    }
+  },
   logos: {
     symbolDefault: {
       src: new URL('../assets/logos/symbol-default.png', import.meta.url).href,

packages/design-system/src/assets.ts

@@ -10,6 +10,8 @@ export type { CtaButtonProps, CtaButtonState } from './CtaButton';
 export { CtaButton } from './CtaButton';
 export type { ActionButtonVariants } from './components.css';
 export { actionButton, description, eyebrow, panel, screen, title } from './components.css';
+export type { FeedImageProps } from './FeedImage';
+export { FeedImage } from './FeedImage';
 export type { IconName, IconProps, IconVariant } from './Icon';
 export { Icon } from './Icon';
 export type { ImageUploadProps, ImageUploadState } from './ImageUpload';