gantri-components 1.144.0-beta.7 → 1.144.0

package/README.md

@@ -2,12 +2,14 @@
 
 ## Deploying beta code changes
 
-If you'd like to deploy some code that can be pulled into another repo, you can merge your changes into the `beta` branch. After deployment (you can verify deployment by looking at the released versions [here](https://www.npmjs.com/package/gantri-components)), you can install the beta code to your repo using `yarn add gantri-components@beta`. Just be sure not to reinstall the normal version when you're done.
+If you'd like to deploy some code that can be pulled into another repo, you can merge your changes into the `beta` branch. After deployment (you can verify deployment status [here](https://github.com/gantri/gantri-components/actions/workflows/publish.yml)), you can install the beta code to your repo using `yarn add gantri-components@beta`. Just be sure not to reinstall the normal version when you're done.
+
+#### NOTE: `chore` commit prefixes do not trigger a new version deployment. For a list of commit prefixes and their deployment versions, please see [this document](https://github.com/semantic-release/commit-analyzer/blob/master/lib/default-release-rules.js).
 
 ## Testing
 
 Testing is done using [Jest](https://jestjs.io/docs/using-matchers) for base JavaScript functionality and Jest with [React Testing Library](https://testing-library.com/docs/react-testing-library/cheatsheet) for React functionality.
 
-You can run all tests locally by running `npm test` in the command line. By default, this script is run with the `--watch` [option](https://jestjs.io/docs/cli#options) which will watch for saved changes and automatically re-run related tests. You can add other options to the command by adding running `npm test -- {{option flag}}` (example: `npm test -- --verbose`).
+You can run all tests locally by running `yarn test` in the command line. By default, this script is run with the `--watch` [option](https://jestjs.io/docs/cli#options) which will watch for saved changes and automatically re-run related tests. You can add other options to the command by adding running `yarn test {{option flag}}` (example: `yarn test --verbose`).
 
 All tests are run on GitHub each time new code is pushed to your PR.

package/dist/components/button/button.constants.d.ts

@@ -0,0 +1,17 @@
+export declare const buttonSizeHeights: {
+    extraLarge: string;
+    large: string;
+    mini: string;
+    small: string;
+};
+export declare const buttonWidths: {
+    lg: string;
+    md: string;
+    sm: string;
+};
+export declare const buttonSizePaddings: {
+    extraLarge: string;
+    large: string;
+    mini: string;
+    small: string;
+};

package/dist/components/button/button.types.d.ts

@@ -20,7 +20,7 @@ export interface ButtonProps extends BaseProps {
     minWidth?: ResolutionAwareProp<Property.Width>;
     onClick?: (event: MouseEvent) => void;
     processing?: boolean;
-    size?: 'large' | 'small';
+    size?: 'extraLarge' | 'large' | 'small' | 'mini';
     text?: string;
     textLineHeight?: Property.LineHeight;
     textVariant?: TextVariant;

package/dist/components/checkbox/checkbox.styles.d.ts

@@ -1,7 +1,9 @@
+import { CheckboxVariant } from './checkbox.types';
 export declare const StyledCheckboxWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    disabled: boolean;
+    $disabled: boolean;
 }, never>;
 export declare const StyledCheckbox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    checked: boolean;
+    $checked: boolean;
+    $variant?: CheckboxVariant | undefined;
 }, never>;

package/dist/components/checkbox/checkbox.types.d.ts

@@ -1,6 +1,7 @@
 import { JSXElementConstructor } from 'react';
-import { TextVariant } from '../typography/typography.types';
+import { TextVariant } from '../typography';
 import { FieldChangeEvent } from '../text-field';
+export declare type CheckboxVariant = 'primary' | 'alert';
 export interface CheckboxProps<T = boolean> {
     /** Overrides `labelTx` and `labelText` props to render `Component` inside a `label` element. */
     Component?: JSXElementConstructor<{
@@ -15,6 +16,7 @@ export interface CheckboxProps<T = boolean> {
     name?: string;
     onChange?: (event: FieldChangeEvent<T>) => void;
     onSelected?: (value: T) => void;
+    variant?: CheckboxVariant;
 }
 export interface LabelContentProps extends Pick<CheckboxProps, 'labelText' | 'labelTx' | 'labelVariant' | 'Component'> {
     isChecked: boolean;

package/dist/components/circular-progress/circular-progress.presets.d.ts

@@ -1,2 +1,3 @@
-import { CircularProgressProps } from './circular-progress.types';
+import { CircularProgressBaseSize, CircularProgressProps } from './circular-progress.types';
 export declare const CircularProgressPresets: Partial<CircularProgressProps>;
+export declare const CircularProgressSizes: Record<CircularProgressBaseSize, string>;

package/dist/components/circular-progress/circular-progress.types.d.ts

@@ -1,4 +1,5 @@
 import { Property } from 'csstype';
+export declare type CircularProgressBaseSize = 'small' | 'medium' | 'large';
 export interface CircularProgressProps {
-    size?: Property.Height;
+    size?: CircularProgressBaseSize | Property.Height;
 }

package/dist/components/color-picker/components/color-picker-item/color-picker-item.styles.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'styled-components';
+import { ColorPickerVariant } from '../../color-picker.types';
+export declare const StyledColorOutline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $isClickable: boolean;
+    $selected?: boolean | undefined;
+    $size?: CSSProperties['width'];
+    $variant?: ColorPickerVariant | undefined;
+}, never>;
+export declare const StyledColor: import("styled-components").StyledComponent<import("react-spring").AnimatedComponent<"span">, import("styled-components").DefaultTheme, {
+    $size?: CSSProperties['width'];
+    $variant?: ColorPickerVariant | undefined;
+    color: string;
+}, never>;

package/dist/components/color-picker/components/color-picker-item/color-picker.styles.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from 'styled-components';
 import { ColorPickerVariant } from '../../color-picker.types';
 export declare const StyledColorOutline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $isClickable: boolean;
     $selected?: boolean | undefined;
     $size?: CSSProperties['width'];
     $variant?: ColorPickerVariant | undefined;

package/dist/components/formik-input/__tests__/formik-input.test.d.ts

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

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export * from './in-view';
 export * from './linear-progress';
 export * from './modal';
 export * from './overlay';
+export * from './pills';
 export * from './radio';
 export * from './search-field';
 export * from './stack';

package/dist/components/modal/modal.styles.d.ts

@@ -21,5 +21,5 @@ export declare const StyledModalBodyContent: import("styled-components").StyledC
 export declare const StyledModalScrollableContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../grid/grid.types").GridProps & import("react").RefAttributes<import("../grid/grid.types").GridProps>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledModalChildrenContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledModalBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledModalCloseButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalCloseButtonContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyleMobileCloseContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/pills/components/index.d.ts

@@ -0,0 +1 @@
+export * from './pill';

package/dist/components/pills/components/pill/index.d.ts

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

package/dist/components/pills/components/pill/pill.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PillProps } from './pill.types';
+export declare const Pill: FC<PillProps>;

package/dist/components/pills/components/pill/pill.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledPill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $selected?: boolean | undefined;
+}, never>;

package/dist/components/pills/components/pill/pill.types.d.ts

@@ -0,0 +1,9 @@
+export interface PillProps {
+    icon?: JSX.Element;
+    onSelected?: (value: string | number) => void;
+    selected?: boolean;
+    text?: string;
+    tx?: string;
+    txValues?: Record<string, unknown>;
+    value: string | number;
+}

package/dist/components/pills/index.d.ts

@@ -0,0 +1,2 @@
+export { Pills } from './pills';
+export { Pill } from './components';

package/dist/components/pills/pills.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { PillsProps } from './pills.types';
+export declare const Pills: FC<PropsWithChildren<PillsProps>>;

package/dist/components/pills/pills.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledPills: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/pills/pills.types.d.ts

@@ -0,0 +1,20 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import { BlurChangeEvent } from '../dropdown';
+export interface PillsProps {
+    name?: string;
+    onBlur?: (event: BlurChangeEvent) => void;
+    onChange?: (event: PillsChangeEvent) => void;
+    onFocus?: (event: FocusChangeEvent) => void;
+    value?: string | number | undefined;
+}
+export interface PillsChangeEvent<T = string | number> extends Pick<ChangeEvent<HTMLInputElement>, Exclude<keyof ChangeEvent<HTMLInputElement>, 'target'>> {
+    target: {
+        name: string;
+        value: T;
+    };
+}
+export interface FocusChangeEvent extends Pick<FocusEvent<HTMLDivElement>, Exclude<keyof FocusEvent<HTMLDivElement>, 'target'>> {
+    target: {
+        name: string;
+    };
+}

package/dist/components/radio/radio.styles.d.ts

@@ -1,9 +1,12 @@
+import { RadioVariant } from './radio.types';
 export declare const StyledRadioWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledRadioContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $disabled?: boolean | undefined;
 }, never>;
 export declare const StyledRadio: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $checked?: boolean | undefined;
+    $disabled?: boolean | undefined;
+    $variant?: RadioVariant | undefined;
 }, never>;
 export declare const StyledRadioInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledRadioMarker: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/radio/radio.types.d.ts

@@ -1,4 +1,5 @@
 import { TextVariant } from '../typography';
+export declare type RadioVariant = 'primary' | 'alert';
 export interface RadioProps {
     disabled?: boolean;
     groupValue?: any;
@@ -10,4 +11,5 @@ export interface RadioProps {
     onChange?: (event: any) => void;
     onSelected?: (value: any) => void;
     value?: any;
+    variant?: RadioVariant;
 }

package/dist/components/text-field/text-field.styles.d.ts

@@ -1,6 +1,5 @@
 import { DefaultTheme } from 'styled-components';
 import { StyledInputContainerProps, StyledParentContainerProps } from './text-field.types';
 export declare const StyledParentContainer: import("styled-components").StyledComponent<"div", DefaultTheme, StyledParentContainerProps, never>;
-export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledInputContainer: import("styled-components").StyledComponent<"div", DefaultTheme, StyledInputContainerProps, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", DefaultTheme, {}, never>;

package/dist/components/text-field/text-field.types.d.ts

@@ -72,6 +72,7 @@ export interface StyledInputContainerProps extends Pick<TextFieldProps, 'variant
     $withErrors: boolean;
 }
 export interface StyledParentContainerProps extends Pick<TextFieldProps, 'labelPosition' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'horizontalMargin' | 'verticalMargin' | 'margin'> {
+    $disabled: boolean;
 }
 export interface ErrorMessageProps {
     errorMessage?: ErrorMessageType;

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ToggleProps } from './toggle.types';
+export declare const Toggle: FC<ToggleProps>;

package/dist/components/toggle/toggle.presets.d.ts

@@ -0,0 +1,2 @@
+import { ToggleProps } from './toggle.types';
+export declare const TogglePresets: Partial<ToggleProps>;

package/dist/components/toggle/toggle.styles.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledToggleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $disabled?: boolean | undefined;
+}, never>;
+export declare const StyledToggle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $checked: boolean;
+    $disabled?: boolean | undefined;
+    $withErrors: boolean;
+}, never>;
+export declare const StyledToggleSwitch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/toggle/toggle.types.d.ts

@@ -0,0 +1,21 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { TextVariant } from '../typography';
+import { ErrorMessageType } from '../text-field';
+export declare type ToggleVariant = 'primary' | 'alert';
+export interface ToggleProps extends Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onChange' | 'onBlur' | 'onFocus'> {
+    checked?: boolean;
+    disabled?: boolean;
+    errorMessage?: ErrorMessageType;
+    labelPosition?: 'left' | 'right';
+    labelText?: string;
+    labelTx?: string;
+    labelVariant?: TextVariant;
+    name?: string;
+    onSelected?: (value: boolean) => void;
+    value?: boolean;
+    variant?: ToggleVariant;
+}
+export interface ToggleLabelProps extends Pick<ToggleProps, 'labelText' | 'labelTx' | 'labelVariant'> {
+    color?: 't1' | 't2';
+    fieldId: string;
+}

package/dist/components/typography/typography.types.d.ts

@@ -1,12 +1,12 @@
 import { Property } from 'csstype';
 import { DefaultTheme } from 'styled-components';
-import { CSSProperties } from 'react';
+import { AriaAttributes, CSSProperties } from 'react';
 import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
 export declare type TextAlign = 'string' | 'left' | 'center' | 'right' | 'unset';
 export declare type TypographyColor = keyof DefaultTheme['colors']['typography'];
 export declare type TextVariant = 'p0' | 'p1' | 'p2' | 'p3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'hero';
 export declare type TextStyle = 'regular' | 'bold';
-export interface TypographyProps extends Partial<TypographyDefaultProps> {
+export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAttributes {
     align?: ResolutionAwareProp<string>;
     alignSelf?: ResolutionAwareProp<Property.AlignSelf>;
     className?: string;