SELF-302: IconButton Variant

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## v2.0.73
+
+- Add `Skeleton` component
+
+- Add `IconButton` text variant
+- Add placeholder props for `KeyValueInput` fields
+
 ## v2.0.72
 
 - Add `Panel` component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.72",
+  "version": "2.0.73",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/IconButton/IconButton.vue

@@ -346,6 +346,116 @@ const iconSize = computed(() => {
         }
       }
     }
+
+    &text {
+      @apply rounded-full;
+      @apply transition-colors;
+
+      &.color- {
+        &error {
+          @apply text-error-dark;
+
+          &:hover {
+            @apply bg-error-light;
+          }
+
+          &:active,
+          &:focus {
+            @apply bg-red-100;
+          }
+
+          &:disabled {
+            @apply bg-error-light;
+            @apply text-red-300;
+          }
+        }
+        &info {
+          @apply text-info-dark;
+
+          &:hover {
+            @apply bg-info-light;
+          }
+
+          &:active,
+          &:focus {
+            @apply bg-blue-100;
+          }
+
+          &:disabled {
+            @apply bg-info-light;
+            @apply text-blue-300;
+          }
+        }
+        &neutral {
+          @apply text-gray-800;
+
+          &:hover {
+            @apply bg-gray-50;
+          }
+
+          &:active,
+          &:focus {
+            @apply bg-gray-100;
+          }
+
+          &:disabled {
+            @apply bg-gray-25;
+            @apply text-gray-400;
+          }
+        }
+        &success {
+          @apply text-success-dark;
+
+          &:hover {
+            @apply bg-success-light;
+          }
+
+          &:active,
+          &:focus {
+            @apply bg-green-100;
+          }
+
+          &:disabled {
+            @apply bg-success-light;
+            @apply text-green-400;
+          }
+        }
+        &upgrade {
+          @apply text-upgrade-dark;
+
+          &:hover {
+            @apply bg-upgrade-light;
+          }
+
+          &:active,
+          &:focus {
+            @apply bg-purple-100;
+          }
+
+          &:disabled {
+            @apply bg-upgrade-light;
+            @apply text-purple-300;
+          }
+        }
+        &warning {
+          @apply text-warning-dark;
+
+          &:hover {
+            @apply bg-warning-light;
+          }
+
+          &:active,
+          &:focus {
+            @apply bg-orange-100;
+          }
+
+          &:disabled {
+            @apply bg-warning-light;
+            @apply text-orange-300;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/components/IconButton/constants.ts

@@ -23,7 +23,8 @@ export type IconButtonSize =
 
 export const IconButtonVariant = {
   OUTLINED: Variant.OUTLINED,
-  PRIMARY: Variant.PRIMARY
+  PRIMARY: Variant.PRIMARY,
+  TEXT: Variant.TEXT
 } as const;
 export type IconButtonVariant =
   (typeof IconButtonVariant)[keyof typeof IconButtonVariant];

src/components/KeyValueInput/KeyValueInput.vue

@@ -6,7 +6,7 @@
         <li
           v-for="([key, value], index) in modelValue"
           :key="`key-value-${index}`"
-          class="grid gap-6 items-start"
+          class="grid gap-4 items-start"
           style="grid-template-columns: 1fr 1fr min-content"
         >
           <TextInput
@@ -17,6 +17,7 @@
             :helper-text="keyErrors?.[index]"
             :label="keyLabel"
             :model-value="key"
+            :placeholder="keyPlaceholder"
             sr-only-label
             @update:modelValue="handleKeyChange(index, $event)"
             @blur="$emit('keyBlur', index)"
@@ -31,6 +32,7 @@
             :helper-text="valueErrors?.[index]"
             :label="valueLabel"
             :model-value="value"
+            :placeholder="valuePlaceholder"
             sr-only-label
             @update:modelValue="handleValueChange(index, $event)"
             @blur="$emit('valueBlur', index)"
@@ -41,9 +43,10 @@
             :data-testid="`uic-key-value-input-delete-${index}`"
             :disabled
             icon="Delete"
+            size="lg"
             type="button"
-            color="error"
-            variant="outlined"
+            color="neutral"
+            variant="text"
             @click="handleDelete(index)"
           />
         </li>
@@ -77,6 +80,7 @@ const props = withDefaults(
     /** Errors correspond with the field's index. */
     keyErrors?: Record<number, string>;
     keyLabel?: string;
+    keyPlaceholder?: string;
     label: string;
     /**
      * The `modelValue` is typed this way to allow invalid duplicated keys to be
@@ -87,14 +91,17 @@ const props = withDefaults(
     /** Errors correspond with the field's index. */
     valueErrors?: Record<number, string>;
     valueLabel?: string;
+    valuePlaceholder?: string;
   }>(),
   {
     addLabel: 'Add field',
     disabled: false,
     keyErrors: undefined,
     keyLabel: 'Key',
+    keyPlaceholder: undefined,
     valueErrors: undefined,
-    valueLabel: 'Value'
+    valueLabel: 'Value',
+    valuePlaceholder: undefined
   }
 );
 

src/components/Skeleton/Skeleton.mdx

@@ -0,0 +1,10 @@
+import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Primary } from './Skeleton.stories';
+
+# Skeleton
+
+<Canvas of={Primary} />
+
+## Props
+
+<ArgTypes story={PRIMARY_STORY} />

src/components/Skeleton/Skeleton.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import mdx from './Skeleton.mdx';
+// @ts-ignore No types from Vue file
+import Skeleton from './Skeleton.vue';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+export default meta;
+
+const Template: StoryFn = (args, { argTypes }) => ({
+  components: { Skeleton },
+  setup: () => ({ args }),
+  template: `
+    <div style="width: 500px;">
+      <Skeleton v-bind="args">
+        <template #header>Metadata</template>
+        <template #default>
+          <ul>
+            <li>City: Chicago</li>
+            <li>State: Illinois</li>
+            <li>Country: United States</li>
+          </ul>
+        </template>
+      </Panel>
+    </div>
+  `
+});
+
+export const Primary = Template.bind({});

src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,44 @@
+<template>
+  <Skeleton
+    :class="`uic-skeleton color-${color}`"
+    data-testid="uic-skeleton"
+    :height
+    :width
+  />
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton';
+import { SkeletonColor } from './constants';
+
+withDefaults(
+  defineProps<{
+    color?: SkeletonColor;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: SkeletonColor.NEUTRAL,
+    width: undefined,
+    height: undefined
+  }
+);
+</script>
+
+<style>
+.uic-skeleton {
+  @apply overflow-hidden;
+  @apply animate-pulse;
+  @apply rounded-full;
+
+  &.color-error {
+    @apply bg-error;
+  }
+  &.color-neutral {
+    @apply bg-gray-100;
+  }
+  &.color-success {
+    @apply bg-success;
+  }
+}
+</style>

src/components/Skeleton/__tests__/Skeleton.spec.ts

@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/vue';
+import Skeleton from '../Skeleton.vue';
+
+describe('Skeleton', () => {
+  it('renders', () => {
+    const { getByTestId } = render(Skeleton);
+    expect(getByTestId('uic-skeleton')).toBeVisible();
+  });
+});

src/components/Skeleton/constants.ts

@@ -0,0 +1,8 @@
+import { Color } from '@/types';
+
+export const SkeletonColor = {
+  ERROR: Color.ERROR,
+  NEUTRAL: Color.NEUTRAL,
+  SUCCESS: Color.SUCCESS
+} as const;
+export type SkeletonColor = (typeof SkeletonColor)[keyof typeof SkeletonColor];

src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export { default as Skeleton } from './Skeleton.vue';

src/main.ts

@@ -38,6 +38,7 @@ export * from './components/Modal';
 export * from './components/Overlay';
 export * from './components/Panel';
 export * from './components/Pagination';
+export * from './components/Skeleton';
 export * from './components/Steps';
 export * from './components/Table';
 export * from './components/Tile';

src/types/Variant.ts

@@ -1,5 +1,6 @@
 export const Variant = {
   OUTLINED: 'outlined',
-  PRIMARY: 'primary'
+  PRIMARY: 'primary',
+  TEXT: 'text'
 } as const;
 export type Variant = (typeof Variant)[keyof typeof Variant];