🚧 THE 6TH EDITION: Phase 1

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
     'no-console': 'warn',
     'prefer-const': 'off',
     '@next/next/no-img-element': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
   },
   settings: {
     react: {

.storybook/libs/ThemeDecorator.tsx

@@ -3,34 +3,60 @@ import { css } from '@emotion/core';
 import { EmotionThemeProvider } from 'client/store/emotion/provider';
 import { ThemeContextProvider } from 'client/store/theme/context';
 import { useThemeContext } from 'client/store/theme/hook/useThemeContext';
-import { ThemeMode } from 'client/types/themeMode';
+import { Typography } from 'client/components/atoms/Typography';
 
-type ThemeConsumerProps = {
-  theme?: ThemeMode;
-};
-
-const ThemeConsumer: React.FC<ThemeConsumerProps> = props => {
-  const { theme = 'light' } = props;
+const ThemeConsumer: React.FC = () => {
+  const { themeMode, setTheme } = useThemeContext();
 
-  const { setTheme } = useThemeContext();
-  React.useEffect(() => {
-    setTheme(theme);
-  }, [setTheme, theme]);
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value;
+    if (value === 'light' || value === 'dark') {
+      setTheme(value);
+    }
+  };
 
-  return null;
+  return (
+    <div>
+      <label
+        css={css`
+          display: inline-flex;
+          align-items: center;
+        `}
+      >
+        <Typography
+          variant="body2"
+          element="span"
+          css={css`
+            margin-right: 0.5rem;
+          `}
+        >
+          Color Theme:
+        </Typography>
+        <select value={themeMode} onChange={handleChange}>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </label>
+    </div>
+  );
 };
 
-export const ThemeDecorator = (options?: Partial<ThemeConsumerProps>) => {
+export const ThemeDecorator = () => {
   return (Story: any) => {
     return (
       <ThemeContextProvider>
         <EmotionThemeProvider>
+          <ThemeConsumer />
+          <hr
+            css={css`
+              margin-top: 1.5rem;
+            `}
+          />
           <div
             css={css`
-              padding: 24px;
+              margin-top: 1.5rem;
             `}
           >
-            <ThemeConsumer theme={options?.theme} />
             <Story />
           </div>
         </EmotionThemeProvider>

package.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@fontsource/playfair-display": "^4.5.0",
+    "@headlessui/react": "^1.4.0",
     "flexsearch": "^0.6.32",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4.1.17",

src/client/components/atoms/Card/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import type { Meta, Story } from '@storybook/react';
 import { Card, CardProps } from '.';
 import { ThemeDecorator } from 'storybook/ThemeDecorator';
 import { Typography } from 'client/components/atoms/Typography';

src/client/components/atoms/Hashtag/index.tsx

@@ -26,7 +26,7 @@ export const Hashtag: React.FC<HashtagProps> = props => {
       element="span"
       textColor={textColor}
       css={css`
-        border-radius: ${commonStyles.borderRadius.xl};
+        border-radius: ${commonStyles.borderRadius.xxs};
         border: 1px solid
           var(${getColorVarName(textColor.on, textColor.variant)});
         padding: ${commonStyles.spacing.xxs} ${commonStyles.spacing[spacing]};

src/client/components/atoms/Typography/index.tsx

@@ -26,6 +26,7 @@ const variantMapping: Record<TypographyKey, React.ElementType> = {
   h5: 'h5',
   h6: 'h6',
   h7: 'h6',
+  h8: 'h6',
   body1: 'p',
   body2: 'p',
   body3: 'p',
@@ -45,6 +46,7 @@ const defaultFontFamilyMapping: Record<TypographyKey, FontFamily> = {
   h5: 'serif',
   h6: 'serif',
   h7: 'serif',
+  h8: 'serif',
   body1: 'sans',
   body2: 'sans',
   body3: 'sans',

src/client/components/atoms/icons/RadioCheckIcon.tsx

@@ -36,7 +36,7 @@ export const RadioCheckIcon: React.FC<RadioCheckIconProps> = props => {
       `}
       {...svgProps}
     >
-      <title>{title}</title>
+      {title && <title>{title}</title>}
       <path d="M0 0h24v24H0V0z" fill="none" />
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
       <circle

src/client/components/pages/search/SearchResultCategory/index.tsx

@@ -1,107 +1,113 @@
 import { css } from '@emotion/core';
 import * as React from 'react';
-import {
-  Typography,
-  TypographyProps,
-} from 'client/components/atoms/Typography';
+import { TypographyProps } from 'client/components/atoms/Typography';
 import { commonStyles } from 'client/styles/tokens';
 import { useTranslations } from 'client/i18n/hooks/useTranslations';
-import {
-  HorizontalCard,
-  HorizontalCardProps,
-} from 'client/components/molecules/cards/HorizontalCard';
+import { HorizontalCardProps } from 'client/components/molecules/cards/HorizontalCard';
+import { MemberCell } from 'client/components/v6/shared/cells/MemberCell';
+import { AlbumCell } from 'client/components/v6/shared/cells/AlbumCell';
+import { SongCell } from 'client/components/v6/shared/cells/SongCell';
+import { capitalizeText } from 'utils/string';
+import { TextDivider } from 'client/components/molecules/TextDivider';
 
-const DEFAULT_RESULT_COUNT = 4;
+type SearchResult = {
+  href: string;
+  image: HorizontalCardProps['image'];
+  heading: HorizontalCardProps['title'];
+  captions: HorizontalCardProps['tags'];
+};
+
+type ResultType = 'members' | 'cds' | 'songs';
+
+const SearchResultCell: React.FC<
+  SearchResult & {
+    type: ResultType;
+  }
+> = props => {
+  if (props.type === 'members') {
+    return (
+      <div
+        css={css`
+          width: 120px;
+          height: 170px;
+        `}
+      >
+        <MemberCell
+          href={props.href}
+          name={capitalizeText(props.heading.text)}
+          nameLang={props.heading.lang ?? 'ja'}
+          caption={props.captions[0].text}
+          image={props.image}
+        />
+      </div>
+    );
+  }
+  if (props.type === 'cds') {
+    return (
+      <div
+        css={css`
+          width: 195px;
+          height: 160px;
+        `}
+      >
+        <AlbumCell
+          href={props.href}
+          title={props.heading.text}
+          caption={props.captions[0].text}
+          image={props.image}
+        />
+      </div>
+    );
+  }
+  return (
+    <div
+      css={css`
+        width: 180px;
+        height: 190px;
+      `}
+    >
+      <SongCell
+        href={props.href}
+        title={props.heading.text}
+        titleLang={props.heading.lang ?? 'ja'}
+        caption={props.captions[0].text}
+        image={props.image}
+      />
+    </div>
+  );
+};
 
 export type SearchResultCategoryProps = {
-  title: 'members' | 'cds' | 'songs';
+  title: ResultType;
   titleElement?: TypographyProps['element'];
-  results: {
-    href: string;
-    image: HorizontalCardProps['image'];
-    heading: HorizontalCardProps['title'];
-    captions: HorizontalCardProps['tags'];
-  }[];
+  results: SearchResult[];
 };
 
 export const SearchResultCategory: React.FC<SearchResultCategoryProps> =
   props => {
     const { title, results, titleElement = 'h3', ...restProps } = props;
-    const { Translation } = useTranslations();
-    const [showMore, toggleShowMore] = React.useState(false);
+    const { getTranslation } = useTranslations();
 
     return results.length > 0 ? (
       <section {...restProps}>
-        <Typography
-          variant="h6"
-          element={titleElement}
-          css={css`
-            text-transform: capitalize;
-          `}
-        >
-          <Translation text={title} />
-        </Typography>
+        <TextDivider text={getTranslation(title)} element={titleElement} />
         <ul
           css={css`
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            grid-template-rows: auto;
-            grid-gap: ${commonStyles.spacing.m};
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
             margin-top: 1rem;
+
+            & > li {
+              margin: ${commonStyles.spacing.xs};
+            }
           `}
         >
-          {results.slice(0, DEFAULT_RESULT_COUNT).map(result => (
+          {results.map(result => (
             <li key={result.heading.text}>
-              <HorizontalCard
-                href={result.href}
-                image={result.image}
-                title={result.heading}
-                titleElement="h3"
-                tags={result.captions}
-                capitalizeTitle={title === 'members'}
-              />
+              <SearchResultCell type={title} {...result} />
             </li>
           ))}
-          {showMore
-            ? results
-                .slice(DEFAULT_RESULT_COUNT, results.length)
-                .map(result => (
-                  <li key={result.heading.text}>
-                    <HorizontalCard
-                      href={result.href}
-                      image={result.image}
-                      title={result.heading}
-                      titleElement="h3"
-                      tags={result.captions}
-                      capitalizeTitle={title === 'members'}
-                    />
-                  </li>
-                ))
-            : null}
-          {results.length > DEFAULT_RESULT_COUNT && !showMore ? (
-            <Typography
-              variant="body2"
-              element="button"
-              textColor={{
-                on: 'onBackground',
-                variant: 'variant1',
-              }}
-              onClick={() => toggleShowMore(true)}
-              css={css`
-                text-transform: uppercase;
-                align-self: center;
-                justify-self: start;
-
-                @media (hover: hover) and (pointer: fine) {
-                  &:hover {
-                    text-decoration: underline;
-                  }
-                }
-              `}
-            >
-              <Translation text={'show all'} />
-            </Typography>
-          ) : null}
         </ul>
       </section>
     ) : null;