@ama-pt/agora-design-system 2.0.0 → 2.2.0

package/artifacts/dist/types/components/input-time/input-time.d.ts

@@ -0,0 +1,78 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import './input-time.scss';
+import { BooleanProp, FeedbackState } from '../../models';
+export interface InputTimeProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * Input label text.
+     */
+    label?: string;
+    /**
+     * Show or hide input label.
+     */
+    hideLabel?: BooleanProp;
+    /**
+     * Sets the input in a error state. This also affects the feedback state.
+     */
+    hasError?: BooleanProp;
+    /**
+     * Show or hide the feedback status text.
+     */
+    hasFeedback?: BooleanProp;
+    /**
+     * Defines the state of the feedback text. This param will change the feedback icon and dye it.
+     */
+    feedbackState?: FeedbackState;
+    /**
+     * Feedback text displayed below input.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Show or hide the leading icon.
+     */
+    hasIcon?: BooleanProp;
+    /**
+     * Name of the icon leading icon to be displayed.
+     */
+    icon?: string;
+    /**
+     * The placeholder to apply in the input minute part
+     */
+    minuteInputPlaceholder?: string;
+    /**
+     * The placeholder to apply in the input hour part
+     */
+    hourInputPlaceholder?: string;
+    /**
+     * Accessible text to apply to the trailing clock icon.
+     */
+    clockIconAriaLabel: string;
+    /**
+     * Label for the timepicker cancel button.
+     */
+    cancelLabel: string;
+    /**
+     * Accessible text for the timepicker cancel button.
+     */
+    cancelAriaLabel?: string;
+    /**
+     * Label for the timepicker ok button.
+     */
+    okLabel: string;
+    /**
+     * Accessible text for the timepicker ok button.
+     */
+    okAriaLabel?: string;
+    /**
+     * Show or hide the timepicker footer message.
+     */
+    hasTimepickerMessage?: BooleanProp;
+    /**
+     * Label for the timepicker footer message.
+     */
+    timepickerMessageLabel?: string;
+    /**
+     * Accessible text for the timepicker footer message.
+     */
+    timepickerMessageAriaLabel?: string;
+}
+export declare const InputTime: React.ForwardRefExoticComponent<Omit<InputTimeProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/artifacts/dist/types/components/input-time/time-picker-dropdown-body/time-picker-dropdown-body.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const DialogBody: FC;

package/artifacts/dist/types/components/input-time/time-picker-dropdown-footer/time-picker-dropdown-footer.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export interface TimePickerDropdownFooterProps {
+    setInputTextValue: (selectedTime: string) => void;
+}
+export declare const DialogFooter: FC<TimePickerDropdownFooterProps>;

package/artifacts/dist/types/components/input-time/time-picker-dropdown.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Labels } from './contexts/time-input-state.context';
+import { BooleanProp } from '../../models';
+export interface TimePickerDropdownProps {
+    className?: string;
+    setInputTextValue: (selectedTime: string) => void;
+    onChange: (selectedTime: string) => void;
+    onCancel: (selectedTime: string) => void;
+    hasTimepickerMessage?: BooleanProp;
+    textCurrentValue: string;
+    labels: Labels;
+}
+export declare const TimePickerDropdown: FC<TimePickerDropdownProps>;

package/artifacts/dist/types/components/input-time/time-text/time-text.d.ts

@@ -0,0 +1,8 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
+import './time-text.scss';
+export interface TimeTextProps extends ComponentPropsWithRef<'input'> {
+    hourInputPlaceholder?: string;
+    minuteInputPlaceholder?: string;
+}
+export declare const InnerComponent: ForwardRefRenderFunction<HTMLInputElement, TimeTextProps>;
+export declare const TimeText: React.ForwardRefExoticComponent<Omit<TimeTextProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/artifacts/dist/types/components/input-time/utils/format-time.d.ts

@@ -0,0 +1,24 @@
+import { TimePeriod } from '../../../models';
+export declare const FULL_TIME_TEXT_REGEX: RegExp;
+export declare const MIN_HOUR = 1;
+export declare const MAX_HOUR = 12;
+export declare const MIN_MINUTE = 0;
+export declare const MAX_MINUTE = 59;
+export declare const timePeriod: {
+    am: string;
+    pm: string;
+};
+export declare const startTime: {
+    hour: string;
+    minute: string;
+    period: string;
+};
+export declare const formatHour: (hour: number | string) => string;
+export declare const formatMinute: (minute: number | string) => string;
+export declare const formatFullTime: (selectedHour: number | string, selectedMinute: number | string, selectedPeriod: TimePeriod) => string;
+export declare const parseFullTime: (fullTimeText: string) => {
+    selectedHour: string;
+    selectedMinute: string;
+    selectedPeriod: TimePeriod;
+};
+export declare const isTimeTextValid: (timeText: string | number | undefined) => boolean;

package/artifacts/dist/types/components/panel-switcher/desktop/panel-switcher-desktop.d.ts

@@ -0,0 +1,16 @@
+import { TabBodyProps, TabHeaderProps } from '../../../components/tabs';
+import { BooleanProp } from '../../../models';
+import React, { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import './panel-switcher-desktop.scss';
+export interface PanelSwitcherDesktopProps extends ComponentPropsWithoutRef<'div'> {
+    leadingIcon?: string;
+    leadingIconHover?: string;
+    withIcon?: BooleanProp;
+    buttonListRef: React.RefObject<HTMLDivElement>;
+    panelRef: React.RefObject<HTMLDivElement>;
+    activeButton: number;
+    activateButton: (index: number) => void;
+    buttonsHeaderData: Array<ReactElement<TabHeaderProps>>;
+    buttonsBodyData: Array<ReactElement<TabBodyProps>>;
+}
+export declare const PanelSwitcherDesktop: FC<PanelSwitcherDesktopProps>;

package/artifacts/dist/types/components/panel-switcher/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelSwitcher } from './panel-switcher';
+export type { PanelSwitcherProps } from './panel-switcher';

package/artifacts/dist/types/components/panel-switcher/mobile/panel-switcher-mobile.d.ts

@@ -0,0 +1,20 @@
+import React, { FC, ReactElement } from 'react';
+import { TabHeaderProps } from '../../../components/tabs';
+import { TabBodyProps } from '../../../components/tabs';
+import './panel-switcher-mobile.scss';
+import { BooleanProp } from '../../../models';
+export interface PanelSwitcherMobileProps {
+    modalCloseButtonLabel: string;
+    leadingIcon?: string;
+    leadingIconHover?: string;
+    buttonListRef: React.RefObject<HTMLDivElement>;
+    buttonsHeaderData: Array<ReactElement<TabHeaderProps>>;
+    buttonsBodyData: Array<ReactElement<TabBodyProps>>;
+    activeButton?: number;
+    withIcon?: BooleanProp;
+}
+export declare const ModalContent: FC<{
+    content: React.ReactNode;
+}>;
+export declare const PanelSwitcherMobileInternal: FC<PanelSwitcherMobileProps>;
+export declare const PanelSwitcherMobile: FC<PanelSwitcherMobileProps>;

package/artifacts/dist/types/components/panel-switcher/panel-switcher-container.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactElement } from 'react';
+import { BooleanProp } from '../../models';
+import { TabProps } from '../tabs';
+export interface PanelSwitcherContainerProps {
+    /**
+     * Collection of the content displayed by triggering a panel button.
+     */
+    children: ReactElement<TabProps> | Array<ReactElement<TabProps>>;
+    /**
+     * Defines if the panel tabs have an icon preceding the text.
+     */
+    withIcon?: BooleanProp;
+    /**
+     * Defines the label of the modal close button.
+     */
+    modalCloseButtonLabel: string;
+    /**
+     * Defines the name of the icon to be displayed
+     */
+    leadingIcon?: string;
+    /**
+     * Defines the name of the icon to be displayed on mouse hover.
+     */
+    leadingIconHover?: string;
+}
+export declare const PanelSwitcherContainer: FC<PanelSwitcherContainerProps>;

package/artifacts/dist/types/components/panel-switcher/panel-switcher.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react';
+import { BooleanProp } from '../../models';
+export interface PanelSwitcherProps {
+    /**
+     * Collection of the content displayed by triggering a panel button.
+     */
+    children: ReactNode | Array<ReactNode>;
+    /**
+     * Collection of the string content displayed inside each panel button.
+     */
+    panelButtons: string | Array<string>;
+    /**
+     * Defines the label of the modal close button.
+     */
+    modalCloseButtonLabel: string;
+    /**
+     * Defines if the panel buttons have an icon preceding the text.
+     */
+    withIcon?: BooleanProp;
+    /**
+     * Defines the name of the icon to be displayed.
+     */
+    leadingIcon?: string;
+    /**
+     * Defines the name of the icon to be displayed on mouse hover.
+     */
+    leadingIconHover?: string;
+}
+export declare const PanelSwitcher: FC<PanelSwitcherProps>;

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

@@ -1,2 +1,2 @@
 export { Toggle } from './toggle';
-export type { ToggleProps } from './toggle';
+export type { ToggleProps, ToggleAppearance, ToggleVariant } from './toggle';

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

@@ -1,6 +1,5 @@
-import React, { ForwardRefRenderFunction } from 'react';
-import { PillProps } from '../../components/pill';
-import { ButtonProps } from '../button/button';
+import { BooleanProp } from '../../models';
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
 import './toggle.scss';
 /**
  * The available toggle button appearances. Defines the button layout shape,
@@ -10,7 +9,15 @@ export type ToggleAppearance = 'button' | 'icon';
  * The available variants of the toggle button. This variants will define the background and border color of the button.
  */
 export type ToggleVariant = 'primary' | 'neutral';
-export interface ToggleProps extends Omit<ButtonProps, 'appearance' | 'variant'> {
+export interface ToggleProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * Defines if the toggle takes the container full width.
+     */
+    fullWidth?: BooleanProp;
+    /**
+     * Defines if the toggle renders in dark mode.
+     */
+    darkMode?: BooleanProp;
     /**
      * The button appearance. Define the button Shape.
      */
@@ -19,15 +26,35 @@ export interface ToggleProps extends Omit<ButtonProps, 'appearance' | 'variant'>
      * The variant of the button. This variants will define the background and border color of the given Button.
      */
     variant?: ToggleVariant;
-    /**
-     * Encompasses Pill component properties.
-     */
-    pill?: PillProps;
     /**
      * Data attributes.
      * Allow when implemented interface add data-* attribute.
      */
     [dataAttribute: `data-${string}`]: string;
+    /**
+     * Defines if the button uses an icon.
+     */
+    hasIcon?: BooleanProp;
+    /**
+     * Defines if children content it is to be rendered.
+     */
+    iconOnly?: BooleanProp;
+    /**
+     * Defines the name of the leading icon to use.
+     */
+    leadingIcon?: string;
+    /**
+     * Defines the name of the leading icon to be displayed on mouse hover. If none specified, it will the appropriate variant of the icon.
+     */
+    leadingIconHover?: string;
+    /**
+     * Defines the name of the trailing icon to use.
+     */
+    trailingIcon?: string;
+    /**
+     * Defines the name of the trailing icon to be displayed on mouse hover. If none specified, it will the appropriate variant of the icon.
+     */
+    trailingIconHover?: string;
 }
-export declare const InnerToggle: ForwardRefRenderFunction<HTMLButtonElement, ToggleProps>;
-export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const InnerToggle: ForwardRefRenderFunction<HTMLInputElement, ToggleProps>;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/artifacts/dist/types/components/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup } from './toggle-group';
+export type { ToggleGroupProps, ToggleGroupElement, ToggleGroupOrientation } from './toggle-group';

package/artifacts/dist/types/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,59 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement, Ref } from 'react';
+import { ToggleAppearance, ToggleProps, ToggleVariant } from '../../components/toggle';
+import { BooleanProp } from '../../models';
+import './toggle-group.scss';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+export interface ToggleGroupElement extends HTMLDivElement {
+    /**
+     *  Current checked values of the toggle group.
+     */
+    value: string[];
+}
+export interface ToggleGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    /**
+     * Defines the appearance of the children toggles.
+     */
+    appearance?: ToggleAppearance;
+    /**
+     * Defines if the children toggles are full width.
+     */
+    fullWidth?: BooleanProp;
+    /**
+     * Toggles the dark mode.
+     */
+    darkMode?: BooleanProp;
+    /**
+     * Defines the variant of the children toggles.
+     */
+    variant?: ToggleVariant;
+    /**
+     * List of toggle components to aggregate.
+     */
+    children?: ReactElement<ToggleProps> | ReactElement<ToggleProps>[];
+    /**
+     * Defines the orientation of the toggle group.
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * Defines if it is allowed to have more than one toggle checked.
+     */
+    multiple?: BooleanProp;
+    /**
+     * Defines the checked toggle or toggles.
+     */
+    value?: string | string[];
+    /**
+     * Defines the default checked toggle or toggles.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Event handler called whenever one of the children toggles changes their checked value.
+     */
+    onChange?: (val: string[]) => void;
+    /**
+     * React ref object to the toggle group.
+     */
+    ref?: Ref<ToggleGroupElement>;
+}
+export declare const InnerToggleGroup: ForwardRefRenderFunction<ToggleGroupElement, ToggleGroupProps>;
+export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<ToggleGroupElement>>;

package/artifacts/dist/types/models/index.d.ts

@@ -5,3 +5,4 @@ export * from './months.interface';
 export * from './week-days.interface';
 export * from './heading-level-type';
 export * from './svg-icon.interface';
+export * from './time-period-type';

package/artifacts/dist/types/models/time-period-type.d.ts

@@ -0,0 +1 @@
+export type TimePeriod = 'am' | 'pm';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ama-pt/agora-design-system",
   "description": "Ágora Design system",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "main": "artifacts/dist/index.mjs",
   "module": "artifacts/dist/index.umd.js",
   "files": [
@@ -32,21 +32,21 @@
     "@babel/preset-typescript": "^7.22.5",
     "@mdx-js/react": "^3.1.0",
     "@playwright/test": "^1.39.0",
-    "@storybook/addon-a11y": "^8.4.5",
-    "@storybook/addon-actions": "^8.4.5",
-    "@storybook/addon-docs": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-storysource": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-storysource": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
     "@storybook/mdx2-csf": "^1.1.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-vite": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/types": "^8.4.5",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/types": "^8.4.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.1",
@@ -84,13 +84,14 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preview": "^0.3.1",
+    "jest-sonar-reporter": "^2.0.0",
     "playwright": "^1.40.0",
     "postcss": "^8.4.35",
     "prettier": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.7",
     "tailwindcss": "^3.4.1",
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.1.2",
@@ -121,5 +122,10 @@
     "es5-ext",
     "esbuild",
     "jest-preview"
-  ]
+  ],
+  "jestSonar": {
+    "reportPath": "./artifacts/jest-report/",
+    "reportFile": "test-reporter.xml",
+    "indent": 4
+  }
 }