From ba5def9b760798c28576f13cf3a83ca04a3dee8f Mon Sep 17 00:00:00 2001
From: Brett Dorrans <hello@lapidist.net>
Date: Sun, 28 Aug 2022 02:47:21 +0100
Subject: [PATCH] feat: improve Tag styles (#1171)

* feat: improve Tag styles

* feat: improve Tag styles

* feat: improve Tag styles
---
 .../button-group/ButtonGroup.spec.tsx         |  70 ----
 .../button-group/ButtonGroup.stories.tsx      |  32 --
 .../__snapshots__/ButtonGroup.spec.tsx.snap   | 350 ------------------
 src/components/button-group/index.tsx         |  36 --
 src/components/button-group/styles.ts         |  12 -
 .../button/__snapshots__/Button.spec.tsx.snap |   4 +-
 src/components/index.ts                       |   1 -
 .../tag/__snapshots__/Tag.spec.tsx.snap       |   8 +-
 src/components/tag/styles.ts                  |   1 +
 src/components/theme-provider/defaultTheme.ts |   2 +-
 10 files changed, 8 insertions(+), 508 deletions(-)
 delete mode 100644 src/components/button-group/ButtonGroup.spec.tsx
 delete mode 100644 src/components/button-group/ButtonGroup.stories.tsx
 delete mode 100644 src/components/button-group/__snapshots__/ButtonGroup.spec.tsx.snap
 delete mode 100644 src/components/button-group/index.tsx
 delete mode 100644 src/components/button-group/styles.ts

diff --git a/src/components/button-group/ButtonGroup.spec.tsx b/src/components/button-group/ButtonGroup.spec.tsx
deleted file mode 100644
index 8040471c..00000000
--- a/src/components/button-group/ButtonGroup.spec.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import 'jest-styled-components';
-
-import { ThemeProvider } from '../theme-provider';
-import { Button } from '../button';
-import {
-    ButtonGroup,
-    ButtonGroupChildrenType,
-    ButtonGroupPropType
-} from './index';
-
-const sameButtons = [
-    <Button key="0" type="button" kind="primary">
-        Button
-    </Button>,
-    <Button key="1" type="button" kind="primary">
-        Button
-    </Button>,
-    <Button key="2" type="button" kind="primary">
-        Button
-    </Button>
-];
-
-const differentButtons = [
-    <Button key="0" type="button" kind="primary">
-        Button
-    </Button>,
-    <Button key="1" type="button" kind="secondary">
-        Button
-    </Button>,
-    <Button key="2" type="button" kind="tertiary">
-        Button
-    </Button>
-];
-
-const twoButtons = [
-    <Button key="0" type="button" kind="primary">
-        Button
-    </Button>,
-    <Button key="1" type="button" kind="primary">
-        Button
-    </Button>
-];
-
-const setup = (
-    props?: ButtonGroupPropType,
-    children: ButtonGroupChildrenType = sameButtons
-) =>
-    render(
-        <ThemeProvider>
-            <ButtonGroup {...props}>{children}</ButtonGroup>
-        </ThemeProvider>
-    );
-
-test('it works with same buttons', () => {
-    const { container } = setup();
-    expect(container.firstChild).toMatchSnapshot();
-});
-
-test('it works with different buttons', () => {
-    const { container } = setup({}, differentButtons);
-    expect(container.firstChild).toMatchSnapshot();
-});
-
-test('it works with two buttons', () => {
-    const { container } = setup({}, twoButtons);
-    expect(container.firstChild).toMatchSnapshot();
-});
diff --git a/src/components/button-group/ButtonGroup.stories.tsx b/src/components/button-group/ButtonGroup.stories.tsx
deleted file mode 100644
index 9ff0f115..00000000
--- a/src/components/button-group/ButtonGroup.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider } from '../theme-provider';
-import { ButtonGroup } from './index';
-import { Button } from '../button';
-
-export default {
-    title: 'Components/ButtonGroup',
-    component: ButtonGroup,
-    decorators: [(getStory) => <ThemeProvider>{getStory()}</ThemeProvider>],
-    subcomponents: { Button }
-};
-
-const templateStyles = {};
-
-const DefaultTemplate = (args) => (
-    <ButtonGroup {...args}>
-        <Button type="button" kind="primary" variant="small" ghost>
-            Button 1
-        </Button>
-        <Button type="button" kind="primary" variant="small">
-            Button 2
-        </Button>
-        <Button type="button" kind="primary" variant="small">
-            Button 3
-        </Button>
-    </ButtonGroup>
-);
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-    styles: templateStyles
-};
diff --git a/src/components/button-group/__snapshots__/ButtonGroup.spec.tsx.snap b/src/components/button-group/__snapshots__/ButtonGroup.spec.tsx.snap
deleted file mode 100644
index 410e4ae8..00000000
--- a/src/components/button-group/__snapshots__/ButtonGroup.spec.tsx.snap
+++ /dev/null
@@ -1,350 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it works with different buttons 1`] = `
-.c0 > :nth-child(n) {
-  border-radius: 0;
-}
-
-.c0 > :not(:last-child):nth-child(n) {
-  margin-right: 0.5rem;
-}
-
-.c1 {
-  border-style: solid;
-  text-align: center;
-  position: relative;
-  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: #17a3a5;
-  color: white;
-  border-color: #1a8385;
-}
-
-.c1:hover {
-  cursor: pointer;
-  background-color: #1a8385;
-  color: white;
-}
-
-.c1:hover:disabled {
-  cursor: not-allowed;
-  background-color: #1a8385;
-}
-
-.c1:disabled {
-  opacity: 0.7;
-  background-color: #1a8385;
-  color: white;
-}
-
-.c2 {
-  opacity: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 {
-  border-style: solid;
-  text-align: center;
-  position: relative;
-  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;
-}
-
-.c3:hover {
-  cursor: pointer;
-  background-color: #937032;
-  color: white;
-}
-
-.c3:hover:disabled {
-  cursor: not-allowed;
-  background-color: #937032;
-}
-
-.c3:disabled {
-  opacity: 0.7;
-  background-color: #937032;
-  color: white;
-}
-
-.c4 {
-  border-style: solid;
-  text-align: center;
-  position: relative;
-  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: #72af5d;
-  color: white;
-  border-color: #548230;
-}
-
-.c4:hover {
-  cursor: pointer;
-  background-color: #548230;
-  color: white;
-}
-
-.c4:hover:disabled {
-  cursor: not-allowed;
-  background-color: #548230;
-}
-
-.c4:disabled {
-  opacity: 0.7;
-  background-color: #548230;
-  color: white;
-}
-
-<div
-  class="c0"
-  role="group"
->
-  <button
-    class="c1"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-  <button
-    class="c3"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-  <button
-    class="c4"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-</div>
-`;
-
-exports[`it works with same buttons 1`] = `
-.c0 > :nth-child(n) {
-  border-radius: 0;
-}
-
-.c0 > :not(:last-child):nth-child(n) {
-  margin-right: 0.5rem;
-}
-
-.c1 {
-  border-style: solid;
-  text-align: center;
-  position: relative;
-  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: #17a3a5;
-  color: white;
-  border-color: #1a8385;
-}
-
-.c1:hover {
-  cursor: pointer;
-  background-color: #1a8385;
-  color: white;
-}
-
-.c1:hover:disabled {
-  cursor: not-allowed;
-  background-color: #1a8385;
-}
-
-.c1:disabled {
-  opacity: 0.7;
-  background-color: #1a8385;
-  color: white;
-}
-
-.c2 {
-  opacity: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-<div
-  class="c0"
-  role="group"
->
-  <button
-    class="c1"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-  <button
-    class="c1"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-  <button
-    class="c1"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-</div>
-`;
-
-exports[`it works with two buttons 1`] = `
-.c0 > :nth-child(n) {
-  border-radius: 0;
-}
-
-.c0 > :not(:last-child):nth-child(n) {
-  margin-right: 0.5rem;
-}
-
-.c1 {
-  border-style: solid;
-  text-align: center;
-  position: relative;
-  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: #17a3a5;
-  color: white;
-  border-color: #1a8385;
-}
-
-.c1:hover {
-  cursor: pointer;
-  background-color: #1a8385;
-  color: white;
-}
-
-.c1:hover:disabled {
-  cursor: not-allowed;
-  background-color: #1a8385;
-}
-
-.c1:disabled {
-  opacity: 0.7;
-  background-color: #1a8385;
-  color: white;
-}
-
-.c2 {
-  opacity: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-<div
-  class="c0"
-  role="group"
->
-  <button
-    class="c1"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-  <button
-    class="c1"
-    type="button"
-  >
-    <div
-      class="c2"
-    >
-      Button
-    </div>
-  </button>
-</div>
-`;
diff --git a/src/components/button-group/index.tsx b/src/components/button-group/index.tsx
deleted file mode 100644
index 4c89ae25..00000000
--- a/src/components/button-group/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { mergeStyles } from '@lapidist/styles';
-import { Box, BoxProps } from '../box';
-import { Button, ButtonProps } from '../button';
-import { buttonGroupStyles } from './styles';
-
-export * from './styles';
-
-export type ButtonGroupPropType = BoxProps;
-
-export type ButtonGroupChildrenType = React.ReactElement<ButtonProps>[];
-
-export interface ButtonGroupProps {
-    readonly children: ButtonGroupChildrenType;
-}
-
-export const ButtonGroup: React.FC<ButtonGroupPropType & ButtonGroupProps> = ({
-    as = 'div',
-    styles,
-    children,
-    ...restProps
-}) => (
-    <Box
-        role="group"
-        as={as}
-        styles={mergeStyles(buttonGroupStyles(), styles)}
-        {...restProps}
-    >
-        {children.map(
-            ({ props }, index) =>
-                props && <Button key={`Button${index}`} {...props} />
-        )}
-    </Box>
-);
-
-ButtonGroup.displayName = 'ButtonGroup';
diff --git a/src/components/button-group/styles.ts b/src/components/button-group/styles.ts
deleted file mode 100644
index c7515da0..00000000
--- a/src/components/button-group/styles.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Styles } from '@lapidist/styles';
-
-export const buttonGroupStyles = (): Styles => ({
-    pseudo: {
-        '> :nth-child(n)': {
-            borderRadius: '0'
-        },
-        '> :not(:last-child):nth-child(n)': {
-            marginRight: '2'
-        }
-    }
-});
diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
index a76760ca..b04c74b3 100644
--- a/src/components/button/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -91,12 +91,12 @@ exports[`it works with ghost 1`] = `
 
 .c0:hover:disabled {
   cursor: not-allowed;
-  background-color: #E8E8E8;
+  background-color: #fafafa;
 }
 
 .c0:disabled {
   opacity: 0.7;
-  background-color: #E8E8E8;
+  background-color: #fafafa;
   color: #292B3E;
 }
 
diff --git a/src/components/index.ts b/src/components/index.ts
index 4815ca31..f947011f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './aspect-ratio';
 export * from './box';
 export * from './button';
-export * from './button-group';
 export * from './heading';
 export * from './image';
 export * from './link';
diff --git a/src/components/tag/__snapshots__/Tag.spec.tsx.snap b/src/components/tag/__snapshots__/Tag.spec.tsx.snap
index 9693e9f3..47432857 100644
--- a/src/components/tag/__snapshots__/Tag.spec.tsx.snap
+++ b/src/components/tag/__snapshots__/Tag.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`it works 1`] = `
   border-style: solid;
   text-align: center;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 700;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.6rem;
@@ -41,7 +41,7 @@ exports[`it works with href 1`] = `
   border-style: solid;
   text-align: center;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 700;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.6rem;
@@ -78,7 +78,7 @@ exports[`it works with namespace 1`] = `
   border-style: solid;
   text-align: center;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 700;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.6rem;
@@ -129,7 +129,7 @@ exports[`it works with namespace and href 1`] = `
   border-style: solid;
   text-align: center;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 700;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.6rem;
diff --git a/src/components/tag/styles.ts b/src/components/tag/styles.ts
index 93ee1a51..08e110d9 100644
--- a/src/components/tag/styles.ts
+++ b/src/components/tag/styles.ts
@@ -29,6 +29,7 @@ const tagBaseStyles: Styles = {
     borderWidth: '0',
     boxShadow: '1',
     textAlign: 'center',
+    fontWeight: '700',
     borderRadius: '3',
     borderStyle: 'solid',
     paddingY: '1'
diff --git a/src/components/theme-provider/defaultTheme.ts b/src/components/theme-provider/defaultTheme.ts
index 7d4319bb..85c7796c 100644
--- a/src/components/theme-provider/defaultTheme.ts
+++ b/src/components/theme-provider/defaultTheme.ts
@@ -134,7 +134,7 @@ export const defaultTheme: Theme = {
             transparent: 'transparent'
         },
         grey: {
-            lightest: '#E8E8E8',
+            lightest: '#fafafa',
             light: '#d4d4d4',
             base: '#73748b',
             dark: '#292B3E'