@redseed/redseed-ui-vue3 1.2.0 → 1.3.0

package/index.js

@@ -1,12 +1,20 @@
+import ButtonDanger from './src/components/Button/ButtonDanger.vue'
+import ButtonDangerFull from './src/components/Button/ButtonDangerFull.vue'
+import ButtonDangerFullRounded from './src/components/Button/ButtonDangerFullRounded.vue'
+import ButtonDangerRounded from './src/components/Button/ButtonDangerRounded.vue'
 import ButtonPrimary from './src/components/Button/ButtonPrimary.vue'
-import ButtonPrimaryLight from './src/components/Button/ButtonPrimaryLight.vue'
-import ButtonPrimaryLightRounded from './src/components/Button/ButtonPrimaryLightRounded.vue'
+import ButtonPrimaryFull from './src/components/Button/ButtonPrimaryFull.vue'
+import ButtonPrimaryFullRounded from './src/components/Button/ButtonPrimaryFullRounded.vue'
 import ButtonPrimaryRounded from './src/components/Button/ButtonPrimaryRounded.vue'
 import ButtonSecondary from './src/components/Button/ButtonSecondary.vue'
-import ButtonSecondaryLight from './src/components/Button/ButtonSecondaryLight.vue'
-import ButtonSecondaryLightRounded from './src/components/Button/ButtonSecondaryLightRounded.vue'
+import ButtonSecondaryFull from './src/components/Button/ButtonSecondaryFull.vue'
+import ButtonSecondaryFullRounded from './src/components/Button/ButtonSecondaryFullRounded.vue'
 import ButtonSecondaryRounded from './src/components/Button/ButtonSecondaryRounded.vue'
 import ButtonSlot from './src/components/Button/ButtonSlot.vue'
+import ButtonTertiary from './src/components/Button/ButtonTertiary.vue'
+import ButtonTertiaryFull from './src/components/Button/ButtonTertiaryFull.vue'
+import ButtonTertiaryFullRounded from './src/components/Button/ButtonTertiaryFullRounded.vue'
+import ButtonTertiaryRounded from './src/components/Button/ButtonTertiaryRounded.vue'
 import Card from './src/components/Card/Card.vue'
 import FormFieldCheckbox from './src/components/FormField/FormFieldCheckbox.vue'
 import FormFieldEmail from './src/components/FormField/FormFieldEmail.vue'
@@ -35,15 +43,23 @@ import SignUpWithGoogle from './src/components/Social/SignUpWithGoogle.vue'
 import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
 
 export {
+    ButtonDanger,
+    ButtonDangerFull,
+    ButtonDangerFullRounded,
+    ButtonDangerRounded,
     ButtonPrimary,
-    ButtonPrimaryLight,
-    ButtonPrimaryLightRounded,
+    ButtonPrimaryFull,
+    ButtonPrimaryFullRounded,
     ButtonPrimaryRounded,
     ButtonSecondary,
-    ButtonSecondaryLight,
-    ButtonSecondaryLightRounded,
+    ButtonSecondaryFull,
+    ButtonSecondaryFullRounded,
     ButtonSecondaryRounded,
     ButtonSlot,
+    ButtonTertiary,
+    ButtonTertiaryFull,
+    ButtonTertiaryFullRounded,
+    ButtonTertiaryRounded,
     Card,
     FormFieldCheckbox,
     FormFieldEmail,

package/package.json

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

package/src/components/Button/ButtonDanger.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const buttonClass = computed(() => [
+    'button-danger',
+])
+</script>
+<template>
+<ButtonSlot
+    :class="buttonClass"
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.button-danger {
+    // default colors
+    @apply bg-white text-danger ring-danger/20 border-danger;
+    // default hover state
+    @apply hover:bg-white hover:text-danger-dark hover:border-danger-dark;
+    // default focus state
+    @apply focus-visible:border-transparent focus-visible:text-danger;
+    // default active state
+    @apply active:ring-0 active:text-danger active:border-danger;
+    // default disabled state
+    @apply disabled:text-danger/30 disabled:border-danger/30 disabled:bg-white;
+    @apply disabled:active:ring-0 disabled:focus:ring-0;
+}
+</style>

package/src/components/Button/ButtonDangerFull.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonDanger from './ButtonDanger.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonDanger
+    full
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonDanger>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonDangerFullRounded.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonDanger from './ButtonDanger.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonDanger
+    full
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonDanger>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonDangerRounded.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonDanger from './ButtonDanger.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonDanger
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonDanger>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonPrimary.vue

@@ -6,23 +6,13 @@ defineOptions({
     inheritAttrs: false,
 })
 
-const props = defineProps({
-    light: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const buttonPrimaryClass = computed(() => [
+const buttonClass = computed(() => [
     'button-primary',
-    {
-        'button-primary--light': props.light,
-    },
 ])
 </script>
 <template>
 <ButtonSlot
-    :class="buttonPrimaryClass"
+    :class="buttonClass"
     v-bind="$attrs"
 >
     <template #icon v-if="$slots.icon">
@@ -44,14 +34,5 @@ const buttonPrimaryClass = computed(() => [
     // default disabled state
     @apply disabled:bg-primary/20 disabled:border-transparent;
     @apply disabled:active:ring-0 disabled:focus:ring-0;
-
-    &--light {
-        @apply bg-white text-primary;
-        @apply hover:bg-white hover:text-primary-dark;
-        @apply focus-visible:border-transparent;
-        @apply active:ring-0 active:text-primary;
-        @apply disabled:text-primary/30 disabled:border-primary/30 disabled:bg-white;
-        @apply disabled:active:ring-0 disabled:focus:ring-0;
-    }
 }
 </style>

package/src/components/Button/{ButtonPrimaryLight.vue → ButtonPrimaryFull.vue}

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonPrimary
-    light
+    full
     v-bind="$attrs"
 >
     <template #icon v-if="$slots.icon">

package/src/components/Button/{ButtonPrimaryLightRounded.vue → ButtonPrimaryFullRounded.vue}

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonPrimary
-    light
+    full
     rounded
     v-bind="$attrs"
 >

package/src/components/Button/ButtonSecondary.vue

@@ -6,23 +6,13 @@ defineOptions({
     inheritAttrs: false,
 })
 
-const props = defineProps({
-    light: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const buttonSecondaryClass = computed(() => [
+const buttonClass = computed(() => [
     'button-secondary',
-    {
-        'button-secondary--light': props.light,
-    },
 ])
 </script>
 <template>
 <ButtonSlot
-    :class="buttonSecondaryClass"
+    :class="buttonClass"
     v-bind="$attrs"
 >
     <template #icon v-if="$slots.icon">
@@ -44,14 +34,5 @@ const buttonSecondaryClass = computed(() => [
     // default disabled state
     @apply disabled:bg-secondary/20 disabled:border-transparent;
     @apply disabled:active:ring-0 disabled:focus:ring-0;
-
-    &--light {
-        @apply bg-white text-secondary;
-        @apply hover:bg-white hover:text-secondary-dark;
-        @apply focus-visible:border-transparent;
-        @apply active:ring-0 active:text-secondary;
-        @apply disabled:text-secondary/30 disabled:border-secondary/30 disabled:bg-white;
-        @apply disabled:active:ring-0 disabled:focus:ring-0;
-    }
 }
 </style>

package/src/components/Button/{ButtonSecondaryLight.vue → ButtonSecondaryFull.vue}

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonSecondary
-    light
+    full
     v-bind="$attrs"
 >
     <template #icon v-if="$slots.icon">

package/src/components/Button/{ButtonSecondaryLightRounded.vue → ButtonSecondaryFullRounded.vue}

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 <template>
 <ButtonSecondary
-    light
+    full
     rounded
     v-bind="$attrs"
 >

package/src/components/Button/ButtonTertiary.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const buttonClass = computed(() => [
+    'button-tertiary',
+])
+</script>
+<template>
+<ButtonSlot
+    :class="buttonClass"
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.button-tertiary {
+    // default colors
+    @apply bg-white text-tertiary-dark ring-tertiary-dark/20 border-tertiary-dark;
+    // default hover state
+    @apply hover:bg-white hover:text-tertiary hover:border-tertiary;
+    // default focus state
+    @apply focus-visible:border-transparent focus-visible:text-tertiary;
+    // default active state
+    @apply active:ring-0 active:text-tertiary-dark active:border-tertiary-dark;
+    // default disabled state
+    @apply disabled:text-tertiary-dark/30 disabled:border-tertiary-dark/30 disabled:bg-white;
+    @apply disabled:active:ring-0 disabled:focus:ring-0;
+}
+</style>

package/src/components/Button/ButtonTertiaryFull.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonTertiary
+    full
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonTertiary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonTertiaryFullRounded.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonTertiary
+    full
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonTertiary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonTertiaryRounded.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonTertiary from './ButtonTertiary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonTertiary
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+
+    <template #default v-if="$slots.default">
+        <slot></slot>
+    </template>
+</ButtonTertiary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Form/FormFieldsLogin.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import ButtonPrimary from '../Button/ButtonPrimary.vue'
+import ButtonPrimaryFull from '../Button/ButtonPrimaryFull.vue'
 import FormFieldEmail from '../FormField/FormFieldEmail.vue'
 import FormFieldPassword from '../FormField/FormFieldPassword.vue'
 import FormFieldSlot from '../FormField/FormFieldSlot.vue'
@@ -67,11 +67,11 @@ const formRef = ref(props.form)
 <slot name="submit"
     :formRef="formRef"
 >
-    <ButtonPrimary full lg submit :disabled="form.processing">
+    <ButtonPrimaryFull lg submit :disabled="form.processing">
         <slot name="submit-label">
             Log in
         </slot>
-    </ButtonPrimary>
+    </ButtonPrimaryFull>
 </slot>
 
 <div v-if="$slots.signup" class="form-login__signup">

package/src/components/Form/FormFieldsRegister.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import ButtonPrimary from '../Button/ButtonPrimary.vue'
+import ButtonPrimaryFull from '../Button/ButtonPrimaryFull.vue'
 import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
 import FormFieldEmail from '../FormField/FormFieldEmail.vue'
 import FormFieldPasswordToggle from '../FormField/FormFieldPasswordToggle.vue'
@@ -99,11 +99,11 @@ const formRef = ref(props.form)
 <slot name="submit"
     :formRef="formRef"
 >
-    <ButtonPrimary full lg submit :disabled="form.processing">
+    <ButtonPrimaryFull lg submit :disabled="form.processing">
         <slot name="submit-label">
             Register
         </slot>
-    </ButtonPrimary>
+    </ButtonPrimaryFull>
 </slot>
 
 <div v-if="$slots.signin" class="form-register__signin">

package/src/components/PageHeading/PageHeading.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import Modal from '../Modal/Modal.vue'
-import ButtonSecondaryLight from '../Button/ButtonSecondaryLight.vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
 
 const showMetaModal = ref(false)
 </script>
@@ -29,9 +29,9 @@ const showMetaModal = ref(false)
                 <div v-if="$slots['meta-action-label'] && $slots['meta']"
                     class="page-heading__meta-action"
                 >
-                    <ButtonSecondaryLight @click="showMetaModal = true">
+                    <ButtonTertiary @click="showMetaModal = true">
                         <slot name="meta-action-label"></slot>
-                    </ButtonSecondaryLight>
+                    </ButtonTertiary>
 
                     <Modal v-if="$slots['meta']"
                         class="page-heading__meta-modal"
@@ -55,9 +55,9 @@ const showMetaModal = ref(false)
                                 <slot name="meta-modal-footer"></slot>
                             </div>
 
-                            <ButtonSecondaryLight @click="showMetaModal = false">
+                            <ButtonTertiary @click="showMetaModal = false">
                                 <slot name="meta-modal-close-label"></slot>
-                            </ButtonSecondaryLight>
+                            </ButtonTertiary>
                         </template>
                     </Modal>
                 </div>