@hyphen/hyphen-components 2.9.0

package/src/components/SelectInputNative/SelectInputNative.module.scss

@@ -0,0 +1,356 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+%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)
+  );
+  opacity: 1;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+
+  &::before,
+  &::after {
+    cursor: not-allowed;
+  }
+}
+
+@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)
+  );
+
+  > select {
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+    padding-left: var(
+      --form-control-size-sm-padding,
+      var(--INTERNAL_form-control-size-sm-padding)
+    );
+    padding-right: var(--size-spacing-2xl);
+    padding-top: calc(
+      var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+    );
+    padding-bottom: calc(
+      var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+    );
+  }
+
+  &::before,
+  &::after {
+    width: 8px;
+    height: 2px;
+    top: calc(var(--size-spacing-sm) + 12px);
+  }
+
+  &::before {
+    right: calc(var(--size-spacing-sm) + 8px);
+  }
+
+  &::after {
+    right: calc(var(--size-spacing-sm) + 3px);
+  }
+}
+
+%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)
+  );
+
+  > select {
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+    padding-left: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
+    padding-right: var(--size-spacing-3xl);
+    padding-top: calc(
+      var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      )
+    );
+    padding-bottom: calc(
+      var(
+        --form-control-size-md-padding,
+        var(--INTERNAL_form-control-size-md-padding)
+      )
+    );
+  }
+
+  &::before,
+  &::after {
+    top: calc(var(--size-spacing-md) + 10px);
+  }
+
+  &::before {
+    right: calc(var(--size-spacing-sm) + 10px);
+  }
+
+  &::after {
+    right: calc(var(--size-spacing-sm) + 3px);
+  }
+}
+
+%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)
+  );
+
+  > select {
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+    padding-left: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
+    padding-right: var(--size-spacing-3xl);
+    padding-top: calc(
+      var(
+          --form-control-size-lg-padding,
+          var(--INTERNAL_form-control-size-lg-padding)
+        ) - 1px
+    );
+    padding-bottom: calc(
+      var(
+          --form-control-size-lg-padding,
+          var(--INTERNAL_form-control-size-lg-padding)
+        ) - 1px
+    );
+  }
+
+  &::before,
+  &::after {
+    width: 10px;
+    height: 2px;
+    top: calc(var(--size-spacing-md) + 9px);
+  }
+
+  &::before {
+    right: calc(var(--size-spacing-sm) + 11px);
+  }
+
+  &::after {
+    right: calc(var(--size-spacing-sm) + 3px);
+  }
+}
+
+%size-lg {
+  @include size-lg;
+}
+
+.size-lg {
+  @extend %size-lg;
+}
+
+.select-input-native-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)
+  );
+
+  &:focus-within {
+    outline: none;
+    border: 1px solid var(--color-border-active);
+    box-shadow: var(
+      --form-control-box-shadow,
+      var(--INTERNAL_form-control-box-shadow-focus)
+    );
+  }
+
+  &::before,
+  &::after {
+    border-radius: 100px;
+    content: '';
+    position: absolute;
+    background: var(--color-base-grey-300);
+    pointer-events: none;
+    width: 10px;
+    height: 2px;
+  }
+
+  //change the stacking context so this half of the chevron stays above the disabled background color.
+  &::before {
+    right: calc(var(--size-spacing-sm) + 7px);
+    transform-origin: 50% 50%;
+    transform: rotate(42deg);
+    z-index: 1;
+  }
+
+  &::after {
+    right: calc(var(--size-spacing-sm) + 1px);
+    transform-origin: 50% 50%;
+    transform: rotate(-42deg);
+  }
+
+  &.disabled {
+    @extend %disabled-base;
+  }
+
+  > select {
+    box-sizing: border-box;
+    border: none;
+    appearance: none;
+    transition-duration: 300ms;
+    transition-property: border, background-color;
+    transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
+    background: transparent;
+    width: 100%;
+    line-height: var(
+      --form-control-line-height,
+      var(--INTERNAL_form-control-line-height)
+    );
+
+    &:focus {
+      outline: none;
+      border-color: var(
+        --form-control-border-color-focus,
+        var(--INTERNAL_form-control-border-color-focus)
+      );
+    }
+
+    &:disabled {
+      @extend %disabled-base;
+
+      background-color: transparent;
+    }
+  }
+
+  &.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;
+    }
+  }
+
+  &.error {
+    border-color: var(
+      --form-control-border-color-error,
+      var(--INTERNAL_form-control-border-color-error)
+    );
+    background-color: var(
+      --form-control-border-color-error,
+      var(--INTERNAL_form-control-background-color-error)
+    );
+
+    select:focus {
+      outline: none;
+      border-color: var(
+        --form-control-border-color-focus,
+        var(--INTERNAL_form-control-border-color-focus)
+      );
+      background-color: transparent;
+    }
+  }
+}
+
+.text-input-label {
+  margin-bottom: var(
+    --form-control-label-margin,
+    var(--INTERNAL_form-control-label-margin)
+  );
+}

package/src/components/SelectInputNative/SelectInputNative.stories.tsx

@@ -0,0 +1,282 @@
+import React, { useState } from 'react';
+import { SelectInputNative } from './SelectInputNative';
+import type { Meta } from '@storybook/react';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof SelectInputNative> = {
+  title: 'Components/SelectInputNative',
+  component: SelectInputNative,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const Default = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  return (
+    <div>
+      <SelectInputNative
+        id="default Select"
+        label="Label"
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        options={options}
+        value={value}
+      />
+    </div>
+  );
+};
+
+export const PreSelected = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  const [value, setValue] = useState(options[1].value);
+  return (
+    <div>
+      <SelectInputNative
+        id="preSelected"
+        label="Label"
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        value={value}
+      />
+    </div>
+  );
+};
+
+export const HelpText = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  return (
+    <div>
+      <SelectInputNative
+        id="helpText"
+        label="Flavor"
+        helpText="Choose your favorite flavor"
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        value={value}
+      />
+    </div>
+  );
+};
+
+export const Placeholder = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  return (
+    <div>
+      <SelectInputNative
+        id="customPlaceholder"
+        label="Label"
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        value={value}
+        placeholder="Custom placeholder..."
+      />
+    </div>
+  );
+};
+
+export const HiddenLabel = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  return (
+    <div>
+      <SelectInputNative
+        id="labelHidden"
+        label="My label is hidden"
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        value={value}
+        hideLabel
+      />
+    </div>
+  );
+};
+
+export const Autofocus = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div>
+      <SelectInputNative
+        id="autoFocus"
+        label="Label"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        autoFocus
+      />
+    </div>
+  );
+};
+
+export const Required = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <SelectInputNative
+      id="required"
+      label="Required Input"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      options={options}
+      isRequired
+    />
+  );
+};
+
+export const CustomRequiredIndicator = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  const [value, setValue] = useState('');
+  const [value2, setValue2] = useState('');
+  return (
+    <Box gap="md">
+      <SelectInputNative
+        id="withouRequiredIndicator"
+        label="Required Without Indicator"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        isRequired
+        requiredIndicator={null}
+      />
+      <SelectInputNative
+        id="customRequiredIndicator"
+        label="Required Custom Indicator"
+        value={value2}
+        onChange={(event) => setValue2(event.target.value)}
+        options={options}
+        isRequired
+        requiredIndicator=" (required)"
+      />
+    </Box>
+  );
+};
+
+export const Disabled = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div style={{ height: '85px' }}>
+      <SelectInputNative
+        id="disabled"
+        label="Label"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        isDisabled
+      />
+    </div>
+  );
+};
+
+export const Error = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div style={{ height: '200px' }}>
+      <SelectInputNative
+        id="error"
+        label="Label"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        isRequired
+        error="Helpful validation message"
+      />
+    </div>
+  );
+};
+
+export const Sizes = () => {
+  const [value, setValue] = useState('');
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  const [value3, setValue3] = useState('');
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+  return (
+    <Box gap="md">
+      <SelectInputNative
+        id="smallSelect"
+        label="Small"
+        onChange={(event) => setValue(event.target.value)}
+        options={options}
+        value={value}
+        size="sm"
+      />
+      <SelectInputNative
+        id="mediumSelect"
+        label="Medium"
+        onChange={(event) => setValue1(event.target.value)}
+        options={options}
+        value={value1}
+        size="md"
+      />
+      <SelectInputNative
+        id="largeSelect"
+        label="Large"
+        onChange={(event) => setValue2(event.target.value)}
+        options={options}
+        value={value2}
+        size="lg"
+      />
+      <SelectInputNative
+        id="responsiveSelect"
+        label="Responsive"
+        onChange={(event) => setValue3(event.target.value)}
+        options={options}
+        value={value3}
+        size={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'sm' }}
+      />
+    </Box>
+  );
+};