@sebgroup/green-react 2.5.1 → 2.6.1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.2.3",
-    "@sebgroup/chlorophyll": "^2.2.2",
-    "@sebgroup/extract": "^2.1.0",
+    "@sebgroup/green-core": "^1.2.4",
+    "@sebgroup/chlorophyll": "^2.3.0",
+    "@sebgroup/extract": "^2.1.1",
     "classnames": "^2.3.2"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",

package/src/lib/form/button/button.d.ts

@@ -1,14 +1,14 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import { ButtonSize, ButtonType, ButtonVariant } from '@sebgroup/extract';
-export interface ButtonProps {
-    children?: ReactNode;
-    type?: ButtonType;
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { ButtonSize, ButtonVariant } from '@sebgroup/extract';
+export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    /** Button styling. Available options: 'primary', 'secondary', 'ghost' and 'tertiary'. */
     variant?: ButtonVariant;
+    /** Styling button as active or not */
     active?: boolean;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
+    /** Button size. Available options: 'small' and 'large'. */
     size?: ButtonSize;
+    /** Renders as a `data-testid` attribute on the `<button>` element, useful in testing scenarios. */
     testId?: string;
 }
-export declare function Button({ children, variant, onClick, disabled, active, type, size, testId }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ className, variant, active, type, size, testId, ...otherProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export default Button;

package/src/lib/form/buttonGroup/buttonGroup.d.ts

@@ -3,9 +3,11 @@ import { ButtonVariant } from '@sebgroup/extract';
 import { ButtonProps } from '../button/button';
 interface ButtonGroupProps {
     children: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
+    /** Class names passed to the child elements */
+    className?: string;
     selectedIndex?: number;
     variant?: ButtonVariant;
     id?: string;
 }
-export declare const ButtonGroup: ({ children, selectedIndex, variant, id, }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: ({ children, className, selectedIndex, variant, id, }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonGroup;

package/src/lib/form/checkbox/checkbox.d.ts

@@ -0,0 +1,15 @@
+import { IValidator } from '@sebgroup/extract';
+import { FormEventHandler, HTMLProps } from 'react';
+export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
+    /** Use this prop to control the checked state of the checkbox */
+    checked?: boolean;
+    /** The label of the checkbox */
+    label?: string;
+    /** A test id that will be placed in the `data-testid` attribute on the input element */
+    testId?: string;
+    /** An object used to render the validation status for the component */
+    validator?: IValidator;
+    /** A handler function that takes the event and can act on it */
+    onChange?: FormEventHandler<HTMLInputElement>;
+}
+export declare const Checkbox: ({ label, onChange, validator, testId, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/form/index.d.ts

@@ -1,10 +1,12 @@
 export * from './button/button';
 export * from './iconButton/iconButton';
 export * from './buttonGroup/buttonGroup';
+export * from './checkbox/checkbox';
 export * from './form';
 export * from './formItems';
 export * from './group/group';
 export * from './input/input';
 export * from './text/text';
+export * from './radioButton/radioButton';
 export * from './radioButton/radioGroup';
 export * from './textarea/textarea';

package/src/lib/form/input/input.d.ts

@@ -1,10 +1,26 @@
-import React, { InputHTMLAttributes } from 'react';
-import { IValidator } from '@sebgroup/extract';
-import { CheckboxProps, NumberInputProps, RadioButtonProps, TextInputProps } from '../types';
-export declare type Renderer = (type: string, props: InputHTMLAttributes<HTMLInputElement>, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChangeInput?: (value: string) => string, label?: string, info?: string | React.ReactNode, validator?: IValidator, expandableInfo?: React.ReactNode, expandableInfoButtonLabel?: string, testId?: string) => JSX.Element;
-export declare const RenderInput: Renderer;
-export declare const TextInput: ({ label, info, testId, onChange, onChangeInput, validator, expandableInfo, expandableInfoButtonLabel, ...props }: TextInputProps) => JSX.Element;
-export declare const EmailInput: ({ label, info, onChange, onChangeInput, validator, testId, ...props }: TextInputProps) => JSX.Element;
-export declare const NumberInput: ({ label, info, onChange, onChangeInput, validator, expandableInfo, expandableInfoButtonLabel, testId, ...props }: NumberInputProps) => JSX.Element;
-export declare const Checkbox: ({ label, onChange, validator, testId, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButton: React.ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+import { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
+import { IExpandableInformation, IValidator } from '@sebgroup/extract';
+export interface InputProps extends IExpandableInformation, DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    /** Data test id used for finding elements in test */
+    testId?: string;
+    /** Format value on change */
+    formatter?: (value: string) => string;
+    /** Extra describing text, below the label */
+    info?: ReactNode;
+    /** Label describing the input */
+    label?: string;
+    /** Text on the right side of the input, used for unit such as 'kr' or '%' */
+    unit?: string;
+    /** Validation object */
+    validator?: IValidator;
+    /** Value of input */
+    value?: string | number;
+    /** Function called when input value changes */
+    onChangeInput?: (value: string) => string;
+}
+export declare const Input: ({ "aria-describedby": ariaDescribedBy, autoComplete, children, className, testId: dataTestId, expandableInfo, expandableInfoButtonLabel, formatter, id, label, info, onChange, unit, role, validator, onChangeInput, value, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: (props: Omit<InputProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailInput: (props: Omit<InputProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberInput: (props: Omit<InputProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+export { RadioButton } from '../radioButton/radioButton';
+export { Checkbox } from '../checkbox/checkbox';

package/src/lib/form/radioButton/radioButton.d.ts

@@ -0,0 +1,9 @@
+import { HTMLProps } from 'react';
+import { IValidator } from '@sebgroup/extract';
+export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
+    label: string;
+    testId?: string;
+    validator?: IValidator;
+    value: string;
+}
+export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/src/lib/form/radioButton/radioGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IValidator, IExpandableInformation, ILabelAndLabelInformation } from '@sebgroup/extract';
 export interface RadioGroupProps extends IExpandableInformation, ILabelAndLabelInformation {
+    label?: string;
     title?: string;
     valueSelected?: string;
     description?: string;
@@ -11,5 +12,5 @@ export interface RadioGroupProps extends IExpandableInformation, ILabelAndLabelI
     name?: string;
     horizontal?: boolean;
 }
-export declare const RadioGroup: ({ defaultSelected, valueSelected, label, title, labelInformation, description, expandableInfo, expandableInfoButtonLabel, validator, onChangeRadio, onChange, name, horizontal, children, }: React.PropsWithChildren<RadioGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ defaultSelected, valueSelected, label, title, labelInformation, description, expandableInfo, expandableInfoButtonLabel, validator, onChangeRadio, onChange, name: propName, horizontal, children, }: React.PropsWithChildren<RadioGroupProps>) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/src/lib/form/textarea/textarea.d.ts

@@ -1,10 +1,15 @@
-/// <reference types="react" />
-import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
-export interface ITextAreaProps extends IExpandableInformation, ILabelAndLabelInformation, React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+import { IExpandableInformation, IValidator } from '@sebgroup/extract';
+import { DetailedHTMLProps, ReactNode } from 'react';
+export interface ITextAreaProps extends IExpandableInformation, DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+    /** Data test id used for finding elements in test */
+    testId?: string;
+    /** Label describing the textarea */
     label: string;
-    info?: string;
+    /** Extra describing text, below the label */
+    info?: ReactNode;
+    /** Validation object */
     validator?: IValidator | undefined;
+    /** Value of textarea */
     value?: string;
-    'data-testid'?: string;
 }
-export declare const TextArea: import("react").MemoExoticComponent<({ autoComplete, expandableInfo, expandableInfoButtonLabel, id, label, info, onChange, role, rows, validator, value, "data-testid": dataTestId, ...props }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TextArea: ({ "aria-describedby": ariaDescribedBy, autoComplete, className, expandableInfo, expandableInfoButtonLabel, id, label, info, onChange, role, rows, validator, value, testId: dataTestId, maxLength, ...props }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/formItem/formItem.d.ts

@@ -1,12 +1,13 @@
 import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
-import React, { ReactNode } from 'react';
-interface FormItemProps extends IExpandableInformation, ILabelAndLabelInformation {
+import React, { PropsWithChildren } from 'react';
+interface FormItemProps extends IExpandableInformation, ILabelAndLabelInformation, PropsWithChildren {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onChangeInput?: (value: string) => string;
     validator?: IValidator;
     inputId?: string;
-    children: ReactNode;
     role?: string;
+    /** Intended to use together with TextArea to show character counter. */
+    rightAlignedFooterInfo?: string;
 }
-export declare const FormItem: ({ expandableInfo, label, labelInformation, validator, inputId, children, expandableInfoButtonLabel, role, }: FormItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormItem: ({ expandableInfo, label, labelInformation, validator, inputId, children, expandableInfoButtonLabel, role, rightAlignedFooterInfo, }: FormItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/in-page-wizard/inPageWizardStepCard.d.ts

@@ -1,16 +1,24 @@
-import { ReactNode } from 'react';
-export interface InPageWizardStepCardProps {
+import { PropsWithChildren, ReactNode } from 'react';
+export interface InPageWizardStepCardProps extends PropsWithChildren {
+    /** Sub title for the title indicating 'Step X of Y'. */
     stepText: string;
+    /** Title of the step. */
     title: string;
+    /** Text on edit button. */
     editBtnText?: string;
-    nextBtnText: string;
+    /** Text on next button. */
+    nextBtnText?: string;
+    /** Icon for next button. */
     nextBtnIcon?: ReactNode;
-    stepStatus: WizardStepStatus;
+    /** Status for the step.*/
+    stepStatus: 'NotStarted' | 'IsActive' | 'IsComplete';
+    /** Force hiding of footer, regardless of state. */
     hideFooter?: boolean;
-    children: React.ReactNode;
-    onNextClick: () => void;
+    /** Event for click on next button. */
+    onNextClick?: () => void;
+    /** Event for click on edit button. */
     onEditClick?: () => void;
+    /** Testid for testing. */
     dataTestid?: string;
 }
-export declare type WizardStepStatus = 'NotStarted' | 'IsActive' | 'IsComplete';
-export declare const InPageWizardStepCard: (props: InPageWizardStepCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InPageWizardStepCard: ({ editBtnText, onNextClick, stepStatus, stepText, title, children, dataTestid, hideFooter, nextBtnIcon, nextBtnText, onEditClick, }: InPageWizardStepCardProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/link/link.d.ts

@@ -3,5 +3,5 @@ import { ButtonVariant } from '@sebgroup/extract';
 interface LinkProps extends HTMLProps<HTMLAnchorElement> {
     button?: boolean | ButtonVariant;
 }
-export declare const Link: ({ button, children, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ button, children, className, role, ...otherProps }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/src/lib/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import { ModalType, Size } from '@sebgroup/extract';
 import { MouseEvent, ReactNode } from 'react';
-declare type ModalEventListener = (event: MouseEvent<HTMLButtonElement>) => unknown;
+declare type ModalEventListener = (event: MouseEvent<HTMLButtonElement> | null) => unknown;
 export interface ModalProps {
     type?: ModalType;
     header?: string;

package/src/lib/form/types.d.ts

@@ -1,27 +0,0 @@
-import { IValidator, IExpandableInformation } from '@sebgroup/extract';
-import { HTMLProps } from 'react';
-export interface TextInputProps extends HTMLProps<HTMLInputElement>, IExpandableInformation {
-    type?: 'text' | 'email' | 'number';
-    label?: string;
-    info?: string;
-    testId?: string;
-    validator?: IValidator;
-    onChangeInput?: (value: string) => string;
-}
-export interface NumberInputProps extends TextInputProps {
-    testId?: string;
-    min?: number;
-    max?: number;
-    step?: number;
-}
-export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
-    testId?: string;
-    validator?: IValidator;
-}
-export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
-    label: string;
-    testId?: string;
-    validator?: string;
-    value: string;
-}
-export declare type InputListener<T> = (newValue?: T) => unknown;