fix(tab): refactor <SquareTab>

thematters · Aug 22, 2024 · d774cbc · d774cbc
1 parent 0ed4fed
commit d774cbc
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -59,14 +59,10 @@ type ButtonColor =
   | 'greenDark'
   | 'green'
   | 'gold'
-  | 'goldPress'
   | 'red'
   | 'redDark'
   | 'likecoinGreen'
   | 'yellowLighter'
-  | 'warnYellow'
-  | 'topUpYellow'
-  | 'topUpYellowDarker'
   | 'goldLinearGradient'
 
 type ButtonTextColor = Extract<
@@ -76,7 +72,6 @@ type ButtonTextColor = Extract<
   | 'black'
   | 'green'
   | 'gold'
-  | 'goldPress'
   | 'red'
   | 'grey'
   | 'greyDarker'
@@ -100,8 +95,6 @@ export type ButtonBgColor = Extract<
   | 'halfBlack'
   | 'black'
   | 'yellowLighter'
-  | 'warnYellow'
-  | 'topUpYellow'
   | 'goldLinearGradient'
 >
 
@@ -114,7 +107,6 @@ type ButtonBgActiveColor = Extract<
   | 'green'
   | 'gold'
   | 'red'
-  | 'topUpYellowDarker'
 >
 
 type ButtonBorderActiveColor = Extract<

diff --git a/src/components/Button/styles.module.css b/src/components/Button/styles.module.css
@@ -32,10 +32,6 @@ span.container {
   color: var(--color-matters-gold);
 }
 
-.textGoldPress {
-  color: var(--color-matters-gold-press);
-}
-
 .textRed {
   color: var(--color-negative-red);
 }
@@ -384,18 +380,6 @@ span.container {
   }
 }
 
-.bgTopUpYellow {
-  & .hotarea {
-    background: var(--color-top-up-yellow);
-  }
-}
-
-.bgWarnYellow {
-  & .hotarea {
-    background: var(--color-warn-yellow);
-  }
-}
-
 .bgGoldLinearGradient {
   & .hotarea {
     background: linear-gradient(93.62deg, #cda555 2.8%, #b48527 93%);
@@ -468,15 +452,6 @@ span.container {
   }
 }
 
-.bgActiveTopUpYellowDarker {
-  &:hover,
-  &:focus {
-    & .hotarea {
-      background: var(--color-top-up-yellow-darker);
-    }
-  }
-}
-
 /* Border */
 .borderWhite {
   & .hotarea {

diff --git a/src/components/SquareTabs/index.tsx b/src/components/SquareTabs/index.tsx
@@ -1,41 +1,28 @@
 import classNames from 'classnames'
 
-import { Button, ButtonProps } from '~/components'
-
 import styles from './styles.module.css'
 
 type TabProps = {
+  title: string
   selected?: boolean
-} & ButtonProps
+  onClick: () => void
+  theme?: 'black' | 'gold'
+}
 
-const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({
-  selected,
-  children,
-  ...buttonProps
-}) => {
-  const itemClasses = classNames({
+const Tab = ({ title, selected, onClick, theme }: TabProps) => {
+  const liClasses = classNames({
     [styles.tabItem]: true,
     [styles.selected]: selected,
+    [styles.gold]: theme === 'gold',
   })
-
   return (
     <li
-      className={itemClasses}
-      role="tab"
-      aria-disabled={buttonProps.disabled}
-      aria-selected={selected}
+      className={liClasses}
+      role="button"
+      onClick={onClick}
+      data-title={title}
     >
-      <Button
-        size={[null, '1.875rem']}
-        spacing={[0, 10]}
-        borderRadius="0.5rem"
-        textColor={selected ? 'white' : 'greyDarker'}
-        bgColor={selected ? 'black' : 'greyLighter'}
-        bgActiveColor={selected ? undefined : 'greyLight'}
-        {...buttonProps}
-      >
-        <span>{children}</span>
-      </Button>
+      {title}
     </li>
   )
 }
@@ -46,7 +33,7 @@ interface SquareTabsProps {
 
 export const SquareTabs: React.FC<React.PropsWithChildren<SquareTabsProps>> & {
   Tab: typeof Tab
-} = ({ sticky, children }) => {
+} = ({ children, sticky }) => {
   const navClasses = classNames({
     [styles.tabList]: true,
     [styles.sticky]: sticky,

diff --git a/src/components/SquareTabs/styles.module.css b/src/components/SquareTabs/styles.module.css
@@ -3,7 +3,6 @@
 
   display: flex;
   gap: var(--sp16);
-  margin-bottom: var(--sp8);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 
@@ -16,11 +15,52 @@
 }
 
 .tabItem {
+  @mixin transition;
+
   flex-shrink: 0;
+  padding: var(--sp5) var(--sp10);
   font-size: var(--text14);
   line-height: 1.375rem;
+  color: var(--color-grey-darker);
+  cursor: pointer;
+  background: var(--color-grey-lighter);
+  border-radius: 0.5rem;
+  transition-property: background-color, color;
+
+  /* FIX: change the font-weight of a font, the text will typically cause a bit of a layout shift
+    ref: https://stackoverflow.com/a/32570813
+    */
+  &::after {
+    display: block;
+    height: 0;
+    overflow: hidden;
+    font-weight: var(--font-semibold);
+    color: transparent;
+    visibility: hidden;
+    content: attr(data-title);
+  }
+
+  &:hover {
+    background: var(--color-grey-light);
+  }
 
   &.selected {
     font-weight: var(--font-semibold);
+    color: var(--color-white);
+    background: var(--color-black);
+  }
+
+  &.gold {
+    color: var(--color-matters-gold-press);
+    background: var(--color-top-up-yellow);
+
+    &:hover {
+      background: var(--color-top-up-yellow-darker);
+    }
+
+    &.selected {
+      color: var(--color-white);
+      background: var(--color-warn-yellow);
+    }
   }
 }
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -37,6 +37,7 @@ export * from './Slides'
 export * from './Spacer'
 export * from './Spinner'
 export * from './SquareTabs'
+export * from './SquareTabs'
 export * from './Switch'
 export * from './TableView'
 export * from './Tabs'

diff --git a/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx b/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx
@@ -1,4 +1,4 @@
-import { FormattedMessage } from 'react-intl'
+import { useIntl } from 'react-intl'
 
 import { SquareTabs, useRoute } from '~/components'
 import { ArticleDetailPublicQuery } from '~/gql/graphql'
@@ -14,6 +14,7 @@ type TabsProps = {
 export const Tabs = ({ article, tab, setTab }: TabsProps) => {
   const { getQuery } = useRoute()
   const cid = getQuery('collection')
+  const intl = useIntl()
   const latestWorks = article.author?.latestWorks.filter((work) => {
     return work.id !== article.id
   })
@@ -26,37 +27,34 @@ export const Tabs = ({ article, tab, setTab }: TabsProps) => {
         <SquareTabs.Tab
           selected={tab === 'Collection'}
           onClick={() => setTab('Collection')}
-        >
-          <FormattedMessage
-            defaultMessage="Collection"
-            id="Hpmiif"
-            description="src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx"
-          />
-        </SquareTabs.Tab>
+          title={intl.formatMessage({
+            defaultMessage: 'Collection',
+            id: 'Hpmiif',
+            description: 'src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx',
+          })}
+        />
       )}
       {hasFromAuthor && (
         <SquareTabs.Tab
           selected={tab === 'Author'}
           onClick={() => setTab('Author')}
-        >
-          <FormattedMessage
-            defaultMessage="Author"
-            id="RM17b4"
-            description="src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx"
-          />
-        </SquareTabs.Tab>
+          title={intl.formatMessage({
+            defaultMessage: 'Author',
+            id: 'RM17b4',
+            description: 'src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx',
+          })}
+        />
       )}
       {hasRecommendation && (
         <SquareTabs.Tab
           selected={tab === 'Recommendation'}
           onClick={() => setTab('Recommendation')}
-        >
-          <FormattedMessage
-            defaultMessage="More"
-            id="VqdOGQ"
-            description="src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx"
-          />
-        </SquareTabs.Tab>
+          title={intl.formatMessage({
+            defaultMessage: 'More',
+            id: 'VqdOGQ',
+            description: 'src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx',
+          })}
+        />
       )}
     </SquareTabs>
   )

diff --git a/src/views/CampaignDetail/ArticleFeeds/Tabs/index.tsx b/src/views/CampaignDetail/ArticleFeeds/Tabs/index.tsx
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 import { useContext } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { useIntl } from 'react-intl'
 
 import { analytics } from '~/common/utils'
 import { LanguageContext, SquareTabs } from '~/components'
@@ -28,6 +28,7 @@ const ArticleFeedsTabs = ({
   campaign,
 }: ArticleFeedsTabsProps) => {
   const { lang } = useContext(LanguageContext)
+  const intl = useIntl()
   const stages = campaign.stages || []
 
   const shouldShowTab = (startedAt?: string) => {
@@ -52,9 +53,11 @@ const ArticleFeedsTabs = ({
               pageType: 'campaign_detail',
             })
           }}
-        >
-          <FormattedMessage defaultMessage="All" id="zQvVDJ" />
-        </SquareTabs.Tab>
+          title={intl.formatMessage({
+            defaultMessage: 'All',
+            id: 'zQvVDJ',
+          })}
+        />
 
         {[...stages].reverse().map((stage) =>
           shouldShowTab(stage.period?.start) ? (
@@ -68,9 +71,7 @@ const ArticleFeedsTabs = ({
                   pageType: 'campaign_detail',
                 })
               }}
-              key={stage.id}
-            >
-              {
+              title={
                 stage[
                   lang === 'zh_hans'
                     ? 'nameZhHans'
@@ -79,7 +80,8 @@ const ArticleFeedsTabs = ({
                     : 'nameEn'
                 ]
               }
-            </SquareTabs.Tab>
+              key={stage.id}
+            />
           ) : null
         )}
 
@@ -94,20 +96,12 @@ const ArticleFeedsTabs = ({
                 pageType: 'campaign_detail',
               })
             }}
-            textColor={
-              feedType === FEED_TYPE_ANNOUNCEMENT ? 'white' : 'goldPress'
-            }
-            bgColor={
-              feedType === FEED_TYPE_ANNOUNCEMENT ? 'warnYellow' : 'topUpYellow'
-            }
-            bgActiveColor={
-              feedType === FEED_TYPE_ANNOUNCEMENT
-                ? undefined
-                : 'topUpYellowDarker'
-            }
-          >
-            <FormattedMessage defaultMessage="Announcement" id="Sj+TN8" />
-          </SquareTabs.Tab>
+            theme="gold"
+            title={intl.formatMessage({
+              defaultMessage: 'Announcement',
+              id: 'Sj+TN8',
+            })}
+          />
         )}
       </SquareTabs>
     </section>