[SCSE-187] Override Chakra UI Button base styles

apps/web/__tests__/__snapshots__/index.snapshot.tsx.snap

@@ -20,36 +20,26 @@ exports[`renders homepage unchanged 1`] = `
         <div
           class="chakra-stack css-md5zo3"
         >
-          <button
-            class="chakra-button css-ik4ihr"
-            type="button"
+          <a
+            class="chakra-button css-jd3l4b"
+            href="/events"
           >
-            <a
-              class="chakra-link css-13jvj27"
-              href="/events"
+            <p
+              class="chakra-text css-0"
             >
-              <p
-                class="chakra-text css-0"
-              >
-                LEARN MORE
-              </p>
-            </a>
-          </button>
-          <button
-            class="chakra-button css-1bittrd"
-            type="button"
+              LEARN MORE
+            </p>
+          </a>
+          <a
+            class="chakra-button css-jd3l4b"
+            href="/contact"
           >
-            <a
-              class="chakra-link css-13jvj27"
-              href="/contact"
+            <p
+              class="chakra-text css-0"
             >
-              <p
-                class="chakra-text css-0"
-              >
-                CONTACT US
-              </p>
-            </a>
-          </button>
+              CONTACT US
+            </p>
+          </a>
         </div>
       </div>
     </div>
@@ -162,21 +152,16 @@ exports[`renders homepage unchanged 1`] = `
     >
       Let’s work together
     </h2>
-    <button
-      class="chakra-button css-2nck4"
-      type="button"
+    <a
+      class="chakra-button css-qklkzv"
+      href="./contact"
     >
-      <a
-        class="chakra-link css-13jvj27"
-        href="./contact"
+      <p
+        class="chakra-text css-0"
       >
-        <p
-          class="chakra-text css-0"
-        >
-          Contact Us
-        </p>
-      </a>
-    </button>
+        Contact Us
+      </p>
+    </a>
   </div>
   <span
     hidden=""

apps/web/cypress/e2e/app.cy.ts

@@ -7,7 +7,7 @@ describe("Navigation", () => {
     cy.get('[role="heading"]').contains("WELCOME TO SCSE CLUB");
 
     // Find a button with a href attribute containing "contact" and click it
-    cy.get('button a[href*="contact"]').first().click();
+    cy.get('a[class*="chakra-button"][href*="contact"]').first().click();
 
     // The new url should include "/contact"
     cy.url().should("include", "/contact");

apps/web/pages/academics.tsx

@@ -1,4 +1,4 @@
-import { Button, FooterContentText, FooterContentTextProps, Hero } from "ui";
+import { ButtonLink, FooterContentText, FooterContentTextProps, Hero } from "ui";
 import { Box, Heading, Text, VStack, Grid, GridItem } from "@chakra-ui/react";
 import Image from "next/image";
 
@@ -44,17 +44,19 @@ const Academics = () => {
           width={{ base: "100%", md: "auto" }}
         >
           <GridItem>
-            <Button
+            <ButtonLink
               label="PYP QUESTIONS"
               href="https://ts.ntu.edu.sg/sites/lib-repository/exam-question-papers/_layouts/15/start.aspx#/Shared%20Documents/Forms/AllItems.aspx"
               width={{ base: "100%", md: "auto" }}
+              size="lg"
             />
           </GridItem>
           <GridItem>
-            <Button
+            <ButtonLink
               label="PYP SOLUTIONS"
               href="https://bit.ly/3CDVXlf"
-              buttonType="primary.black"
+              variant="primary-black"
+              size="lg"
               width={{ base: "100%", md: "auto" }}
             />
           </GridItem>

apps/web/pages/index.tsx

@@ -17,12 +17,12 @@ const Home = ({ posts }: HomeProps) => {
       {
         label: "LEARN MORE",
         href: "/events",
-        buttonType: "primary.blue",
+        variant: "primary-blue",
       },
       {
         label: "CONTACT US",
         href: "/contact",
-        buttonType: "primary.black",
+        variant: "primary-black",
       },
     ],
   };

packages/ui/components/button/Button.stories.tsx → packages/ui/components/button/ButtonLink.stories.tsx

@@ -1,29 +1,29 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { Button } from "./Button";
+import { ButtonLink } from "./ButtonLink";
 
 export default {
-  title: "Components/Button",
-  component: Button,
+  title: "Components/ButtonLink",
+  component: ButtonLink,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {},
-} as ComponentMeta<typeof Button>;
+} as ComponentMeta<typeof ButtonLink>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof ButtonLink> = (args) => <ButtonLink {...args} />;
 
 export const PrimaryBlue = Template.bind({});
 PrimaryBlue.args = {
   label: "CLICK ME",
   href: "#",
   size: "lg",
-  buttonType: "primary.blue",
+  variant: "primary-blue",
 };
 
 export const PrimaryBlack = Template.bind({});
 PrimaryBlack.args = {
   label: "CLICK ME",
   href: "#",
   size: "lg",
-  buttonType: "primary.black",
+  variant: "primary-black",
 };

packages/ui/components/button/ButtonLink.tsx

@@ -0,0 +1,21 @@
+import { Button, Text } from "@chakra-ui/react";
+import { HTMLChakraProps, ThemingProps } from "@chakra-ui/system";
+import { ButtonOptions } from "@chakra-ui/button";
+
+export interface ButtonLinkProps
+  extends HTMLChakraProps<"button">,
+    ButtonOptions,
+    ThemingProps<"Button"> {
+  label: string;
+  href: string;
+  variant?: "primary-blue" | "primary-black";
+}
+
+export const ButtonLink = (props: ButtonLinkProps) => {
+  const { label, href, variant='primary-blue', ...buttonProps } = props
+  return (
+    <Button as='a' variant={variant} href={href} {...buttonProps}>
+      <Text>{ label }</Text>
+    </Button>
+  )
+}

packages/ui/components/button/index.tsx

@@ -1,2 +1,2 @@
-export { Button } from "./Button";
-export type { ButtonProps } from "./Button";
+export { ButtonLink } from "./ButtonLink";
+export type { ButtonLinkProps } from "./ButtonLink";

packages/ui/components/footer-content-button/FooterContentButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { VStack, Heading } from "@chakra-ui/react";
-import { Button } from "ui";
+import { ButtonLink } from "ui";
 
 export interface FooterContentButtonProps {
   href: string;
@@ -26,7 +26,7 @@ export const FooterContentButton = ({
       >
         {title}
       </Heading>
-      <Button textTransform="uppercase" label={label} href={href} />
+      <ButtonLink textTransform="uppercase" label={label} href={href} />
     </VStack>
   );
 };

packages/ui/components/hero/Hero.tsx

@@ -6,12 +6,12 @@ import {
   FlexProps,
   TextProps,
 } from "@chakra-ui/react";
-import { Button, ButtonProps } from "ui";
+import { ButtonLink, ButtonLinkProps } from "ui";
 
 export interface HeroProps extends FlexProps {
   backgroundImage: string;
   backgroundGradient?: string;
-  buttons?: Array<ButtonProps>;
+  buttons?: Array<ButtonLinkProps>;
   text?: string;
   textProps?: TextProps;
 }
@@ -70,13 +70,13 @@ export const Hero = ({
             justify="center"
           >
             {buttons?.map((button) => {
-              const { label, href, buttonType, ...buttonProps } = button;
+              const { label, href, variant, ...buttonProps } = button;
               return (
-                <Button
+                <ButtonLink
                   key={label}
                   label={label}
                   href={href}
-                  buttonType={buttonType}
+                  variant={variant}
                   size="lg"
                   width={{ base: "100%", md: "auto" }}
                   {...buttonProps}

packages/ui/theme/components/Button.ts

@@ -2,16 +2,41 @@ import { defineStyleConfig } from "@chakra-ui/react";
 
 const Button = defineStyleConfig({
   // Styles for the base style
-  baseStyle: {},
+  baseStyle: {
+    fontWeight: 'bold',
+    rounded: 'none',
+    textColor: 'white',
+    _hover:
+      {
+        bg: 'white',
+        color: 'black',
+        textDecoration: 'none'
+      }
+  },
 
   // Styles for the size variations
-  sizes: {},
+  sizes: {
+    lg: {
+      px: '58px',
+      py: '32px',
+    }
+  },
 
   // Styles for the visual style variations
-  variants: {},
+  variants: {
+    'primary-blue': {
+      bg: 'brand.blue',
+    },
+    'primary-black': {
+      bg: 'black',
+    }
+  },
 
   // The default `size` or `variant` values
-  defaultProps: {},
+  defaultProps: {
+    variant: 'primary-blue',
+    size: 'lg'
+  },
 });
 
 export default Button;