Add nav buttons

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

@@ -38,6 +38,62 @@ Inline.args = {
   variant: 'inline',
 };
 
+export const NavAccent: Story = (args) => (
+  <>
+    <div className="mb-8">
+      <Button variant="accent" className="px-4">
+        Background
+      </Button>
+    </div>
+    <div className="mb-8">
+      <Button
+        variant="accent"
+        className="pl-8 pr-4"
+        prependIconName="menu-open"
+      >
+        Background
+      </Button>
+    </div>
+    <div className="mb-8">
+      <Button
+        variant="accent"
+        className="pl-4 pr-8"
+        appendIconName="menu-closed"
+      >
+        Background
+      </Button>
+    </div>
+  </>
+);
+
+export const NavInline: Story = (args) => (
+  <>
+    <div className="mb-8">
+      <Button variant="inline" className="uppercase">
+        Background
+      </Button>
+    </div>
+    <div className="mb-8">
+      <Button
+        variant="inline"
+        className="uppercase"
+        prependIconName="menu-open"
+      >
+        Background
+      </Button>
+    </div>
+    <div className="mb-8">
+      <Button
+        variant="inline"
+        className="uppercase"
+        appendIconName="menu-closed"
+      >
+        Background
+      </Button>
+    </div>
+  </>
+);
+
 export const IconPrepend = Template.bind({});
 IconPrepend.args = {
   children: 'Icon prepend',

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

@@ -1,7 +1,5 @@
 import classNames from 'classnames';
 import { Icon, IconName } from '../icon';
-
-/* eslint-disable-next-line */
 export interface ButtonProps {
   tag?: 'a' | 'button';
   children?: React.ReactNode;
@@ -29,10 +27,9 @@ export function Button({
     [
       'inline-flex',
       'items-center',
+      'justify-center',
       'box-border',
       'h-28',
-      'pl-28',
-      'pr-28',
       'border',
       'text-ui',
       'no-underline',
@@ -43,6 +40,13 @@ export function Button({
       'disabled:bg-disabled/25',
     ],
     {
+      'pl-28': !(
+        className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
+      ),
+      'pr-28': !(
+        className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
+      ),
+
       'bg-white': variant === 'primary',
       'border-light-gray-50': variant === 'primary' || variant === 'secondary',
       'text-black': variant === 'primary',
@@ -51,7 +55,6 @@ export function Button({
       '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',

libs/ui-toolkit/src/components/callout/callout.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { Callout } from '.';
+import { Callout } from './callout';
+import { Button } from '../button';
 
 export default {
   title: 'Callout',
@@ -9,37 +10,61 @@ export default {
 } as ComponentMeta<typeof Callout>;
 
 const Template: ComponentStory<typeof Callout> = (args) => (
-  <Callout {...args}>Content</Callout>
+  <Callout {...args} />
 );
 
 export const Default = Template.bind({});
+Default.args = {
+  children: 'Content',
+};
 
 export const Danger = Template.bind({});
 Danger.args = {
   intent: 'danger',
+  children: 'Content',
 };
 
 export const Warning = Template.bind({});
 Warning.args = {
   intent: 'warning',
+  children: 'Content',
 };
 
 export const Prompt = Template.bind({});
 Prompt.args = {
   intent: 'prompt',
+  children: 'Content',
 };
 
 export const Progress = Template.bind({});
 Progress.args = {
   intent: 'progress',
+  children: 'Content',
 };
 
 export const Success = Template.bind({});
 Success.args = {
   intent: 'success',
+  children: 'Content',
 };
 
 export const Help = Template.bind({});
 Help.args = {
   intent: 'help',
+  children: 'Content',
+};
+
+export const IconAndContent = Template.bind({});
+IconAndContent.args = {
+  intent: 'help',
+  title: 'This is what this thing does',
+  iconName: 'endorsed',
+  children: (
+    <div className="flex flex-col">
+      <div>With a longer explaination</div>
+      <Button className="block mt-8" variant="secondary">
+        Action
+      </Button>
+    </div>
+  ),
 };

libs/ui-toolkit/src/components/callout/callout.test.tsx

@@ -8,8 +8,10 @@ test('It renders content within callout', () => {
 });
 
 test('It renders title and icon', () => {
-  render(<Callout icon={<div data-testid="icon" />} title="title" />);
-  expect(screen.getByTestId('icon')).toBeInTheDocument();
+  render(<Callout iconName="endorsed" title="title" />);
+  expect(
+    screen.getByTestId('callout').querySelector('svg')
+  ).toBeInTheDocument();
   expect(screen.getByText('title')).toBeInTheDocument();
 });
 

libs/ui-toolkit/src/components/callout/callout.tsx

@@ -1,24 +1,28 @@
-import React from 'react';
 import classNames from 'classnames';
+import { Icon, IconName } from '../icon';
 
-export const Callout = ({
-  children,
-  title,
-  intent = 'help',
-  icon,
-  headingLevel,
-}: {
+export interface CalloutProps {
   children?: React.ReactNode;
   title?: React.ReactElement | string;
   intent?: 'danger' | 'warning' | 'prompt' | 'progress' | 'success' | 'help';
-  icon?: React.ReactNode;
+  iconName?: IconName;
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-}) => {
+}
+
+export function Callout({
+  children,
+  title,
+  intent = 'help',
+  iconName,
+  headingLevel,
+}: CalloutProps) {
   const className = classNames(
     'shadow-callout',
     'border',
     'border-black',
     'dark:border-white',
+    'text-body-large',
+    'dark:text-white',
     'p-8',
     {
       'shadow-intent-danger': intent === 'danger',
@@ -27,22 +31,25 @@ export const Callout = ({
       'shadow-intent-black dark:shadow-intent-progress': intent === 'progress',
       'shadow-intent-success': intent === 'success',
       'shadow-intent-help': intent === 'help',
-      flex: icon,
+      flex: !!iconName,
     }
   );
   const TitleTag: keyof JSX.IntrinsicElements = headingLevel
     ? `h${headingLevel}`
     : 'div';
+  const icon = iconName && (
+    <Icon name={iconName} className="fill-current ml-8 mr-16 mt-8" size={20} />
+  );
   const body = (
-    <div className="body-large dark:text-white">
+    <>
       {title && <TitleTag className="text-h5">{title}</TitleTag>}
       {children}
-    </div>
+    </>
   );
   return (
     <div data-testid="callout" className={className}>
-      {icon && <div className="">{icon}</div>}
+      {icon}
       {icon ? <div className="grow">{body}</div> : body}
     </div>
   );
-};
+}