Skip to content

Commit

Permalink
feat:added accordion component
Browse files Browse the repository at this point in the history
  • Loading branch information
Ravisanker E authored and Ravisanker E committed Oct 14, 2024
1 parent 2da6a73 commit ca55729
Show file tree
Hide file tree
Showing 10 changed files with 286 additions and 1 deletion.
1 change: 1 addition & 0 deletions blocks/form/_form.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
{
"id": "form",
"components": [
"accordion",
"checkbox",
"checkbox-group",
"date-input",
Expand Down
54 changes: 54 additions & 0 deletions blocks/form/components/accordion/accordion.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 9 additions & 0 deletions blocks/form/components/accordion/accordion.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion blocks/form/mappings.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
18 changes: 18 additions & 0 deletions component-definition.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions component-filters.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
{
"id": "form",
"components": [
"accordion",
"checkbox",
"checkbox-group",
"date-input",
Expand Down
117 changes: 117 additions & 0 deletions component-models.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
3 changes: 3 additions & 0 deletions models/_component-definition.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@
"title": "Adaptive Form Components",
"id": "form-general",
"components": [
{
"...": "./form/_accordion.json#/definitions"
},
{
"...": "./form/_button.json#/definitions"
},
Expand Down
3 changes: 3 additions & 0 deletions models/_component-models.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
{
"...": "../blocks/*/_*.json#/models"
},
{
"...": "./form/_accordion.json#/models"
},
{
"...": "./form/_button.json#/models"
},
Expand Down
79 changes: 79 additions & 0 deletions models/form/_accordion.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
]
}
]
}
]
}

0 comments on commit ca55729

Please sign in to comment.