feat: new Button component

Adds a new Button component to the design system. Removes old Button component and replaces with the new component and where relevant uses the NextJS Link instead.
public-convenience-ltd · Aug 16, 2023 · eac519d · eac519d · vercel · Aug 16, 2023
1 parent 1348eab
commit eac519d
Show file tree

Hide file tree

Showing 28 changed files with 288 additions and 307 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -6,6 +6,7 @@ import { MockedProvider } from '@apollo/client/testing';
 
 // Import design system component styles for our Stories.
 import '../src/design-system/components/Badge/Badge.css';
+import '../src/design-system/components/Button/Button.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

diff --git a/cypress/e2e/desktop/index.cy.ts b/cypress/e2e/desktop/index.cy.ts
@@ -566,6 +566,7 @@ describe('Home page tests', () => {
 
       cy.findByText('Directions')
         .scrollIntoView()
+        .parent()
         .invoke('attr', 'href')
         .should('include', 'https://maps.apple.com/?dirflg=w&daddr=');
     });

diff --git a/src/components/Button/Button.md b/src/components/Button/Button.md
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
diff --git a/src/components/Drawer/Drawer.md b/src/components/Drawer/Drawer.md
@@ -1,11 +1,18 @@
 ```jsx
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import Spacer from '../Spacer';
 
 const [isVisible, setIsVisible] = React.useState(false);
 
 <>
-  <Button onClick={() => setIsVisible(true)}>Open drawer</Button>
+  <Button
+    htmlElement="button"
+    type="button"
+    variant="primary"
+    onClick={() => setIsVisible(true)}
+  >
+    Open drawer
+  </Button>
   <Drawer visible={isVisible} animateFrom="right">
     <p>Drawer content here!</p>
 

diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import React, { useRef, useState } from 'react';
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import Box from '../Box';
 import Badge from '../../design-system/components/Badge';
 
@@ -60,7 +60,14 @@ const Feedback = () => {
 
 We'd be so grateful if you could take a moment to give us feedback on how we could make your experience even better.`}
       />
-      <Button onClick={submitFeedback}>Submit</Button>
+      <Button
+        htmlElement="button"
+        variant="primary"
+        type="submit"
+        onClick={submitFeedback}
+      >
+        Submit
+      </Button>
     </Stack>
   );
 };

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { faBars, faComments } from '@fortawesome/free-solid-svg-icons';
+import Link from 'next/link';
 
 import Box from '../Box';
 import VisuallyHidden from '../VisuallyHidden';
@@ -10,7 +11,6 @@ import Logo from '../Logo';
 import MainMenu from './MainMenu';
 import { useMapState } from '../MapState';
 import { useRouter } from 'next/router';
-import Button from '../Button';
 
 import dynamic from 'next/dynamic';
 import { useFeedbackPopover } from './hooks';
@@ -43,14 +43,14 @@ const Header = ({ children }) => {
         minHeight={'60px'}
       >
         <Box flexShrink={0}>
-          <Button
+          <Link
             role="link"
             onClick={navigateAway}
-            variant="link"
+            href="/"
             aria-label="Navigate to the home page"
           >
             <Logo />
-          </Button>
+          </Link>
         </Box>
 
         <Box as="nav" width="100%" aria-labelledby="menu-main">
@@ -59,16 +59,12 @@ const Header = ({ children }) => {
           </h2>
 
           <Media at="sm" css={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button
-              aria-describedby={feedbackPopoverId}
-              onClick={handleClick}
-              variant={'link'}
-            >
+            <button aria-describedby={feedbackPopoverId} onClick={handleClick}>
               <Icon icon={faComments} size="2x" />
               <VisuallyHidden>
                 <Text>Feedback</Text>
               </VisuallyHidden>
-            </Button>
+            </button>
 
             <Box ml={4}>
               <button

diff --git a/src/components/Header/MainMenu.tsx b/src/components/Header/MainMenu.tsx
@@ -6,7 +6,7 @@ import Text from '../Text';
 import { Media } from '../Media';
 import { useUser } from '@auth0/nextjs-auth0';
 import { useMapState } from '../MapState';
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import { useFeedbackPopover } from './hooks';
 
 const StyledNavLink = styled(Link)<
@@ -55,6 +55,7 @@ const MainMenu = ({ children }: IMainMenu) => {
           flexDirection={['column', 'row']}
           height={['100%', 'auto']}
           width="100%"
+          alignItems="center"
         >
           <Box as="li" ml={[0, 4]}>
             <StyledNavLink href="/">Find a Toilet</StyledNavLink>
@@ -76,7 +77,9 @@ const MainMenu = ({ children }: IMainMenu) => {
               <Button
                 aria-describedby={feedbackPopoverId}
                 onClick={handleClick}
-                variant={'link'}
+                htmlElement="button"
+                variant="secondary"
+                type="button"
               >
                 Feedback
               </Button>
@@ -86,7 +89,9 @@ const MainMenu = ({ children }: IMainMenu) => {
               <Button
                 aria-describedby={feedbackPopoverId}
                 onClick={handleClick}
-                variant={'link'}
+                htmlElement="button"
+                variant="secondary"
+                type="button"
               >
                 Feedback
               </Button>

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -17,7 +17,7 @@ import Text from '../Text';
 import Icon from '../Icon';
 import LocationSearch from '../LocationSearch';
 import Filters from '../Filters';
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import { useMapState } from '../MapState';
 import config from '../../config';
 import { usePlausible } from 'next-plausible';
@@ -117,9 +117,9 @@ const Sidebar = () => {
         <Box display="flex" flexWrap="wrap" justifyContent="center">
           <Box display="flex" mt={3} mr={1}>
             <Button
-              ref={filterToggleRef}
+              htmlElement="button"
               variant="secondary"
-              icon={<FontAwesomeIcon icon={faFilter} />}
+              ref={filterToggleRef}
               aria-expanded={isFiltersExpanded}
               onClick={() => {
                 const stateText = isFiltersExpanded ? 'Close' : 'Open';
@@ -129,11 +129,13 @@ const Sidebar = () => {
               aria-label="Filters Panel"
               data-cy="mobile-filter"
             >
-              Filter
+              <FontAwesomeIcon icon={faFilter} />
+              <span>Filter</span>
             </Button>
           </Box>
           <Box display="flex" mt={3}>
             <Button
+              htmlElement="button"
               type="button"
               variant="primary"
               onClick={() => mapState?.locationServices?.startLocate()}
@@ -175,6 +177,9 @@ const Sidebar = () => {
 
           <Box display="flex" justifyContent="center" mt={4}>
             <Button
+              htmlElement="button"
+              variant="secondary"
+              type="button"
               onClick={() => {
                 setIsFiltersExpanded(false);