@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CSwitch.vue

@@ -0,0 +1,125 @@
+<template>
+  <sl-switch
+    class="c-switch"
+    :class="{
+      'c-switch--label-first': labelFirst,
+      'c-switch--disabled': disabled,
+      'c-switch--checked': internalValue,
+      'c-switch--aria-labelled': ariaLabel,
+    }"
+    :checked="internalValue || undefined"
+    :disabled="disabled || undefined"
+    @sl-change="internalValue = !internalValue"
+  >
+    <slot />
+    <span v-if="ariaLabel" class="c-switch__sr-label">
+      {{ ariaLabel }}
+    </span>
+  </sl-switch>
+</template>
+
+<script lang="ts">
+import '@shoelace-style/shoelace/dist/components/switch/switch.js';
+import { defineComponent, toRefs } from 'vue';
+
+import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
+
+export default defineComponent({
+  props: {
+    /** When true, the slot label is visually rendered before the control (label left, switch right) */
+    labelFirst: { type: Boolean, default: false },
+    /** Whether the switch is in an "on" or "off" state */
+    value: { type: Boolean, default: false },
+    /** Prevents the user from interacting with the switch */
+    disabled: { type: Boolean, default: false },
+    /** Label for screen-readers. This hides and overrides the normal label. */
+    ariaLabel: { type: String, default: '' },
+  },
+  emits: ['input'],
+  setup(props, { emit }) {
+    const { value } = toRefs(props);
+    const internalValue = useInternalValue(value, {
+      onChange: (newValue) => emit('input', newValue),
+    });
+
+    return {
+      internalValue,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
+
+@mixin switch-theme($control-color, $thumb-color, $thumb-indicator-color) {
+  &::part(control) {
+    background-color: $control-color;
+  }
+
+  &::part(thumb) {
+    background-color: $thumb-color;
+  }
+
+  &::part(thumb)::after {
+    background-color: $thumb-indicator-color;
+  }
+}
+
+.c-switch {
+  --width: 44px;
+  --height: 24px;
+  --thumb-size: 20px;
+
+  &::part(control) {
+    border: none;
+  }
+
+  &::part(thumb) {
+    align-items: center;
+    border: none;
+    display: flex;
+    justify-content: center;
+  }
+
+  &::part(thumb)::after {
+    border-radius: 1px;
+    content: '';
+    height: 8px;
+    transition: background-color var(--sl-transition-fast) ease-in-out;
+    width: 2px;
+  }
+
+  @include switch-theme($color-gray-400, $color-white, transparent);
+}
+
+.c-switch--label-first {
+  &::part(base) {
+    flex-direction: row-reverse;
+    gap: 12px;
+    width: 100%;
+  }
+
+  &::part(label) {
+    flex: 1;
+    margin: 0;
+  }
+}
+
+.c-switch--checked {
+  @include switch-theme($color-green-400, $color-white, $color-green-400);
+}
+
+.c-switch--disabled {
+  @include switch-theme($color-gray-300, $color-gray-200, transparent);
+}
+
+.c-switch--disabled.c-switch--checked {
+  @include switch-theme($color-gray-300, $color-gray-200, $color-gray-300);
+}
+
+.c-switch__sr-label {
+  @include sr-only;
+}
+</style>

package/src/components/CSwitchListItem.vue

@@ -0,0 +1,110 @@
+<template>
+  <CListItem>
+    <CSwitch
+      data-test="list-item-switch"
+      class="c-switch-list-item__switch"
+      :value="value"
+      :disabled="disabled"
+      @input="$emit('input', $event)"
+    >
+      <div
+        class="d-flex flex-row gap-3"
+        :class="{
+          'align-start': align === 'top',
+          'align-center': align !== 'top',
+        }"
+      >
+        <slot name="prepend">
+          <CListItemIcon v-if="icon || iconSlotHasContent" :icon="icon" :icon-color="iconColor">
+            <template #icon>
+              <slot name="icon" />
+            </template>
+          </CListItemIcon>
+        </slot>
+
+        <CListItemContent :title="title" :label="label">
+          <template v-for="slotName of ['title', 'label', 'default']" #[slotName]>
+            <slot :name="slotName" />
+          </template>
+        </CListItemContent>
+      </div>
+    </CSwitch>
+  </CListItem>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from 'vue';
+
+import CListItem from '@propelinc/citrus-ui/src/components/CListItem.vue';
+import CListItemContent from '@propelinc/citrus-ui/src/components/CListItemContent.vue';
+import CListItemIcon from '@propelinc/citrus-ui/src/components/CListItemIcon.vue';
+import CSwitch from '@propelinc/citrus-ui/src/components/CSwitch.vue';
+import type { FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
+
+import { useSlotHasContent } from '../composables/slots';
+
+export default defineComponent({
+  name: 'CSwitchListItem',
+  components: {
+    CSwitch,
+    CListItem,
+    CListItemContent,
+    CListItemIcon,
+  },
+  props: {
+    /** Alignment of the content */
+    align: { type: String as PropType<'top' | 'center'>, default: 'center' },
+    /** Prevents the user from interacting with the switch */
+    disabled: { type: Boolean, default: false },
+    /** Font Awesome icon to render on the left side of the component */
+    icon: { type: [String, Array, Object] as FaPropType, default: null },
+    /** Color of the icon background */
+    iconColor: { type: String, default: 'gray-100' },
+    /** Plain body copy. Overridden by the default slot. */
+    label: { type: String, default: undefined },
+    /** Emphasized text above body text. Overridden by the default slot. */
+    title: { type: String, default: undefined },
+    /** Whether the switch is in an "on" or "off" state */
+    value: { type: Boolean, default: false },
+  },
+  emits: ['input'],
+  setup() {
+    const iconSlotHasContent = useSlotHasContent('icon');
+
+    return {
+      iconSlotHasContent,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.c-switch-list-item__switch {
+  width: 100%;
+
+  &::part(base) {
+    align-items: center;
+    display: inline-flex;
+
+    // Using row-reverse allows us to move the slot content to the left
+    // and the switch to the right
+    flex-direction: row-reverse;
+    gap: 12px;
+
+    // The padding from CListItem is sufficient
+    padding: 0;
+    width: 100%;
+  }
+
+  &::part(label) {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    gap: 12px;
+    justify-content: space-between;
+
+    // Removes the margin-inline-start supplied by the Shoelace styles
+    margin: 0;
+  }
+}
+</style>

package/src/components/CTextArea.vue

@@ -1,61 +1,207 @@
 <template>
-  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :hide-label="hideLabel">
-    <template #label>
-      {{ label }}
-      <slot name="label" />
-    </template>
-
-    <v-textarea
-      :id="id"
-      v-bind="$attrs"
-      :data-test="`${dataTest}-input`"
-      class="text-area__input"
-      :class="{ 'text-area__input--disabled': disabled }"
-      :aria-label="hideLabel ? label : undefined"
-      auto-grow
-      solo
-      flat
-      :placeholder="placeholder"
+  <div
+    class="d-flex flex-column gap-1"
+    :class="{
+      'c-text-area--disabled': disabled,
+      'c-text-area--invalid': !isValidationValid,
+      'c-text-area--hide-label': hideLabel,
+    }"
+    :data-test="dataTest"
+  >
+    <label class="c-text-area__label" :for="idWithFallback" :data-test="`${dataTest}-label`">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+
+    <textarea
+      :id="idWithFallback"
+      ref="textarea"
+      class="c-text-area__input"
+      rows="4"
+      :aria-label="label || undefined"
+      :aria-describedby="`${idWithFallback}-message ${idWithFallback}-validation-message`"
+      :aria-invalid="isValidationValid ? 'false' : 'true'"
+      :data-test="`${dataTest}-textarea`"
       :disabled="disabled"
-      :hide-details="hideDetails"
-      :value="value"
-      :rules="rules"
-      validate-on-blur
-      v-on="$listeners"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :required="required"
+      :value="internalValue"
+      @input="onInput"
+      @blur="$emit('blur')"
+      @focus="$emit('focus')"
+      @change="$emit('change', internalValue)"
+      v-on="validationListeners"
     />
-  </form-field>
+
+    <CValidationMessage
+      :data-test="`${dataTest}-validation-message`"
+      :validation-message="validationMessage"
+      :hide="hideDetails"
+    >
+      <template #append>
+        <CFormFieldCounter
+          v-if="counter"
+          :data-test="`${dataTest}-counter`"
+          :counter="counter"
+          :counter-value="counterValue"
+          :value="internalValue"
+        />
+      </template>
+    </CValidationMessage>
+
+    <div
+      v-if="messageSlotHasContent"
+      :id="`${idWithFallback}-message`"
+      class="c-text-area__message"
+      :data-test="`${dataTest}-message`"
+    >
+      <slot name="message" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-import FormField from '@/components/helpers/FormField.vue';
-
-@Component({ name: 'CTextArea', inheritAttrs: false, components: { FormField } })
-export default class CTextArea extends Vue {
-  @Prop(String) label?: string;
-  @Prop(String) placeholder?: string;
-  @Prop({ type: String, required: true }) id!: string;
-  @Prop({ type: Boolean, default: false }) disabled!: boolean;
-  @Prop({ type: String, default: '' }) value!: string;
-  /** Hides the label and instead labels the field with `aria-label` */
-  @Prop({ type: Boolean, default: false }) hideLabel!: boolean;
-  /** Hides the validation message area. Defaults to `false` (show message area even when valid), so validations transition in gracefully. */
-  @Prop({ type: [Boolean, String], default: false }) hideDetails!: boolean | 'auto';
-  @Prop({ type: String, default: 'text-area' }) dataTest!: string;
-  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
-}
+import type { PropType } from 'vue';
+import { defineComponent, ref, toRefs } from 'vue';
+
+import CFormFieldCounter from '@propelinc/citrus-ui/src/components/CFormFieldCounter.vue';
+import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
+import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
+import { useId } from '@propelinc/citrus-ui/src/composables/id';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
+
+export default defineComponent({
+  name: 'CTextArea',
+  components: { CValidationMessage, CFormFieldCounter },
+  props: {
+    /** The textarea's label, both visual and screenreader-only */
+    label: { type: String as PropType<string | null>, default: null },
+    /** The textarea's placeholder */
+    placeholder: { type: String, default: '' },
+    /** The textarea element's id */
+    id: { type: String as PropType<string | null>, default: null },
+    /** Controls whether the input is disabled */
+    disabled: { type: Boolean, default: false },
+    /** The textarea's value */
+    value: { type: String, default: '' },
+    /** Hides the label and instead labels the field with `aria-label` */
+    hideLabel: { type: Boolean, default: false },
+    /** Hides the validation message area. Defaults to `false` (show message area even when valid), so validations transition in gracefully. */
+    hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
+    /** Adds a custom data test string to the form field and textarea elements */
+    dataTest: { type: String, default: 'text-area' },
+    /** Shows a character counter and sets its denominator. */
+    counter: { type: Number as PropType<number | null>, default: null },
+    /** Function or number that determines the numerator of the counter. If not
+     * set, the counter will be the length of the input value. */
+    counterValue: {
+      type: [Number, Function] as PropType<number | (() => number | null)>,
+      default: null,
+    },
+    maxlength: { type: Number, default: undefined },
+    /** Accepts a mixed array of types function, boolean and string.
+     * Functions pass an input value as an argument and must return either true / false or
+     * a string containing an error message. The input field will enter an error state if a
+     *  function returns (or any value in the array contains) false or is a string */
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    /** If true, the field is required */
+    required: { type: Boolean, default: false },
+  },
+  emits: ['input', 'change', 'blur', 'focus'],
+  setup(props, { emit }) {
+    const { value, rules, required, id } = toRefs(props);
+    const idWithFallback = useId(id);
+
+    const internalValue = useInternalValue(value, {
+      onChange: (value) => emit('input', value),
+    });
+
+    const messageSlotHasContent = useSlotHasContent('message');
+
+    const textarea = ref<HTMLTextAreaElement | null>(null);
+
+    const {
+      message: validationMessage,
+      valid: isValidationValid,
+      listeners: validationListeners,
+    } = useValidations({
+      id: idWithFallback,
+      value: internalValue,
+      rules,
+      required,
+      field: textarea,
+    });
+
+    const onInput = (event: Event): void => {
+      const target = event.target as HTMLTextAreaElement;
+      internalValue.value = target.value;
+    };
+
+    return {
+      textarea,
+      idWithFallback,
+      internalValue,
+      validationMessage,
+      isValidationValid,
+      validationListeners,
+      messageSlotHasContent,
+
+      onInput,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
-@import '~@/styles/form-fields.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
+@import '@propelinc/citrus-ui/src/styles/form-fields';
+
+.c-text-area__label {
+  @include body-emphasized;
+
+  display: inline-block;
+  margin-bottom: 4px;
+  transition: color $citrus-field-transition-duration ease;
+
+  .c-text-area--disabled & {
+    color: $color-text-disabled;
+  }
 
-.text-area__input {
-  @include form-field;
+  .c-text-area--hide-label & {
+    @include sr-only;
+  }
 }
 
-.text-area__input--disabled {
-  @include form-field-disabled;
+.c-text-area__input {
+  background-color: $color-white;
+  border: $border-width solid $color-gray-200;
+  border-radius: $border-radius-next;
+  padding: 16px;
+  resize: vertical;
+  transition: border-color $citrus-field-transition-duration ease;
+
+  &:focus,
+  &:focus-within,
+  .c-text-area--invalid & {
+    border-color: $color-black;
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: $color-gray-100;
+    color: $color-text-disabled;
+  }
+}
+
+.c-text-area__message {
+  @include caption;
+
+  color: $color-gray-500;
+  margin-bottom: 16px;
 }
 </style>