@redseed/redseed-ui-vue3 2.21.0 → 2.22.0

package/package.json

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

package/src/components/Card/RadioCard.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
+
+const props = defineProps({
+    showButton: {
+        type: Boolean,
+        default: false,
+    },
+    deselectable: {
+        type: Boolean,
+        default: false,
+    },
+    selected: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const isSelected = ref(props.selected)
+
+watch(() => props.selected, () => {
+    isSelected.value = props.selected
+})
+
+const componentClass = computed(() => [
+    'rsui-radio-card',
+    'group/radio-card',
+    {
+        'rsui-radio-card--selected': isSelected.value,
+        'rsui-radio-card--disabled': props.disabled,
+    },
+])
+
+const titleRowClass = computed(() => [
+    'rsui-radio-card__title-row',
+    {
+        'rsui-radio-card__title-row--selected': isSelected.value && !props.disabled,
+        'rsui-radio-card__title-row--disabled': props.disabled && !isSelected.value,
+        'rsui-radio-card__title-row--selected-disabled': isSelected.value && props.disabled,
+    },
+])
+
+const emit = defineEmits(['select', 'deselect', 'click'])
+
+function handleSelect() {
+    if (props.disabled) return
+    if (!props.deselectable && isSelected.value) return
+
+    isSelected.value = !isSelected.value
+
+    if (props.deselectable && !isSelected.value) {
+        emit('deselect', isSelected.value)
+        return
+    }
+
+    emit('select', isSelected.value)
+    return
+}
+
+function handleClick(event) {
+    if (props.disabled) return
+
+    event.stopPropagation()
+
+    console.log('click')
+
+    emit('click', event)
+}
+</script>
+<template>
+<div :class="componentClass"
+    @click="handleSelect"
+    role="radio"
+    tabindex="0"
+>
+    <div :class="titleRowClass">
+        <div class="rsui-radio-card__title">
+            <slot name="title"></slot>
+        </div>
+    </div>
+
+    <div class="rsui-radio-card__content-row" v-if="$slots.default">
+        <slot></slot>
+    </div>
+
+    <div class="rsui-radio-card__meta-row" v-if="$slots.meta">
+        <slot name="meta"></slot>
+    </div>
+
+    <div class="rsui-radio-card__action-row" v-if="showButton">
+        <ButtonTertiary xs @click="handleClick">
+            <slot name="button-label">Button</slot>
+        </ButtonTertiary>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-radio-card {
+    @apply max-w-80 w-80 bg-white border border-rsui-grey-200 rounded-md shadow-sm outline-none select-none;
+    @apply relative cursor-pointer transition-all;
+    @apply flex flex-col gap-3 p-4;
+    @apply focus-visible:ring-4 focus-visible:ring-rsui-light;
+
+    &--selected {
+        @apply bg-primary/10 border-primary;
+        @apply focus-visible:ring-4 focus-visible:ring-primary/10;
+    }
+
+    &--disabled {
+        @apply bg-white border-rsui-grey-200 focus-visible:ring-0 cursor-default;
+        @apply after:absolute after:content-[''] after:inset-0 after:bg-rsui-grey-200/65;
+        @apply after:rounded-md;
+    }
+
+    &__title-row {
+        @apply relative text-base font-medium text-rsui-default line-clamp-2 min-h-6;
+
+        // Radio button position
+        @apply after:absolute after:top-0 after:right-0;
+        // Radio button shape
+        @apply after:content-[''] after:size-6 after:rounded-full;
+        // Radio button animation
+        @apply after:transition-all;
+        // Radio button decoration
+        @apply after:border after:border-rsui-light after:bg-white;
+        // Radio button event
+        @apply group-hover/radio-card:after:border-rsui-medium;
+        @apply group-focus-visible/radio-card:after:border-rsui-medium;
+
+        &--selected {
+            @apply after:border-6 after:border-primary;
+            @apply group-hover/radio-card:after:border-primary;
+            @apply group-focus-visible/radio-card:after:border-primary;
+        }
+
+        &--disabled {
+            @apply after:opacity-0;
+        }
+
+        &--selected-disabled {
+            @apply after:border-6 after:border-white after:bg-rsui-light;
+            @apply group-hover/radio-card:after:border-white;
+            @apply group-focus-visible/radio-card:after:border-white;
+        }
+    }
+
+    &__content-row {
+        @apply text-sm font-normal text-rsui-medium;
+    }
+
+    &__meta-row {
+        @apply grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2;
+    }
+
+    &__action-row {
+        @apply flex flex-wrap gap-2;
+    }
+}
+</style>

package/src/components/Card/index.js

@@ -1,7 +1,9 @@
 import Card from './Card.vue'
 import CardResource from './CardResource.vue'
+import RadioCard from './RadioCard.vue'
 
 export {
     Card,
     CardResource,
-}
+    RadioCard,
+}

package/src/components/Progress/ProgressTracker.vue

@@ -67,7 +67,7 @@ function handleStepClick(clickedStep) {
 </template>
 <style lang="scss" scoped>
 .rsui-progress-tracker {
-    @apply grid grid-flow-col auto-cols-fr gap-16;
-    @apply text-xl font-medium;
+    @apply grid grid-flow-col auto-cols-fr gap-8 sm:gap-16;
+    @apply text-xs sm:text-xl font-medium;
 }
 </style>

package/src/components/Progress/ProgressTrackerStep.vue

@@ -74,12 +74,12 @@ function handleClick() {
 </template>
 <style lang="scss" scoped>
 .rsui-progress-tracker-step {
-    @apply relative flex flex-col items-center text-center gap-4;
+    @apply relative flex flex-col items-center text-center gap-3 sm:gap-4;
 
     // add a line before each step
     @apply after:content-[''] after:absolute after:bg-rsui-grey-300;
-    @apply after:top-6 after:-left-8 after:-translate-x-1/2;
-    @apply after:w-[160%] xs:after:w-[140%] lg:after:w-[120%] 3xl:after:w-[104%] after:h-1;
+    @apply after:top-3.5 sm:after:top-6 after:-left-4 sm:after:-left-8 after:-translate-x-1/2;
+    @apply after:w-[100%] xs:after:w-[140%] sm:after:w-[140%] lg:after:w-[120%] 3xl:after:w-[107%] after:h-1;
     // hide the line before the first step
     @apply first:after:hidden;
 
@@ -93,7 +93,7 @@ function handleClick() {
     }
 
     &__indicator {
-        @apply relative z-1 size-13 rounded-full border-2 overflow-hidden select-none;
+        @apply relative z-1 size-8 sm:size-13 rounded-full border-2 overflow-hidden select-none;
         @apply bg-rsui-grey-300 border-rsui-grey-300 text-white;
         @apply flex items-center justify-center;
         &--completed {