feat: add skeleton

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.73
+
+- Add `Skeleton` component
+
 ## 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/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-lg;
+
+  &.color-error {
+    @apply bg-error;
+  }
+  &.color-neutral {
+    @apply bg-gray-200;
+  }
+  &.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';