Add button component

libs/tailwindcss-config/src/theme.js

@@ -8,9 +8,8 @@ module.exports = {
   colors: {
     transparent: 'transparent',
     current: 'currentColor',
-    black: '#000',
     white: '#FFF',
-
+    black: '#000',
     neutral: {
       // 250 - 23 = 227; (900-50) / 227 = 850 / 227 = 3.74449339207
       50: '#fafafa', // FA = 250
@@ -37,6 +36,7 @@ module.exports = {
 
     'light-gray-50': '#F5F8FA', //off-white - https://blueprintjs.com/docs/#core/colors
     'gray-50': '#BFCCD6', // muted - https://blueprintjs.com/docs/#core/colors
+    disabled: '#8598A6', // 'fill-disabled': 'rgba(133, 152, 166, 0.25)'
     coral: '#FF6057',
     vega: {
       yellow: '#EDFF22',
@@ -85,6 +85,7 @@ module.exports = {
     28: '1.75rem',
     44: '2.75rem',
   },
+  /*
   backgroundColor: ({ theme }) => ({
     transparent: 'transparent',
     dark: theme('colors.neutral.753'),
@@ -93,6 +94,7 @@ module.exports = {
     danger: theme('colors.intent.background.danger'),
     'neutral-200': theme('colors.neutral.200'),
   }),
+  */
   borderWidth: {
     DEFAULT: '1px',
     1: '1px',
@@ -132,12 +134,12 @@ module.exports = {
     ],
   },
   fontSize: {
-    h1: ['72px', { lineHeight: '92px', letterSpacing: '-1%' }],
-    h2: ['48px', { lineHeight: '64px', letterSpacing: '-1%' }],
-    h3: ['32px', { lineHeight: '40px', letterSpacing: '-1%' }],
+    h1: ['72px', { lineHeight: '92px', letterSpacing: '-0.01em' }],
+    h2: ['48px', { lineHeight: '64px', letterSpacing: '-0.01em' }],
+    h3: ['32px', { lineHeight: '40px', letterSpacing: '-0.01em' }],
 
-    h4: ['24px', { lineHeight: '36px', letterSpacing: '-1%' }],
-    h5: ['18px', { lineHeight: '28px', letterSpacing: '-1%' }],
+    h4: ['24px', { lineHeight: '36px', letterSpacing: '-0.01em' }],
+    h5: ['18px', { lineHeight: '28px', letterSpacing: '-0.01em' }],
 
     'body-large': ['16px', '24px'],
     body: ['14px', '20px'],

libs/ui-toolkit/src/components/button/Button.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Button from './Button';
+
+describe('Button', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Button>Label</Button>);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/button/Button.stories.tsx

@@ -0,0 +1,39 @@
+import { Story, Meta } from '@storybook/react';
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  title: 'Button',
+} as Meta;
+
+const Template: Story = (args) => (
+  <>
+    <div className="mb-8">
+      <Button {...args} />
+    </div>
+    {args['variant'] !== 'inline' && <Button {...args} disabled />}
+  </>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: 'Primary',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary',
+  variant: 'secondary',
+};
+
+export const Accent = Template.bind({});
+Accent.args = {
+  children: 'Accent',
+  variant: 'accent',
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  children: 'Inline',
+  variant: 'inline',
+};

libs/ui-toolkit/src/components/button/Button.tsx

@@ -0,0 +1,89 @@
+import classNames from 'classnames';
+
+/* eslint-disable-next-line */
+export interface ButtonProps {
+  tag?: 'a' | 'button';
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement> &
+    React.MouseEventHandler<HTMLAnchorElement>;
+  variant?: 'primary' | 'secondary' | 'accent' | 'inline';
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Button({
+  tag = 'button',
+  variant = 'primary',
+  children,
+  onClick,
+  disabled,
+  className,
+}: ButtonProps) {
+  const ButtonTag: keyof JSX.IntrinsicElements = tag;
+  const effectiveClassName = classNames(
+    [
+      'inline-flex',
+      'items-center',
+      'box-border',
+      'h-28',
+      'pl-28',
+      'pr-28',
+      'border',
+      'text-ui',
+      'no-underline',
+      'hover:underline',
+      'hover:border-white',
+      'active:border-white',
+      'disabled:no-underline',
+      'disabled:bg-disabled/25',
+    ],
+    {
+      'bg-white': variant === 'primary',
+      'border-light-gray-50': variant === 'primary' || variant === 'secondary',
+      'text-black': variant === 'primary',
+      'hover:bg-white/70': variant === 'primary',
+      'active:bg-black': variant === 'primary' || variant === 'accent',
+      'active:text-white': variant === 'primary',
+      'disabled:text-gray-50': variant === 'primary' || variant === 'secondary',
+      'disabled:border-neutral-593': variant === 'primary',
+      'disabled:gray-50': variant === 'primary',
+
+      'bg-black': variant === 'secondary',
+      'text-light-gray-50': variant === 'secondary' || variant === 'inline',
+      'hover:bg-white/30': variant === 'secondary',
+      'hover:text-white': variant === 'secondary' || variant === 'accent',
+      'active:bg-white': variant === 'secondary',
+      'active:text-black': variant === 'secondary',
+      'disabled:text-disabled': variant === 'secondary' || variant === 'accent',
+      'disabled:border-disabled':
+        variant === 'secondary' || variant === 'accent',
+
+      uppercase: variant === 'accent',
+      'bg-vega-yellow': variant === 'accent',
+      'border-transparent': variant === 'accent' || variant === 'inline',
+      'hover:bg-vega-yellow/30': variant === 'accent',
+      'active:text-light-gray-50': variant === 'accent',
+
+      'pl-4': variant === 'inline',
+      'pr-4': variant === 'inline',
+      'border-0': variant === 'inline',
+      underline: variant === 'inline',
+      'hover:no-underline': variant === 'inline',
+      'hover:border-transparent': variant === 'inline',
+      'active:border-transparent': variant === 'inline',
+      'active:text-vega-yellow': variant === 'inline',
+    },
+    className
+  );
+  return (
+    <ButtonTag
+      onClick={onClick}
+      className={effectiveClassName}
+      disabled={disabled}
+    >
+      {children}
+    </ButtonTag>
+  );
+}
+
+export default Button;

libs/ui-toolkit/src/primitives/colors.stories.mdx

@@ -21,14 +21,14 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
 
 <ColorPalette>
   <ColorItem
-    title="theme.color.black"
+    title="theme.color.white"
     subtitle="White"
-    colors={[theme.colors.white]}
+    colors={[theme.colors.white.DEFAULT]}
   />
   <ColorItem
     title="theme.color.black"
     subtitle="Black"
-    colors={[theme.colors.black]}
+    colors={[theme.colors.black.DEFAULT]}
   />
   <ColorItem
     title="theme.color.coral"
@@ -79,8 +79,8 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
     subtitle="Intent backgroundColor"
     colors={{
       dark: theme.colors.neutral[753],
-      black: theme.colors.black,
-      white: theme.colors.white,
+      black: theme.colors.black.DEFAULT,
+      white: theme.colors.white.DEFAULT,
       danger: theme.colors['intent-background'].danger,
     }}
   />

libs/ui-toolkit/tsconfig.lib.json

@@ -22,5 +22,11 @@
     "**/*.stories.jsx",
     "**/*.stories.tsx"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": [
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/primitives/typography.stories.mdx"
+  ]
 }