✨ - feat: mult-select implemented

Author: Xaohs

src/components/form/form/form.stories.tsx

@@ -65,6 +65,7 @@ const playFormComponent = async ({
   const schoolYear = canvas.getByLabelText("Select school year", {
     exact: false,
   });
+  const favouriteSport = canvas.getByLabelText("Favourite sport");
   const address = canvas.getByLabelText("Address");
   const address_addition = canvas.getByLabelText("Address (addition)");
   const dateOfBirth = canvas.getByLabelText("Date of birth", { exact: false });
@@ -140,6 +141,18 @@ const playFormComponent = async ({
   await expect(math).toBeChecked();
   await expectLogToBe(canvasElement, "courses", ["english", "math"]);
 
+  await userEvent.click(favouriteSport, { delay: 100 });
+  const football = await canvas.findByText("Football");
+  const tennis = await canvas.findByText("Tennis");
+  await userEvent.click(football, { delay: 10 });
+  await userEvent.click(tennis, { delay: 10 });
+  await expect(favouriteSport).toHaveTextContent("FootballTennis");
+  await expectLogToBe(
+    canvasElement,
+    "favourite_sport",
+    typedResults ? ["football", "tennis"] : ["football", "tennis"],
+  );
+
   await userEvent.click(yes);
   await expect(yes).toBeChecked();
   await expectLogToBe(canvasElement, "subscribe_newsletter", "yes");
@@ -204,6 +217,20 @@ export const FormComponent: Story = {
           { label: "Science", value: "science" },
         ],
       },
+      {
+        options: [
+          { label: "Football", value: "football" },
+          { label: "Basketball", value: "basketball" },
+          { label: "Tennis", value: "tennis" },
+          { label: "Swimming", value: "swimming" },
+          { label: "Running", value: "running" },
+          { label: "Cycling", value: "cycling" },
+        ],
+        name: "favourite_sport",
+        placeholder: "Select favourite sport",
+        label: "Favourite sport",
+        multiple: true,
+      },
       {
         label: "Receive newsletter",
         name: "subscribe_newsletter",
@@ -214,6 +241,7 @@ export const FormComponent: Story = {
           { label: "No", value: "no" },
         ],
       },
+
       {
         label: "I have read and accept the terms and conditions",
         name: "accept_tos",
@@ -287,6 +315,20 @@ export const UsageWithFormik: Story = {
           { label: "Science", value: "science" },
         ],
       },
+      {
+        options: [
+          { label: "Football", value: "football" },
+          { label: "Basketball", value: "basketball" },
+          { label: "Tennis", value: "tennis" },
+          { label: "Swimming", value: "swimming" },
+          { label: "Running", value: "running" },
+          { label: "Cycling", value: "cycling" },
+        ],
+        name: "favourite_sport",
+        placeholder: "Select favourite sport",
+        label: "Favourite sport",
+        multiple: true,
+      },
       {
         label: "Receive newsletter",
         name: "subscribe_newsletter",

src/components/form/select/select.scss

@@ -4,6 +4,7 @@
   --mykn-select-font-size: var(--typography-font-size-body-s);
   --mykn-select-line-height: var(--typography-line-height-body-s);
   --mykn-select-min-height: 42px;
+  --mykn-select-spacing-pill: calc(var(--spacing-xs-h) / 4);
 
   align-items: center;
   background: var(--typography-color-background);
@@ -34,6 +35,15 @@
     --mykn-select-padding-v: var(--mykn-select-padding-xs, var(--spacing-xs-v));
   }
 
+  &--multiple#{&}--pad-v {
+    --mykn-select-padding-v: calc(
+      var(--mykn-select-padding-xs, var(--spacing-xs-v)) - var(
+          --mykn-select-spacing-pill
+        ) *
+        2
+    );
+  }
+
   &--size-xl {
     --mykn-select-font-size: var(--typography-font-size-xl);
     --mykn-select-line-height: var(--typography-line-height-xl);
@@ -95,6 +105,26 @@
     text-overflow: ellipsis;
   }
 
+  &--multiple &__label {
+    white-space: unset;
+    overflow: visible;
+  }
+
+  &__pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.5em; // TODO: spacing-h and spacing-v are too big for this. Add more tokens or hardcode?
+    margin: var(--mykn-select-spacing-pill);
+    border-radius: var(--border-radius-l);
+    background-color: var(--page-color-highlight);
+    font-size: var(--typography-font-size-body-xs);
+    line-height: var(--typography-font-size-body-xs);
+
+    &-remove {
+      margin-inline-start: 0.05em;
+    }
+  }
+
   &__clear {
     appearance: none;
     background-color: transparent;

src/components/form/select/select.stories.tsx

@@ -202,3 +202,35 @@ export const Padding: Story = {
     );
   },
 };
+
+export const SelectSingle: Story = {
+  args: {
+    options: [
+      { label: "Freshman", value: "FR" },
+      { label: "Sophomore", value: "SO" },
+      { label: "Junior", value: "JR" },
+      { label: "Senior", value: "SR" },
+      { label: "Graduate", value: "GR" },
+    ],
+    name: "school_year",
+    placeholder: "Select school year",
+  },
+  decorators: [FORM_TEST_DECORATOR],
+};
+
+export const SelectMultiple: Story = {
+  args: {
+    options: [
+      { label: "Football", value: "football" },
+      { label: "Basketball", value: "basketball" },
+      { label: "Tennis", value: "tennis" },
+      { label: "Swimming", value: "swimming" },
+      { label: "Running", value: "running" },
+      { label: "Cycling", value: "cycling" },
+    ],
+    name: "favourite_sport",
+    placeholder: "Select favourite sport",
+    multiple: true,
+  },
+  decorators: [FORM_TEST_DECORATOR],
+};