feat: button and input: adds neutral button, exports components, rena…

…mes enum to better match others (EightfoldAI#48)

packages/octuple/src/components/Button/BaseButton.tsx

@@ -1,5 +1,11 @@
 import React, { FC, Ref } from 'react';
-import { ButtonSize, ButtonTheme, ButtonWidth, InternalButtonProps } from './';
+import {
+    ButtonShape,
+    ButtonSize,
+    ButtonTheme,
+    ButtonWidth,
+    InternalButtonProps,
+} from './';
 import { Icon, IconName, IconSize } from '../Icon';
 import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
 import { classNames } from '../../shared/utilities';
@@ -14,11 +20,13 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             checked = false,
             className,
             disabled = false,
+            dropShadow = false,
             htmlType,
             icon,
             iconColor,
             id,
             onClick,
+            shape = ButtonShape.Rectangle,
             size = ButtonSize.Flex,
             style,
             text,
@@ -59,6 +67,8 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             { [styles.buttonPadding2]: size === ButtonSize.Medium },
             { [styles.buttonPadding3]: size === ButtonSize.Small },
             { [styles.buttonStretch]: buttonWidth === ButtonWidth.fill },
+            { [styles.pillShape]: shape === ButtonShape.Pill },
+            { [styles.dropShadow]: dropShadow },
             { [styles.dark]: theme === ButtonTheme.dark },
             { [styles.disabled]: allowDisabledFocus || disabled },
         ]);

packages/octuple/src/components/Button/Button.stories.tsx

@@ -1,7 +1,10 @@
 import React, { FC } from 'react';
 import {
+    ButtonShape,
     ButtonSize,
+    ButtonWidth,
     DefaultButton,
+    NeutralButton,
     PrimaryButton,
     SecondaryButton,
 } from './index';
@@ -30,6 +33,17 @@ export const Primary = () => (
         />
         <br />
         <br />
+        <h2>Default Flex (Fill)</h2>
+        <div style={{ width: '50%' }}>
+            <PrimaryButton
+                ariaLabel="Primary Button"
+                buttonWidth={ButtonWidth.fill}
+                icon={IconName.mdiCardsHeart}
+                onClick={_alertClicked}
+                text="Primary Button"
+            />
+        </div>
+        <br />
         <h2>Text only</h2>
         <PrimaryButton
             ariaLabel="Primary Button"
@@ -39,6 +53,16 @@ export const Primary = () => (
         />
         <br />
         <br />
+        <h2>Text only (Pill)</h2>
+        <PrimaryButton
+            ariaLabel="Primary Button"
+            onClick={_alertClicked}
+            size={ButtonSize.Large}
+            shape={ButtonShape.Pill}
+            text="Primary Button"
+        />
+        <br />
+        <br />
         <h2>Icon only</h2>
         <PrimaryButton
             ariaLabel="Primary Button"
@@ -81,6 +105,16 @@ export const Secondary = () => (
         />
         <br />
         <br />
+        <h2>Text only (Pill)</h2>
+        <SecondaryButton
+            ariaLabel="Secondary Button"
+            onClick={_alertClicked}
+            shape={ButtonShape.Pill}
+            size={ButtonSize.Large}
+            text="Secondary Button"
+        />
+        <br />
+        <br />
         <h2>Icon only</h2>
         <SecondaryButton
             ariaLabel="Secondary Button"
@@ -123,6 +157,17 @@ export const Default = () => (
         />
         <br />
         <br />
+        <h2>Text only (Pill)</h2>
+        <DefaultButton
+            ariaLabel="Default Button"
+            dropShadow
+            onClick={_alertClicked}
+            shape={ButtonShape.Pill}
+            size={ButtonSize.Large}
+            text="Default Button"
+        />
+        <br />
+        <br />
         <h2>Icon only</h2>
         <DefaultButton
             ariaLabel="Default Button"
@@ -140,13 +185,67 @@ export const Default = () => (
             size={ButtonSize.Large}
             text="Default Button"
         />
+        <br />
+        <br />
+        <h2>Disruptive</h2>
+        <DefaultButton
+            ariaLabel="Default Button"
+            disruptive
+            onClick={_alertClicked}
+            size={ButtonSize.Large}
+            text="Default Button"
+        />
+    </>
+);
+
+export const Neutral = () => (
+    <>
+        <h1>Neutral Button</h1>
+        <h2>Text only</h2>
+        <NeutralButton
+            ariaLabel="Neutral Button"
+            onClick={_alertClicked}
+            size={ButtonSize.Large}
+            text="Neutral Button"
+        />
+        <br />
+        <br />
+        <h2>Text only (Pill)</h2>
+        <NeutralButton
+            ariaLabel="Neutral Button"
+            dropShadow
+            onClick={_alertClicked}
+            shape={ButtonShape.Pill}
+            size={ButtonSize.Large}
+            text="Neutral Button"
+        />
+        <br />
+        <br />
+        <h2>Icon only</h2>
+        <NeutralButton
+            ariaLabel="Neutral Button"
+            icon={IconName.mdiCardsHeart}
+            onClick={_alertClicked}
+            size={ButtonSize.Large}
+        />
+        <br />
+        <br />
+        <h2>Text + Icon</h2>
+        <NeutralButton
+            ariaLabel="Neutral Button"
+            icon={IconName.mdiCardsHeart}
+            onClick={_alertClicked}
+            size={ButtonSize.Large}
+            text="Neutral Button"
+        />
     </>
 );
 
 export const Toggle: FC<ToggleButtonExampleProps> = ({ checked }) => {
     const [skill1Added, { toggle: set1Added }] = useBoolean(false);
     const [skill2Added, { toggle: set2Added }] = useBoolean(false);
     const [skill3Added, { toggle: set3Added }] = useBoolean(false);
+    const [skill4Added, { toggle: set4Added }] = useBoolean(false);
     return (
         <>
             <h1>Toggle With Text + Icon</h1>
@@ -187,6 +286,17 @@ export const Toggle: FC<ToggleButtonExampleProps> = ({ checked }) => {
                     toggle
                 />
             </span>
+            <span>
+                <NeutralButton
+                    ariaLabel="Neutral Button"
+                    checked={skill4Added || checked}
+                    icon={skill4Added ? IconName.mdiMinus : IconName.mdiPlus}
+                    onClick={set4Added}
+                    size={ButtonSize.Medium}
+                    text="Neutral Button"
+                    toggle
+                />
+            </span>
         </>
     );
 };

packages/octuple/src/components/Button/Button.types.ts

@@ -14,13 +14,19 @@ export enum ButtonWidth {
     fill = 'fill',
 }
 
+export enum ButtonShape {
+    Rectangle = 'rectangle',
+    Pill = 'pill',
+}
+
 export enum ButtonTheme {
     light = 'light',
     dark = 'dark',
 }
 
 export enum ButtonType {
     Default = 'default',
+    Neutral = 'neutral',
     Primary = 'primary',
     Secondary = 'secondary',
 }
@@ -65,6 +71,11 @@ export interface ButtonProps extends NativeButtonProps {
      * @default false
      */
     disruptive?: boolean;
+    /**
+     * The button drop shadow state.
+     * @default false
+     */
+    dropShadow?: boolean;
     /**
      * The button html type.
      */
@@ -90,14 +101,10 @@ export interface ButtonProps extends NativeButtonProps {
      */
     primaryColor?: string;
     /**
-     * The button text.
+     * Shape of the button.
+     * @default ButtonShape.Rectangle
      */
-    text?: string;
-    /**
-     * The button theme.
-     * @default light
-     */
-    theme?: ButtonTheme;
+    shape?: ButtonShape;
     /**
      * The button size.
      * @default ButtonSize.Medium
@@ -120,6 +127,15 @@ export interface ButtonProps extends NativeButtonProps {
      * The button style.
      */
     style?: React.CSSProperties;
+    /**
+     * The button text.
+     */
+    text?: string;
+    /**
+     * The button theme.
+     * @default light
+     */
+    theme?: ButtonTheme;
     /**
      * The button is a toggle button with distinct on and off states.
      */

packages/octuple/src/components/Button/DefaultButton/DefaultButton.tsx

@@ -1,5 +1,11 @@
 import React, { FC, Ref } from 'react';
-import { BaseButton, ButtonProps, ButtonSize, ButtonType } from '../';
+import {
+    ButtonShape,
+    BaseButton,
+    ButtonProps,
+    ButtonSize,
+    ButtonType,
+} from '../';
 import { classNames } from '../../../shared/utilities';
 
 import styles from '../button.module.scss';
@@ -12,12 +18,14 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
             checked = false,
             className,
             disabled = false,
+            dropShadow = false,
             htmlType,
             icon,
             iconColor,
             onClick,
             text,
             theme,
+            shape = ButtonShape.Rectangle,
             size = ButtonSize.Flex,
             style,
             toggle,
@@ -43,10 +51,12 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
                 checked={checked}
                 className={buttonClassNames}
                 disabled={disabled}
+                dropShadow={dropShadow}
                 htmlType={htmlType}
                 icon={icon}
                 iconColor={iconColor}
                 onClick={onClick}
+                shape={shape}
                 size={size}
                 style={style}
                 text={text}

packages/octuple/src/components/Button/NeutralButton/NeutralButton.tsx

@@ -0,0 +1,68 @@
+import React, { FC, Ref } from 'react';
+import {
+    ButtonShape,
+    BaseButton,
+    ButtonProps,
+    ButtonSize,
+    ButtonType,
+} from '../';
+import { classNames } from '../../../shared/utilities';
+
+import styles from '../button.module.scss';
+
+export const NeutralButton: FC<ButtonProps> = React.forwardRef(
+    (
+        {
+            allowDisabledFocus = false,
+            ariaLabel,
+            checked = false,
+            className,
+            disabled = false,
+            dropShadow = false,
+            htmlType,
+            icon,
+            iconColor,
+            onClick,
+            text,
+            theme,
+            shape = ButtonShape.Rectangle,
+            size = ButtonSize.Flex,
+            style,
+            toggle,
+            buttonWidth,
+            ...rest
+        },
+        ref: Ref<HTMLButtonElement>
+    ) => {
+        const buttonClassNames: string = classNames([
+            className,
+            styles.button,
+            styles.buttonNeutral,
+        ]);
+
+        return (
+            <BaseButton
+                {...rest}
+                ref={ref}
+                allowDisabledFocus={allowDisabledFocus}
+                ariaLabel={ariaLabel}
+                checked={checked}
+                className={buttonClassNames}
+                disabled={disabled}
+                dropShadow={dropShadow}
+                htmlType={htmlType}
+                icon={icon}
+                iconColor={iconColor}
+                onClick={onClick}
+                shape={shape}
+                size={size}
+                style={style}
+                text={text}
+                theme={theme}
+                type={ButtonType.Neutral}
+                toggle={toggle}
+                buttonWidth={buttonWidth}
+            />
+        );
+    }
+);