From 1e80841bd4f034ea614443add1c802fc8787547e Mon Sep 17 00:00:00 2001 From: Tiberiu Dumitru Date: Wed, 13 Apr 2022 17:54:10 +0300 Subject: [PATCH 1/6] Vacancy feature --- src/compositions/bcl-vacancy/.npmignore | 2 + .../__snapshots__/vacancy.test.js.snap | 4497 +++++++++++++++++ .../bcl-vacancy/data/data--listing.js | 400 ++ .../bcl-vacancy/data/data--sidebar-details.js | 60 + src/compositions/bcl-vacancy/data/data.js | 235 + src/compositions/bcl-vacancy/package.json | 27 + .../bcl-vacancy/vacancy.html.twig | 51 + src/compositions/bcl-vacancy/vacancy.story.js | 113 + src/compositions/bcl-vacancy/vacancy.test.js | 99 + 9 files changed, 5484 insertions(+) create mode 100644 src/compositions/bcl-vacancy/.npmignore create mode 100644 src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap create mode 100644 src/compositions/bcl-vacancy/data/data--listing.js create mode 100644 src/compositions/bcl-vacancy/data/data--sidebar-details.js create mode 100644 src/compositions/bcl-vacancy/data/data.js create mode 100644 src/compositions/bcl-vacancy/package.json create mode 100644 src/compositions/bcl-vacancy/vacancy.html.twig create mode 100644 src/compositions/bcl-vacancy/vacancy.story.js create mode 100644 src/compositions/bcl-vacancy/vacancy.test.js diff --git a/src/compositions/bcl-vacancy/.npmignore b/src/compositions/bcl-vacancy/.npmignore new file mode 100644 index 000000000..384605447 --- /dev/null +++ b/src/compositions/bcl-vacancy/.npmignore @@ -0,0 +1,2 @@ +__snapshots__ +*.js diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap new file mode 100644 index 000000000..9f69ff229 --- /dev/null +++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap @@ -0,0 +1,4497 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OE - Vacancy details (closed) renders correctly 1`] = ` + +
+ + + + + + +
+ +
+
+ + +
+
+
+
+
+
+
+

+ This is the title of this page +

+
+ + 8 hours ago + +
+

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. + Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. + Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. + Duis tristique fringilla magna, eu egestas dolor molestie non. + +

+
+
+
+
+
+
+
+
+
+
+ +

+ Event Details +

+
+
+
+
+ Opening date +
+
+ 19 April 2022 +
+
+
+
+
+
+ Closing date +
+
+ 21 December 2022 +
+
+
+
+
+
+ Grade +
+
+ Grade name +
+
+
+
+
+
+ Ref. number +
+
+ 394857746532840 +
+
+
+
+
+
+
+

+ Description +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. +

+

+ Share this page +

+
+ + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+ + +`; + +exports[`OE - Vacancy details (closed) renders correctly 2`] = ` + +
+ + + + + + +
+ +
+
+ + +
+
+
+
+
+
+
+

+ This is the title of this page +

+
+ + 8 hours ago + +
+

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. + Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. + Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. + Duis tristique fringilla magna, eu egestas dolor molestie non. + +

+
+
+
+
+
+
+
+
+
+
+ +

+ Event Details +

+
+
+
+
+ Opening date +
+
+ 19 April 2022 +
+
+
+
+
+
+ Closing date +
+
+ 21 December 2022 +
+
+
+
+
+
+ Grade +
+
+ Grade name +
+
+
+
+
+
+ Ref. number +
+
+ 394857746532840 +
+
+
+
+
+
+
+

+ Description +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. +

+

+ Share this page +

+
+ + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+ + +`; + +exports[`OE - Vacancy listing renders correctly 1`] = ` + +
+ + + + + + +
+ +
+
+ + +
+
+
+
+
+
+ alt img +
+
+
+

+ This is the title of this page +

+
+ + 8 hours ago + +
+

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. + Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. + Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. + Duis tristique fringilla magna, eu egestas dolor molestie non. + +

+
+ + Category 1 + + + Category 2 + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+

+ Filter options +

+
+
+
+
+ + Type + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+

+ + Projects + + + (10) + +

+
+
+ + Type 1 + + + + Type 2 + + + + Type 3 + + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+
+ alt img +
+
+
+
+ + Publication with an image + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum. +

+ + 17 October 2019 + +
+ + Type 1 + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + +`; diff --git a/src/compositions/bcl-vacancy/data/data--listing.js b/src/compositions/bcl-vacancy/data/data--listing.js new file mode 100644 index 000000000..60b849a40 --- /dev/null +++ b/src/compositions/bcl-vacancy/data/data--listing.js @@ -0,0 +1,400 @@ +const drupalAttribute = require("drupal-attribute"); + +module.exports = { + sidebar: { + id: "bcl-offcanvas", + attributes: new drupalAttribute().addClass("bcl-offcanvas offcanvas-start"), + extra_classes_close: "d-lg-none", + extra_classes_header: "p-lg-0", + with_body_scroll: true, + title: { + label: "Filter options", + heading: 4, + extra_classes: "mb-lg-4", + }, + search_form: { + attributes: new drupalAttribute() + .setAttribute("novalidate", true) + .setAttribute("onsubmit", "return false;"), + items: [ + [ + { + type: "fieldset", + classes: "col-sm-10", + legend: "Status", + fieldset_classes: "mb-2", + legend_classes: "col-form-label", + }, + { + input_type: "checkbox", + label: "Opened", + wrapper_classes: "mb-2", + checked: true, + id: "opened", + }, + { + input_type: "checkbox", + label: "Closed", + wrapper_classes: "mb-2", + checked: true, + id: "closed", + }, + ], + [ + { + classes: "mb-3", + label: "Type", + type: "select", + id: "type", + options: [ + { value: 1, label: "a select option" }, + { value: 2, label: "another select option" }, + { value: 3, label: "another option" }, + { value: 4, label: "last option" }, + { label: "All", selected: true }, + ], + }, + ], + [ + { + label: "Opening date", + id: "opening-date", + input_type: "date", + attributes: new drupalAttribute().addClass("mb-2"), + }, + ], + [ + { + label: "Closing date", + id: "closing-date", + input_type: "date", + attributes: new drupalAttribute().addClass("mb-3"), + }, + ], + ], + submit: { + multiple: true, + wrapper: "mt-4 d-grid gap-4 d-md-block", + items: [ + { + label: "Refine", + type: "submit", + variant: "primary", + attributes: new drupalAttribute().addClass("me-md-3"), + }, + { + label: "Clear", + type: "submit", + variant: "light", + }, + ], + }, + }, + }, + badges: [ + { + label: "Opened", + background: "light", + dismissible: true, + icon_path: "/icons.svg", + attributes: new drupalAttribute().addClass(["me-2", "mb-2"]), + }, + ], + listing: { + variant: "default-1-col", + remove_horizontal_spacer: true, + responsive_vertical_spacer: "md", + items: [ + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 2", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Senior Expert on Internal Models", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + { + badges: [ + { + label: "Opened", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + { + label: "Type 1", + background: "primary", + outline: true, + rounded_pill: true, + attributes: new drupalAttribute().addClass(["me-2"]), + }, + ], + title: { + content: + "Vacancy exemple title", + }, + text: { + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.", + classes: "mb-2-5", + }, + content: + "Opening date : 19 April 2022Closing date : 21 december 2022", + }, + ], + }, +}; diff --git a/src/compositions/bcl-vacancy/data/data--sidebar-details.js b/src/compositions/bcl-vacancy/data/data--sidebar-details.js new file mode 100644 index 000000000..234e91b20 --- /dev/null +++ b/src/compositions/bcl-vacancy/data/data--sidebar-details.js @@ -0,0 +1,60 @@ +module.exports = { + lists: [ + { + items: [ + { + term: { + label: "Opening date", + }, + definition: [ + { + label: "19 April 2022", + }, + ], + }, + ], + }, + { + items: [ + { + term: { + label: "Closing date", + }, + definition: [ + { + label: "21 December 2022", + }, + ], + }, + ], + }, + { + items: [ + { + term: { + label: "Grade", + }, + definition: [ + { + label: "Grade name", + }, + ], + }, + ], + }, + { + items: [ + { + term: { + label: "Ref. number", + }, + definition: [ + { + label: "394857746532840", + }, + ], + }, + ], + }, + ], +}; diff --git a/src/compositions/bcl-vacancy/data/data.js b/src/compositions/bcl-vacancy/data/data.js new file mode 100644 index 000000000..74d19f901 --- /dev/null +++ b/src/compositions/bcl-vacancy/data/data.js @@ -0,0 +1,235 @@ +const drupalAttribute = require("drupal-attribute"); + +module.exports = { + files: [ + { + title: "File download", + item_title: "File title", + language: "English", + meta: "(16.2 MB - PDF)", + icon_path: "/icons.svg", + download: { + label: "Download", + url: "/example.html", + }, + icon: { + name: "file-pdf-fill", + size: "xl", + }, + translation: { + alignment: "center", + id: "language-dropdown", + label: { + label: "Other languages (3)", + icon_position: "after", + icon: { + name: "caret-down-fill", + size: "2xs", + path: "/icons.svg", + }, + }, + items: [ + { + title: "File title FR", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est.", + language: "Français", + meta: "(16.2 MB - PDF)", + download: { + label: "Download", + url: "/example.html", + }, + }, + { + title: "File title ES", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est.", + language: "Español", + meta: "(16.2 MB - PDF)", + download: { + label: "Download", + url: "/example.html", + }, + }, + { + title: "File title BG", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est.", + language: "български", + meta: "(16.2 MB - PDF)", + download: { + label: "Download", + url: "/example.html", + }, + }, + { + type: "content", + content: + "

Looking for another language which is not on the list?

Find out why.", + }, + ], + }, + icon_path: "/icons.svg", + }, + { + item_title: "File title", + language: "English", + meta: "(16.2 MB - PDF)", + icon_path: "/icons.svg", + download: { + label: "Download", + url: "/example.html", + }, + icon: { + name: "file-pdf-fill", + size: "xl", + }, + translation: { + alignment: "center", + id: "language-dropdown", + label: { + label: "Other languages (3)", + icon_position: "after", + icon: { + name: "caret-down-fill", + size: "2xs", + path: "/icons.svg", + }, + }, + items: [ + { + title: "File title FR", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est.", + language: "Français", + meta: "(16.2 MB - PDF)", + download: { + label: "Download", + url: "/example.html", + }, + }, + { + title: "File title ES", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est.", + language: "Español", + meta: "(16.2 MB - PDF)", + download: { + label: "Download", + url: "/example.html", + }, + }, + { + title: "File title BG", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est.", + language: "български", + meta: "(16.2 MB - PDF)", + download: { + label: "Download", + url: "/example.html", + }, + }, + { + type: "content", + content: + "

Looking for another language which is not on the list?

Find out why.", + }, + ], + }, + icon_path: "/icons.svg", + }, + ], + description: { + title: "Vacancy description", + paragraphs: [ + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. ", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. ", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non.", + ], + }, + social: { + title: "Share this page", + title_id: "share", + }, + social_modal: { + id: "socialModal", + header: + '', + body: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, + footer: + '
', + }, + social_buttons: ` +
+ + + + + + + + + + + + + + + + + + +
`, + button_social_modal: { + label: "More share options", + path: "#", + variant: "link", + attributes: new drupalAttribute() + .setAttribute("data-bs-toggle", "modal") + .setAttribute("data-bs-target", "#socialModal") + .addClass(["text-center", "ms-1"]), + }, +}; diff --git a/src/compositions/bcl-vacancy/package.json b/src/compositions/bcl-vacancy/package.json new file mode 100644 index 000000000..6d75e9d32 --- /dev/null +++ b/src/compositions/bcl-vacancy/package.json @@ -0,0 +1,27 @@ +{ + "name": "@openeuropa/bcl-vacancy", + "author": "European Commission", + "license": "EUPL-1.2", + "version": "0.22.0", + "description": "OE - BCL Vacancy", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@openeuropa/bcl-base-templates": "^0.22.0" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/openeuropa/bootstrap-component-library.git" + }, + "bugs": { + "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues" + }, + "homepage": "https://github.com/openeuropa/bootstrap-component-library", + "keywords": [ + "openeuropa", + "bootstrap-component-library", + "design-system", + "twig" + ] +} diff --git a/src/compositions/bcl-vacancy/vacancy.html.twig b/src/compositions/bcl-vacancy/vacancy.html.twig new file mode 100644 index 000000000..93bc50dc1 --- /dev/null +++ b/src/compositions/bcl-vacancy/vacancy.html.twig @@ -0,0 +1,51 @@ +{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %} + +{% block sidebar %} +
+ {% include '@oe-bcl/bcl-button/button.html.twig' with sidebar.button only %} +

Event Details

+
+ {% for list in sidebar.lists %} +
+ {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with list only %} +
+ {% endfor %} +
+
+{% endblock %} + +{% block content %} + {% if description is defined and description is not empty %} +

+ {{- description.title -}} +

+ {% for paragraph in description.paragraphs %} +

{{- paragraph -}}

+ {% endfor %} + {% endif %} + + {% if files is not empty %} + {% for file in files %} +
+ {% include '@oe-bcl/bcl-file/file.html.twig' with file only %} +
+ {% endfor %} + {% endif %} + + {% if social_block is not empty %} + {% block social_block %} +

+ {{- social.title -}} +

+ {{ social_buttons }} + {% include '@oe-bcl/bcl-button/button.html.twig' with button_social_modal only %} + {% include '@oe-bcl/bcl-modal/modal.html.twig' with social_modal only %} + {% endblock %} + {% endif %} +{% endblock %} diff --git a/src/compositions/bcl-vacancy/vacancy.story.js b/src/compositions/bcl-vacancy/vacancy.story.js new file mode 100644 index 000000000..5e1736153 --- /dev/null +++ b/src/compositions/bcl-vacancy/vacancy.story.js @@ -0,0 +1,113 @@ +import { withDesign } from "storybook-addon-designs"; +import isChromatic from "chromatic/isChromatic"; +import { initBadges, correctPaths } from "@openeuropa/bcl-story-utils"; +import drupalAttribute from "drupal-attribute"; +import { + headerSimple, + footer, +} from "@openeuropa/bcl-base-templates/data/layout"; +import { + filterButton, + pagination, + sortSelect, +} from "@openeuropa/bcl-base-templates/data/listing-page"; +import { + simpleBanner, + banner, +} from "@openeuropa/bcl-base-templates/data/content-page"; +import listingPage from "@openeuropa/bcl-base-templates/listing-page.html.twig"; + +import dataListing from "@openeuropa/bcl-vacancy/data/data--listing"; +import dataContent from "@openeuropa/bcl-vacancy/data/data"; +import dataSidebarDetails from "@openeuropa/bcl-vacancy/data/data--sidebar-details"; +import detailsPage from "@openeuropa/bcl-vacancy/vacancy.html.twig"; + +if (isChromatic()) { + simpleBanner.image.classes = "chromatic-ignore"; + banner.image.classes = "chromatic-ignore"; +} + +const sidebarOpen = { + ...dataSidebarDetails, + button: { + label: "Apply now", + }, +}; + +const sidebarClosed = { + ...dataSidebarDetails, + button: { + label: "Vacancy closed", + }, +}; + +const baseData = { + content_type: "listing", + page_title: "Projects", + header: headerSimple, + footer: { + ...footer, + attributes: new drupalAttribute().addClass("mt-4"), + }, + with_header: true, + with_footer: true, + with_sidebar: true, +}; + +const demoDetails = { + ...baseData, + ...dataContent, + sidebar: sidebarOpen, + banner: { ...simpleBanner, background: "gray" }, + social_block: true, +}; + +const demoDetailsClosed = { + ...baseData, + ...dataContent, + sidebar: sidebarClosed, + banner: { ...simpleBanner, background: "gray" }, + social_block: true, +}; + +const demoListing = { + ...baseData, + ...dataListing, + banner: { ...banner, image_size: "sm", background: "white" }, + pagination: pagination, + filter_button: filterButton, + sort_select: sortSelect, +}; + +export default { + title: "Features/Vacancy", + decorators: [withDesign], + parameters: { + layout: "fullscreen", + controls: { + disable: true, + }, + badges: ["stable"], + badgesConfig: { + stable: { + title: "v1.1", + }, + }, + design: [ + { + name: "Mockup", + type: "figma", + url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=10373%3A187235", + }, + ], + }, +}; + +export const Listing = () => listingPage(correctPaths(demoListing)); +Listing.decorators = [initBadges]; + +export const Opened = () => detailsPage(correctPaths(demoDetails)); +Opened.storyName = "Details (opened)"; + +export const Closed = () => detailsPage(correctPaths(demoDetailsClosed)); +Closed.storyName = "Details (closed)"; diff --git a/src/compositions/bcl-vacancy/vacancy.test.js b/src/compositions/bcl-vacancy/vacancy.test.js new file mode 100644 index 000000000..4c3261067 --- /dev/null +++ b/src/compositions/bcl-vacancy/vacancy.test.js @@ -0,0 +1,99 @@ +import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils"; + +import { + headerSimple, + footer, +} from "@openeuropa/bcl-base-templates/data/layout"; +import drupalAttribute from "drupal-attribute"; +import { + filterButton, + pagination, + sortSelect, +} from "@openeuropa/bcl-base-templates/data/listing-page"; +import { + simpleBanner, + banner, +} from "@openeuropa/bcl-base-templates/data/content-page"; + +import dataListing from "@openeuropa/bcl-publication/data/data--listing"; +import dataContent from "@openeuropa/bcl-publication/data/data"; +import dataSidebarDetails from "@openeuropa/bcl-vacancy/data/data--sidebar-details"; + +const listingTemplate = "@oe-bcl/bcl-base-templates/listing-page.html.twig"; +const detailsTemplate = "@oe-bcl/bcl-vacancy/vacancy.html.twig"; + +const sidebarOpen = { + ...dataSidebarDetails, + button: { + label: "Apply now", + }, +}; + +const sidebarClosed = { + ...dataSidebarDetails, + button: { + label: "Vacancy closed", + attributes: new drupalAttribute().setAttribute("disabled", "true"), + }, +}; + +const baseData = { + content_type: "listing", + page_title: "Projects", + header: headerSimple, + footer: { + ...footer, + attributes: new drupalAttribute().addClass("mt-4"), + }, + with_header: true, + with_footer: true, + with_sidebar: true, +}; + +const demoDetails = { + ...baseData, + ...dataContent, + sidebar: sidebarOpen, + banner: { ...simpleBanner, background: "gray" }, + social_block: true, +}; + +const demoDetailsClosed = { + ...baseData, + ...dataContent, + sidebar: sidebarClosed, + banner: { ...simpleBanner, background: "gray" }, + social_block: true, +}; + +const demoListing = { + ...baseData, + ...dataListing, + banner: { ...banner, image_size: "sm", background: "white" }, + pagination: pagination, + filter_button: filterButton, + sort_select: sortSelect, +}; + +const renderListing = (params) => + renderTwigFileAsNode(listingTemplate, params, true); + +const renderDetails = (params) => + renderTwigFileAsNode(detailsTemplate, params, true); + +describe("OE - Vacancy", () => { + test("listing renders correctly", () => { + expect.assertions(1); + return expect(renderListing(demoListing)).resolves.toMatchSnapshot(); + }); + + test("details (closed) renders correctly", () => { + expect.assertions(1); + return expect(renderDetails(demoDetails)).resolves.toMatchSnapshot(); + }); + + test("details (closed) renders correctly", () => { + expect.assertions(1); + return expect(renderDetails(demoDetailsClosed)).resolves.toMatchSnapshot(); + }); +}); From 629447f7507cee96c8c4c4c31d413442363428a9 Mon Sep 17 00:00:00 2001 From: Tiberiu Dumitru Date: Wed, 20 Apr 2022 10:37:30 +0300 Subject: [PATCH 2/6] Fixed vacancy --- .../__snapshots__/vacancy.test.js.snap | 65 ++----------------- src/compositions/bcl-vacancy/vacancy.story.js | 23 ++++--- src/compositions/bcl-vacancy/vacancy.test.js | 21 +++--- 3 files changed, 32 insertions(+), 77 deletions(-) diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap index 9f69ff229..f3467e8c1 100644 --- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap +++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap @@ -1962,6 +1962,7 @@ exports[`OE - Vacancy details (closed) renders correctly 2`] = ` class="mb-4" > - -
Date: Wed, 20 Apr 2022 13:49:23 +0300 Subject: [PATCH 3/6] PR feedback --- src/compositions/bcl-vacancy/package.json | 7 +------ src/compositions/bcl-vacancy/vacancy.story.js | 4 +++- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/compositions/bcl-vacancy/package.json b/src/compositions/bcl-vacancy/package.json index 6d75e9d32..8c7152d4b 100644 --- a/src/compositions/bcl-vacancy/package.json +++ b/src/compositions/bcl-vacancy/package.json @@ -4,12 +4,7 @@ "license": "EUPL-1.2", "version": "0.22.0", "description": "OE - BCL Vacancy", - "publishConfig": { - "access": "public" - }, - "dependencies": { - "@openeuropa/bcl-base-templates": "^0.22.0" - }, + "private": true, "repository": { "type": "git", "url": "git+https://github.com/openeuropa/bootstrap-component-library.git" diff --git a/src/compositions/bcl-vacancy/vacancy.story.js b/src/compositions/bcl-vacancy/vacancy.story.js index deda61b23..c93864d01 100644 --- a/src/compositions/bcl-vacancy/vacancy.story.js +++ b/src/compositions/bcl-vacancy/vacancy.story.js @@ -19,10 +19,12 @@ import dataContent from "@openeuropa/bcl-vacancy/data/data"; import dataSidebarDetails from "@openeuropa/bcl-vacancy/data/data--sidebar-details"; import detailsPage from "@openeuropa/bcl-vacancy/vacancy.html.twig"; +const chromatic = process.env.STORYBOOK_ENV; + const header = layout[`header_${process.env.STORYBOOK_THEME}`] || layout.headerSimple; -if (isChromatic()) { +if (isChromatic() || chromatic) { simpleBanner.image.classes = "chromatic-ignore"; banner.image.classes = "chromatic-ignore"; } From db7d32d9ce4913e01169c44d812707588ee7b651 Mon Sep 17 00:00:00 2001 From: Tiberiu Dumitru Date: Wed, 20 Apr 2022 13:49:51 +0300 Subject: [PATCH 4/6] PR feedback --- src/compositions/bcl-vacancy/vacancy.story.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/compositions/bcl-vacancy/vacancy.story.js b/src/compositions/bcl-vacancy/vacancy.story.js index c93864d01..885531a52 100644 --- a/src/compositions/bcl-vacancy/vacancy.story.js +++ b/src/compositions/bcl-vacancy/vacancy.story.js @@ -26,7 +26,6 @@ const header = if (isChromatic() || chromatic) { simpleBanner.image.classes = "chromatic-ignore"; - banner.image.classes = "chromatic-ignore"; } const sidebarOpen = { From 62d101f33c45529626300c33834c39159d2a6af9 Mon Sep 17 00:00:00 2001 From: Tiberiu Dumitru Date: Wed, 20 Apr 2022 13:51:32 +0300 Subject: [PATCH 5/6] PR feedback --- src/compositions/bcl-vacancy/vacancy.story.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compositions/bcl-vacancy/vacancy.story.js b/src/compositions/bcl-vacancy/vacancy.story.js index 885531a52..7d738c036 100644 --- a/src/compositions/bcl-vacancy/vacancy.story.js +++ b/src/compositions/bcl-vacancy/vacancy.story.js @@ -25,7 +25,7 @@ const header = layout[`header_${process.env.STORYBOOK_THEME}`] || layout.headerSimple; if (isChromatic() || chromatic) { - simpleBanner.image.classes = "chromatic-ignore"; + pageTitleBanner.image.classes = "chromatic-ignore"; } const sidebarOpen = { From b6da2edfd81be039b63b9f6b199dc71b9a0bf1b5 Mon Sep 17 00:00:00 2001 From: Tiberiu Dumitru Date: Wed, 20 Apr 2022 14:06:12 +0300 Subject: [PATCH 6/6] PR feedback --- src/compositions/bcl-vacancy/.npmignore | 2 -- .../bcl-vacancy/__snapshots__/vacancy.test.js.snap | 10 +++++----- src/compositions/bcl-vacancy/package.json | 7 +++++++ src/compositions/bcl-vacancy/vacancy.story.js | 3 ++- src/compositions/bcl-vacancy/vacancy.test.js | 2 +- 5 files changed, 15 insertions(+), 9 deletions(-) delete mode 100644 src/compositions/bcl-vacancy/.npmignore diff --git a/src/compositions/bcl-vacancy/.npmignore b/src/compositions/bcl-vacancy/.npmignore deleted file mode 100644 index 384605447..000000000 --- a/src/compositions/bcl-vacancy/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -__snapshots__ -*.js diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap index f3467e8c1..7a53e1def 100644 --- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap +++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap @@ -672,10 +672,12 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = ` class="mb-4" >

`; -exports[`OE - Vacancy details (closed) renders correctly 2`] = ` +exports[`OE - Vacancy details (opened) renders correctly 1`] = `

{ return expect(renderListing(demoListing)).resolves.toMatchSnapshot(); }); - test("details (closed) renders correctly", () => { + test("details (opened) renders correctly", () => { expect.assertions(1); return expect(renderDetails(demoDetails)).resolves.toMatchSnapshot(); });