feat: add song cell and refine other cells

shawnrivers · Aug 28, 2021 · a52f721 · a52f721
1 parent 214e218
commit a52f721
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 29 deletions.
diff --git a/src/client/components/v6/shared/cells/AlbumCell/index.stories.tsx b/src/client/components/v6/shared/cells/AlbumCell/index.stories.tsx
@@ -26,8 +26,7 @@ export const Default = Template.bind({});
 Default.args = {
   href: '/',
   title: 'ごめんねFingers Crossed',
-  number: '27',
-  type: 'single',
+  caption: '27th. single',
   image: {
     sm: '/images/artworks/singles/27/[email protected]',
     md: '/images/artworks/singles/27/[email protected]',
@@ -41,8 +40,7 @@ export const LongTitle = Template.bind({});
 LongTitle.args = {
   href: '/',
   title: '夜明けまで強がらなくてもいい',
-  number: '24',
-  type: 'single',
+  caption: '24th. single',
   image: {
     sm: '/images/artworks/singles/24/[email protected]',
     md: '/images/artworks/singles/24/[email protected]',
@@ -56,8 +54,7 @@ export const FallbackBackground = Template.bind({});
 FallbackBackground.args = {
   href: '/',
   title: 'ごめんねFingers Crossed',
-  number: '27',
-  type: 'single',
+  caption: '27th. single',
   image: {
     sm: '/images/artworks/singles/27/[email protected]',
     md: '/images/artworks/singles/27/[email protected]',

diff --git a/src/client/components/v6/shared/cells/AlbumCell/index.tsx b/src/client/components/v6/shared/cells/AlbumCell/index.tsx
@@ -7,8 +7,6 @@ import {
   getGlobalColorVarName,
 } from 'client/styles/tokens/colors';
 import { ImageUrl } from 'server/types/commons';
-import { DiscographyType } from 'server/actors/Discography/types';
-import { useIntl } from 'client/i18n/hooks/useIntl';
 import {
   CoverImage,
   parentAnimationStyles,
@@ -17,17 +15,13 @@ import {
 export type AlbumCellProps = {
   href: string;
   title: string;
-  number: string;
-  type: DiscographyType;
+  caption?: string;
   image: ImageUrl;
   imageBackgroundColor?: string;
   titleBackgroundColor?: string;
 };
 
 export const AlbumCell: React.FC<AlbumCellProps> = props => {
-  const { formatAlbumType } = useIntl();
-  const caption = formatAlbumType(props.type, props.number);
-
   return (
     <Link href="/" passHref>
       <a
@@ -62,7 +56,7 @@ export const AlbumCell: React.FC<AlbumCellProps> = props => {
           >
             <CoverImage
               image={props.image}
-              caption={caption}
+              caption={props.caption}
               imageBackgroundColor={props.imageBackgroundColor}
               css={css`
                 flex: 1;

diff --git a/src/client/components/v6/shared/cells/MemberCell/index.stories.tsx b/src/client/components/v6/shared/cells/MemberCell/index.stories.tsx
@@ -28,7 +28,7 @@ Default.args = {
   name: 'Saito Asuka',
   nameLang: 'en',
   number: 1,
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/[email protected]',
     md: '/images/members/singles/27/[email protected]',
@@ -44,7 +44,7 @@ Japanese.args = {
   name: '齋藤飛鳥',
   nameLang: 'ja',
   number: 1,
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/[email protected]',
     md: '/images/members/singles/27/[email protected]',
@@ -73,7 +73,7 @@ export const NoNumber = Template.bind({});
 NoNumber.args = {
   href: '/',
   name: 'Saito Asuka',
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/[email protected]',
     md: '/images/members/singles/27/[email protected]',
@@ -83,8 +83,8 @@ NoNumber.args = {
   nameBackgroundColor: '#e2f3fd',
 };
 
-export const NoPosition = Template.bind({});
-NoPosition.args = {
+export const NoCaption = Template.bind({});
+NoCaption.args = {
   href: '/',
   name: 'Saito Asuka',
   nameLang: 'en',
@@ -103,7 +103,7 @@ NotLink.args = {
   name: 'Kojima Haruna',
   nameLang: 'en',
   number: 1,
-  position: 'center',
+  caption: 'center',
   image: {
     sm: '/images/members/others/[email protected]',
     md: '/images/members/others/[email protected]',
@@ -116,7 +116,7 @@ FallbackBackground.args = {
   href: '/',
   name: 'Saito Asuka',
   number: 1,
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/[email protected]',
     md: '/images/members/singles/27/[email protected]',

diff --git a/src/client/components/v6/shared/cells/MemberCell/index.tsx b/src/client/components/v6/shared/cells/MemberCell/index.tsx
@@ -7,7 +7,6 @@ import {
   getGlobalColorVarName,
 } from 'client/styles/tokens/colors';
 import { ImageUrl } from 'server/types/commons';
-import { useTranslations } from 'client/i18n/hooks/useTranslations';
 import {
   CoverImage,
   parentAnimationStyles,
@@ -43,15 +42,13 @@ export type MemberCellProps = {
   name: string;
   nameLang: string;
   number?: string | number;
-  position?: 'center' | 'fukujin';
+  caption?: string;
   image: ImageUrl;
   imageBackgroundColor?: string;
   nameBackgroundColor?: string;
 };
 
 export const MemberCell: React.FC<MemberCellProps> = props => {
-  const { getTranslation } = useTranslations();
-
   return (
     <LinkWrapper href={props.href}>
       <div
@@ -93,7 +90,7 @@ export const MemberCell: React.FC<MemberCellProps> = props => {
                 `}
               >
                 <Typography
-                  variant="h6"
+                  variant="em1"
                   element="span"
                   css={css`
                     color: var(${getColorVarName('onBackground', 'standard')});
@@ -124,9 +121,7 @@ export const MemberCell: React.FC<MemberCellProps> = props => {
           </div>
           <CoverImage
             image={props.image}
-            caption={
-              props.position ? getTranslation(props.position) : undefined
-            }
+            caption={props.caption}
             imageBackgroundColor={props.imageBackgroundColor}
             css={css`
               flex: 1;

diff --git a/src/client/components/v6/shared/cells/SongCell/index.stories.tsx b/src/client/components/v6/shared/cells/SongCell/index.stories.tsx
@@ -0,0 +1,99 @@
+import { css } from '@emotion/react';
+import type { Meta, Story } from '@storybook/react';
+import { SongCell, SongCellProps } from '.';
+import { ThemeDecorator } from 'storybook/ThemeDecorator';
+
+export default {
+  title: 'Components/Shared/Cells/SongCell',
+  decorators: [ThemeDecorator()],
+  component: SongCell,
+} as Meta<SongCellProps>;
+
+const Template: Story<SongCellProps> = props => {
+  return (
+    <div
+      css={css`
+        width: 200px;
+        height: 240px;
+      `}
+    >
+      <SongCell {...props}></SongCell>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  number: 1,
+  caption: '#title',
+  image: {
+    sm: '/images/artworks/singles/27/[email protected]',
+    md: '/images/artworks/singles/27/[email protected]',
+    lg: '/images/artworks/singles/27/[email protected]',
+  },
+  titleBackgroundColor: '#f8b1b1',
+  imageBackgroundColor: '#bf0000',
+};
+
+export const Variation = Template.bind({});
+Variation.args = {
+  href: '/',
+  title: 'ざぶんざぶん',
+  titleLang: 'ja',
+  number: 4,
+  caption: '#unit',
+  image: {
+    sm: '/images/artworks/singles/27/[email protected]',
+    md: '/images/artworks/singles/27/[email protected]',
+    lg: '/images/artworks/singles/27/[email protected]',
+  },
+  imageBackgroundColor: '#ffa700',
+  titleBackgroundColor: '#fcda9c',
+};
+
+export const NoNumber = Template.bind({});
+NoNumber.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  caption: '#title',
+  image: {
+    sm: '/images/artworks/singles/27/[email protected]',
+    md: '/images/artworks/singles/27/[email protected]',
+    lg: '/images/artworks/singles/27/[email protected]',
+  },
+  titleBackgroundColor: '#f8b1b1',
+  imageBackgroundColor: '#bf0000',
+};
+
+export const NoCaption = Template.bind({});
+NoCaption.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  number: 1,
+  image: {
+    sm: '/images/artworks/singles/27/[email protected]',
+    md: '/images/artworks/singles/27/[email protected]',
+    lg: '/images/artworks/singles/27/[email protected]',
+  },
+  titleBackgroundColor: '#f8b1b1',
+  imageBackgroundColor: '#bf0000',
+};
+
+export const FallbackBackground = Template.bind({});
+FallbackBackground.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  number: 1,
+  caption: '#title',
+  image: {
+    sm: '/images/artworks/singles/27/[email protected]',
+    md: '/images/artworks/singles/27/[email protected]',
+    lg: '/images/artworks/singles/27/[email protected]',
+  },
+};