@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Blokkli/Text/index.vue

@@ -9,12 +9,12 @@ const props = defineProps<ParagraphIcmsLayoutTextFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_text',
   globalOptions: [
-    'textWidth',
-    'spacingBottom',
     'spacingTop',
-    'colorScheme',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'width',
     'textColumns',
-    'buttonAlignment',
+    'colorScheme',
   ],
 })
 

package/components/Blokkli/TextMedia/Nested/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <ParagraphTextMedia v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTextMediaFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_text_media',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'width',
+    'alignHorizontalReduced',
+  ],
+})
+</script>

package/components/Blokkli/TextMedia/icon.svg

@@ -1,5 +1,4 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M14.3333 11.6667H19M14.3333 15H19M14.3333 19H19M14.3333 22.3333H19M7.66667 11H11C11.3682 11 11.6667 11.2985 11.6667 11.6667V15C11.6667 15.3682 11.3682 15.6667 11 15.6667H7.66667C7.29848 15.6667 7 15.3682 7 15V11.6667C7 11.2985 7.29848 11 7.66667 11ZM7.66667 18.3333H11C11.3682 18.3333 11.6667 18.6318 11.6667 19V22.3333C11.6667 22.7015 11.3682 23 11 23H7.66667C7.29848 23 7 22.7015 7 22.3333V19C7 18.6318 7.29848 18.3333 7.66667 18.3333Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.5 25C26.7761 25 27 25.2239 27 25.5V26.5C27 26.7761 26.7761 27 26.5 27H3.5C3.22386 27 3 26.7761 3 26.5V25.5C3 25.2239 3.22386 25 3.5 25H26.5ZM15.2568 21C15.8201 21.8072 16.548 22.4907 17.3936 23H3.5C3.22386 23 3 22.7761 3 22.5V21.5C3 21.2239 3.22386 21 3.5 21H15.2568ZM26.709 21.0469C26.8805 21.1261 27 21.2986 27 21.5V22.5C27 22.7761 26.7761 23 26.5 23H24.6064C25.4353 22.5007 26.1504 21.8334 26.709 21.0469ZM26.5 3C26.7761 3 27 3.22386 27 3.5V13.3936C26.4906 12.5479 25.8074 11.8192 25 11.2559V5H5V12.127L9.21289 7.32715C9.37725 7.13984 9.65489 7.10167 9.86328 7.23828L16.5293 11.6123C14.9836 12.8963 14 14.8335 14 17C14 17.6951 14.1024 18.3662 14.291 19H3.5C3.46557 19 3.43189 18.9969 3.39941 18.9902C3.20392 18.9503 3.04966 18.7961 3.00977 18.6006C3.00314 18.5681 3 18.5344 3 18.5V3.5C3 3.46557 3.00314 3.43189 3.00977 3.39941C3.05629 3.17145 3.25829 3 3.5 3H26.5Z" fill="currentColor"/>
+<path d="M21 11C24.3137 11 27 13.6863 27 17C27 20.3137 24.3137 23 21 23C17.6863 23 15 20.3137 15 17C15 13.6863 17.6863 11 21 11ZM19.7568 14.4541C19.4237 14.2546 19.0002 14.4945 19 14.8828V19.1172C19.0002 19.5055 19.4237 19.7454 19.7568 19.5459L23.2852 17.4287C23.6088 17.2345 23.6088 16.7655 23.2852 16.5713L19.7568 14.4541Z" fill="currentColor"/>
 </svg>

package/components/Blokkli/TextMedia/index.vue

@@ -10,12 +10,11 @@ const props = defineProps<ParagraphIcmsLayoutTextMediaFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_text_media',
   globalOptions: [
-    'textWidth',
-    'spacingBottom',
     'spacingTop',
+    'spacingBottom',
+    'width',
+    'alignHorizontalReduced',
     'colorScheme',
-    'buttonAlignment',
-    'reverseColumns',
   ],
 })
 </script>

package/components/Blokkli/Timeline/Element/icon.svg

@@ -1,7 +1,10 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 8L9 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<circle cx="9" cy="11" r="1" fill="none"/>
-<circle cx="9" cy="19" r="1" fill="none"/>
-<rect x="12.25" y="9.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" stroke-width="1.5" fill="none"/>
-<rect x="12.25" y="17.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" stroke-width="1.5" fill="none"/>
+<rect x="2" y="16" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="16" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="2" y="12" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="12" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="2" y="8" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="8" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="2" y="20" width="6" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="20" width="6" height="2" rx="0.5" fill="currentColor"/>
 </svg>

package/components/Blokkli/Timeline/Element/index.vue

@@ -9,6 +9,6 @@ const props = defineProps<ParagraphIcmsTimelineElementFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_timeline_element',
-  globalOptions: ['reverseColumns'],
+  globalOptions: ['alignHorizontalReduced'],
 })
 </script>

package/components/Blokkli/Timeline/Layout/icon.svg

@@ -1,16 +1,11 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_286_20)">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M7 10L7 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<circle cx="7" cy="13" r="1" fill="none"/>
-<circle cx="7" cy="21" r="1" fill="none"/>
-<rect x="10.25" y="11.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" fill="none" stroke-width="1.5"/>
-<rect x="10.25" y="19.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" fill="none" stroke-width="1.5"/>
+<g clip-path="url(#clip0_67_423)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM3.5 22C3.22386 22 3 22.2239 3 22.5V23.5C3 23.7761 3.22386 24 3.5 24H8.5C8.77614 24 9 23.7761 9 23.5V22.5C9 22.2239 8.77614 22 8.5 22H3.5ZM14.5 22C14.2239 22 14 22.2239 14 22.5V23.5C14 23.7761 14.2239 24 14.5 24H19.5C19.7761 24 20 23.7761 20 23.5V22.5C20 22.2239 19.7761 22 19.5 22H14.5ZM3.5 18C3.22386 18 3 18.2239 3 18.5V19.5C3 19.7761 3.22386 20 3.5 20H11.5C11.7761 20 12 19.7761 12 19.5V18.5C12 18.2239 11.7761 18 11.5 18H3.5ZM14.5 18C14.2239 18 14 18.2239 14 18.5V19.5C14 19.7761 14.2239 20 14.5 20H22.5C22.7761 20 23 19.7761 23 19.5V18.5C23 18.2239 22.7761 18 22.5 18H14.5ZM3.5 14C3.22386 14 3 14.2239 3 14.5V15.5C3 15.7761 3.22386 16 3.5 16H11.5C11.7761 16 12 15.7761 12 15.5V14.5C12 14.2239 11.7761 14 11.5 14H3.5ZM14.5 14C14.2239 14 14 14.2239 14 14.5V15.5C14 15.7761 14.2239 16 14.5 16H22.5C22.7761 16 23 15.7761 23 15.5V14.5C23 14.2239 22.7761 14 22.5 14H14.5ZM3.5 10C3.22386 10 3 10.2239 3 10.5V11.5C3 11.7761 3.22386 12 3.5 12H11.5C11.7761 12 12 11.7761 12 11.5V10.5C12 10.2239 11.7761 10 11.5 10H3.5ZM14.5 10C14.2239 10 14 10.2239 14 10.5V11.5C14 11.7761 14.2239 12 14.5 12H22.5C22.7761 12 23 11.7761 23 11.5V10.5C23 10.2239 22.7761 10 22.5 10H14.5Z" fill="currentColor"/>
 </g>
 <defs>
-<clipPath id="clip0_286_20">
-<rect width="30" height="30" fill="none"/>
+<clipPath id="clip0_67_423">
+<rect width="30" height="30" fill="white"/>
 </clipPath>
 </defs>
 </svg>

package/components/Blokkli/Timeline/Layout/index.vue

@@ -9,6 +9,11 @@ const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_timeline',
-  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'colorScheme',
+  ],
 })
 </script>

package/components/Blokkli/TwoColumnText/Element/icon.svg

@@ -1,8 +1,10 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 7H9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M13 7H21" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M1 11H9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M13 11H21" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M1 15H9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M13 15H21" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="16" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="16" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="2" y="12" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="12" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="2" y="8" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="8" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="2" y="20" width="6" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="20" width="6" height="2" rx="0.5" fill="currentColor"/>
 </svg>

package/components/Blokkli/TwoColumnText/Element/index.vue

@@ -9,7 +9,6 @@ const props = defineProps<ParagraphIcms2ColTextElementFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_2_col_text_element',
-  globalOptions: ['spacingBottom'],
+  globalOptions: ['spacingBottom', 'alignHorizontalReduced'],
 })
-
 </script>

package/components/Blokkli/TwoColumnText/Layout/Nested/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <ParagraphTwoColumnTextLayout v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayout2ColTextElementsFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayout2ColTextElementsFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_2_col_text_elements',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: ['spacingTop', 'spacingBottom'],
+  editor: {
+    addBehaviour: 'no-form',
+  },
+})
+</script>

package/components/Blokkli/TwoColumnText/Layout/icon.svg

@@ -1,10 +1,11 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M6 14H11.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M14.4 14H20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6 16.9999H11.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M14.4 16.9999H20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6 20H11.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M14.4 20H20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<g clip-path="url(#clip0_67_423)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM3.5 22C3.22386 22 3 22.2239 3 22.5V23.5C3 23.7761 3.22386 24 3.5 24H8.5C8.77614 24 9 23.7761 9 23.5V22.5C9 22.2239 8.77614 22 8.5 22H3.5ZM14.5 22C14.2239 22 14 22.2239 14 22.5V23.5C14 23.7761 14.2239 24 14.5 24H19.5C19.7761 24 20 23.7761 20 23.5V22.5C20 22.2239 19.7761 22 19.5 22H14.5ZM3.5 18C3.22386 18 3 18.2239 3 18.5V19.5C3 19.7761 3.22386 20 3.5 20H11.5C11.7761 20 12 19.7761 12 19.5V18.5C12 18.2239 11.7761 18 11.5 18H3.5ZM14.5 18C14.2239 18 14 18.2239 14 18.5V19.5C14 19.7761 14.2239 20 14.5 20H22.5C22.7761 20 23 19.7761 23 19.5V18.5C23 18.2239 22.7761 18 22.5 18H14.5ZM3.5 14C3.22386 14 3 14.2239 3 14.5V15.5C3 15.7761 3.22386 16 3.5 16H11.5C11.7761 16 12 15.7761 12 15.5V14.5C12 14.2239 11.7761 14 11.5 14H3.5ZM14.5 14C14.2239 14 14 14.2239 14 14.5V15.5C14 15.7761 14.2239 16 14.5 16H22.5C22.7761 16 23 15.7761 23 15.5V14.5C23 14.2239 22.7761 14 22.5 14H14.5ZM3.5 10C3.22386 10 3 10.2239 3 10.5V11.5C3 11.7761 3.22386 12 3.5 12H11.5C11.7761 12 12 11.7761 12 11.5V10.5C12 10.2239 11.7761 10 11.5 10H3.5ZM14.5 10C14.2239 10 14 10.2239 14 10.5V11.5C14 11.7761 14.2239 12 14.5 12H22.5C22.7761 12 23 11.7761 23 11.5V10.5C23 10.2239 22.7761 10 22.5 10H14.5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_67_423">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/components/Blokkli/TwoColumnText/Layout/index.vue

@@ -9,10 +9,9 @@ const props = defineProps<ParagraphIcmsLayout2ColTextElementsFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_2_col_text_elements',
-  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: ['spacingTop', 'spacingBottom', 'colorScheme'],
   editor: {
     addBehaviour: 'no-form',
   },
 })
-
 </script>

package/components/Blokkli/iFrame/Nested/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <ParagraphIFrame v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_iframe',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: ['spacingTop', 'spacingBottom', 'alignHorizontalFull'],
+})
+</script>

package/components/Blokkli/iFrame/icon.svg

@@ -1,7 +1,4 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M10 11L5.80023 16.0397C5.33667 16.596 5.33667 17.404 5.80023 17.9603L10 23" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M16 23L20.1998 17.9603C20.6633 17.404 20.6633 16.596 20.1998 16.0397L16 11" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M11.5 20.5L14.5 13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-</svg>
+<path d="M12.0607 10.4038C12.2559 10.5991 12.2559 10.9156 12.0607 11.1109L8.17157 15L12.0607 18.8891C12.2559 19.0843 12.2559 19.4009 12.0607 19.5962L11.3536 20.3033C11.1583 20.4986 10.8417 20.4986 10.6464 20.3033L5.6967 15.3535C5.67235 15.3292 5.65075 15.3032 5.63248 15.2755C5.50418 15.0814 5.52578 14.8174 5.6967 14.6464L10.6464 9.69669C10.8417 9.50143 11.1583 9.50143 11.3536 9.69669L12.0607 10.4038Z" fill="currentColor"/>
+<path d="M18.6464 9.6967C18.8417 9.50144 19.1583 9.50144 19.3535 9.6967L24.3033 14.6464C24.4986 14.8417 24.4986 15.1583 24.3033 15.3536L19.3535 20.3033C19.1583 20.4986 18.8417 20.4986 18.6464 20.3033L17.9393 19.5962C17.7441 19.4009 17.7441 19.0843 17.9393 18.8891L21.8284 15L17.9393 11.1109C17.7441 10.9157 17.7441 10.5991 17.9393 10.4038L18.6464 9.6967Z" fill="currentColor"/>
+</svg>

package/components/Blokkli/iFrame/index.vue

@@ -9,6 +9,11 @@ const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_iframe',
-  globalOptions: ['textWidth', 'spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'colorScheme',
+  ],
 })
 </script>

package/components/DesignSystem/Atoms/Button.vue

@@ -1,53 +1,57 @@
 <template>
-  <NuxtLink
-    :class="
-      cn(
-        button({ colorScheme, style, textAlignment }),
-        themedClass('buttonClass'),
-      )
-    "
-    :target="targetBlank ? '_blank' : '_self'"
+  <UButton
     :to="linkComplete"
+    :type="type"
+    :label="label"
     :title="title"
-    :prefetch="prefetch"
-  >
-    <span class="block" :class="themedClass('labelClass')">{{ label }}</span>
-    <span
-      v-if="subline"
-      class="block"
-      :class="themedClass('sublineClass', 'text-sm font-light')"
-      >{{ subline }}</span
-    >
-  </NuxtLink>
+    :target="targetBlank ? '_blank' : '_self'"
+    :ui="{
+      base: button({
+        colorScheme: colorScheme,
+        style: buttonStyle,
+      }),
+      label: themedClass('labelClass', 'font-medium'),
+    }"
+  />
 </template>
 
 <script lang="ts" setup>
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
-import cn from '@iqual/nuxt-icms/composables/useCn'
+import type { ColorScheme, ButtonStyle } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemAtomsButton')
 
 const props = defineProps<{
+  as?: any
+  type?: 'button' | 'submit' | 'reset' | undefined
   label?: string
-  subline?: string
   title?: string
   link?: string
   params?: string
   targetBlank?: boolean
-  style?: string
+  buttonStyle?: ButtonStyle
   colorScheme?: ColorScheme
-  textAlignment?: string
   buttonClass?: string
   labelClass?: string
-  sublineClass?: string
 }>()
 
+const linkComplete = computed(() => {
+  let link = ''
+
+  if (props?.link) {
+    link += props?.link
+  }
+  if (props?.params) {
+    link += props?.params
+  }
+  return link
+})
+
 const button = tv({
   base: themedClass(
-    'buttonBase',
-    'cursor-pointer font-medium py-3 px-10 block w-full md:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
+    'buttonClass',
+    'rounded-none cursor-pointer py-3 px-10 block w-full md:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
   ),
   variants: {
     colorScheme: {
@@ -57,18 +61,13 @@ const button = tv({
       accent: themedClass('buttonVariantsColorSchemeAccent'),
     },
     style: {
-      normal: themedClass('buttonVariantsStyleNormal', 'border'),
-      focus: themedClass('buttonVariantsStyleFocus', 'border'),
+      normal: themedClass('buttonVariantsStyleNormal', 'border text-center'),
+      focus: themedClass('buttonVariantsStyleFocus', 'border text-center'),
       minimal: themedClass(
         'buttonVariantsStyleMinimal',
-        'p-0 underline text-current',
+        'bg-transparent w-fit p-0 underline hover:bg-transparent',
       ),
     },
-    textAlignment: {
-      left: themedClass('buttonVariantsTextAlignmentLeft', 'text-left'),
-      center: themedClass('buttonVariantsTextAlignmentCenter', 'text-center'),
-      right: themedClass('buttonVariantsTextAlignmentRight', 'text-right'),
-    },
   },
   compoundVariants: [
     {
@@ -76,7 +75,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsNoneNormal',
-        'bg-white text-primary hover:bg-primary hover:text-white border-primary',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white',
       ),
     },
     {
@@ -84,7 +83,7 @@ const button = tv({
       style: 'focus',
       class: themedClass(
         'buttonCompoundVariantsNoneFocus',
-        'bg-primary text-white hover:bg-white hover:text-primary border-primary',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600',
       ),
     },
     {
@@ -92,66 +91,63 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsNoneMinimal',
-        'text-primary hover:text-gray-950',
+        'text-primary-500 hover:text-gray-950',
       ),
     },
-
     {
-      colorScheme: 'light',
+      colorScheme: 'dark',
       style: 'normal',
       class: themedClass(
-        'buttonCompoundVariantsLightNormal',
-        'bg-gray-50 text-primary hover:bg-primary hover:text-gray-50 border-primary',
+        'buttonCompoundVariantsDarkNormal',
+        'bg-transparent text-gray-200 border-gray-200 hover:bg-gray-200 hover:text-gray-950',
       ),
     },
     {
-      colorScheme: 'light',
+      colorScheme: 'dark',
       style: 'focus',
       class: themedClass(
-        'buttonCompoundVariantsLightFocus',
-        'bg-primary text-gray-50 hover:bg-gray-50 hover:text-primary border-primary',
+        'buttonCompoundVariantsDarkFocus',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600',
       ),
     },
     {
-      colorScheme: 'light',
+      colorScheme: 'dark',
       style: 'minimal',
       class: themedClass(
-        'buttonCompoundVariantsLightMinimal',
-        'text-primary hover:text-gray-950',
+        'buttonCompoundVariantsDarkMinimal',
+        'text-gray-200 hover:text-primary-500',
       ),
     },
-
     {
-      colorScheme: 'dark',
+      colorScheme: 'light',
       style: 'normal',
       class: themedClass(
-        'buttonCompoundVariantsDarkNormal',
-        'bg-gray-950 text-gray-200 hover:bg-white hover:text-gray-950 border-gray-200',
+        'buttonCompoundVariantsLightNormal',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white',
       ),
     },
     {
-      colorScheme: 'dark',
+      colorScheme: 'light',
       style: 'focus',
       class: themedClass(
-        'buttonCompoundVariantsDarkFocus',
-        'bg-primary text-gray-950 hover:bg-gray-950 hover:text-primary border-primary',
+        'buttonCompoundVariantsLightFocus',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600',
       ),
     },
     {
-      colorScheme: 'dark',
+      colorScheme: 'light',
       style: 'minimal',
       class: themedClass(
-        'buttonCompoundVariantsDarkMinimal',
-        'text-primary hover:text-gray-200',
+        'buttonCompoundVariantsLightMinimal',
+        'text-primary-500 hover:text-gray-950',
       ),
     },
-
     {
       colorScheme: 'accent',
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsAccentNormal',
-        'bg-primary-600 text-white hover:bg-white hover:text-gray-950 border-white',
+        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950',
       ),
     },
     {
@@ -159,7 +155,7 @@ const button = tv({
       style: 'focus',
       class: themedClass(
         'buttonCompoundVariantsAccentFocus',
-        'bg-gray-950 text-white hover:bg-white hover:text-gray-950 border-gray-950 hover:border-white',
+        'bg-gray-950 text-white border-gray-950 hover:bg-white hover:text-gray-950 hover:border-white',
       ),
     },
     {
@@ -167,28 +163,9 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsAccentMinimal',
-        'hover:text-gray-950',
+        'text-white hover:text-gray-950',
       ),
     },
   ],
-  defaultVariants: {
-    colorScheme: 'none',
-    style: 'normal',
-    textAlignment: 'center',
-  },
-})
-
-const prefetch = inject('prefetch', false)
-
-const linkComplete = computed(() => {
-  let link = ''
-
-  if (props?.link) {
-    link += props?.link
-  }
-  if (props?.params) {
-    link += props?.params
-  }
-  return link
 })
 </script>

package/components/DesignSystem/Atoms/LinkListItem.vue

@@ -4,7 +4,7 @@
     :class="
       themedClass(
         'linkClass',
-        'border-b-1 first:border-t-1 group block border-gray-100 py-4',
+        'group border-b-border-gray-100 block py-4 first:border-t',
       )
     "
     :to="link"
@@ -16,7 +16,7 @@
       :class="
         themedClass(
           'titleClass',
-          'group-hover:text-primary block transition-colors duration-200',
+          'group-hover:text-primary-500 block transition-colors duration-200',
         )
       "
       v-text="title"

package/components/DesignSystem/Molecules/ButtonGroup.vue

@@ -11,16 +11,13 @@
     <DesignSystemAtomsButton
       v-for="link in links"
       :label="link?.props.label"
-      :subline="link?.props.subline"
       :link="link?.props.link?.uri.path"
       :params="link?.props.params"
-      :style="link?.props.buttonStyle"
       :target-blank="link?.props.targetBlank"
       :title="link?.props.title"
       :colorScheme="colorScheme"
       :buttonClass="themedClass('buttonClass')"
       :labelClass="themedClass('labelClass')"
-      :sublineClass="themedClass('sublineClass')"
     />
   </div>
 </template>
@@ -35,14 +32,12 @@ const themedClass = useTheme('DesignSystemMoleculesButtonGroup')
 type Link = {
   props: {
     label?: string
-    subline?: string
     link?: {
       uri: {
         path: string
       }
     }
     params?: string
-    buttonStyle?: string
     targetBlank?: boolean
     title?: string
   }
@@ -55,6 +50,5 @@ defineProps<{
   containerClass?: string
   buttonClass?: string
   labelClass?: string
-  sublineClass?: string
 }>()
 </script>