refactor(buttons): add a tertiary kind (previously links styles)

3 files changed, 19 insertions, 51 deletions

diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
index 4d26ea4..86e0e5b 100644
--- a/src/components/Buttons/Button/Button.tsx
+++ b/src/components/Buttons/Button/Button.tsx
@@ -1,26 +1,21 @@
-import { ButtonPosition } from '@ts/types/app';
+import { ButtonKind, ButtonPosition } from '@ts/types/app';
 import { ReactNode } from 'react';
 import styles from '../Buttons.module.scss';
 
 const Button = ({
   children,
   clickHandler,
+  kind = 'secondary',
   position = 'left',
   isDisabled = false,
-  isPrimary = false,
 }: {
   children: ReactNode;
   clickHandler: any;
+  kind?: ButtonKind;
   position?: ButtonPosition;
   isDisabled?: boolean;
-  isPrimary?: boolean;
 }) => {
-  const primaryPosition = `primary--${position}`;
-  const secondaryPosition = `secondary--${position}`;
-  const typeStyles = isPrimary
-    ? `${styles.primary} ${styles[primaryPosition]}`
-    : `${styles.secondary} ${styles[secondaryPosition]}`;
-  const classes = `${styles.btn} ${typeStyles}`;
+  const classes = `${styles.btn} ${styles[position]} ${styles[kind]}`;
 
   return (
     <button
diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx
index 4c94b34..179c686 100644
--- a/src/components/Buttons/ButtonLink/ButtonLink.tsx
+++ b/src/components/Buttons/ButtonLink/ButtonLink.tsx
@@ -14,8 +14,7 @@ const ButtonLink = ({
   position?: ButtonPosition;
   isExternal?: boolean;
 }) => {
-  const positionModifier = `link--${position}`;
-  const classes = `${styles.btn} ${styles.link} ${styles[positionModifier]}`;
+  const classes = `${styles.btn} ${styles[position]} ${styles.tertiary}`;
 
   return isExternal ? (
     <a className={classes} href={target}>
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 5fe423e..bc1597c 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -7,6 +7,19 @@
   font-size: var(--font-size-md);
 }
 
+.left {
+  margin-right: auto;
+}
+
+.right {
+  margin-left: auto;
+}
+
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .primary {
   margin: auto;
   padding: var(--spacing-2xs) var(--spacing-md);
@@ -22,19 +35,6 @@
   text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
   transition: all 0.25s ease-in-out 0s;
 
-  &--left {
-    margin-right: auto;
-  }
-
-  &--right {
-    margin-left: auto;
-  }
-
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   &:hover,
   &:focus {
     background: var(--color-primary-light);
@@ -68,19 +68,6 @@
   font-weight: 600;
   transition: all 0.35s ease-out 0s;
 
-  &--left {
-    margin-right: auto;
-  }
-
-  &--right {
-    margin-left: auto;
-  }
-
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   &:disabled {
     color: var(--color-fg-light);
     border-color: var(--color-border);
@@ -117,7 +104,7 @@
   }
 }
 
-.link {
+.tertiary {
   display: flex;
   flex-flow: row wrap;
   place-items: center;
@@ -139,19 +126,6 @@
   text-decoration: underline transparent 0;
   transition: all 0.3s ease-in-out 0s, text-decoration 0.35s ease-in-out 0s;
 
-  &--left {
-    margin-right: auto;
-  }
-
-  &--right {
-    margin-left: auto;
-  }
-
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   &:hover,
   &:focus {
     border-color: var(--color-primary-light);