jouw-stem__design-system 0.1.0

package/src/components/SpeedDial/SpeedDial.vue

@@ -0,0 +1,205 @@
+<template>
+  <div
+    class="speed-dial"
+    :class="additionalClasses"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <button
+      type="button"
+      class="speed-dial__button"
+      aria-label="Toggle actions"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+      @click="toggle"
+    >
+      <svg
+        class="speed-dial__button-icon"
+        :class="{ 'speed-dial__button-icon--state-open': isOpen }"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 5V19M5 12H19"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+
+    <div v-if="isOpen" class="speed-dial__actions" :class="`speed-dial__actions--${direction}`">
+      <div
+        v-for="(item, index) in model"
+        :key="index"
+        class="speed-dial__action-wrapper"
+        :style="getActionStyle(index)"
+      >
+        <span v-if="item.label" class="speed-dial__action-label">{{ item.label }}</span>
+        <button
+          type="button"
+          class="speed-dial__action"
+          :aria-label="item.label"
+          @click="onActionClick(item)"
+        >
+          <i :class="item.icon" class="speed-dial__action-icon" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./SpeedDial.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+interface Props {
+  model?: unknown[];
+  direction?: string;
+  type?: string;
+  radius?: number;
+  showLabels?: boolean;
+  openOnHover?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  model: () => [],
+  direction: "up",
+  type: "linear",
+  radius: 80,
+  showLabels: true,
+  openOnHover: false,
+});
+const emit = defineEmits<{
+  (e: "click", ...args: unknown[]): void;
+  (e: "show", ...args: unknown[]): void;
+  (e: "hide", ...args: unknown[]): void;
+}>();
+const isOpen = ref(false);
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+  emit(isOpen.value ? "show" : "hide");
+};
+
+const open = () => {
+  if (!isOpen.value) {
+    isOpen.value = true;
+    emit("show");
+  }
+};
+
+const close = () => {
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit("hide");
+  }
+};
+
+const onMouseEnter = () => {
+  if (props.openOnHover) {
+    open();
+  }
+};
+
+const onMouseLeave = () => {
+  if (props.openOnHover) {
+    close();
+  }
+};
+
+const onActionClick = (item) => {
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+  emit("click", item);
+  close();
+};
+
+const getActionStyle = (index) => {
+  if (props.type === "linear") {
+    return {};
+  }
+
+  const total = props.model.length;
+  const radius = props.radius;
+  let startAngle, endAngle;
+
+  switch (props.type) {
+    case "circle":
+      startAngle = 0;
+      endAngle = 360;
+      break;
+    case "semi-circle":
+      switch (props.direction) {
+        case "up":
+          startAngle = 180;
+          endAngle = 360;
+          break;
+        case "down":
+          startAngle = 0;
+          endAngle = 180;
+          break;
+        case "left":
+          startAngle = 90;
+          endAngle = 270;
+          break;
+        case "right":
+          startAngle = -90;
+          endAngle = 90;
+          break;
+      }
+      break;
+    case "quarter-circle":
+      switch (props.direction) {
+        case "up":
+          startAngle = 180;
+          endAngle = 270;
+          break;
+        case "down":
+          startAngle = 0;
+          endAngle = 90;
+          break;
+        case "left":
+          startAngle = 90;
+          endAngle = 180;
+          break;
+        case "right":
+          startAngle = -90;
+          endAngle = 0;
+          break;
+      }
+      break;
+  }
+
+  const angleStep = (endAngle - startAngle) / (props.type === "circle" ? total : total - 1 || 1);
+  const angle = startAngle + index * angleStep;
+  const radian = (angle * Math.PI) / 180;
+
+  const x = Math.cos(radian) * radius;
+  const y = Math.sin(radian) * radius;
+
+  return {
+    position: "absolute",
+    left: `calc(50% + ${x}px)`,
+    top: `calc(50% + ${y}px)`,
+    transform: "translate(-50%, -50%)",
+  };
+};
+
+const additionalClasses = computed(() =>
+  [
+    `speed-dial--direction-${props.direction}`,
+    `speed-dial--type-${props.type}`,
+    isOpen.value && "speed-dial--state-open",
+    props.showLabels && "speed-dial--mode-show-labels",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/SplitButton/SplitButton.matrix.ts

@@ -0,0 +1,32 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.split-button',
+  baseQuery: {
+    label: 'Save',
+    model: '[{"label":"Save As"},{"label":"Export"}]'
+  },
+  variants: [
+    {
+      name: 'Severity',
+      subvariants: [
+        { name: 'primary',   query: { severity: 'primary' } },
+        { name: 'secondary', query: { severity: 'secondary' } },
+        { name: 'outlined',  query: { severity: 'outlined' } }
+      ]
+    },
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { size: 'sm' }, focusable: true },
+        { name: 'md', query: { size: 'md' }, focusable: true },
+        { name: 'lg', query: { size: 'lg' }, focusable: true }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',          attr: 'hover' },
+    { name: 'focus-visible',  attr: 'focus-visible' },
+    { name: 'disabled',       props: { isDisabled: 'true' } }
+  ]
+}

package/src/components/SplitButton/SplitButton.scss

@@ -0,0 +1,273 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: split-button;
+
+.#{$c} {
+  display: inline-flex;
+  position: relative;
+}
+
+.#{$c}__main,
+.#{$c}__dropdown {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: var(--split-button-border-width, $split-button-border-width);
+  font-weight: var(--split-button-fontWeight, $split-button-fontWeight);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--split-button-transition-duration, $split-button-transition-duration) ease,
+    border-color var(--split-button-transition-duration, $split-button-transition-duration) ease;
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: var(--split-button-focus-ringWidth, $split-button-focus-ringWidth) solid var(--split-button-focus-ringColor, $split-button-focus-ringColor);
+    outline-offset: var(--split-button-focus-ringOffset, $split-button-focus-ringOffset);
+  }
+}
+
+.#{$c}__main {
+  border-radius: var(--split-button-radius, $split-button-radius) 0 0 var(--split-button-radius, $split-button-radius);
+  border-right-width: 0;
+}
+
+.#{$c}__dropdown {
+  border-radius: 0 var(--split-button-radius, $split-button-radius) var(--split-button-radius, $split-button-radius) 0;
+  position: relative;
+  padding: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 25%;
+    bottom: 25%;
+    width: var(--split-button-divider-width, $split-button-divider-width);
+  }
+}
+
+.#{$c}__icon {
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+.#{$c}__dropdown-icon {
+  transition: transform 0.15s ease;
+
+  &--state-open {
+    transform: rotate(180deg);
+  }
+}
+
+.#{$c}__menu {
+  background-color: var(--split-button-dropdown-background, $split-button-dropdown-background);
+  border: 1px solid var(--split-button-dropdown-border, $split-button-dropdown-border);
+  border-radius: var(--split-button-dropdown-radius, $split-button-dropdown-radius);
+  box-shadow: var(--split-button-dropdown-shadow, $split-button-dropdown-shadow);
+  overflow: hidden;
+  padding: var(--split-button-menu-item-padding-y, $split-button-menu-item-padding-y) 0;
+}
+
+.#{$c}__menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--split-button-menu-item-gap, $split-button-menu-item-gap);
+  padding: var(--split-button-menu-item-padding-y, $split-button-menu-item-padding-y) var(--split-button-menu-item-padding-x, $split-button-menu-item-padding-x);
+  background-color: var(--split-button-menu-item-background-default, $split-button-menu-item-background-default);
+  color: var(--split-button-menu-item-text-default, $split-button-menu-item-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  white-space: nowrap;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--split-button-menu-item-background-hover, $split-button-menu-item-background-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+    background-color: var(--split-button-menu-item-background-hover, $split-button-menu-item-background-hover);
+  }
+}
+
+.#{$c}__menu-item-icon {
+  font-size: var(--split-button-menu-item-icon-size, $split-button-menu-item-icon-size);
+  color: var(--split-button-menu-item-icon-color, $split-button-menu-item-icon-color);
+  flex-shrink: 0;
+}
+
+.#{$c}__menu-item-label {
+  flex: 1;
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    height: var(--split-button-size-sm-height, $split-button-size-sm-height);
+    font-size: var(--split-button-size-sm-fontSize, $split-button-size-sm-fontSize);
+  }
+
+  .#{$c}__main {
+    padding: 0 var(--split-button-size-sm-paddingX, $split-button-size-sm-paddingX);
+    gap: var(--split-button-size-sm-gap, $split-button-size-sm-gap);
+  }
+
+  .#{$c}__dropdown {
+    width: var(--split-button-size-sm-height, $split-button-size-sm-height);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--split-button-size-sm-iconSize, $split-button-size-sm-iconSize);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    height: var(--split-button-size-md-height, $split-button-size-md-height);
+    font-size: var(--split-button-size-md-fontSize, $split-button-size-md-fontSize);
+  }
+
+  .#{$c}__main {
+    padding: 0 var(--split-button-size-md-paddingX, $split-button-size-md-paddingX);
+    gap: var(--split-button-size-md-gap, $split-button-size-md-gap);
+  }
+
+  .#{$c}__dropdown {
+    width: var(--split-button-size-md-height, $split-button-size-md-height);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--split-button-size-md-iconSize, $split-button-size-md-iconSize);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    height: var(--split-button-size-lg-height, $split-button-size-lg-height);
+    font-size: var(--split-button-size-lg-fontSize, $split-button-size-lg-fontSize);
+  }
+
+  .#{$c}__main {
+    padding: 0 var(--split-button-size-lg-paddingX, $split-button-size-lg-paddingX);
+    gap: var(--split-button-size-lg-gap, $split-button-size-lg-gap);
+  }
+
+  .#{$c}__dropdown {
+    width: var(--split-button-size-lg-height, $split-button-size-lg-height);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--split-button-size-lg-iconSize, $split-button-size-lg-iconSize);
+  }
+}
+
+// Severity variants
+.#{$c}--severity-primary {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    background-color: var(--split-button-background-primary-default, $split-button-background-primary-default);
+    border-color: var(--split-button-border-primary-default, $split-button-border-primary-default);
+    color: var(--split-button-text-primary-default, $split-button-text-primary-default);
+
+    &:hover:not(:disabled),
+    &[data-state~="hover"]:not(:disabled) {
+      background-color: var(--split-button-background-primary-hover, $split-button-background-primary-hover);
+      border-color: var(--split-button-border-primary-hover, $split-button-border-primary-hover);
+    }
+
+    &:active:not(:disabled),
+    &[data-state~="active"]:not(:disabled) {
+      background-color: var(--split-button-background-primary-active, $split-button-background-primary-active);
+    }
+
+    &:disabled {
+      background-color: var(--split-button-background-primary-disabled, $split-button-background-primary-disabled);
+      border-color: var(--split-button-border-primary-disabled, $split-button-border-primary-disabled);
+      color: var(--split-button-text-primary-disabled, $split-button-text-primary-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$c}__dropdown::before {
+    background-color: var(--split-button-divider-primary, $split-button-divider-primary);
+  }
+}
+
+.#{$c}--severity-secondary {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    background-color: var(--split-button-background-secondary-default, $split-button-background-secondary-default);
+    border-color: var(--split-button-border-secondary-default, $split-button-border-secondary-default);
+    color: var(--split-button-text-secondary-default, $split-button-text-secondary-default);
+
+    &:hover:not(:disabled),
+    &[data-state~="hover"]:not(:disabled) {
+      background-color: var(--split-button-background-secondary-hover, $split-button-background-secondary-hover);
+      border-color: var(--split-button-border-secondary-hover, $split-button-border-secondary-hover);
+    }
+
+    &:active:not(:disabled),
+    &[data-state~="active"]:not(:disabled) {
+      background-color: var(--split-button-background-secondary-active, $split-button-background-secondary-active);
+    }
+
+    &:disabled {
+      background-color: var(--split-button-background-secondary-disabled, $split-button-background-secondary-disabled);
+      border-color: var(--split-button-border-secondary-disabled, $split-button-border-secondary-disabled);
+      color: var(--split-button-text-secondary-disabled, $split-button-text-secondary-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$c}__dropdown::before {
+    background-color: var(--split-button-divider-secondary, $split-button-divider-secondary);
+  }
+}
+
+.#{$c}--severity-outlined {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    background-color: var(--split-button-background-outlined-default, $split-button-background-outlined-default);
+    border-color: var(--split-button-border-outlined-default, $split-button-border-outlined-default);
+    color: var(--split-button-text-outlined-default, $split-button-text-outlined-default);
+
+    &:hover:not(:disabled),
+    &[data-state~="hover"]:not(:disabled) {
+      background-color: var(--split-button-background-outlined-hover, $split-button-background-outlined-hover);
+      border-color: var(--split-button-border-outlined-hover, $split-button-border-outlined-hover);
+    }
+
+    &:active:not(:disabled),
+    &[data-state~="active"]:not(:disabled) {
+      background-color: var(--split-button-background-outlined-active, $split-button-background-outlined-active);
+    }
+
+    &:disabled {
+      background-color: var(--split-button-background-outlined-disabled, $split-button-background-outlined-disabled);
+      border-color: var(--split-button-border-outlined-disabled, $split-button-border-outlined-disabled);
+      color: var(--split-button-text-outlined-disabled, $split-button-text-outlined-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$c}__dropdown::before {
+    background-color: var(--split-button-divider-outlined, $split-button-divider-outlined);
+  }
+}
+
+// Disabled state
+.#{$c}--state-disabled {
+  .#{$c}__main,
+  .#{$c}__dropdown {
+    cursor: not-allowed;
+  }
+}