@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiBanner/UiBanner.vue

@@ -0,0 +1,363 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import UiButton from '../UiButton/UiButton.vue'
+import i18n from 'i18next'
+
+export interface UiBannerProps {
+  /**
+   * The color theme of the banner
+   * @values neutral, primary, success, warning, danger
+   */
+  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger'
+  /**
+   * The layout variant of the banner
+   * @values full-width, horizontal, vertical
+   */
+  variant?: 'full-width' | 'horizontal' | 'vertical'
+  /**
+   * Show or hide the icon
+   */
+  showIcon?: boolean
+  /**
+   * Label text for the action button
+   */
+  actionLabel?: string
+  /**
+   * Disabled state for the action button
+   */
+  actionDisabled?: boolean
+  /**
+   * Icon for the action button
+   */
+  actionIcon?: string
+  /**
+   * External URL for the action button (opens in new tab)
+   */
+  actionHref?: string
+  /**
+   * Router location for the action button
+   */
+  actionTo?: object
+  /**
+   * Show or hide the close button
+   */
+  closable?: boolean
+  /**
+   * Unique identifier for the banner (required when rememberClosed is true)
+   */
+  bannerId?: string
+  /**
+   * Whether to remember the closed state in localStorage
+   */
+  rememberClosed?: boolean
+  /**
+   * Number of seconds before the banner can show again after being closed
+   * -1: stays closed forever
+   * 0: expires immediately (no persistence)
+   * >0: number of seconds until expiry
+   */
+  closedExpirySeconds?: number
+}
+
+const props = withDefaults(defineProps<UiBannerProps>(), {
+  color: 'primary',
+  variant: 'horizontal',
+  showIcon: true,
+  actionLabel: '',
+  actionDisabled: false,
+  actionIcon: '',
+  actionHref: '',
+  actionTo: undefined,
+  closable: false,
+  bannerId: undefined,
+  rememberClosed: false,
+  closedExpirySeconds: -1,
+})
+
+const emit = defineEmits<{
+  'banner-action': []
+  'close': []
+}>()
+
+const isClosed = defineModel<boolean>('closed', { default: false })
+
+// Persisted closed timestamp - only use localStorage if bannerId and rememberClosed are set
+const closedTimestamp = props.bannerId && props.rememberClosed
+  ? useLocalStorage<number | null>(`banner-closed-${props.bannerId}`, null)
+  : ref<number | null>(null)
+
+// Check if the banner should remain closed based on expiry
+const shouldRemainClosed = computed(() => {
+  if (!props.rememberClosed || closedTimestamp.value === null) return false
+
+  // -1 means stay closed forever
+  if (props.closedExpirySeconds === -1) return true
+
+  // 0 or less (other than -1) means no persistence
+  if (props.closedExpirySeconds <= 0) return false
+
+  // Check if expiry period has passed
+  const expiryMs = props.closedExpirySeconds * 1000
+  const elapsed = Date.now() - closedTimestamp.value
+  return elapsed < expiryMs
+})
+
+// Initialize closed state on mount
+onMounted(() => {
+  if (shouldRemainClosed.value) {
+    isClosed.value = true
+  }
+})
+
+// Icon mapping based on color
+const iconClass = computed(() => {
+  const colorMap = {
+    neutral: 'i-ls-info',
+    primary: 'i-ls-info',
+    success: 'i-ls-check-circle',
+    warning: 'i-ls-alert-triangle',
+    danger: 'i-ls-alert-circle',
+  }
+  return colorMap[props.color]
+})
+
+// Background color mapping
+const bgColorClass = computed(() => {
+  const colorMap = {
+    neutral: 'bg-surface-neutral-alpha-100',
+    primary: 'bg-surface-primary-alpha-100',
+    success: 'bg-surface-success-alpha-100',
+    warning: 'bg-surface-warning-alpha-100',
+    danger: 'bg-surface-danger-alpha-100',
+  }
+  return colorMap[props.color]
+})
+
+// Title text color mapping
+const titleColorClass = computed(() => {
+  const colorMap = {
+    neutral: 'text-text-neutral-base',
+    primary: 'text-text-primary-base',
+    success: 'text-text-success-base',
+    warning: 'text-text-warning-base',
+    danger: 'text-text-danger-base',
+  }
+  return colorMap[props.color]
+})
+
+// Description text color mapping
+const descriptionColorClass = computed(() => {
+  const colorMap = {
+    neutral: 'text-text-neutral-secondary',
+    primary: 'text-text-primary-secondary',
+    success: 'text-text-success-secondary',
+    warning: 'text-text-warning-secondary',
+    danger: 'text-text-danger-secondary',
+  }
+  return colorMap[props.color]
+})
+
+// Map banner color to UiButton color (UiButton uses 'error' instead of 'danger')
+const buttonColor = computed(() => {
+  return props.color === 'danger' ? 'error' : props.color
+})
+
+// Layout classes based on variant
+const containerClasses = computed(() => {
+  const baseClasses = [
+    'ui-banner',
+    'flex',
+    'items-center',
+    bgColorClass.value,
+  ]
+
+  if (props.variant === 'full-width') {
+    return [
+      ...baseClasses,
+      'flex-col sm:flex-row',
+      'gap-2',
+      'px-4',
+      'py-3',
+      'w-full',
+      'relative',
+    ]
+  } else if (props.variant === 'horizontal') {
+    return [
+      ...baseClasses,
+      'flex-col sm:flex-row',
+      'gap-2',
+      'min-h-12',
+      'pl-4',
+      'pr-3',
+      'py-3',
+      'rounded-xl',
+      'relative',
+    ]
+  } else { // vertical
+    return [
+      ...baseClasses,
+      'flex-col',
+      'gap-2',
+      'justify-center',
+      'p-3',
+      'rounded-xl',
+      'relative',
+    ]
+  }
+})
+
+const contentWrapperClasses = computed(() => {
+  if (props.variant === 'vertical') {
+    return [
+      'flex',
+      'flex-col',
+      'gap-1.5',
+      'items-center',
+      'w-full',
+    ]
+  }
+  return [
+    'flex',
+    'flex-col sm:flex-row',
+    'gap-3',
+    'items-center',
+    'flex-1',
+    'min-w-0',
+    'w-full sm:w-auto',
+  ]
+})
+
+const contentClasses = computed(() => {
+  if (props.variant === 'vertical') {
+    return [
+      'flex',
+      'flex-col',
+      'items-center',
+      'text-center',
+      'w-full',
+    ]
+  }
+  return [
+    'flex',
+    'flex-col',
+    'flex-1',
+    'min-w-0',
+    'text-center sm:text-left', // Center text on mobile, left-align on desktop
+    'items-center sm:items-start', // Center items on mobile, start on desktop
+  ]
+})
+
+const closeButtonClasses = computed(() => {
+  if (props.variant === 'vertical') {
+    return [
+      'absolute',
+      'top-1',
+      'right-1',
+    ]
+  }
+  return [
+    'absolute sm:static',
+    'top-1 sm:top-auto',
+    'right-1 sm:right-auto',
+  ]
+})
+
+function handleClose () {
+  isClosed.value = true
+
+  // Save timestamp to localStorage if persistence is enabled
+  if (props.rememberClosed && props.bannerId) {
+    closedTimestamp.value = Date.now()
+  }
+
+  emit('close')
+}
+
+function handleAction () {
+  emit('banner-action')
+}
+
+</script>
+
+<template>
+  <div
+    v-if="!isClosed"
+    :class="containerClasses"
+    data-testid="ui-banner"
+    :data-color="color"
+    :data-variant="variant"
+  >
+    <!-- Content wrapper -->
+    <div :class="contentWrapperClasses">
+      <!-- Icon -->
+      <div
+        v-if="showIcon"
+        class="shrink-0 w-4 h-4"
+        :class="[iconClass, titleColorClass]"
+      />
+
+      <!-- Title and Description -->
+      <div :class="contentClasses">
+        <!-- Title slot -->
+        <div
+          v-if="$slots.default"
+          class="text-content-text-md-bold"
+          :class="titleColorClass"
+        >
+          <slot />
+        </div>
+
+        <!-- Description slot -->
+        <div
+          v-if="$slots.description"
+          class="text-content-text-md-regular"
+          :class="descriptionColorClass"
+        >
+          <slot name="description" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Action button -->
+    <UiButton
+      v-if="actionLabel"
+      variant="secondary"
+      type="button"
+      :color="buttonColor"
+      :disabled="actionDisabled"
+      :icon="actionIcon || undefined"
+      :href="actionHref || undefined"
+      :to="actionTo"
+      :target="actionHref ? '_blank' : undefined"
+      :rel="actionHref ? 'noopener noreferrer' : undefined"
+      :class="[
+        'shrink-0',
+        {
+          'w-full': variant === 'vertical',
+          'w-full sm:w-auto': variant === 'horizontal' || variant === 'full-width',
+        },
+      ]"
+      data-testid="ui-banner-action"
+      @click="handleAction"
+    >
+      {{ actionLabel }}
+    </UiButton>
+
+    <!-- Close button -->
+    <div
+      v-if="closable"
+      :class="closeButtonClasses"
+    >
+      <UiButton
+        :label="i18n.t('general_close')"
+        variant="tertiary"
+        color="neutral"
+        icon="i-ls-x"
+        class="shrink-0"
+        data-testid="ui-banner-close"
+        @click="handleClose"
+      />
+    </div>
+  </div>
+</template>

package/src/components/UiBanner/index.ts

@@ -0,0 +1,2 @@
+export { default } from './UiBanner.vue'
+export type { UiBannerProps } from './UiBanner.vue'

package/src/components/UiBreadcrumb/UiBreadcrumb.vue

@@ -0,0 +1,93 @@
+<template>
+  <nav
+    :aria-label="ariaLabel"
+    class="inline-flex"
+  >
+    <ol
+      class="flex list-none p-0 m-0 gap-2"
+      :class="{
+        'flex-col items-start': orientation === 'vertical',
+        'flex-row items-center': orientation === 'horizontal',
+      }"
+    >
+      <template
+        v-for="(item, index) in items"
+        :key="`${index}-${item.label}`"
+      >
+        <li class="flex items-center">
+          <component
+            :is="isInteractive(index) ? 'button' : 'span'"
+            :type="isInteractive(index) ? 'button' : undefined"
+            :aria-current="isLast(index) ? 'page' : undefined"
+            :class="itemClasses(index)"
+            @click="handleClick(index)"
+          >
+            <span
+              v-if="isInteractive(index)"
+              aria-hidden="true"
+              class="absolute inset-[-4px] rounded-sm bg-transparent transition-colors group-hover:bg-actions-neutral-hover-overlay group-focus-visible:ring-2 group-focus-visible:ring-inset group-focus-visible:ring-focus-ring"
+            />
+            <span class="relative">{{ item.label }}</span>
+          </component>
+        </li>
+        <li
+          v-if="orientation === 'horizontal' && !isLast(index)"
+          aria-hidden="true"
+          class="text-content-legends-medium-md text-text-neutral-tertiary shrink-0"
+        >
+          /
+        </li>
+      </template>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+
+export interface UiBreadcrumbItem {
+  label: string;
+  onClick?: () => unknown;
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: UiBreadcrumbItem[];
+    orientation?: 'horizontal' | 'vertical';
+    ariaLabel?: string;
+  }>(),
+  {
+    orientation: 'horizontal',
+    ariaLabel: undefined,
+  },
+);
+
+const isLast = (index: number): boolean => index === props.items.length - 1;
+
+const isInteractive = (index: number): boolean => {
+  return !!props.items[index].onClick;
+};
+
+const handleClick = (index: number): void => {
+  if (!isInteractive(index)) return;
+  props.items[index].onClick?.();
+};
+
+const itemClasses = (index: number): string[] => {
+  const base = [
+    'relative inline-flex h-6 items-center justify-center whitespace-nowrap',
+    'text-content-legends-medium-md shrink-0 border-0 bg-transparent p-0',
+  ];
+  base.push(
+    isLast(index)
+      ? 'text-text-neutral-secondary'
+      : 'text-text-neutral-tertiary',
+  );
+  if (isInteractive(index)) {
+    base.push(
+      'group cursor-pointer focus-indicator-none',
+      'transition-colors hover:text-text-neutral-secondary',
+    );
+  }
+  return base;
+};
+</script>

package/src/components/UiBreadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { default as UiBreadcrumb } from './UiBreadcrumb.vue'
+export type { UiBreadcrumbItem } from './UiBreadcrumb.vue'