@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/pagination.md

@@ -0,0 +1,340 @@
+---
+name: pagination
+title: Pagination
+components:
+  - sd-icon
+  - sd-pagination
+  - sd-pagination--simple
+  - sd-pagination--with-buttons
+version: 1.0.0
+---
+
+## Template: Pagination Number
+
+```html
+<nav id="pagination" class="sd-pagination" aria-label="Pagination">
+  <ul>
+    <li>
+      <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Go to previous page"></sd-icon></a>
+    </li>
+    <li><a aria-current="page">1</a></li>
+    <li><a href="/?page=2">2</a></li>
+    <li><a href="/?page=3">3</a></li>
+    <li><a href="/?page=4">4</a></li>
+    <li><a href="/?page=5">5</a></li>
+    <li><a href="/?page=6">6</a></li>
+    <li><a href="/?page=7">7</a></li>
+    <li><a href="/?page=8">8</a></li>
+    <li><a href="/?page=9">9</a></li>
+    <li><a href="/?page=10">10</a></li>
+    <li><a href="/?page=11">11</a></li>
+    <li><a href="/?page=12">12</a></li>
+    <li><a href="/?page=13">13</a></li>
+    <li><a href="/?page=14">14</a></li>
+    <li><a href="/?page=15">15</a></li>
+    <li><a href="/?page=16">16</a></li>
+    <li><a href="/?page=17">17</a></li>
+    <li><a href="/?page=18">18</a></li>
+    <li><a href="/?page=19">19</a></li>
+    <li><a href="/?page=20">20</a></li>
+    <li>
+      <a href="/?page=2"><sd-icon name="system/chevron-right" label="Go to next page"></sd-icon></a>
+    </li>
+  </ul>
+  <p id="pagination-live" aria-live="polite"></p>
+</nav>
+<script type="module">
+  const pagination = document.querySelector('#pagination');
+  const live = pagination.querySelector('#pagination-live');
+  const state = { current: 1 };
+
+  const pages = pagination.querySelectorAll('ul > li a:not(:has(sd-icon))');
+  const previous = pagination.querySelector('ul > li:first-child a:has(sd-icon)');
+  const next = pagination.querySelector('ul > li:last-child a:has(sd-icon)');
+
+  const update = () => {
+    const current = pages[state.current - 1];
+    pages.forEach(page => {
+      page.removeAttribute('aria-current');
+      page.setAttribute('href', '/?page=' + page.innerHTML);
+    });
+
+    current.setAttribute('aria-current', 'page');
+    current.removeAttribute('href');
+    live.innerHTML = 'Current page: ' + state.current;
+
+    const isFirstPage = state.current <= 1;
+    const isLastPage = state.current >= pages.length;
+
+    previous.href = '/?page=' + (state.current - 1);
+    previous.removeAttribute('aria-hidden');
+
+    if (isFirstPage) {
+      previous.removeAttribute('href');
+      previous.setAttribute('aria-hidden', 'true');
+    }
+
+    next.href = '/?page=' + (state.current + 1);
+    next.removeAttribute('aria-hidden');
+
+    if (isLastPage) {
+      next.removeAttribute('href');
+      next.setAttribute('aria-hidden', 'true');
+    }
+  };
+
+  const handlePageClick = event => {
+    event.preventDefault();
+
+    const page = parseInt(event.target.innerHTML, 10);
+    if (page === state.current) return;
+
+    state.current = page;
+    update();
+  };
+
+  const handlePrevious = event => {
+    event.preventDefault();
+
+    if (state.current <= 1) return;
+
+    state.current--;
+    update();
+
+    /**
+     * NOTE: Due to a11y purposes, when the start or end is reached,
+     * the focus must switch to the oposite button
+     */
+    if (state.current === 1) {
+      next.focus();
+    }
+  };
+
+  const handleNext = event => {
+    event.preventDefault();
+
+    if (state.current >= pages.length) return;
+
+    state.current++;
+    update();
+
+    /**
+     * NOTE: Due to a11y purposes, when the start or end is reached,
+     * the focus must switch to the oposite button
+     */
+    if (state.current === pages.length) {
+      previous.focus();
+    }
+  };
+
+  pages.forEach(page => page.addEventListener('click', handlePageClick));
+  previous.addEventListener('click', handlePrevious);
+  next.addEventListener('click', handleNext);
+
+  update();
+</script>
+```
+
+## Template: Pagination Number with Buttons
+
+```html
+<nav id="pagination-with-buttons" class="sd-pagination sd-pagination--with-buttons" aria-label="Pagination">
+  <ul>
+    <li>
+      <button aria-hidden="true" disabled>
+        <sd-icon name="system/chevron-left" label="Go to previous page"></sd-icon>
+      </button>
+    </li>
+    <li><button aria-current="page">1</button></li>
+    <li><button>2</button></li>
+    <li><button>3</button></li>
+    <li><button>4</button></li>
+    <li><button>5</button></li>
+    <li><button>6</button></li>
+    <li><button>7</button></li>
+    <li><button>8</button></li>
+    <li><button>9</button></li>
+    <li><button>10</button></li>
+    <li><button>11</button></li>
+    <li><button>12</button></li>
+    <li><button>13</button></li>
+    <li><button>14</button></li>
+    <li><button>15</button></li>
+    <li><button>16</button></li>
+    <li><button>17</button></li>
+    <li><button>18</button></li>
+    <li><button>19</button></li>
+    <li><button>20</button></li>
+    <li>
+      <button>
+        <sd-icon name="system/chevron-right" label="Go to next page"></sd-icon>
+      </button>
+    </li>
+  </ul>
+  <p id="pagination-live" aria-live="polite"></p>
+</nav>
+<script type="module">
+  const pagination = document.querySelector('#pagination-with-buttons');
+  const live = pagination.querySelector('#pagination-live');
+  const state = { current: 1 };
+  const pages = pagination.querySelectorAll('ul > li button:not(:has(sd-icon))');
+  const previous = pagination.querySelector('ul > li:first-child button:has(sd-icon)');
+  const next = pagination.querySelector('ul > li:last-child button:has(sd-icon)');
+  const update = () => {
+    // Remove aria-current from all page buttons
+    pages.forEach(page => {
+      page.removeAttribute('aria-current');
+      page.removeAttribute('tabindex');
+    });
+    // Set aria-current on the current page button
+    const currentPageButton = pages[state.current - 1];
+    currentPageButton.setAttribute('aria-current', 'page');
+    currentPageButton.setAttribute('tabindex', '-1');
+    currentPageButton.blur();
+    live.innerHTML = 'Current page: ' + state.current;
+    const isFirstPage = state.current <= 1;
+    const isLastPage = state.current >= pages.length;
+    previous.removeAttribute('aria-hidden');
+    previous.disabled = false;
+    if (isFirstPage) {
+      previous.setAttribute('aria-hidden', 'true');
+      previous.disabled = true;
+    }
+    next.removeAttribute('aria-hidden');
+    next.disabled = false;
+    if (isLastPage) {
+      next.setAttribute('aria-hidden', 'true');
+      next.disabled = true;
+    }
+  };
+  const handlePageClick = event => {
+    event.preventDefault();
+    const clickedButton = event.target;
+    const page = parseInt(clickedButton.innerHTML, 10);
+    if (page === state.current) return;
+    state.current = page;
+    update();
+  };
+  const handlePrevious = event => {
+    event.preventDefault();
+    if (state.current <= 1) return;
+    state.current--;
+    update();
+    /**
+     * NOTE: Due to a11y purposes, when the start or end is reached,
+     * the focus must switch to the opposite button
+     */
+    if (state.current === 1) {
+      next.focus();
+    }
+  };
+  const handleNext = event => {
+    event.preventDefault();
+    if (state.current >= pages.length) return;
+    state.current++;
+    /**
+     * NOTE: Due to a11y purposes, when the start or end is reached,
+     * the focus must switch to the opposite button
+     */
+    if (state.current === pages.length) {
+      previous.focus();
+    }
+    update();
+  };
+  pages.forEach(page => page.addEventListener('click', handlePageClick));
+  previous.addEventListener('click', handlePrevious);
+  next.addEventListener('click', handleNext);
+  update();
+</script>
+```
+
+## Template: Pagination Simple
+
+```html
+<nav id="simple-pagination" class="sd-pagination sd-pagination--simple" aria-label="Simple pagination">
+  <ul>
+    <li>
+      <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Go to previous page"></sd-icon></a>
+    </li>
+    <li>1</li>
+    <li>20</li>
+    <li>
+      <a href="/?page=2"><sd-icon name="system/chevron-right" label="Go to next page"></sd-icon></a>
+    </li>
+  </ul>
+  <p id="simple-pagination-live" aria-live="polite"></p>
+</nav>
+<script type="module">
+  const pagination = document.querySelector('#simple-pagination');
+  const live = pagination.querySelector('#simple-pagination-live');
+  const state = { total: 20, current: 1 };
+
+  const [current, total] = pagination.querySelectorAll('ul > li:not(:has(a))');
+  const previous = pagination.querySelector('ul > li:first-child a:has(sd-icon)');
+  const next = pagination.querySelector('ul > li:last-child a:has(sd-icon)');
+
+  const update = () => {
+    current.innerHTML = state.current;
+    total.innerHTML = state.total;
+    live.innerHTML = 'Current page: ' + state.current;
+
+    const isFirstPage = state.current <= 1;
+    const isLastPage = state.current >= state.total;
+
+    previous.href = '/?page=' + (state.current - 1);
+    previous.removeAttribute('aria-hidden');
+
+    if (isFirstPage) {
+      previous.removeAttribute('href');
+      previous.setAttribute('aria-hidden', 'true');
+    }
+
+    next.href = '/?page=' + (state.current + 1);
+    next.removeAttribute('aria-hidden');
+
+    if (isLastPage) {
+      next.removeAttribute('href');
+      next.setAttribute('aria-hidden', 'true');
+    }
+  };
+
+  const handlePrevious = event => {
+    event.preventDefault();
+
+    if (state.current <= 1) return;
+
+    state.current--;
+    update();
+
+    /**
+     * NOTE: Due to a11y purposes, when the start or end is reached,
+     * the focus must switch to the oposite button
+     */
+    if (state.current === 1) {
+      next.focus();
+    }
+  };
+
+  const handleNext = event => {
+    event.preventDefault();
+
+    if (state.current >= state.total) return;
+
+    state.current++;
+    update();
+
+    /**
+     * NOTE: Due to a11y purposes, when the start or end is reached,
+     * the focus must switch to the oposite button
+     */
+    if (state.current === state.total) {
+      previous.focus();
+    }
+  };
+
+  previous.addEventListener('click', handlePrevious);
+  next.addEventListener('click', handleNext);
+
+  update();
+</script>
+```

package/metadata/packages/templates/quickfact.md

@@ -0,0 +1,267 @@
+---
+name: quickfact
+title: Quickfact
+components:
+  - sd-hide
+  - sd-icon
+  - sd-quickfact
+  - sd-quickfacts
+  - sd-show
+version: 1.0.0
+---
+
+## Template: Quickfact with Summary
+
+```html
+<sd-quickfact class="max-w-[410px] mx-auto">
+  <sd-icon name="content/people" color="primary" aria-hidden="true" library="default" slot="icon"></sd-icon>
+  <div slot="summary">
+    <div>Over 4,000 employees in 9 international locations</div>
+  </div>
+</sd-quickfact>
+```
+
+## Template: Quickfact with Description
+
+```html
+<style>
+  sd-quickfact::part(header) {
+    align-items: flex-start;
+  }
+
+  @media (min-width: 640px) {
+    sd-quickfact::part(header) {
+      align-items: center;
+    }
+  }
+</style>
+<sd-quickfact>
+  <sd-icon name="content/handshake" color="primary" aria-hidden="true" library="default" slot="icon"></sd-icon>
+  <div slot="summary" class="space-y-4">
+    <p>Partnership</p>
+    <p class="text-base font-normal leading-normal md:text-xl">
+      Union Investment is part of the Volksbanken Raiffeisenbanken cooperative financial network. The cooperative model
+      is based on a simple idea: when people join forces, they are much stronger together: "What one cannot do alone,
+      many can".
+    </p>
+  </div>
+</sd-quickfact>
+```
+
+## Template: Grouping
+
+```html
+<div>
+  <style>
+    @media (min-width: 640px) {
+      .grouping-sample {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        justify-items: center;
+        align-content: space-around;
+        align-items: center;
+        width: 100%;
+      }
+
+      .grouping-sample sd-quickfact.fact::part(content) {
+        position: absolute;
+        width: 100%;
+        left: 0;
+      }
+    }
+  </style>
+  <div class="grouping-sample relative">
+    <sd-quickfact expandable class="first fact">
+      <sd-icon name="content/image" color="primary" aria-hidden="true" library="default" slot="icon"></sd-icon>
+
+      <div class="slot slot--border slot--text h-12">Quickfact 1</div>
+
+      <div slot="summary">
+        <p class="text-base font-normal leading-normal sm:text-xl md:text-3xl sm:leading-tight">
+          Lorem ipsum in medias
+        </p>
+        <div class="text-base font-normal leading-normal sm:text-lg md:text-xl">
+          Con sectetur adipiscing elit magna cum laude perfides
+        </div>
+      </div>
+    </sd-quickfact>
+
+    <sd-quickfact expandable class="second fact">
+      <sd-icon name="content/image" color="primary" aria-hidden="true" library="default" slot="icon"></sd-icon>
+
+      <div class="slot slot--border slot--text h-12">Quickfact 2</div>
+
+      <div slot="summary">
+        <p class="text-base font-normal leading-normal sm:text-xl md:text-3xl sm:leading-tight">
+          Lorem ipsum in medias
+        </p>
+        <div class="text-base font-normal leading-normal sm:text-lg md:text-xl">
+          Con sectetur adipiscing elit magna cum laude perfides
+        </div>
+      </div>
+    </sd-quickfact>
+
+    <sd-quickfact expandable class="third fact">
+      <sd-icon name="content/image" color="primary" aria-hidden="true" library="default" slot="icon"></sd-icon>
+
+      <div class="slot slot--border slot--text h-12">Quickfact 3</div>
+
+      <div slot="summary">
+        <p class="text-base font-normal leading-normal sm:text-xl md:text-3xl sm:leading-tight">
+          Lorem ipsum in medias
+        </p>
+        <div class="text-base font-normal leading-normal sm:text-lg md:text-xl">
+          Con sectetur adipiscing elit magna cum laude perfides
+        </div>
+      </div>
+    </sd-quickfact>
+  </div>
+  <script type="module">
+    // Wait for custom elements to be defined
+    await Promise.all([customElements.whenDefined('sd-quickfact')]).then(() => {
+      var quickfacts = document.querySelectorAll('sd-quickfact');
+      let activeRow = null;
+
+      // Closes all other quickfacts when one is opened
+      quickfacts.forEach((quickfact, index) => {
+        quickfact.addEventListener('sd-show', () => {
+          quickfacts.forEach(qf => {
+            if (qf !== quickfact) {
+              qf.hide();
+            }
+          });
+
+          activeRow = getRow(quickfact);
+
+          let height = getQuickfactContentHeight(quickfact);
+
+          quickfacts.forEach(qf => {
+            if (getRow(qf) === activeRow) {
+              qf.style.marginBottom = height + 'px';
+            }
+          });
+        });
+
+        quickfact.addEventListener('sd-hide', () => {
+          quickfacts.forEach(qf => {
+            if (getRow(qf) === getRow(quickfact) && getRow(qf) !== activeRow) {
+              qf.style.marginBottom = '0px';
+            }
+          });
+        });
+      });
+
+      function getQuickfactContentHeight(quickfact) {
+        let content = quickfact.shadowRoot.querySelector('[part~="content"]');
+
+        // store original styles
+        const originalStyles = {
+          visibility: content.style.getPropertyValue('visibility'),
+          display: content.style.getPropertyValue('display'),
+          position: content.style.getPropertyValue('position'),
+          height: content.style.getPropertyValue('height')
+        };
+
+        content.style.setProperty('visibility', 'hidden');
+        content.style.setProperty('display', 'block');
+        content.style.setProperty('position', 'absolute');
+        content.style.setProperty('height', 'auto');
+
+        let height = content.clientHeight;
+
+        // restore original styles
+        content.style.setProperty('visibility', originalStyles.visibility);
+        content.style.setProperty('display', originalStyles.display);
+        content.style.setProperty('position', originalStyles.position);
+        content.style.setProperty('height', originalStyles.height);
+
+        return height;
+      }
+
+      function getPositions() {
+        let grid = document.querySelector('.grouping-sample');
+        let gridComputedStyle = window.getComputedStyle(grid);
+
+        let numberOfRows = gridComputedStyle.getPropertyValue('grid-template-rows').split(' ').length;
+
+        let numberOfColumns = gridComputedStyle.getPropertyValue('grid-template-columns').split(' ').length;
+        let positions = [];
+
+        for (let row = 1; row <= numberOfRows; row++) {
+          for (let col = 1; col <= numberOfColumns; col++) {
+            positions.push({ row, column: col });
+          }
+        }
+
+        return { numberOfRows, numberOfColumns, positions };
+      }
+
+      // Create a grid map with quickfact and position
+      function createGridMap() {
+        let gridMap = {};
+
+        let { numberOfRows, numberOfColumns, positions } = getPositions();
+
+        quickfacts.forEach((quickfact, index) => {
+          gridMap[index] = { quickfact: quickfact, position: positions[index] };
+        });
+
+        return { gridMap, numberOfRows, numberOfColumns };
+      }
+
+      // Take a quickfact as input and return the row of the quickfact in the grid
+      function getRow(quickfact) {
+        let { gridMap, numberOfRows, numberOfColumns } = createGridMap();
+
+        for (let [key, value] of Object.entries(gridMap)) {
+          if (value?.quickfact === quickfact) {
+            return value?.position?.row;
+          }
+        }
+      }
+
+      // Resets the height of all summaries to auto. This is useful when the window is resized to mobile view.
+      function resetHeights() {
+        quickfacts.forEach(quickfact => {
+          quickfact.shadowRoot.querySelector('[part~="summary"]').style.setProperty('height', 'auto');
+        });
+      }
+
+      function equalizeHeights() {
+        if (window.innerWidth < 640) {
+          resetHeights();
+          return;
+        }
+        let { gridMap, numberOfRows, numberOfColumns } = createGridMap();
+
+        // Equalize heights of summaries on the same row
+        for (let x = 1; x <= numberOfRows; x++) {
+          let summariesOnRow = [];
+
+          for (let value of Object.values(gridMap)) {
+            if (value?.position?.row === x) {
+              summariesOnRow.push(value.quickfact.shadowRoot.querySelector('[part~="summary"]'));
+            }
+          }
+
+          // Reset height to auto to get the actual height of the element
+          summariesOnRow.forEach(summary => {
+            summary.style.setProperty('height', 'auto');
+          });
+
+          let maxHeight = Math.max(...Array.from(summariesOnRow).map(summary => summary.clientHeight));
+
+          summariesOnRow.forEach((summary, index) => {
+            summary.style.setProperty('height', maxHeight + 'px');
+          });
+        }
+      }
+
+      equalizeHeights();
+
+      window.addEventListener('resize', equalizeHeights);
+    });
+  </script>
+</div>
+```