@ama-pt/agora-design-system 2.2.1 → 2.2.3

package/artifacts/dist/tailwind.css

@@ -109,7 +109,7 @@
 }
 
 /*
-! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -2080,10 +2080,6 @@ input[type]::placeholder{
   border-bottom-width: 8px;
 }
 
-.\!border-b-0{
-  border-bottom-width: 0 !important;
-}
-
 .border-b{
   border-bottom-width: 1px;
 }
@@ -2276,10 +2272,6 @@ input[type]::placeholder{
   border-style: none;
 }
 
-.\!border-\[var\(--color-primary-600\)\]{
-  border-color: var(--color-primary-600) !important;
-}
-
 .\!border-transparent{
   border-color: transparent !important;
 }
@@ -7380,10 +7372,6 @@ input[type]::placeholder{
   padding-bottom: 96px;
 }
 
-.pl-32{
-  padding-left: 32px;
-}
-
 .pl-8{
   padding-left: 8px;
 }
@@ -7687,6 +7675,10 @@ input[type]::placeholder{
   color: var(--color-primary-900);
 }
 
+.text-\[var\(--color-white\)\]{
+  color: var(--color-white);
+}
+
 .text-backdrop{
   color: rgba(43, 54, 60, 0.96);
 }
@@ -12615,10 +12607,6 @@ input[type]::placeholder{
   --tw-border-opacity: 0.95;
 }
 
-.hover\:\!bg-transparent:hover{
-  background-color: transparent !important;
-}
-
 .hover\:bg-\[var\(--color-primary-100\)\]:hover{
   background-color: var(--color-primary-100);
 }
@@ -20974,10 +20962,6 @@ input[type]::placeholder{
   border-width: 0;
 }
 
-.active\:\!bg-transparent:active{
-  background-color: transparent !important;
-}
-
 .active\:bg-\[var\(--color-neutral-200\)\]:active{
   background-color: var(--color-neutral-200);
 }

package/artifacts/dist/types/components/cards/card-expandable/card-accordion/card-accordion.d.ts

@@ -0,0 +1,80 @@
+import React, { ComponentPropsWithRef, ReactNode, Ref, SyntheticEvent } from 'react';
+import { BooleanProp, HeadingLevel } from '../../../../models';
+import './card-accordion.scss';
+/**
+ * The available variants of the accordion. Those variants will define the style of the accordion.
+ */
+export type CardAccordionVariant = 'white' | 'primary-light' | 'primary-dark';
+export interface CardAccordionElement extends HTMLDivElement {
+    /**
+     *  Expand the accordion.
+     */
+    expand: () => void;
+    /**
+     *  Collapse the accordion.
+     */
+    collapse: () => void;
+    /**
+     *  Toggles the content of the accordion.
+     */
+    toggle: () => void;
+    /**
+     *  Current value of the expanded state of the accordion.
+     */
+    isExpanded: boolean;
+}
+export interface CardAccordionProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * The variant of the accordion. Those variants will define the style of the accordion.
+     */
+    variant?: CardAccordionVariant;
+    /**
+     * Accordion header title.
+     */
+    headingTitle?: ReactNode;
+    /**
+     * Accordion heading level title.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Accordion content.
+     */
+    children?: ReactNode;
+    /**
+     * Defines if an icon is shown previously of title.
+     */
+    hasIcon?: 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;
+    /**
+     * Event function called whenever the accordion expands.
+     */
+    onExpanded?: (evt: SyntheticEvent<CardAccordionElement | undefined>) => void | undefined;
+    /**
+     * Event function called whenever the accordion collapses.
+     */
+    onCollapsed?: (evt: SyntheticEvent<CardAccordionElement | undefined>) => void | undefined;
+    /**
+     * Event function called whenever the accordion expands or collapses.
+     */
+    onChange?: (evt: SyntheticEvent<CardAccordionElement | undefined>) => void | undefined;
+    /**
+     * Initial value for the expanded value.
+     */
+    defaultExpanded?: BooleanProp;
+    /**
+     * Value for the expanded value.
+     */
+    expanded?: BooleanProp;
+    /**
+     * React ref object to the accordion.
+     */
+    ref?: Ref<CardAccordionElement>;
+}
+export declare const CardAccordion: React.ForwardRefExoticComponent<Omit<CardAccordionProps, "ref"> & React.RefAttributes<CardAccordionElement>>;

package/artifacts/dist/types/components/cards/card-expandable/card-accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { CardAccordion } from './card-accordion';
+export type { CardAccordionProps, CardAccordionElement } from './card-accordion';

package/artifacts/dist/types/components/cards/card-expandable/card-expandable.d.ts

@@ -1,23 +1,82 @@
-import { AccordionProps } from '../../../components/accordion';
 import { BooleanProp, HeadingLevel } from '../../../models';
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction, ReactNode, Ref, SyntheticEvent } from 'react';
 import './card-expandable.scss';
+import { CardAccordionElement } from './card-accordion';
+/**
+ * The available variants of the card. Those variants will define the style of the card.
+ */
+export type CardExpandableVariant = 'white' | 'primary-light' | 'primary-dark';
+export interface CardExpandableElement extends CardAccordionElement {
+}
 export interface CardExpandableProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * The variant of the card. Those variants will define the style of the card.
+     */
+    variant?: CardExpandableVariant;
     /**
      * Heading level to apply in the card.
      */
-    headingLevel: HeadingLevel;
+    cardHeadingLevel: HeadingLevel;
     /**
      * Card title.
      */
-    title?: ReactNode;
+    cardTitle: ReactNode;
+    /**
+     * Card subtitle.
+     */
+    cardSubtitle?: ReactNode;
     /**
      * Card icon.
      */
     showBookmarkIcon?: BooleanProp;
+    /**
+     * Defines if an icon is shown previously of title.
+     */
+    hasIcon?: 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;
     /**
      * Children content.
      */
-    children: ReactElement<AccordionProps>;
+    children: ReactNode;
+    /**
+     * CardAccordion heading level title.
+     */
+    accordionHeadingLevel: HeadingLevel;
+    /**
+     * CardAccordion header title.
+     */
+    accordionHeadingTitle: ReactNode;
+    /**
+     * Value for the expanded value.
+     */
+    expanded?: BooleanProp;
+    /**
+     * Initial value for the expanded value.
+     */
+    defaultExpanded?: BooleanProp;
+    /**
+     * Event function called whenever the accordion expands.
+     */
+    onExpanded?: (evt: SyntheticEvent<CardAccordionElement | undefined>) => void | undefined;
+    /**
+     * Event function called whenever the accordion collapses.
+     */
+    onCollapsed?: (evt: SyntheticEvent<CardAccordionElement | undefined>) => void | undefined;
+    /**
+     * Event function called whenever the accordion expands or collapses.
+     */
+    onChange?: (evt: SyntheticEvent<CardAccordionElement | undefined>) => void | undefined;
+    /**
+     * React ref object to the accordion.
+     */
+    ref?: Ref<CardAccordionElement>;
 }
-export declare const CardExpandable: FC<CardExpandableProps>;
+export declare const InnerComponent: ForwardRefRenderFunction<CardExpandableElement, CardExpandableProps>;
+export declare const CardExpandable: React.ForwardRefExoticComponent<Omit<CardExpandableProps, "ref"> & React.RefAttributes<CardExpandableElement>>;

package/artifacts/dist/types/components/cards/card-expandable/index.d.ts

@@ -1,2 +1,2 @@
 export { CardExpandable } from './card-expandable';
-export type { CardExpandableProps } from './card-expandable';
+export type { CardExpandableProps, CardExpandableElement } from './card-expandable';

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

@@ -53,6 +53,10 @@ export interface InputSelectProps extends Omit<ComponentPropsWithRef<'select'>,
      * Name of the icon leading icon to be displayed.
      */
     icon?: string;
+    /**
+     * Pill label to be draw if specified.
+     */
+    pillLabel?: ReactNode;
     /**
      * Alternative text for the dropdown that will be rendered.
      */

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

@@ -2,6 +2,10 @@ import React, { ComponentPropsWithRef, ReactNode } from 'react';
 import './input-time.scss';
 import { BooleanProp, FeedbackState } from '../../models';
 export interface InputTimeProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * The flag to set if the label and feedback text is in dark mode or light mode.
+     */
+    darkMode?: BooleanProp;
     /**
      * Input label text.
      */

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

@@ -1,8 +1,7 @@
+import { TabBodyProps, TabHeaderProps } from '../../../components/tabs';
+import { BooleanProp } from '../../../models';
 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ama-pt/agora-design-system",
   "description": "Ágora Design system",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "main": "artifacts/dist/index.mjs",
   "module": "artifacts/dist/index.umd.js",
   "files": [
@@ -9,15 +9,16 @@
   ],
   "types": "artifacts/dist/types/index.d.ts",
   "scripts": {
-    "start": "yarn run storybook",
-    "dev": "yarn run storybook",
+    "start": "npm run storybook",
+    "dev": "npm run storybook",
     "storybook": "gulp && storybook dev -p 6006",
     "build-storybook": "gulp && storybook build -o ./artifacts/storybook-static",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --fix --ext .ts,.tsx",
     "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,scss,mdx,md,json}\" --config \"./.prettierrc\"",
-    "playwright-tests": "yarn playwright install && yarn run playwright test",
-    "jest-tests": "yarn run jest --coverage",
+    "playwright-tests": "npm install playwright && playwright install && playwright test",
+    "jest-tests": "jest --coverage",
+    "jest-tests-no-coverage": "jest --coverage=false",
     "build": "vite build && tailwindcss -i ./src/styles/globals.css -o ./artifacts/dist/tailwind.css && gulp bundle && tsc --project tsconfig-build.json && tsc-alias -p tsconfig-build.json"
   },
   "dependencies": {
@@ -85,7 +86,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-preview": "^0.3.1",
     "jest-sonar-reporter": "^2.0.0",
-    "playwright": "^1.40.0",
+    "playwright": "^1.51.1",
     "postcss": "^8.4.35",
     "prettier": "^3.0.2",
     "react": "^18.2.0",