@indico-data/design-system 2.45.6 → 2.47.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,5 @@ 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 { Modal } from './modal';
+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/components/modal/Modal.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from './types';
+export declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/modal/Modal.stories.d.ts

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

package/lib/components/modal/__tests__/Modal.test.d.ts

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

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

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

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

@@ -0,0 +1,15 @@
+export interface ModalProps {
+    className?: string;
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onRequestClose?: () => void;
+    portalClassName?: string;
+    overlayClassName?: string;
+    appElement?: HTMLElement;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldCloseOnEsc?: boolean;
+    testId?: string;
+    contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+    overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+    position?: 'top' | 'center';
+}

package/lib/index.css

@@ -1767,6 +1767,148 @@ 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 {
+  --pf-modal-rounded: var(--pf-rounded-lg);
+}
+
+:root [data-theme=light] {
+  --pf-modal-background-color: var(--pf-white-color);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-modal-background-color: var(--pf-primary-color-600);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+.ReactModal__Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.modal {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--pf-background-color);
+  border-radius: var(--pf-modal-rounded);
+  outline: none;
+}
+.modal--center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.modal--top {
+  top: 50px;
+}
+.modal .modal-content {
+  background-color: var(--pf-modal-background-color);
+  border: var(--pf-border-sm) solid var(--pf-modal-border-color);
+  border-radius: var(--pf-modal-rounded);
+}
+.modal .modal-content .modal-body {
+  padding: var(--pf-padding-8);
+  padding-top: 0;
+}
+.modal .modal-content .modal-body h2 {
+  font-size: var(--pf-font-size-h1);
+}
+.modal .modal-content .modal-body h1,
+.modal .modal-content .modal-body h2,
+.modal .modal-content .modal-body h3,
+.modal .modal-content .modal-body h4,
+.modal .modal-content .modal-body h5,
+.modal .modal-content .modal-body h6 {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body p {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body hr {
+  margin-top: var(--pf-margin-8);
+  margin-bottom: var(--pf-margin-8);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+}
+.modal .modal-content .modal-close {
+  text-align: right;
+}
+
 :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

@@ -5,7 +5,7 @@ import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
-import { Props as Props$8 } from 'react-select';
+import { Props as Props$7 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
@@ -211,65 +211,26 @@ type PermafrostComponent = {
 
 type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 
-type Props$7 = PermafrostComponent & {
+type Props$6 = PermafrostComponent & {
     ariaLabel?: string;
     size?: IconSizes;
     style?: React$1.CSSProperties;
     fill?: string;
 };
-declare function CircleSpinner(props: Props$7): React$1.ReactElement;
+declare function CircleSpinner(props: Props$6): React$1.ReactElement;
 
-type Props$6 = PermafrostComponent & {
+type Props$5 = PermafrostComponent & {
     width?: string;
 };
-declare function BarSpinner(props: Props$6): React$1.ReactElement;
+declare function BarSpinner(props: Props$5): React$1.ReactElement;
 
-type Props$5 = PermafrostComponent & {
+type Props$4 = PermafrostComponent & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$5): React$1.ReactElement;
-
-type ModalBaseProps = PermafrostComponent & {
-    children: React$1.ReactNode | React$1.ReactNode[];
-    clickToDismiss?(): void;
-    describedBy?: string;
-    node?: string;
-    open: boolean;
-    preventEscDismiss?: boolean;
-    preventReturnFocus?: boolean;
-    maxWidth?: string;
-} & ({
-    labelElement: string;
-} | {
-    labelText: string;
-});
-/**
- * Base modal component, powered by [react-modal](http://reactcommunity.org/react-modal/#usage)
- *
- * (Also see `ModalAdapter` in the styles file)
- *
- * Accessible element label must be included either as a string passed to `labelText`, or
- * the id of one of the children passed to `labelElement`. If a description is available,
- * pass that element’s id to the `describedBy` prop.
- */
-declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
-
-type Props$4 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
-    describedBy?: string;
-    clickOutsideHandler(e?: React$1.SyntheticEvent): void;
-    confirmText?: string;
-    message?: string | React$1.ReactNode;
-    modalNode?: string;
-    processing?: boolean;
-    rejectText?: string;
-    responseHandler(response: boolean, event: React$1.SyntheticEvent): void;
-    title?: string | React$1.ReactNode;
-    width?: number;
-};
-declare function ConfirmModal(props: Props$4): react_jsx_runtime.JSX.Element;
+declare function CirclePulse(props: Props$4): React$1.ReactElement;
 
 type Props$3 = PermafrostComponent & {
     questionMark?: boolean;
@@ -418,7 +379,7 @@ interface PasswordInputProps extends LabelProps {
 }
 declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface SelectProps<OptionType extends SelectOption> extends Props$8<OptionType> {
+interface SelectProps<OptionType extends SelectOption> extends Props$7<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
@@ -542,9 +503,38 @@ 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;
+
+interface ModalProps {
+    className?: string;
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onRequestClose?: () => void;
+    portalClassName?: string;
+    overlayClassName?: string;
+    appElement?: HTMLElement;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldCloseOnEsc?: boolean;
+    testId?: string;
+    contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+    overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+    position?: 'top' | 'center';
+}
+
+declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, 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,148 @@ 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 {
+  --pf-modal-rounded: var(--pf-rounded-lg);
+}
+
+:root [data-theme=light] {
+  --pf-modal-background-color: var(--pf-white-color);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-modal-background-color: var(--pf-primary-color-600);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+.ReactModal__Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.modal {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--pf-background-color);
+  border-radius: var(--pf-modal-rounded);
+  outline: none;
+}
+.modal--center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.modal--top {
+  top: 50px;
+}
+.modal .modal-content {
+  background-color: var(--pf-modal-background-color);
+  border: var(--pf-border-sm) solid var(--pf-modal-border-color);
+  border-radius: var(--pf-modal-rounded);
+}
+.modal .modal-content .modal-body {
+  padding: var(--pf-padding-8);
+  padding-top: 0;
+}
+.modal .modal-content .modal-body h2 {
+  font-size: var(--pf-font-size-h1);
+}
+.modal .modal-content .modal-body h1,
+.modal .modal-content .modal-body h2,
+.modal .modal-content .modal-body h3,
+.modal .modal-content .modal-body h4,
+.modal .modal-content .modal-body h5,
+.modal .modal-content .modal-body h6 {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body p {
+  margin-bottom: var(--pf-margin-4);
+}
+.modal .modal-content .modal-body hr {
+  margin-top: var(--pf-margin-8);
+  margin-bottom: var(--pf-margin-8);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+}
+.modal .modal-content .modal-close {
+  text-align: right;
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);