@redseed/redseed-ui-vue3 1.6.0 → 1.7.0

package/index.js

@@ -39,7 +39,7 @@ import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
 import LogoRedSeedCourses from './src/components/Logo/LogoRedSeedCourses.vue'
 import LogoRedSeedLMS from './src/components/Logo/LogoRedSeedLMS.vue'
 import MessageBox from './src/components/MessageBox/MessageBox.vue'
-import MetaItem from './src/components/PageHeading/MetaItem.vue'
+import MetaInfo from './src/components/MetaInfo/MetaInfo.vue'
 import Modal from './src/components/Modal/Modal.vue'
 import PageHeading from './src/components/PageHeading/PageHeading.vue'
 import ProgressCircle from './src/components/Progress/ProgressCircle.vue'
@@ -51,9 +51,9 @@ export {
     ButtonDanger,
     ButtonDangerFull,
     ButtonDangerFullRounded,
-    ButtonDangerRounded, 
+    ButtonDangerRounded,
     ButtonGroup,
-    ButtonSlot,
+    ButtonGroupItem,
     ButtonPrimary,
     ButtonPrimaryFull,
     ButtonPrimaryFullRounded,
@@ -62,7 +62,7 @@ export {
     ButtonSecondaryFull,
     ButtonSecondaryFullRounded,
     ButtonSecondaryRounded,
-    ButtonGroupItem,
+    ButtonSlot,
     ButtonTertiary,
     ButtonTertiaryFull,
     ButtonTertiaryFullRounded,
@@ -89,7 +89,7 @@ export {
     LogoRedSeedCourses,
     LogoRedSeedLMS,
     MessageBox,
-    MetaItem,
+    MetaInfo,
     Modal,
     PageHeading,
     ProgressCircle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Button/ButtonTertiary.vue

@@ -26,7 +26,7 @@ const buttonClass = computed(() => [
 <style lang="scss" scoped>
 .rsui-button-tertiary {
     // default colors
-    @apply bg-white text-default-black ring-tertiary-dark/20 border-tertiary-dark;
+    @apply bg-white text-default-dark ring-tertiary-dark/20 border-tertiary-dark;
     // default hover state
     @apply hover:bg-white hover:text-tertiary-dark hover:border-tertiary-dark;
     // default focus state

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -39,13 +39,13 @@ const buttonClass = computed(() => [
     // default shape and control
     @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition first:rounded-l first:border-l last:rounded-r last:border-r;
     // default colors
-    @apply bg-white border-r text-default-black ring-tertiary border-y border-tertiary ;
+    @apply bg-white border-r text-default-dark ring-tertiary border-y border-tertiary ;
     // default hover state
-    @apply hover:border-tertiary hover:bg-tertiary/10 hover:text-default-black;
+    @apply hover:border-tertiary hover:bg-tertiary/10 hover:text-default-dark;
     // default focus state unapplied
     // @apply focus-visible:border-tertiary focus-visible:text-tertiary focus-visible:ring-4 focus-visible:outline-none focus-visible:ring-gray-100 focus-visible:z-10 relative;
     // default active/pressed state
-    @apply active:ring-0  active:bg-tertiary-dark/10 active:text-default-black;
+    @apply active:ring-0  active:bg-tertiary-dark/10 active:text-default-dark;
     // default disabled state
     @apply disabled:text-tertiary-dark/10;
     :deep(svg) {

package/src/components/DropdownMenu/DropdownOption.vue

@@ -10,7 +10,7 @@ const emit = defineEmits(['click'])
 </template>
 <style lang="scss" scoped>
 .rsui-dropdown-option {
-    @apply cursor-pointer p-4 bg-white rounded-md text-base text-default-black transition;
+    @apply cursor-pointer p-4 bg-white rounded-md text-base text-default-dark transition;
     @apply hover:bg-gray-200;
 }
 </style>

package/src/components/MetaInfo/MetaInfo.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    help: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['click'])
+</script>
+<template>
+<div class="rsui-meta-info">
+    <div class="rsui-meta-info__top">
+        <div class="rsui-meta-info__label">
+            <slot name="label"></slot>
+        </div>
+        <div v-if="help"
+            class="rsui-meta-info__help"
+            @click="$emit('click')"
+        >
+            <slot name="help">
+                <QuestionMarkCircleIcon></QuestionMarkCircleIcon>
+            </slot>
+        </div>
+    </div>
+    <div class="rsui-meta-info__value">
+        <slot name="value"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-meta-info {
+    @apply flex flex-col space-y-1;
+    &__top {
+        @apply flex space-x-1 items-center;
+    }
+    &__label {
+        @apply font-semibold text-sm text-default-dark leading-4;
+    }
+    &__help {
+        @apply text-gray-400 size-4;
+        svg {
+            @apply size-full;
+        }
+    }
+    &__value {
+        @apply text-xs text-medium leading-5;
+    }
+}
+</style>

package/src/components/PageHeading/MetaItem.vue

@@ -1,22 +0,0 @@
-<script setup>
-</script>
-<template>
-<div class="rsui-meta-item">
-    <div class="rsui-meta-item__label">
-        <slot name="label"></slot>
-    </div>
-    <div class="rsui-meta-item__value">
-        <slot name="value"></slot>
-    </div>
-</div>
-</template>
-<style lang="scss" scoped>
-.rsui-meta-item {
-    &__label {
-        @apply text-xs text-gray-400;
-    }
-    &__value {
-        @apply text-base;
-    }
-}
-</style>