@agility/plenum-ui 2.0.0-rc8 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -31
- package/build.js +30 -25
- package/dist/index.d.ts +105 -65
- package/dist/index.js +1 -6295
- package/dist/index.js.map +4 -4
- package/dist/{lib/tailwind.css → tailwind.css} +3729 -8120
- package/dist/types/stories/atoms/buttons/Button/Alternative/Alternative.stories.d.ts +1 -0
- package/dist/types/stories/atoms/buttons/Button/Button.d.ts +3 -7
- package/dist/types/stories/atoms/buttons/Button/Danger/Danger.stories.d.ts +1 -0
- package/dist/types/stories/atoms/buttons/Button/Primary/Primary.stories.d.ts +1 -0
- package/dist/types/stories/atoms/buttons/Button/Secondary/Secondary.stories.d.ts +1 -0
- package/dist/types/stories/atoms/buttons/Capsule/Capsule.d.ts +1 -1
- package/dist/types/stories/atoms/icons/DynamicIcon.d.ts +2 -2
- package/dist/types/stories/atoms/icons/TablerIcon.d.ts +1 -1
- package/dist/types/stories/index.d.ts +4 -4
- package/dist/types/stories/molecules/index.d.ts +2 -2
- package/dist/types/stories/molecules/inputs/InputField/InputField.d.ts +7 -7
- package/dist/types/stories/molecules/inputs/TextInput/TextInput.d.ts +1 -1
- package/dist/types/stories/molecules/inputs/index.d.ts +2 -2
- package/dist/types/stories/molecules/inputs/select/Select.d.ts +4 -2
- package/dist/types/stories/molecules/inputs/textArea/TextArea.d.ts +5 -1
- package/dist/types/stories/molecules/inputs/toggleSwitch/ToggleSwitch.d.ts +10 -7
- package/dist/types/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts +5 -5
- package/dist/types/stories/organisms/AnimatedLabelInput/index.d.ts +1 -1
- package/dist/types/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.d.ts +12 -0
- package/dist/types/stories/organisms/AnimatedLabelTextArea/index.d.ts +3 -0
- package/dist/types/stories/organisms/ButtonDropdown/ButtonDropdown.d.ts +1 -0
- package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts +24 -13
- package/dist/types/stories/organisms/DropdownComponent/index.d.ts +2 -2
- package/dist/types/stories/organisms/EmptySectionPlaceholder/index.d.ts +1 -1
- package/dist/types/stories/organisms/index.d.ts +4 -3
- package/local.sh +100 -0
- package/package.json +36 -19
- package/rollup.config.mjs +42 -0
- package/stories/atoms/badges/Badge.tsx +1 -1
- package/stories/atoms/buttons/Button/Alternative/Alternative.stories.ts +10 -0
- package/stories/atoms/buttons/Button/Button.tsx +111 -25
- package/stories/atoms/buttons/Button/Danger/Danger.stories.ts +14 -2
- package/stories/atoms/buttons/Button/Primary/Primary.stories.ts +14 -2
- package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts +13 -1
- package/stories/atoms/buttons/Button/defaultArgs.ts +1 -1
- package/stories/atoms/buttons/Capsule/Capsule.tsx +2 -1
- package/stories/atoms/icons/DynamicIcon.stories.ts +1 -1
- package/stories/atoms/icons/DynamicIcon.tsx +7 -7
- package/stories/atoms/icons/IconWithShadow.stories.ts +3 -3
- package/stories/atoms/icons/TablerIcon.tsx +1 -1
- package/stories/atoms/loaders/Loader.tsx +12 -6
- package/stories/atoms/loaders/NProgress/RadialProgress.tsx +0 -2
- package/stories/index.ts +8 -4
- package/stories/molecules/index.ts +2 -0
- package/stories/molecules/inputs/InputCounter/InputCounter.tsx +2 -2
- package/stories/molecules/inputs/InputField/InputField.tsx +31 -29
- package/stories/molecules/inputs/InputLabel/InputLabel.tsx +1 -1
- package/stories/molecules/inputs/TextInput/TextInput.tsx +12 -6
- package/stories/molecules/inputs/checkbox/Checkbox.stories.ts +1 -1
- package/stories/molecules/inputs/checkbox/Checkbox.tsx +1 -2
- package/stories/molecules/inputs/combobox/ComboBox.tsx +126 -135
- package/stories/molecules/inputs/index.ts +2 -1
- package/stories/molecules/inputs/radio/Radio.stories.ts +2 -2
- package/stories/molecules/inputs/select/Select.tsx +10 -2
- package/stories/molecules/inputs/textArea/TextArea.stories.ts +1 -1
- package/stories/molecules/inputs/textArea/TextArea.tsx +57 -27
- package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.stories.tsx +15 -16
- package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx +63 -57
- package/stories/molecules/tabs/index.tsx +2 -3
- package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.stories.tsx +10 -1
- package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx +53 -37
- package/stories/organisms/AnimatedLabelInput/index.tsx +1 -1
- package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx +26 -0
- package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx +61 -0
- package/stories/organisms/AnimatedLabelTextArea/index.tsx +3 -0
- package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx +59 -59
- package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx +42 -30
- package/stories/organisms/DropdownComponent/Dropdown.stories.tsx +26 -2
- package/stories/organisms/DropdownComponent/DropdownComponent.tsx +232 -180
- package/stories/organisms/DropdownComponent/dropdownItems.ts +30 -9
- package/stories/organisms/DropdownComponent/index.ts +2 -2
- package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.stories.tsx +3 -3
- package/stories/organisms/EmptySectionPlaceholder/index.tsx +2 -1
- package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx +1 -1
- package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx +7 -2
- package/stories/organisms/index.ts +12 -3
- package/tailwind.config.js +81 -37
- package/tsconfig.lib.json +13 -6
- package/watch.js +49 -0
- package/.yarnrc.yml +0 -1
- package/dist/types/stories/layouts/index.d.ts +0 -0
- package/stories/layouts/CardLayout/CardLayout.stories.tsx +0 -18
- package/stories/layouts/CardLayout/CardLayout.tsx +0 -22
- package/stories/layouts/CardLayout/index.tsx +0 -3
- package/stories/layouts/ModalLayout/ModalLayout.stories.tsx +0 -18
- package/stories/layouts/ModalLayout/ModalLayout.tsx +0 -22
- package/stories/layouts/ModalLayout/index.tsx +0 -3
- package/stories/layouts/index.ts +0 -0
- package/stories/organisms/DropdownComponent/Dropdown.test.tsx +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -72,6 +72,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
|
|
|
72
72
|
export default meta;
|
|
73
73
|
type Story = StoryObj<typeof Button>;
|
|
74
74
|
export const Alternative: Story;
|
|
75
|
+
export const AlternativeDisabled: Story;
|
|
75
76
|
export const AlternativeTrailingIcon: Story;
|
|
76
77
|
export const AlternativeLeadingIcon: Story;
|
|
77
78
|
export const AlternativeExtraSmall: Story;
|
|
@@ -83,10 +84,10 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
|
|
|
83
84
|
|
|
84
85
|
}
|
|
85
86
|
declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
|
|
86
|
-
import { HTMLAttributeAnchorTarget } from "react";
|
|
87
|
+
import React, { HTMLAttributeAnchorTarget } from "react";
|
|
87
88
|
import { UnifiedIconName, IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
|
|
88
89
|
export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
|
|
89
|
-
export interface IButtonProps extends React.
|
|
90
|
+
export interface IButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
|
|
90
91
|
/** Is the button a Primary CTA, alternative or danger button? */
|
|
91
92
|
actionType?: BTNActionType;
|
|
92
93
|
/** How lg should the button be? - Defaults to 'base'. */
|
|
@@ -111,12 +112,8 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
|
|
|
111
112
|
isLoading?: boolean;
|
|
112
113
|
className?: string;
|
|
113
114
|
iconObj?: React.ReactNode;
|
|
114
|
-
ref?: React.LegacyRef<HTMLButtonElement>;
|
|
115
115
|
}
|
|
116
|
-
|
|
117
|
-
* Primary UI component for user interaction
|
|
118
|
-
*/
|
|
119
|
-
const Button: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
116
|
+
const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
120
117
|
export default Button;
|
|
121
118
|
|
|
122
119
|
}
|
|
@@ -127,6 +124,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Danger/Danger.st
|
|
|
127
124
|
export default meta;
|
|
128
125
|
type Story = StoryObj<typeof Button>;
|
|
129
126
|
export const Danger: Story;
|
|
127
|
+
export const DangerDisabled: Story;
|
|
130
128
|
export const DangerTrailingIcon: Story;
|
|
131
129
|
export const DangerLeadingIcon: Story;
|
|
132
130
|
export const DangerSimpleIconName: Story;
|
|
@@ -144,6 +142,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Primary/Primary.
|
|
|
144
142
|
export default meta;
|
|
145
143
|
type Story = StoryObj<typeof Button>;
|
|
146
144
|
export const Primary: Story;
|
|
145
|
+
export const PrimaryDisabled: Story;
|
|
147
146
|
export const PrimaryLeadingIcon: Story;
|
|
148
147
|
export const PrimarySimpleIconName: Story;
|
|
149
148
|
export const PrimaryTrailingIcon: Story;
|
|
@@ -161,6 +160,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Secondary/Second
|
|
|
161
160
|
export default meta;
|
|
162
161
|
type Story = StoryObj<typeof Button>;
|
|
163
162
|
export const Secondary: Story;
|
|
163
|
+
export const SecondaryDisabled: Story;
|
|
164
164
|
export const SecondaryTrailingIcon: Story;
|
|
165
165
|
export const SecondaryLeadingIcon: Story;
|
|
166
166
|
export const SecondarySimpleIconName: Story;
|
|
@@ -198,7 +198,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Capsule/Capsule' {
|
|
|
198
198
|
/**
|
|
199
199
|
* Capsule Style Button
|
|
200
200
|
*/
|
|
201
|
-
export interface ICapsuleProps extends React.
|
|
201
|
+
export interface ICapsuleProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
202
202
|
/** Is the button a Primary CTA, alternative or danger button? */
|
|
203
203
|
actionType: BTNActionType;
|
|
204
204
|
/** How lg should the button be? - Defaults to 'base'. */
|
|
@@ -271,12 +271,12 @@ declare module '@agility/plenum-ui/stories/atoms/icons/DynamicIcon' {
|
|
|
271
271
|
import { ClassNameWithAutocomplete } from "@/utils/types";
|
|
272
272
|
export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
|
|
273
273
|
export type FAIconName = keyof typeof FA;
|
|
274
|
-
export type UnifiedIconName =
|
|
274
|
+
export type UnifiedIconName = TablerIconName | IconName | FAIconName;
|
|
275
275
|
export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
|
|
276
276
|
export function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
|
|
277
277
|
export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
|
|
278
278
|
export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
|
|
279
|
-
export interface IDynamicIconProps extends React.
|
|
279
|
+
export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
|
|
280
280
|
icon: UnifiedIconName;
|
|
281
281
|
className?: ClassNameWithAutocomplete;
|
|
282
282
|
outline?: boolean;
|
|
@@ -324,7 +324,7 @@ declare module '@agility/plenum-ui/stories/atoms/icons/TablerIcon' {
|
|
|
324
324
|
import React from "react";
|
|
325
325
|
import { TablerIconName } from "@agility/plenum-ui/stories/atoms/icons/tablerIconNames";
|
|
326
326
|
import { ClassNameWithAutocomplete } from "@/utils/types";
|
|
327
|
-
export interface ITablerIconProps extends React.
|
|
327
|
+
export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
|
|
328
328
|
icon: TablerIconName;
|
|
329
329
|
className?: ClassNameWithAutocomplete;
|
|
330
330
|
}
|
|
@@ -401,18 +401,15 @@ declare module '@agility/plenum-ui/stories/atoms/loaders/index' {
|
|
|
401
401
|
}
|
|
402
402
|
declare module '@agility/plenum-ui/stories/index' {
|
|
403
403
|
import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "@agility/plenum-ui/stories/atoms/index";
|
|
404
|
-
import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps } from "@agility/plenum-ui/stories/molecules/index";
|
|
405
|
-
import { IAnimatedLabelInputProps,
|
|
406
|
-
export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps,
|
|
407
|
-
export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
declare module '@agility/plenum-ui/stories/layouts/index' {
|
|
404
|
+
import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "@agility/plenum-ui/stories/molecules/index";
|
|
405
|
+
import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/index";
|
|
406
|
+
export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
|
|
407
|
+
export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };
|
|
411
408
|
|
|
412
409
|
}
|
|
413
410
|
declare module '@agility/plenum-ui/stories/molecules/index' {
|
|
414
|
-
import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, ITextInputProps, TextInput } from "@agility/plenum-ui/stories/molecules/inputs/index";
|
|
415
|
-
export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, ITextInputProps };
|
|
411
|
+
import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ISimpleSelectOptions, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, ITextInputProps, TextInput } from "@agility/plenum-ui/stories/molecules/inputs/index";
|
|
412
|
+
export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ISimpleSelectOptions, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, ITextInputProps };
|
|
416
413
|
export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput };
|
|
417
414
|
|
|
418
415
|
}
|
|
@@ -437,13 +434,13 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputCounter/index'
|
|
|
437
434
|
declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputField' {
|
|
438
435
|
import React from "react";
|
|
439
436
|
export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
|
|
440
|
-
export interface IInputFieldProps extends React.
|
|
437
|
+
export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
|
|
441
438
|
/** Callback on change */
|
|
442
439
|
handleChange: (value: string) => void;
|
|
443
440
|
/** Input ID*/
|
|
444
|
-
id
|
|
441
|
+
id?: string;
|
|
445
442
|
/** Input Name */
|
|
446
|
-
name
|
|
443
|
+
name?: string;
|
|
447
444
|
/** Force the focus state on the input */
|
|
448
445
|
isFocused?: boolean;
|
|
449
446
|
/** Error condition */
|
|
@@ -460,11 +457,11 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputFiel
|
|
|
460
457
|
required?: boolean;
|
|
461
458
|
/** use input psuedo classes for :valid and :invalid styles. on by default */
|
|
462
459
|
clientSideCheck?: boolean;
|
|
463
|
-
/**
|
|
464
|
-
|
|
460
|
+
/** Placeholder text */
|
|
461
|
+
placeholder?: string;
|
|
465
462
|
}
|
|
466
|
-
const
|
|
467
|
-
export default
|
|
463
|
+
const _InputField: React.ForwardRefExoticComponent<IInputFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
464
|
+
export default _InputField;
|
|
468
465
|
|
|
469
466
|
}
|
|
470
467
|
declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/index' {
|
|
@@ -554,7 +551,7 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/TextInput/TextInput'
|
|
|
554
551
|
/** Max length of input character */
|
|
555
552
|
maxLength?: number;
|
|
556
553
|
/** Callback on change */
|
|
557
|
-
|
|
554
|
+
handleChange(value: string): void;
|
|
558
555
|
/** input value */
|
|
559
556
|
value: string;
|
|
560
557
|
/**Placeholder input text*/
|
|
@@ -677,11 +674,11 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/index' {
|
|
|
677
674
|
import InputLabel, { IInputLabelProps } from "@agility/plenum-ui/stories/molecules/inputs/InputLabel/index";
|
|
678
675
|
import NestedInputButton, { INestedInputButtonProps } from "@agility/plenum-ui/stories/molecules/inputs/NestedInputButton/index";
|
|
679
676
|
import Radio, { IRadioProps } from "@agility/plenum-ui/stories/molecules/inputs/radio/index";
|
|
680
|
-
import Select, { ISelectProps } from "@agility/plenum-ui/stories/molecules/inputs/select/index";
|
|
677
|
+
import Select, { ISelectProps, ISimpleSelectOptions } from "@agility/plenum-ui/stories/molecules/inputs/select/index";
|
|
681
678
|
import Textarea, { ITextareaProps } from "@agility/plenum-ui/stories/molecules/inputs/textArea/index";
|
|
682
679
|
import TextInput, { ITextInputProps } from "@agility/plenum-ui/stories/molecules/inputs/TextInput/index";
|
|
683
680
|
import ToggleSwitch, { IToggleSwitchProps } from "@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/index";
|
|
684
|
-
export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
|
|
681
|
+
export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ISimpleSelectOptions, ITextareaProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
|
|
685
682
|
export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput };
|
|
686
683
|
|
|
687
684
|
}
|
|
@@ -732,10 +729,10 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/radio/index' {
|
|
|
732
729
|
}
|
|
733
730
|
declare module '@agility/plenum-ui/stories/molecules/inputs/select/Select' {
|
|
734
731
|
import React from "react";
|
|
735
|
-
export
|
|
732
|
+
export interface ISimpleSelectOptions {
|
|
736
733
|
label: string;
|
|
737
734
|
value: string;
|
|
738
|
-
}
|
|
735
|
+
}
|
|
739
736
|
export interface ISelectProps {
|
|
740
737
|
/** Label */
|
|
741
738
|
label?: string;
|
|
@@ -755,6 +752,8 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/select/Select' {
|
|
|
755
752
|
isRequired?: boolean;
|
|
756
753
|
value?: string;
|
|
757
754
|
className?: string;
|
|
755
|
+
onFocus?: () => void;
|
|
756
|
+
onBlur?: () => void;
|
|
758
757
|
}
|
|
759
758
|
const Select: React.FC<ISelectProps>;
|
|
760
759
|
export default Select;
|
|
@@ -777,13 +776,17 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/select/index' {
|
|
|
777
776
|
}
|
|
778
777
|
declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea' {
|
|
779
778
|
import React from "react";
|
|
779
|
+
interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
|
|
780
|
+
display: string;
|
|
781
|
+
htmlFor?: string;
|
|
782
|
+
}
|
|
780
783
|
export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
|
|
781
784
|
/** Input ID */
|
|
782
785
|
id?: string;
|
|
783
786
|
/** Input Name */
|
|
784
787
|
name?: string;
|
|
785
788
|
/** Label for the input */
|
|
786
|
-
label?:
|
|
789
|
+
label?: ILabelProps;
|
|
787
790
|
/** Error state */
|
|
788
791
|
isError?: boolean;
|
|
789
792
|
/** If field is required */
|
|
@@ -831,19 +834,22 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/index' {
|
|
|
831
834
|
declare module '@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/ToggleSwitch' {
|
|
832
835
|
import React from "react";
|
|
833
836
|
import { IDynamicIconProps } from "@/stories/atoms";
|
|
837
|
+
interface ToggleSwitchLabel {
|
|
838
|
+
text: string | JSX.Element;
|
|
839
|
+
className?: string;
|
|
840
|
+
xPosition?: "left" | "right";
|
|
841
|
+
}
|
|
834
842
|
export interface IToggleSwitchProps {
|
|
835
843
|
isChecked: boolean;
|
|
836
844
|
onChange: (isChecked: boolean) => void;
|
|
837
|
-
label?:
|
|
838
|
-
|
|
839
|
-
className?: string;
|
|
840
|
-
xPosition?: "left" | "right";
|
|
841
|
-
};
|
|
842
|
-
screenReaderLabel: string;
|
|
845
|
+
label?: ToggleSwitchLabel;
|
|
846
|
+
screenReaderLabel?: string;
|
|
843
847
|
name: string;
|
|
844
848
|
id: string;
|
|
845
|
-
variant
|
|
849
|
+
variant?: "base" | "short";
|
|
846
850
|
withIcon?: IDynamicIconProps;
|
|
851
|
+
disabled?: boolean;
|
|
852
|
+
groupClassName?: string;
|
|
847
853
|
}
|
|
848
854
|
const ToggleSwitch: React.FC<IToggleSwitchProps>;
|
|
849
855
|
export default ToggleSwitch;
|
|
@@ -858,19 +864,19 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/index'
|
|
|
858
864
|
declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/AnimatedLabelInput' {
|
|
859
865
|
import React from "react";
|
|
860
866
|
import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
|
|
861
|
-
|
|
862
|
-
interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
|
|
867
|
+
interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
|
|
863
868
|
display: string;
|
|
864
869
|
}
|
|
865
|
-
export interface IAnimatedLabelInputProps {
|
|
870
|
+
export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
|
|
866
871
|
id: string;
|
|
867
872
|
containerStyles?: string;
|
|
868
873
|
message?: string;
|
|
869
|
-
input?: IInputFieldProps;
|
|
870
|
-
textarea?: ITextareaProps;
|
|
871
874
|
required?: boolean;
|
|
872
875
|
isError?: boolean;
|
|
876
|
+
isShowCounter?: boolean;
|
|
877
|
+
maxLength?: number;
|
|
873
878
|
label: ILabelProps;
|
|
879
|
+
handleChange: (value: string) => void;
|
|
874
880
|
}
|
|
875
881
|
const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
|
|
876
882
|
export default AnimatedLabelInput;
|
|
@@ -878,8 +884,29 @@ declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/Animated
|
|
|
878
884
|
}
|
|
879
885
|
declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index' {
|
|
880
886
|
import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/AnimatedLabelInput";
|
|
881
|
-
export default AnimatedLabelInput;
|
|
882
887
|
export type { IAnimatedLabelInputProps };
|
|
888
|
+
export default AnimatedLabelInput;
|
|
889
|
+
|
|
890
|
+
}
|
|
891
|
+
declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea' {
|
|
892
|
+
import React from "react";
|
|
893
|
+
import { ITextareaProps } from "@/stories/molecules/inputs/textArea";
|
|
894
|
+
export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
|
|
895
|
+
id: string;
|
|
896
|
+
containerStyles?: string;
|
|
897
|
+
message?: string;
|
|
898
|
+
required?: boolean;
|
|
899
|
+
isError?: boolean;
|
|
900
|
+
handleChange: (value: string) => void;
|
|
901
|
+
}
|
|
902
|
+
const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps>;
|
|
903
|
+
export default AnimatedLabelTextArea;
|
|
904
|
+
|
|
905
|
+
}
|
|
906
|
+
declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/index' {
|
|
907
|
+
import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea";
|
|
908
|
+
export type { IAnimatedLabelTextAreaProps };
|
|
909
|
+
export default AnimatedLabelTextArea;
|
|
883
910
|
|
|
884
911
|
}
|
|
885
912
|
declare module '@agility/plenum-ui/stories/organisms/ButtonDropdown/ButtonDropdown' {
|
|
@@ -889,6 +916,7 @@ declare module '@agility/plenum-ui/stories/organisms/ButtonDropdown/ButtonDropdo
|
|
|
889
916
|
export interface IButtonDropdownProps {
|
|
890
917
|
button: IButtonProps;
|
|
891
918
|
dropDown: IDropdownProps;
|
|
919
|
+
hideDivider?: boolean;
|
|
892
920
|
placement?: IDropdownProps["placement"];
|
|
893
921
|
offsetOptions?: IDropdownProps["offsetOptions"];
|
|
894
922
|
}
|
|
@@ -909,36 +937,47 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
|
|
|
909
937
|
import React, { HTMLAttributes } from "react";
|
|
910
938
|
import { Placement } from "@floating-ui/react";
|
|
911
939
|
import { ClassNameWithAutocomplete } from "utils/types";
|
|
912
|
-
import { IDynamicIconProps
|
|
913
|
-
export interface IItemProp
|
|
914
|
-
icon?: IDynamicIconProps
|
|
940
|
+
import { IDynamicIconProps } from "@/stories/atoms/icons";
|
|
941
|
+
export interface IItemProp {
|
|
942
|
+
icon?: IDynamicIconProps;
|
|
915
943
|
iconPosition?: "trailing" | "leading";
|
|
916
|
-
label: string;
|
|
944
|
+
label: string | JSX.Element;
|
|
917
945
|
onClick?(): void;
|
|
918
946
|
isEmphasized?: boolean;
|
|
919
947
|
key: React.Key;
|
|
920
|
-
|
|
921
|
-
export interface IDropdownClassnames {
|
|
922
|
-
groupClassname?: ClassNameWithAutocomplete;
|
|
923
|
-
itemsClassname?: ClassNameWithAutocomplete;
|
|
924
|
-
itemClassname?: ClassNameWithAutocomplete;
|
|
925
|
-
activeItemClassname?: ClassNameWithAutocomplete;
|
|
926
|
-
buttonClassname?: ClassNameWithAutocomplete;
|
|
948
|
+
iconObj?: JSX.Element;
|
|
927
949
|
}
|
|
928
950
|
export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
|
|
929
951
|
items: IItemProp[][];
|
|
930
952
|
label: string;
|
|
931
953
|
CustomDropdownTrigger?: React.ReactNode;
|
|
932
954
|
id: string;
|
|
933
|
-
|
|
955
|
+
groupClassname?: ClassNameWithAutocomplete;
|
|
956
|
+
itemsClassname?: ClassNameWithAutocomplete;
|
|
957
|
+
itemClassname?: ClassNameWithAutocomplete;
|
|
958
|
+
activeItemClassname?: ClassNameWithAutocomplete;
|
|
959
|
+
buttonClassname?: ClassNameWithAutocomplete;
|
|
960
|
+
iconClassname?: ClassNameWithAutocomplete;
|
|
961
|
+
iconSpacingClassname?: ClassNameWithAutocomplete;
|
|
934
962
|
placement?: Placement;
|
|
935
963
|
offsetOptions?: Partial<{
|
|
936
964
|
mainAxis: number;
|
|
937
965
|
crossAxis: number;
|
|
938
966
|
alignmentAxis: number | null;
|
|
939
967
|
}>;
|
|
968
|
+
disabled?: boolean;
|
|
969
|
+
onFocus?: () => void;
|
|
970
|
+
onBlur?: () => void;
|
|
940
971
|
}
|
|
941
|
-
export const defaultClassNames:
|
|
972
|
+
export const defaultClassNames: {
|
|
973
|
+
groupClassname: string;
|
|
974
|
+
itemsClassname: string;
|
|
975
|
+
itemClassname: string;
|
|
976
|
+
activeItemClassname: string;
|
|
977
|
+
buttonClassname: string;
|
|
978
|
+
iconClassname: string;
|
|
979
|
+
iconSpacingClassname: string;
|
|
980
|
+
};
|
|
942
981
|
/** Comment */
|
|
943
982
|
const Dropdown: React.FC<IDropdownProps>;
|
|
944
983
|
export default Dropdown;
|
|
@@ -951,8 +990,8 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/dropdownI
|
|
|
951
990
|
|
|
952
991
|
}
|
|
953
992
|
declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/index' {
|
|
954
|
-
import Dropdown, { IItemProp,
|
|
955
|
-
export type { IItemProp,
|
|
993
|
+
import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownComponent";
|
|
994
|
+
export type { IItemProp, IDropdownProps };
|
|
956
995
|
export { defaultClassNames };
|
|
957
996
|
export default Dropdown;
|
|
958
997
|
|
|
@@ -981,8 +1020,8 @@ declare module '@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/Emp
|
|
|
981
1020
|
}
|
|
982
1021
|
declare module '@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index' {
|
|
983
1022
|
import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder";
|
|
984
|
-
export default EmptySectionPlaceholder;
|
|
985
1023
|
export type { IEmptySectionPlaceholderProps };
|
|
1024
|
+
export default EmptySectionPlaceholder;
|
|
986
1025
|
|
|
987
1026
|
}
|
|
988
1027
|
declare module '@agility/plenum-ui/stories/organisms/FormInputWithAddons/FormInputWithAddons' {
|
|
@@ -1093,13 +1132,14 @@ declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/index' {
|
|
|
1093
1132
|
}
|
|
1094
1133
|
declare module '@agility/plenum-ui/stories/organisms/index' {
|
|
1095
1134
|
import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index";
|
|
1135
|
+
import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/index";
|
|
1096
1136
|
import ButtonDropdown, { IButtonDropdownProps } from "@agility/plenum-ui/stories/organisms/ButtonDropdown/index";
|
|
1097
|
-
import Dropdown, {
|
|
1137
|
+
import Dropdown, { IDropdownProps, IItemProp } from "@agility/plenum-ui/stories/organisms/DropdownComponent/index";
|
|
1098
1138
|
import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index";
|
|
1099
1139
|
import FormInputWithAddons, { IFormInputWithAddonsProps } from "@agility/plenum-ui/stories/organisms/FormInputWithAddons/index";
|
|
1100
1140
|
import TextInputSelect, { ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/TextInputSelect/index";
|
|
1101
|
-
export type { IAnimatedLabelInputProps,
|
|
1102
|
-
export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
|
|
1141
|
+
export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
|
|
1142
|
+
export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
|
|
1103
1143
|
|
|
1104
1144
|
}
|
|
1105
1145
|
declare module '@agility/plenum-ui/utils/types' {
|