@redseed/redseed-ui-vue3 8.9.4 → 8.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.9.4",
+    "version": "8.10.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/HTML/BodyText.vue

@@ -6,6 +6,62 @@ const props = defineProps({
         type: Number,
         default: null,
     },
+    xs: {
+        type: Boolean,
+        default: false,
+    },
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    primary: {
+        type: Boolean,
+        default: false,
+    },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
+    tertiary: {
+        type: Boolean,
+        default: false,
+    },
+    quaternary: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    brand: {
+        type: Boolean,
+        default: false,
+    },
+    success: {
+        type: Boolean,
+        default: false,
+    },
+    warning: {
+        type: Boolean,
+        default: false,
+    },
+    error: {
+        type: Boolean,
+        default: false,
+    },
+    info: {
+        type: Boolean,
+        default: false,
+    },
+    ai: {
+        type: Boolean,
+        default: false,
+    },
+    onColor: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const clampClasses = {
@@ -17,10 +73,36 @@ const clampClasses = {
     6: 'rsui-body-text--line-clamp-6',
 }
 
+const colorClasses = {
+    secondary: 'rsui-body-text--secondary',
+    tertiary: 'rsui-body-text--tertiary',
+    quaternary: 'rsui-body-text--quaternary',
+    disabled: 'rsui-body-text--disabled',
+    brand: 'rsui-body-text--brand',
+    success: 'rsui-body-text--success',
+    warning: 'rsui-body-text--warning',
+    error: 'rsui-body-text--error',
+    info: 'rsui-body-text--info',
+    ai: 'rsui-body-text--ai',
+    onColor: 'rsui-body-text--on-color',
+}
+
 const clampClass = computed(() => clampClasses[props.lines] || null)
+
+const sizeClass = computed(() => {
+    if (props.xs) return 'rsui-body-text--xs'
+    if (props.sm) return 'rsui-body-text--sm'
+    return null
+})
+
+const colorClass = computed(() =>
+    Object.keys(colorClasses).find((key) => props[key])
+        ? colorClasses[Object.keys(colorClasses).find((key) => props[key])]
+        : null
+)
 </script>
 <template>
-    <div :class="['rsui-body-text', clampClass]">
+    <div :class="['rsui-body-text', sizeClass, colorClass, clampClass]">
         <slot></slot>
     </div>
 </template>

package/src/components/Section/Section.vue

@@ -7,6 +7,14 @@ const props = defineProps({
         default: 'primary',
         validator: (value) => ['primary', 'secondary', 'brand', 'success', 'info', 'warning', 'error', 'ai'].includes(value)
     },
+    bordered: {
+        type: Boolean,
+        default: true,
+    },
+    padded: {
+        type: Boolean,
+        default: true,
+    },
     showGap: {
         type: Boolean,
         default: true,
@@ -30,6 +38,8 @@ watch(() => props.showGap, () => {
 const variantClass = computed(() => [
     'rsui-section',
     {
+        'rsui-section--bordered': props.bordered,
+        'rsui-section--padded': props.padded,
         'rsui-section--show-gap': showGapDelayed.value,
         'rsui-section--primary': props.variant === 'primary',
         'rsui-section--secondary': props.variant === 'secondary',