From 32e9ac56d6c9fb35903d05ec1367dc7c852ed889 Mon Sep 17 00:00:00 2001
From: dannyk3941 <52807859+dannyk3941@users.noreply.github.com>
Date: Tue, 6 Jun 2023 09:19:48 -0400
Subject: [PATCH] Feat/select element (#34)

* fix: select element with base story

* chore: clean up css and story controls

* chore: update components _index.scss for select

* fix: review comments for story controls

* chore: remove control defaults
---
 .../images/angle-arrow-down-gray-90.svg       |   1 +
 .../src/components/select/select.stories.js   | 104 ++++++++++++
 packages/vanilla/src/sass/base/_core.scss     |   3 +-
 .../vanilla/src/sass/components/_index.scss   |   2 +-
 .../vanilla/src/sass/components/_select.scss  | 152 ------------------
 .../src/sass/components/select/_index.scss    |  40 +++++
 6 files changed, 147 insertions(+), 155 deletions(-)
 create mode 100644 packages/vanilla/assets/images/angle-arrow-down-gray-90.svg
 create mode 100644 packages/vanilla/src/components/select/select.stories.js
 delete mode 100644 packages/vanilla/src/sass/components/_select.scss
 create mode 100644 packages/vanilla/src/sass/components/select/_index.scss

diff --git a/packages/vanilla/assets/images/angle-arrow-down-gray-90.svg b/packages/vanilla/assets/images/angle-arrow-down-gray-90.svg
new file mode 100644
index 00000000..1a5d2442
--- /dev/null
+++ b/packages/vanilla/assets/images/angle-arrow-down-gray-90.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="39" viewBox="0 0 64 39"><title>angle-arrow-down-gray-90</title><path fill="#1b1b1b" d="M63.36 4.004L60.155.741c-.427-.436-.919-.654-1.475-.654-.555 0-1.047.218-1.475.654L32 26.4 6.798.74C6.37.306 5.878.088 5.323.088c-.556 0-1.048.218-1.476.654L.642 4.005C.213 4.44 0 4.941 0 5.507c0 .565.214 1.066.642 1.501l29.883 30.427c.427.435.92.652 1.475.652.556 0 1.047-.217 1.474-.652L63.361 7.008c.427-.435.639-.936.639-1.501 0-.566-.212-1.067-.64-1.503z"/></svg>
\ No newline at end of file
diff --git a/packages/vanilla/src/components/select/select.stories.js b/packages/vanilla/src/components/select/select.stories.js
new file mode 100644
index 00000000..d4ed8285
--- /dev/null
+++ b/packages/vanilla/src/components/select/select.stories.js
@@ -0,0 +1,104 @@
+export default {
+  title: 'Patterns',
+  parameters: {
+    html: {
+      root: '.cbp-form'
+    }
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      description: 'Represents a caption for the `<select>` element in the user interface.',
+      control: { type: 'text' }
+    },
+    inputDescription: {
+      name: 'Description',
+      description: 'Instructions or supplementary information regarding the `<select>` element.',
+      control: { type: 'text' }
+    },
+    inputId: {
+      name: 'Input ID',
+      description: 'The `id` on the native `select` tag, required to link the `label` and `select` for accessibility purposes.',
+      control: { type: 'text' }
+    },
+    formControlName: {
+      name: 'Input Name',
+      description: 'Name of the form control in the input element. Submitted with the form as part of a name/value pair.',
+      control: { type: 'text' }
+    },
+    errorMessage: {
+      name: 'Error Message',
+      description: 'A message in the input description that a problem has occurred.',
+      control: { type: 'text' }
+    },
+    optionsObj: {
+      name: 'Options Object',
+      description: 'Sets the label of the `<option>` and the `value` attribute.',
+      control: { type: 'object' }
+    },
+    disabled: {
+      name: '`disabled` Attribute',
+      description: 'Attribute that indicates that the user cannot interact with the control.',
+      control: { type: 'boolean' }
+    },
+    required: {
+      name: '`required` Attribute',
+      description: 'Indicates that the user must specify a value for the input before submission.',
+      control: { type: 'boolean' }
+    }
+  },
+  decorators: [
+    (Story, context) => `
+      <form class="cbp-form">
+        <label for=${context.args.inputId} class="cbp-input__label">${context.args.label}</label>
+        <p class="cbp-input__description" ${!context.args.required ? '' : 'hidden'}>${context.args.inputDescription}</p>
+        <p class="cbp-input__description ${context.args.required ? 'cbp-input__description--error': ''}" ${context.args.required ? '' : 'hidden'}><i class="fas fa-exclamation-triangle"></i>${context.args.errorMessage}</p>
+        ${Story().outerHTML || Story()}
+      </form>
+    `
+  ]
+}
+
+const Template = ({ inputId, formControlName, disabled, required, optionsObj: { option1, option2, option3, option4, option5} }) => (
+  `
+    <select class="cbp-input__select" name=${formControlName} id=${inputId} ${disabled ? 'disabled' : ''} ${required ? 'required' : ''} ${required ? 'aria-required="true"' : ''}>
+      <option value="">-- Select --</option>
+      <option value=${option1.value}>${option1.label}</option>
+      <option value=${option2.value}>${option2.label}</option>
+      <option value=${option3.value}>${option3.label}</option>
+      <option value=${option4.value}>${option4.label}</option>
+      <option value=${option5.value}>${option5.label}</option>
+    </select>
+  `
+)
+
+export const Select = Template.bind({});
+Select.args = {
+  label: 'Port of Departure',
+  inputId: 'port',
+  inputDescription: 'Required.',
+  formControlName: 'departurePort',
+  errorMessage: 'This field is required.',
+  optionsObj: {
+    option1: {
+      value: 'baltimore',
+      label: 'Port of Baltimore'
+    },
+    option2: {
+      value: 'boston',
+      label: 'Port of Boston'
+    },
+    option3: {
+      value: 'philadelphia',
+      label: 'Port of Philadelphia'
+    },
+    option4: {
+      value: 'washington',
+      label: 'Port of Washington'
+    },
+    option5: {
+      value: 'zoolily',
+      label: 'Port of Zoolily'
+    },
+  }
+};
\ No newline at end of file
diff --git a/packages/vanilla/src/sass/base/_core.scss b/packages/vanilla/src/sass/base/_core.scss
index 92aa6b88..82dcfc82 100644
--- a/packages/vanilla/src/sass/base/_core.scss
+++ b/packages/vanilla/src/sass/base/_core.scss
@@ -28,8 +28,7 @@ button {
 [aria-disabled=true],
 :disabled,
 input:read-only:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
-textarea:read-only,
-select:read-only {
+textarea:read-only {
   cursor: not-allowed;
 }
 
diff --git a/packages/vanilla/src/sass/components/_index.scss b/packages/vanilla/src/sass/components/_index.scss
index 99333240..a0f583c8 100644
--- a/packages/vanilla/src/sass/components/_index.scss
+++ b/packages/vanilla/src/sass/components/_index.scss
@@ -16,7 +16,7 @@
 @use './overflow-menu';
 @use './pagination';
 @use 'radio';
-@use './select';
+@use 'select';
 @use 'slider';
 @use 'tabs';
 @use 'text-input';
diff --git a/packages/vanilla/src/sass/components/_select.scss b/packages/vanilla/src/sass/components/_select.scss
deleted file mode 100644
index 64b44905..00000000
--- a/packages/vanilla/src/sass/components/_select.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-//@use '../base/colors' as *;
-
-/* Select (Form Input) */
-.select-wrapper {
-  display: flex;
-}
-
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  border-radius: 3px;
-  cursor: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  height: 36px;
-  line-height: inherit;
-  padding-left: 8px;
-  padding-right: 8px;
-  width: 100%;
-  z-index: 2;
-
-  &:focus:not([disabled]) {
-    outline: 0;
-  }
-
-  &:invalid {
-    color: var(--cbp-color-text-dark);
-    font-style: italic;
-  }
-}
-
-/* Down Caret "Button */
-.select-wrapper::after {
-  align-items: center;
-  background-color: var(--cbp-color-interactive-neutral-base);
-  border: 2px solid var(--cbp-color-interactive-neutral-base);
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  content: "\f107";
-  color: var(--cbp-color-white);
-  display: flex;
-  font-family: "Font Awesome 5 Free";
-  font-size: 20px;
-  font-weight: 900;
-  justify-content: center;
-  text-align: center;
-  height: 36px;
-  position: absolute;
-  right: 0;
-  width: 36px;
-  z-index: 1;
-}
-
-.cbp-form__single-select {
-  border: 1px solid var(--cbp-color-interactive-neutral-base);
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  border-right: none;
-  cursor: pointer;
-}
-
-/* Hover State */
-.cbp-form__single-select:hover {
-  border: 2px solid var(--cbp-color-interactive-neutral-darker);
-  border-right: 0;
-}
-
-/* Hover Caret State */
-.select-wrapper:hover::after {
-  background-color: var(--cbp-color-interactive-neutral-darker);
-  border: 2px solid var(--cbp-color-interactive-neutral-darker);
-}
-
-/* Focus State */
-.cbp-form__single-select:focus {
-  border: 2px solid var(--cbp-color-interactive-focus-dark);
-  border-right: 0;
-  outline: 0;
-}
-
-/* Focus Caret State */
-.select-wrapper:focus-within::after {
-  background-color: var(--cbp-color-interactive-focus-dark);
-  border: 2px solid var(--cbp-color-interactive-focus-dark);
-}
-
-/* Error State */
-.select-wrapper--error {
-  & > select {
-    background: linear-gradient(to right, var(--cbp-color-danger-lighter) calc(100% - 34px), transparent 0);
-    border: 2px solid var(--cbp-color-danger-base);
-
-    &:hover {
-      border: 2px solid var(--cbp-color-danger-dark);
-    }
-
-    &:focus {
-      background: linear-gradient(to right, var(--cbp-color-danger-lighter) calc(100% - 34px), transparent 0);
-      border: 2px solid var(--cbp-color-interactive-focus-dark);
-    }
-  }
-
-  &::after {
-    background-color: var(--cbp-color-danger-base);
-    border: 2px solid var(--cbp-color-danger-base);
-  }
-
-  &:hover::after {
-    background-color: var(--cbp-color-danger-dark);
-    border: 2px solid var(--cbp-color-danger-dark);
-  }
-
-  &:focus-within::after {
-    background-color: var(--cbp-color-interactive-focus-dark);
-    border: 2px solid var(--cbp-color-interactive-focus-dark);
-  }
-}
-
-.select-wrapper--disabled {
-  & > select {
-    background: linear-gradient(to right, var(--cbp-color-interactive-disabled-light) calc(100% - 34px), transparent 0);
-    border: 1px solid var(--cbp-color-interactive-disabled-dark);
-    color: var(--cbp-color-interactive-disabled-dark);
-    font-style: italic;
-
-    &:hover {
-      border: 2px solid var(--cbp-color-interactive-neutral-darker);
-    }
-
-    &:focus {
-      background: linear-gradient(to right, var(--cbp-color-interactive-disabled-light) calc(100% - 34px), transparent 0);
-      border: 2px solid var(--cbp-color-interactive-focus-dark);
-    }
-
-    &::placeholder {
-      color: var(--cbp-color-interactive-disabled-light);
-      font-style: italic;
-    }
-  }
-
-  &::after {
-    background-color: var(--cbp-color-interactive-disabled-dark);
-    border: 2px solid var(--cbp-color-interactive-disabled-dark);
-  }
-
-  &:hover::after {
-    background-color: var(--cbp-color-interactive-neutral-darker);
-    border: 2px solid var(--cbp-color-interactive-neutral-darker);
-  }
-}
\ No newline at end of file
diff --git a/packages/vanilla/src/sass/components/select/_index.scss b/packages/vanilla/src/sass/components/select/_index.scss
new file mode 100644
index 00000000..fd64790b
--- /dev/null
+++ b/packages/vanilla/src/sass/components/select/_index.scss
@@ -0,0 +1,40 @@
+.cbp-input__select {
+  appearance: none;
+  background-color: var(--cbp-color-white);
+  background-image: url('/assets/images/angle-arrow-down-gray-90.svg');
+  background-repeat: no-repeat;
+  background-position: right var(--cbp-space-2x) center;
+  background-size: var(--cbp-space-3x) var(--cbp-space-3x);
+  border-color: var(--cbp-color-interactive-neutral-base);
+  border-radius: var(--cbp-border-radius-soft);
+  border-width: var(--cbp-border-size-md);
+  color: var(--cbp-color-text-darkest);
+  min-height: var(--cbp-space-9x);
+  outline: 0;
+  padding-left: var(--cbp-space-2x);
+  width: 100%;
+
+  &:hover {
+    border-color: var(--cbp-color-base-neutral-darker);
+  }
+
+  &:focus {
+    border-color: var(--cbp-color-interactive-focus-dark);
+  }
+
+  &:disabled {
+    background-color: var(--cbp-color-interactive-disabled-light);
+    border-color: var(--cbp-color-interactive-disabled-dark);
+    font-style: italic;
+
+    &:hover {
+      border-color: var(--cbp-color-base-neutral-darker);
+    }
+  }
+
+  &:invalid {
+    background-color: var(--cbp-color-danger-lighter);
+    border-color: var(--cbp-color-danger-dark);
+    font-style: italic;
+  }
+}