@dillingerstaffing/strand-vue 0.13.0 → 0.15.0

package/src/components/CodeBlock/CodeBlock.vue

@@ -1,6 +1,6 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 interface Props {
   /** The code content to display */
@@ -9,22 +9,95 @@ interface Props {
   language?: string
   /** Additional CSS class */
   className?: string
+  /**
+   * Render the one-click copy-to-clipboard button. Defaults to true so
+   * every CodeBlock is copyable out of the box; pass false to opt out
+   * for blocks that should not advertise a copy affordance.
+   */
+  copyable?: boolean
 }
 
+const COPIED_DURATION_MS = 1500
+
 const props = withDefaults(defineProps<Props>(), {
   className: '',
+  copyable: true,
 })
 
 const classes = computed(() =>
-  ['strand-code-block', props.className]
-    .filter(Boolean)
-    .join(' '),
+  ['strand-code-block', props.className].filter(Boolean).join(' '),
 )
+
+const copied = ref(false)
+let timer: number | null = null
+
+onBeforeUnmount(() => {
+  if (timer !== null) window.clearTimeout(timer)
+})
+
+async function handleCopy() {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(props.code)
+    } else {
+      const ta = document.createElement('textarea')
+      ta.value = props.code
+      ta.setAttribute('readonly', '')
+      ta.style.position = 'absolute'
+      ta.style.left = '-9999px'
+      document.body.appendChild(ta)
+      ta.select()
+      document.execCommand('copy')
+      document.body.removeChild(ta)
+    }
+    copied.value = true
+    if (timer !== null) window.clearTimeout(timer)
+    timer = window.setTimeout(() => {
+      copied.value = false
+    }, COPIED_DURATION_MS)
+  } catch {
+    // Ignore copy failures.
+  }
+}
 </script>
 
 <template>
-  <div :class="classes" v-bind="$attrs">
+  <div :class="classes" :data-strand-copy="copyable ? '' : undefined" v-bind="$attrs">
     <span v-if="language" class="strand-code-block__label">{{ language }}</span>
     <pre class="strand-code-block__pre"><code>{{ code }}</code></pre>
+    <button
+      v-if="copyable"
+      type="button"
+      :class="['strand-code-block__copy', copied ? 'strand-code-block__copy--copied' : '']"
+      :aria-label="copied ? 'Copied' : 'Copy code to clipboard'"
+      @click="handleCopy"
+    >
+      <svg
+        class="strand-code-block__copy-icon strand-code-block__copy-icon--clipboard"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M6 3 V2 a1 1 0 0 1 1-1 h2 a1 1 0 0 1 1 1 v1 M5 3 h6 a1 1 0 0 1 1 1 v9 a1 1 0 0 1 -1 1 h-6 a1 1 0 0 1 -1 -1 v-9 a1 1 0 0 1 1 -1 z" />
+      </svg>
+      <svg
+        class="strand-code-block__copy-icon strand-code-block__copy-icon--check"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M3 8 l3 3 l7 -7" />
+      </svg>
+    </button>
   </div>
 </template>

package/src/components/InstrumentViewport/InstrumentViewport.test.ts

@@ -37,6 +37,25 @@ describe('InstrumentViewport', () => {
     expect(container.firstElementChild?.className).toContain('strand-instrument-viewport--grid')
   })
 
+  // ── Full bleed modifier ──
+
+  it('does not apply full-bleed modifier by default', () => {
+    const { container } = render(InstrumentViewport, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).not.toContain(
+      'strand-instrument-viewport--full-bleed',
+    )
+  })
+
+  it('applies full-bleed modifier when fullBleed prop is true', () => {
+    const { container } = render(InstrumentViewport, {
+      props: { fullBleed: true },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain(
+      'strand-instrument-viewport--full-bleed',
+    )
+  })
+
   // ── Custom className ──
 
   it('merges custom className with component classes', () => {

package/src/components/InstrumentViewport/InstrumentViewport.vue

@@ -5,12 +5,17 @@ import { computed } from 'vue'
 interface Props {
   /** Show grid overlay lines */
   grid?: boolean
+  /** Render as page-filling instrument cabinet (DL Part 9.3 full-bleed mode).
+   *  Requires the host page to apply `strand-body--instrument` to <body>
+   *  so the dark surface reaches the screen edge. */
+  fullBleed?: boolean
   /** Additional CSS class */
   className?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   grid: false,
+  fullBleed: false,
   className: '',
 })
 
@@ -18,6 +23,7 @@ const classes = computed(() =>
   [
     'strand-instrument-viewport',
     props.grid && 'strand-instrument-viewport--grid',
+    props.fullBleed && 'strand-instrument-viewport--full-bleed',
     props.className,
   ]
     .filter(Boolean)

package/src/components/Link/Link.test.ts

@@ -67,6 +67,18 @@ describe('Link', () => {
     expect(container.firstElementChild?.getAttribute('rel')).toBe('noopener noreferrer')
   })
 
+  // ── Variants ──
+
+  it('applies cta variant class', () => {
+    const { container } = render(Link, { props: { href: '/start', variant: 'cta' }, slots: { default: 'Start' } })
+    expect(container.firstElementChild?.className).toContain('strand-link--cta')
+  })
+
+  it('applies mono variant class', () => {
+    const { container } = render(Link, { props: { href: '/', variant: 'mono' }, slots: { default: 'Home' } })
+    expect(container.firstElementChild?.className).toContain('strand-link--mono')
+  })
+
   // ── Custom className ──
 
   it('merges custom className', () => {

package/src/components/Link/Link.vue

@@ -7,17 +7,20 @@ interface Props {
   href: string
   /** Opens in new tab with rel="noopener noreferrer" */
   external?: boolean
+  /** Style variant */
+  variant?: 'default' | 'cta' | 'mono'
   /** Additional CSS class */
   className?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   external: false,
+  variant: 'default',
   className: '',
 })
 
 const classes = computed(() =>
-  ['strand-link', props.className].filter(Boolean).join(' '),
+  ['strand-link', props.variant !== 'default' && `strand-link--${props.variant}`, props.className].filter(Boolean).join(' '),
 )
 </script>
 

package/src/components/Nav/Nav.test.ts

@@ -168,4 +168,18 @@ describe('Nav', () => {
     })
     expect(container.querySelector('.strand-nav__logo')).toBeNull()
   })
+
+  it('applies glass class when glass is true', () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems, glass: true },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-nav--glass')
+  })
+
+  it('does not apply glass class by default', () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    expect(container.firstElementChild?.className).not.toContain('strand-nav--glass')
+  })
 })

package/src/components/Nav/Nav.vue

@@ -11,10 +11,13 @@ export interface NavItem {
 export interface NavProps {
   /** Navigation items */
   items?: NavItem[]
+  /** Glassmorphic variant (fixed, backdrop-filter, DL 11.5) */
+  glass?: boolean
 }
 
 const props = withDefaults(defineProps<NavProps>(), {
   items: () => [],
+  glass: false,
 })
 
 const menuOpen = ref(false)
@@ -23,7 +26,7 @@ function toggleMenu() {
   menuOpen.value = !menuOpen.value
 }
 
-const classes = computed(() => ['strand-nav'].filter(Boolean).join(' '))
+const classes = computed(() => ['strand-nav', props.glass && 'strand-nav--glass'].filter(Boolean).join(' '))
 </script>
 
 <template>

package/src/components/Section/Section.test.ts

@@ -30,6 +30,16 @@ describe('Section', () => {
     expect(container.firstElementChild?.className).toContain('strand-section--hero')
   })
 
+  it('applies compact variant class', () => {
+    const { container } = render(Section, { props: { variant: 'compact' }, slots: { default: 'c' } })
+    expect(container.firstElementChild?.className).toContain('strand-section--compact')
+  })
+
+  it('applies border-top class', () => {
+    const { container } = render(Section, { props: { borderTop: true }, slots: { default: 'c' } })
+    expect(container.firstElementChild?.className).toContain('strand-section--border-top')
+  })
+
   // ── Background ──
 
   it('applies primary background class by default', () => {

package/src/components/Section/Section.vue

@@ -4,9 +4,11 @@ import { computed } from 'vue'
 
 interface Props {
   /** Padding variant */
-  variant?: 'standard' | 'hero'
+  variant?: 'standard' | 'hero' | 'compact'
   /** Surface background */
   background?: 'primary' | 'elevated' | 'recessed'
+  /** Top border separator */
+  borderTop?: boolean
   /** Additional CSS class */
   className?: string
 }
@@ -14,6 +16,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   variant: 'standard',
   background: 'primary',
+  borderTop: false,
   className: '',
 })
 
@@ -22,6 +25,7 @@ const classes = computed(() =>
     'strand-section',
     `strand-section--${props.variant}`,
     `strand-section--bg-${props.background}`,
+    props.borderTop && 'strand-section--border-top',
     props.className,
   ]
     .filter(Boolean)