From ca5572955ccd41e0b414acf747b99cbb1a979806 Mon Sep 17 00:00:00 2001 From: Ravisanker E Date: Mon, 14 Oct 2024 22:22:06 +0530 Subject: [PATCH] feat:added accordion component --- blocks/form/_form.json | 1 + .../form/components/accordion/accordion.css | 54 ++++++++ blocks/form/components/accordion/accordion.js | 9 ++ blocks/form/mappings.js | 2 +- component-definition.json | 18 +++ component-filters.json | 1 + component-models.json | 117 ++++++++++++++++++ models/_component-definition.json | 3 + models/_component-models.json | 3 + models/form/_accordion.json | 79 ++++++++++++ 10 files changed, 286 insertions(+), 1 deletion(-) create mode 100644 blocks/form/components/accordion/accordion.css create mode 100644 blocks/form/components/accordion/accordion.js create mode 100644 models/form/_accordion.json diff --git a/blocks/form/_form.json b/blocks/form/_form.json index d75d5d28a8..d0e1e42b46 100644 --- a/blocks/form/_form.json +++ b/blocks/form/_form.json @@ -146,6 +146,7 @@ { "id": "form", "components": [ + "accordion", "checkbox", "checkbox-group", "date-input", diff --git a/blocks/form/components/accordion/accordion.css b/blocks/form/components/accordion/accordion.css new file mode 100644 index 0000000000..ecd4926e24 --- /dev/null +++ b/blocks/form/components/accordion/accordion.css @@ -0,0 +1,54 @@ +/* Accordion styling */ +:root { + --color-accordion-legend-background: #F3F6FD; + --color-accordion-collapse-icon: #1c3fca; + --color-accordion-border: #ecedf3; +} + +main .form fieldset legend.accordion-legend { + padding: 24px 32px 10px; + border-radius: 24px 24px 4px 4px; + background-color: var(--color-accordion-legend-background); + position: relative; +} + +main .form fieldset legend.accordion-legend[data-visible='false'] { + display:block !important; + color:var(--color-accordion-legend-background); + user-select: none; +} + +main .form fieldset legend::after { + content: '\221F'; + color: var(--color-accordion-collapse-icon); + font-size: 19px; + display: inline; + position: absolute; + transition: transform 0s; + transform: rotate(-45deg); + margin-top: -5px; + right: 22px; + cursor: pointer; +} + +main .form fieldset.accordion-collapse legend::after { + transform: rotate(-225deg); + margin-top: 0; +} + +main .form fieldset.accordion-collapse > :not(legend) { + display: none; +} + + +main .form fieldset.accordion-wrapper > :not(legend) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +main .form fieldset.accordion-wrapper { + padding: 15px 0; + border: 1px solid var(--color-accordion-border); + border-bottom-left-radius: 24px; + border-bottom-right-radius: 24px; +} diff --git a/blocks/form/components/accordion/accordion.js b/blocks/form/components/accordion/accordion.js new file mode 100644 index 0000000000..a0af849ec2 --- /dev/null +++ b/blocks/form/components/accordion/accordion.js @@ -0,0 +1,9 @@ +export default function decorate(panel) { + panel.classList.add('accordion-wrapper'); + const legend = panel?.querySelector('legend'); + legend?.classList.add('accordion-legend'); + legend?.addEventListener('click', () => { + panel.classList.toggle('accordion-collapse'); + }); + return panel; +} diff --git a/blocks/form/mappings.js b/blocks/form/mappings.js index ea6fa9a465..ef4a7fb047 100644 --- a/blocks/form/mappings.js +++ b/blocks/form/mappings.js @@ -1,7 +1,7 @@ import { loadCSS } from '../../scripts/aem.js'; let customComponents = []; -const OOTBComponentDecorators = ['file-input', 'wizard', 'modal', 'tnc', 'toggleable-link', 'rating']; +const OOTBComponentDecorators = ['file-input', 'wizard', 'modal', 'tnc', 'toggleable-link', 'rating', 'accordion']; export function setCustomComponents(components) { customComponents = components; diff --git a/component-definition.json b/component-definition.json index e42e1505e1..d367d66330 100644 --- a/component-definition.json +++ b/component-definition.json @@ -193,6 +193,24 @@ "title": "Adaptive Form Components", "id": "form-general", "components": [ + { + "title": "Accordion", + "id": "accordion", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/panelcontainer/v1/panelcontainer", + "template": { + "jcr:title": "Accordion", + "fieldType": "panel", + "fd:viewType": "accordion", + "enabled": true, + "visible": true + } + } + } + } + }, { "title": "Button", "id": "form-button", diff --git a/component-filters.json b/component-filters.json index efcae6858f..4c2a441616 100644 --- a/component-filters.json +++ b/component-filters.json @@ -44,6 +44,7 @@ { "id": "form", "components": [ + "accordion", "checkbox", "checkbox-group", "date-input", diff --git a/component-models.json b/component-models.json index 766794b339..743a4a0cff 100644 --- a/component-models.json +++ b/component-models.json @@ -363,6 +363,123 @@ } ] }, + { + "id": "accordion", + "fields": [ + { + "component": "container", + "name": "basic", + "label": "Basic", + "collapsible": false, + "fields": [ + { + "component": "text", + "name": "name", + "label": "Name", + "valueType": "string", + "required": true, + "valueFormat": "regexp", + "validation": { + "regExp": "^[^$].*", + "customErrorMsg": "Name cannot start with $" + } + }, + { + "component": "text", + "name": "jcr:title", + "label": "Title", + "valueType": "string" + }, + { + "component": "boolean", + "name": "hideTitle", + "label": "Hide title", + "valueType": "boolean" + }, + { + "component": "text", + "name": "dataRef", + "label": "Bind reference", + "valueType": "string" + }, + { + "component": "boolean", + "name": "unboundFormElement", + "label": "Mark as Unbound Form Element", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "visible", + "label": "Show Component", + "valueType": "boolean", + "value": true + }, + { + "component": "boolean", + "name": "enabled", + "label": "Enable Component", + "valueType": "boolean", + "value": true + }, + { + "component": "boolean", + "name": "readOnly", + "label": "Read-only", + "valueType": "boolean" + } + ] + }, + { + "component": "container", + "name": "repeat", + "label": "Repeat Accordion", + "collapsible": true, + "fields": [ + { + "component": "boolean", + "name": "repeatable", + "label": "Make accordion repeatable", + "valueType": "boolean" + }, + { + "component": "number", + "name": "minOccur", + "label": "Minimum repetitions", + "valueType": "number", + "description": "Minimum number of times the accordion appears on the form" + }, + { + "component": "number", + "name": "maxOccur", + "label": "Maximum repetitions", + "valueType": "number", + "description": "Maximum number of times the accordion can appear on the form" + } + ] + }, + { + "component": "container", + "name": "help", + "label": "Help Content", + "collapsible": true, + "fields": [ + { + "component": "richtext", + "name": "description", + "label": "Help text", + "valueType": "string" + }, + { + "component": "richtext", + "name": "tooltip", + "label": "Short description", + "valueType": "string" + } + ] + } + ] + }, { "id": "form-button", "fields": [ diff --git a/models/_component-definition.json b/models/_component-definition.json index 9c89f46078..4e9e54604f 100644 --- a/models/_component-definition.json +++ b/models/_component-definition.json @@ -40,6 +40,9 @@ "title": "Adaptive Form Components", "id": "form-general", "components": [ + { + "...": "./form/_accordion.json#/definitions" + }, { "...": "./form/_button.json#/definitions" }, diff --git a/models/_component-models.json b/models/_component-models.json index 012c4cf6ea..149c48f428 100644 --- a/models/_component-models.json +++ b/models/_component-models.json @@ -17,6 +17,9 @@ { "...": "../blocks/*/_*.json#/models" }, + { + "...": "./form/_accordion.json#/models" + }, { "...": "./form/_button.json#/models" }, diff --git a/models/form/_accordion.json b/models/form/_accordion.json new file mode 100644 index 0000000000..5b814311e6 --- /dev/null +++ b/models/form/_accordion.json @@ -0,0 +1,79 @@ +{ + "definitions": [ + { + "title": "Accordion", + "id": "accordion", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/panelcontainer/v1/panelcontainer", + "template": { + "jcr:title": "Accordion", + "fieldType": "panel", + "fd:viewType": "accordion", + "enabled": true, + "visible": true + } + } + } + } + } + ], + "models": [ + { + "id": "accordion", + "fields": [ + { + "component": "container", + "name": "basic", + "label": "Basic", + "collapsible": false, + "fields": [ + { + "...": "./_common.json#/basicfields" + } + ] + }, + { + "component": "container", + "name": "repeat", + "label": "Repeat Accordion", + "collapsible": true, + "fields": [ + { + "component": "boolean", + "name": "repeatable", + "label": "Make accordion repeatable", + "valueType": "boolean" + }, + { + "component": "number", + "name": "minOccur", + "label": "Minimum repetitions", + "valueType": "number", + "description": "Minimum number of times the accordion appears on the form" + }, + { + "component": "number", + "name": "maxOccur", + "label": "Maximum repetitions", + "valueType": "number", + "description": "Maximum number of times the accordion can appear on the form" + } + ] + }, + { + "component": "container", + "name": "help", + "label": "Help Content", + "collapsible": true, + "fields": [ + { + "...": "./_common.json#/helpfields" + } + ] + } + ] + } + ] +}