@indico-data/design-system 2.45.6 → 2.46.0

package/package.json

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

package/src/components/badge/Badge.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Badge from './Badge.stories';
+import { Container, Row, Col } from '../grid';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+
+
+<Meta title="Components/Badge" name="Badge" of={Badge} />
+
+# Badge
+The Badge component is designed to display concise information about an item. It is versatile and can be used in various contexts, such as within dropdowns or other interactive elements.
+
+<Canvas of={Badge.String} />
+
+### The following props are available for the Badge component:
+
+<Controls of={Badge.String} />
+
+<Container>
+  <Row>
+    <Col xs={12}>
+      <h2 >Usage</h2>
+    </Col>
+    <Col sm={6}>
+      <h3>String</h3>
+      <p>The string prop is used to display a string inside the badge.</p>
+      <Canvas of={Badge.String} />
+    </Col>
+    <Col sm={6}>
+      <h3>With Dropdown</h3>
+      <p>The dropdown prop is used to display a dropdown inside the badge as a child element.</p>
+      <Canvas of={Badge.WithDropdown} />
+    </Col>
+  </Row>
+</Container>

package/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,109 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+import { Col, Container, Row } from '../grid';
+import { FloatUI } from '../floatUI';
+import { Menu } from '../menu';
+import { Icon } from '../icons';
+
+const meta: Meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'The size of the badge',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional classes for the badge component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
+      description: 'The content of the badge (superseded by the string prop)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    string: {
+      control: 'text',
+      description: 'The string to display in the badge. (supersedes children prop)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const String: Story = {
+  args: {
+    className: '',
+    string: 'Badge',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Badge {...args} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const WithDropdown: Story = {
+  args: {
+    className: '',
+    size: 'sm',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4} style={{ height: '130px' }}>
+            <Badge {...args}>
+              <FloatUI ariaLabel="Badge">
+                <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                  <p className="text-overline">Badge</p>
+                  <Icon size="xs" className="ml-3" name="chevron-down" />
+                </div>
+                <Menu className="pa-2">
+                  <li>Item 1</li>
+                  <li>Item 2</li>
+                  <li>Item 3</li>
+                  <li>Item 4</li>
+                </Menu>
+              </FloatUI>
+            </Badge>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/badge/Badge.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { BadgeProps } from './types';
+
+export const Badge = ({ className = '', children, size = 'md', string, ...rest }: BadgeProps) => {
+  const badgeClasses = classNames(
+    'badge',
+    {
+      [`badge--${size}`]: size,
+    },
+    className,
+  );
+
+  return (
+    <div className={badgeClasses} {...rest}>
+      {string ? <p>{string}</p> : children}
+    </div>
+  );
+};

package/src/components/badge/__tests__/Badge.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { Badge } from '@/components/badge/Badge';
+
+describe('Badge', () => {
+  it.each(['xs', 'sm', 'md', 'lg', 'xl'] as const)('renders the badge with size %s', (size) => {
+    render(<Badge size={size}>Badge</Badge>);
+    expect(screen.getByText('Badge')).toHaveClass(`badge--${size}`);
+  });
+  it('renders the badge with content inside', () => {
+    render(<Badge>Badge</Badge>);
+    expect(screen.getByText('Badge')).toBeInTheDocument();
+  });
+  it('renders the badge with string', () => {
+    render(<Badge string="Badge" />);
+    expect(screen.getByText('Badge')).toBeInTheDocument();
+  });
+});

package/src/components/badge/index.ts

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

package/src/components/badge/styles/Badge.scss

@@ -0,0 +1,61 @@
+// Common Variables
+:root {
+  --pf-badge-rounded: var(--pf-rounded);
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-badge-background-color: var(--pf-white-color);
+  --pf-badge-border-color: var(--pf-border-color);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'],
+:root {
+  --pf-badge-background-color: var(--pf-primary-color-600);
+  --pf-badge-border-color: var(--pf-border-color);
+}
+
+.badge {
+  border-radius: var(--pf-rounded-lg);
+  padding: var(--pf-padding-3);
+  background: var(--pf-badge-background-color);
+  border: var(--pf-border-sm) solid var(--pf-badge-border-color);
+  box-sizing: border-box;
+  width: fit-content;
+
+  &--xs {
+    padding: var(--pf-padding-1);
+    p {
+      font-size: var(--pf-font-size-overline);
+    }
+  }
+
+  &--sm {
+    padding: var(--pf-padding-2);
+    p {
+      font-size: var(--pf-font-size-body2);
+    }
+  }
+
+  &--md {
+    padding: var(--pf-padding-3);
+    p {
+      font-size: var(--pf-font-size-body);
+    }
+  }
+
+  &--lg {
+    padding: var(--pf-padding-4);
+    p {
+      font-size: var(--pf-font-size-h2);
+    }
+  }
+
+  &--xl {
+    padding: var(--pf-padding-5);
+    p {
+      font-size: var(--pf-font-size-h1);
+    }
+  }
+}

package/src/components/badge/types.ts

@@ -0,0 +1,8 @@
+export type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface BadgeProps {
+  className?: string;
+  children?: React.ReactNode;
+  string?: string;
+  size?: BadgeSizes;
+}

package/src/components/card/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames'; // Assuming you have this utility
+import classNames from 'classnames';
 
 type Props = {
   className?: string;

package/src/components/index.ts

@@ -18,3 +18,4 @@ export { DatePicker } from './forms/date/datePicker/DatePicker';
 export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
+export { Badge } from './badge';

package/src/components/menu/Menu.tsx

@@ -3,11 +3,12 @@ import classNames from 'classnames';
 
 export type MenuProps = {
   children: React.ReactNode;
+  className?: string;
 };
 
-export function Menu({ children }: MenuProps) {
+export function Menu({ children, className, ...rest }: MenuProps) {
   return (
-    <div className="menu">
+    <div className={classNames('menu', className)} {...rest}>
       {React.Children.map(children, (child) =>
         React.isValidElement(child)
           ? React.cloneElement(child as ReactElement, {

package/src/index.ts

@@ -13,7 +13,6 @@ export {
   Tooltip,
 } from './legacy/components';
 
-// New Components
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
@@ -34,6 +33,7 @@ export { Card } from './components/card';
 export { FloatUI } from './components/floatUI';
 export { Menu } from './components/menu';
 export { Pill } from './components/pill';
+export { Badge } from './components/badge';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';

package/src/styles/index.scss

@@ -21,6 +21,7 @@
 @import '../components/menu/styles/Menu.scss';
 @import '../components/floatUI/styles/FloatUI.scss';
 @import '../components/forms/date/datePicker/styles/DatePicker.scss';
+@import '../components/badge/styles/Badge.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it