@digital-ai/dot-components 1.19.1 → 1.20.0

package/lib/components/alert-banner/AlertBanner.d.ts

@@ -9,9 +9,11 @@ export interface AlertBannerProps extends CommonProps {
     children: ReactNode | string;
     /** callback which is triggered when alert banner is closed */
     onClose?: (event: MouseEvent) => void;
+    /** If true, the alert banner will have rounded corners */
+    roundedCorners?: boolean;
     /** will determine color and icon being used */
     severity: AlertBannerSeverity;
     /** when specified, will control the text that is used inside the alert banner */
     textVariant?: TypographyVariant;
 }
-export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, severity, textVariant, }: AlertBannerProps) => JSX.Element;
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => JSX.Element;

package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts

@@ -37,17 +37,25 @@ export interface InputProps extends CommonProps {
     onKeyDown?: (event: KeyboardEvent) => void;
     /** A function that executes when a user releases a mouse button over an element. */
     onMouseUp?: (event: MouseEvent) => void;
+    /** If true, the label will be persistently displayed outside of the field */
+    persistentLabel?: boolean;
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
+    /** If specified, the label being shrunk/unshrunk must be controlled by the consumer */
+    shrink?: boolean;
     /** Size of the input */
     size?: inputSizeOptions;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
+    /** If true, the label and field will be displayed in a success state */
+    success?: boolean;
     /**
      * Type of input should be a valid HTML 5 input type
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
      */
     type?: string;
+    /** value of input field */
+    value?: string;
     /** If true, the label will be displayed in an warning state. */
     warning?: boolean;
 }

package/lib/components/input-form-fields/InputFormFields.styles.d.ts

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { TextField, InputLabel } from '@material-ui/core';
 export declare const rootClassName = "dot-text-field";
 export declare const rootSelectClassName = "dot-select-field";
+export declare const labelClassName = "dot-input-label";
 export declare const warningClassName = "dot-warning";
+export declare const successClassName = "dot-success";
 export declare const adornmentIconClassName = "dot-adornment-icon";
 export declare const StyledAdornment: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").InputAdornmentTypeMap<{}, "div">>, any, {}, never>;
+export declare const StyledInputLabel: import("styled-components").StyledComponent<typeof InputLabel, any, {}, never>;
 export declare const StyledTextField: import("styled-components").StyledComponent<typeof TextField, any, {}, never>;

package/lib/components/input-form-fields/InputLabel.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface InputLabelProps {
+    /** If true, the input will be disabled. */
+    disabled?: boolean;
+    /** If true, the label will be displayed in an error state. */
+    error?: boolean;
+    /**
+     * id to identify the element, also used to create label "for" and helper text id attribute
+     * values while it's optional, it is considered required for accessiblity best practice.
+     */
+    id: string;
+    /** The label content. */
+    label?: string;
+    /** If true, the label is displayed as required and the input element` will be required. */
+    required?: boolean;
+}
+export declare const DotInputLabel: ({ disabled, error, id, label, required, }: InputLabelProps) => JSX.Element;

package/lib/components/input-form-fields/InputSelect.d.ts

@@ -12,7 +12,5 @@ export interface InputSelectProps extends InputProps {
     defaultValue?: string;
     /** options of select dropdown */
     options: Array<OptionType>;
-    /** value of input field */
-    value?: string;
 }
-export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, required, size, startIcon, value, warning, }: InputSelectProps) => JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;

package/lib/components/input-form-fields/InputText.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { InputProps } from './InputFormFields.propTypes';
 export declare const DELAY_MS = 300;
+export declare type endAdornmentIconType = 'warning' | 'error' | 'check';
 export interface InputTextProps extends InputProps {
     /** The HTML autocomplete property to pass along to the input tag. Used for
     controlling autofill behavior in forms. This property follows this HTML spec:
@@ -20,7 +21,13 @@ export interface InputTextProps extends InputProps {
     rows?: number;
     /** max of rows for multiline line */
     rowsMax?: number;
-    /** value of the InputText */
-    value?: string;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
+export interface EndIconProps {
+    dataTestId?: string;
+    endAdornmentTooltip?: string;
+    endIcon?: ReactNode;
+    error?: boolean;
+    success?: boolean;
+    warning?: boolean;
+}
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, rows, rowsMax, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;

package/lib/components/navigation-rail/NavigationRail.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
+import { BadgeProps } from '../badge';
 export declare type RailItemsPosition = 'flex-start' | 'center' | 'flex-end';
+export declare type RailIconBadge = Omit<BadgeProps, 'children'>;
 export interface RailItem {
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
+    /** Optional badge which will be displayed over an icon **/
+    iconBadge?: RailIconBadge;
     /** Id of the icon shown in the rail item */
     iconId: string;
     /** text displayed or title text if icon used */

package/lib/components/navigation-rail/NavigationRail.stories.data.d.ts

@@ -0,0 +1,9 @@
+import { RailItem } from './NavigationRail';
+export interface BadgeCount {
+    activity: number;
+    conditions: number;
+    properties: number;
+    scheduling: number;
+}
+export declare const mockRailItems: Array<RailItem>;
+export declare const getBadgeRailItems: ({ activity, conditions, properties, scheduling, }: BadgeCount) => RailItem[];

package/lib/components/navigation-rail/NavigationRail.stories.styles.d.ts

@@ -1,2 +1,4 @@
 export declare const programmaticNavigationClassName = "dot-programmatic-navigation-story";
+export declare const withBadgesClassName = "dot-with-badges-story";
 export declare const StyledWithProgrammaticNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledWithBadges: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/typography/Typography.d.ts

@@ -6,9 +6,11 @@ export interface TypographyProps extends CommonProps {
     children: ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. */
     component?: ElementType;
+    /** If true, the typography will not have a bottom margin set */
+    noMarginBottom?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noWrap, variant, }: TypographyProps) => JSX.Element;
+export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [