@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/tag.md

@@ -0,0 +1,230 @@
+---
+name: tag
+title: Tag
+components:
+  - sd-after-hide
+  - sd-button
+  - sd-icon
+  - sd-paragraph
+  - sd-paragraph--size-lg
+  - sd-remove
+  - sd-tag
+version: 1.0.0
+---
+
+## Template: filter Tag Group
+
+```html
+<div>
+  <p class="sd-paragraph sd-paragraph--size-lg font-bold mb-4">26 Results</p>
+  <div
+    id="tag-group"
+    class="flex gap-4"
+    role="group"
+    aria-label="Filter by tag group. (Select one or more options to filter the results.)"
+  >
+    <sd-tag toggleable selected> All (26)</sd-tag>
+    <sd-tag toggleable>Funds (16)</sd-tag>
+    <sd-tag toggleable>Sustainability (5)</sd-tag>
+    <sd-tag toggleable>Retirement planing (2)</sd-tag>
+    <sd-tag toggleable>Documents (3)</sd-tag>
+  </div>
+</div>
+
+<script type="module">
+  const group = document.querySelector('#tag-group');
+  group.onclick = e => {
+    const tag = e.target.closest('sd-tag');
+    if (!tag) return;
+    tag.selected = !tag.selected;
+  };
+</script>
+```
+
+## Template: Filter Tag Group with Morningstar Rating
+
+```html
+<div>
+  <p class="sd-paragraph sd-paragraph--size-lg font-bold mb-4">Find Top-Rated Investments with Morningstar Ratings:</p>
+  <div
+    id="morningstar-tag-group"
+    class="flex gap-2"
+    role="group"
+    aria-label="Filter by morningstar rating. (Select one or more options to filter the results.)"
+  >
+    <sd-tag toggleable selected>
+      <span class="sr-only">5 stars</span>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+    </sd-tag>
+    <sd-tag toggleable>
+      <span class="sr-only">4 stars</span>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+    </sd-tag>
+    <sd-tag toggleable>
+      <span class="sr-only">3 stars</span>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+    </sd-tag>
+    <sd-tag toggleable>
+      <span class="sr-only">2 stars</span>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+    </sd-tag>
+    <sd-tag toggleable>
+      <span class="sr-only">1 star</span>
+      <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
+    </sd-tag>
+  </div>
+</div>
+
+<script type="module">
+  const group = document.querySelector('#morningstar-tag-group');
+  group.onclick = e => {
+    const tag = e.target.closest('sd-tag');
+    if (!tag) return;
+    tag.selected = !tag.selected;
+  };
+</script>
+```
+
+## Template: Filter Tag Group with Risk
+
+```html
+<div>
+  <p class="sd-paragraph sd-paragraph--size-lg font-bold mb-4">Risk level:</p>
+  <div
+    id="risk-tag-group"
+    class="flex gap-2"
+    role="group"
+    aria-label="Filter by risk. (Select one or more options to filter the results.)"
+  >
+    <sd-tag toggleable selected>
+      <div class="h-4 w-4 border-primary-800 border-[1px] bg-(--fill-risk-veryhigh)"></div>
+      Very High
+    </sd-tag>
+
+    <sd-tag toggleable>
+      <div class="h-4 w-4 border-primary-800 border-[1px] bg-(--fill-risk-high)"></div>
+      High
+    </sd-tag>
+
+    <sd-tag toggleable>
+      <div class="h-4 w-4 border-primary-800 border-[1px] bg-(--fill-risk-increased)"></div>
+      Increased
+    </sd-tag>
+
+    <sd-tag toggleable>
+      <div class="h-4 w-4 border-primary-800 border-[1px] bg-(--fill-risk-moderate)"></div>
+      Moderate
+    </sd-tag>
+
+    <sd-tag toggleable>
+      <div class="h-4 w-4 border-primary-800 border-[1px] bg-(--fill-risk-low)"></div>
+      Low
+    </sd-tag>
+  </div>
+</div>
+
+<script type="module">
+  const group = document.querySelector('#risk-tag-group');
+  group.onclick = e => {
+    const tag = e.target.closest('sd-tag');
+    if (!tag) return;
+    tag.selected = !tag.selected;
+  };
+</script>
+```
+
+## Template: removable Filter Tag Group
+
+```html
+<div>
+  <p class="sd-paragraph sd-paragraph--size-lg font-bold mb-4">Active filters:</p>
+
+  <div id="removable-tag-filters" class="flex items-center gap-2 flex-nowrap">
+    <sd-tag removable>Stocks</sd-tag>
+    <sd-tag removable>Bonds</sd-tag>
+    <sd-tag removable>Mutual funds</sd-tag>
+    <sd-tag removable>ETFs</sd-tag>
+    <sd-button id="remove-filters-button" variant="tertiary" class="ml-4">
+      <sd-icon name="system/trash" slot="icon-left"></sd-icon>
+      Remove filters
+    </sd-button>
+  </div>
+</div>
+
+<script type="module">
+  const filters = document.querySelector('#removable-tag-filters');
+  const removeFiltersButton = document.querySelector('#remove-filters-button');
+
+  filters.querySelectorAll('sd-tag').forEach(tag => {
+    tag.addEventListener('sd-remove', () => tag.hide());
+  });
+
+  filters.addEventListener('sd-after-hide', () => {
+    const tags = Array.from(filters.querySelectorAll('sd-tag'));
+
+    if (tags.some(tag => !tag.hidden)) return;
+
+    setTimeout(() => {
+      tags.forEach(tag => {
+        tag.style.opacity = '1';
+        tag.hidden = false;
+      });
+    }, 1000);
+  });
+
+  removeFiltersButton.addEventListener('click', () => {
+    const tags = filters.querySelectorAll('sd-tag');
+    tags.forEach(tag => tag.hide());
+  });
+</script>
+```
+
+## Template: Tag Group with Links
+
+```html
+<div>
+  <p class="sd-paragraph sd-paragraph--size-lg font-bold mb-4">Additional topics:</p>
+  <div class="gap-2 flex flex-col">
+    <sd-tag class="inline-flex w-auto" href="https://solid-design-system.fe.union-investment.de/docs/" target="_blank"
+      >Commercial real estate</sd-tag
+    >
+    <sd-tag class="inline-flex w-auto" href="https://solid-design-system.fe.union-investment.de/docs/" target="_blank"
+      >Savings plan rate</sd-tag
+    >
+    <sd-tag class="inline-flex w-auto" href="https://solid-design-system.fe.union-investment.de/docs/" target="_blank"
+      >Open-ended real estate funds</sd-tag
+    >
+    <sd-tag class="inline-flex w-auto" href="https://solid-design-system.fe.union-investment.de/docs/" target="_blank"
+      >Retirement planning</sd-tag
+    >
+  </div>
+</div>
+```
+
+## Template: Tag Background Options
+
+```html
+<div class="flex flex-row">
+  <div class="bg-white p-12 w-[268px]">
+    <sd-tag>Tag</sd-tag>
+  </div>
+
+  <div class="bg-neutral-100 p-12 w-[268px]">
+    <sd-tag>Tag</sd-tag>
+  </div>
+
+  <div class="bg-primary-100 p-12 w-[268px]">
+    <sd-tag>Tag</sd-tag>
+  </div>
+</div>
+```

package/metadata/packages/templates/teaser-media.md

@@ -0,0 +1,164 @@
+---
+name: teaser-media
+title: Teaser Media
+components:
+  - sd-button
+  - sd-headline
+  - sd-headline--inverted
+  - sd-headline--size-lg
+  - sd-meta
+  - sd-meta--inverted
+  - sd-meta--pipe
+  - sd-paragraph
+  - sd-paragraph--inverted
+  - sd-teaser-media
+version: 1.0.0
+---
+
+## Template: Teaser Media with Link
+
+```html
+<div class="flex flex-col gap-12">
+  <sd-teaser-media variant="gradient-dark">
+    <h3 slot="headline" class="sd-headline sd-headline--inverted sd-headline--size-lg">Market turnaround in sight</h3>
+    <div slot="media" class="relative">
+      <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."
+      />
+    </div>
+    <div slot="meta" class="meta-info">
+      <span class="sd-meta sd-meta--pipe sd-meta--inverted sd-headline--size-lg">August 2024</span>
+      <span class="sd-meta sd-meta--inverted">Olaf Janßen</span>
+    </div>
+    <div>
+      <p class="sd-paragraph sd-paragraph--inverted mb-4 mt-2">
+        After a long wait for good news, real estate investors are now seeing the first signs of a recovery on the
+        European commercial real estate markets.
+      </p>
+      <div>
+        <sd-button href="#" target="_blank" variant="primary" inverted>View research</sd-button>
+      </div>
+    </div>
+  </sd-teaser-media>
+  <sd-teaser-media variant="primary">
+    <h3 slot="headline" class="sd-headline sd-headline--inverted sd-headline--size-lg">Your contact person</h3>
+    <img
+      slot="media"
+      class="w-full"
+      src="./placeholders/images/collaboration.jpg"
+      alt="Two professionals representing accessible customer support."
+    />
+    <div class="flex flex-col gap-4">
+      <p class="sd-paragraph sd-paragraph--inverted sd-headline--size-lg">
+        If you have any questions or would like to obtain further information, please find your dedicated contact below.
+      </p>
+      <div>
+        <sd-button href="#" target="_blank" variant="cta" inverted>Feel free to contact us</sd-button>
+      </div>
+    </div>
+  </sd-teaser-media>
+  <sd-teaser-media variant="neutral-100" class="teaser-neutral-100">
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">USA or Europe? It depends on the mix</h3>
+    <img
+      slot="media"
+      class="w-full aspect-ratio"
+      src="./placeholders/images/skyline.jpg"
+      alt="A vibrant city skyline at dusk, symbolizing economic growth and investment opportunities in urban hubs."
+    />
+    <div class="flex flex-col gap-4">
+      <p class="sd-paragraph">
+        A positive growth environment, the tech boom and government investment incentives show this: The USA is ahead of
+        the eurozone in many respects. Moritz Bauer, Head of Investment Strategy at Union Investment, explains why
+        investors should nevertheless also keep an eye on European investments.
+      </p>
+      <div slot="meta" class="meta-info">
+        <span class="meta-info-item">12.06.2024</span>
+      </div>
+      <div>
+        <sd-button href="#" target="_blank" variant="primary">Read now</sd-button>
+      </div>
+    </div>
+  </sd-teaser-media>
+</div>
+```
+
+## Template: Teaser Media Overrides
+
+```html
+<style>
+  .media-overrides::part(content) {
+    display: flex;
+    align-items: center;
+  }
+</style>
+<sd-teaser-media variant="gradient-dark" class="media-overrides">
+  <h3 slot="headline" class="sd-headline sd-headline--inverted sd-headline--size-lg">Gender</h3>
+  <div slot="media" class="relative">
+    <img
+      class="w-full aspect-ratio"
+      src="./placeholders/images/coffeeshop.jpg"
+      alt="Diverse group of individuals in a casual meeting setting, emphasizing gender equality and collaboration."
+    />
+  </div>
+  <p class="sd-paragraph sd-paragraph--inverted pt-1">We are actively promoting gender equality.</p>
+</sd-teaser-media>
+```
+
+## Template: Teaser Media Expandable
+
+```html
+<style>
+  .media-overrides::part(content) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+</style>
+<div class="flex flex-row gap-2 media-overrides">
+  <sd-teaser-media variant="gradient-dark" class="media-overrides">
+    <h3 slot="headline">Retirement planning</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/senior-coffee.jpg"
+      class="aspect-4/5 object-cover self-stretch h-80"
+      alt=""
+    />
+    <div slot="expandable">
+      <p class="sd-paragraph sd-paragraph--inverted text-center">
+        Start today. We take proactive action to strengthen your finances in retirement.
+      </p>
+    </div>
+  </sd-teaser-media>
+  <sd-teaser-media variant="gradient-dark" class="media-overrides">
+    <h3 slot="headline">Save</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/couple-moving-03.jpg"
+      class="aspect-4/5 object-cover self-stretch h-80"
+      alt=""
+    />
+    <div slot="expandable">
+      <p class="sd-paragraph sd-paragraph--inverted text-center">
+        We build smart saving habits that secure your financial future.
+      </p>
+    </div>
+  </sd-teaser-media>
+  <sd-teaser-media variant="gradient-dark" class="media-overrides">
+    <h3 slot="headline">Invest</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/calculator-work.jpg"
+      class="aspect-4/5 object-cover self-stretch h-80"
+      alt=""
+    />
+    <div slot="expandable">
+      <p class="sd-paragraph sd-paragraph--inverted text-center">
+        We align your investments with the lifestyle you want after work.
+      </p>
+    </div>
+  </sd-teaser-media>
+</div>
+```