@hyphen/hyphen-components 2.9.0

package/src/components/TextInput/TextInput.module.scss

@@ -0,0 +1,405 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+@mixin size-sm {
+  border-radius: var(
+    --form-control-size-sm-border-radius,
+    var(--INTERNAL_form-control-size-sm-border-radius)
+  );
+  font-size: var(
+    --form-control-size-sm-font-size,
+    var(--INTERNAL_form-control-size-sm-font-size)
+  );
+
+  > input {
+    padding: var(
+      --form-control-size-sm-padding,
+      var(--INTERNAL_form-control-size-sm-padding)
+    );
+    border-radius: var(
+      --form-control-size-sm-border-radius,
+      var(--INTERNAL_form-control-size-sm-border-radius)
+    );
+  }
+
+  .prefix {
+    padding: var(
+      --form-control-size-sm-padding,
+      var(--INTERNAL_form-control-size-sm-padding)
+    );
+  }
+
+  .suffix {
+    padding: var(
+      --form-control-size-sm-padding,
+      var(--INTERNAL_form-control-size-sm-padding)
+    );
+  }
+
+  .clear-button {
+    padding: var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+      var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+      var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+      0;
+  }
+
+  &:not(.is-clearable) {
+    .suffix {
+      padding: var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      );
+    }
+  }
+}
+
+%size-sm {
+  @include size-sm;
+}
+
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  border-radius: var(
+    --form-control-size-md-border-radius,
+    var(--INTERNAL_form-control-size-md-border-radius)
+  );
+  font-size: var(
+    --form-control-size-md-font-size,
+    var(--INTERNAL_form-control-size-md-font-size)
+  );
+
+  > input {
+    padding: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
+  }
+
+  .prefix {
+    padding: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
+  }
+
+  .suffix {
+    padding: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
+  }
+
+  .clear-button {
+    padding: var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      )
+      var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      )
+      var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      )
+      0;
+  }
+
+  &:not(.is-clearable) {
+    .suffix {
+      padding: var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      );
+    }
+  }
+}
+
+%size-md {
+  @include size-md;
+}
+
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  border-radius: var(
+    --form-control-size-lg-border-radius,
+    var(--INTERNAL_form-control-size-lg-border-radius)
+  );
+  font-size: var(
+    --form-control-size-lg-font-size,
+    var(--INTERNAL_form-control-size-lg-font-size)
+  );
+
+  > input {
+    padding: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+  }
+
+  .prefix {
+    padding: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
+  }
+
+  .suffix {
+    padding: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
+  }
+
+  .clear-button {
+    padding: var(
+        --form-control-size-lg-padding,
+        var(--INTERNAL_form-control-size-lg-padding)
+      )
+      var(
+        --form-control-size-lg-padding,
+        var(--INTERNAL_form-control-size-lg-padding)
+      )
+      var(
+        --form-control-size-lg-padding,
+        var(--INTERNAL_form-control-size-lg-padding)
+      )
+      0;
+  }
+}
+
+%size-lg {
+  @include size-lg;
+}
+
+.size-lg {
+  @extend %size-lg;
+}
+
+// https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
+%disabled-base {
+  background-color: var(
+    --form-control-background-color-disabled,
+    var(--INTERNAL_form-control-background-color-disabled)
+  );
+  color: var(
+    --form-control-font-color-disabled,
+    var(--INTERNAL_form-control-font-color-disabled)
+  );
+  -webkit-text-fill-color: var(
+    --form-control-font-color-disabled,
+    var(--INTERNAL_form-control-font-color-disabled)
+  );
+  opacity: 1;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.text-input-wrapper {
+  border: 1px solid
+    var(--form-control-border-color, var(--INTERNAL_form-control-border-color));
+  font-family: var(
+    --form-control-font-family,
+    var(--INTERNAL_form-control-font-family)
+  );
+  position: relative;
+  background-color: var(
+    --form-control-background-color,
+    var(--INTERNAL_form-control-background-color)
+  );
+
+  &.size-sm {
+    @extend %size-sm;
+  }
+
+  &.size-md {
+    @extend %size-md;
+  }
+
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-sm-tablet {
+      @include size-sm;
+    }
+
+    &.size-md-tablet {
+      @include size-md;
+    }
+
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-sm-desktop {
+      @include size-sm;
+    }
+
+    &.size-md-desktop {
+      @include size-md;
+    }
+
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-sm-hd {
+      @include size-sm;
+    }
+
+    &.size-md-hd {
+      @include size-md;
+    }
+
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+
+  // border and background is set on the text-input-wrapper
+  > input {
+    border: none;
+    box-sizing: border-box;
+    display: flex;
+    transition-duration: 300ms;
+    transition-property: border, background-color;
+    transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
+    background-color: transparent;
+    width: 100%;
+    line-height: var(
+      --form-control-line-height,
+      var(--INTERNAL_form-control-line-height)
+    );
+    color: var(
+      --form-control-font-color,
+      var(--INTERNAL_form-control-font-color)
+    );
+
+    &::placeholder {
+      opacity: 1;
+      color: var(
+        --form-control-placeholder-color,
+        var(--INTERNAL_form-control-placeholder-color)
+      );
+    }
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+
+    &:disabled {
+      @extend %disabled-base;
+
+      background-color: transparent;
+    }
+  }
+
+  &.error {
+    background-color: var(
+      --form-control-background-color-error,
+      var(--INTERNAL_form-control-background-color-error)
+    );
+
+    &:focus-within {
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
+      );
+    }
+
+    input:focus {
+      outline: none;
+      background-color: transparent;
+    }
+  }
+
+  //Necessary so that inset shadow that we use for border does not get covered by child elements.
+  &:not(.error) {
+    > * {
+      &:focus,
+      &.disabled {
+        &:not(input) {
+          box-shadow: inset 0 1px 0 0
+              var(
+                --form-control-box-shadow-focus,
+                var(--INTERNAL_form-control-box-shadow-focus)
+              ),
+            inset 0 -1px 0 0 var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+        }
+      }
+    }
+  }
+
+  &:focus-within {
+    outline: none;
+    border-color: var(--color-border-active);
+    box-shadow: var(
+      --form-control-box-shadow-focus,
+      var(--INTERNAL_form-control-box-shadow-focus)
+    );
+  }
+
+  &.disabled {
+    @extend %disabled-base;
+  }
+
+  // Reset default button styles
+  .clear-button {
+    transition-duration: 0.2s;
+    transition-property: color;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    cursor: pointer;
+    color: var(
+      --form-control-icon-color,
+      var(--INTERNAL_form-control-icon-color)
+    );
+    font-style: inherit;
+
+    &:hover {
+      color: var(
+        --form-control-icon-hover-color,
+        var(--INTERNAL_form-control-icon-hover-color)
+      );
+    }
+  }
+}
+
+.text-input-label {
+  margin-bottom: var(
+    --form-control-label-margin,
+    var(--INTERNAL_form-control-label-margin)
+  );
+}

package/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,268 @@
+import type { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+import { TextInput } from './TextInput';
+import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
+
+const meta: Meta<typeof TextInput> = {
+  title: 'Components/TextInput',
+  component: TextInput,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const Basic = () => (
+  <TextInput id="demo" label="TextInput Label" onChange={() => {}} value="" />
+);
+
+export const Examples = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="default"
+      value={value}
+      label="TextInput Label"
+      onChange={(event) => setValue(event.target.value)}
+    />
+  );
+};
+
+export const Required = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="required"
+      value={value}
+      label="Required Text Input"
+      onChange={(event) => setValue(event.target.value)}
+      isRequired
+    />
+  );
+};
+
+export const CustomRequiredIndicator = () => {
+  const [value, setValue] = useState('');
+  const [value2, setValue2] = useState('');
+  return (
+    <Box gap="md">
+      <TextInput
+        id="requiredWithoutIndicator"
+        label="Required Without Indicator"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        isRequired
+        requiredIndicator={null}
+      />
+      <TextInput
+        id="requiredCustomIndicator"
+        label="Required Custom Indicator"
+        value={value2}
+        onChange={(event) => setValue2(event.target.value)}
+        isRequired
+        requiredIndicator=" (required)"
+      />
+    </Box>
+  );
+};
+
+export const WithHelpText = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="helpText"
+      value={value}
+      label="Mobile Phone"
+      helpText="We willl use this phone number to contact you via text"
+      onChange={(event) => setValue(event.target.value)}
+    />
+  );
+};
+
+export const Placeholder = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="placeholder"
+      value={value}
+      label="TextInput with placeholder"
+      onChange={(event) => setValue(event.target.value)}
+      placeholder="Custom placeholder..."
+    />
+  );
+};
+
+export const Autofocus = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="autofocus"
+      value={value}
+      label="Label"
+      onChange={(event) => setValue(event.target.value)}
+      autoFocus
+    />
+  );
+};
+
+export const HiddenLabel = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="hiddenLabel"
+      value={value}
+      label="Hidden Label"
+      onChange={(event) => setValue(event.target.value)}
+      hideLabel
+    />
+  );
+};
+
+export const Disabled = () => {
+  const [value, setValue] = useState('Preset value');
+  return (
+    <TextInput
+      id="disabledWithValue"
+      value={value}
+      label="Label"
+      onChange={(event) => setValue(event.target.value)}
+      isDisabled
+    />
+  );
+};
+
+export const PrefixAndSuffix = () => {
+  const [prefixValue1, setPrefixValue1] = useState('');
+  const [prefixValue2, setPrefixValue2] = useState('49');
+  const [prefixValue3, setPrefixValue3] = useState('');
+  const [prefixValue4, setPrefixValue4] = useState('Pre-populated Value');
+  return (
+    <Box gap="md">
+      <TextInput
+        id="prefixSuffix1"
+        value={prefixValue1}
+        label="Prefix"
+        onChange={(event) => setPrefixValue1(event.target.value)}
+        prefix="@"
+      />
+      <TextInput
+        id="prefixSuffix2"
+        value={prefixValue2}
+        label="Prefix and Suffix"
+        onChange={(event) => setPrefixValue2(event.target.value)}
+        prefix="$"
+        suffix="per month"
+      />
+      <TextInput
+        id="prefixSuffix3"
+        value={prefixValue3}
+        label="Suffix"
+        placeholder="Contact name"
+        onChange={(event) => setPrefixValue3(event.target.value)}
+        suffix={<Icon name="user" />}
+      />
+      <TextInput
+        id="prefixSuffix4"
+        value={prefixValue4}
+        label="Suffix with Clear"
+        placeholder="Contact name"
+        onChange={(event) => setPrefixValue4(event.target.value)}
+        onClear={() => setPrefixValue4('')}
+        suffix={<Icon name="search" />}
+      />
+    </Box>
+  );
+};
+
+export const Clearable = () => {
+  const [value, setValue] = useState('clear me');
+  return (
+    <TextInput
+      id="required"
+      value={value}
+      label="Label"
+      onChange={(event) => setValue(event.target.value)}
+      onClear={() => setValue('')}
+      isRequired
+    />
+  );
+};
+
+export const Sizes = () => {
+  const [value, setValue] = useState('');
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  const [valueResponsive, setValueResponsive] = useState('');
+  return (
+    <Box
+      direction={{
+        base: 'column',
+      }}
+      gap={{
+        base: 'sm',
+        tablet: 'md',
+        desktop: 'lg',
+        hd: 'lg',
+      }}
+      width="100%"
+    >
+      <TextInput
+        id="sizeSmall"
+        value={value}
+        label="Small Size"
+        size="sm"
+        onChange={(event) => setValue(event.target.value)}
+      />
+      <TextInput
+        id="sizeMedium"
+        value={value1}
+        label="Medium Size"
+        onChange={(event) => setValue1(event.target.value)}
+      />
+      <TextInput
+        id="sizeLarge"
+        value={value2}
+        label="Large Size"
+        size="lg"
+        onChange={(event) => setValue2(event.target.value)}
+      />
+      <TextInput
+        id="responsiveSize"
+        value={valueResponsive}
+        label="Responsive Size"
+        size={{ base: 'sm', tablet: 'md', desktop: 'lg' }}
+        onChange={(event) => setValueResponsive(event.target.value)}
+      />
+    </Box>
+  );
+};
+
+export const MaxLength = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="maxLength"
+      value={value}
+      label="Label"
+      maxLength={5}
+      onChange={(event) => setValue(event.target.value)}
+      placeholder="Can't enter more than 5 characters..."
+    />
+  );
+};
+
+export const ValidationError = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput
+      id="requiredWithValidationMessage"
+      value={value}
+      label="Label"
+      onChange={(event) => setValue(event.target.value)}
+      isRequired
+      error="Helpful validation message"
+    />
+  );
+};