story(sbb-accordion): initial implementation about lyne-components HOT 3 CLOSED

@DavideMininni-Fincons Could I ask you to take a look at https://angular.app.sbb.ch/angular/components/accordion/overview and write a specification along that use case? I apologize for only mentioning this now.

from lyne-components.

Check both sbb-accordion and sbb-accordion-item

sbb-accordion-item

• Icon at left: @Prop() public iconName?: string;
• Title: can we use @Prop() public titleContent?: string; & @Prop() public titleLevel?: InterfaceTitleAttributes['level’]; ?
• Toggle: chevron-small-up/down icon instead than current SVG?
• Add a disableAnimation property
• Events: willOpen/didOpen/willClose/didClose ?
• Reuse SbbOverlayState ?
• Two variants (default/milk)?
• What state is 'Opacity 80%'?
• Animation?

sbb-accordion

• Keep the onlyOneOpen logic?

from lyne-components.

sbb-accordion-item (or sbb-expansion-panel ?)

Slots:

• ‘content’ for the elements which became visibile when expanded
• unnamed slot for title? or use @props titleContent / titleLevel ?

Props:

• two color background variant (see sbb-selection-panel): @Prop() public color: 'white' | 'milk' = 'white';
• icon at left: @Prop() public iconName?: string;
• add a prop to disable open/close animation: @Prop({ reflect: true }) public disableAnimation = false;
• Toggle: 
  • can the chevron-small-up/chevron-small-down icons can be used instead than the current SVG?
  • can we hide the toggle as in the Angular SBB lib? If yes, add @Prop() hideToggle = false;
• force the opening of the panel with @Prop({ reflect: true }) public forceOpen = false;

States:

• toggling the panel can be disabled with @Prop() disabled = false;
• which state is 'opacity 80%' in Figma?

Events:

• combination of did/will & open/close as in many other components

Questions:

• can accordion-items be nested?
• iconName is mandatory?

Example with titleContent

<sbb-accordion-item titleContent='This is the title'>
  <div slot="content">Lorem ipsum dolor sit amet.</div>
</sbb-accordion-item>

Example with slotted title and icon

<sbb-accordion-item icon-name='pie-small'>
  <div>Title</div>
  <div slot="content">Lorem ipsum dolor sit amet.</div>
</sbb-accordion-item>

sbb-accordion

Slots:

• unnamed slot for one or more sbb-accordion-items

Prop:

• allows for more than one expanded sbb-accordion-item at the same time: @Prop() multi = false;

Example

<sbb-accordion multi>
  <sbb-accordion-item titleContent='This is the title'>
    <div slot="content">Lorem ipsum dolor sit amet.</div>
  </sbb-accordion-item>
  <sbb-accordion-item titleContent='This is another title'>
    <div slot="content">Amet sit dolor ipsum lorem.</div>
  </sbb-accordion-item>
</sbb-accordion>

from lyne-components.