@hyphen/hyphen-components 2.9.0

package/src/components/TextareaInputInset/TextareaInputInset.module.scss

@@ -0,0 +1,337 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+@mixin floating-label-minimize-md {
+  opacity: 0.75;
+  transform: scale(0.6875) translateY(-0.25rem) translateX(0.15rem);
+}
+
+@mixin floating-label-minimize-lg {
+  opacity: 0.75;
+  transform: scale(0.75) translateY(-0.25rem) translateX(0.15rem);
+}
+
+@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)
+  );
+
+  .text-input-label {
+    padding: calc(
+      var(
+          --form-control-size-md-padding,
+          var(--INTERNAL_form-control-size-md-padding)
+        ) + 1px
+    );
+  }
+
+  textarea {
+    padding: calc(
+        var(
+            --form-control-size-lg-padding,
+            var(--INTERNAL_form-control-size-lg-padding)
+          ) + 12px
+      )
+      var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      )
+      calc(
+        var(
+            --form-control-size-md-padding,
+            var(--INTERNAL_form-control-size-md-padding)
+          ) - 6px
+      )
+      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)
+    );
+
+    &:focus {
+      + .text-input-label {
+        @include floating-label-minimize-md;
+      }
+    }
+
+    &:not(:placeholder-shown) ~ label {
+      @include floating-label-minimize-md;
+    }
+  }
+}
+
+%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)
+  );
+
+  .text-input-label {
+    padding: calc(
+      var(
+          --form-control-size-lg-padding,
+          var(--INTERNAL_form-control-size-lg-padding)
+        ) + 4px
+    );
+  }
+
+  textarea {
+    padding: calc(
+        var(
+            --form-control-size-lg-padding,
+            var(--INTERNAL_form-control-size-lg-padding)
+          ) + 16px
+      )
+      var(
+        --form-control-size-lg-padding,
+        var(--INTERNAL_form-control-size-lg-padding)
+      )
+      calc(
+        var(
+            --form-control-size-lg-padding,
+            var(--INTERNAL_form-control-size-lg-padding)
+          ) - 6px
+      )
+      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)
+    );
+
+    &:focus {
+      + .text-input-label {
+        @include floating-label-minimize-lg;
+      }
+    }
+
+    &:not(:placeholder-shown) ~ label {
+      @include floating-label-minimize-lg;
+    }
+  }
+}
+
+%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-label {
+  position: absolute;
+  top: 0;
+  font-size: 1rem;
+  transform-origin: 0 0;
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+  font-weight: --form-control-label-font-weight,
+    var(--INTERNAL_form-control-label-font-weigh);
+  color: --form-control-label-font-color,
+    var(--INTERNAL_form-control-label-font-color);
+  cursor: text;
+  white-space: nowrap;
+}
+
+.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;
+
+  &.size-md {
+    @extend %size-md;
+  }
+
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-md-tablet {
+      @include size-md;
+    }
+
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-md-desktop {
+      @include size-md;
+    }
+
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-md-hd {
+      @include size-md;
+    }
+
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+
+  textarea {
+    box-sizing: border-box;
+    transition-duration: 300ms;
+    transition-property: border, background-color;
+    transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
+    border: none;
+    background-color: var(
+      --form-control-background-color,
+      var(--INTERNAL_form-control-background-color)
+    );
+    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 {
+      color: transparent;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(
+        --form-control-border-color-focus,
+        var(--INTERNAL_form-control-border-color-focus)
+      );
+      box-shadow: var(
+          --form-control-box-shadow-focus,
+          var(--INTERNAL_form-control-box-shadow-focus)
+        ),
+        inset 0 0 0 1px
+          var(
+            --form-control-border-color-focus,
+            var(--INTERNAL_form-control-border-color-focus)
+          );
+    }
+
+    &:disabled {
+      @extend %disabled-base;
+
+      background-color: transparent;
+
+      + .text-input-label {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .error {
+    box-shadow: var(
+        --form-control-box-shadow,
+        var(--INTERNAL_form-control-box-shadow)
+      ),
+      inset 0 0 0 1px
+        var(
+          --form-control-border-color-error,
+          var(--INTERNAL_form-control-border-color-error)
+        );
+    background-color: var(
+      --form-control-background-color-error,
+      var(--INTERNAL_form-control-background-color-error)
+    );
+
+    &:focus-within {
+      outline: none;
+      border: 1px solid var(--color-border-active);
+      box-shadow: var(
+        --form-control-box-shadow-focus,
+        var(--INTERNAL_form-control-box-shadow-focus)
+      );
+    }
+  }
+
+  //Necessary so that inset shadow that we use for border does not get covered by child elements.
+  &:not(.error) {
+    > * {
+      &.disabled {
+        &:not(textarea) {
+          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));
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    @extend %disabled-base;
+  }
+}
+
+.textarea-resize-both {
+  resize: both;
+}
+
+.textarea-resize-horizontal {
+  resize: horizontal;
+}
+
+.textarea-resize-vertical {
+  resize: vertical;
+}
+
+.textarea-resize-none {
+  resize: none;
+}

package/src/components/TextareaInputInset/TextareaInputInset.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+import { TextareaInputInset } from './TextareaInputInset';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof TextareaInputInset> = {
+  title: 'Components/TextareaInputInset',
+  component: TextareaInputInset,
+};
+
+export default meta;
+
+export const Default = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box gap="md">
+      <TextareaInputInset
+        id="textareaInputDefault"
+        value={value}
+        label="Multi-line Text Input"
+        placeholder="Enter your message"
+        onChange={(event) => setValue(event.target.value)}
+      />
+    </Box>
+  );
+};
+
+export const Required = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box gap="md">
+      <TextareaInputInset
+        id="requiredInput"
+        value={value}
+        label="Required Input"
+        placeholder="Enter your email address"
+        onChange={(event) => setValue(event.target.value)}
+        isRequired
+      />
+      <TextareaInputInset
+        id="customRequiredInput"
+        value={value}
+        label="Required Input"
+        onChange={(event) => setValue(event.target.value)}
+        isRequired
+        requiredIndicator=" (required)"
+      />
+    </Box>
+  );
+};
+
+export const HelpText = () => {
+  const [value, setValue] = useState('');
+  return (
+    <TextareaInputInset
+      id="helpTextStory"
+      value={value}
+      label="Design Request Note"
+      onChange={(event) => setValue(event.target.value)}
+      helpText="Describe what design changes you would like to make"
+    />
+  );
+};
+
+export const ValidationError = () => {
+  const [value, setValue] = useState('');
+  const [value2, setValue2] = useState(
+    'We are on a mission to stop climate change before we reach an irreversible tipping point. This requires urgency and change on a massive scale but technological advancements have put it within reach.'
+  );
+  return (
+    <Box gap="md">
+      <TextareaInputInset
+        id="error1"
+        value={value}
+        label="Note"
+        error="Note is required"
+        onChange={(event) => setValue(event.target.value)}
+        isRequired
+      />
+      <TextareaInputInset
+        id="error2"
+        value={value2}
+        label="Note"
+        error="Note is required"
+        helpText="Add context to your note"
+        onChange={(event) => setValue2(event.target.value)}
+        isRequired
+      />
+    </Box>
+  );
+};
+
+export const Disabled = () => {
+  const [value, setValue] = useState('');
+  const [value2, setValue2] = useState(
+    'We are on a mission to stop climate change before we reach an irreversible tipping point. This requires urgency and change on a massive scale but technological advancements have put it within reach.'
+  );
+  return (
+    <Box gap="md">
+      <TextareaInputInset
+        id="disabled"
+        value={value}
+        label="Disabled"
+        onChange={(event) => setValue(event.target.value)}
+        isDisabled
+      />
+      <TextareaInputInset
+        id="disabledValue"
+        value={value2}
+        label="Disabled with Value"
+        onChange={(event) => setValue2(event.target.value)}
+        isDisabled
+      />
+    </Box>
+  );
+};
+
+export const Sizes = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box gap="md">
+      <TextareaInputInset
+        id="mdTextInput"
+        value={value}
+        label="Medium Input"
+        size="md"
+        onChange={(event) => setValue(event.target.value)}
+      />
+      <TextareaInputInset
+        id="lgTextInput"
+        value={value}
+        label="Large Input"
+        size="lg"
+        onChange={(event) => setValue(event.target.value)}
+      />
+    </Box>
+  );
+};
+
+export const Resize = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box gap="md">
+      <TextareaInputInset
+        id="resizeBoth"
+        value={value}
+        label="Resize Me Vertically and Horizontally"
+        onChange={(event) => setValue(event.target.value)}
+        resize="both"
+      />
+      <TextareaInputInset
+        id="resizeNone"
+        value={value}
+        label="Can't resize me"
+        onChange={(event) => setValue(event.target.value)}
+        resize="none"
+      />
+    </Box>
+  );
+};

package/src/components/TextareaInputInset/TextareaInputInset.test.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { TextareaInputInset } from './TextareaInputInset';
+
+const baseProps = {
+  name: 'firstName',
+  id: 'firstName',
+  label: 'first name',
+  value: 'hello',
+  onChange: () => null,
+  onClear: undefined,
+};
+
+describe('TextInput', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test('onChange event fires callback function', () => {
+        const mockedHandleChange = jest.fn(() => null);
+
+        render(
+          <TextareaInputInset {...baseProps} onChange={mockedHandleChange} />
+        );
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+
+        fireEvent.change(inputElement, { target: { value: 'good bye' } });
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+      });
+
+      test('Input value is updated properly when upper state changes', () => {
+        let value = 'hello';
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+        const { rerender } = render(
+          <TextareaInputInset
+            {...baseProps}
+            value={value}
+            onChange={mockedHandleChange}
+          />
+        );
+
+        const inputElement = screen.getByDisplayValue(
+          'hello'
+        ) as HTMLInputElement;
+        expect(inputElement.value).toBe('hello');
+
+        fireEvent.change(inputElement, { target: { value: 'good bye' } });
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+
+        rerender(
+          <TextareaInputInset
+            {...baseProps}
+            value={value}
+            onChange={mockedHandleChange}
+          />
+        );
+        expect(inputElement.value).toBe('good bye');
+      });
+    });
+
+    describe('onFocus', () => {
+      test('Input fires onFocus callback', () => {
+        const mockedHandleFocus = jest.fn();
+        render(
+          <TextareaInputInset {...baseProps} onFocus={mockedHandleFocus} />
+        );
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        fireEvent.focus(inputElement);
+        expect(mockedHandleFocus).toBeCalledTimes(1);
+      });
+    });
+
+    describe('onBlur', () => {
+      test('Input fires onBlur callback', () => {
+        const mockedHandleBlur = jest.fn();
+        render(<TextareaInputInset {...baseProps} onBlur={mockedHandleBlur} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        fireEvent.focus(inputElement);
+        fireEvent.blur(inputElement);
+        expect(mockedHandleBlur).toBeCalledTimes(1);
+      });
+    });
+  });
+
+  describe('States', () => {
+    describe('Label', () => {
+      test('it renders a label', () => {
+        render(<TextareaInputInset {...baseProps} />);
+
+        const labelElement = screen.getByText(baseProps.label);
+
+        expect(labelElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Autofocused', () => {
+      test('Input autofocuses if "autoFocus" prop is set to true', () => {
+        render(<TextareaInputInset {...baseProps} autoFocus />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(document.activeElement).toEqual(inputElement);
+      });
+    });
+
+    describe('Autocomplete', () => {
+      test('Input correctly assigns autocomplete value of "on" when bool true is provided', () => {
+        render(<TextareaInputInset {...baseProps} autoComplete />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(inputElement).toHaveAttribute('autocomplete', 'on');
+      });
+
+      test('Input correctly assigns autocomplete value of "off" when bool false is provided', () => {
+        render(<TextareaInputInset {...baseProps} autoComplete={false} />);
+        const inputElement = screen.getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+
+      test('Input correctly assigns autocomplete specific value when provided', () => {
+        render(<TextareaInputInset {...baseProps} autoComplete="email" />);
+        const inputElement = screen.getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'email');
+      });
+    });
+
+    describe('Required', () => {
+      test('it correctly assigns the "aria-required" attribute when "isRequired" prop is true', () => {
+        render(<TextareaInputInset {...baseProps} isRequired />);
+
+        const inputElement = screen.getByDisplayValue('hello');
+
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+    });
+
+    describe('Error', () => {
+      test('Input correctly displays error message if provided', () => {
+        render(<TextareaInputInset {...baseProps} error="You silly goose" />);
+
+        const validationMessageElement = screen.getByText('You silly goose');
+
+        expect(validationMessageElement).toBeInTheDocument();
+        expect(validationMessageElement).toHaveTextContent('You silly goose');
+      });
+    });
+
+    describe('Help Text', () => {
+      test('Input renders help text', async () => {
+        const { getByText } = render(
+          <TextareaInputInset
+            {...baseProps}
+            value=""
+            helpText="i am help text"
+          />
+        );
+
+        expect(getByText('i am help text')).toBeDefined();
+      });
+    });
+
+    describe('Max Length', () => {
+      test('Input correctly passes maxlength property if prop is passed', async () => {
+        render(<TextareaInputInset {...baseProps} value="" maxLength={3} />);
+
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement).toHaveAttribute('maxlength');
+        expect(inputElement.getAttribute('maxlength')).toBe('3');
+      });
+    });
+
+    describe('Name', () => {
+      test('Input correctly passes name property if prop is passed', async () => {
+        render(
+          <TextareaInputInset
+            {...baseProps}
+            value=""
+            name="test floating label"
+          />
+        );
+
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement).toHaveAttribute('name');
+        expect(inputElement.getAttribute('name')).toBe('test floating label');
+      });
+    });
+
+    describe('Aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        render(<TextareaInputInset {...baseProps} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${baseProps.id}Label`
+        );
+        expect(document.getElementById(baseProps.id)).toBeInTheDocument();
+      });
+    });
+  });
+});