design-react-kit 5.8.2 → 5.9.0

package/CHANGELOG.md

@@ -1,7 +1,22 @@
-## 5.8.2 (2025-06-28)
+# [5.9.0](https://github.com/italia/design-react-kit/compare/v5.8.3...v5.9.0) (2025-09-17)
+
+
+### Features
+
+* new cards ([bf62d1b](https://github.com/italia/design-react-kit/commit/bf62d1b5e1a6652b6d7c1dd7c36d294e4cbc6140))
+* new storybook ([925fe11](https://github.com/italia/design-react-kit/commit/925fe11a48e2593fb43d5364d5ac733806eb6d61))
+
+
+
+## [5.8.3](https://github.com/italia/design-react-kit/compare/v5.8.2...v5.8.3) (2025-07-15)
+
+* fix: initialize video player component only once ([1d95757](https://github.com/italia/design-react-kit/commit/1d95757))
+
+
+
+## [5.8.2](https://github.com/italia/design-react-kit/compare/v5.8.1...v5.8.2) (2025-06-28)
 
 * fix: upload image svg not found ([877db17](https://github.com/italia/design-react-kit/commit/877db17))
-* chore: update software version in publiccode ([a91398e](https://github.com/italia/design-react-kit/commit/a91398e))
 
 
 

package/README.EN.md

@@ -82,6 +82,26 @@ The `design-react-kit` module does not include the CSS and font files in the bun
 yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save
 ```
 
+#### Note for `vite` users
+
+If you are using `vite` as a bundler and want to customize the standard appearance of Bootstrap Italia, you need to
+add an alias in the `vite.config.js` file:
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@splidejs/splide/src/css/core/index":
+        "node_modules/@splidejs/splide/src/css/core/index.scss",
+    }
+  }
+});
+```
+
 ### Example
 
 Then, you just need to import CSS e font editing `./src/App.js` as shown:

package/README.md

@@ -106,6 +106,26 @@ export default App;
 Puoi consultare questo template web con StackBlitz:
 [Template web](https://stackblitz.com/edit/vitejs-vite-yy8bnk?file=src%2FApp.tsx)
 
+#### Nota per chi utilizza `vite`
+
+Se si utilizza `vite` come bundler e si vuole personalizzare l'aspetto standard di Bootstrap Italia, è necessario
+aggiungere un alias nel file `vite.config.js`:
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@splidejs/splide/src/css/core/index":
+        "node_modules/@splidejs/splide/src/css/core/index.scss",
+    }
+  }
+});
+```
+
 ### Caricamento Font
 
 Il tema Bootstrap Italia utilizza un set specifico di font typeface: `titillium-web`, `roboto-mono` e `lora`. Il caricamento di questi font è lasciato al browser ma, volendo può essere controllato tramite l'apposito componente `FontLoader`.

package/dist/Card/Card.cjs

@@ -1,2 +1,2 @@
-"use strict";var M=Object.create;var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(e,r)=>{for(var a in r)d(e,a,{get:r[a],enumerable:!0})},c=(e,r,a,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of T(r))!w.call(e,s)&&s!==a&&d(e,s,{get:()=>r[s],enumerable:!(n=N(r,s))||n.enumerable});return e};var f=(e,r,a)=>(a=e!=null?M(g(e)):{},c(r||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),H=e=>c(d({},"__esModule",{value:!0}),e);var S={};E(S,{Card:()=>L});module.exports=H(S);var t=f(require("react"),1),p=f(require("classnames"),1),i=require("reactstrap"),L=({tag:e="div",href:r=void 0,teaser:a,spacing:n,noWrapper:s=!1,wrapperClassName:C,testId:l,...o})=>{let u=(0,p.default)("card-wrapper",C,{"card-space":n,"card-teaser-wrapper":a}),m=(0,p.default)(o.className,{"card-teaser":a});return s?t.default.createElement(i.Card,{...o,className:m,tag:e,href:e==="a"?r:void 0,"data-testid":l}):t.default.createElement("div",{className:u,"data-testid":l},t.default.createElement(i.Card,{...o,className:m,tag:e,href:e==="a"?r:void 0}))};0&&(module.exports={Card});
+"use strict";var H=Object.create;var l=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(e,r)=>{for(var o in r)l(e,o,{get:r[o],enumerable:!0})},s=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of L(r))!R.call(e,a)&&a!==o&&l(e,a,{get:()=>r[a],enumerable:!(n=E(r,a))||n.enumerable});return e};var d=(e,r,o)=>(o=e!=null?H(N(e)):{},s(r||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),w=e=>s(l({},"__esModule",{value:!0}),e);var y={};S(y,{Card:()=>x});module.exports=w(y);var c=d(require("react"),1),m=d(require("classnames"),1),x=({tag:e="article",teaser:r,image:o,border:n=!0,borderTop:a,inline:b,inlineReverse:p,inlineMini:u,rounded:f,fullHeight:g,banner:C,profile:M,shadow:t=null,testId:T,...i})=>{let h=(0,m.default)("it-card",i.className,{"card-teaser":r,"it-card-image":o,border:n,"it-card-inline":b,"it-card-inline-reverse":p,"it-card-inline-mini":u,"it-card-height-full":g,rounded:f,"card-teaser-wrapper":r,shadow:t==="normal","shadow-lg":t==="lg","shadow-sm":t==="sm","it-card-banner":C,"it-card-profile":M,"it-border-top":a,"it-border-top-secondary":a});return c.default.createElement(e,{...i,className:h,"data-testid":T})};0&&(module.exports={Card});
 //# sourceMappingURL=Card.cjs.map

package/dist/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';\nimport classNames from 'classnames';\nimport { Card as CardBase } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Utilizzarlo quando si passa `a` a `tag` per ottenere una special card cliccabile */\n  href?: string;\n  /** Classi aggiuntive da usare per il componente Card */\n  className?: string;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref<HTMLElement>;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Abilita la versione teaser della Card */\n  teaser?: boolean;\n  /** Quando attivo distanzia la Card nella versione mobile */\n  spacing?: boolean;\n  /** Quando attivo rimuove il componente contenitore della carta. Utile per card multiple nello stesso contenitore */\n  noWrapper?: boolean;\n  /** Classi aggiuntive per l'elemento contenitore */\n  wrapperClassName?: string;\n  testId?: string;\n}\n\nexport const Card: FC<CardProps> = ({\n  tag = 'div',\n  href = undefined,\n  teaser,\n  spacing,\n  noWrapper = false,\n  wrapperClassName,\n  testId,\n  ...attributes\n}) => {\n  const wrapperClasses = classNames('card-wrapper', wrapperClassName, {\n    'card-space': spacing,\n    'card-teaser-wrapper': teaser\n  });\n  const cardClasses = classNames(attributes.className, {\n    'card-teaser': teaser\n  });\n\n  if (noWrapper) {\n    return (\n      <CardBase\n        {...attributes}\n        className={cardClasses}\n        tag={tag}\n        href={tag === 'a' ? href : undefined}\n        data-testid={testId}\n      />\n    );\n  }\n\n  return (\n    <div className={wrapperClasses} data-testid={testId}>\n      <CardBase {...attributes} className={cardClasses} tag={tag} href={tag === 'a' ? href : undefined} />\n    </div>\n  );\n};\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA4D,sBAC5DC,EAAuB,2BACvBC,EAAiC,sBAyBpBJ,EAAsB,CAAC,CAClC,IAAAK,EAAM,MACN,KAAAC,EAAO,OACP,OAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,GACZ,iBAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAiB,EAAAC,SAAW,eAAgBJ,EAAkB,CAClE,aAAcF,EACd,sBAAuBD,CACzB,CAAC,EACKQ,KAAc,EAAAD,SAAWF,EAAW,UAAW,CACnD,cAAeL,CACjB,CAAC,EAED,OAAIE,EAEA,EAAAO,QAAA,cAAC,EAAAC,KAAA,CACE,GAAGL,EACJ,UAAWG,EACX,IAAKV,EACL,KAAMA,IAAQ,IAAMC,EAAO,OAC3B,cAAaK,EACf,EAKF,EAAAK,QAAA,cAAC,OAAI,UAAWH,EAAgB,cAAaF,GAC3C,EAAAK,QAAA,cAAC,EAAAC,KAAA,CAAU,GAAGL,EAAY,UAAWG,EAAa,IAAKV,EAAK,KAAMA,IAAQ,IAAMC,EAAO,OAAW,CACpG,CAEJ","names":["Card_exports","__export","Card","__toCommonJS","import_react","import_classnames","import_reactstrap","tag","href","teaser","spacing","noWrapper","wrapperClassName","testId","attributes","wrapperClasses","classNames","cardClasses","React","CardBase"]}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';\nimport classNames from 'classnames';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Card */\n  className?: string;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref<HTMLElement>;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Abilita la versione teaser della Card */\n  teaser?: boolean;\n  /** La card contiene un'immagine */\n  image?: boolean;\n  /** La card è di tipo banner */\n  banner?: boolean;\n  /** La card è di tipo profile */\n  profile?: boolean;\n  /** La card è inline */\n  inline?: boolean;\n  /** La card è inline-reverse */\n  inlineReverse?: boolean;\n  /** La card è inline-mini */\n  inlineMini?: boolean;\n  /** La card è arrotondata */\n  rounded?: boolean;\n  /** La card è full height */\n  fullHeight?: boolean;\n  /** La card ha un bordo */\n  border?: boolean;\n  /** La card ha un bordo di estremità */\n  borderTop?: boolean;\n  /** La card ha un bordo */\n  shadow?: 'sm' | 'lg' | 'normal' | null;\n  testId?: string;\n}\n\nexport const Card: FC<CardProps> = ({\n  tag = 'article',\n  teaser,\n  image,\n  border=true,\n  borderTop,\n  inline,\n  inlineReverse,\n  inlineMini,\n  rounded,\n  fullHeight,\n  banner,\n  profile,\n  shadow=null,\n  testId,\n  ...attributes\n}) => {\n  const cardClasses = classNames('it-card', attributes.className, {\n    'card-teaser': teaser,\n    'it-card-image': image,\n    'border': border,\n    'it-card-inline': inline,\n    'it-card-inline-reverse': inlineReverse,\n    'it-card-inline-mini': inlineMini,\n    'it-card-height-full': fullHeight,\n    'rounded': rounded,\n    'card-teaser-wrapper': teaser,\n    'shadow': shadow === 'normal',\n    'shadow-lg': shadow === 'lg',\n    'shadow-sm': shadow === 'sm',\n    'it-card-banner': banner,\n    'it-card-profile': profile,\n    'it-border-top': borderTop,\n    'it-border-top-secondary': borderTop,\n\n  });\n\n  const T = tag;\n\n  return (\n    <T\n      {...attributes}\n      className={cardClasses}\n      data-testid={testId}\n    />\n  );\n\n};\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA4D,sBAC5DC,EAAuB,2BAuCVH,EAAsB,CAAC,CAClC,IAAAI,EAAM,UACN,OAAAC,EACA,MAAAC,EACA,OAAAC,EAAO,GACP,UAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EACA,QAAAC,EACA,WAAAC,EACA,OAAAC,EACA,QAAAC,EACA,OAAAC,EAAO,KACP,OAAAC,EACA,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAc,EAAAC,SAAW,UAAWF,EAAW,UAAW,CAC9D,cAAeb,EACf,gBAAiBC,EACjB,OAAUC,EACV,iBAAkBE,EAClB,yBAA0BC,EAC1B,sBAAuBC,EACvB,sBAAuBE,EACvB,QAAWD,EACX,sBAAuBP,EACvB,OAAUW,IAAW,SACrB,YAAaA,IAAW,KACxB,YAAaA,IAAW,KACxB,iBAAkBF,EAClB,kBAAmBC,EACnB,gBAAiBP,EACjB,0BAA2BA,CAE7B,CAAC,EAID,OACE,EAAAa,QAAA,cAHQjB,EAGP,CACE,GAAGc,EACJ,UAAWC,EACX,cAAaF,EACf,CAGJ","names":["Card_exports","__export","Card","__toCommonJS","import_react","import_classnames","tag","teaser","image","border","borderTop","inline","inlineReverse","inlineMini","rounded","fullHeight","banner","profile","shadow","testId","attributes","cardClasses","classNames","React"]}

package/dist/Card/Card.js

@@ -1,18 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Card as CardBase } from 'reactstrap';
-export const Card = ({ tag = 'div', href = undefined, teaser, spacing, noWrapper = false, wrapperClassName, testId, ...attributes }) => {
-    const wrapperClasses = classNames('card-wrapper', wrapperClassName, {
-        'card-space': spacing,
-        'card-teaser-wrapper': teaser
+export const Card = ({ tag = 'article', teaser, image, border = true, borderTop, inline, inlineReverse, inlineMini, rounded, fullHeight, banner, profile, shadow = null, testId, ...attributes }) => {
+    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,
     });
-    const cardClasses = classNames(attributes.className, {
-        'card-teaser': teaser
-    });
-    if (noWrapper) {
-        return (React.createElement(CardBase, { ...attributes, className: cardClasses, tag: tag, href: tag === 'a' ? href : undefined, "data-testid": testId }));
-    }
-    return (React.createElement("div", { className: wrapperClasses, "data-testid": testId },
-        React.createElement(CardBase, { ...attributes, className: cardClasses, tag: tag, href: tag === 'a' ? href : undefined })));
+    const T = tag;
+    return (React.createElement(T, { ...attributes, className: cardClasses, "data-testid": testId }));
 };
 //# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAyB9C,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,GAAG,GAAG,KAAK,EACX,IAAI,GAAG,SAAS,EAChB,MAAM,EACN,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,MAAM,EACN,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,EAAE,gBAAgB,EAAE;QAClE,YAAY,EAAE,OAAO;QACrB,qBAAqB,EAAE,MAAM;KAC9B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,CAAC,SAAS,EAAE;QACnD,aAAa,EAAE,MAAM;KACtB,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,oBAAC,QAAQ,OACH,UAAU,EACd,SAAS,EAAE,WAAW,EACtB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,iBACvB,MAAM,GACnB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,iBAAe,MAAM;QACjD,oBAAC,QAAQ,OAAK,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GAAI,CAChG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,UAAU,MAAM,YAAY,CAAC;AAuCpC,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,GAAG,GAAG,SAAS,EACf,MAAM,EACN,KAAK,EACL,MAAM,GAAC,IAAI,EACX,SAAS,EACT,MAAM,EACN,aAAa,EACb,UAAU,EACV,OAAO,EACP,UAAU,EACV,MAAM,EACN,OAAO,EACP,MAAM,GAAC,IAAI,EACX,MAAM,EACN,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;QAC9D,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE,KAAK;QACtB,QAAQ,EAAE,MAAM;QAChB,gBAAgB,EAAE,MAAM;QACxB,wBAAwB,EAAE,aAAa;QACvC,qBAAqB,EAAE,UAAU;QACjC,qBAAqB,EAAE,UAAU;QACjC,SAAS,EAAE,OAAO;QAClB,qBAAqB,EAAE,MAAM;QAC7B,QAAQ,EAAE,MAAM,KAAK,QAAQ;QAC7B,WAAW,EAAE,MAAM,KAAK,IAAI;QAC5B,WAAW,EAAE,MAAM,KAAK,IAAI;QAC5B,gBAAgB,EAAE,MAAM;QACxB,iBAAiB,EAAE,OAAO;QAC1B,eAAe,EAAE,SAAS;QAC1B,yBAAyB,EAAE,SAAS;KAErC,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,GAAG,CAAC;IAEd,OAAO,CACL,oBAAC,CAAC,OACI,UAAU,EACd,SAAS,EAAE,WAAW,iBACT,MAAM,GACnB,CACH,CAAC;AAEJ,CAAC,CAAC"}