@indico-data/design-system 2.13.0 → 2.14.0

package/lib/src/components/index.d.ts

@@ -10,3 +10,4 @@ export { Textarea } from './forms/textarea';
 export { PasswordInput } from './forms/passwordInput';
 export { Select } from './forms/select';
 export { Form } from './forms/form';
+export { Skeleton } from './skeleton';

package/lib/src/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    className?: string;
+    height?: number;
+    width?: number;
+    isCircle?: boolean;
+    isFullHeight?: boolean;
+};
+export declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Circle: Story;
+export declare const Square: Story;
+export declare const Composition: Story;

package/lib/src/components/skeleton/__tests__/Skeleton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';

package/lib/src/index.d.ts

@@ -15,3 +15,4 @@ export { Textarea } from './components/forms/textarea';
 export { PasswordInput } from './components/forms/passwordInput';
 export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
+export { Skeleton } from './components/skeleton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/index.ts

@@ -10,3 +10,4 @@ export { Textarea } from './forms/textarea';
 export { PasswordInput } from './forms/passwordInput';
 export { Select } from './forms/select';
 export { Form } from './forms/form';
+export { Skeleton } from './skeleton';

package/src/components/skeleton/Skeleton.mdx

@@ -0,0 +1,44 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Skeleton from './Skeleton.stories';
+
+<Meta title="Layout/Skeleton" name="Skeleton" />
+
+# Skeleton
+
+This component is meant to be used in situations where you need a loading placeholder. It can be used as an image placeholder, text, or even a composite of multiple elements as shown below.
+
+<Canvas of={Skeleton.Default} source={{
+  code: `<Skeleton width={100} height={20} />`}} />
+<Controls of={Skeleton.Default} />
+
+## Composition 
+This is an example of how you can compose the Skeleton component to create a more complex loading placeholder.
+
+<Canvas of={Skeleton.Composition} source={{
+  code: `
+<Container>
+  <Row>
+    <Col sm={4}>
+      <h2 className="mb-2">Composition</h2>
+      <div className="sb__mock-card border-gray-100 border-md pa-4 rounded">
+        <div className="sb__mock-card-title">
+          <Skeleton height={40} width={40} isCircle className="mb-5" />
+          <Skeleton height={40} className="mb-5" />
+        </div>
+        <Skeleton height={20} className="mb-2" />
+        <Skeleton height={20} className="mb-2" />
+        <Skeleton height={20} className="mb-2" />
+        <Skeleton height={20} width={200} className="mb-2" />
+      </div>
+    </Col>
+    <Col sm={4}>
+      <h2 className="mb-2">Circle</h2>
+      <Skeleton height={40} width={40} isCircle />
+    </Col>
+    <Col sm={4}>
+      <h2 className="mb-2">Square</h2>
+      <Skeleton height={40} width={40} />
+    </Col>
+  </Row>
+</Container>`
+  }} />

package/src/components/skeleton/Skeleton.stories.tsx

@@ -0,0 +1,132 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+import { Col, Container, Row } from '../grid';
+
+const meta: Meta = {
+  title: 'Layout/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes for the skeleton component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    height: {
+      control: 'number',
+      description: 'The height of the skeleton component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    width: {
+      control: 'number',
+      description: 'The width of the skeleton component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    isCircle: {
+      control: 'boolean',
+      description: 'Sets the skeleton component to be a circle',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+    isFullHeight: {
+      control: 'boolean',
+      description: 'Sets the skeleton component to be full height',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  args: {
+    height: 20,
+    width: 100,
+    isCircle: false,
+    isFullHeight: false,
+    className: 'custom-class',
+  },
+  render: (args) => {
+    return <Skeleton {...args} />;
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    height: 50,
+    width: 50,
+    isCircle: true,
+  },
+  render: (args) => {
+    return <Skeleton {...args} />;
+  },
+};
+
+export const Square: Story = {
+  args: {
+    height: 50,
+    width: 50,
+  },
+  render: (args) => {
+    return <Skeleton {...args} />;
+  },
+};
+
+export const Composition: Story = {
+  render: () => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <h2 className="mb-2">Composition</h2>
+            <div className="sb__mock-card border-gray-100 border-md pa-4 rounded">
+              <div className="sb__mock-card-title">
+                <Skeleton height={40} width={40} isCircle className="mb-5" />
+                <Skeleton height={40} className="mb-5" />
+              </div>
+              <Skeleton height={20} className="mb-2" />
+              <Skeleton height={20} className="mb-2" />
+              <Skeleton height={20} className="mb-2" />
+              <Skeleton height={20} width={200} className="mb-2" />
+            </div>
+          </Col>
+          <Col sm={4}>
+            <h2 className="mb-2">Circle</h2>
+            <Skeleton height={40} width={40} isCircle />
+          </Col>
+          <Col sm={4}>
+            <h2 className="mb-2">Square</h2>
+            <Skeleton height={40} width={40} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/skeleton/Skeleton.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className?: string;
+  height?: number;
+  width?: number;
+  isCircle?: boolean;
+  isFullHeight?: boolean;
+};
+
+export const Skeleton = ({ className, height, width, isCircle, isFullHeight, ...rest }: Props) => {
+  const dynamicStyle = {
+    ...(height && { height: `${height}px` }),
+    ...(width && { width: `${width}px` }),
+  };
+
+  const circleClass = isCircle ? 'skeleton--circle' : '';
+  const fullHeightClass = isFullHeight ? 'skeleton--full-height' : '';
+  const combinedClassName = `skeleton ${circleClass} ${fullHeightClass} ${className || ''}`.trim();
+
+  return <div className={combinedClassName} style={dynamicStyle} {...rest} />;
+};

package/src/components/skeleton/__tests__/Skeleton.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { Skeleton } from '@/components/skeleton/Skeleton';
+
+describe('Skeleton', () => {
+  it('sets the width of the skeleton component', () => {
+    render(<Skeleton width={100} data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveStyle({ width: '100px' });
+  });
+  it('sets the height of the skeleton component', () => {
+    render(<Skeleton height={100} data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveStyle({ height: '100px' });
+  });
+  it('sets the skeleton component to be a circle', () => {
+    render(<Skeleton isCircle data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveClass('skeleton--circle');
+  });
+  it('sets the skeleton component to be full height', () => {
+    render(<Skeleton isFullHeight data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveClass('skeleton--full-height');
+  });
+  it('sets the className of the skeleton component', () => {
+    render(<Skeleton className="custom-class" data-testid="skeleton" />);
+    expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
+  });
+});

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';

package/src/components/skeleton/styles/Skeleton.scss

@@ -0,0 +1,41 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-skeleton-color-one: var(--pf-gray-color-200);
+  --pf-skeleton-color-two: var(--pf-gray-color-100);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-skeleton-color-one: var(--pf-primary-color-200);
+  --pf-skeleton-color-two: var(--pf-primary-color-100);
+}
+
+.skeleton {
+  border-radius: var(--pf-rounded);
+  background-color: var(--pf-gray-color-100);
+  opacity: 0.7;
+  animation: skeleton-loading 1s linear infinite alternate;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 30px;
+
+  &.skeleton--full-height {
+    height: 100%;
+  }
+
+  &.skeleton--circle {
+    border-radius: var(--pf-rounded-circle);
+  }
+
+  @keyframes skeleton-loading {
+    0% {
+      background-color: var(--pf-skeleton-color-one);
+    }
+    100% {
+      background-color: var(--pf-skeleton-color-two);
+    }
+  }
+}

package/src/index.ts

@@ -69,3 +69,4 @@ export { Textarea } from './components/forms/textarea';
 export { PasswordInput } from './components/forms/passwordInput';
 export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
+export { Skeleton } from './components/skeleton';

package/src/styles/index.scss

@@ -14,6 +14,7 @@
 @import '../components/forms/form/styles/Form.scss';
 @import '../components/forms/select/styles/Select.scss';
 @import '../components/forms/toggle/styles/Toggle.scss';
+@import '../components/skeleton/styles/Skeleton.scss';
 
 @import 'typography';
 @import 'colors';

package/src/styles/storybook.scss

@@ -13,3 +13,15 @@
   background-color: var(--storybook-bg-color);
   color: var(--storybook-font-color);
 }
+
+.sb__mock-card {
+  border-radius: var(--pf-rounded-lg);
+  box-shadow: 0 0 0 1px var(--pf-border-color);
+  margin: 1rem;
+  padding: 1rem;
+  .sb__mock-card-title {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 1fr 11fr;
+  }
+}