Add Iconedbuttons and refactored some buttons

LeunensMichiel · Dec 8, 2021 · 05ddb39 · 05ddb39
1 parent f5415b9
commit 05ddb39
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -99,7 +99,6 @@ This is an opinionated starter template in `Next.js v11` which uses all best pra
 
 Todo:
 
-- Navigationbar use button component
 - Update datepicker to latest beta
 
 ## Getting Started

diff --git a/components/common/IconButtons/CloseButton.tsx b/components/common/IconButtons/CloseButton.tsx
@@ -0,0 +1,42 @@
+import { Cross } from '@components/icons';
+import { Button } from '@components/ui';
+import { ButtonProps } from '@components/ui/Button/Button';
+import { MouseEventHandler, VFC } from 'react';
+
+type CloseButtonProps = {
+  className?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+} & Pick<
+  ButtonProps<'button'>,
+  | 'size'
+  | 'loading'
+  | 'circular'
+  | 'disabled'
+  | 'outlined'
+  | 'variant'
+  | 'squared'
+>;
+
+const CloseButton: VFC<CloseButtonProps> = ({
+  onClick,
+  size = 'sm',
+  variant = 'minimal',
+  squared = true,
+  ...props
+}) => {
+  return (
+    <Button
+      aria-label="Close"
+      data-dismiss="modal"
+      iconLeft={<Cross />}
+      onClick={onClick}
+      type="button"
+      variant={variant}
+      size={size}
+      squared={squared}
+      {...props}
+    />
+  );
+};
+
+export default CloseButton;
diff --git a/components/common/IconButtons/MenuButton.tsx b/components/common/IconButtons/MenuButton.tsx
@@ -0,0 +1,40 @@
+import { Hamburger } from '@components/icons';
+import { Button } from '@components/ui';
+import { ButtonProps } from '@components/ui/Button/Button';
+import { MouseEventHandler, VFC } from 'react';
+
+type MenuButtonProps = {
+  className?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+} & Pick<
+  ButtonProps<'button'>,
+  | 'size'
+  | 'loading'
+  | 'circular'
+  | 'disabled'
+  | 'outlined'
+  | 'variant'
+  | 'squared'
+>;
+
+const MenuButton: VFC<MenuButtonProps> = ({
+  onClick,
+  size = 'sm',
+  variant = 'minimal',
+  squared = true,
+  ...props
+}) => (
+  <Button
+    aria-haspopup="true"
+    aria-label="Navigation menu button"
+    iconLeft={<Hamburger />}
+    onClick={onClick}
+    type="button"
+    variant={variant}
+    size={size}
+    squared={squared}
+    {...props}
+  />
+);
+
+export default MenuButton;
diff --git a/components/common/IconButtons/ThemeButton.tsx b/components/common/IconButtons/ThemeButton.tsx
@@ -0,0 +1,46 @@
+import { Moon, Sun } from '@components/icons';
+import { Button } from '@components/ui';
+import { ButtonProps } from '@components/ui/Button/Button';
+import { useTheme } from 'next-themes';
+import { MouseEventHandler, VFC } from 'react';
+
+type ThemeButtonProps = {
+  className?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+} & Pick<
+  ButtonProps<'button'>,
+  | 'size'
+  | 'loading'
+  | 'circular'
+  | 'disabled'
+  | 'outlined'
+  | 'variant'
+  | 'squared'
+>;
+
+const ThemeButton: VFC<ThemeButtonProps> = ({
+  onClick,
+  size = 'sm',
+  variant = 'minimal',
+  squared = true,
+  ...props
+}) => {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <Button
+      aria-label="Toggle between themes"
+      iconLeft={theme === 'light' ? <Moon /> : <Sun />}
+      onClick={
+        onClick ? onClick : () => setTheme(theme === 'light' ? 'dark' : 'light')
+      }
+      type="button"
+      variant={variant}
+      size={size}
+      squared={squared}
+      {...props}
+    />
+  );
+};
+
+export default ThemeButton;
diff --git a/components/common/IconButtons/index.ts b/components/common/IconButtons/index.ts
@@ -0,0 +1,3 @@
+export { default as CloseButton } from './CloseButton';
+export { default as MenuButton } from './MenuButton';
+export { default as ThemeButton } from './ThemeButton';
diff --git a/components/common/Navbar/NavItem.module.scss b/components/common/Navbar/NavItem.module.scss
@@ -4,7 +4,8 @@
   border-radius: var(--border-radius);
   border: none;
   color: var(--color-text-primary);
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   font-size: 1.125rem;
   font-weight: 700;
   line-height: 1;

diff --git a/components/common/Navbar/Navbar.module.scss b/components/common/Navbar/Navbar.module.scss
@@ -55,18 +55,7 @@
   align-items: center;
 
   button {
-    padding: 0.25rem 0.5rem !important;
     margin-left: 0.5rem !important;
-    border-radius: var--(border-radius);
-    color: var(--color-btn-minimal-fill);
-    &.menuButtonTransparent {
-      background: var(--color-btn-transparent-bg) !important;
-    }
-    &.toolbarGeneralIcon {
-      &:hover {
-        color: var(--color-btn-primary-border);
-      }
-    }
   }
 
   @include theme.breakpoint-up(lg) {

diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
@@ -1,5 +1,4 @@
-import { MenuToggle } from '@components/icons';
-import { Logo, ThemeToggle } from '@components/ui';
+import { Logo } from '@components/ui';
 import {
   BodyScrollOptions,
   clearAllBodyScrollLocks,
@@ -11,6 +10,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FC, useEffect, useRef, useState } from 'react';
 
+import { MenuButton, ThemeButton } from '../IconButtons';
 import styles from './Navbar.module.scss';
 import NavItems from './NavItems';
 
@@ -67,16 +67,10 @@ const Navbar: FC<NavbarProps> = ({ children, isTransparent = false }) => {
               <Logo className={styles.logo} />
             </Link>
             <div className={cn(styles.toolbarIcons)}>
-              <ThemeToggle
-                className={cn('buttonReset', styles.toolbarGeneralIcon, {
-                  [styles.menuButtonTransparent]: isTransparent,
-                })}
-              />
-              <MenuToggle
-                className={cn('buttonReset', styles.hamburger, {
-                  [styles.menuButtonTransparent]: isTransparent,
-                })}
-                handleToggle={() =>
+              <ThemeButton />
+              <MenuButton
+                className={cn(styles.hamburger)}
+                onClick={() =>
                   setNavDrawerOpen((prevNavDrawerOpen) => !prevNavDrawerOpen)
                 }
               />

diff --git a/components/common/index.ts b/components/common/index.ts
@@ -3,6 +3,7 @@ export { default as Footer } from './Footer';
 export { default as Form } from './Form';
 export { Fieldset } from './Form';
 export { default as Head } from './Head';
+export * from './IconButtons';
 export { default as LanguagePicker } from './LanguagePicker';
 export { default as Layout } from './Layout';
 export { default as Navbar } from './Navbar';

diff --git a/components/icons/MenuToggle.tsx → components/icons/Hamburger.tsx b/components/icons/MenuToggle.tsx → components/icons/Hamburger.tsx
@@ -1,17 +1,5 @@
-type MenuToggleProps = {
-  className?: string;
-  handleToggle(): void;
-};
-
-const MenuToggle = ({ className = '', handleToggle }: MenuToggleProps) => (
-  <button
-    aria-haspopup="true"
-    aria-expanded="false"
-    type="button"
-    aria-label="Navigation menu button"
-    className={className}
-    onClick={handleToggle}
-  >
+const Hamburger = ({ ...props }) => {
+  return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -22,12 +10,13 @@ const MenuToggle = ({ className = '', handleToggle }: MenuToggleProps) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
+      {...props}
     >
       <line x1="3" y1="12" x2="21" y2="12" />
       <line x1="3" y1="6" x2="21" y2="6" />
       <line x1="3" y1="18" x2="21" y2="18" />
     </svg>
-  </button>
-);
+  );
+};
 
-export default MenuToggle;
+export default Hamburger;
diff --git a/components/icons/index.ts b/components/icons/index.ts
@@ -5,8 +5,8 @@ export { default as CheckCircle } from './CheckCircle';
 export { default as Chevron } from './Chevron';
 export { default as Cross } from './Cross';
 export { default as Globe } from './Globe';
+export { default as Hamburger } from './Hamburger';
 export { default as Help } from './Help';
 export { default as Info } from './Info';
-export { default as MenuToggle } from './MenuToggle';
 export { default as Moon } from './Moon';
 export { default as Sun } from './Sun';
diff --git a/components/ui/Banner/Banner.tsx b/components/ui/Banner/Banner.tsx
@@ -1,4 +1,4 @@
-import { Cross } from '@components/icons';
+import { CloseButton } from '@components/common';
 import { Button } from '@components/ui';
 import cn from 'classnames';
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
@@ -58,15 +58,8 @@ const Banner: FC<BannerProps> = ({
       >
         <div className={cn(styles.bannerContainer, 'container', 'mx-auto')}>
           {onClickDismissiveAction && (
-            <Button
+            <CloseButton
               onClick={onClickDismissiveAction}
-              iconLeft={<Cross />}
-              minimal
-              contrasted
-              size="sm"
-              type="button"
-              data-dismiss="modal"
-              aria-label="Close"
               className={cn(styles.closeButton)}
             />
           )}

diff --git a/components/ui/Button/Button.module.scss b/components/ui/Button/Button.module.scss
@@ -77,34 +77,6 @@
       }
     }
   }
-  &.minimal {
-    background: none;
-    border: none;
-    color: var(--color-btn-minimal-fill);
-
-    &:hover {
-      color: var(--color-btn-minimal-hover-fill);
-    }
-    &:focus {
-      color: var(--color-btn-minimal-focus-fill);
-    }
-    &:active {
-      color: var(--color-btn-minimal-active-fill);
-    }
-    &.contrasted {
-      color: var(--color-btn-minimal-contrasted-fill);
-
-      &:hover {
-        color: var(--color-btn-minimal-contrasted-hover-fill);
-      }
-      &:focus {
-        color: var(--color-btn-minimal-contrasted-focus-fill);
-      }
-      &:active {
-        color: var(--color-btn-minimal-contrasted-active-fill);
-      }
-    }
-  }
   &.disabled {
     border: 0.125rem solid var(--color-btn-disabled-border);
     background: var(--color-btn-disabled-bg);
@@ -136,7 +108,8 @@
 }
 
 // Different variants
-$variants: primary, secondary, success, danger, warning, info, 'transparent';
+$variants: primary, secondary, success, danger, warning, info, 'transparent',
+  minimal;
 @each $variant in $variants {
   .button-#{$variant} {
     border: 0.125rem solid var(--color-btn-#{$variant}-border);
@@ -237,7 +210,8 @@ $variants: primary, secondary, success, danger, warning, info, 'transparent';
   padding: 0.25rem 0.75rem;
   min-height: 1.5rem;
   font-size: var(--button-xs);
-  &.button-circular {
+  &.button-circular,
+  &.button-squared {
     padding: 0.5rem;
   }
   svg {
@@ -250,7 +224,8 @@ $variants: primary, secondary, success, danger, warning, info, 'transparent';
   min-height: 2.5rem;
   font-size: var(--button-sm);
 
-  &.button-circular {
+  &.button-circular,
+  &.button-squared {
     padding: 0.75rem;
   }
   svg {
@@ -263,7 +238,8 @@ $variants: primary, secondary, success, danger, warning, info, 'transparent';
   min-height: 3rem;
   font-size: var(--button-md);
 
-  &.button-circular {
+  &.button-circular,
+  &.button-squared {
     padding: 1rem;
   }
   svg {
@@ -276,7 +252,8 @@ $variants: primary, secondary, success, danger, warning, info, 'transparent';
   min-height: 3.5rem;
   font-size: var(--button-lg);
 
-  &.button-circular {
+  &.button-circular,
+  &.button-squared {
     padding: 1.25rem;
   }
   svg {
@@ -289,7 +266,8 @@ $variants: primary, secondary, success, danger, warning, info, 'transparent';
   min-height: 4rem;
   font-size: var(--button-xl);
 
-  &.button-circular {
+  &.button-circular,
+  &.button-squared {
     padding: 1.5rem;
   }
   svg {
-Original file line number
+Diff line change
@@ Expand Up @@
     Todo:
-    - Navigationbar use button component
     - Update datepicker to latest beta
     ## Getting Started
@@ Expand Down @@