Merge pull request #8601 from TylerAPfledderer/refactor/pill-to-badge

Convert `Pill` component to using Chakra `Badge` Component

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Badge.ts

@@ -0,0 +1,39 @@
+import { ComponentStyleConfig, SystemStyleObject } from "@chakra-ui/react"
+
+const variantSecondary: SystemStyleObject = {
+  borderColor: "primary100",
+  color: "text",
+}
+
+const variantSolid: SystemStyleObject = {
+  color: "black300",
+  background: "primary100",
+}
+
+export const Badge: ComponentStyleConfig = {
+  baseStyle: {
+    borderRadius: "base",
+    border: "1px solid",
+    borderColor: "transparent",
+    fontWeight: "initial",
+    py: 1,
+    px: 2,
+    textTransform: "uppercase",
+  },
+  variants: {
+    solid: variantSolid,
+    secondary: variantSecondary,
+  },
+  sizes: {
+    sm: {
+      py: 0,
+    },
+    lg: {
+      px: 3,
+    },
+  },
+  defaultProps: {
+    // Remove the default from Chakra
+    variant: "solid",
+  },
+}

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -1,3 +1,4 @@
+import { Badge } from "./Badge"
 import { Button } from "./Button"
 import { Link } from "./Link"
 import { Tag } from "./Tag"
@@ -6,6 +7,7 @@ import { Checkbox } from "./Checkbox"
 import { Tabs } from "./Tabs"
 
 export default {
+  Badge,
   Button,
   Link,
   Tag,

src/components/ProductCard.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 import { useQuery, gql } from "@apollo/client"
 import {
+  Badge,
   Box,
   Center,
   Flex,
@@ -36,11 +37,11 @@ const REPO_DATA = gql`
   }
 `
 
-const SubjectPill: React.FC<{ subject: string; children: ReactNode }> = ({
-  subject,
-  children,
-}) => {
-  const bgColor = () => {
+const SubjectBadge: React.FC<{
+  subject: string
+  children: React.ReactNode
+}> = ({ subject, children }) => {
+  const backgroundProp = () => {
     switch (subject) {
       case "Solidity":
         return "tagYellow"
@@ -67,18 +68,9 @@ const SubjectPill: React.FC<{ subject: string; children: ReactNode }> = ({
     }
   }
   return (
-    <Box
-      background={bgColor()}
-      border="1px"
-      borderColor="lightBorder"
-      borderRadius="base"
-      color="black300"
-      fontSize="xs"
-      textAlign="center"
-      px={2}
-    >
+    <Badge size="sm" textTransform="unset" background={backgroundProp()}>
       {children}
-    </Box>
+    </Badge>
   )
 }
 
@@ -192,16 +184,16 @@ const ProductCard: React.FC<IProps> = ({
       <HStack mt={5} mb={2} px={6} spacing={3}>
         {subjects &&
           subjects.map((subject, idx) => (
-            <SubjectPill key={idx} subject={subject}>
+            <SubjectBadge key={idx} subject={subject}>
               {subject}
-            </SubjectPill>
+            </SubjectBadge>
           ))}
         {hasRepoData &&
           data.repository.languages.nodes.map(
             ({ name }: { name: string }, idx: number) => (
-              <SubjectPill key={idx} subject={name}>
+              <SubjectBadge key={idx} subject={name}>
                 {name.toUpperCase()}
-              </SubjectPill>
+              </SubjectBadge>
             )
           )}
       </HStack>

src/components/Staking/StakingProductsCardGrid.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react"
 import { shuffle } from "lodash"
 import {
+  Badge,
   Box,
   BoxProps,
   Center,
@@ -104,35 +105,21 @@ const Status: React.FC<{ status: FlagType }> = ({ status }) => {
   }
 }
 
-const StakingPill: React.FC<{ type: string; children: ReactNode }> = ({
-  type,
-  children,
-}) => {
-  const backgroundColor = () => {
-    if (!type) return "transparent"
-    switch (type.toLowerCase()) {
-      case "ui":
-        return "stakingPillUI"
-      case "platform":
-        return "stakingPillPlatform"
-      default:
-        return "tagGray"
-    }
-  }
+const StakingBadge: React.FC<{
+  type: "ui" | "platform"
+  children: React.ReactNode
+}> = ({ type, children }) => {
+  const uiTypeColor = type === "ui" && "stakingPillUI"
+  const platformTypeColor = type === "platform" && "stakingPillPlatform"
+
   return (
-    <Box
-      background={backgroundColor()}
-      border="1px"
-      borderColor="lightBorder"
-      borderRadius="base"
-      color={type ? "rgba(0,0,0,0.6)" : "text200"}
-      fontSize="xs"
-      px={3}
-      py={1}
-      textAlign="center"
+    <Badge
+      size="lg"
+      background={uiTypeColor || platformTypeColor || undefined}
+      textTransform="initial"
     >
       {children}
-    </Box>
+    </Badge>
   )
 }
 
@@ -281,15 +268,15 @@ const StakingProductCard: React.FC<ICardProps> = ({
       >
         {platforms &&
           platforms.map((platform, idx) => (
-            <StakingPill type="platform" key={idx}>
+            <StakingBadge type="platform" key={idx}>
               {platform}
-            </StakingPill>
+            </StakingBadge>
           ))}
         {ui &&
           ui.map((_ui, idx) => (
-            <StakingPill type="ui" key={idx}>
+            <StakingBadge type="ui" key={idx}>
               {_ui}
-            </StakingPill>
+            </StakingBadge>
           ))}
       </Flex>
       <Box {...PADDED_DIV_STYLE} py={0}>

src/components/TutorialMetadata.tsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { useIntl } from "react-intl"
-import { Box, Flex, HStack, Text } from "@chakra-ui/react"
+import { Badge, Box, Flex, HStack, Text } from "@chakra-ui/react"
 import CopyToClipboard from "./CopyToClipboard"
-import Pill from "./Pill"
 import Link from "./Link"
 import TutorialTags from "./TutorialTags"
 import { getLocaleTimestamp } from "../utils/time"
@@ -45,11 +44,11 @@ const TutorialMetadata: React.FC<IProps> = ({ tutorial }) => {
           <TutorialTags tags={frontmatter.tags} />
         </Flex>
         <Flex
-          as={Pill}
+          as={Badge}
+          variant="secondary"
           alignSelf="flex-start"
           mb={2}
           whiteSpace="nowrap"
-          isSecondary={true}
         >
           <Translation id={getSkillTranslationId(frontmatter.skill)} />
         </Flex>

src/components/TutorialTags.tsx

@@ -1,7 +1,6 @@
+import { Badge } from "@chakra-ui/react"
 import React from "react"
 
-import Pill from "./Pill"
-
 // Represent string as 32-bit integer
 const hashCode = (string) => {
   let hash = 0
@@ -37,9 +36,9 @@ const TutorialTags: React.FC<IProps> = ({ tags }) => {
         const tagColorIdx = hashCode(tag) % colors.length
         const tagColor = colors[tagColorIdx]
         return (
-          <Pill key={idx} me={2} mb={2} background={tagColor}>
+          <Badge key={idx} me={2} mb={2} background={tagColor}>
             {tag}
-          </Pill>
+          </Badge>
         )
       })}
     </>

src/pages-conditional/dapps.tsx

@@ -5,7 +5,6 @@ import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 
 import Translation from "../components/Translation"
-import Pill from "../components/Pill"
 import BoxGrid from "../components/BoxGrid"
 import Card from "../components/Card"
 import Callout from "../components/Callout"
@@ -37,6 +36,7 @@ import FeedbackCard from "../components/FeedbackCard"
 import { translateMessageId } from "../utils/translations"
 import { getImage, getSrc } from "../utils/image"
 import { Context } from "../types"
+import { Badge } from "@chakra-ui/react"
 
 const MagiciansImage = styled(GatsbyImage)`
   background-size: cover;
@@ -1261,7 +1261,9 @@ const DappsPage = ({
               image={choice.image!}
               name={choice.name}
             >
-              <Pill color={choice.pillColor}>{choice.type}</Pill>
+              <Badge size="sm" background={choice.pillColor}>
+                {choice.type}
+              </Badge>
             </ProductCard>
           ))}
         </StyledCardGrid>

src/pages/developers/tutorials.tsx

@@ -10,7 +10,6 @@ import ButtonLink from "../../components/ButtonLink"
 import Link from "../../components/Link"
 import Modal from "../../components/Modal"
 import PageMetadata from "../../components/PageMetadata"
-import Pill from "../../components/Pill"
 import Tag from "../../components/Tag"
 import TutorialTags from "../../components/TutorialTags"
 import Emoji from "../../components/Emoji"
@@ -31,6 +30,7 @@ import {
   filterTutorialsByLang,
   getSortedTutorialTagsForLang,
 } from "../../utils/tutorials"
+import { Badge } from "@chakra-ui/react"
 
 const SubSlogan = styled.p`
   font-size: 1.25rem;
@@ -420,9 +420,9 @@ const TutorialsPage = ({
             >
               <TitleContainer>
                 <Title isExternal={tutorial.isExternal}>{tutorial.title}</Title>
-                <Pill isSecondary={true}>
+                <Badge variant="secondary">
                   <Translation id={getSkillTranslationId(tutorial.skill!)} />
-                </Pill>
+                </Badge>
               </TitleContainer>
               <Author>
                 {/* TODO: Refactor each tutorial tag as a component */}

src/pages/layer-2.tsx

@@ -4,6 +4,7 @@ import { graphql, PageProps } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
+import { Badge } from "@chakra-ui/react"
 
 // Data
 import layer2Data from "../data/layer-2/layer-2.json"
@@ -21,7 +22,6 @@ import Link from "../components/Link"
 import OrderedList from "../components/OrderedList"
 import PageHero from "../components/PageHero"
 import PageMetadata from "../components/PageMetadata"
-import Pill from "../components/Pill"
 import ProductList from "../components/ProductList"
 import QuizWidget from "../components/Quiz/QuizWidget"
 import Tooltip from "../components/Tooltip"
@@ -773,7 +773,9 @@ const Layer2Page = ({ data }: PageProps<Queries.Layer2PageQuery>) => {
                   tokenLists={l2.tokenLists}
                 >
                   {l2.purpose.map((purpose, index) => (
-                    <Pill key={index}>{purpose}</Pill>
+                    <Badge key={index} me={2}>
+                      {purpose}
+                    </Badge>
                   ))}
                 </Layer2ProductCard>
               )

src/templates/docs.tsx

@@ -3,6 +3,7 @@ import { graphql, PageProps } from "gatsby"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import styled from "@emotion/styled"
+import { Badge } from "@chakra-ui/react"
 
 import BannerNotification from "../components/BannerNotification"
 import ButtonLink from "../components/ButtonLink"
@@ -15,7 +16,6 @@ import InfoBanner from "../components/InfoBanner"
 import Link from "../components/Link"
 import MarkdownTable from "../components/MarkdownTable"
 import PageMetadata from "../components/PageMetadata"
-import Pill from "../components/Pill"
 import TableOfContents, {
   Item as ItemTableOfContents,
 } from "../components/TableOfContents"
@@ -150,7 +150,7 @@ const components = {
   Card,
   Divider,
   SectionNav,
-  Pill,
+  Badge,
   CallToContribute,
   Emoji,
   DeveloperDocsLinks,