@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Icon/svg/CommentAltCheck.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Svg, SvgProps } from "../../Svg";
+
+export const CommentAltCheck = (props: SvgProps) => {
+  return (
+    <Svg width="30" height="32" viewBox="0 0 30 32" fill="none" {...props}>
+      <path
+        d="M26.133 1.067h-22.4c-2.1 0-3.733 1.692-3.733 3.733v16.8c0 2.1 1.633 3.733 3.733 3.733h5.6v4.9c0 0.583 0.642 0.933 1.108 0.583l7.292-5.483h8.4c2.042 0 3.733-1.633 3.733-3.733v-16.8c0-2.042-1.692-3.733-3.733-3.733zM21.583 10.633l-7.642 7.583c-0.292 0.292-0.7 0.292-0.933 0l-4.433-4.433c-0.233-0.233-0.233-0.642 0-0.933l1.517-1.517c0.292-0.233 0.7-0.233 0.933 0.058l2.45 2.45 5.658-5.6c0.292-0.292 0.7-0.292 0.933 0l1.517 1.517c0.233 0.233 0.233 0.642 0 0.875z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Icon/svg/Folders.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Svg, SvgProps } from "../../Svg";
+
+export const Folders = (props: SvgProps) => {
+  return (
+    <Svg width="18" height="15" viewBox="0 0 18 15" fill="none" {...props}>
+      <path
+        d="M2.625 9.4375V3.75H1.3125C0.574219 3.75 0 4.35156 0 5.0625V12.9375C0 13.6758 0.574219 14.25 1.3125 14.25H12.6875C13.3984 14.25 14 13.6758 14 12.9375V11.625H4.8125C3.58203 11.625 2.625 10.668 2.625 9.4375ZM16.1875 2H10.9375L9.1875 0.25H4.8125C4.07422 0.25 3.5 0.851562 3.5 1.5625V9.4375C3.5 10.1758 4.07422 10.75 4.8125 10.75H16.1875C16.8984 10.75 17.5 10.1758 17.5 9.4375V3.3125C17.5 2.60156 16.8984 2 16.1875 2Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Icon/svg/index.ts

@@ -1,4 +1,8 @@
+export * from "./ArrowToBottom";
+export * from "./BadgeCheck";
+export * from "./CommentAltCheck";
 export * from "./DialogCheck";
+export * from "./Folders";
 export * from "./Scroll";
 export * from "./Sparkle";
 export * from "./Triangle";

package/src/components/Input/Input.story.mdx

@@ -1,8 +1,15 @@
 import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
-import { STATUS_VARIANT } from "../../types";
+import { STATUS_VARIANT, THEME, ORIENTATION } from "../../types";
 import { ICON_TYPE } from "../Icon";
+import { Tooltip } from "../Tooltip";
+import { Stack } from "../Stack";
+import { Label } from "../Label";
 import { Input, INPUT_ICON_POSITION } from "./Input";
 
+export const decorators = [
+  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
+];
+
 <Meta title="Components/Forms/Input" component={Input} />
 
 # Input
@@ -25,20 +32,20 @@ These are the custom props that extend [`React.HTMLProps<HTMLInputElement>`](/?p
 
 <Props of={Input} />
 
-## Demos
+## Product (light) theme
 
 ### Disabled
 
 <Preview>
-  <Story name="Disabled">
-    <Input type="text" disabled />
+  <Story name="Text Input Disabled">
+    <Input type="text" value="Disabled" disabled />
   </Story>
 </Preview>
 
 ### With Placeholder
 
 <Preview>
-  <Story name="Placeholder">
+  <Story name="Text Input Placeholder">
     <Input type="text" placeholder="Placeholder Text" />
   </Story>
 </Preview>
@@ -46,10 +53,10 @@ These are the custom props that extend [`React.HTMLProps<HTMLInputElement>`](/?p
 ### With Icon
 
 <Preview isColumn>
-  <Story name="Icon Left">
+  <Story name="Text Input Icon Left">
     <Input type="text" icon={ICON_TYPE.SEARCH} placeholder="Left" />
   </Story>
-  <Story name="Icon Right">
+  <Story name="Text Input Icon Right">
     <Input
       type="text"
       icon={ICON_TYPE.SEARCH}
@@ -57,10 +64,10 @@ These are the custom props that extend [`React.HTMLProps<HTMLInputElement>`](/?p
       placeholder="Right"
     />
   </Story>
-  <Story name="Loading Icon">
+  <Story name="Text Input Loading Icon">
     <Input
       type="text"
-      icon={ICON_TYPE.SPINNER_THIRD}
+      icon={ICON_TYPE.SPINNER}
       iconPosition={INPUT_ICON_POSITION.RIGHT}
       iconProps={{
         spin: true,
@@ -73,13 +80,13 @@ These are the custom props that extend [`React.HTMLProps<HTMLInputElement>`](/?p
 ### Variants
 
 <Preview isColumn>
-  <Story name="Success">
+  <Story name="Text Input Success">
     <Input type="text" variant={STATUS_VARIANT.SUCCESS} />
   </Story>
-  <Story name="Warning">
+  <Story name="Text Input Warning">
     <Input type="text" variant={STATUS_VARIANT.WARNING} />
   </Story>
-  <Story name="Danger">
+  <Story name="Text Input Danger">
     <Input type="text" variant={STATUS_VARIANT.DANGER} />
   </Story>
 </Preview>
@@ -87,7 +94,186 @@ These are the custom props that extend [`React.HTMLProps<HTMLInputElement>`](/?p
 ### Monospace
 
 <Preview>
-  <Story name="Monospace">
+  <Story name="Text Input Monospace">
     <Input type="text" placeholder="Monospace font" className="font-mono" />
   </Story>
 </Preview>
+
+### With a tooltip
+
+The tooltip makes uses of `onFocus` and `onBlur` on the reference element to
+show or hide the popover. This demo shows how you can pass through custom
+`onFocus` and `onBlur` events to the reference element.
+
+<Preview>
+  <Story name="Text Input tooltip">
+    <Tooltip
+      placement="top"
+      referenceElement={
+        <Input
+          type="text"
+          onFocus={() => console.log("onFocus from input")}
+          onBlur={() => console.log("onBlur from input")}
+        />
+      }
+    >
+      Please don’t leave me blank
+    </Tooltip>
+  </Story>
+</Preview>
+
+### Applying classnames
+
+The `className` prop when set, will apply styles to the input element. However,
+when you pass an icon with the Input, an extra wrapping `div` is added. To
+control the styles of the wrapping `div`, you will need to set
+`wrapperClassName`.
+
+Both classname props can work together. Note that `wrapperClassName` only works
+when there’s an icon.
+
+<Preview>
+  <Story name="Text Input classnames">
+    <Stack orientation={ORIENTATION.VERTICAL}>
+      <Label htmlFor="input-1">
+        Input with icon, className and wrapperClassName
+      </Label>
+      <Input
+        id="input-1"
+        className="bg-gray-300 border-gray-300"
+        wrapperClassName="w-1/2"
+        icon={ICON_TYPE.CHECK}
+        iconPosition={INPUT_ICON_POSITION.RIGHT}
+        iconProps={{
+          className: "text-brandGreen-400",
+        }}
+        type="text"
+      />
+      <Label htmlFor="input-2">Input without icon and className</Label>
+      <Input
+        id="input-2"
+        className="bg-gray-300 border-gray-300 w-1/2"
+        type="text"
+      />
+      <Label htmlFor="input-2">Input disabled</Label>
+      <Input
+        id="input-2"
+        className="bg-gray-300 border-gray-300 w-1/2"
+        type="text"
+        disabled
+      />
+    </Stack>
+  </Story>
+</Preview>
+
+## Brand (dark) theme
+
+By passing `theme="brand"` to the component, you will get a dark themed input.
+Supported functionaliy for the dark (brand) theme input is shown below. If an
+input is within a dark (brand) themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will inherit its theme.
+To override this, provide a value to the input's `theme` prop.
+
+### Default
+
+<Preview>
+  <Story name="Text Input Dark" decorators={decorators}>
+    <Input type="text" theme={THEME.BRAND} />
+  </Story>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <Story name="Text Input Disabled Dark" decorators={decorators}>
+    <Input type="text" theme={THEME.BRAND} value="Disabled" disabled />
+  </Story>
+</Preview>
+
+### With Placeholder
+
+<Preview>
+  <Story name="Text Input Placeholder Dark" decorators={decorators}>
+    <Input type="text" theme={THEME.BRAND} placeholder="Placeholder Text" />
+  </Story>
+</Preview>
+
+### With Icon
+
+<Preview isColumn>
+  <Story name="Text Input Icon Left Dark" decorators={decorators}>
+    <Input
+      type="text"
+      theme={THEME.BRAND}
+      icon={ICON_TYPE.SEARCH}
+      placeholder="Left"
+    />
+  </Story>
+  <Story name="Text Input Icon Right Dark" decorators={decorators}>
+    <Input
+      type="text"
+      theme={THEME.BRAND}
+      icon={ICON_TYPE.SEARCH}
+      iconPosition={INPUT_ICON_POSITION.RIGHT}
+      placeholder="Right"
+    />
+  </Story>
+  <Story name="Text Input Loading Icon Dark" decorators={decorators}>
+    <Input
+      type="text"
+      theme={THEME.BRAND}
+      icon={ICON_TYPE.SPINNER}
+      iconPosition={INPUT_ICON_POSITION.RIGHT}
+      iconProps={{
+        spin: true,
+      }}
+      placeholder="Loading…"
+    />
+  </Story>
+</Preview>
+
+### Variants
+
+<Preview isColumn>
+  <Story name="Text Input Success Dark" decorators={decorators}>
+    <Input type="text" theme={THEME.BRAND} variant={STATUS_VARIANT.SUCCESS} />
+  </Story>
+  <Story name="Text Input Warning Dark" decorators={decorators}>
+    <Input type="text" theme={THEME.BRAND} variant={STATUS_VARIANT.WARNING} />
+  </Story>
+  <Story name="Text Input Danger Dark" decorators={decorators}>
+    <Input type="text" theme={THEME.BRAND} variant={STATUS_VARIANT.DANGER} />
+  </Story>
+</Preview>
+
+### Monospace
+
+<Preview>
+  <Story name="Text Input Monospace Dark" decorators={decorators}>
+    <Input
+      type="text"
+      theme={THEME.BRAND}
+      placeholder="Monospace font"
+      className="font-mono"
+    />
+  </Story>
+</Preview>
+
+### With a tooltip
+
+<Preview>
+  <Story name="Text Input Tooltip Dark" decorators={decorators}>
+    <Tooltip
+      placement="top"
+      referenceElement={
+        <Input
+          type="text"
+          theme={THEME.BRAND}
+          onFocus={() => console.log("onFocus from input")}
+          onBlur={() => console.log("onBlur from input")}
+        />
+      }
+    >
+      Please don’t leave me blank
+    </Tooltip>
+  </Story>
+</Preview>

package/src/components/Input/Input.tsx

@@ -9,7 +9,7 @@ import { FormGroupContext } from "../FormGroup/FormGroupContext";
 import { bem } from "../../utilities/bem";
 import { STATUS_VARIANT, THEME } from "../../types";
 import { Box } from "../Box";
-import { Icon, SharedFaIconProps, ICON_TYPE } from "../Icon";
+import { Icon, SharedFaIconProps, IconType } from "../Icon";
 
 export enum INPUT_ICON_POSITION {
   LEFT = "left",
@@ -21,11 +21,33 @@ const cn = "TextInput";
 export interface InputBaseProps {
   ref?: any;
   as?: any;
+  /**
+   * Variant changes the border color of the input
+   */
   variant?: STATUS_VARIANT;
+  /**
+   * @deprecated
+   * Choose with theme to use; product (light) or brand (dark)
+   */
   theme?: THEME;
-  icon?: ICON_TYPE;
+  /**
+   * Icon type enum to be placed inside of the input’s bounding box
+   */
+  icon?: IconType;
+  /**
+   * Determine which side to put the icon
+   */
   iconPosition?: INPUT_ICON_POSITION;
+  /**
+   * Additional props for the icon
+   */
   iconProps?: SharedFaIconProps;
+  /**
+   * When you use an icon along with the input, a wrapping div is added
+   * around the input. If you need to apply specific styles on the wrapper,
+   * then you will need to use `wrapperClassName`.
+   */
+  wrapperClassName?: string;
 }
 
 export interface InputProps
@@ -40,13 +62,15 @@ const Input: ForwardRefExoticComponent<InputProps> = forwardRef<
     {
       as: Component = "input",
       className,
+      wrapperClassName,
       icon,
       iconPosition = INPUT_ICON_POSITION.LEFT,
-      iconProps,
+      iconProps = {},
       id: idProp,
       type,
       variant: variantProp = STATUS_VARIANT.DEFAULT,
       theme: themeProp,
+      disabled,
       ...rest
     },
     ref,
@@ -67,14 +91,21 @@ const Input: ForwardRefExoticComponent<InputProps> = forwardRef<
       isTextInput && bem(cn),
       bem(cn, { m: variant }),
       bem(cn, { m: theme }),
+      disabled && bem(cn, { m: "disabled" }),
       icon && bem(cn, { m: `icon-${iconPosition}` }),
-      !icon && className,
+      className,
+    );
+
+    const wrapperClasses = classNames(
+      bem(cn, { e: "wrapper" }),
+      wrapperClassName,
     );
 
-    const wrapperClasses = classNames(bem(cn, { e: "wrapper" }), className);
+    const { className: iconClassName, ...iconPropsRest } = iconProps;
     const iconClasses = classNames(
       bem(cn, { e: "icon" }),
       bem(cn, { e: "icon", m: iconPosition }),
+      iconClassName,
     );
 
     return isTextInput && icon ? (
@@ -84,9 +115,10 @@ const Input: ForwardRefExoticComponent<InputProps> = forwardRef<
           className={inputClasses}
           id={id}
           type={type}
+          disabled={disabled}
           {...rest}
         />
-        <Icon icon={icon} className={iconClasses} {...iconProps} />
+        <Icon icon={icon} className={iconClasses} {...iconPropsRest} />
       </Box>
     ) : (
       <Component
@@ -94,6 +126,7 @@ const Input: ForwardRefExoticComponent<InputProps> = forwardRef<
         className={inputClasses}
         id={id}
         type={type}
+        disabled={disabled}
         {...rest}
       />
     );

package/src/components/Input/brand.css

@@ -1,21 +1,15 @@
-.ads-TextInput--brand.ads-TextInput {
+.ads-TextInput--brand {
   @apply border-transparent
     bg-gray-900
     text-white;
 }
 
-.ads-TextInput--brand.ads-TextInput:focus:not(:disabled) {
-  @apply outline-none
-    border-brandGreen-400
-    shadow-focusBrand;
-}
-
-.ads-TextInput--brand.ads-TextInput::placeholder {
+.ads-TextInput--brand::placeholder {
   @apply text-gray-500;
 }
 
-/* Disabled */
-
-.ads-TextInput--brand.ads-TextInput:disabled {
-  @apply text-gray-600;
+.ads-TextInput--brand.ads-TextInput--disabled {
+  @apply border-transparent
+    bg-gray-900
+    text-gray-600;
 }

package/src/components/Input/index.css

@@ -63,3 +63,17 @@
 .ads-TextInput--multiline-resizable {
   @apply min-h-20;
 }
+
+/* Variants */
+
+.ads-TextInput--success {
+  @apply border-success;
+}
+
+.ads-TextInput--warning {
+  @apply border-caution;
+}
+
+.ads-TextInput--danger {
+  @apply border-failure;
+}

package/src/components/Input/product.css

@@ -1,60 +1,18 @@
-.ads-TextInput--product.ads-TextInput {
-  @apply text-gray-700;
-}
-
-.ads-TextInput--product.ads-TextInput:focus {
-  @apply outline-none
-    shadow-focus;
+.ads-TextInput--product {
+  @apply border-gray-500
+    bg-white
+    text-gray-700;
 }
 
-.ads-TextInput--product.ads-TextInput::placeholder {
+.ads-TextInput--product::placeholder {
   @apply text-placeholder;
 }
 
-/* Default Variant */
-
-.ads-TextInput--product.ads-TextInput--default {
-  @apply border-gray-500;
-}
-
-.ads-TextInput--product.ads-TextInput--default:focus {
-  @apply border-gray-600;
-}
-
-/* Success Variant */
-
-.ads-TextInput--product.ads-TextInput--success {
-  @apply border-success;
-}
-
-.ads-TextInput--product.ads-TextInput--success:focus {
-  @apply border-green-500;
-}
-
-/* Warning Variant */
-
-.ads-TextInput--product.ads-TextInput--warning {
-  @apply border-caution;
-}
-
-.ads-TextInput--product.ads-TextInput--warning:focus {
-  @apply border-caution;
-}
-
-/* Danger Variant */
-
-.ads-TextInput--product.ads-TextInput--danger {
-  @apply border-failure;
-}
-
-.ads-TextInput--product.ads-TextInput--danger:focus {
-  @apply border-red-500;
-}
-
-/* Disabled */
-
-.ads-TextInput--product.ads-TextInput:disabled {
+/* Not using :disabled pseudo-class here for specificity reasons */
+/* Not qualifying with the --product modifier for specificity reasons */
+.ads-TextInput--disabled {
   @apply bg-gray-200
     border-gray-400
-    text-gray-700;
+    text-gray-700
+    cursor-not-allowed;
 }

package/src/components/Kbd/Kbd.story.mdx

@@ -0,0 +1,44 @@
+import {
+  Meta,
+  Preview,
+  Props,
+  Story,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { ComponentHeading } from "../../storybook-components";
+import { Icon, ICON_TYPE } from "../..";
+import { Kbd } from "./Kbd";
+
+<Meta title="Components/Data/Kbd" component={Kbd} />
+
+<ComponentHeading
+  componentName="Kbd"
+  description="Kbd represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device"
+  sourcePath="src/components/Kbd/Kbd.tsx"
+/>
+
+```jsx
+import { Kbd } from "@conveyorhq/arrow-ds";
+```
+
+<Preview>
+  <Story name="Kbd">
+    <Kbd>Space</Kbd>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Kbd} />
+
+## Demos
+
+### Using an Icon
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Kbd with an icon">
+    <Kbd>
+      <Icon icon={ICON_TYPE.CARET_UP} />
+    </Kbd>
+  </Story>
+</Preview>

package/src/components/Kbd/Kbd.tsx

@@ -0,0 +1,11 @@
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+import { bemHOF } from "../../utilities/bem";
+
+const cn = bemHOF("Kbd");
+
+export type KbdProps = HTMLAttributes<HTMLElement>;
+
+export const Kbd = ({ className, ...rest }: KbdProps) => {
+  return <kbd className={classNames(cn(), className)} {...rest} />;
+};

package/src/components/Kbd/index.css

@@ -0,0 +1,17 @@
+.ads-Kbd {
+  @apply text-h5
+      text-gray-700
+      bg-gray-100
+      border
+      border-gray-400
+      rounded-md
+      leading-none
+      inline-flex
+      items-center;
+
+  padding: 2px 5px;
+}
+
+.ads-Kbd .svg-inline--fa {
+  width: auto !important;
+}

package/src/components/Kbd/index.ts

@@ -0,0 +1 @@
+export * from "./Kbd";

package/src/components/Link/index.css

@@ -8,16 +8,10 @@
 }
 
 .ads-Link:hover,
-.ads-Link:active,
-.ads-Link:focus {
+.ads-Link:active {
   @apply text-blue-500;
 }
 
-.ads-Link:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-Link.isDisabled {
   @apply text-gray-500
     no-underline
@@ -30,8 +24,7 @@
 }
 
 .ads-Link--danger:hover,
-.ads-Link--danger:active,
-.ads-Link--danger:focus {
+.ads-Link--danger:active {
   @apply text-failure;
 }
 
@@ -43,9 +36,7 @@
 .ads-Link--warning:hover,
 .ads-Link--default:hover,
 .ads-Link--warning:active,
-.ads-Link--default:active,
-.ads-Link--warning:focus,
-.ads-Link--default:focus {
+.ads-Link--default:active {
   @apply text-gray-600;
 }
 
@@ -54,7 +45,6 @@
 }
 
 .ads-Link--success:hover,
-.ads-Link--success:active,
-.ads-Link--success:focus {
+.ads-Link--success:active {
   @apply text-success;
 }