Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QGDS-22-Accordion Init #247

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

QGDS-22-Accordion Init #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61cc3ae
QGDS-22-Accordion Init
SenChung Jan 21, 2025
07a811b
Merge branch 'develop' into QGDS-22-Accordion
SenChung Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/components/accordion/accordion.data.json
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is replacing html/example1.json which is the qh hbs input data.

i do like how it is cleaned up but this is not backwards compatible. Which may be ok if that is how we want to move. But in doing so we need to ensure we provide a 'migration' readme or a js wrapper that takes the old style json and updates to the format required for the new hbs template. { thats if we want qh to be able to use this in the future }

Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"id": "123",
"heading": "Accordions expand and collapse sections of content.",
"intro": "<p>There are 2 types of accordions available in the Design System, single action accordions and accordion groups.</p>",
"theme": "dark",
"toggle_all": true,
"component": [
{
"com_id": "1",
"title": "Accordion Heading 01",
"content": "<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipiscing</a> 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.</p>"
},
{
"com_id": "2",
"title": "Accordion Heading 02",
"content": "<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipiscing</a> 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.</p>"
},
{
"com_id": "3",
"title": "Accordion Heading 03",
"content": "<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipiscing</a> 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.</p>"
}
]
}
38 changes: 38 additions & 0 deletions src/components/accordion/accordion.hbs
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i thought this would have broken https://github.com/qld-gov-au/qgds-vanilla/blob/develop/src/components/_global/css/body/stories/allTypography.json but its not used there.

Be aware that the move to removing the .data. wrapper does make it harder to do have a global template and just pass in a huge json file. like
https://github.com/qld-gov-au/qgds-vanilla/blob/develop/src/stories/templates/global-body/global-body-all_typography.json
e.g.

{
  "items": [
    {
      "component": {
        "type": "h1",
        "data": {
          "metadata": {
            "id_field": {
              "value": "h1id"
            }
          },
          "content": {
            "value": "Heading 1"
          }
        }
      }
    },

now cant be auto including this template as its not conformant to the pattern used everywhere else.

unsure how we should go forward on this. i.e. have this called internal which is more streamlined and have the accordion hbs re jig the array to pass through, or a js helper function added to do the rejig pass through to stay backwards compatible.

Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<section class="qld__body">
<div class="container-fluid">

{{#if heading}}
<h2>{{heading}}</h2>
{{/if}}

{{#if intro}}
{{{intro}}}
{{/if}}

<div class="qld__accordion-group qld__accordion-group--{{theme}}" id="accordion-group--{{id}}">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to move away from qld__accordion-group--{{theme}} to just using the 'qld-{{theme}}' to css bloat.

{{#if toggle_all}}
<div class="qld__accordion__toggle">
<button class="qld__accordion__toggle-btn qld__accordion__toggle-btn--closed" type="button">Open all</button>
</div>
{{/if}}
<ul class="qld__accordion-list">
{{#each component}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you have dropped {{#printAccordion metadata}}
did you work out what that was?

<li>
<div class="qld__accordion">
<button class="qld__accordion__title js-qld__accordion qld__accordion--closed" aria-controls="{{../theme}}_{{../id}}_{{this.com_id}}" aria-expanded="false">
{{this.title}}
</button>

<div class="qld__accordion__body qld__accordion--closed" id="{{../theme}}_{{../id}}_{{this.com_id}}">
<div class="qld__accordion__body-wrapper">
{{{this.content}}}
</div>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</section>

8 changes: 8 additions & 0 deletions src/components/accordion/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this for building or for browser runtime?

* 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() {},
};
0 src/components/accordion/css/component.scss → src/components/accordion/accordion.scss
View file
Open in desktop
File renamed without changes.
120 changes: 120 additions & 0 deletions src/components/accordion/accordion.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was title: "Components/Accordion",

render: (args) => {
try {
return new QGDS.Accordion({ data: args }).htmlstring;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is over engineered, just do

render: ( args) => {
        handlebarsInit(Handlebars)
        try {
            return Handlebars.compile("{{> accordion }}")(args)
        } catch (e) {
            console.log(e)
            return JSON.stringify(e) + JSON.stringify(args);
        }
    },

} catch (e) {
return JSON.stringify(e) + JSON.stringify(args);
}
},
args: mockupData,
argTypes: {
theme: {
control: "select",
options: ["light", "alt", "dark", "dark-alt"],
},
},
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please put back the figma links

 /**
     * 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",
        },
    },


export const Light = {
args: {
...mockupData,
theme: "light",
heading: "Light Single.",
toggle_all: false,
id: "124",
component: [
{
com_id: "1",
title: "Accordion Heading 01",
content:
"<p>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.</p>",
},
],
},
};
export const Alt = {
args: {
...mockupData,
theme: "alt",
toggle_all: false,
id: "125",
component: [
{
com_id: "1",
title: "Accordion Heading 01",
content:
"<p>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.</p>",
},
],
},
};
export const Dark = {
args: {
...mockupData,
theme: "dark",
toggle_all: false,
id: "126",
component: [
{
com_id: "1",
title: "Accordion Heading 02",
content:
"<p>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.</p>",
},
],
},
};
export const DarkAlt = {
args: {
...mockupData,
theme: "dark-alt",
toggle_all: false,
id: "127",
component: [
{
com_id: "1",
title: "Accordion Heading 02",
content:
"<p>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.</p>",
},
],
},
};
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",
},
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add back in the example html versions for css diffing.


/**
 * 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' },

}

0 src/components/accordion/js/global.js → src/components/accordion/global.js
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please rename to accordion.js and create a new global.js to pull in accordion.js (since global.js is used for the browser rollup). so you can find the browser code easily (instead of the 100+ globals)

File renamed without changes.
157 changes: 0 additions & 157 deletions src/components/accordion/html/accordion-group.html
View file
Open in desktop

This file was deleted.

44 changes: 0 additions & 44 deletions src/components/accordion/html/component.hbs
View file
Open in desktop

This file was deleted.

Loading
Loading