chore: Remove older UI (#11720)

app/javascript/v3/components/Button/SubmitButton.vue

@@ -1,65 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Spinner,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: '',
-    },
-    buttonClass: {
-      type: String,
-      default: '',
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'submit',
-    },
-  },
-  computed: {
-    computedClass() {
-      return `
-        ${this.disabled ? 'opacity-40 hover:bg-woot-500' : ''}
-        ${this.buttonClass || ' '}
-      `;
-    },
-  },
-  created() {
-    if (import.meta.env.DEV) {
-      // eslint-disable-next-line
-      console.warn(
-        '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
-      );
-    }
-  },
-};
-</script>
-
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-  >
-    <span>{{ buttonText }}</span>
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <Spinner v-if="loading" />
-  </button>
-</template>

app/javascript/v3/components/Form/Button.vue

@@ -1,101 +0,0 @@
-<script setup>
-import { computed, useAttrs } from 'vue';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'solid',
-    validator: value => ['outline', 'ghost', 'solid'].includes(value),
-  },
-  size: {
-    type: String,
-    default: 'large',
-    validator: value => ['medium', 'large'].includes(value),
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  colorScheme: {
-    type: String,
-    default: 'primary',
-    validator: value => ['primary', 'secondary', 'danger'].includes(value),
-  },
-  trailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const attrs = useAttrs();
-
-const baseClasses = {
-  outline: 'outline outline-1 -outline-offset-1',
-  ghost: 'hover:text-600 active:text-600 focus:outline focus:outline-offset-1',
-  solid:
-    'hover:bg-700 active:bg-700 focus:outline focus:outline-offset-1 focus:outline-2',
-};
-
-const colorClass = computed(() => {
-  if (attrs.disabled) {
-    return 'bg-ash-200 text-ash-600 cursor-not-allowed';
-  }
-
-  const styleMap = {
-    primary: {
-      outline: `${baseClasses.outline} outline-primary-400 hover:text-primary-600 active:text-primary-600`,
-      ghost: `${baseClasses.ghost} focus:outline-primary-400`,
-      solid: `${baseClasses.solid} bg-primary-600 text-white focus:outline-primary-400`,
-    },
-    secondary: {
-      outline: `${baseClasses.outline} outline-ash-400 hover:text-ash-900 active:text-ash-900 `,
-      ghost: `${baseClasses.ghost} focus:outline-ash-400`,
-      solid: `${baseClasses.solid} bg-ash-100 text-ash-900 focus:outline-ash-400`,
-    },
-    danger: {
-      outline: `${baseClasses.outline} outline-ruby-400 hover:text-ruby-600 active:text-ruby-600`,
-      ghost: `${baseClasses.ghost} focus:outline-ruby-400`,
-      solid: `${baseClasses.solid} bg-ruby-600 text-white focus:outline-ruby-400`,
-    },
-  };
-
-  const schemeStyles = styleMap[props.colorScheme];
-  return schemeStyles[props.variant] || schemeStyles.solid;
-});
-
-const sizeClass = computed(() => {
-  if (props.size === 'medium') {
-    return 'h-8 px-3 py-1.5 text-sm';
-  }
-  return 'h-10 px-4 py-2.5 text';
-});
-
-const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
-</script>
-
-<template>
-  <button
-    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
-    :class="buttonClasses"
-    v-bind="$attrs"
-  >
-    <fluent-icon
-      v-if="icon && !trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-    <span
-      v-if="$slots.default"
-      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
-    >
-      <slot />
-    </span>
-    <fluent-icon
-      v-if="icon && trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-  </button>
-</template>

app/javascript/v3/components/Form/CheckBox.vue

@@ -26,6 +26,6 @@ const checked = computed({
     v-model="checked"
     type="checkbox"
     :value="value"
-    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+    class="flex-shrink-0 mt-0.5 border-n-strong border bg-n-slate-2 checked:border-none checked:bg-n-brand shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
   />
 </template>

app/javascript/v3/components/Form/InitialsAvatar.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { userInitial } from 'v3/helpers/CommonHelper';
-const props = defineProps({
-  name: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 72,
-  },
-});
-const colors = {
-  1: 'bg-ash-200 text-ash-900',
-  2: 'bg-amber-200 text-amber-900',
-  3: 'bg-pink-100 text-pink-800',
-  4: 'bg-purple-100 text-purple-800',
-  5: 'bg-indigo-100 text-indigo-800',
-  6: 'bg-grass-100 text-grass-800',
-  7: 'bg-mint-100 text-mint-800',
-  8: 'bg-orange-100 text-orange-800',
-};
-const style = computed(() => ({
-  fontSize: `${Math.floor(props.size / 2.5)}px`,
-}));
-const colorClass = computed(() => {
-  return colors[(props.name.length % 8) + 1];
-});
-
-const initial = computed(() => userInitial(props.name));
-</script>
-
-<template>
-  <div
-    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
-    :style="style"
-    aria-hidden="true"
-  >
-    <slot>{{ initial }}</slot>
-  </div>
-</template>

app/javascript/v3/components/Form/Switch.vue

@@ -17,9 +17,7 @@ export default {
     type="button"
     class="relative flex-shrink-0 h-4 p-0 border-none shadow-inner w-7 rounded-3xl"
     :class="
-      modelValue
-        ? 'bg-primary-600 shadow-primary-800'
-        : 'shadow-ash-400 bg-ash-200'
+      modelValue ? 'bg-n-brand shadow-n-brand' : 'shadow-n-slate-6 bg-n-slate-5'
     "
     role="switch"
     :aria-checked="modelValue.toString()"
@@ -27,7 +25,7 @@ export default {
   >
     <span
       aria-hidden="true"
-      class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
+      class="rounded-full bg-n-background top-0.5 absolute w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
       :class="
         modelValue
           ? 'ltr:translate-x-0 rtl:translate-x-[0.75rem]'

app/javascript/v3/components/Form/Textarea.vue

@@ -1,85 +0,0 @@
-<script>
-import WithLabel from './WithLabel.vue';
-export default {
-  components: {
-    WithLabel,
-  },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    rows: {
-      type: Number,
-      default: 3,
-    },
-    allowResize: {
-      type: Boolean,
-      default: true,
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    dataTestid: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue', 'blur'],
-  methods: {
-    onInput(e) {
-      this.$emit('update:modelValue', e.target.value);
-    },
-  },
-};
-</script>
-
-<template>
-  <WithLabel
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <textarea
-      :id="name"
-      :name="name"
-      autocomplete="off"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="modelValue"
-      :rows="rows"
-      :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
-          !hasError,
-        'resize-none': !allowResize,
-      }"
-      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @update:model-value="onInput"
-      @blur="$emit('blur')"
-    />
-  </WithLabel>
-</template>

app/javascript/v3/components/SnackBar/Item.vue

@@ -17,7 +17,7 @@ export default {
 
 <template>
   <div
-    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    class="bg-n-slate-12 dark:bg-n-slate-7 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
     :class="isActionPresent ? 'justify-between' : 'justify-center'"
   >
     <div class="text-sm font-medium text-white">