@agility/plenum-ui 2.1.27 → 2.2.1

package/.storybook/preview.tsx

@@ -1,13 +1,14 @@
-import { Preview } from "@storybook/react"
-import Layout from "./Layout"
-import React from "react"
-import "../app/globals.css"
+import { Preview } from "@storybook/react";
+import Layout from "./Layout";
+import React from "react";
+import "../app/globals.css";
 // import "./fonts.css"
 
 const preview: Preview = {
 	parameters: {
 		options: {
 			storySort: {
+				method: "alphabetical",
 				order: ["atoms", "molecules", "organisms"]
 			}
 		},
@@ -26,5 +27,5 @@ const preview: Preview = {
 			</Layout>
 		)
 	]
-}
-export default preview
+};
+export default preview;

package/dist/index.d.ts

@@ -35,6 +35,105 @@ declare module '@agility/plenum-ui/stories/atoms/Avatar/index' {
   export default Avatar;
   export type { IAvatarProps };
 
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Heading/Heading' {
+  type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+  export interface HeadingProps {
+      level: HeadingLevel;
+      children: React.ReactNode;
+      className?: string;
+  }
+  export default function Heading({ level, children, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Heading/Heading.stories' {
+  import type { Meta, StoryObj } from "@storybook/react";
+  import Heading from "@agility/plenum-ui/stories/atoms/Typography/Heading/Heading";
+  const meta: Meta<typeof Heading>;
+  type Story = StoryObj<typeof Heading>;
+  export const Heading1: Story;
+  export const Heading2: Story;
+  export const Heading3: Story;
+  export const Heading4: Story;
+  export const Heading5: Story;
+  export const Heading6: Story;
+  export const HeadingWithCustomClassName: Story;
+  export default meta;
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Heading/index' {
+  import Heading, { HeadingProps } from "@agility/plenum-ui/stories/atoms/Typography/Heading/Heading";
+  export { Heading };
+  export type { HeadingProps };
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Label/Label' {
+  type LabelAs = "span" | "p" | "label" | "strong" | "em";
+  type LabelSize = "xl" | "lg" | "md" | "sm" | "xs";
+  export interface LabelProps {
+      as?: LabelAs;
+      size?: LabelSize;
+      children: React.ReactNode;
+      className?: string;
+  }
+  export default function Label({ as, size, children, className }: LabelProps): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Label/Label.stories' {
+  import type { Meta, StoryObj } from "@storybook/react";
+  import Label from "@agility/plenum-ui/stories/atoms/Typography/Label/Label";
+  const meta: Meta<typeof Label>;
+  type Story = StoryObj<typeof Label>;
+  export const DefaultLabel: Story;
+  export const ExtraLargeLabel: Story;
+  export const LargeLabel: Story;
+  export const MediumLabel: Story;
+  export const SmallLabel: Story;
+  export const ExtraSmallLabel: Story;
+  export const LabelWithCustomStyle: Story;
+  export default meta;
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Label/index' {
+  import Label, { LabelProps } from "@agility/plenum-ui/stories/atoms/Typography/Label/Label";
+  export { Label };
+  export type { LabelProps };
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Paragraph/Paragraph' {
+  type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
+  type ParagraphSize = "lg" | "md" | "sm" | "xs";
+  export interface ParagraphProps {
+      as?: ParagraphAs;
+      size?: ParagraphSize;
+      children: React.ReactNode;
+      className?: string;
+  }
+  export default function Paragraph({ as, size, children, className }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Paragraph/Paragraph.stories' {
+  import type { Meta, StoryObj } from "@storybook/react";
+  import Paragraph from "@agility/plenum-ui/stories/atoms/Typography/Paragraph/Paragraph";
+  const meta: Meta<typeof Paragraph>;
+  type Story = StoryObj<typeof Paragraph>;
+  export const DefaultParagraph: Story;
+  export const LargeParagraph: Story;
+  export const MediumParagraph: Story;
+  export const SmallParagraph: Story;
+  export const ExtraSmallParagraph: Story;
+  export const ParagraphWithCustomStyle: Story;
+  export default meta;
+
+}
+declare module '@agility/plenum-ui/stories/atoms/Typography/Paragraph/index' {
+  import Paragraph, { ParagraphProps } from "@agility/plenum-ui/stories/atoms/Typography/Paragraph/Paragraph";
+  export { Paragraph };
+  export type { ParagraphProps };
+
 }
 declare module '@agility/plenum-ui/stories/atoms/badges/Badge' {
   import React from "react";
@@ -87,7 +186,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
 declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
   import React, { HTMLAttributeAnchorTarget } from "react";
   import { UnifiedIconName, IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
-  export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "warning";
+  export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "danger-secondary" | "warning";
   export interface IButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
       /** Is the button a Primary CTA, alternative or danger button? */
       actionType?: BTNActionType;
@@ -136,6 +235,24 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Danger/Danger.st
   export const DangerLarge: Story;
   export const DangerExtraLarge: Story;
 
+}
+declare module '@agility/plenum-ui/stories/atoms/buttons/Button/DangerSecondary/DangerSecondary.stories' {
+  import type { Meta, StoryObj } from "@storybook/react";
+  import Button from "@agility/plenum-ui/stories/atoms/buttons/Button/Button";
+  const meta: Meta<typeof Button>;
+  export default meta;
+  type Story = StoryObj<typeof Button>;
+  export const DangerSecondary: Story;
+  export const DangerSecondaryDisabled: Story;
+  export const DangerSecondaryTrailingIcon: Story;
+  export const DangerSecondaryLeadingIcon: Story;
+  export const DangerSecondarySimpleIconName: Story;
+  export const DangerSecondaryExtraSmall: Story;
+  export const DangerSecondarySmall: Story;
+  export const DangerSecondaryMedium: Story;
+  export const DangerSecondaryLarge: Story;
+  export const DangerSecondaryExtraLarge: Story;
+
 }
 declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Primary/Primary.stories' {
   import type { Meta, StoryObj } from "@storybook/react";
@@ -369,8 +486,11 @@ declare module '@agility/plenum-ui/stories/atoms/index' {
   import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "@agility/plenum-ui/stories/atoms/buttons/index";
   import { DynamicIcon, FAIconName, IDynamicIconProps, IIconWithShadowProps, IconName, IconWithShadow, UnifiedIconName, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "@agility/plenum-ui/stories/atoms/icons/index";
   import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "@agility/plenum-ui/stories/atoms/loaders/index";
-  export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
-  export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };
+  import { Heading, HeadingProps } from "@agility/plenum-ui/stories/atoms/Typography/Heading/index";
+  import { Label, LabelProps } from "@agility/plenum-ui/stories/atoms/Typography/Label/index";
+  import { Paragraph, ParagraphProps } from "@agility/plenum-ui/stories/atoms/Typography/Paragraph/index";
+  export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, HeadingProps, LabelProps, ParagraphProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
+  export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, Heading, Label, Paragraph, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };
 
 }
 declare module '@agility/plenum-ui/stories/atoms/loaders/Loader' {
@@ -419,11 +539,11 @@ declare module '@agility/plenum-ui/stories/atoms/loaders/index' {
 
 }
 declare module '@agility/plenum-ui/stories/index' {
-  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";
+  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, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps } from "@agility/plenum-ui/stories/atoms/index";
   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";
   import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons, DropdownWithMultiSelect, MultiSelectItemProps } from "@agility/plenum-ui/stories/organisms/index";
-  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, IAnimatedFormInputWithAddons, MultiSelectItemProps };
-  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, AnimatedFormInputWithAddons, DropdownWithMultiSelect };
+  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, IAnimatedFormInputWithAddons, MultiSelectItemProps, HeadingProps, LabelProps, ParagraphProps };
+  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, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };
 
 }
 declare module '@agility/plenum-ui/stories/molecules/index' {
@@ -576,6 +696,10 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/TextInput/TextInput'
       /**Placeholder input text*/
       placeholder?: string;
       className?: string;
+      /** Callback on focus */
+      onFocus?: React.FocusEventHandler<HTMLInputElement>;
+      /** Callback on blur */
+      onBlur?: React.FocusEventHandler<HTMLInputElement>;
   }
   const _TextInput: React.ForwardRefExoticComponent<ITextInputProps & React.RefAttributes<HTMLInputElement>>;
   export default _TextInput;