@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

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,21 @@
-.ads-TextInput--brand.ads-TextInput {
+.ads-TextInput--brand {
   @apply border-transparent
     bg-gray-900
     text-white;
 }
 
-.ads-TextInput--brand.ads-TextInput:focus:not(:disabled) {
+.ads-TextInput--brand:focus {
   @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,33 @@
 .ads-TextInput--multiline-resizable {
   @apply min-h-20;
 }
+
+/* Success Variant */
+
+.ads-TextInput--success {
+  @apply border-success;
+}
+
+.ads-TextInput--success:focus {
+  @apply border-green-500;
+}
+
+/* Warning Variant */
+
+.ads-TextInput--warning {
+  @apply border-caution;
+}
+
+.ads-TextInput--warning:focus {
+  @apply border-caution;
+}
+
+/* Danger Variant */
+
+.ads-TextInput--danger {
+  @apply border-failure;
+}
+
+.ads-TextInput--danger:focus {
+  @apply border-red-500;
+}

package/src/components/Input/product.css

@@ -1,60 +1,24 @@
-.ads-TextInput--product.ads-TextInput {
-  @apply text-gray-700;
+.ads-TextInput--product {
+  @apply border-gray-500
+    bg-white
+    text-gray-700;
 }
 
-.ads-TextInput--product.ads-TextInput:focus {
+.ads-TextInput--product:focus {
   @apply outline-none
+    border-gray-600
     shadow-focus;
 }
 
-.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/Loading/Loading.story.mdx

@@ -1,4 +1,10 @@
-import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
+import {
+  Meta,
+  Preview,
+  Story,
+  SourceState,
+  Props,
+} from "@storybook/addon-docs/blocks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import { Loading } from "./Loading";
@@ -17,16 +23,17 @@ Loading provides a loading animation.
 import { Loading } from "@conveyorhq/arrow-ds";
 ```
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading">
     <Loading />
   </Story>
 </Preview>
 
-## Custom Props
+## Props
 
-There are no custom props for this component. The props extend
-[`BoxProps`](/?path=/docs/components-box--box#all-props).
+Inherits props of [ConveyorLogo](/docs/components-logos-conveyor-logo--logo).
+
+<Props of={Loading} />
 
 ## Demos
 
@@ -35,7 +42,7 @@ There are no custom props for this component. The props extend
 This example shows how you can center the loader in both directions within a
 larger container using flexbox.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading centering demo with flexbox">
     <ExampleContainer>
       <Flex className="w-full h-full items-center justify-center">
@@ -48,7 +55,7 @@ larger container using flexbox.
 If you don’t need to center the loading component vertically, you can use margin
 to center it horizontally.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading centering demo">
     <ExampleContainer>
       <Loading className="mx-auto" />
@@ -60,7 +67,7 @@ to center it horizontally.
 
 This example shows how you can add text above the loader while centering both.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading with text">
     <ExampleContainer>
       <Flex className="w-full h-full items-center justify-center flex-col">
@@ -78,7 +85,7 @@ This example shows how you can add text above the loader while centering both.
 This example shows how you can change the color of the loader when using on a
 dark background.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading on a dark background">
     <ExampleContainer>
       <Flex className="w-full h-full items-center justify-center flex-col bg-gray-900">

package/src/components/Loading/Loading.tsx

@@ -1,17 +1,26 @@
 import React from "react";
 import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
+import { THEME } from "../../types";
+import { ConveyorLogo, ConveyorLogoProps } from "../ConveyorLogo";
 
 const cn = "Loading";
 
-export const Loading = ({ className, ...rest }: BoxProps) => {
+export type LoadingProps = Omit<ConveyorLogoProps, "variant">;
+
+export const Loading = ({
+  theme = THEME.BRAND,
+  height = 40,
+  className,
+  ...rest
+}: LoadingProps) => {
   return (
-    <Box className={classNames(bem(cn), className)} {...rest}>
-      <Box />
-      <Box />
-      <Box />
-      <Box />
-    </Box>
+    <ConveyorLogo
+      className={classNames(bem(cn), className)}
+      variant="icon"
+      height={height}
+      theme={theme}
+      {...rest}
+    />
   );
 };

package/src/components/Loading/index.css

@@ -1,69 +1,3 @@
 .ads-Loading {
-  @apply relative
-    w-10
-    h-10
-    text-gray-800;
-}
-
-.ads-Loading > div {
-  @apply float-left
-    relative;
-
-  width: 50%;
-  height: 50%;
-}
-
-.ads-Loading > div::before {
-  @apply absolute
-    top-0
-    left-0
-    w-full
-    h-full;
-
-  animation: fold 2.4s infinite linear both;
-  background-color: currentColor;
-  content: "";
-  transform-origin: 100% 100%;
-}
-
-.ads-Loading > div:nth-child(2) {
-  transform: rotateZ(90deg);
-}
-
-.ads-Loading > div:nth-child(4) {
-  transform: rotateZ(180deg);
-}
-
-.ads-Loading > div:nth-child(3) {
-  transform: rotateZ(270deg);
-}
-
-.ads-Loading > div:nth-child(2)::before {
-  animation-delay: 0.3s;
-}
-
-.ads-Loading > div:nth-child(4)::before {
-  animation-delay: 0.6s;
-}
-
-.ads-Loading > div:nth-child(3)::before {
-  animation-delay: 0.9s;
-}
-
-@keyframes fold {
-  0%,
-  10% {
-    transform: perspective(140px) rotateX(-180deg);
-    opacity: 0;
-  }
-  25%,
-  75% {
-    transform: perspective(140px) rotateX(0deg);
-    opacity: 1;
-  }
-  90%,
-  100% {
-    transform: perspective(140px) rotateY(180deg);
-    opacity: 0;
-  }
+  animation: spin 1.8s infinite linear both;
 }