design-react-kit 5.8.2 → 5.9.0

package/dist/types/Card/Card.d.ts

@@ -3,8 +3,6 @@ import { CSSModule } from 'reactstrap/types/lib/utils';
 export interface CardProps extends HTMLAttributes<HTMLElement> {
     /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
     tag?: ElementType;
-    /** Utilizzarlo quando si passa `a` a `tag` per ottenere una special card cliccabile */
-    href?: string;
     /** Classi aggiuntive da usare per il componente Card */
     className?: string;
     /** Da utilizzare per impostare un riferimento all'elemento DOM */
@@ -13,12 +11,28 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
     cssModule?: CSSModule;
     /** Abilita la versione teaser della Card */
     teaser?: boolean;
-    /** Quando attivo distanzia la Card nella versione mobile */
-    spacing?: boolean;
-    /** Quando attivo rimuove il componente contenitore della carta. Utile per card multiple nello stesso contenitore */
-    noWrapper?: boolean;
-    /** Classi aggiuntive per l'elemento contenitore */
-    wrapperClassName?: string;
+    /** La card contiene un'immagine */
+    image?: boolean;
+    /** La card è di tipo banner */
+    banner?: boolean;
+    /** La card è di tipo profile */
+    profile?: boolean;
+    /** La card è inline */
+    inline?: boolean;
+    /** La card è inline-reverse */
+    inlineReverse?: boolean;
+    /** La card è inline-mini */
+    inlineMini?: boolean;
+    /** La card è arrotondata */
+    rounded?: boolean;
+    /** La card è full height */
+    fullHeight?: boolean;
+    /** La card ha un bordo */
+    border?: boolean;
+    /** La card ha un bordo di estremità */
+    borderTop?: boolean;
+    /** La card ha un bordo */
+    shadow?: 'sm' | 'lg' | 'normal' | null;
     testId?: string;
 }
 export declare const Card: FC<CardProps>;

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/italia/design-react-kit/issues"
   },
-  "version": "5.8.2",
+  "version": "5.9.0",
   "license": "BSD-3",
   "type": "module",
   "module": "./dist/index.js",
@@ -89,18 +89,14 @@
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@eslint/js": "^9.10.0",
-    "@storybook/addon-a11y": "^8.4.0",
-    "@storybook/addon-docs": "^8.4.0",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/addon-interactions": "^8.4.0",
-    "@storybook/addon-links": "^8.4.0",
-    "@storybook/addon-onboarding": "^8.4.0",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/react": "^8.4.0",
-    "@storybook/react-vite": "^8.4.0",
-    "@storybook/test": "^8.4.0",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^16",
+    "@testing-library/react": "^16.3.0",
     "@types/is-number": "^7.0.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.2",
@@ -108,12 +104,14 @@
     "@types/react-bootstrap": "^0.32.37",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
-    "bootstrap-italia": "^2.15.1",
+    "@types/uuid": "^10.0.0",
+    "bootstrap-italia": "^2.16.1",
     "browserslist-config-design-italia": "^1.0.0",
     "eslint": "^9.10.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-refresh": "^0.4.11",
+    "eslint-plugin-storybook": "^9.1.2",
     "globals": "^15.9.0",
     "husky": "^8.0.1",
     "jest": "^29.7.0",
@@ -124,8 +122,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-layout-masonry": "^1.2.0",
-    "sass": "^1.75.0",
-    "storybook": "^8.4.0",
+    "sass-embedded": "^1.90.0",
+    "storybook": "^9.1.2",
     "ts-jest": "^29.1.2",
     "tslib": "^2.4.0",
     "tsup": "^8.0.2",

package/src/Card/Card.tsx

@@ -1,13 +1,10 @@
 import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
 import classNames from 'classnames';
-import { Card as CardBase } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
 
 export interface CardProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
-  /** Utilizzarlo quando si passa `a` a `tag` per ottenere una special card cliccabile */
-  href?: string;
   /** Classi aggiuntive da usare per il componente Card */
   className?: string;
   /** Da utilizzare per impostare un riferimento all'elemento DOM */
@@ -16,48 +13,76 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
   /** Abilita la versione teaser della Card */
   teaser?: boolean;
-  /** Quando attivo distanzia la Card nella versione mobile */
-  spacing?: boolean;
-  /** Quando attivo rimuove il componente contenitore della carta. Utile per card multiple nello stesso contenitore */
-  noWrapper?: boolean;
-  /** Classi aggiuntive per l'elemento contenitore */
-  wrapperClassName?: string;
+  /** La card contiene un'immagine */
+  image?: boolean;
+  /** La card è di tipo banner */
+  banner?: boolean;
+  /** La card è di tipo profile */
+  profile?: boolean;
+  /** La card è inline */
+  inline?: boolean;
+  /** La card è inline-reverse */
+  inlineReverse?: boolean;
+  /** La card è inline-mini */
+  inlineMini?: boolean;
+  /** La card è arrotondata */
+  rounded?: boolean;
+  /** La card è full height */
+  fullHeight?: boolean;
+  /** La card ha un bordo */
+  border?: boolean;
+  /** La card ha un bordo di estremità */
+  borderTop?: boolean;
+  /** La card ha un bordo */
+  shadow?: 'sm' | 'lg' | 'normal' | null;
   testId?: string;
 }
 
 export const Card: FC<CardProps> = ({
-  tag = 'div',
-  href = undefined,
+  tag = 'article',
   teaser,
-  spacing,
-  noWrapper = false,
-  wrapperClassName,
+  image,
+  border=true,
+  borderTop,
+  inline,
+  inlineReverse,
+  inlineMini,
+  rounded,
+  fullHeight,
+  banner,
+  profile,
+  shadow=null,
   testId,
   ...attributes
 }) => {
-  const wrapperClasses = classNames('card-wrapper', wrapperClassName, {
-    'card-space': spacing,
-    'card-teaser-wrapper': teaser
-  });
-  const cardClasses = classNames(attributes.className, {
-    'card-teaser': teaser
+  const cardClasses = classNames('it-card', attributes.className, {
+    'card-teaser': teaser,
+    'it-card-image': image,
+    'border': border,
+    'it-card-inline': inline,
+    'it-card-inline-reverse': inlineReverse,
+    'it-card-inline-mini': inlineMini,
+    'it-card-height-full': fullHeight,
+    'rounded': rounded,
+    'card-teaser-wrapper': teaser,
+    'shadow': shadow === 'normal',
+    'shadow-lg': shadow === 'lg',
+    'shadow-sm': shadow === 'sm',
+    'it-card-banner': banner,
+    'it-card-profile': profile,
+    'it-border-top': borderTop,
+    'it-border-top-secondary': borderTop,
+
   });
 
-  if (noWrapper) {
-    return (
-      <CardBase
-        {...attributes}
-        className={cardClasses}
-        tag={tag}
-        href={tag === 'a' ? href : undefined}
-        data-testid={testId}
-      />
-    );
-  }
+  const T = tag;
 
   return (
-    <div className={wrapperClasses} data-testid={testId}>
-      <CardBase {...attributes} className={cardClasses} tag={tag} href={tag === 'a' ? href : undefined} />
-    </div>
+    <T
+      {...attributes}
+      className={cardClasses}
+      data-testid={testId}
+    />
   );
+
 };

package/src/Video/Video.tsx

@@ -113,7 +113,7 @@ export const Video: FC<VideoProps> = (props) => {
         instance.dispose();
       }
     };
-  }, [instance]);
+  }, []);
 
   const loadYouTubeVideo = (url: string) => {
     if (instance) {