website: Update variables documentation & demos

apps/website/astro.config.ts

@@ -51,7 +51,7 @@ function rehypeToc() {
 
     // ideally we would check if the frontmatter has a toc: false, but that is not available
     // so we will hardcode the files we don't want a toc for
-    if (['index.mdx', 'variables.mdx'].includes(file.history[0].split('/').pop()!)) {
+    if (['index.mdx'].includes(file.history[0].split('/').pop()!)) {
       showTOC = false;
     }
 

apps/website/src/components/variables/DurationDemo.astro

@@ -0,0 +1,48 @@
+---
+import Wrapper from './_wrapper.astro';
+const durations = ['0', '1', '2', '3'];
+---
+
+<Wrapper class='wrapper'>
+  {
+    durations.map((duration) => (
+      <duration-item duration={`--iui-duration-${duration}`}>
+        <button>{duration}</button>
+      </duration-item>
+    ))
+  }
+</Wrapper>
+
+<script>
+  customElements.define(
+    'duration-item',
+    class extends HTMLElement {
+      connectedCallback() {
+        const duration = getComputedStyle(this).getPropertyValue(this.getAttribute('duration'));
+        const durationMs = Math.max(0.001, parseFloat(duration) * 1000);
+        const button = this.querySelector('button');
+
+        button.addEventListener('click', () => {
+          button.animate([{ opacity: 0 }], { duration: durationMs });
+        });
+      }
+    }
+  );
+</script>
+
+<style>
+  duration-item button {
+    border: none;
+    padding: var(--space-3);
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--space-1);
+    box-shadow: 0 0 4px hsl(0 0% 0% / 20%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--iui-color-background);
+    color: var(--iui-color-foreground-2);
+    cursor: pointer;
+  }
+</style>

apps/website/src/components/variables/SizesInputDemo.astro

@@ -0,0 +1,29 @@
+---
+import Wrapper from './_wrapper.astro';
+import Item from './_item.astro';
+---
+
+<Wrapper class='wrapper'>
+  <Item class='item'>small</Item>
+  <Item class='item'>medium</Item>
+  <Item class='item'>large</Item>
+</Wrapper>
+
+<style lang='scss'>
+  .wrapper {
+    align-items: center;
+  }
+
+  .item {
+    border-radius: var(--iui-border-radius-1);
+    height: var(--iui-component-height);
+
+    &:first-child {
+      height: var(--iui-component-height-small);
+    }
+
+    &:last-child {
+      height: var(--iui-component-height-large);
+    }
+  }
+</style>