feat: add internal Button, LinkButton, Link component with updated st…

…yling (#410) * feat: add internal Button component with updated styling * feat: add LinkButton internal component * feat: add focus ring utility class * feat: apply focus ring to button * feat: make inverse outline hover bg less opaque * feat: create internal Link component that accepts LinkComponent * feat: use internal Link component * feat: replace usages of Button with LinkButton * feat: format and lint * feat: set minimum height on button * feat: update Button stories for all variants and sizes * feat: add attribution to files modified from react-aria-components * fix: prevent button inside a flex from filling height using height=100% instead of align-self because I still want flex parents to be able to choose alignment if they wish to. * fix: add display:block to button style (for LinkButton) * feat: sync LinkButton stories with Button stories * feat: add "use client" directive on Link * feat: import correct custom tv * fix: format
opengovsg · Aug 5, 2024 · 6f8d74c · 6f8d74c
1 parent 26e8dc1
commit 6f8d74c
Show file tree

Hide file tree

Showing 17 changed files with 750 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -105,6 +105,7 @@
     "markdown-to-jsx": "^7.4.7",
     "minisearch": "^6.3.0",
     "react-aria": "^3.34.1",
+    "react-aria-components": "^1.3.1",
     "react-icons": "^5.2.0",
     "tailwind-merge": "^2.4.0",
     "tailwind-variants": "^0.2.1",

diff --git a/packages/components/src/templates/next/components/complex/Button/Button.tsx b/packages/components/src/templates/next/components/complex/Button/Button.tsx
@@ -104,6 +104,9 @@ const LinkButton = (props: Omit<ButtonProps, "type">) => {
   )
 }
 
+/**
+ * @deprecated use LinkButton instead
+ */
 const Button = (props: Omit<ButtonProps, "type">) => {
   if (props.variant === "outline") {
     return <OutlineButton {...props} />

diff --git a/packages/components/src/templates/next/components/complex/Hero/Hero.tsx b/packages/components/src/templates/next/components/complex/Hero/Hero.tsx
@@ -1,6 +1,6 @@
 import type { HeroProps } from "~/interfaces/complex/Hero"
 import { ComponentContent } from "../../internal/customCssClass"
-import Button from "../Button"
+import { LinkButton } from "../../internal/LinkButton/LinkButton"
 
 const Hero = ({
   title,
@@ -27,18 +27,15 @@ const Hero = ({
             {subtitle && <p className="text-paragraph-01">{subtitle}</p>}
             {buttonLabel && buttonUrl && (
               <div className="flex flex-row justify-start gap-4">
-                <Button
-                  colorScheme="white"
-                  label={buttonLabel}
-                  href={buttonUrl}
-                />
+                <LinkButton href={buttonUrl}>{buttonLabel}</LinkButton>
                 {secondaryButtonLabel && secondaryButtonUrl && (
-                  <Button
-                    colorScheme="white"
+                  <LinkButton
+                    colorScheme="inverse"
                     variant="outline"
-                    label={secondaryButtonLabel}
                     href={secondaryButtonUrl}
-                  />
+                  >
+                    {secondaryButtonLabel}
+                  </LinkButton>
                 )}
               </div>
             )}