diff --git a/.gitignore b/.gitignore index dc65e0950..22daf180d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .cache .changelog yarn-error.log +.yarn/install-state.gz node_modules build assets diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index b888d10c1..3b86d688b 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/src/components/bcl-select/select.story.js b/src/components/bcl-select/select.story.js index 3705fb016..bf99ac022 100644 --- a/src/components/bcl-select/select.story.js +++ b/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 ` + + ${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]; diff --git a/src/data/select/data--multiselect.js b/src/data/select/data--multiselect.js index 83de7d540..ea6c4abf5 100644 --- a/src/data/select/data--multiselect.js +++ b/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"), }; diff --git a/src/data/select/data--single.js b/src/data/select/data--single.js new file mode 100644 index 000000000..f4bfca4eb --- /dev/null +++ b/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"), +}; diff --git a/src/themes/default/src/scss/_multiselect.scss b/src/themes/default/src/scss/_multiselect.scss index c0ac05814..dbf78ef8b 100644 --- a/src/themes/default/src/scss/_multiselect.scss +++ b/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,