Skip to content

Commit

Permalink
Merge pull request #617 from Infineon/613-accordion-add-initial-colla…
Browse files Browse the repository at this point in the history 
…pse-prop

Accordion: added initial-collapse Prop on accordion-items
  • Loading branch information
@verena-ifx
verena-ifx authored Oct 23, 2023
2 parents f43e553 + ea89c7a commit 2792270
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 17 deletions.
24 changes: 13 additions & 11 deletions examples/wrapper-components/react-javascript/src/components/Accordion/Accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,21 @@ function Accordion() {
<div>


<IfxAccordion auto-collapse="true" onIfxItemOpen={handleItems}>
<IfxAccordionItem caption="How to be happy?">
I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
<IfxAccordion auto-collapse={true} onIfxItemOpen={handleItems}>
<IfxAccordionItem caption="Label" initialCollapse={false}>
Content for Item #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
</IfxAccordionItem>
<IfxAccordionItem caption="How to be happy?">
I have no idea.
<IfxAccordionItem caption="Label">
Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
</IfxAccordionItem>
<IfxAccordionItem caption="How to be happy?">
I have no idea.
<IfxAccordionItem caption="Label">
Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
</IfxAccordionItem>
</IfxAccordion>
</div>
Expand Down
1 change: 1 addition & 0 deletions packages/components-vue/lib/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const IfxAccordion = /*@__PURE__*/ defineContainer<JSX.IfxAccordion>('ifx

export const IfxAccordionItem = /*@__PURE__*/ defineContainer<JSX.IfxAccordionItem>('ifx-accordion-item', undefined, [
'caption',
'initialCollapse',
'ifxItemOpen',
'ifxItemClose'
]);
Expand Down
16 changes: 15 additions & 1 deletion packages/components/src/components/accordion/accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,30 @@ export default {
tags: ['autodocs'],

args: {
autoCollapse: false
autoCollapse: false,
initialCollapse: true
},

argTypes: {
amountOfItems: { control: 'number' },
initialCollapse: {
description: 'If set on more than one accordion-item, auto-collapse must be false',
}
},
};

const Template = (args) => {
const accordionElement = document.createElement('ifx-accordion');
const initialItem = document.createElement('ifx-accordion-item');
initialItem.setAttribute('initialCollapse', args.initialCollapse);
initialItem.setAttribute('caption', `Label`);
initialItem.innerHTML = `
Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
`;
accordionElement.append(initialItem);

accordionElement.setAttribute('auto-collapse', args.autoCollapse)
for (let i = 0; i < args.amountOfItems; i++) {
const item = document.createElement('ifx-accordion-item');
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/components/accordion/accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export class Accordion {

@Listen('ifxItemOpen')
async onItemOpen(event: CustomEvent) {
console.log('here', this.autoCollapse)
if(this.autoCollapse) {
const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
for (const item of items) {
Expand Down
18 changes: 17 additions & 1 deletion packages/components/src/components/accordion/accordionItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil
})
export class IfxAccordionItem {
@Prop() caption: string;
@Prop() initialCollapse: boolean = true;
@State() open: boolean = false;
@Event() ifxItemOpen: EventEmitter;
@Event() ifxItemClose: EventEmitter;
Expand All @@ -22,14 +23,29 @@ export class IfxAccordionItem {
}
}

componentDidUpdate() {
openAccordionItem() {
if (this.open) {
this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
} else {
this.contentEl.style.maxHeight = '0';
}
}

componentWillLoad() {
if(!this.initialCollapse) {
this.open = true;
this.ifxItemOpen.emit();
}
}

componentDidLoad() {
this.openAccordionItem()
}

componentDidUpdate() {
this.openAccordionItem()
}

@Method()
async close() {
this.open = false;
Expand Down
7 changes: 4 additions & 3 deletions packages/components/src/components/accordion/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------- | -------- | ----------- |
| `caption` | `caption` | | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------- | --------- | ----------- |
| `caption` | `caption` | | `string` | `undefined` |
| `initialCollapse` | `initial-collapse` | | `boolean` | `true` |


## Events
Expand Down

0 comments on commit 2792270

Please sign in to comment.