@indico-data/design-system 2.14.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

@@ -11,3 +11,4 @@ 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/index.d.ts

@@ -16,3 +16,4 @@ 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.14.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

@@ -11,3 +11,4 @@ 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/index.ts

@@ -70,3 +70,4 @@ 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

@@ -15,6 +15,7 @@
 @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/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';