fixup! LFR-3192: Add Chip component for tags

Author: Zaid Lahham

packages/core/src/components/Chip/Chip.css

@@ -9,7 +9,7 @@
   width: auto;
   border: 1px solid var(--color-greyDarkest);
   box-sizing: border-box;
-  font-weight: 600;
+  font-weight: var(--fontweight-demi);
   font-size: var(--fontsize-small-ii);
 }
 

packages/core/src/components/Chip/Chip.js

@@ -4,18 +4,15 @@ import * as React from 'react';
 import cx from "classnames";
 import css from "./Chip.css";
 
-type
-Props = {
+type Props = {
   className?: string,
   href: string,
   text: string,
 };
 
 const Chip = ({className, href, text}: Props) => (
   <a href={href} className={cx(css.root, className)}>
-    <div>
-      {text}
-    </div>
+    {text}
   </a>
 );
 

packages/core/src/components/Chip/Chip.test.js

@@ -1,12 +1,20 @@
 import React from 'react';
-import { render } from 'react-dom';
-
+import { fireEvent, render } from '@testing-library/react';
 import Chip from './Chip';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   render(
-    <Chip />,
+    <Chip/>,
     div,
   );
 });
+
+it('displays the correct text and href', () => {
+  const { queryByText } = render(
+    <Chip text="Active" href="https://appearhere.co.uk"/>,
+  );
+
+  expect(queryByText(/Active/i)).toBeTruthy();
+  expect(document.querySelector("a").getAttribute("href")).toBe("https://appearhere.co.uk");
+});

packages/core/src/globals/typography.css

@@ -13,7 +13,7 @@
  * ```
  */
 :root {
-  --font-avenir: 'Avenir Next', 'Helvetica Neue', 'Helvetica', 'sans-serif';
+  --font-avenir: 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
   --font-fira-code: 'Fira Mono', monospace;
 
   --fontweight-bold: 800;