@indico-data/design-system 1.0.46 → 1.0.48

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

@@ -0,0 +1,2 @@
+export { Wizard } from './Wizard';
+export { WizardCard, WizardSection, StyledWizard } from './Wizard.styles';

package/lib/components/WizardWithSidebar/WizardWithSidebar.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { PermafrostComponent } from '@/types';
+export type CancelText = {
+    confirmText: string;
+    message?: string;
+    rejectText: string;
+    title: string;
+};
+type Props = PermafrostComponent & {
+    children: React.ReactNode;
+    /**
+     * text for the cancel confirmation modal
+     */
+    confirmCancel: CancelText;
+    disableNextStep?: boolean;
+    disablePrevStep?: boolean;
+    disableSubmit?: boolean;
+    isLastStep?: boolean;
+    /**
+     * for testing/mocking purposes
+     */
+    startingStep?: string;
+    stepSchema: {
+        [key: string]: {
+            inputsRequiringValidation: string[];
+            description: string[];
+        };
+    };
+    /**
+     * the text to appear on the submit button
+     */
+    submitButtonLabel: string;
+    /**
+     * Puts button in "busy" mode, and replaces button label with this text
+     */
+    submitProcessing?: string;
+    wizardTitle: string;
+    onCancel?(): void;
+    onNextPress?(): boolean;
+    /**
+     * returns the current step name to the parent component
+     */
+    onStepChange(stepName: string): void;
+    onSubmit(): void;
+    /**
+     * Allows for any custom attribute to be added directly to "next button" in wizard
+     */
+    nextButtonProps?: {
+        'data-cy': string;
+    };
+    bottomNav?: boolean;
+    validationErrors?: any;
+    backgroundColor?: string;
+    color?: string;
+    buttonColor?: string;
+};
+export declare function WizardWithSidebar(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/WizardWithSidebar/WizardWithSidebar.stories.d.ts

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/react';
+import { WizardWithSidebar } from './WizardWithSidebar';
+declare const meta: {
+    component: typeof WizardWithSidebar;
+    title: string;
+    args: {
+        buttonColor: string;
+        backgroundColor: string;
+        color: string;
+        stepSchema: {
+            'Library Details': {
+                inputsRequiringValidation: string[];
+                description: never[];
+            };
+            'Configure Source': {
+                inputsRequiringValidation: never[];
+                description: string[];
+            };
+            Summary: {
+                inputsRequiringValidation: never[];
+                description: never[];
+            };
+        };
+        onCancel: () => void;
+        onSubmit: () => void;
+        wizardTitle: string;
+        confirmCancel: {
+            title: string;
+            message: string;
+            confirmText: string;
+            rejectText: string;
+        };
+        submitButtonLabel: string;
+        onNextPress: () => true;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof WizardWithSidebar>;
+export declare const FirstStep: Story;
+export declare const SecondStep: Story;
+export declare const LastStep: Story;
+export declare const DisabledNextStep: Story;
+export declare const DisabledPreviousStep: Story;
+export declare const SubmitProcessing: Story;
+export declare const LastStepOverride: Story;
+export declare const WithValidationErrors: Story;

package/lib/components/WizardWithSidebar/WizardWithSidebar.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledWizardWithSidebar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    backgroundcolor?: string | undefined;
+    color?: string | undefined;
+    buttoncolor?: string | undefined;
+    className?: string | undefined;
+    "data-cy"?: string | undefined;
+    id?: string | undefined;
+}>>;

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

@@ -0,0 +1,2 @@
+export { WizardWithSidebar } from './WizardWithSidebar';
+export { StyledWizardWithSidebar } from './WizardWithSidebar.styles';

package/lib/components/basic-section/Section/Section.d.ts

@@ -4,5 +4,5 @@ type Props = PermafrostComponent & {
     style?: object;
     children: React.ReactNode;
 };
-export declare const Section: (props: Props) => React.JSX.Element;
+export declare const Section: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/basic-section/Section/Section.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     component: (props: import("../../../types").PermafrostComponent & {
         style?: object | undefined;
         children: import("react").ReactNode;
-    }) => import("react").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     title: string;
     argTypes: {};
 };

package/lib/components/basic-section/Section/Section.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSection: import("styled-components").IStyledComponent
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/basic-section/SectionBlock/SectionBlock.d.ts

@@ -5,5 +5,5 @@ type Props = PermafrostComponent & {
     style?: object;
     children: React.ReactNode;
 };
-export declare const SectionBlock: (props: Props) => React.JSX.Element;
+export declare const SectionBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/basic-section/SectionBlock/SectionBlock.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSectionBlock: import("styled-components").IStyledComp
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/basic-section/SectionBody/SectionBody.d.ts

@@ -4,4 +4,4 @@ export type SectionBodyProps = PermafrostComponent & {
     style?: object;
     children: React.ReactNode;
 };
-export declare const SectionBody: (props: SectionBodyProps) => React.JSX.Element;
+export declare const SectionBody: (props: SectionBodyProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/basic-section/SectionBody/SectionBody.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
 import { SectionBody } from './SectionBody';
 declare const meta: {
-    component: (props: import("./SectionBody").SectionBodyProps) => import("react").JSX.Element;
+    component: (props: import("./SectionBody").SectionBodyProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     argTypes: {};
 };

package/lib/components/basic-section/SectionBody/SectionBody.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSectionBody: import("styled-components").IStyledCompo
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/basic-section/SectionHeader/SectionHeader.d.ts

@@ -5,7 +5,7 @@ type Props = PermafrostComponent & {
     children?: React.ReactNode;
 };
 export declare const SectionHeader: {
-    (props: Props): React.JSX.Element;
+    (props: Props): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         className: string;
         style: {};

package/lib/components/basic-section/SectionHeader/SectionHeader.stories.d.ts

@@ -6,7 +6,7 @@ declare const meta: {
         (props: import("../../../types").PermafrostComponent & {
             style?: object | undefined;
             children?: React.ReactNode;
-        }): React.JSX.Element;
+        }): import("react/jsx-runtime").JSX.Element;
         defaultProps: {
             className: string;
             style: {};

package/lib/components/basic-section/SectionHeader/SectionHeader.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSectionHeader: import("styled-components").IStyledCom
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/basic-section/SectionTable/SectionTable.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const SectionTable: (props: any) => React.JSX.Element;
+export declare const SectionTable: (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/basic-section/SectionTable/SectionTable.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSectionTable: import("styled-components").IStyledComp
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/buttons/Button/Button.styles.d.ts

@@ -73,7 +73,7 @@ export declare const StyledButton: import("styled-components").IStyledComponent<
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/buttons/IconButton/IconButton.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { AriaButtonProps } from '@react-types/button';
-import { IconName } from '@/types';
-import { PermafrostComponent } from '@/types';
-import { ButtonSize, ButtonVariant } from '../types';
+import { IconName, PermafrostComponent } from '@/types';
+import { ButtonSize, IconButtonVariant } from '../types';
 type Props = PermafrostComponent & {
     /**
      * Adjusts vertical alignment of the text label, in relation to the icon
@@ -19,7 +18,7 @@ type Props = PermafrostComponent & {
     label?: string;
     size?: ButtonSize;
     style?: React.CSSProperties;
-    variant?: ButtonVariant;
+    variant?: IconButtonVariant;
 } & AriaButtonProps;
 /**
  * General utility “button with an icon” component. May also be used for links that _look_
@@ -29,5 +28,5 @@ type Props = PermafrostComponent & {
  *
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
  */
-export declare function IconButton(props: Props): React.JSX.Element;
+export declare function IconButton(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/buttons/IconButton/IconButton.stories.d.ts

@@ -4,9 +4,9 @@ declare const meta: {
     component: typeof IconButton;
     title: string;
     args: {
-        iconSide: string;
-        size: string;
-        variant: string;
+        iconSide: "start";
+        size: "normal";
+        variant: "default";
     };
     argTypes: {
         onPress: {

package/lib/components/buttons/IconButton/IconButton.styles.d.ts

@@ -74,7 +74,7 @@ export declare const StyledIconButton: import("styled-components").IStyledCompon
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -295,8 +295,7 @@ export declare const StyledIconButtonLink: import("styled-components").IStyledCo
     content?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     translate?: "yes" | "no" | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
+    children?: import("react").ReactNode;
     draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     className?: string | undefined;
@@ -314,8 +313,10 @@ export declare const StyledIconButtonLink: import("styled-components").IStyledCo
     dir?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -353,7 +354,7 @@ export declare const StyledIconButtonLink: import("styled-components").IStyledCo
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -392,7 +393,6 @@ export declare const StyledIconButtonLink: import("styled-components").IStyledCo
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;

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

@@ -1,2 +1,3 @@
-export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonVariant = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
+export type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 export type ButtonSize = 'normal' | 'large';

package/lib/components/dropdowns/BorderSelect/BorderSelect.d.ts

@@ -15,5 +15,5 @@ type Props = PermafrostComponent & {
     value?: string | number;
     validationErrors?: string[];
 };
-export declare const BorderSelect: (props: Props) => React.JSX.Element;
+export declare const BorderSelect: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/dropdowns/BorderSelect/BorderSelect.stories.d.ts

@@ -16,7 +16,7 @@ declare const meta: {
         style?: object | undefined;
         value?: string | number | undefined;
         validationErrors?: string[] | undefined;
-    }) => import("react").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     title: string;
     argTypes: {};
     args: {

package/lib/components/dropdowns/BorderSelect/BorderSelect.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSelect: import("styled-components").IStyledComponent<
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -334,7 +334,7 @@ export declare const StyledValidationError: import("styled-components").IStyledC
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/dropdowns/Select/Select.d.ts

@@ -15,5 +15,5 @@ type Props = PermafrostComponent & {
     onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
     onClick?(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
 };
-export declare const Select: (props: Props) => React.JSX.Element;
+export declare const Select: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/dropdowns/Select/Select.stories.d.ts

@@ -15,7 +15,7 @@ declare const meta: {
         variant?: import("../types").ComboboxVariant | undefined;
         onChange(e: import("react").ChangeEvent<HTMLSelectElement>): void;
         onClick?(e: import("react").MouseEvent<HTMLDivElement, MouseEvent>): void;
-    }) => import("react").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     title: string;
     argTypes: {};
     args: {

package/lib/components/dropdowns/Select/Select.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledSelect: import("styled-components").IStyledComponent<
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/dropdowns/utils.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 /**
  * Adds custom props to a react-select component
  *
@@ -18,4 +17,4 @@ import React from 'react';
  */
 export declare const addCustomProps: (Component: any, customProps: {
     [key: string]: string;
-}) => (props: any) => React.JSX.Element;
+}) => (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/index.d.ts

@@ -4,7 +4,12 @@ export { Button, IconButton } from './buttons';
 export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
 export { Icon, faIcons, indicons } from './Icon';
 export { EditableInput, NumberInput, SearchInput, TextInput } from './inputs';
-export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, } from './loading-indicators';
+export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, LoadingIndicator, } from './loading-indicators';
 export { ListTable } from './ListTable';
 export { Pagination } from './Pagination';
 export { Shrug } from './user-feedback';
+export { ConfirmModal, ModalBase } from './modals';
+export { LoadingAwareContainer } from './LoadingAwareContainer';
+export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
+export { WizardWithSidebar } from './WizardWithSidebar';
+export { Drawer } from './Navigation/Drawer';

package/lib/components/inputs/EditableInput/EditableInput.d.ts

@@ -9,5 +9,5 @@ type Props = PermafrostComponent & {
  * Wrapper component which enables text editing in place directly on a child component,
  * element, or plain text.
  */
-export declare function EditableInput(props: Props): React.JSX.Element;
+export declare function EditableInput(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/inputs/EditableInput/EditableInput.stories.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { StoryObj } from '@storybook/react';
 import { EditableInput } from './EditableInput';
 declare const meta: {
     component: typeof EditableInput;
     title: string;
     args: {
-        children: React.JSX.Element;
+        children: import("react/jsx-runtime").JSX.Element;
     };
     argTypes: {};
 };

package/lib/components/inputs/EditableInput/EditableInput.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledEditableInput: import("styled-components").IStyledCom
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/inputs/NumberInput/NumberInput.styles.d.ts

@@ -63,7 +63,7 @@ export declare const StyledNumberField: import("styled-components").IStyledCompo
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "location" | "step" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "date" | "location" | "time" | "step" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/lib/components/inputs/SearchInput/SearchInput.d.ts

@@ -14,7 +14,7 @@ type Props = PermafrostComponent & {
     value?: string;
 };
 export declare const SearchInput: {
-    (props: Props): React.JSX.Element;
+    (props: Props): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         className: string;
     };

package/lib/components/inputs/SearchInput/SearchInput.stories.d.ts

@@ -15,7 +15,7 @@ declare const meta: {
             onKeyUp?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
             placeholder?: string | undefined;
             value?: string | undefined;
-        }): import("react").JSX.Element;
+        }): import("react/jsx-runtime").JSX.Element;
         defaultProps: {
             className: string;
         };
@@ -31,5 +31,6 @@ type Story = StoryObj<typeof SearchInput>;
 export declare const Base: Story;
 export declare const Border: Story;
 export declare const SearchIcon: Story;
+export declare const BorderAndSearchIcon: Story;
 export declare const ClearInputIcon: Story;
 export declare const ClearInputIconWithBorder: Story;