@ama-pt/agora-design-system 3.7.0 → 4.0.1

package/artifacts/dist/types/components/header/internals/context/data-context/utils/navigation-utils.d.ts

@@ -6,12 +6,12 @@ import { NavigationRootProps } from '../../../../../../components/header/navigat
 import { ReactElement } from 'react';
 export declare const getParsedNavigationBarProps: (children?: HeaderChildrenComponents) => NavigationBarProps | null;
 export declare const getParsedNavigationBarId: (children?: HeaderChildrenComponents) => string;
-export declare const countParsedNavigationItems: (children?: HeaderChildrenComponents) => number;
 export declare const getParsedNavigationItems: (children?: HeaderChildrenComponents) => ReactElement<NavigationRootProps | NavigationLinkProps | NavigationFreestyleProps>[];
+export declare const countParsedNavigationItems: (children?: HeaderChildrenComponents) => number;
 export declare const getParsedModalMenuLabel: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedModalAriaLabel: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedModalCloseLabel: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedResponsiveMenuLabel: (children?: HeaderChildrenComponents) => string;
+export declare const getParsedNavigationHelpText: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedResponsiveMenuAriaLabel: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedResponsiveMenuBackToRootLabel: (children?: HeaderChildrenComponents) => string;
-export declare const hasNavigationBarInternal: (children?: HeaderChildrenComponents) => boolean;

package/artifacts/dist/types/components/header/internals/context/external-context/header-external-controller.d.ts

@@ -1,4 +1,5 @@
 import { HeaderElement } from '../../../../../components/header/header';
 import { HeaderMenuContextProps } from '../../../../../components/header/internals/context/menu-context/header-menu-context';
 import { ForwardedRef } from 'react';
-export declare const useHeaderExternalController: (ref: ForwardedRef<HeaderElement>, headerMenuContext: HeaderMenuContextProps) => void;
+import { HeaderDataContextProps } from '../data-context/header-data-context';
+export declare const useHeaderExternalController: (ref: ForwardedRef<HeaderElement>, headerMenuContext: HeaderMenuContextProps, headerDataContext: HeaderDataContextProps) => void;

package/artifacts/dist/types/components/header/internals/context/menu-context/header-menu-context.d.ts

@@ -1,10 +1,11 @@
 import { DrawerElement } from '../../../../../components/drawer';
 import { InternalNavigationBurgerPanelElement } from '../../../../../components/header/internals/navigation-bar/navigation-burger/internal-navigation-burger-panel';
+import { InternalNavigationRootElement } from '../../../../../components/header/internals/navigation-bar/navigation-root/internal-navigation-root';
 import { ModalMenuElement } from '../../../../../components/header/internals/shared/modal-menu/modal-menu';
 import { PanelMenuElement } from '../../../../../components/header/internals/shared/panel-menu/panel-menu';
 import { RefObject } from 'react';
 import { MenuTypeEnum } from './menu-type.enum';
-export type HeaderMenuContextRef = PanelMenuElement | HTMLDivElement | DrawerElement | ModalMenuElement | InternalNavigationBurgerPanelElement | null;
+export type HeaderMenuContextRef = PanelMenuElement | HTMLDivElement | HTMLUListElement | HTMLAnchorElement | DrawerElement | ModalMenuElement | InternalNavigationBurgerPanelElement | InternalNavigationRootElement | null;
 export interface HeaderMenuContextProps {
     menuRefMap: Map<MenuTypeEnum | string, RefObject<HeaderMenuContextRef>>;
     collapseAllMenus: () => void;

package/artifacts/dist/types/components/header/internals/context/menu-context/menu-type.enum.d.ts

@@ -14,5 +14,6 @@ export declare enum MenuTypeEnum {
     NavigationBurgerLayout = "NavigationBurgerLayout",
     GeneralBarPortal = "GeneralBarPortal",
     NavigationBarPortal = "NavigationBarPortal",
-    DirectLink = "DirectLink"
+    EcosystemPanel = "EcosystemPanel",
+    NavigationRoot = "NavigationRoot"
 }

package/artifacts/dist/types/components/header/internals/general-bar/ecosystem-panel/internal-ecosystem-panel-anchor.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { AnchorProps } from '../../../../../components/anchor';
+import './internal-ecosystem-panel-anchor.css';
+export interface InternalEcosystemPanelAnchorProps extends AnchorProps {
+}
+export declare const InternalEcosystemPanelAnchor: FC<InternalEcosystemPanelAnchorProps>;

package/artifacts/dist/types/components/header/internals/general-bar/ecosystem-panel/internal-ecosystem-panel-go-back.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from '../../../../../components/button';
+import { FC } from 'react';
+import './internal-ecosystem-panel-go-back.css';
+export interface InternalEcosystemPanelGoBackProps extends ButtonProps {
+}
+export declare const InternalEcosystemPanelGoBack: FC<InternalEcosystemPanelGoBackProps>;

package/artifacts/dist/types/components/header/internals/general-bar/ecosystem-panel/internal-ecosystem-panel-section-title.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+export interface InternalEcosystemPanelSectionTitleProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}
+import './internal-ecosystem-panel-section-title.css';
+export declare const InternalEcosystemPanelSectionTitle: FC<InternalEcosystemPanelSectionTitleProps>;

package/artifacts/dist/types/components/header/internals/general-bar/ecosystem-panel/internal-ecosystem-panel-short-description.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+import './internal-ecosystem-panel-short-description.css';
+export interface InternalEcosystemPanelShortDescriptionProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}
+export declare const InternalEcosystemPanelShortDescription: FC<InternalEcosystemPanelShortDescriptionProps>;

package/artifacts/dist/types/components/header/internals/general-bar/ecosystem-panel/internal-ecosystem-panel-title.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+import './internal-ecosystem-panel-title.css';
+export interface InternalEcosystemPanelTitleProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}
+export declare const InternalEcosystemPanelTitle: FC<InternalEcosystemPanelTitleProps>;

package/artifacts/dist/types/components/header/internals/general-bar/ecosystem-panel/internal-ecosystem-panel.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import './internal-ecosystem-panel.css';
+export interface InternalEcosystemPanelProps {
+    text: ReactNode;
+    logo?: ReactNode;
+    children: ReactNode;
+}
+export declare const InternalEcosystemPanel: () => React.JSX.Element;

package/artifacts/dist/types/components/header/internals/navigation-bar/helper.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement, RefObject } from 'react';
+import { NavigationAreaProps } from '../../navigation-bar/navigation-area';
+import { NavigationRootProps } from '../../navigation-bar/navigation-root';
+import { NavigationLinkProps } from '../../navigation-bar/navigation-link';
+import { NavigationBarSectionData } from '../context/data-context/utils/navigation-bar-utils';
+import { ButtonProps } from '../../../../components/button';
+export declare function transformIntoInternalNavigationArea(area: ReactElement<NavigationAreaProps> | null, index: number, areaSelected: number, areaRefs: RefObject<HTMLButtonElement[]>, setAreaSelected: (index: number) => void, props: ButtonProps): React.JSX.Element | null;
+export declare function transformIntoInternalLink(link: ReactElement<NavigationRootProps | NavigationLinkProps>, index: number, registerMenu?: boolean): React.JSX.Element | undefined;
+export declare function transformAreaIntoLI(sectionData: NavigationBarSectionData[], areaRefs: React.RefObject<HTMLButtonElement[]>, areaSelected: number, setAreaSelected: (index: number) => void, showNavigation: boolean): React.JSX.Element[];

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-area/internal-navigation-area.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode, RefObject } from 'react';
+import { ButtonProps } from '../../../../../components/button';
+import './internal-navigation-area.css';
+interface InternalNavigationAreaProps extends ButtonProps {
+    position: number;
+    selected: boolean;
+    children: ReactNode;
+    areaRefs: RefObject<HTMLButtonElement[]>;
+}
+export declare function InternalNavigationArea(props: Readonly<InternalNavigationAreaProps>): React.JSX.Element;
+export default InternalNavigationArea;

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-link/internal-navigation-link.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AnchorProps } from '../../../../../components/anchor';
+import './internal-navigation-link.css';
+interface InternalNavigationLinkProps extends AnchorProps {
+    menuId?: string;
+}
+export declare function InternalNavigationLink({ menuId, ref, ...props }: Readonly<InternalNavigationLinkProps>): React.JSX.Element;
+export default InternalNavigationLink;

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-modal/internal-modal-content.d.ts

@@ -1,8 +1,8 @@
 import { NavigationLinkProps } from '../../../../../components/header/navigation-bar/navigation-link';
 import { NavigationRootProps } from '../../../../../components/header/navigation-bar/navigation-root';
 import { FC, ReactElement } from 'react';
-import './internal-modal-content.css';
 import { NavigationFreestyleProps } from '../../../../../components/header/navigation-bar/navigation-freestyle';
+import './internal-modal-content.css';
 export interface InternalModalContentProps {
     item: ReactElement<NavigationRootProps | NavigationLinkProps | NavigationFreestyleProps>;
 }

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-root/internal-navigation-root.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+import { ButtonProps } from '../../../../../components/button';
+import { NavigationLinkProps } from '../../../../../components/header/navigation-bar/navigation-link';
+import { RelatedNavigationLinkProps } from '../../../../../components/header/navigation-bar/related-navigation-link';
+import { NavigationFreestyleProps } from '../../../../../components/header/navigation-bar/navigation-freestyle';
+import './internal-navigation-root.css';
+interface InternalNavigationRootProps extends ButtonProps {
+    id: string;
+    label: string;
+    linksAriaLabel?: string;
+    relatedLinksAriaLabel?: string;
+    children: ReactElement<NavigationLinkProps | RelatedNavigationLinkProps | NavigationFreestyleProps> | ReactElement<NavigationLinkProps | RelatedNavigationLinkProps>[];
+}
+export interface InternalNavigationRootElement extends HTMLDivElement {
+    expand: () => void;
+    collapse: () => void;
+    isExpanded: boolean;
+}
+export declare function InternalNavigationRoot(props: Readonly<InternalNavigationRootProps>): React.JSX.Element;
+export default InternalNavigationRoot;

package/artifacts/dist/types/components/header/navigation-bar/navigation-area.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from '../../../components/button';
+import { FC } from 'react';
+export interface NavigationAreaProps extends ButtonProps {
+}
+export declare const NavigationArea: FC<NavigationAreaProps>;

package/artifacts/dist/types/components/header/navigation-bar/navigation-bar.d.ts

@@ -1,14 +1,16 @@
 import { ComponentProps, FC, ReactElement } from 'react';
 import { NavigationRootProps } from './navigation-root';
 import { NavigationLinkProps } from './navigation-link';
+import { NavigationSectionProps } from './navigation-section';
 export interface NavigationBarProps extends ComponentProps<'div'> {
     id?: string;
     responsiveMenuLabel?: string;
     responsiveMenuAriaLabel?: string;
     responsiveMenuBackToRootLabel?: string;
+    navigationHelpText?: string;
     modalMenuLabel?: string;
     modalAriaLabel?: string;
     modalCloseLabel?: string;
-    children: ReactElement<NavigationRootProps | NavigationLinkProps> | ReactElement<NavigationRootProps | NavigationLinkProps>[];
+    children: ReactElement<NavigationSectionProps | NavigationRootProps | NavigationLinkProps> | ReactElement<NavigationSectionProps | NavigationRootProps | NavigationLinkProps>[];
 }
 export declare const NavigationBar: FC<NavigationBarProps>;

package/artifacts/dist/types/components/header/navigation-bar/navigation-link.d.ts

@@ -1,30 +1,5 @@
-import { LinkWrapperProps } from '../../../components/link-wrapper';
-import { BooleanProp } from '../../../models';
 import { FC } from 'react';
-export interface NavigationLinkProps extends LinkWrapperProps {
-    /**
-     * Defines if 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;
+import { AnchorProps } from '../../../components/anchor';
+export interface NavigationLinkProps extends AnchorProps {
 }
 export declare const NavigationLink: FC<NavigationLinkProps>;

package/artifacts/dist/types/components/header/navigation-bar/navigation-section.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from 'react';
+export interface NavigationSectionProps {
+    children: ReactNode;
+}
+export declare const NavigationSection: FC<NavigationSectionProps>;

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

@@ -1,6 +1,12 @@
 import { BooleanProp, FeedbackState } from '../../models';
 import { ComponentProps, FC, ReactNode } from 'react';
 import './input-search.css';
+export interface SearchResultTextProps extends ComponentProps<'div'> {
+    /**
+     * Result text displayed below helper text.
+     */
+    searchResultText?: ReactNode;
+}
 export interface InputSearchProps extends ComponentProps<'input'> {
     /**
      * Input label text.
@@ -51,7 +57,15 @@ export interface InputSearchProps extends ComponentProps<'input'> {
      */
     hasHelperText?: BooleanProp;
     /**
-     * Accessible label for screen readers, prepended to feedbackText.
+     * Defines result text.
+     */
+    searchResultText?: ReactNode;
+    /**
+     * Show or hide the result text.
+     */
+    hasSearchResultText?: BooleanProp;
+    /**
+     *  Accessible label for screen readers, prepended to feedbackText.
      */
     feedbackStateLabel?: string;
     /**

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

@@ -4,7 +4,7 @@ import './pill.css';
 /**
  * The available variants of the pill. This variants will define the background and border color of the pill.
  */
-export type PillVariant = 'primary' | 'secondary' | 'neutral' | 'informative' | 'success' | 'warning' | 'danger';
+export type PillVariant = 'primary' | 'secondary' | 'secondary-light' | 'neutral' | 'informative' | 'success' | 'warning' | 'danger';
 /**
  * The available pill appearances. Defines the pill shape.
  */
@@ -13,7 +13,7 @@ export type PillAppearance = 'solid' | 'outline';
  * The available pill size. Defines the pill size.
  */
 export type PillSize = 'default' | 'large';
-export interface PillProps extends ComponentProps<'div'> {
+export interface PillProps extends Omit<ComponentProps<'div'>, 'appearance'> {
     /**
      * The pill appearance. Define the pill Shape.
      */

package/artifacts/dist/types/components/progress-bar/index.d.ts

@@ -1,2 +1,2 @@
 export { ProgressBar } from './progress-bar';
-export type { ProgressBarProps } from './progress-bar';
+export type { ProgressBarProps, ProgressBarVariant } from './progress-bar';

package/artifacts/dist/types/components/progress-bar/progress-bar.d.ts

@@ -1,11 +1,43 @@
 import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../models';
 import './progress-bar.css';
+/**
+ * The available variants of the progress bar. This variants will define the presentation of the progress.
+ */
+export type ProgressBarVariant = 'percentage' | 'step';
+/**
+ * The available variants of the progress bar. This variants will define the presentation of the progress.
+ */
+export type ProgressBarAppearance = 'slim' | 'regular';
+/**
+ * The available variants of the steps progress bar.
+ */
+export type ProgressBarListStatus = 'error' | 'success' | 'hold';
 export interface ProgressBarProps extends ComponentProps<'div'> {
+    /**
+     * The available appearance of the style progress bar. This variants will define the height of the progress bar.
+     */
+    appearance?: ProgressBarAppearance;
+    /**
+     * The available variants of the progress bar. This variants will define the presentation of the progress bar.
+     */
+    variant?: ProgressBarVariant;
     /**
      * The current value of the progress.
      */
     value?: number;
+    /**
+     * The current step of the progress.
+     */
+    currentStep?: number;
+    /**
+     * The total value of the steps.
+     */
+    totalStep?: number;
+    /**
+     * The status of the steps.
+     */
+    listStepStatus?: Array<ProgressBarListStatus>;
     /**
      * The maximum value of the progress.
      */
@@ -14,6 +46,10 @@ export interface ProgressBarProps extends ComponentProps<'div'> {
      * The label text to display.
      */
     label?: string;
+    /**
+     * The fallback text for browsers that don't support progress bars.
+     */
+    fallbackText?: string;
     /**
      * Whether to hide the label or not.
      */
@@ -39,7 +75,7 @@ export interface ProgressBarProps extends ComponentProps<'div'> {
      */
     isLast?: boolean;
     /**
-     * Whether the progress bass is in the middle or not.
+     * Whether the progress bar is in the middle or not.
      */
     isMiddle?: boolean;
     /**

package/artifacts/dist/types/components/progress-bar-group/progress-bar-group.d.ts

@@ -1,12 +1,17 @@
 import { FC, HtmlHTMLAttributes, ReactElement } from 'react';
 import { ProgressBarProps } from '../../components/progress-bar';
-import './progress-bar-group.css';
 import { BooleanProp } from '../../models';
+import { ProgressBarAppearance } from '../progress-bar/progress-bar';
+import './progress-bar-group.css';
 export interface ProgressBarGroupProps extends HtmlHTMLAttributes<HTMLDivElement> {
     /**
      * The label text to display.
      */
     label?: string;
+    /**
+     * The available appearance of the style progress bar. This variants will define the height of the progress bar.
+     */
+    appearance?: ProgressBarAppearance;
     /**
      * Whether to hide the label or not.
      */

package/artifacts/dist/types/components/quiz/quiz-item-summary/quiz-item-summary.d.ts

@@ -1,15 +1,10 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { BooleanProp } from '../../../models';
 import './quiz-item-summary.css';
 export interface QuizItemSummaryProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Children content.
      */
     children?: ReactNode;
-    /**
-     * The dark mode boolean.
-     */
-    darkMode?: BooleanProp;
     /**
      *  Navigation link. It can be a native anchor or any other type of link (example: NextJS link, ReactRouter Link, etc...).
      */

package/artifacts/dist/types/components/timelines/timeline-horizontal/timeline-horizontal.d.ts

@@ -19,5 +19,9 @@ export interface TimelineHorizontalProps extends ComponentPropsWithoutRef<'div'>
      * Timeline events
      **/
     children: ReactElement<TimelineEventProps> | Array<ReactElement<TimelineEventProps>>;
+    /**
+     * Defines if the toggle renders in dark mode.
+     */
+    darkMode?: BooleanProp;
 }
 export declare const TimelineHorizontal: FC<TimelineHorizontalProps>;

package/artifacts/dist/types/components/timelines/timeline-vertical/timeline-vertical.d.ts

@@ -11,5 +11,9 @@ export interface TimelineVerticalProps extends ComponentPropsWithoutRef<'div'> {
      * Timeline events
      */
     children: ReactElement<TimelineEventProps> | Array<ReactElement<TimelineEventProps>>;
+    /**
+     * Defines if the toggle renders in dark mode.
+     */
+    darkMode?: BooleanProp;
 }
 export declare const TimelineVertical: FC<TimelineVerticalProps>;

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

@@ -4,7 +4,7 @@ import './toggle.css';
 /**
  * The available toggle button appearances. Defines the button layout shape,
  */
-export type ToggleAppearance = 'button' | 'icon';
+export type ToggleAppearance = 'button' | 'icon' | 'text';
 /**
  * The available variants of the toggle button. This variants will define the background and border color of the button.
  */
@@ -55,6 +55,18 @@ export interface ToggleProps extends ComponentProps<'input'> {
      * 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;
+    /**
+     * Show or hide the pill
+     */
+    hasPill?: boolean;
+    /**
+     * Sets the pill value
+     */
+    pillValue?: number;
+    /**
+     * Sets the pill aria-label
+     */
+    pillAriaLabel?: string;
 }
 declare const Toggle: FC<ToggleProps>;
 export { Toggle };

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

@@ -38,6 +38,14 @@ export interface TooltipProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, '
      * The description of the Tooltip.
      */
     description: ReactNode;
+    /**
+     * Shows the tooltip pointer
+     */
+    showPointer?: BooleanProp;
+    /**
+     * Defines  if the Tooltip has an icon.
+     */
+    showIcon?: BooleanProp;
     /**
      * The element where the tooltip is attached to.
      */