Merge pull request #491 from act-org/jc-skeleton

docs: Added stories for Skeleton component from MUI

src/components/_muiCore/Skeleton/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton ACT theme matches the snapshot 1`] = `
+<div>
+  <span
+    class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse css-l7mhj7-MuiSkeleton-root"
+    style="width: 100px; height: 100px;"
+  />
+</div>
+`;
+
+exports[`Skeleton ACT_ET theme matches the snapshot 1`] = `
+<div>
+  <span
+    class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse css-8l655q-MuiSkeleton-root"
+    style="width: 100px; height: 100px;"
+  />
+</div>
+`;
+
+exports[`Skeleton ENCOURA theme matches the snapshot 1`] = `
+<div>
+  <span
+    class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse css-15om3bo-MuiSkeleton-root"
+    style="width: 100px; height: 100px;"
+  />
+</div>
+`;
+
+exports[`Skeleton ENCOURA_CLASSIC theme matches the snapshot 1`] = `
+<div>
+  <span
+    class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse css-121fxnd-MuiSkeleton-root"
+    style="width: 100px; height: 100px;"
+  />
+</div>
+`;
+
+exports[`Skeleton ENCOURAGE theme matches the snapshot 1`] = `
+<div>
+  <span
+    class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse css-23i7u8-MuiSkeleton-root"
+    style="width: 100px; height: 100px;"
+  />
+</div>
+`;

src/components/_muiCore/Skeleton/index.stories.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) ACT, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Skeleton } from './internal';
+
+/**
+ * Renders a standard MUI [Skeleton](https://mui.com/material-ui/react-skeleton/)
+ * using the chosen theme parameters.
+ */
+export default {
+  args: {
+    height: 100,
+    style: { fontSize: 20 },
+    width: 300,
+  },
+  argTypes: {},
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'MUI Core / Skeleton',
+} as Meta<Skeleton>;
+
+export const Default: StoryObj<Skeleton> = {
+  args: {},
+};
+
+export const AnimationPulse: StoryObj<Skeleton> = {
+  args: { animation: 'pulse' },
+  name: 'Animation: Pulse',
+};
+
+export const AnimationWave: StoryObj<Skeleton> = {
+  args: { animation: 'wave' },
+  name: 'Animation: Wave',
+};
+
+export const AnimationNone: StoryObj<Skeleton> = {
+  args: { animation: false },
+  name: 'Animation: None',
+};
+
+export const VariantRectangular: StoryObj<Skeleton> = {
+  args: { variant: 'rectangular' },
+  name: 'Variant: Rectangular',
+};
+
+export const VariantCircular: StoryObj<Skeleton> = {
+  args: { height: 100, variant: 'circular', width: 100 },
+  name: 'Variant: Circular',
+};
+
+export const VariantRounded: StoryObj<Skeleton> = {
+  args: { variant: 'rounded' },
+  name: 'Variant: Rounded',
+};
+
+export const VariantText: StoryObj<Skeleton> = {
+  args: { variant: 'text' },
+  name: 'Variant: Text',
+};
+
+export const CustomColor: StoryObj<Skeleton> = {
+  args: {
+    sx: { bgcolor: 'grey.900' },
+  },
+};

src/components/_muiCore/Skeleton/index.test.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) ACT, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Skeleton } from '@mui/material';
+
+import { standard } from '~/helpers/test';
+
+describe('Skeleton', () => {
+  const Component = <Skeleton height={100} width={100} />;
+  standard(Component);
+});

src/components/_muiCore/Skeleton/internal.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) ACT, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  Skeleton as MuiSkeleton,
+  SkeletonProps as MuiSkeletonProps,
+} from '@mui/material';
+
+export const Skeleton = MuiSkeleton;
+export type Skeleton = typeof MuiSkeleton;
+export type SkeletonProps = MuiSkeletonProps;