epic: various component improvements (#1173)

* feat: improve Tag and Link colour contrast (#1172)

* feat: improve Button styling and accessibility (#1174)

BREAKING CHANGE: deprecate grey Button kind

* chore: prettier

.storybook/preview-head.html

@@ -1 +1 @@
-<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700" />
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat:400,500,700" />

src/components/button/Button.spec.tsx

@@ -46,22 +46,33 @@ test('it works with size large', () => {
     expect(container.firstChild).toMatchSnapshot();
 });
 
-test('it works with ghost', () => {
+test('it works with loading', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" ghost>
+        <Button type="button" kind="secondary" loading>
             Hello world
         </Button>
     );
     expect(container.firstChild).toMatchSnapshot();
 });
 
-test('it works with loading', () => {
+test('it works with anchor', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" loading>
+        <Button
+            as="a"
+            kind="secondary"
+            href="https://google.com"
+            target="_blank"
+        >
             Hello world
         </Button>
     );
     expect(container.firstChild).toMatchSnapshot();
+    expect(container.querySelectorAll('a').length).toBe(1);
+    expect(container.querySelector('a')).toHaveAttribute(
+        'href',
+        'https://google.com'
+    );
+    expect(container.querySelector('a')).toHaveAttribute('target', '_blank');
 });
 
 test('it works with icon', () => {

src/components/button/Button.stories.tsx

@@ -37,15 +37,18 @@ Danger.args = {
     styles: templateStyles
 };
 
-export const Grey = DefaultTemplate.bind({});
-Grey.args = {
-    kind: 'grey',
-    styles: templateStyles
-};
-
 export const WithIcon = DefaultTemplate.bind({});
 WithIcon.args = {
     kind: 'primary',
     icon: faXmark,
     styles: templateStyles
 };
+
+export const AsAnchor = DefaultTemplate.bind({});
+AsAnchor.args = {
+    as: 'a',
+    kind: 'primary',
+    href: 'https://google.com',
+    target: '_blank',
+    styles: templateStyles
+};