@indico-data/design-system 2.13.0 → 2.15.0

package/lib/src/components/card/Card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    hasBoxShadow?: boolean;
+};
+export declare const Card: React.FC<Props>;
+export {};

package/lib/src/components/card/Card.stories.d.ts

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

package/lib/src/components/card/__tests__/Card.test.d.ts

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

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

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

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

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

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,5 @@ 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';
+export { Card } from './components/card';

package/package.json

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

package/src/components/card/Card.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Card from './Card.stories';
+
+<Meta title="Layout/Card" name="Card" of={Card} />
+
+# Card
+
+The Card component is a container that can be used to display content in a structured way. It can be used to display images, text, or even other components. The Card component mainly serves as a wrapper for your content.
+
+<Canvas of={Card.Default} />
+
+### The following props are available for the Card component:
+
+<Controls of={Card.Default} />

package/src/components/card/Card.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+import { Button } from '../button';
+import { Col, Container, Row } from '../grid';
+
+const meta: Meta = {
+  title: 'Layout/Card',
+  component: Card,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title of the card',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'The subtitle of the card',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    hasBoxShadow: {
+      control: 'boolean',
+      description: 'Adds a box shadow to the card',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional classes for the card component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
+      description: 'The content of the card',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    title: 'Adventurer Class: Bard',
+    subtitle: 'Champion of the lute and song',
+    hasBoxShadow: true,
+    className: '',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Card {...args}>
+              <hr />A versatile and charismatic character class known for their magical abilities,
+              musical talents, and wide array of skills. Bards are often seen as
+              jacks-of-all-trades, able to adapt to various situations and roles within a party.
+              <hr />
+              <Button color="secondary" ariaLabel="Learn More" onClick={() => alert('Learn More')}>
+                Learn More
+              </Button>
+            </Card>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/card/Card.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames'; // Assuming you have this utility
+
+type Props = {
+  className?: string;
+  children: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+  hasBoxShadow?: boolean;
+};
+
+export const Card: React.FC<Props> = ({
+  className = '',
+  children,
+  title,
+  subtitle,
+  hasBoxShadow = false,
+  ...rest
+}) => {
+  const cardClasses = classNames('card', { 'card--box-shadow': hasBoxShadow }, className);
+
+  return (
+    <div className={cardClasses} {...rest}>
+      {(title || subtitle) && (
+        <div className="card__header">
+          {title && <h2>{title}</h2>}
+          {subtitle && <p>{subtitle}</p>}
+        </div>
+      )}
+      <div className="card__content">{children}</div>
+    </div>
+  );
+};

package/src/components/card/__tests__/Card.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import { Card } from '@/components/card/Card';
+
+describe('Card', () => {
+  it('Renders the title for the card if one exists', () => {
+    render(
+      <Card title="Title" data-testid="Card">
+        Text
+      </Card>,
+    );
+    expect(screen.getByTestId('Card')).toHaveTextContent('Title');
+  });
+  it('Renders the subtitle for the card if one exists', () => {
+    render(
+      <Card subtitle="Subtitle" data-testid="Card">
+        Text
+      </Card>,
+    );
+    expect(screen.getByTestId('Card')).toHaveTextContent('Subtitle');
+  });
+  it('does not render a title or a subtitle if neither are provided', () => {
+    render(<Card data-testid="Card">Text</Card>);
+    expect(screen.getByTestId('Card')).not.toHaveTextContent('Title');
+    expect(screen.getByTestId('Card')).not.toHaveTextContent('Subtitle');
+  });
+});

package/src/components/card/index.ts

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

package/src/components/card/styles/Card.scss

@@ -0,0 +1,44 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-card-background-color: var(--pf-white-color);
+  --pf-card-text-color: var(--pf-gray-color);
+  --pf-card-border-color: var(--pf-gray-color);
+  --pf-card-rounded: var(--pf-rounded);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-card-background-color: var(--pf-primary-color);
+  --pf-card-border-color: var(--pf-primary-color-200);
+  --pf-card-text-color: var(--pf-gray-color-100);
+}
+
+.card {
+  border-radius: var(--pf-rounded);
+  padding: var(--pf-padding-3);
+  background: var(--pf-card-background-color);
+  border: var(--pf-border-sm) solid var(--pf-card-border-color);
+  box-sizing: border-box;
+}
+
+.card__header {
+  margin-bottom: var(--pf-margin-2);
+  p {
+    font-size: var(--pf-font-size-subtitle2);
+  }
+}
+
+.card__content {
+  hr {
+    border: var(--pf-border-thin) solid var(--pf-card-border-color);
+    border-bottom: none;
+    margin-bottom: var(--pf-margin-3);
+    margin-top: var(--pf-margin-3);
+  }
+}
+
+.card--box-shadow {
+  box-shadow: var(--pf-dropshadow);
+}

package/src/components/index.ts

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

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,5 @@ 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';
+export { Card } from './components/card';

package/src/styles/index.scss

@@ -14,6 +14,8 @@
 @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 '../components/card/styles/Card.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;
+  }
+}

package/src/styles/variables/_dropshadows.scss

@@ -0,0 +1,5 @@
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
+}

package/src/styles/variables/index.scss

@@ -4,3 +4,4 @@
 @import 'borders';
 @import 'padding';
 @import 'margin';
+@import 'dropshadows';