From 61cc3aed18b2aafc5dc3ba11204be0f81d9e4ac1 Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Tue, 21 Jan 2025 16:14:32 +1000 Subject: [PATCH] QGDS-22-Accordion Init --- src/components/accordion/accordion.data.json | 24 + src/components/accordion/accordion.hbs | 38 ++ src/components/accordion/accordion.js | 8 + .../{css/component.scss => accordion.scss} | 0 src/components/accordion/accordion.stories.js | 120 +++++ src/components/accordion/{js => }/global.js | 0 .../accordion/html/accordion-group.html | 157 ------- src/components/accordion/html/component.hbs | 44 -- src/components/accordion/html/default.html | 92 ---- src/components/accordion/html/example1.json | 428 ------------------ .../accordion/html/example1.test.hbs | 1 - src/components/accordion/html/example2.html | 18 - src/components/accordion/html/example3.html | 18 - src/components/accordion/html/example4.html | 53 --- src/components/accordion/html/example5.html | 53 --- src/components/accordion/html/schema.json | 130 ------ src/components/accordion/index.js | 32 ++ src/components/accordion/js/manifest.json | 428 ------------------ src/components/accordion/stories/Overview.mdx | 173 ------- .../accordion/stories/accordion.stories.js | 104 ----- .../accordion/stories/classesTable.md | 7 - src/js/index.js | 2 + 22 files changed, 224 insertions(+), 1706 deletions(-) create mode 100644 src/components/accordion/accordion.data.json create mode 100644 src/components/accordion/accordion.hbs create mode 100644 src/components/accordion/accordion.js rename src/components/accordion/{css/component.scss => accordion.scss} (100%) create mode 100644 src/components/accordion/accordion.stories.js rename src/components/accordion/{js => }/global.js (100%) delete mode 100644 src/components/accordion/html/accordion-group.html delete mode 100644 src/components/accordion/html/component.hbs delete mode 100644 src/components/accordion/html/default.html delete mode 100644 src/components/accordion/html/example1.json delete mode 100644 src/components/accordion/html/example1.test.hbs delete mode 100644 src/components/accordion/html/example2.html delete mode 100644 src/components/accordion/html/example3.html delete mode 100644 src/components/accordion/html/example4.html delete mode 100644 src/components/accordion/html/example5.html delete mode 100644 src/components/accordion/html/schema.json create mode 100644 src/components/accordion/index.js delete mode 100644 src/components/accordion/js/manifest.json delete mode 100644 src/components/accordion/stories/Overview.mdx delete mode 100644 src/components/accordion/stories/accordion.stories.js delete mode 100644 src/components/accordion/stories/classesTable.md diff --git a/src/components/accordion/accordion.data.json b/src/components/accordion/accordion.data.json new file mode 100644 index 00000000..11939a6d --- /dev/null +++ b/src/components/accordion/accordion.data.json @@ -0,0 +1,24 @@ +{ + "id": "123", + "heading": "Accordions expand and collapse sections of content.", + "intro": "

There are 2 types of accordions available in the Design System, single action accordions and accordion groups.

", + "theme": "dark", + "toggle_all": true, + "component": [ + { + "com_id": "1", + "title": "Accordion Heading 01", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + }, + { + "com_id": "2", + "title": "Accordion Heading 02", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + }, + { + "com_id": "3", + "title": "Accordion Heading 03", + "content": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + } + ] +} diff --git a/src/components/accordion/accordion.hbs b/src/components/accordion/accordion.hbs new file mode 100644 index 00000000..aab13c75 --- /dev/null +++ b/src/components/accordion/accordion.hbs @@ -0,0 +1,38 @@ +
+
+ + {{#if heading}} +

{{heading}}

+ {{/if}} + + {{#if intro}} + {{{intro}}} + {{/if}} + +
+ {{#if toggle_all}} +
+ +
+ {{/if}} +
    + {{#each component}} +
  • +
    + + +
    +
    + {{{this.content}}} +
    +
    +
    +
    • + {{/each}} +
+
+
+
+ diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js new file mode 100644 index 00000000..034a14e0 --- /dev/null +++ b/src/components/accordion/accordion.js @@ -0,0 +1,8 @@ +/** + * Back To Top component logic attached to an init() function. + * This logic is imported by the component's entry file (index.js) and ships with the component. + */ + +export default { + init() {}, +}; diff --git a/src/components/accordion/css/component.scss b/src/components/accordion/accordion.scss similarity index 100% rename from src/components/accordion/css/component.scss rename to src/components/accordion/accordion.scss diff --git a/src/components/accordion/accordion.stories.js b/src/components/accordion/accordion.stories.js new file mode 100644 index 00000000..1d7cc27f --- /dev/null +++ b/src/components/accordion/accordion.stories.js @@ -0,0 +1,120 @@ +/** + * @file banner.stories.js + * @description Storybook configuration file for the Accordion component. + * @module accordion.stories + */ + +import { QGDS } from "../../js/index.js"; +import mockupData from "./accordion.data.json"; + +export default { + title: "Components / Accordion", + render: (args) => { + try { + return new QGDS.Accordion({ data: args }).htmlstring; + } catch (e) { + return JSON.stringify(e) + JSON.stringify(args); + } + }, + args: mockupData, + argTypes: { + theme: { + control: "select", + options: ["light", "alt", "dark", "dark-alt"], + }, + }, +}; + +export const Light = { + args: { + ...mockupData, + theme: "light", + heading: "Light Single.", + toggle_all: false, + id: "124", + component: [ + { + com_id: "1", + title: "Accordion Heading 01", + content: + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + }, + ], + }, +}; +export const Alt = { + args: { + ...mockupData, + theme: "alt", + toggle_all: false, + id: "125", + component: [ + { + com_id: "1", + title: "Accordion Heading 01", + content: + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + }, + ], + }, +}; +export const Dark = { + args: { + ...mockupData, + theme: "dark", + toggle_all: false, + id: "126", + component: [ + { + com_id: "1", + title: "Accordion Heading 02", + content: + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + }, + ], + }, +}; +export const DarkAlt = { + args: { + ...mockupData, + theme: "dark-alt", + toggle_all: false, + id: "127", + component: [ + { + com_id: "1", + title: "Accordion Heading 02", + content: + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + }, + ], + }, +}; +export const LightGroup = { + args: { + ...mockupData, + theme: "light", + id: "128", + }, +}; +export const LightAltGroup = { + args: { + ...mockupData, + theme: "alt", + id: "129", + }, +}; +export const DarkGroup = { + args: { + ...mockupData, + theme: "dark", + id: "130", + }, +}; +export const DarkAltGroup = { + args: { + ...mockupData, + theme: "dark-alt", + id: "131", + }, +}; diff --git a/src/components/accordion/js/global.js b/src/components/accordion/global.js similarity index 100% rename from src/components/accordion/js/global.js rename to src/components/accordion/global.js diff --git a/src/components/accordion/html/accordion-group.html b/src/components/accordion/html/accordion-group.html deleted file mode 100644 index e87efc2d..00000000 --- a/src/components/accordion/html/accordion-group.html +++ /dev/null @@ -1,157 +0,0 @@ -
-
- - diff --git a/src/components/accordion/html/component.hbs b/src/components/accordion/html/component.hbs deleted file mode 100644 index 667abb23..00000000 --- a/src/components/accordion/html/component.hbs +++ /dev/null @@ -1,44 +0,0 @@ -
-
- - {{#with component.data}} - {{#if metadata.heading.value}} -

{{metadata.heading.value}}

- {{/if}} - - {{#if metadata.intro.value}} - {{{metadata.intro.value}}} - {{/if}} -
- {{#ifCond metadata.toggle_all.value '==' 'yes'}} -
- -
- {{/ifCond}} -
    - {{#printAccordion metadata}} - {{#ifCond this.content '!=' ''}} -
  • -
    - - -
    -
    - {{{this.content}}} -
    -
    -
    -
    • - {{/ifCond}} - {{/printAccordion}} -
-
- {{/with}} - -{{!-- {{#ifCond current.data.metadata.pageType.value '==' 'landing'}} --}} -
-
-{{!-- {{/ifCond}} --}} - diff --git a/src/components/accordion/html/default.html b/src/components/accordion/html/default.html deleted file mode 100644 index 736baddd..00000000 --- a/src/components/accordion/html/default.html +++ /dev/null @@ -1,92 +0,0 @@ -
-
- - diff --git a/src/components/accordion/html/example1.json b/src/components/accordion/html/example1.json deleted file mode 100644 index 053a0782..00000000 --- a/src/components/accordion/html/example1.json +++ /dev/null @@ -1,428 +0,0 @@ -{ - "component": { - "name": "Accordion", - "description": "", - "version": "1.0", - "status": "Released", - "children": [], - "data": { - "assetid": "123", - "metadata": { - "theme": { - "type": "metadata_field_select", - "description": "", - "friendly_name": "Theme", - "value": "", - "options": { - "": "White", - "qld__accordion-group--light": "Light", - "qld__accordion-group--alt": "Alternate", - "qld__accordion-group--dark": "Dark", - "qld__accordion-group--dark-alt": "Alternate Dark" - }, - "required": false, - "editable": true - }, - "toggle_all": { - "type": "metadata_field_select", - "description": "", - "friendly_name": "Display toggle all?", - "value": "yes", - "options": { - "": "No", - "yes": "Yes" - }, - "required": false, - "editable": true - }, - "heading": { - "type": "metadata_field_text", - "description": "", - "friendly_name": "Heading", - "value": "Content", - "required": false, - "editable": true - }, - "intro": { - "type": "metadata_field_wysiwyg", - "description": "", - "friendly_name": "Intro content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat1.", - "required": false, - "editable": true - }, - "accordion_num": { - "type": "metadata_field_select", - "description": "", - "friendly_name": "Number of accordions", - "value": "3", - "options": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10" - }, - "required": false, - "editable": true - }, - "title_1": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_1", - "friendly_name": "Accordion 1 - Title", - "value": "Content", - "required": false, - "editable": true - }, - "content_1": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_1", - "friendly_name": "Accordion 1 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat2.", - "required": false, - "editable": true - }, - "title_2": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_2", - "friendly_name": "Accordion 2 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "1" - }] - } - }, - "content_2": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_2", - "friendly_name": "Accordion 2 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat3.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "1" - }] - } - }, - "title_3": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_3", - "friendly_name": "Accordion 3 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "2" - }] - } - }, - "content_3": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_3", - "friendly_name": "Accordion 3 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat4.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "2" - }] - } - }, - "title_4": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_4", - "friendly_name": "Accordion 4 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "3" - }] - } - }, - "content_4": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_4", - "friendly_name": "Accordion 4 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat6.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "3" - }] - } - }, - "title_5": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_5", - "friendly_name": "Accordion 5 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "4" - }] - } - }, - "content_5": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_5", - "friendly_name": "Accordion 5 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat7.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "4" - }] - } - }, - "title_6": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_6", - "friendly_name": "Accordion 6 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "5" - }] - } - }, - "content_6": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_6", - "friendly_name": "Accordion 6 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat8.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "5" - }] - } - }, - "title_7": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_7", - "friendly_name": "Accordion 7 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "6" - }] - } - }, - "content_7": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_7", - "friendly_name": "Accordion 7 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat9.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "6" - }] - } - }, - "title_8": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_8", - "friendly_name": "Accordion 8 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "7" - }] - } - }, - "content_8": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_8", - "friendly_name": "Accordion 8 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat10.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "7" - }] - } - }, - "title_9": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_9", - "friendly_name": "Accordion 9 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "8" - }] - } - }, - "content_9": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_9", - "friendly_name": "Accordion 9 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat11.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "8" - }] - } - }, - "title_10": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_10", - "friendly_name": "Accordion 10 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "9" - }] - } - }, - "content_10": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_10", - "friendly_name": "Accordion 10 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat12.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "9" - }] - } - }, - "id_field": { - "type": "metadata_field_text", - "description": "", - "friendly_name": "Id field", - "value": "", - "required": false, - "editable": true - } - } - } - } - -} diff --git a/src/components/accordion/html/example1.test.hbs b/src/components/accordion/html/example1.test.hbs deleted file mode 100644 index ed0c0c74..00000000 --- a/src/components/accordion/html/example1.test.hbs +++ /dev/null @@ -1 +0,0 @@ -{{> accordion }} diff --git a/src/components/accordion/html/example2.html b/src/components/accordion/html/example2.html deleted file mode 100644 index 2ac3db3e..00000000 --- a/src/components/accordion/html/example2.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
- - -
-
- Here is some accordion content -
-
-
-
-
-
diff --git a/src/components/accordion/html/example3.html b/src/components/accordion/html/example3.html deleted file mode 100644 index 2356555c..00000000 --- a/src/components/accordion/html/example3.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
- - -
-
- Here is some accordion content -
-
-
-
-
-
diff --git a/src/components/accordion/html/example4.html b/src/components/accordion/html/example4.html deleted file mode 100644 index 0be6b518..00000000 --- a/src/components/accordion/html/example4.html +++ /dev/null @@ -1,53 +0,0 @@ -
-
-
-
- -
-
    -
  • -
    - - -
    -
    - Here is some accordion content -
    -
    -
    -
    • -
  • -
    - - -
    -
    - Here is some accordion content -
    -
    -
    -
    • -
  • -
    - - -
    -
    - Here is some accordion content -
    -
    -
    -
    • -
-
-
-
diff --git a/src/components/accordion/html/example5.html b/src/components/accordion/html/example5.html deleted file mode 100644 index d2397a64..00000000 --- a/src/components/accordion/html/example5.html +++ /dev/null @@ -1,53 +0,0 @@ -
-
-
-
- -
-
    -
  • -
    - - -
    -
    - Here is some accordion content -
    -
    -
    -
    • -
  • -
    - - -
    -
    - Here is some accordion content -
    -
    -
    -
    • -
  • -
    - - -
    -
    - Here is some accordion content -
    -
    -
    -
    • -
-
-
-
diff --git a/src/components/accordion/html/schema.json b/src/components/accordion/html/schema.json deleted file mode 100644 index d8b3617a..00000000 --- a/src/components/accordion/html/schema.json +++ /dev/null @@ -1,130 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "required": [ - "component" - ], - "properties": { - "component": { - "type": "object", - "required": [ - "name", - "version", - "status", - "children", - "data" - ], - "properties": { - "name": { - "type": "string" - }, - "description": { - "type": "string" - }, - "version": { - "type": "string" - }, - "status": { - "type": "string" - }, - "children": { - "type": "array", - "items": {} - }, - "data": { - "type": "object", - "required": [ - "assetid", - "metadata" - ], - "properties": { - "assetid": { - "type": "string" - }, - "metadata": { - "type": "object", - "patternProperties": { - "^[a-zA-Z_0-9]+$": { - "type": "object", - "required": [ - "type", - "friendly_name", - "value", - "editable" - ], - "properties": { - "type": { - "type": "string" - }, - "description": { - "type": "string" - }, - "friendly_name": { - "type": "string" - }, - "value": { - "type": "string" - }, - "options": { - "type": "object", - "additionalProperties": { - "type": "string" - } - }, - "required": { - "type": "boolean" - }, - "editable": { - "type": "boolean" - }, - "fieldid": { - "type": "string" - }, - "display_if": { - "type": "object", - "required": [ - "show", - "operator", - "rules" - ], - "properties": { - "show": { - "type": "boolean" - }, - "operator": { - "type": "string" - }, - "rules": { - "type": "array", - "items": { - "type": "object", - "required": [ - "field", - "operator", - "value" - ], - "properties": { - "field": { - "type": "string" - }, - "operator": { - "type": "string" - }, - "value": { - "type": "string" - } - } - } - } - } - } - } - } - } - } - } - } - } - } - } -} diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js new file mode 100644 index 00000000..402ddb1a --- /dev/null +++ b/src/components/accordion/index.js @@ -0,0 +1,32 @@ +/** + * @file index.js + * @description Accordion Component entry file (index.js). + * @module accordion + */ + +// Imports QGDS Component utility: +import QGDSComponent from "./../../js/QGDSComponent.js"; + +// Imports resources needed to nake our "Accordion" component: +import hbstemplate from "./accordion.hbs?raw"; +import meta from "./accordion.data.json"; + +/** + * @function Accordion + * @description The Accordion component. + * @param {object} data - The data to be used in the template. + * @param {string} template - The template to render. + * @returns {object} - A new instance of the QGDSComponent class, contained properties: template, meta, htmlstring, node. + */ + +export default function Accordion({ data, template = hbstemplate }) { + //Minimum required fields for the component to function + const props = { + data: data, + template: template, + required: ["component", "theme"], + meta: meta || {}, + }; + + return new QGDSComponent("Accordion", props); +} diff --git a/src/components/accordion/js/manifest.json b/src/components/accordion/js/manifest.json deleted file mode 100644 index db9d654f..00000000 --- a/src/components/accordion/js/manifest.json +++ /dev/null @@ -1,428 +0,0 @@ -{ - "component": { - "name": "Accordion", - "description": "", - "version": "1.0", - "status": "Released", - "children": [], - "data": { - "assetid": "123", - "metadata": { - "theme": { - "type": "metadata_field_select", - "description": "", - "friendly_name": "Theme", - "value": "default", - "options": { - "": "White", - "qld__accordion-group--light": "Light", - "qld__accordion-group--alt": "Alternate", - "qld__accordion-group--dark": "Dark", - "qld__accordion-group--dark-alt": "Alternate Dark" - }, - "required": false, - "editable": true - }, - "toggle_all": { - "type": "metadata_field_select", - "description": "", - "friendly_name": "Display toggle all?", - "value": "yes", - "options": { - "": "No", - "yes": "Yes" - }, - "required": false, - "editable": true - }, - "heading": { - "type": "metadata_field_text", - "description": "", - "friendly_name": "Heading", - "value": "Content", - "required": false, - "editable": true - }, - "intro": { - "type": "metadata_field_wysiwyg", - "description": "", - "friendly_name": "Intro content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true - }, - "accordion_num": { - "type": "metadata_field_select", - "description": "", - "friendly_name": "Number of accordions", - "value": "3", - "options": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10" - }, - "required": false, - "editable": true - }, - "title_1": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_1", - "friendly_name": "Accordion 1 - Title", - "value": "Content", - "required": false, - "editable": true - }, - "content_1": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_1", - "friendly_name": "Accordion 1 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true - }, - "title_2": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_2", - "friendly_name": "Accordion 2 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "1" - }] - } - }, - "content_2": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_2", - "friendly_name": "Accordion 2 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "1" - }] - } - }, - "title_3": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_3", - "friendly_name": "Accordion 3 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "2" - }] - } - }, - "content_3": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_3", - "friendly_name": "Accordion 3 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "2" - }] - } - }, - "title_4": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_4", - "friendly_name": "Accordion 4 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "3" - }] - } - }, - "content_4": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_4", - "friendly_name": "Accordion 4 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "3" - }] - } - }, - "title_5": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_5", - "friendly_name": "Accordion 5 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "4" - }] - } - }, - "content_5": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_5", - "friendly_name": "Accordion 5 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "4" - }] - } - }, - "title_6": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_6", - "friendly_name": "Accordion 6 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "5" - }] - } - }, - "content_6": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_6", - "friendly_name": "Accordion 6 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "5" - }] - } - }, - "title_7": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_7", - "friendly_name": "Accordion 7 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "6" - }] - } - }, - "content_7": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_7", - "friendly_name": "Accordion 7 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "6" - }] - } - }, - "title_8": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_8", - "friendly_name": "Accordion 8 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "7" - }] - } - }, - "content_8": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_8", - "friendly_name": "Accordion 8 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "7" - }] - } - }, - "title_9": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_9", - "friendly_name": "Accordion 9 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "8" - }] - } - }, - "content_9": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_9", - "friendly_name": "Accordion 9 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "8" - }] - } - }, - "title_10": { - "type": "metadata_field_text", - "description": "", - "fieldid":"title_10", - "friendly_name": "Accordion 10 - Title", - "value": "Content", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "9" - }] - } - }, - "content_10": { - "type": "metadata_field_wysiwyg", - "description": "", - "fieldid":"content_10", - "friendly_name": "Accordion 10 - Content", - "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "required": false, - "editable": true, - "display_if": { - "show": true, - "operator": "AND", - "rules": [{ - "field": "accordion_num", - "operator": "greater_than", - "value": "9" - }] - } - }, - "id_field": { - "type": "metadata_field_text", - "description": "", - "friendly_name": "Id field", - "value": "", - "required": false, - "editable": true - } - } - } - } - -} \ No newline at end of file diff --git a/src/components/accordion/stories/Overview.mdx b/src/components/accordion/stories/Overview.mdx deleted file mode 100644 index 5809b5db..00000000 --- a/src/components/accordion/stories/Overview.mdx +++ /dev/null @@ -1,173 +0,0 @@ -import { Canvas, Meta, Story, Markdown } from "@storybook/blocks" -import * as AccordionStories from "./accordion.stories" -import classTable from "./classesTable.md?raw" - - - -# Accordions - - -May also be known as: ``Labels``, ``tokens`` or ``chips`` - -[Figma](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=23167%3A395554&t=jyGWG7bzBaAX7IIY-1) - -# Overview - -Accordions expand and collapse sections of content. - -There are 2 types of accordions available in the Design System, single action accordions and accordion groups. - -## Single action accordion - -A singular method of expanding and collapsing a piece of content with a title. These are best used for transcripts of videos, or for references at the footer of an article. - -Example - - - - - -[Figma](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=23167%3A395554&t=jyGWG7bzBaAX7IIY-1) - - -## Accordion group - - -A group of accordions that expand and collapse on click. Only the accordion that's clicked changes. - - -Example - - - - - - - -[Figma](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=23167%3A395554&t=jyGWG7bzBaAX7IIY-1) - -* * * - - -# Usage guidelines - -## When to use it - -We recommend accordions be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions aren’t a suitable replacement for well formatted plain text. If a user needs all, or most of the information on the page it should be visible, not hidden inside an accordion. - -Before using an accordion, consider whether the benefits outweigh the negative usability impacts. - -* **Hiding content makes it harder for a user to scan a webpage**. If your content is hidden inside an accordion, it can be difficult for a user to scan the whole page for content relevant to them. Web browsers' ‘Find on page…' search functions don’t detect content hidden by accordions, making it harder for users to locate text. -* **Accordions increase cognitive load**. Forcing a user to click on each accordion to get the full text fragments their user experience, causing them to switch focus between accordions to get to the information. It’s also possible with hidden content, that a user might not see important information. - -**Accordions can be suitable** when users need only a few key pieces of content on a single page. By hiding unimportant content within an accordion, users can efficiently focus on the few topics that matter (Loranger 2014). - -### Open all and close all button - -If you have 3 or more accordion buttons in a stack, you can add the expand and close all button as an option. - -## When not to use it - -* If the amount of content it would need to contain will make the page slow to load -* To split up a series of questions into sections, use separate pages instead -* With very short content, use lists or paragraphs -* With very long content, use tabs or separate pages -* With any other UI elements within the header -* For important information which if hidden could be missed -* Just to shorten a page - -**Accordions should be avoided** when your audience needs most or all of the content on the page to answer their questions (Loranger 2014). - -* * * - -# Design - -## Research and rationale - - -Our accordion design and guidelines are based on the best practice and research outlined by the [DTA](https://gold.designsystemau.org/components/accordion/) (Digital Transformation Agency, 2018, Accordions section). The only modifications to this design was to include the addition of open all and close all functionality. - -### Single action accordions - -Accordion elements on some websites collapse any open panels when another one is opened. This behaviour can seem unpredictable for some users, which is why our accordion components don’t behave in that way. - -We want to make sure that users have full control over what content remains visible to minimise any confusion when content suddenly ‘disappears’ from view. - -### Iconography - -We use an up and down chevron icon to represent our collapsible element, rather than a plus or minus, or arrows alternative. - -Plus, and minus icons can better describe different functionality. For example, adding a dependent child to a form. The arrows are more closely aligned to navigation. - -## Implementation - -### Classes - - -{classTable} - - -* * * - -# Accessibility - -## Accessible accordion requirements - - -Keep these considerations in mind if you're modifying the Design System or creating a custom component. - -### WCAG guidelines  2.1 - -#### 1.3.1 Info and Relationships - -Ensure that the information, structure, and relationships conveyed through the accordion's presentation can be programmatically determined or are available in text. For example, the relationship between the accordion header and the content it controls should be clear to assistive technologies. - -#### 1.4.3 Contrast (Minimum) - -Ensure that text labels and icons in the accordion component have a sufficient colour contrast ratio against their background (at least 4.5:1 for normal text and 3:1 for large text). - -#### 2.1.1 Keyboard Accessible - -Ensure that the accordion header buttons are focusable and can be expanded or collapsed using the keyboard, typically by pressing Enter or Space. Add keyboard support to allow users to use the arrow keys to navigate through the accordion headers. - -#### 2.4.3 Focus Order - -Ensure that the accordion elements receive focus in an order that preserves meaning and operability. Typically, this means that focus moves to the contents of a section when it is expanded, and moves to the next header when a section is collapsed. When an accordion header is in focus, it must have a visible focus outline. This ensures that keyboard-only users can perceive which element within the accordion has the keyboard focus. - -#### 2.4.6 Headings and Labels - -Headers should describe the topic or purpose and should be unique where possible, allowing users, particularly screen reader users, to navigate effectively. - -#### 3.2.2 On Input - -Changes of context, such as expanding a panel, should be initiated only by user request and not automatically by a change in an input element or setting. - -#### 4.1.2 Name, Role, Value - -For accordion headers that are interactive, use ARIA attributes to provide an accessible name, ensure the correct role is conveyed, and ensure that the component can be operated by assistive technologies. Additionally, use ARIA to indicate the expanded or collapsed state of the accordion. - - -* * * - -# Related components - - -[Tabs](tabs.html) FIXME - -# References - - -Digital Transformation Agency (2018) [Accoridon](https://designsystem.gov.au/), _Gold Design System (Formerly DTA)_, accessed 10 April 2023. - -Laubheimer P and Budiu R. (2020). [Accordion Icons: Definition, Best Practices, and Examples](https://www.nngroup.com/articles/accordion-icons). Nielsen Norman Group, accessed 10 April 2023. - -W3C (2018) [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21), World Wide Web Consortium, accessed 10 April 2023. - -Loranger H (2014). [Accordion Icons: Definition, Best Practices, and Examples](https://www.nngroup.com/articles/accordions-complex-content/). Nielsen Norman Group, accessed 10 April 2023. - - -**Last updated:** May 2024 diff --git a/src/components/accordion/stories/accordion.stories.js b/src/components/accordion/stories/accordion.stories.js deleted file mode 100644 index 26a4b458..00000000 --- a/src/components/accordion/stories/accordion.stories.js +++ /dev/null @@ -1,104 +0,0 @@ -/** - * @file banner.stories.js - * @description Storybook configuration file for the Accordion component. - * @module accordion.stories - */ - -import example1 from "../html/example1.json"; -import example1template from "./../html/example1.test.hbs?raw"; -import example2html from "./../html/example2.html?raw"; -import example3html from "./../html/example3.html?raw"; -import example4html from "./../html/example4.html?raw"; -import example5html from "./../html/example5.html?raw"; - - -// load helpers handlebars -import Handlebars from "handlebars"; -import handlebarsInit from "../../../helpers/handlebars.init.js"; - - -export default { - title: "Components/Accordion", - render: ( args) => { - handlebarsInit(Handlebars) - try { - return Handlebars.compile(example1template )(args) - } catch (e) { - console.log(e) - return JSON.stringify(e) + JSON.stringify(args); - } - }, - args: example1, - - - /** - * Additional parameters for the story. - * - * @type {Object} - * @property {Object} design - Configuration for the design parameter. - * @property {string} design.name - Name of the design parameter. - * @property {string} design.type - Type of the design parameter. - * @property {string} design.url - URL of the design parameter. - */ - parameters: { - design: { - name: "QGDS Figma Reference", - type: "figma", - url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=23167-395554", - }, - }, -}; - -/** - * Default Accordion story - */ -export const Default = {}; - -/** - * Single light - */ -export const SingleLight = { - render: () => { - return example2html; - - }, - args: {}, - globals: { theme: 'None'}, - -} -/** - * Single dark - */ -export const SingleDark = { - render: () => { - return example3html; - - }, - args: {}, - globals: { theme: 'Dark'}, - -} -/** - * Multi light - */ -export const MultiLight = { - render: () => { - return example4html; - - }, - args: {}, - globals: { theme: 'None'}, - -} -/** - * Single dark - */ -export const MultiDark = { - render: () => { - return example5html; - - }, - args: {}, - globals: { theme: 'Dark' }, - -} diff --git a/src/components/accordion/stories/classesTable.md b/src/components/accordion/stories/classesTable.md deleted file mode 100644 index 2f2c97a5..00000000 --- a/src/components/accordion/stories/classesTable.md +++ /dev/null @@ -1,7 +0,0 @@ -| Name | Description | -|----------------------------|-------------------------------------| -| `qld__accordion--closed` | Closed state. | -| `qld__accordion--open` | Open state. | -| `qld__accordion--alt` | Variation for alt backgrounds. | -| `qld__accordion--dark` | Variation for dark backgrounds. | -| `qld__accordion--dark-alt` | Variation for dark-alt backgrounds. | diff --git a/src/js/index.js b/src/js/index.js index 55f5219b..f33c9e69 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -3,9 +3,11 @@ import Breadcrumbs from "../components/breadcrumbs/index.js"; // import Button from "../components/button/index.js"; import BackToTop from "../components/back_to_top/index.js"; // import Dropdown from "../components/dcropdown/index.js"; +import Accordion from "../components/accordion/index.js"; export const QGDS = { Example, Breadcrumbs, BackToTop, + Accordion, };