Skip to content

Commit

Permalink
docs: update accordion group template [skip chromatic] (#1460)
Browse files Browse the repository at this point in the history
  • Loading branch information
@auroraVasconcelos
auroraVasconcelos authored Oct 22, 2024
1 parent 1a45831 commit 6ec9b2f
Showing 1 changed file with 81 additions and 31 deletions.
112 changes: 81 additions & 31 deletions packages/components/src/templates/accordion-group.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import '../solid-components';
import { html } from 'lit-html';

/**
* ```
* ```
* Examples of the sd-accordion-group component in different backgrounds.
*/

export default {
Expand All @@ -18,24 +17,39 @@ export default {
}
};

/**
* Examples of the sd-accordion-group component in different backgrounds.
*/
export const Default = {
name: 'White Background',
name: 'Accordion Group with White Background',
render: () => html`
<div class="bg-white p-8">
<sd-accordion-group>
<sd-accordion summary="Shareholder Structure"
><p>
<sd-accordion summary="Shareholder Structure">
<figure class="sd-media">
<img
class="w-full aspect-ratio"
src="./placeholders/images/collaboration.jpg"
alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
/>
</figure>
<p class="sd-paragraph mt-4">
Union Investment is the dedicated asset manager within the German cooperative financial network. All
shareholders are also part of the network, which ensures a stable and long-term ownership structure. This
allows us to maintain a sustainable business model and develop strong, long-term client relationships.
</p></sd-accordion
><sd-accordion summary="Cooparative financial network"
><p>Union Investment is the asset manager within the German cooperative financial Network.</p></sd-accordion
><sd-accordion summary="Investment philosophy"
><div class="sd-prose">
</p>
</sd-accordion>
<sd-accordion summary="Cooperative financial network">
<h3 class="sd-headline sd-headline--size-xl mb-4">
Union Investment is the asset manager within the German cooperative financial Network.
</h3>
<figure class="sd-media">
<img
class="w-full aspect-ratio"
src="./placeholders/images/coins.jpg"
alt="Close-up of hands stacking coins into small piles on a table, suggesting financial planning or saving."
/>
</figure>
</sd-accordion>
<sd-accordion summary="Investment philosophy">
<div class="sd-prose">
<p>
Our investment philosophy is based on our belief that markets are inefficient. Long-term outperformance
is, therefore, best achieved through a combination of fundamental research, actively managed security
Expand All @@ -44,7 +58,7 @@ export const Default = {
</p>
<p>
We take an integrated approach to portfolio management, with every portfolio manager also acting as a
senior research specialist. This structure enhances the team’s commitment to the process and helps to
senior research specialist. This structure enhances the team's commitment to the process and helps to
ensure accountability for investment performance.
</p>
</div>
Expand All @@ -55,20 +69,38 @@ export const Default = {
};

export const NeutralBackground = {
name: 'Neutral Background',
name: 'Accordion Group with Neutral-100 Background',
render: () => html`
<div class="bg-neutral-100 p-8">
<sd-accordion-group>
<sd-accordion summary="Shareholder Structure"
><p>
<sd-accordion summary="Shareholder Structure">
<figure class="sd-media">
<img
class="w-full aspect-ratio"
src="./placeholders/images/collaboration.jpg"
alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
/>
</figure>
<p class="sd-paragraph mt-4">
Union Investment is the dedicated asset manager within the German cooperative financial network. All
shareholders are also part of the network, which ensures a stable and long-term ownership structure. This
allows us to maintain a sustainable business model and develop strong, long-term client relationships.
</p></sd-accordion
><sd-accordion summary="Cooparative financial network"
><p>Union Investment is the asset manager within the German cooperative financial Network.</p></sd-accordion
><sd-accordion summary="Investment philosophy"
><div class="sd-prose">
</p>
</sd-accordion>
<sd-accordion summary="Cooperative financial network">
<h3 class="sd-headline sd-headline--size-xl mb-4">
Union Investment is the asset manager within the German cooperative financial Network.
</h3>
<figure class="sd-media">
<img
class="w-full aspect-ratio"
src="./placeholders/images/coins.jpg"
alt="Close-up of hands stacking coins into small piles on a table, suggesting financial planning or saving."
/>
</figure>
</sd-accordion>
<sd-accordion summary="Investment philosophy">
<div class="sd-prose">
<p>
Our investment philosophy is based on our belief that markets are inefficient. Long-term outperformance
is, therefore, best achieved through a combination of fundamental research, actively managed security
Expand All @@ -77,7 +109,7 @@ export const NeutralBackground = {
</p>
<p>
We take an integrated approach to portfolio management, with every portfolio manager also acting as a
senior research specialist. This structure enhances the team’s commitment to the process and helps to
senior research specialist. This structure enhances the team's commitment to the process and helps to
ensure accountability for investment performance.
</p>
</div>
Expand All @@ -88,19 +120,37 @@ export const NeutralBackground = {
};

export const PrimaryBackground = {
name: 'Primary Background',
name: 'Accordion Group with Primary-100 Background',
render: () => html`
<div class="bg-primary-100 p-8">
<sd-accordion-group>
<sd-accordion summary="Shareholder Structure"
><p>
<sd-accordion summary="Shareholder Structure">
<figure class="sd-media">
<img
class="w-full aspect-ratio"
src="./placeholders/images/collaboration.jpg"
alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
/>
</figure>
<p class="sd-paragraph mt-4">
Union Investment is the dedicated asset manager within the German cooperative financial network. All
shareholders are also part of the network, which ensures a stable and long-term ownership structure. This
allows us to maintain a sustainable business model and develop strong, long-term client relationships.
</p></sd-accordion
><sd-accordion summary="Cooparative financial network"
><p>Union Investment is the asset manager within the German cooperative financial Network.</p></sd-accordion
><sd-accordion summary="Investment philosophy">
</p>
</sd-accordion>
<sd-accordion summary="Cooperative financial network">
<h3 class="sd-headline sd-headline--size-xl mb-4">
Union Investment is the asset manager within the German cooperative financial Network.
</h3>
<figure class="sd-media">
<img
class="w-full aspect-ratio"
src="./placeholders/images/coins.jpg"
alt="Close-up of hands stacking coins into small piles on a table, suggesting financial planning or saving."
/>
</figure>
</sd-accordion>
<sd-accordion summary="Investment philosophy">
<div class="sd-prose">
<p>
Our investment philosophy is based on our belief that markets are inefficient. Long-term outperformance
Expand All @@ -110,7 +160,7 @@ export const PrimaryBackground = {
</p>
<p>
We take an integrated approach to portfolio management, with every portfolio manager also acting as a
senior research specialist. This structure enhances the team’s commitment to the process and helps to
senior research specialist. This structure enhances the team's commitment to the process and helps to
ensure accountability for investment performance.
</p>
</div>
Expand Down

0 comments on commit 6ec9b2f

Please sign in to comment.