feat(select): Added support for slim select single value. - OEL-3081

.gitignore

@@ -1,6 +1,7 @@
 .cache
 .changelog
 yarn-error.log
+.yarn/install-state.gz
 node_modules
 build
 assets

src/components/bcl-select/select.story.js

@@ -3,6 +3,7 @@ import drupalAttribute from "drupal-attribute";
 
 import demoData from "@openeuropa/bcl-data-select/data.js";
 import demoMultiData from "@openeuropa/bcl-data-select/data--multiselect.js";
+import demoSingleData from "@openeuropa/bcl-data-select/data--single.js";
 import select from "@openeuropa/bcl-select/select.html.twig";
 
 const getArgs = (data) => {
@@ -66,6 +67,20 @@ const initMultiselect = (story) => {
   ${demo}`;
 };
 
+const initSingleselect = (story) => {
+  const demo = story();
+  return `
+    <script>
+      if (document.querySelector(".single-select")) {
+        new SlimSelect({
+          select: ".single-select",
+          placeholder: "Please select a value",
+        });
+      }
+    </script>
+  ${demo}`;
+};
+
 // Stories
 export default {
   title: "Components/Forms/Select",
@@ -119,3 +134,9 @@ Multiselect.parameters = {
     },
   ],
 };
+
+export const Singleselect = (args) => select(applyArgs(demoSingleData, args));
+
+Singleselect.argTypes = getArgTypes(demoSingleData, "select");
+Singleselect.args = getArgs(demoSingleData, "select");
+Singleselect.decorators = [initSingleselect];

src/data/select/data--multiselect.js

@@ -29,5 +29,5 @@ module.exports = {
     { value: 8, label: "last option" },
     { value: 9, label: "the selected option", selected: true },
   ],
-  attributes: new drupalAttribute().addClass("multi-select"),
+  attributes: new drupalAttribute().addClass("multi-select form-select"),
 };

src/data/select/data--single.js

@@ -0,0 +1,30 @@
+const drupalAttribute = require("drupal-attribute");
+
+module.exports = {
+  id: "singleselect-1",
+  clean_class: true,
+  required: true,
+  size: "md",
+  label: "A single select form element",
+  helper_text: "Helper text for the select element",
+  helper_text_id: "helperText",
+  invalid_feedback: "Invalid feedback example",
+  valid_feedback: "Valid feedback example",
+  placeholder: "Please select a value",
+  options: [
+    {
+      optgroup: true,
+      label: "Group 1",
+      options: [
+        { value: 1, label: "Option group 1" },
+        { value: 2, label: "Option group 2" },
+        { value: 3, label: "Option group 3" },
+      ],
+    },
+    { value: 5, label: "a select option" },
+    { value: 6, label: "another select option" },
+    { value: 7, label: "another option" },
+    { value: 8, label: "last option" },
+  ],
+  attributes: new drupalAttribute().addClass("single-select form-select"),
+};

src/themes/default/src/scss/_multiselect.scss

@@ -108,6 +108,27 @@ select.multi-select {
   }
 }
 
+.ss-main.ss-1 {
+  &.form-select.is-invalid,
+  &.form-select.is-valid {
+    background: none;
+    padding: 0;
+  }
+  &.form-select {
+    border: none;
+    background: none;
+    padding: 0.075rem 0 0.075rem 0.3rem;
+  }
+  .ss-single-selected {
+    min-height: 37px;
+    .placeholder {
+      background: none;
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+}
+
 .ss-main.multi-select.is-invalid,
 .ss-main.multi-select.is-valid,
 .was-validated .multi-select:invalid + .ss-main.multi-select,