jouw-stem__design-system 0.1.0

package/src/components/MenuBar/MenuBar.tokens.theme-light.json

@@ -0,0 +1,152 @@
+{
+  "menubar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Menubar background color"
+    },
+    "padding": {
+      "value": "{inset.s}",
+      "type": "dimension",
+      "description": "Menubar container padding"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{inset.xs} {inset.s}",
+        "type": "dimension",
+        "description": "Menu item padding"
+      },
+      "gap": {
+        "value": "{inline.2xs}",
+        "type": "dimension",
+        "description": "Gap between icon and label"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color on hover"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Item text color when active"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Item text color when disabled"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item background on hover"
+        },
+        "active": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Item background when active"
+        }
+      },
+      "borderRadius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Item border radius"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        }
+      }
+    },
+    "submenu": {
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Submenu background"
+      },
+      "minWidth": {
+        "value": "200px",
+        "type": "dimension",
+        "description": "Submenu minimum width"
+      },
+      "padding": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Submenu container padding"
+      },
+      "borderRadius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Submenu border radius"
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Submenu shadow"
+      }
+    },
+    "separator": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Separator color"
+      },
+      "margin": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Separator vertical margin"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/MenuBar/MenuBar.vue

@@ -0,0 +1,316 @@
+<template>
+  <nav class="menubar" :class="additionalClasses" role="menubar" aria-label="Menu">
+    <ul class="menubar__list" role="none">
+      <template v-for="(item, index) in model" :key="item.key || index">
+        <!-- Separator -->
+        <li v-if="item.separator" class="menubar__separator" role="separator"></li>
+
+        <!-- Menu item -->
+        <li
+          v-else
+          class="menubar__item"
+          :class="{
+            'menubar__item--state-active': activeItem === index,
+            'menubar__item--state-disabled': item.disabled,
+            'menubar__item--has-submenu': item.items && item.items.length > 0
+          }"
+          role="none"
+          @mouseenter="onItemMouseEnter(index, item)"
+          @mouseleave="onItemMouseLeave"
+        >
+          <a
+            v-if="item.url"
+            :href="item.url"
+            :target="item.target"
+            class="menubar__link"
+            role="menuitem"
+            :tabindex="item.disabled ? -1 : 0"
+            :aria-disabled="item.disabled || undefined"
+            :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+            :aria-expanded="item.items && item.items.length > 0 ? activeItem === index : undefined"
+            @click="onItemClick($event, item)"
+            @keydown="onItemKeydown($event, index, item)"
+          >
+            <i v-if="item.icon" :class="item.icon" class="menubar__icon"></i>
+            <span class="menubar__label">{{ item.label }}</span>
+            <svg
+              v-if="item.items && item.items.length > 0"
+              class="menubar__submenu-icon"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M4 6L8 10L12 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+          <button
+            v-else
+            type="button"
+            class="menubar__link"
+            role="menuitem"
+            :tabindex="item.disabled ? -1 : 0"
+            :disabled="item.disabled"
+            :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+            :aria-expanded="item.items && item.items.length > 0 ? activeItem === index : undefined"
+            @click="onItemClick($event, item)"
+            @keydown="onItemKeydown($event, index, item)"
+          >
+            <i v-if="item.icon" :class="item.icon" class="menubar__icon"></i>
+            <span class="menubar__label">{{ item.label }}</span>
+            <svg
+              v-if="item.items && item.items.length > 0"
+              class="menubar__submenu-icon"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M4 6L8 10L12 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Submenu -->
+          <ul
+            v-if="item.items && item.items.length > 0"
+            class="menubar__submenu"
+            :class="{ 'menubar__submenu--state-visible': activeItem === index }"
+            role="menu"
+          >
+            <template v-for="(subitem, subindex) in item.items" :key="subitem.key || subindex">
+              <li v-if="subitem.separator" class="menubar__separator" role="separator"></li>
+              <li
+                v-else
+                class="menubar__submenu-item"
+                :class="{
+                  'menubar__submenu-item--state-disabled': subitem.disabled,
+                  'menubar__submenu-item--has-submenu': subitem.items && subitem.items.length > 0
+                }"
+                role="none"
+                @mouseenter="onSubitemMouseEnter(subindex, subitem)"
+                @mouseleave="onSubitemMouseLeave"
+              >
+                <a
+                  v-if="subitem.url"
+                  :href="subitem.url"
+                  :target="subitem.target"
+                  class="menubar__submenu-link"
+                  role="menuitem"
+                  :tabindex="subitem.disabled ? -1 : 0"
+                  :aria-disabled="subitem.disabled || undefined"
+                  @click="onItemClick($event, subitem)"
+                >
+                  <i v-if="subitem.icon" :class="subitem.icon" class="menubar__icon"></i>
+                  <span class="menubar__label">{{ subitem.label }}</span>
+                  <svg
+                    v-if="subitem.items && subitem.items.length > 0"
+                    class="menubar__chevron-right"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6 4L10 8L6 12"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </a>
+                <button
+                  v-else
+                  type="button"
+                  class="menubar__submenu-link"
+                  role="menuitem"
+                  :tabindex="subitem.disabled ? -1 : 0"
+                  :disabled="subitem.disabled"
+                  @click="onItemClick($event, subitem)"
+                >
+                  <i v-if="subitem.icon" :class="subitem.icon" class="menubar__icon"></i>
+                  <span class="menubar__label">{{ subitem.label }}</span>
+                  <svg
+                    v-if="subitem.items && subitem.items.length > 0"
+                    class="menubar__chevron-right"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6 4L10 8L6 12"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+
+                <!-- Nested submenu (flyout) -->
+                <ul
+                  v-if="subitem.items && subitem.items.length > 0"
+                  class="menubar__submenu menubar__submenu--nested"
+                  :class="{ 'menubar__submenu--state-visible': activeSubitem === subindex }"
+                  role="menu"
+                >
+                  <template v-for="(nestedItem, nestedIndex) in subitem.items" :key="nestedItem.key || nestedIndex">
+                    <li v-if="nestedItem.separator" class="menubar__separator" role="separator"></li>
+                    <li
+                      v-else
+                      class="menubar__submenu-item"
+                      :class="{ 'menubar__submenu-item--state-disabled': nestedItem.disabled }"
+                      role="none"
+                    >
+                      <a
+                        v-if="nestedItem.url"
+                        :href="nestedItem.url"
+                        :target="nestedItem.target"
+                        class="menubar__submenu-link"
+                        role="menuitem"
+                        :tabindex="nestedItem.disabled ? -1 : 0"
+                        :aria-disabled="nestedItem.disabled || undefined"
+                        @click="onItemClick($event, nestedItem)"
+                      >
+                        <i v-if="nestedItem.icon" :class="nestedItem.icon" class="menubar__icon"></i>
+                        <span class="menubar__label">{{ nestedItem.label }}</span>
+                      </a>
+                      <button
+                        v-else
+                        type="button"
+                        class="menubar__submenu-link"
+                        role="menuitem"
+                        :tabindex="nestedItem.disabled ? -1 : 0"
+                        :disabled="nestedItem.disabled"
+                        @click="onItemClick($event, nestedItem)"
+                      >
+                        <i v-if="nestedItem.icon" :class="nestedItem.icon" class="menubar__icon"></i>
+                        <span class="menubar__label">{{ nestedItem.label }}</span>
+                      </button>
+                    </li>
+                  </template>
+                </ul>
+              </li>
+            </template>
+          </ul>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</template>
+
+<style src="./MenuBar.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  /**
+   * Array of menu items to display
+   */
+  model: {
+    type: Array,
+    default: () => [],
+    validator: (value) =>
+      value.every(
+        (item) =>
+          item.separator === true ||
+          (typeof item === "object" && (item.label !== undefined || item.icon !== undefined))
+      ),
+  },
+});
+
+const emit = defineEmits<{
+  (e: "item-click", ...args: unknown[]): void;
+}>();
+const activeItem = ref(null);
+const activeSubitem = ref(null);
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+
+const onItemMouseEnter = (index, item) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeItem.value = index;
+  }
+};
+
+const onItemMouseLeave = () => {
+  // Delay to allow moving to submenu
+  setTimeout(() => {
+    activeItem.value = null;
+    activeSubitem.value = null;
+  }, 100);
+};
+
+const onSubitemMouseEnter = (index, item) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeSubitem.value = index;
+  }
+};
+
+const onSubitemMouseLeave = () => {
+  // Keep submenu open when hovering
+};
+
+const onItemClick = (event, item) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+
+  // Close submenus after click
+  if (!item.items || item.items.length === 0) {
+    activeItem.value = null;
+    activeSubitem.value = null;
+  }
+};
+
+const onItemKeydown = (event, index, item) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      if (item.items && item.items.length > 0) {
+        activeItem.value = index;
+      }
+      break;
+    case "ArrowRight":
+      event.preventDefault();
+      // Move to next item
+      break;
+    case "ArrowLeft":
+      event.preventDefault();
+      // Move to previous item
+      break;
+    case "Escape":
+      activeItem.value = null;
+      activeSubitem.value = null;
+      break;
+    case "Enter":
+    case " ":
+      if (item.items && item.items.length > 0) {
+        event.preventDefault();
+        activeItem.value = activeItem.value === index ? null : index;
+      }
+      break;
+  }
+};
+</script>

package/src/components/Message/Message.matrix.ts

@@ -0,0 +1,25 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.message',
+  defaultSlot: 'This is a message body.',
+  primaryAxis: 'Severity',
+  variants: [
+    {
+      name: 'Severity',
+      subvariants: [
+        { name: 'info',    query: { severity: 'info' } },
+        { name: 'success', query: { severity: 'success' } },
+        { name: 'warn',    query: { severity: 'warn' } },
+        { name: 'error',   query: { severity: 'error' } }
+      ]
+    },
+    {
+      name: 'Closable',
+      subvariants: [
+        { name: 'not-closable', query: { closable: 'false' } },
+        { name: 'closable',     query: { closable: 'true' } }
+      ]
+    }
+  ]
+}

package/src/components/Message/Message.scss

@@ -0,0 +1,128 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: message;
+
+.#{$c} {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--message-padding-y, $message-padding-y) var(--message-padding-x, $message-padding-x);
+  border-radius: var(--message-radius, $message-radius);
+  border-width: var(--message-borderWidth, $message-borderWidth);
+  border-style: solid;
+  font-size: var(--message-fontSize, $message-fontSize);
+  font-weight: var(--message-fontWeight, $message-fontWeight);
+}
+
+.#{$c}__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--message-gap, $message-gap);
+  width: 100%;
+}
+
+.#{$c}__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--message-iconSize, $message-iconSize);
+  height: var(--message-iconSize, $message-iconSize);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__text {
+  flex: 1;
+  line-height: 1.5;
+  padding-top: 1px; // Optical alignment with icon
+}
+
+.#{$c}__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--message-closeButtonSize, $message-closeButtonSize);
+  height: var(--message-closeButtonSize, $message-closeButtonSize);
+  padding: 0;
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  border-radius: var(--message-radius, $message-radius);
+  cursor: pointer;
+  color: var(--message-closeButton-color, $message-closeButton-color);
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    color: var(--message-closeButton-hoverColor, $message-closeButton-hoverColor);
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// Severity variants
+.#{$c}--success {
+  background-color: var(--message-background-success, $message-background-success);
+  border-color: var(--message-border-success, $message-border-success);
+  color: var(--message-text-success, $message-text-success);
+
+  .#{$c}__icon {
+    color: var(--message-icon-success, $message-icon-success);
+  }
+}
+
+.#{$c}--info {
+  background-color: var(--message-background-info, $message-background-info);
+  border-color: var(--message-border-info, $message-border-info);
+  color: var(--message-text-info, $message-text-info);
+
+  .#{$c}__icon {
+    color: var(--message-icon-info, $message-icon-info);
+  }
+}
+
+.#{$c}--warn {
+  background-color: var(--message-background-warn, $message-background-warn);
+  border-color: var(--message-border-warn, $message-border-warn);
+  color: var(--message-text-warn, $message-text-warn);
+
+  .#{$c}__icon {
+    color: var(--message-icon-warn, $message-icon-warn);
+  }
+}
+
+.#{$c}--error {
+  background-color: var(--message-background-error, $message-background-error);
+  border-color: var(--message-border-error, $message-border-error);
+  color: var(--message-text-error, $message-text-error);
+
+  .#{$c}__icon {
+    color: var(--message-icon-error, $message-icon-error);
+  }
+}
+
+// Transition animations
+.#{$c}-enter-active,
+.#{$c}-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.#{$c}-enter-from,
+.#{$c}-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}