design-react-kit 3.3.1 → 4.0.1

package/README.EN.md

@@ -1,5 +1,6 @@
 # Design React Kit
 
+![CircleCI](https://img.shields.io/circleci/build/github/italia/design-react-kit)
 [![Join channel #design-devel](https://img.shields.io/badge/Slack%20channel-%23design--devel-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/)
 [![Get an invitation for Slack](https://slack.developers.italia.it/badge.svg)](https://slack.developers.italia.it/)
 
@@ -11,7 +12,7 @@
 
 Components are showcased with [Storybook](https://storybook.js.org/).
 
-Public version of Storybook (built from `master` branch) is available here: https://italia.github.io/design-react-kit.
+Public version of Storybook is available [here](https://italia.github.io/design-react-kit) for the latest stable release, while [here](https://design-react-kit.vercel.app/) for the current development version built from `master` branch.
 
 ## Table of contents
 
@@ -88,9 +89,9 @@ const WebFont = require('webfontloader')
 WebFont.load({
     custom: {
         families: [
-        'Titillium Web:300,400,600,700:latin-ext',
-        'Lora:400,700:latin-ext',
-        'Roboto Mono:400,700:latin-ext'
+          'Titillium Web:300,400,600,700:latin-ext',
+          'Lora:400,700:latin-ext',
+          'Roboto Mono:400,700:latin-ext'
         ]
     }
 })
@@ -126,27 +127,48 @@ Storybook has been enriched with some `addons` that make it more talented. Check
 ## How to create new components
 
 This section explains how to create new components in the repository.
-All components reside in the `components` directory: each component is a folder with all that is needed to make it work. *Storybook* stories are instead under `stories`.
+All components reside in the `src` directory: each component is a folder with all that is needed to make it work. 
+*Storybook* stories are instead under `stories`.  
+Unit tests are under the `test` folder.
 
-i.e. the `Button` component is shown below the `src/components/Button` path and its structure is as follows:
+i.e. the `Button` component is shown below the `src/Button` path and its structure is as follows:
 
 ```
 src
-    └── components
-        └── Button
-            ├── Button.js
+    └── Button
+        ├── Button.tsx
 stories
     └── Button
-        ├── Button.stories.js
+        ├── Button.stories.mdx
+        ├── Button.stories.tsx
+test
+    ├── Button.test.tsx
 ```
 
 Some basic rules for structuring the components:
 
-* JS file component files use JSX syntax.
-* The `.stories.js` files only restore the relative component only.
+* TSX file component files use JSX syntax.
+* The `.stories.tsx` files only contains examples relative to component.
+* The `.stories.mdx` files only contains documentation relative to component.
+* The `.test.tsx` files only contains tests relative to component.
 
 Once you have created a new component, with its history, starting *Storybook* will be able to check that everything works as it should.
 
+### How to contribute
+
+To submit new content (feature or bug fixes) is required to fork the repository, starting from `master` create a new branch for the new feature: once completed the development (with tests when possible), create a PR to the original repository.
+
+#### Snapshot tests
+
+The testing system has been provided with a snapshot check on existing stories: this means that each story content is copied into a special file used as reference to check changes in the future. This might fail some test checks on the PR in case of new or changed stories.  
+In such case it is possible to update the snapshot file with the following command:
+
+```
+yarn test -u
+```
+
+At this point create a new commit and update the PR. Make sure to check the new snapshot content whether it is in line with the changes made before pushing.
+
 ## Publishing
 
 A command is available to reach a static version of the Storybook catalog as it can be deployed without using a webserver.
@@ -185,8 +207,4 @@ The same list is also available in the `package.json` file. Unfortunately, it's
 
 ## TypeScript typing definitions 
 
-To generate Typescript typing definitions file:
-
-```sh
-$ yarn typescript:dts
-```
+The library has been rewritten in Typescript and types are exported in the bundle.

package/README.md

@@ -1,4 +1,4 @@
-[![CircleCI](https://img.shields.io/circleci/project/github/RedSparr0w/node-csgo-parser.svg)](https://circleci.com/gh/italia/design-react-kit)
+![CircleCI](https://img.shields.io/circleci/build/github/italia/design-react-kit)
 [![Partecipa sul canale #design-devel](https://img.shields.io/badge/Slack%20channel-%23design--devel-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/)
 [![Ricevi un invito a Slack](https://slack.developers.italia.it/badge.svg)](https://slack.developers.italia.it/)
 
@@ -10,7 +10,7 @@
 
 Per navigare la libreria e visualizzare i componenti, è stato utilizzato [Storybook](https://storybook.js.org/).
 
-La versione pubblica dello Storybook (relativa al branch `master`) è disponibile [qui](https://italia.github.io/design-react-kit).
+La versione pubblica dello Storybook è disponibile [qui](https://italia.github.io/design-react-kit) per l'ultima release stabile pubblicata, mentre [qui](https://design-react-kit.vercel.app/) per la versione  di sviluppo relativa al branch `master`.
 
 ## Indice
 
@@ -87,9 +87,9 @@ const WebFont = require('webfontloader')
 WebFont.load({
     custom: {
         families: [
-        'Titillium Web:300,400,600,700:latin-ext',
-        'Lora:400,700:latin-ext',
-        'Roboto Mono:400,700:latin-ext'
+          'Titillium Web:300,400,600,700:latin-ext',
+          'Lora:400,700:latin-ext',
+          'Roboto Mono:400,700:latin-ext'
         ]
     }
 })
@@ -123,27 +123,47 @@ Storybook è stato arricchito con alcuni `addons` che lo rendono più parlante.
 ## Come creare nuovi componenti
 
 Questa sezione guiderà alla creazione di nuovi componenti nel repository.
-Tutti i componenti risiedono nella folder `components`: ogni componente possiede una sua folder con tutto ciò che è necessario per farlo funzionare.
+Tutti i componenti risiedono nella cartella `src`: ogni componente possiede una sua cartella con tutto ciò che è necessario per farlo funzionare.
 Le storie `Storybook` invece sono sotto `stories`. 
-Il componente `Button` ad esempio è presente sotto il path `src/components/Button` e la sua struttura è la seguente:
+I test unitari risiedono nella cartella `test`.
+Il componente `Button` ad esempio è presente sotto il percorso `src/Button` e la sua struttura è la seguente:
 
 ```
 src
-    └── components
-        └── Button
-            ├── Button.js
+    └── Button
+        ├── Button.tsx
 stories
     └── Button
-        ├── Button.stories.js
+        ├── Button.stories.mdx
+        ├── Button.stories.tsx
+test
+    ├── Button.test.tsx
 ```
 
 Alcune regole di base per strutturare i componenti:
 
-* I file JS file del componente utilizza la sintassi JSX.
-* I file `.stories.js` dovrebbero contenere solo quanto relativo al componente stesso.
+* I file TSX file del componente utilizza la sintassi JSX.
+* I file `.stories.tsx` dovrebbero contenere solo quanto relativo al componente stesso.
+* I file `.stories.mdx` dovrebbero contenere solo documentazione relativa al componente stesso
+* I file `.test.tsx` dovrebbero contenere solo test relativi al componente stesso.
 
 Una volta creato un nuovo componente, con la sua story, avviando Storybook sarà  possibile controllare che tutto funzioni come dovrebbe.
 
+### Come contribuire
+
+Per inviare nuovi contenuti o bug fix è necessario fare un fork del repository, quindi partire dal branch `master` per un nuovo branch contenente la funzionalità: una volta completa la funzionalità (con relativi test ove possibile), sarà necessario fare una PR sul repository principale.
+
+#### Snapshot tests
+
+Il sistema di testing prevede un controllo delle storie presenti, mediante una tecnica chiamata "snapshot" testing: il contenuto della storia Storybook verrà copiato in un file speciale e preservato per notificare eventuali cambiamenti in futuro. Questo fa si che l'aggiunta di nuove storie potrebbe risultare in un fallimento del task "test" in una PR.
+Qualora fosse stata aggiunta una nuova storia o modificata una già presente, sarà necessario aggiornare il file di snapshot come segue:
+
+```
+yarn test -u
+```
+
+A questo punto creare un nuovo commit ed aggiornare la PR con il file di snapshot aggiornato. Controllare che le modifiche apportate siano corrette prima di aggiornare la PR.
+
 ## Publishing
 
 E' disponibile un comando per generare una versione statica del catalogo Storybook così che possa essere deployato senza utilizzo di un webserver.
@@ -181,8 +201,4 @@ La lista è anche disponibile nel `package.json`. Purtroppo, non è ancora possi
 
 ## TypeScript typings 
 
-Per generare il file delle definizioni per i _typing_ Typescript, è sufficiente lanciare il comando dedicato:
-
-```sh
-$ yarn typescript:dts
-```
+La libreria è stata portata a Typescript ed i tipi sono esportati con essa.

package/package.json

@@ -1,125 +1,157 @@
 {
-    "name": "design-react-kit",
-    "version": "3.3.1",
-    "description": "Componenti React per Bootstrap 4",
-    "author": "Presidenza del Consiglio dei Ministri",
-    "homepage": "https://github.com/italia/design-react-kit#README",
-    "license": "BSD-3-Clause",
-    "sideEffects": false,
-    "main": "dist/design-react-kit.js",
-    "module": "dist/design-react-kit.es.js",
-    "typings": "dist/design-react-kit.d.ts",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/italia/design-react-kit.git"
+  "name": "design-react-kit",
+  "description": "Componenti React per Bootstrap 4",
+  "keywords": [
+    "react",
+    "bootstrap",
+    "bootstrap-italia"
+  ],
+  "author": "Presidenza del Consiglio dei Ministri",
+  "contributors": [
+    "Gianluca Esposito",
+    "Matteo Manchi",
+    "Paolo Mariotti",
+    "Marco Liberati",
+    "Francesco Zaia",
+    "Sanyam Dogra",
+    "Silvio Relli"
+  ],
+  "bugs": {
+    "url": "https://github.com/italia/design-react-kit/issues"
+  },
+  "version": "4.0.1",
+  "license": "BSD-3",
+  "module": "dist/esm/index.js",
+  "main": "./src/index.tsx",
+  "typings": "dist/types/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "import": "./dist/esm/index.js",
+    "default": "./dist/esm/index.js"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/italia/design-react-kit.git"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "npm run storybook:serve",
+    "svg:import": "svgr -d src/Icon/assets node_modules/bootstrap-italia/src/svg && echo \"\" >> src/Icon/assets/index.tsx && npx eslint src/Icon/assets/index.tsx --fix",
+    "prebuild": "npm run svg:import",
+    "build": "tsdx build --format cjs,esm",
+    "test": "tsdx test --passWithNoTests --coverage",
+    "test:ci": "tsdx test --passWithNoTests --coverage --runInBand --ci",
+    "lint": "npx eslint src stories test --ext js,ts,tsx,jsx,mdx",
+    "prepare": "tsdx build --format cjs,esm && husky install",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "prestorybook": "npm run svg:import",
+    "storybook:serve": "start-storybook -p 9001 -c .storybook -s ./static",
+    "storybook:build": "npm run storybook:build:base --docs",
+    "storybook:build:base": "build-storybook -c .storybook -s ./static",
+    "storybook:deploy": "npx gh-pages -d storybook-static -m 'Update GitHub Pages [ci skip]'"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "bootstrap-italia": "1.4.3"
+  },
+  "size-limit": [
+    {
+      "path": "dist/cjs/index.js",
+      "limit": "200 KB"
     },
-    "contributors": [
-        "Gianluca Esposito",
-        "Matteo Manchi",
-        "Paolo Mariotti",
-        "Marco Liberati",
-        "Francesco Zaia",
-        "Sanyam Dogra",
-        "Silvio Relli"
-    ],
-    "bugs": {
-        "url": "https://github.com/italia/design-react-kit/issues"
+    {
+      "path": "dist/esm/index.js",
+      "limit": "200 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.13.15",
+    "@rollup/plugin-url": "^6.0.0",
+    "@size-limit/preset-small-lib": "^4.10.2",
+    "@skypack/package-check": "^0.2.2",
+    "@storybook/addon-a11y": "^6.3.9",
+    "@storybook/addon-essentials": "^6.3.9",
+    "@storybook/addon-links": "^6.3.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-storyshots": "^6.3.9",
+    "@storybook/addons": "^6.3.9",
+    "@storybook/react": "^6.3.9",
+    "@svgr/cli": "^5.5.0",
+    "@svgr/rollup": "^5.5.0",
+    "@svgr/webpack": "^5.5.0",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@types/is-number": "^7.0.1",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-select": "^4.0.15",
+    "@types/react-transition-group": "^4.4.1",
+    "autoprefixer": "^9.8.6",
+    "babel-loader": "^8.2.2",
+    "bootstrap-italia": "^1.4.3",
+    "circular-dependency-plugin": "^5.2.2",
+    "eslint-plugin-mdx": "^1.13.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "husky": "^7.0.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-transform-stub": "^2.0.0",
+    "postcss-flexbugs-fixes": "^4.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "size-limit": "^4.10.2",
+    "ts-jest": "^25.3.1",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.2.0",
+    "typeface-lora": "^1.1.13",
+    "typeface-roboto-mono": "^1.1.13",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "is-number": "^7.0.0",
+    "react-select": "^4.3.0",
+    "react-stickup": "^1.12.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.1",
+    "react-use-navscroll": "0.2.0",
+    "reactstrap": "^8.9.0",
+    "webfontloader": "^1.6.28"
+  },
+  "browserslist": [
+    "defaults",
+    "ie 11",
+    "not ie_mob 11",
+    "not op_mini all",
+    "edge >= 13",
+    "safari 11"
+  ],
+  "jest": {
+    "transform": {
+      ".(ts|tsx)$": "ts-jest",
+      ".(js|jsx)$": "./jest-transformer.js",
+      "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
     },
-    "devDependencies": {
-        "@babel/core": "^7.6.4",
-        "@babel/plugin-proposal-class-properties": "^7.5.5",
-        "@babel/plugin-proposal-export-default-from": "^7.5.2",
-        "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
-        "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-        "@babel/preset-env": "^7.6.3",
-        "@babel/preset-react": "^7.6.3",
-        "@sambego/storybook-state": "^1.3.3",
-        "@storybook/addon-a11y": "^5.3.21",
-        "@storybook/addon-actions": "^5.3.21",
-        "@storybook/addon-console": "^1.2.0",
-        "@storybook/addon-info": "^5.3.21",
-        "@storybook/addon-knobs": "^5.3.21",
-        "@storybook/addon-links": "^5.3.21",
-        "@storybook/addon-notes": "^5.3.21",
-        "@storybook/addon-storyshots": "^5.3.21",
-        "@storybook/addon-storysource": "^5.3.21",
-        "@storybook/addon-viewport": "^5.3.19",
-        "@storybook/addons": "^5.3.21",
-        "@storybook/react": "^5.3.21",
-        "@typescript-eslint/eslint-plugin": "^2.3.3",
-        "@typescript-eslint/parser": "^2.3.3",
-        "babel-eslint": "^10.0.3",
-        "babel-loader": "^8.0.6",
-        "bootstrap-italia": "1.4.1",
-        "classnames": "^2.2.6",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.3.0",
-        "eslint-config-standard": "^14.1.0",
-        "eslint-plugin-babel": "^5.3.0",
-        "eslint-plugin-import": "^2.18.2",
-        "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-node": "^10.0.0",
-        "eslint-plugin-prettier": "^3.1.1",
-        "eslint-plugin-promise": "^4.2.1",
-        "eslint-plugin-react": "^7.15.1",
-        "eslint-plugin-standard": "^4.0.1",
-        "glob": "^7.1.4",
-        "husky": "^3.0.9",
-        "react-scripts": "^3.1.2",
-        "react-test-renderer": "^16.10.1",
-        "react-to-typescript-definitions": "^2.0.0",
-        "rollup": "^1.26.0",
-        "rollup-plugin-babel": "^4.3.3",
-        "rollup-plugin-babel-minify": "^9.1.0",
-        "rollup-plugin-commonjs": "^10.1.0",
-        "rollup-plugin-node-resolve": "^5.2.0",
-        "rollup-plugin-replace": "^2.2.0",
-        "rollup-plugin-svg": "^2.0.0",
-        "run-script-os": "^1.0.7",
-        "typeface-lora": "^0.0.72",
-        "typeface-roboto-mono": "^0.0.75",
-        "typeface-titillium-web": "^0.0.72"
+    "moduleNameMapper": {
+      "^.+.(svg|png|jpg)$": "jest-transform-stub",
+      "^.+\\.css$": "identity-obj-proxy"
     },
-    "peerDependencies": {
-        "react": "^16.8.3",
-        "react-dom": "^16.8.3"
-    },
-    "scripts": {
-        "install-dependencies": "yarn install --peers",
-        "prebuild": "yarn install-dependencies",
-        "build": "rollup -c scripts/rollup.config.js",
-        "prestorybook": "yarn install-dependencies",
-        "storybook:build": "build-storybook -c .storybook -s ./static",
-        "storybook:serve": "start-storybook -p 9001 -c .storybook -s ./static",
-        "storybook:deploy": "npx gh-pages -d storybook-static -m 'Update GitHub Pages [ci skip]'",
-        "lint": "eslint src/ stories/",
-        "lint:fix": "eslint --fix src/",
-        "test": "export SKIP_PREFLIGHT_CHECK=true && react-scripts test --env=jsdom",
-        "test:ci": "CI=true react-scripts test --env=jsdom",
-        "start": "yarn run storybook:serve",
-        "typescript:dts": "node scripts/dts.js"
-    },
-    "husky": {
-        "hooks": {
-            "pre-push": "yarn run lint"
-        }
-    },
-    "dependencies": {
-        "prop-types": "^15.7.2",
-        "react-scrollspy": "^3.3.5",
-        "react-select": "^3.0.8",
-        "react-stickup": "^1.11.0",
-        "react-toastify": "^5.5.0",
-        "react-transition-group": "^2.3.1",
-        "reactstrap": "^8.0.0",
-        "webfontloader": "^1.6.28"
-    },
-    "browserslist": [
-        "defaults",
-        "ie 11",
-        "not ie_mob 11",
-        "not op_mini all",
-        "edge >= 13",
-        "safari 11"
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node",
+      "mdx"
     ]
-}
+  }
+}

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,30 @@
+import React, { ElementType, FC } from 'react';
+import classNames from 'classnames';
+
+export interface AccordionProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Utilizzare questo attributo per ottenere header con sfondo di colore primario quando questi è attivo o all’hover. */
+  background?: 'active' | 'hover';
+  /** Utilizzare questo attributo per mostrare, mediante un'icona a sinistra, lo stato di apertura */
+  iconLeft?: boolean;
+}
+
+export const Accordion: FC<AccordionProps> = ({
+  tag = 'div',
+  className,
+  background,
+  iconLeft = false,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('collapse-div', className, {
+    'collapse-background-active': background === 'active',
+    'collapse-background-hover': background === 'hover',
+    'collapse-left-icon': iconLeft
+  });
+
+  return <Tag {...attributes} className={classes} />;
+};

package/src/Accordion/AccordionBody.tsx

@@ -0,0 +1,127 @@
+import React, { Component, ElementType } from 'react';
+import classNames from 'classnames';
+import { Transition } from 'react-transition-group';
+
+import { Util } from 'reactstrap';
+import type { TransitionProps } from 'react-transition-group/Transition';
+
+const {
+  // @ts-ignore
+  TransitionTimeouts,
+  // @ts-ignore
+  TransitionPropTypeKeys,
+  // @ts-ignore
+  TransitionStatuses,
+  // @ts-ignore
+  pick,
+  // @ts-ignore
+  omit
+} = Util;
+
+export type AccordionBodyProps = Partial<TransitionProps> & {
+  tag?: ElementType;
+  className?: string;
+  active?: boolean;
+  onToggle?: () => void;
+};
+
+const transitionStatusToClassHash = {
+  [TransitionStatuses.ENTERING]: 'collapsing',
+  [TransitionStatuses.ENTERED]: 'collapse show',
+  [TransitionStatuses.EXITING]: 'collapsing',
+  [TransitionStatuses.EXITED]: 'collapse'
+};
+
+type TransitionStates = keyof typeof transitionStatusToClassHash;
+
+function getTransitionClass(status: TransitionStates) {
+  return transitionStatusToClassHash[status] || 'collapse';
+}
+
+function getHeight(node: HTMLElement) {
+  return node.scrollHeight;
+}
+
+export class AccordionBody extends Component<
+  AccordionBodyProps,
+  { height: null | number }
+> {
+  state = {
+    height: null
+  };
+
+  onEntering = (node: HTMLElement, isAppearing: boolean) => {
+    this.setState({ height: getHeight(node) });
+    this.props.onEntering?.(node, isAppearing);
+  };
+
+  onEntered = (node: HTMLElement, isAppearing: boolean) => {
+    this.setState({ height: null });
+    this.props.onEntered?.(node, isAppearing);
+  };
+
+  onExit = (node: HTMLElement) => {
+    this.setState({ height: getHeight(node) });
+    this.props.onExit?.(node);
+  };
+
+  onExiting = (node: HTMLElement) => {
+    // getting this variable triggers a reflow
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _unused = node.offsetHeight;
+    this.setState({ height: 0 });
+    this.props.onExiting?.(node);
+  };
+
+  onExited = (node: HTMLElement) => {
+    this.setState({ height: null });
+    this.props.onExited?.(node);
+  };
+
+  render() {
+    const {
+      className,
+      tag = 'div',
+      active = false,
+      children,
+      timeout = TransitionTimeouts.Collapse,
+      ...attributes
+    } = this.props;
+    const Tag = tag;
+    const { height } = this.state;
+
+    const transitionProps = pick(attributes, TransitionPropTypeKeys);
+    const childProps = omit(attributes, TransitionPropTypeKeys);
+
+    return (
+      <Transition
+        {...transitionProps}
+        timeout={timeout}
+        in={active}
+        onEntering={this.onEntering}
+        onEntered={this.onEntered}
+        onExit={this.onExit}
+        onExiting={this.onExiting}
+        onExited={this.onExited}
+      >
+        {(status: TransitionStates) => {
+          const transitionClass = getTransitionClass(status);
+          const classes = classNames(className, transitionClass);
+
+          const style = height == null ? null : { height };
+
+          return (
+            <Tag
+              className={classes}
+              style={{ ...childProps.style, ...style }}
+              {...childProps}
+            >
+              <div className='collapse-body'>{children}</div>
+            </Tag>
+          );
+        }}
+      </Transition>
+    );
+  }
+}

package/src/Accordion/AccordionHeader.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactNode, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AccordionHeaderProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AccordionHeader */
+  className?: string;
+  /** Utilizzare questo attributo per indicare se l'elemento è attivo o no */
+  active?: boolean;
+  /** Questa funzione verrà chiamata quando avviene un click sul componente AccordionHeader */
+  onToggle?: () => void;
+  /** Contenuto aggiuntivo all'interno del bottone dell'AccordionHeader */
+  append?: ReactNode;
+}
+
+export const AccordionHeader: FC<AccordionHeaderProps> = ({
+  className,
+  tag = 'button',
+  active = false,
+  append,
+  onToggle,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const toggleClasses = classNames(className, {
+    collapsed: active
+  });
+
+  return (
+    <div className='collapse-header'>
+      <Tag
+        data-toggle='collapse'
+        aria-expanded={active ? 'true' : 'false'}
+        className={toggleClasses}
+        onClick={onToggle}
+        {...attributes}
+      />
+      {append}
+    </div>
+  );
+};