@indico-data/design-system 2.45.6 → 2.46.0

package/lib/components/badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeProps } from './types';
+export declare const Badge: ({ className, children, size, string, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/badge/Badge.stories.d.ts

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

package/lib/components/badge/__tests__/Badge.test.d.ts

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

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

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

package/lib/components/badge/types.d.ts

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

package/lib/components/index.d.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/lib/components/menu/Menu.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export type MenuProps = {
     children: React.ReactNode;
+    className?: string;
 };
-export declare function Menu({ children }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ children, className, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/lib/index.css

@@ -1767,6 +1767,61 @@ form {
   background-color: transparent;
 }
 
+:root {
+  --pf-badge-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=light] {
+  --pf-badge-background-color: var(--pf-white-color);
+  --pf-badge-border-color: var(--pf-border-color);
+}
+
+: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: -moz-fit-content;
+  width: fit-content;
+}
+.badge--xs {
+  padding: var(--pf-padding-1);
+}
+.badge--xs p {
+  font-size: var(--pf-font-size-overline);
+}
+.badge--sm {
+  padding: var(--pf-padding-2);
+}
+.badge--sm p {
+  font-size: var(--pf-font-size-body2);
+}
+.badge--md {
+  padding: var(--pf-padding-3);
+}
+.badge--md p {
+  font-size: var(--pf-font-size-body);
+}
+.badge--lg {
+  padding: var(--pf-padding-4);
+}
+.badge--lg p {
+  font-size: var(--pf-font-size-h2);
+}
+.badge--xl {
+  padding: var(--pf-padding-5);
+}
+.badge--xl p {
+  font-size: var(--pf-font-size-h1);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

package/lib/index.d.ts

@@ -542,9 +542,20 @@ declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsO
 
 type MenuProps = {
     children: React$1.ReactNode;
+    className?: string;
 };
-declare function Menu({ children }: MenuProps): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, className, ...rest }: MenuProps): react_jsx_runtime.JSX.Element;
 
 declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
-export { BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, ModalBase, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };
+type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface BadgeProps {
+    className?: string;
+    children?: React.ReactNode;
+    string?: string;
+    size?: BadgeSizes;
+}
+
+declare const Badge: ({ className, children, size, string, ...rest }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, ModalBase, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -1767,6 +1767,61 @@ form {
   background-color: transparent;
 }
 
+:root {
+  --pf-badge-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=light] {
+  --pf-badge-background-color: var(--pf-white-color);
+  --pf-badge-border-color: var(--pf-border-color);
+}
+
+: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: -moz-fit-content;
+  width: fit-content;
+}
+.badge--xs {
+  padding: var(--pf-padding-1);
+}
+.badge--xs p {
+  font-size: var(--pf-font-size-overline);
+}
+.badge--sm {
+  padding: var(--pf-padding-2);
+}
+.badge--sm p {
+  font-size: var(--pf-font-size-body2);
+}
+.badge--md {
+  padding: var(--pf-padding-3);
+}
+.badge--md p {
+  font-size: var(--pf-font-size-body);
+}
+.badge--lg {
+  padding: var(--pf-padding-4);
+}
+.badge--lg p {
+  font-size: var(--pf-font-size-h2);
+}
+.badge--xl {
+  padding: var(--pf-padding-5);
+}
+.badge--xl p {
+  font-size: var(--pf-font-size-h1);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

package/lib/index.esm.js

@@ -22476,12 +22476,13 @@ const Card = (_a) => {
     return (jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxs("div", { className: "card__header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), jsx("div", { className: "card__content", children: children })] })));
 };
 
-function Menu({ children }) {
-    return (jsx("div", { className: "menu", children: React__default.Children.map(children, (child) => React__default.isValidElement(child)
+function Menu(_a) {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (jsx("div", Object.assign({ className: classNames('menu', className) }, rest, { children: React__default.Children.map(children, (child) => React__default.isValidElement(child)
             ? React__default.cloneElement(child, {
                 className: classNames(child.props.className, 'menu-item'),
             })
-            : child) }));
+            : child) })));
 }
 
 const Pill = (_a) => {
@@ -22493,5 +22494,13 @@ const Pill = (_a) => {
     return (jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
 };
 
-export { BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, ModalBase, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
+const Badge = (_a) => {
+    var { className = '', children, size = 'md', string } = _a, rest = __rest(_a, ["className", "children", "size", "string"]);
+    const badgeClasses = classNames('badge', {
+        [`badge--${size}`]: size,
+    }, className);
+    return (jsx("div", Object.assign({ className: badgeClasses }, rest, { children: string ? jsx("p", { children: string }) : children })));
+};
+
+export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, ModalBase, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
 //# sourceMappingURL=index.esm.js.map