From 76574111280051b744877451fb0ca95c93461e78 Mon Sep 17 00:00:00 2001
From: Brett Dorrans <hello@lapidist.net>
Date: Wed, 25 May 2022 19:18:18 +0100
Subject: [PATCH] feat: small button size and tag improvements

BREAKING CHANGE
---
 src/components/button/Button.spec.tsx         |  22 +++-
 src/components/button/README.md               |  73 +++++++++++--
 .../button/__snapshots__/Button.spec.tsx.snap | 101 +++++++++++++++++-
 src/components/button/index.tsx               |   8 +-
 src/components/button/styles.ts               |  22 +++-
 src/components/tag/README.md                  |   4 +-
 .../tag/__snapshots__/Tag.spec.tsx.snap       |  64 +++++------
 src/components/tag/index.tsx                  |   9 +-
 src/components/tag/styles.ts                  |  12 +--
 9 files changed, 238 insertions(+), 77 deletions(-)

diff --git a/src/components/button/Button.spec.tsx b/src/components/button/Button.spec.tsx
index 85fadcda..6496e19c 100644
--- a/src/components/button/Button.spec.tsx
+++ b/src/components/button/Button.spec.tsx
@@ -18,9 +18,27 @@ test('it works', () => {
     expect(container.firstChild).toMatchSnapshot();
 });
 
-test('it works with size', () => {
+test('it works with size small', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" small>
+        <Button type="button" kind="secondary" sizes="small">
+            Hello world
+        </Button>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+});
+
+test('it works with size medium', () => {
+    const { container } = setup(
+        <Button type="button" kind="secondary" sizes="small">
+            Hello world
+        </Button>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+});
+
+test('it works with size large', () => {
+    const { container } = setup(
+        <Button type="button" kind="secondary" sizes="small">
             Hello world
         </Button>
     );
diff --git a/src/components/button/README.md b/src/components/button/README.md
index c4129b57..52444735 100644
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@@ -31,14 +31,41 @@ Small buttons
 import { ThemeProvider, Button } from '@lapidist/components';
 
 <ThemeProvider>
-    <Button type="button" kind="primary" small>Primary</Button>
-    <Button type="button" kind="secondary" small>Secondary</Button>
-    <Button type="button" kind="tertiary" small>Tertiary</Button>
-    <Button type="button" kind="danger" small>Danger</Button>
-    <Button type="button" kind="grey" small>Grey</Button>
+    <Button type="button" kind="primary" variant="small">Primary</Button>
+    <Button type="button" kind="secondary" variant="small">Secondary</Button>
+    <Button type="button" kind="tertiary" variant="small">Tertiary</Button>
+    <Button type="button" kind="danger" variant="small">Danger</Button>
+    <Button type="button" kind="grey" variant="small">Grey</Button>
 </ThemeProvider>
 ```
 
+Medium buttons
+```jsx harmony
+import { ThemeProvider, Button } from '@lapidist/components';
+
+<ThemeProvider>
+    <Button type="button" kind="primary" variant="medium">Primary</Button>
+    <Button type="button" kind="secondary" variant="medium">Secondary</Button>
+    <Button type="button" kind="tertiary" variant="medium">Tertiary</Button>
+    <Button type="button" kind="danger" variant="medium">Danger</Button>
+    <Button type="button" kind="grey" variant="medium">Grey</Button>
+</ThemeProvider>
+```
+
+Large buttons
+```jsx harmony
+import { ThemeProvider, Button } from '@lapidist/components';
+
+<ThemeProvider>
+    <Button type="button" kind="primary" variant="large">Primary</Button>
+    <Button type="button" kind="secondary" variant="large">Secondary</Button>
+    <Button type="button" kind="tertiary" variant="large">Tertiary</Button>
+    <Button type="button" kind="danger" variant="large">Danger</Button>
+    <Button type="button" kind="grey" variant="large">Grey</Button>
+</ThemeProvider>
+```
+
+
 Ghost buttons
 ```jsx harmony
 import { ThemeProvider, Button } from '@lapidist/components';
@@ -70,10 +97,36 @@ Small ghost buttons
 import { ThemeProvider, Button } from '@lapidist/components';
 
 <ThemeProvider>
-    <Button type="button" kind="primary" ghost small>Primary</Button>
-    <Button type="button" kind="secondary" ghost small>Secondary</Button>
-    <Button type="button" kind="tertiary" ghost small>Tertiary</Button>
-    <Button type="button" kind="danger" ghost small>Danger</Button>
-    <Button type="button" kind="grey" ghost small>Grey</Button>
+    <Button type="button" kind="primary" ghost variant="small">Primary</Button>
+    <Button type="button" kind="secondary" ghost variant="small">Secondary</Button>
+    <Button type="button" kind="tertiary" ghost variant="small">Tertiary</Button>
+    <Button type="button" kind="danger" ghost variant="small">Danger</Button>
+    <Button type="button" kind="grey" ghost variant="small">Grey</Button>
+</ThemeProvider>
+```
+
+Medium ghost buttons
+```jsx harmony
+import { ThemeProvider, Button } from '@lapidist/components';
+
+<ThemeProvider>
+    <Button type="button" kind="primary" ghost variant="medium">Primary</Button>
+    <Button type="button" kind="secondary" ghost variant="medium">Secondary</Button>
+    <Button type="button" kind="tertiary" ghost variant="medium">Tertiary</Button>
+    <Button type="button" kind="danger" ghost variant="medium">Danger</Button>
+    <Button type="button" kind="grey" ghost variant="medium">Grey</Button>
+</ThemeProvider>
+```
+
+Large ghost buttons
+```jsx harmony
+import { ThemeProvider, Button } from '@lapidist/components';
+
+<ThemeProvider>
+    <Button type="button" kind="primary" ghost variant="large">Primary</Button>
+    <Button type="button" kind="secondary" ghost variant="large">Secondary</Button>
+    <Button type="button" kind="tertiary" ghost variant="large">Tertiary</Button>
+    <Button type="button" kind="danger" ghost variant="large">Danger</Button>
+    <Button type="button" kind="grey" ghost variant="large">Grey</Button>
 </ThemeProvider>
 ```
diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
index 939bc70b..e527af08 100644
--- a/src/components/button/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -90,11 +90,57 @@ exports[`it works with ghost 1`] = `
 </button>
 `;
 
-exports[`it works with size 1`] = `
+exports[`it works with size large 1`] = `
 .c0 {
   border-style: solid;
   text-align: center;
-  font-size: 0.875rem;
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 1px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #ebc764;
+  color: white;
+  border-color: #937032;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #937032;
+  color: white;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #937032;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #937032;
+  color: white;
+}
+
+<button
+  class="c0"
+  sizes="small"
+  type="button"
+>
+  Hello world
+</button>
+`;
+
+exports[`it works with size medium 1`] = `
+.c0 {
+  border-style: solid;
+  text-align: center;
+  font-size: 1rem;
   font-weight: 400;
   font-family: Montserrat,sans-serif;
   line-height: 2;
@@ -103,8 +149,54 @@ exports[`it works with size 1`] = `
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #ebc764;
+  color: white;
+  border-color: #937032;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #937032;
+  color: white;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #937032;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #937032;
+  color: white;
+}
+
+<button
+  class="c0"
+  sizes="small"
+  type="button"
+>
+  Hello world
+</button>
+`;
+
+exports[`it works with size small 1`] = `
+.c0 {
+  border-style: solid;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 1px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   background-color: #ebc764;
   color: white;
   border-color: #937032;
@@ -129,6 +221,7 @@ exports[`it works with size 1`] = `
 
 <button
   class="c0"
+  sizes="small"
   type="button"
 >
   Hello world
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index a7ad47b3..90f755f1 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -11,10 +11,12 @@ export type ButtonPropType = BoxProps &
     React.ButtonHTMLAttributes<HTMLButtonElement> &
     React.HTMLProps<HTMLButtonElement>;
 
+export type ButtonSize = 'small' | 'medium' | 'large';
+
 export interface ButtonProps {
     readonly kind: string;
     readonly theme: Theme;
-    readonly small?: boolean;
+    readonly variant?: ButtonSize;
     readonly ghost?: boolean;
 }
 
@@ -23,14 +25,14 @@ const BaseButton: React.FC<ButtonPropType & ButtonProps> = ({
     styles,
     kind,
     theme,
-    small,
+    variant,
     ghost,
     ...restProps
 }) => (
     <Text
         as={as}
         styles={mergeStyles(
-            buttonStyles({ kind, theme, small, ghost }),
+            buttonStyles({ kind, theme, variant, ghost }),
             styles
         )}
         {...restProps}
diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
index 4c3f8dde..a0e673b4 100644
--- a/src/components/button/styles.ts
+++ b/src/components/button/styles.ts
@@ -14,9 +14,21 @@ interface ButtonVariantStyles {
     disabledBackgroundColor: ColorGroup | string;
 }
 
-const buttonSizing = (small?: boolean) => ({
-    paddingY: small ? '1' : '2',
-    fontSize: small ? '2' : '3'
+const scale = (variant: string, start: number): string => {
+    switch (variant) {
+        case 'small':
+            return (start - 1).toString(10);
+        case 'medium':
+            return start.toString(10);
+        case 'large':
+        default:
+            return (start + 1).toString(10);
+    }
+};
+
+const buttonSizing = (variant: string) => ({
+    paddingY: scale(variant, 1),
+    fontSize: scale(variant, 2)
 });
 
 const darkGrey: ColorGroup = { group: 'grey', shade: 'dark' };
@@ -39,7 +51,7 @@ const buttonColors = (dark: string, base: string, ghost?: boolean) => ({
 const buttonVariants = ({
     kind,
     theme,
-    small,
+    variant,
     ghost
 }: ButtonProps): ButtonVariantStyles => {
     const { dark, base } = getProperty<{
@@ -47,7 +59,7 @@ const buttonVariants = ({
     }>(theme, 'colors', kind);
 
     return {
-        ...buttonSizing(small),
+        ...buttonSizing(variant || 'large'),
         ...buttonColors(dark, base, ghost)
     };
 };
diff --git a/src/components/tag/README.md b/src/components/tag/README.md
index af81e2f9..09d5aa63 100644
--- a/src/components/tag/README.md
+++ b/src/components/tag/README.md
@@ -1,11 +1,11 @@
 The Tag component displays small, inline snippets of information.
 
 ```jsx harmony
-import { ThemeProvider, Tag } from '@lapidist/components';
+import { ThemeProvider, Tag, Button } from '@lapidist/components';
 
 <ThemeProvider>
     <Tag namespace="npm" kind="primary">v1.0.0</Tag>
-    <Tag href="https://github.com" namespace="GitHub" kind="secondary">v1.0.0</Tag>
+    <Tag namespace="GitHub" kind="secondary">v1.0.0</Tag>
     <Tag kind="tertiary">v1.0.0</Tag>
     <Tag kind="danger">v1.0.0</Tag>
     <Tag kind="grey">v1.0.0</Tag>
diff --git a/src/components/tag/__snapshots__/Tag.spec.tsx.snap b/src/components/tag/__snapshots__/Tag.spec.tsx.snap
index bdf5b678..9693e9f3 100644
--- a/src/components/tag/__snapshots__/Tag.spec.tsx.snap
+++ b/src/components/tag/__snapshots__/Tag.spec.tsx.snap
@@ -8,14 +8,14 @@ exports[`it works 1`] = `
   font-weight: 400;
   font-family: Montserrat,sans-serif;
   line-height: 2;
-  border-radius: 0.3rem;
-  border-width: 1px;
+  border-radius: 0.6rem;
+  border-width: 0;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   background-color: #17a3a5;
   color: white;
-  border-color: #1a8385;
+  border-color: #292B3E;
 }
 
 .c1 {
@@ -44,14 +44,14 @@ exports[`it works with href 1`] = `
   font-weight: 400;
   font-family: Montserrat,sans-serif;
   line-height: 2;
-  border-radius: 0.3rem;
-  border-width: 1px;
+  border-radius: 0.6rem;
+  border-width: 0;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   background-color: #17a3a5;
   color: white;
-  border-color: #1a8385;
+  border-color: #292B3E;
 }
 
 .c1 {
@@ -63,18 +63,13 @@ exports[`it works with href 1`] = `
 
 <span
   class="c0"
+  href="https://href.test"
 >
-  <a
-    href="https://href.test"
-    rel="nofollow noopener"
-    target="__blank"
+  <span
+    class="c1"
   >
-    <span
-      class="c1"
-    >
-      Hello world
-    </span>
-  </a>
+    Hello world
+  </span>
 </span>
 `;
 
@@ -86,14 +81,14 @@ exports[`it works with namespace 1`] = `
   font-weight: 400;
   font-family: Montserrat,sans-serif;
   line-height: 2;
-  border-radius: 0.3rem;
-  border-width: 1px;
+  border-radius: 0.6rem;
+  border-width: 0;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   background-color: #17a3a5;
   color: white;
-  border-color: #1a8385;
+  border-color: #292B3E;
 }
 
 .c1 {
@@ -137,14 +132,14 @@ exports[`it works with namespace and href 1`] = `
   font-weight: 400;
   font-family: Montserrat,sans-serif;
   line-height: 2;
-  border-radius: 0.3rem;
-  border-width: 1px;
+  border-radius: 0.6rem;
+  border-width: 0;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   background-color: #17a3a5;
   color: white;
-  border-color: #1a8385;
+  border-color: #292B3E;
 }
 
 .c1 {
@@ -166,22 +161,17 @@ exports[`it works with namespace and href 1`] = `
 
 <span
   class="c0"
+  href="https://href.test"
 >
-  <a
-    href="https://href.test"
-    rel="nofollow noopener"
-    target="__blank"
+  <span
+    class="c1"
   >
-    <span
-      class="c1"
-    >
-      namespace
-    </span>
-    <span
-      class="c2"
-    >
-      Hello world
-    </span>
-  </a>
+    namespace
+  </span>
+  <span
+    class="c2"
+  >
+    Hello world
+  </span>
 </span>
 `;
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
index befa6a4f..c3e6008c 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -44,7 +44,6 @@ const BaseTag: React.FC<TagPropType & TagProps> = ({
     theme,
     children,
     namespace,
-    href,
     ...restProps
 }) => (
     <Text
@@ -52,13 +51,7 @@ const BaseTag: React.FC<TagPropType & TagProps> = ({
         styles={mergeStyles(tagStyles({ kind, theme }), styles)}
         {...restProps}
     >
-        {href ? (
-            <a href={href} target="__blank" rel="nofollow noopener">
-                <InnerTag namespace={namespace}>{children}</InnerTag>
-            </a>
-        ) : (
-            <InnerTag namespace={namespace}>{children}</InnerTag>
-        )}
+        <InnerTag namespace={namespace}>{children}</InnerTag>
     </Text>
 );
 
diff --git a/src/components/tag/styles.ts b/src/components/tag/styles.ts
index f5ceefc3..93ee1a51 100644
--- a/src/components/tag/styles.ts
+++ b/src/components/tag/styles.ts
@@ -8,28 +8,28 @@ interface TagVariantStyles {
     textColor: ColorGroup | string;
 }
 
-const tagColors = (dark: string, base: string) => ({
-    borderColor: dark,
+const tagColors = (base: string) => ({
+    borderColor: { group: 'grey', shade: 'dark' },
     backgroundColor: base,
     textColor: { group: 'base', shade: 'light' }
 });
 
 const tagVariants = ({ kind, theme }: TagProps): TagVariantStyles => {
-    const { dark, base } = getProperty<{
+    const { base } = getProperty<{
         [K: string]: string;
     }>(theme, 'colors', kind);
 
     return {
         fontSize: '1',
-        ...tagColors(dark, base)
+        ...tagColors(base)
     };
 };
 
 const tagBaseStyles: Styles = {
-    borderWidth: 'px',
+    borderWidth: '0',
     boxShadow: '1',
     textAlign: 'center',
-    borderRadius: '2',
+    borderRadius: '3',
     borderStyle: 'solid',
     paddingY: '1'
 };