Showing preview only (3,100K chars total). Download the full file or copy to clipboard to get everything.
Repository: italia/design-react-kit
Branch: main
Commit: f2e12ca53641
Files: 535
Total size: 2.9 MB
Directory structure:
gitextract_9pcbdlnw/
├── .editorconfig
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── apri-una-segnalazione.it.yaml
│ │ ├── config.yml
│ │ └── open-an-issue.en.yaml
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── ci.yml
│ ├── commit-lint.yml
│ ├── pc-check.yml
│ ├── pc-update.yml
│ ├── publiccode-yml-validation.yml
│ ├── publish-release.yml
│ └── update-docs.yml
├── .gitignore
├── .husky/
│ └── pre-commit
├── .npmignore
├── .nvmrc
├── .prettierrc
├── .storybook/
│ ├── main.ts
│ ├── manager-head.html
│ ├── manager.js
│ ├── preview.ts
│ ├── stories-helper.ts
│ └── theme.ts
├── AUTHORS
├── CHANGELOG.md
├── CODE_OF_CONDUCT.EN.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.EN.md
├── README.md
├── assets/
│ ├── css/
│ │ ├── accesibility.css
│ │ └── storybook-fixes.css
│ └── docs/
│ └── scss/
│ ├── _callouts.scss
│ ├── _colors.scss
│ ├── bi-fonts.scss
│ └── docs.scss
├── babel.config.json
├── codecov.yml
├── commitlint.config.cjs
├── eslint.config.js
├── jest-setup.js
├── jest.config.cjs
├── package.json
├── publiccode.yml
├── scripts/
│ ├── import_svgs.sh
│ ├── svgIndexTemplate.js
│ ├── svgTemplate.js
│ └── wait-confirm.js
├── src/
│ ├── Accordion/
│ │ ├── Accordion.tsx
│ │ ├── AccordionBody.tsx
│ │ ├── AccordionHeader.tsx
│ │ └── AccordionItem.tsx
│ ├── Alert/
│ │ └── Alert.tsx
│ ├── Autocomplete/
│ │ └── Autocomplete.tsx
│ ├── Avatar/
│ │ ├── AvatarContainer.tsx
│ │ ├── AvatarExtraText.tsx
│ │ ├── AvatarGroupContainer.tsx
│ │ ├── AvatarIcon.tsx
│ │ ├── AvatarPresence.tsx
│ │ ├── AvatarStatus.tsx
│ │ └── AvatarWrapper.tsx
│ ├── BackToTop/
│ │ └── BackToTop.tsx
│ ├── Badge/
│ │ └── Badge.tsx
│ ├── BottomNav/
│ │ ├── BottomNav.tsx
│ │ └── BottomNavItem.tsx
│ ├── Breadcrumb/
│ │ └── Breadcrumb.tsx
│ ├── Button/
│ │ └── Button.tsx
│ ├── Callout/
│ │ ├── Callout.tsx
│ │ ├── CalloutMoreFooter.tsx
│ │ ├── CalloutText.tsx
│ │ └── CalloutTitle.tsx
│ ├── Card/
│ │ ├── Card.tsx
│ │ ├── CardBody.tsx
│ │ ├── CardCategory.tsx
│ │ ├── CardFooterCTA.tsx
│ │ ├── CardReadMore.tsx
│ │ ├── CardSignature.tsx
│ │ ├── CardTag.tsx
│ │ ├── CardTagsHeader.tsx
│ │ ├── CardText.tsx
│ │ └── CardTitle.tsx
│ ├── Carousel/
│ │ ├── Carousel.tsx
│ │ └── CarouselSlide.tsx
│ ├── Chips/
│ │ ├── Chip.tsx
│ │ └── ChipLabel.tsx
│ ├── Collapse/
│ │ └── Collapse.tsx
│ ├── Dimmer/
│ │ ├── Dimmer.tsx
│ │ └── DimmerButtons.tsx
│ ├── Dropdown/
│ │ ├── Dropdown.tsx
│ │ ├── DropdownMenu.tsx
│ │ └── DropdownToggle.tsx
│ ├── FontLoader/
│ │ └── FontLoader.tsx
│ ├── Forward/
│ │ └── Forward.tsx
│ ├── GoBack/
│ │ └── GoBack.tsx
│ ├── Grid/
│ │ ├── GridItem.tsx
│ │ ├── GridItemText.tsx
│ │ ├── GridItemTextWrapper.tsx
│ │ ├── GridList.tsx
│ │ ├── GridRow.tsx
│ │ └── index.ts
│ ├── Header/
│ │ ├── Header.tsx
│ │ ├── HeaderBrand.tsx
│ │ ├── HeaderContent.tsx
│ │ ├── HeaderContext.tsx
│ │ ├── HeaderLinkZone.tsx
│ │ ├── HeaderRightZone.tsx
│ │ ├── HeaderSearch.tsx
│ │ ├── HeaderSocialsZone.tsx
│ │ ├── HeaderToggler.tsx
│ │ └── Headers.tsx
│ ├── Hero/
│ │ ├── Hero.tsx
│ │ ├── HeroBackground.tsx
│ │ ├── HeroBody.tsx
│ │ ├── HeroButton.tsx
│ │ ├── HeroCategory.tsx
│ │ ├── HeroTitle.tsx
│ │ └── index.ts
│ ├── Icon/
│ │ ├── EmptyIcon.tsx
│ │ ├── Icon.tsx
│ │ └── assets/
│ │ ├── ItAndroid.tsx
│ │ ├── ItAndroidSquare.tsx
│ │ ├── ItApple.tsx
│ │ ├── ItAppleSquare.tsx
│ │ ├── ItArrowDown.tsx
│ │ ├── ItArrowDownCircle.tsx
│ │ ├── ItArrowDownTriangle.tsx
│ │ ├── ItArrowLeft.tsx
│ │ ├── ItArrowLeftCircle.tsx
│ │ ├── ItArrowLeftTriangle.tsx
│ │ ├── ItArrowRight.tsx
│ │ ├── ItArrowRightCircle.tsx
│ │ ├── ItArrowRightTriangle.tsx
│ │ ├── ItArrowUp.tsx
│ │ ├── ItArrowUpCircle.tsx
│ │ ├── ItArrowUpTriangle.tsx
│ │ ├── ItBan.tsx
│ │ ├── ItBehance.tsx
│ │ ├── ItBluesky.tsx
│ │ ├── ItBookmark.tsx
│ │ ├── ItBox.tsx
│ │ ├── ItBurger.tsx
│ │ ├── ItCalendar.tsx
│ │ ├── ItCamera.tsx
│ │ ├── ItCar.tsx
│ │ ├── ItCard.tsx
│ │ ├── ItCart.tsx
│ │ ├── ItChartLine.tsx
│ │ ├── ItCheck.tsx
│ │ ├── ItCheckCircle.tsx
│ │ ├── ItChevronLeft.tsx
│ │ ├── ItChevronRight.tsx
│ │ ├── ItClip.tsx
│ │ ├── ItClock.tsx
│ │ ├── ItClose.tsx
│ │ ├── ItCloseBig.tsx
│ │ ├── ItCloseCircle.tsx
│ │ ├── ItCodeCircle.tsx
│ │ ├── ItCollapse.tsx
│ │ ├── ItComment.tsx
│ │ ├── ItCopy.tsx
│ │ ├── ItDelete.tsx
│ │ ├── ItDesignersItalia.tsx
│ │ ├── ItDownload.tsx
│ │ ├── ItError.tsx
│ │ ├── ItExchangeCircle.tsx
│ │ ├── ItExpand.tsx
│ │ ├── ItExternalLink.tsx
│ │ ├── ItFacebook.tsx
│ │ ├── ItFacebookSquare.tsx
│ │ ├── ItFigma.tsx
│ │ ├── ItFigmaSquare.tsx
│ │ ├── ItFile.tsx
│ │ ├── ItFileAudio.tsx
│ │ ├── ItFileCompressed.tsx
│ │ ├── ItFileCsv.tsx
│ │ ├── ItFileDocx.tsx
│ │ ├── ItFileImage.tsx
│ │ ├── ItFileJson.tsx
│ │ ├── ItFileOdp.tsx
│ │ ├── ItFileOds.tsx
│ │ ├── ItFileOdt.tsx
│ │ ├── ItFilePdf.tsx
│ │ ├── ItFilePdfExt.tsx
│ │ ├── ItFilePpt.tsx
│ │ ├── ItFileSheet.tsx
│ │ ├── ItFileSigned.tsx
│ │ ├── ItFileSlides.tsx
│ │ ├── ItFileTxt.tsx
│ │ ├── ItFileVideo.tsx
│ │ ├── ItFileXlsx.tsx
│ │ ├── ItFileXml.tsx
│ │ ├── ItFiles.tsx
│ │ ├── ItFlag.tsx
│ │ ├── ItFlickr.tsx
│ │ ├── ItFlickrSquare.tsx
│ │ ├── ItFolder.tsx
│ │ ├── ItFullscreen.tsx
│ │ ├── ItFunnel.tsx
│ │ ├── ItGithub.tsx
│ │ ├── ItGoogle.tsx
│ │ ├── ItHearing.tsx
│ │ ├── ItHelp.tsx
│ │ ├── ItHelpCircle.tsx
│ │ ├── ItHorn.tsx
│ │ ├── ItInbox.tsx
│ │ ├── ItInfoCircle.tsx
│ │ ├── ItInstagram.tsx
│ │ ├── ItKey.tsx
│ │ ├── ItLessCircle.tsx
│ │ ├── ItLink.tsx
│ │ ├── ItLinkedin.tsx
│ │ ├── ItLinkedinSquare.tsx
│ │ ├── ItList.tsx
│ │ ├── ItLock.tsx
│ │ ├── ItLocked.tsx
│ │ ├── ItLogout.tsx
│ │ ├── ItMail.tsx
│ │ ├── ItMailOpen.tsx
│ │ ├── ItMapMarker.tsx
│ │ ├── ItMapMarkerCircle.tsx
│ │ ├── ItMapMarkerMinus.tsx
│ │ ├── ItMapMarkerPlus.tsx
│ │ ├── ItMastodon.tsx
│ │ ├── ItMastodonSquare.tsx
│ │ ├── ItMaximize.tsx
│ │ ├── ItMaximizeAlt.tsx
│ │ ├── ItMedium.tsx
│ │ ├── ItMediumSquare.tsx
│ │ ├── ItMinimize.tsx
│ │ ├── ItMinus.tsx
│ │ ├── ItMinusCircle.tsx
│ │ ├── ItMoodle.tsx
│ │ ├── ItMoodleSquare.tsx
│ │ ├── ItMoreActions.tsx
│ │ ├── ItMoreItems.tsx
│ │ ├── ItNote.tsx
│ │ ├── ItOpenSource.tsx
│ │ ├── ItPa.tsx
│ │ ├── ItPasswordInvisible.tsx
│ │ ├── ItPasswordVisible.tsx
│ │ ├── ItPencil.tsx
│ │ ├── ItPiattaforme.tsx
│ │ ├── ItPin.tsx
│ │ ├── ItPinterest.tsx
│ │ ├── ItPinterestSquare.tsx
│ │ ├── ItPlug.tsx
│ │ ├── ItPlus.tsx
│ │ ├── ItPlusCircle.tsx
│ │ ├── ItPresentation.tsx
│ │ ├── ItPrint.tsx
│ │ ├── ItQuora.tsx
│ │ ├── ItQuoraSquare.tsx
│ │ ├── ItReddit.tsx
│ │ ├── ItRedditSquare.tsx
│ │ ├── ItRefresh.tsx
│ │ ├── ItRestore.tsx
│ │ ├── ItRss.tsx
│ │ ├── ItRssSquare.tsx
│ │ ├── ItSearch.tsx
│ │ ├── ItSettings.tsx
│ │ ├── ItShare.tsx
│ │ ├── ItSign.tsx
│ │ ├── ItSlack.tsx
│ │ ├── ItSlackSquare.tsx
│ │ ├── ItSnapchat.tsx
│ │ ├── ItSnapchatSquare.tsx
│ │ ├── ItSoftware.tsx
│ │ ├── ItSpotify.tsx
│ │ ├── ItStackexchange.tsx
│ │ ├── ItStackexchangeSquare.tsx
│ │ ├── ItStackoverflow.tsx
│ │ ├── ItStackoverflowSquare.tsx
│ │ ├── ItStarFull.tsx
│ │ ├── ItStarOutline.tsx
│ │ ├── ItTeamDigitale.tsx
│ │ ├── ItTelegram.tsx
│ │ ├── ItTelephone.tsx
│ │ ├── ItThreads.tsx
│ │ ├── ItThreadsSquare.tsx
│ │ ├── ItTiktok.tsx
│ │ ├── ItTiktokSquare.tsx
│ │ ├── ItTool.tsx
│ │ ├── ItTwitter.tsx
│ │ ├── ItTwitterSquare.tsx
│ │ ├── ItUnlocked.tsx
│ │ ├── ItUpload.tsx
│ │ ├── ItUser.tsx
│ │ ├── ItVideo.tsx
│ │ ├── ItVimeo.tsx
│ │ ├── ItVimeoSquare.tsx
│ │ ├── ItWarning.tsx
│ │ ├── ItWarningCircle.tsx
│ │ ├── ItWhatsapp.tsx
│ │ ├── ItWhatsappSquare.tsx
│ │ ├── ItWifi.tsx
│ │ ├── ItYoutube.tsx
│ │ ├── ItZoomIn.tsx
│ │ ├── ItZoomOut.tsx
│ │ └── index.ts
│ ├── Input/
│ │ ├── Input.tsx
│ │ ├── InputContainer.tsx
│ │ ├── TextArea.tsx
│ │ └── utils.tsx
│ ├── LinkList/
│ │ ├── LinkList.tsx
│ │ └── LinkListItem.tsx
│ ├── List/
│ │ ├── List.tsx
│ │ └── ListItem.tsx
│ ├── Megamenu/
│ │ ├── MegamenuFooter.tsx
│ │ ├── MegamenuHighlightColumn.tsx
│ │ └── MegamenuItem.tsx
│ ├── Modal/
│ │ ├── Modal.tsx
│ │ ├── ModalBody.tsx
│ │ ├── ModalFooter.tsx
│ │ └── ModalHeader.tsx
│ ├── Nav/
│ │ └── Nav.tsx
│ ├── NavScroll/
│ │ ├── debounce.ts
│ │ ├── index.ts
│ │ ├── types.ts
│ │ ├── useNavScroll.ts
│ │ └── useSizeDetector.ts
│ ├── Notification/
│ │ ├── Notification.tsx
│ │ ├── NotificationContent.tsx
│ │ ├── NotificationManager.tsx
│ │ ├── core.tsx
│ │ ├── index.ts
│ │ ├── types.ts
│ │ └── usePosition.tsx
│ ├── Pager/
│ │ └── Pager.tsx
│ ├── Progress/
│ │ └── Progress.tsx
│ ├── Rating/
│ │ └── Rating.tsx
│ ├── ResponsiveImage/
│ │ └── ResponsiveImage.tsx
│ ├── Section/
│ │ └── Section.tsx
│ ├── Select/
│ │ └── Select.tsx
│ ├── Sidebar/
│ │ └── Sidebar.tsx
│ ├── Skiplink/
│ │ ├── Skiplink.tsx
│ │ └── SkiplinkItem.tsx
│ ├── Spinner/
│ │ └── Spinner.tsx
│ ├── Stepper/
│ │ ├── StepperContainer.tsx
│ │ ├── StepperContent.tsx
│ │ ├── StepperDots.tsx
│ │ ├── StepperHeader.tsx
│ │ ├── StepperHeaderElement.tsx
│ │ └── StepperNav.tsx
│ ├── Tab/
│ │ ├── TabNav.tsx
│ │ ├── TabNavItem.tsx
│ │ ├── TabNavLink.tsx
│ │ └── TabPanel.tsx
│ ├── ThumbNav/
│ │ ├── ThumbNav.tsx
│ │ └── ThumbNavItem.tsx
│ ├── Timeline/
│ │ ├── TimelinePin.tsx
│ │ └── TimelineWrapper.tsx
│ ├── Toggle/
│ │ └── Toggle.tsx
│ ├── Toolbar/
│ │ ├── Toolbar.tsx
│ │ ├── ToolbarDividerItem.tsx
│ │ └── ToolbarItem.tsx
│ ├── Transfer/
│ │ ├── BacktransferButton.tsx
│ │ ├── Item.tsx
│ │ ├── ResetButton.tsx
│ │ ├── SelectAllCheckbox.tsx
│ │ ├── Source.tsx
│ │ ├── Target.tsx
│ │ ├── Transfer.tsx
│ │ ├── TransferButton.tsx
│ │ └── useTransferContext.tsx
│ ├── Upload/
│ │ ├── Upload.tsx
│ │ ├── UploadDragNdrop.tsx
│ │ ├── UploadList.tsx
│ │ ├── UploadListItem.tsx
│ │ └── useUploadContext.ts
│ ├── Video/
│ │ └── Video.tsx
│ ├── index.ts
│ ├── track-focus.js
│ ├── transitions.ts
│ ├── types/
│ │ └── svg.d.ts
│ └── utils.tsx
├── static/
│ └── favicons/
│ ├── browserconfig.xml
│ └── manifest.webmanifest
├── stories/
│ ├── Components/
│ │ ├── Accordion.stories.tsx
│ │ ├── Alert.stories.tsx
│ │ ├── Avatar/
│ │ │ ├── Avatar.stories.tsx
│ │ │ ├── AvatarBehaviour.stories.tsx
│ │ │ ├── AvatarGroupsList.stories.tsx
│ │ │ └── AvatarGroupsOverlapping.stories.tsx
│ │ ├── BackToTop.stories.tsx
│ │ ├── Badge.stories.tsx
│ │ ├── BottomNav.stories.tsx
│ │ ├── Breadcrumb.stories.tsx
│ │ ├── Button.stories.tsx
│ │ ├── Callout.stories.tsx
│ │ ├── Card.stories.tsx
│ │ ├── Carousel.stories.tsx
│ │ ├── Chips.stories.tsx
│ │ ├── Color.stories.tsx
│ │ ├── ColorCustom.stories.tsx
│ │ ├── Dimmer.stories.tsx
│ │ ├── Dropdown/
│ │ │ ├── Dropdown.stories.tsx
│ │ │ └── DropdownMenu.stories.tsx
│ │ ├── Footer.stories.tsx
│ │ ├── Form/
│ │ │ ├── Checkbox.stories.tsx
│ │ │ ├── FormValidation.stories.tsx
│ │ │ ├── Input.stories.tsx
│ │ │ ├── InputNumerico.stories.tsx
│ │ │ ├── Introduzione.stories.tsx
│ │ │ ├── Radio.stories.tsx
│ │ │ ├── Select.stories.tsx
│ │ │ └── Toggles.stories.tsx
│ │ ├── Forward.stories.tsx
│ │ ├── GoBack.stories.tsx
│ │ ├── Griglie.stories.tsx
│ │ ├── Header/
│ │ │ ├── CenterHeader.stories.tsx
│ │ │ ├── CompleteHeader.stories.tsx
│ │ │ ├── NavHeader.stories.tsx
│ │ │ └── SlimHeader.stories.tsx
│ │ ├── Hero.stories.tsx
│ │ ├── Icon.stories.tsx
│ │ ├── ImagesList.stories.tsx
│ │ ├── List/
│ │ │ ├── LinkList.stories.tsx
│ │ │ └── List.stories.tsx
│ │ ├── Megamenu.stories.tsx
│ │ ├── Modal.stories.tsx
│ │ ├── NavScroll/
│ │ │ ├── NavScroll.stories.tsx
│ │ │ └── utils.ts
│ │ ├── Notification.stories.tsx
│ │ ├── Pager.stories.tsx
│ │ ├── Popover.stories.tsx
│ │ ├── Progress.stories.tsx
│ │ ├── Rating.stories.tsx
│ │ ├── Section.stories.tsx
│ │ ├── Sidebar.stories.tsx
│ │ ├── Skiplinks.stories.tsx
│ │ ├── Spinner.stories.tsx
│ │ ├── Stepper/
│ │ │ ├── Stepper.Navigation.stories.tsx
│ │ │ ├── Stepper.NavigationDark.stories.tsx
│ │ │ └── Stepper.stories.tsx
│ │ ├── Tab.stories.tsx
│ │ ├── Tables.stories.tsx
│ │ ├── ThumbNav.stories.tsx
│ │ ├── Timeline.stories.tsx
│ │ ├── Toolbar.stories.tsx
│ │ ├── Tooltip.stories.tsx
│ │ ├── Transfer.stories.tsx
│ │ ├── Typography.stories.tsx
│ │ ├── Upload.stories.tsx
│ │ └── Video.stories.tsx
│ ├── Documentation/
│ │ ├── Accordion.mdx
│ │ ├── Alert.mdx
│ │ ├── Avatar.mdx
│ │ ├── BackToTop.mdx
│ │ ├── Badge.mdx
│ │ ├── BottomNav.mdx
│ │ ├── Breadcrumb.mdx
│ │ ├── Button.mdx
│ │ ├── Callout.mdx
│ │ ├── Card.mdx
│ │ ├── Carousel.mdx
│ │ ├── Chips.mdx
│ │ ├── Color.mdx
│ │ ├── ColorCustom.mdx
│ │ ├── Dimmer.mdx
│ │ ├── Dropdown.mdx
│ │ ├── Footer.mdx
│ │ ├── Form/
│ │ │ ├── Checkbox.mdx
│ │ │ ├── Input.mdx
│ │ │ ├── InputNumerico.mdx
│ │ │ ├── Introduzione.mdx
│ │ │ ├── Radio.mdx
│ │ │ ├── Select.mdx
│ │ │ ├── Toggles.mdx
│ │ │ └── Transfer.mdx
│ │ ├── Forward.mdx
│ │ ├── GoBack.mdx
│ │ ├── Griglie.mdx
│ │ ├── Headers.mdx
│ │ ├── Hero.mdx
│ │ ├── Icon.mdx
│ │ ├── ImagesList.mdx
│ │ ├── List.mdx
│ │ ├── Megamenu.mdx
│ │ ├── Modal.mdx
│ │ ├── NavScroll.mdx
│ │ ├── Notification.mdx
│ │ ├── Pager.mdx
│ │ ├── Popover.mdx
│ │ ├── Progress.mdx
│ │ ├── Rating.mdx
│ │ ├── Section.mdx
│ │ ├── Sidebar.mdx
│ │ ├── Skiplinks.mdx
│ │ ├── Stepper.mdx
│ │ ├── Tab.mdx
│ │ ├── Tables.mdx
│ │ ├── ThumbNav.mdx
│ │ ├── Timeline.mdx
│ │ ├── Toolbar.mdx
│ │ ├── Tooltip.mdx
│ │ ├── Typography.mdx
│ │ ├── Upload.mdx
│ │ └── Video.mdx
│ ├── Welcome.mdx
│ └── faq.mdx
├── test/
│ ├── Accordion.test.tsx
│ ├── BottomNavItem.test.tsx
│ ├── Breadcrumb.test.tsx
│ ├── Collapse.test.tsx
│ ├── Dimmer.test.tsx
│ ├── DimmerButtons.test.tsx
│ ├── Header.test.tsx
│ ├── Hero.test.tsx
│ ├── Icon.test.tsx
│ ├── Input.test.tsx
│ ├── List.test.tsx
│ ├── Megamenu.test.tsx
│ ├── NavScroll.test.tsx
│ ├── Notification.test.tsx
│ ├── Progress.test.tsx
│ ├── Rating.test.tsx
│ ├── Section.test.tsx
│ ├── StepperHeaderElement.test.tsx
│ ├── Storybook.test.tsx
│ ├── TextArea.test.tsx
│ ├── TimelinePin.test.tsx
│ ├── Toolbar.test.tsx
│ ├── ToolbarDividerItem.test.tsx
│ ├── ToolbarItem.test.tsx
│ ├── Transfer.test.tsx
│ ├── __mocks__/
│ │ ├── IntersectionObserverMock.ts
│ │ ├── bootstrap-italia.ts
│ │ └── matchMedia.ts
│ ├── __snapshots__/
│ │ └── Storybook.test.tsx.snap
│ ├── helper.tsx
│ ├── icons-with-no-title.txt
│ └── utils.test.tsx
├── tsconfig.json
└── tsup.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
# The JSON files contain newlines inconsistently
[*.json]
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .github/ISSUE_TEMPLATE/apri-una-segnalazione.it.yaml
================================================
name: Apri una segnalazione - IT
description: Per segnalare bug, aprire una discussione o inviare un contributo
labels: []
body:
- type: checkboxes
attributes:
label: Esiste già una discussione sul tema che ti interessa, o su un tema simile?
description: |
Verifica nella [lista delle discussioni](https://github.com/italia/design-react-kit/issues/). Se esiste, vai alla discussione esistente e partecipa lasciando un commento.
options:
- label: Ho verificato e non esiste
required: true
- type: markdown
attributes:
value: "-------"
- type: input
attributes:
label: Versione della libreria
description: |
Versione utilizzata sulla quale si riscontra un problema o si vuole avviare la discussione.
validations:
required: true
- type: textarea
attributes:
label: Cosa
description: |
Descrivi in modo chiaro e conciso il tema della tua segnalazione indicando il link della pagina o delle pagine interessate.
Per segnalare un bug indica come riprodurlo per passi: es. (1) Vai a '...'; (2) Fai click su '...'; (3) Ora trovi il bug '...'.
Per proporre un contributo descrivi la soluzione che immagini, cosa ti aspetti e le eventuali alternative hai già valutato.
Puoi anche aggiungere catture di schermo per arricchire la segnalazione.
Assicurati di non condividere informazioni personali.
validations:
required: true
- type: textarea
attributes:
label: Perché
description: |
Spiega perché ritieni rilevante la segnalazione.
Indica analisi, verifiche e test svolti a supporto (es. dati di analytics, analisi euristiche, test di usabilità, verifiche di accessibilità), se disponibili.
validations:
required: true
- type: textarea
attributes:
label: Contesto
description: |
Se significative, inserisci informazioni su tipo di dispositivo, sistema operativo, browser.
validations:
required: false
- type: textarea
attributes:
label: Altro
description: |
Inserisci link a esempi, ricerca, design o codice a corredo della segnalazione, se disponibili.
validations:
required: false
- type: markdown
attributes:
value: |
-------
[Conosci il modello di contribuzione del design system del Paese?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/)
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
================================================
FILE: .github/ISSUE_TEMPLATE/open-an-issue.en.yaml
================================================
name: Open an issue - EN
description: To report bugs, open a discussion, or submit a contribution
labels: []
body:
- type: checkboxes
attributes:
label: Does a discussion already exist on the topic you are interested in, or on a similar topic?
description: |
Please check [issue list](https://github.com/italia/design-react-kit/issues/). If it exists, participate by posting a comment on the already existing issue.
options:
- label: I verified and it doesn't exist
required: true
- type: markdown
attributes:
value: "-------"
- type: input
attributes:
label: Library version
description: |
Version on which you encounter a problem or want to start a discussion.
validations:
required: true
- type: textarea
attributes:
label: What
description: |
Please describe the theme of your issue in a clear and concise manner, and include the link to the page(s) of concern and screenshots.
To report a bug, specify how to reproduce it step by step. E.g. (1) Go to '...'; (2) Click '...'; (3) Notice the bug '...'.
To propose a novel contribution, describe the problem you want to solve and the solution you envision, what you expect, and any alternative solutions you've considered.
Consider adding screen captures to enhance your report.
Make sure you do not share any personal information in the process.
validations:
required: true
- type: textarea
attributes:
label: Why
description: |
Explain why you consider this report relevant.
Highlight any analysis, verifications and tests you've conducted to support your issue or contribution (e.g., data analytics, heuristic analysis, usability tests, accessibility checks), if available.
validations:
required: true
- type: textarea
attributes:
label: Context
description: |
If relevant, please provide details on the device type, operating system and browser.
validations:
required: false
- type: textarea
attributes:
label: More
description: |
If available, provide links to related examples, research, designs or code.
validations:
required: false
- type: markdown
attributes:
value: |
-------
[Do you know Italia's Design System contribution model?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/) (Italian language)
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
(Thanks for sending a pull request! Please make sure you click the link above to view the contribution guidelines, then fill out the blanks below.)
-->
<!-- Add the issue number that is fixed by this PR (In the form Fixes #123) -->
Fixes #
#### PR Checklist
<!-- To Mark a Checklist box, put "x" inside the square brackets. For Example - [ ] becomes [x] -->
- [ ] My branch is up-to-date with the Upstream `main` branch.
- [ ] The unit tests pass locally with my changes (if applicable).
- [ ] I have added tests that prove my fix is effective or that my feature works (if applicable).
- [ ] I have added necessary documentation (if appropriate).
#### Short description of what this resolves:
<!-- Please add a short description of what this PR resolves to be clear for the community. -->
#### Changes proposed in this Pull Request:
## <!-- You can use a few bullet points to describe some implementation changes proposed. For Example - feat: adding navbar component -->
================================================
FILE: .github/workflows/ci.yml
================================================
name: Lint, Test & Coverage
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
coverage:
runs-on: ubuntu-latest
concurrency: ci-test-${{ github.ref }}
steps:
- uses: actions/checkout@v4
- name: Setup Node.js with Yarn cache
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'yarn'
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Lint
run: yarn lint
- name: Test
run: yarn test:ci
- name: Upload coverage
uses: codecov/codecov-action@v2
with:
token: ${{ secrets.CODECOV_TOKEN }}
flags: unittests
================================================
FILE: .github/workflows/commit-lint.yml
================================================
on:
push:
branches:
- main
pull_request:
branches:
- main
name: Lint commits
jobs:
lint-commits:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 20
- run: yarn add @commitlint/cli
- run: npx commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD
================================================
FILE: .github/workflows/pc-check.yml
================================================
on:
pull_request:
branches:
- main
workflow_dispatch:
name: Lint publiccode
jobs:
publiccode_yml_validation:
runs-on: ubuntu-latest
name: publiccode.yml validation
steps:
- uses: actions/checkout@v5
- uses: italia/publiccode-parser-action@v1
with:
publiccode: 'publiccode.yml'
================================================
FILE: .github/workflows/pc-update.yml
================================================
name: Publiccode.yml update
on:
schedule:
- cron: '30 17 * * *'
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Check publiccode.yml version and date ✅
uses: italia/publiccode-softwareversion-check-action@master
id: pva
- name: Create Pull Request ⏫
uses: peter-evans/create-pull-request@v3
if: failure()
with:
title: 'chore: update software version ${{ steps.pva.outputs.version }} and date in publiccode.yml'
branch: feature/publiccode-${{ steps.pva.outputs.version }}
================================================
FILE: .github/workflows/publiccode-yml-validation.yml
================================================
name: publiccode.yml validation
on: [pull_request, push]
jobs:
publiccode_yml_validation:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: italia/publiccode-parser-action@v1
with:
publiccode: 'publiccode.yml'
================================================
FILE: .github/workflows/publish-release.yml
================================================
name: Generate new release
on:
push:
tags:
- "v5*"
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
ref: main
- uses: actions/setup-node@v4
with:
node-version: 20
registry-url: "https://registry.npmjs.org"
- name: git config
run: |
git config user.name "${GITHUB_ACTOR}"
git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
- run: yarn
- run: yarn build
- name: Publish package to NPM
run: yarn publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- run: yarn add extract-changelog-release
- name: Generate Release Body
run: yarn --silent extract-changelog-release > RELEASE_BODY.md
- uses: ncipollo/release-action@v1
with:
bodyFile: "RELEASE_BODY.md"
token: ${{ secrets.GITHUB_TOKEN }}
- uses: italia/slack-notify-release-action@v0.4.0
with:
slack_token: ${{ secrets.SLACK_TOKEN }}
channel_id: ${{ secrets.SLACK_CHANNEL }}
project_name: Design React Kit
================================================
FILE: .github/workflows/update-docs.yml
================================================
name: Update documentation
on:
workflow_dispatch:
push:
tags:
- "v5*"
permissions: {}
jobs:
deploy:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- name: Checkout
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-depth: 0
persist-credentials: false
- name: Setup Node.js
uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
with:
node-version: 20
package-manager-cache: false
- name: Git config
run: |
git config user.name "${GITHUB_ACTOR}"
git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
- name: Install dependencies
run: yarn
- name: Build docs
run: yarn storybook:build
- name: Extract destination folder name
run: |
if [[ "${GITHUB_REF_TYPE}" == "tag" ]]; then
if [[ "${GITHUB_REF_NAME}" =~ ^v5\.[0-9]+\.[0-9]+$ ]]; then
echo "DEST_FOLDER=${GITHUB_REF_NAME}" >> $GITHUB_ENV
else
echo "Invalid tag format: ${GITHUB_REF_NAME}. Expected v5.<minor>.<patch>" >&2
exit 1
fi
else
echo "DEST_FOLDER=latest" >> $GITHUB_ENV
fi
- name: Deploy docs
uses: peaceiris/actions-gh-pages@47f197a2200bb9de68ba5f48fad1c088eb1c4a32 # v4.0.0
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./storybook-static
destination_dir: ${{ env.DEST_FOLDER }} # Subfolder name to deploy docs into
keep_files: false # Clear previous docs in destination subfolder to avoid orphaned files
- name: Create root redirect to latest
run: |
mkdir -p /tmp/root
cat > /tmp/root/index.html << 'REDIRECT'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;url=latest/">
<link rel="canonical" href="latest/">
</head>
<body>
<p>Redirecting to <a href="latest/">latest documentation</a>...</p>
</body>
</html>
REDIRECT
- name: Deploy root redirect
uses: peaceiris/actions-gh-pages@47f197a2200bb9de68ba5f48fad1c088eb1c4a32 # v4.0.0
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: /tmp/root
keep_files: true
================================================
FILE: .gitignore
================================================
# Dependencies
node_modules
# Outputs
storybook-static
dist/
.DS_Store
.idea
.cache
coverage
# Logs
*.log
*storybook.log
================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged --verbose
================================================
FILE: .npmignore
================================================
.circleci
.storybook
assets
scripts
stories
storybook-static
dist
src/__image_snapshots__/
================================================
FILE: .nvmrc
================================================
20
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true,
"tabWidth": 2,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"trailingComma": "none",
"printWidth": 120
}
================================================
FILE: .storybook/main.ts
================================================
import { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx|js|jsx))'],
addons: ['@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-docs'],
framework: '@storybook/react-vite',
core: {
builder: '@storybook/builder-vite' // 👈 The builder enabled here.
},
staticDirs: ['../static', { from: '../assets', to: '/' }],
docs: {
defaultName: 'Documentazione',
docsMode: false
},
async viteFinal(config) {
// Merge custom configuration into the default config
const { mergeConfig } = await import('vite');
return mergeConfig(config, {
// Add dependencies to pre-optimization
base: './',
build: {
chunkSizeWarningLimit: 1000,
minify: false
}
});
}
};
export default config;
================================================
FILE: .storybook/manager-head.html
================================================
<title>Design React Kit</title>
<meta name="description" content="Design React Kit - A React toolkit that implements the Italia design system" />
<meta property="og:site_name" content="Design React Kit" />
<link rel="canonical" href="https://italia.github.io/design-react-kit/" />
<!-- Favicons -->
<link rel="apple-touch-icon" href="/design-react-kit/favicons/apple-touch-icon.png" />
<link rel="icon" href="/design-react-kit/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/design-react-kit/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="manifest" href="/design-react-kit/favicons/manifest.webmanifest" />
<link rel="mask-icon" href="/design-react-kit/favicons/safari-pinned-tab.svg" color="#0066CC" />
<link rel="icon" href="/design-react-kit/favicons/favicon.ico" />
<meta name="msapplication-config" content="/design-react-kit/favicons/browserconfig.xml" />
<meta name="theme-color" content="#0066CC" />
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@teamdigitaleIT" />
<meta name="twitter:creator" content="Team per la Trasformazione Digitale" />
<meta name="twitter:title" content="React Kit" />
<meta name="twitter:description" content="Il kit React per la Pubblica Amministrazione" />
<meta name="twitter:image" content="/design-react-kit/favicons/android-chrome-192x192.png" />
<!-- Facebook -->
<meta property="og:url" content="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/" />
<meta property="og:title" content="React Kit" />
<meta property="og:description" content="Il kit React per la Pubblica Amministrazione" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/design-react-kit/favicons/social-card.png" />
<meta property="og:image:secure_url" content="/design-react-kit/favicons/social-card.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<style>
.sidebar-item[id$='story-hidden'] {
display: none !important;
}
</style>
================================================
FILE: .storybook/manager.js
================================================
import { addons } from "storybook/manager-api";
import theme from "./theme";
addons.setConfig({
theme: theme,
});
================================================
FILE: .storybook/preview.ts
================================================
import { Preview } from '@storybook/react-vite';
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css';
import '../assets/css/storybook-fixes.css';
import '../assets/docs/scss/bi-fonts.scss';
import '../assets/docs/scss/docs.scss';
import theme from './theme';
const preview: Preview = {
parameters: {
docs: {
theme: theme,
toc: {
headingSelector: 'h1, h2, h3',
title: 'Indice'
},
source: {
type: 'dynamic'
}
},
options: {
storySort: {
order: [
'Documentazione',
[
'Welcome',
'Organizzare gli spazi',
'Organizzare i contenuti',
'Menu di navigazione',
'Componenti',
'Form',
'Utilities'
],
'*'
]
}
}
},
tags: ['autodocs']
};
export default preview;
================================================
FILE: .storybook/stories-helper.ts
================================================
export const componentColor = ["primary", "secondary", "success", "danger", "warning"];
================================================
FILE: .storybook/theme.ts
================================================
import { create } from 'storybook/theming';
const theme = create({
base: 'light',
colorPrimary: '#00C5CA',
colorSecondary: '#0066CC',
// UI
appBg: '#F3F3F5',
appContentBg: '#FFF',
appBorderColor: 'grey',
appBorderRadius: 4,
brandTitle: 'Design React Kit',
brandUrl: 'https://github.com/italia/design-react-kit'
});
export default theme;
================================================
FILE: AUTHORS
================================================
Copyright (c) 2022 - 2024 Presidenza del Consiglio dei Ministri
The version control system provides attribution for specific lines of code.
================================================
FILE: CHANGELOG.md
================================================
## 5.10.0 (2026-03-17)
* chore: update publiccode ([dd7364e](https://github.com/italia/design-react-kit/commit/dd7364e))
* chore(deps-dev): bump storybook from 9.1.18 to 9.1.19 ([ae57adf](https://github.com/italia/design-react-kit/commit/ae57adf))
* chore(deps): bump immutable from 5.1.4 to 5.1.5 ([db555e2](https://github.com/italia/design-react-kit/commit/db555e2))
* chore(deps): bump rollup from 4.57.1 to 4.59.0 ([1f80f56](https://github.com/italia/design-react-kit/commit/1f80f56))
* chore(deps): upgrade bootstrap italia ([f8cc596](https://github.com/italia/design-react-kit/commit/f8cc596))
* fix(Collapse): add CSS transition for navbar collapsable open/close ([3daf27d](https://github.com/italia/design-react-kit/commit/3daf27d)), closes [#1132](https://github.com/italia/design-react-kit/issues/1132)
* fix(collapse): improve navbar collapsable accessibility ([2c78c88](https://github.com/italia/design-react-kit/commit/2c78c88))
* fix(Input): make adaptive type responsive on small screens ([ce854bd](https://github.com/italia/design-react-kit/commit/ce854bd))
## <small>5.9.3 (2026-02-17)</small>
* chore: update publiccode ([dc904f7](https://github.com/italia/design-react-kit/commit/dc904f7))
* chore(deps-dev): bump storybook from 9.1.2 to 9.1.17 ([ceba080](https://github.com/italia/design-react-kit/commit/ceba080))
* chore(deps): add conventional commits ([4c2eb90](https://github.com/italia/design-react-kit/commit/4c2eb90))
* chore(deps): bump @modelcontextprotocol/sdk from 1.24.0 to 1.26.0 ([4569daa](https://github.com/italia/design-react-kit/commit/4569daa))
* chore(deps): bump lodash ([3561daf](https://github.com/italia/design-react-kit/commit/3561daf))
* chore(deps): bump qs from 6.14.0 to 6.14.1 ([149e22d](https://github.com/italia/design-react-kit/commit/149e22d))
* chore(deps): bump qs from 6.14.1 to 6.14.2 ([3f1a0ae](https://github.com/italia/design-react-kit/commit/3f1a0ae))
* fix(deps): upgrade bootstrap italia ([1035525](https://github.com/italia/design-react-kit/commit/1035525))
## [5.9.2](https://github.com/italia/design-react-kit/compare/v5.9.1...v5.9.2) (2025-12-10)
### Bug Fixes
* **a11y:** better guidelines for accordion component ([e4c9a92](https://github.com/italia/design-react-kit/commit/e4c9a929b5192d4ce88138c978a3e1e8af9fd3b6))
## [5.9.1](https://github.com/italia/design-react-kit/compare/v5.9.0...v5.9.1) (2025-11-10)
### Bug Fixes
* add is-invalid class to input-group based on validation ([762d627](https://github.com/italia/design-react-kit/commit/762d62755ec05c16b57e85bbc961a94af97d9c06))
* prevent numeric input from submitting forms ([c6b3bb8](https://github.com/italia/design-react-kit/commit/c6b3bb8d02e2201dde6839db6f04d427c8bd723d))
* render pager properly after minimization ([a616a48](https://github.com/italia/design-react-kit/commit/a616a480ae8f1490a287c991a2bf5acb4f4085fb))
# [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))
## [5.8.1](https://github.com/italia/design-react-kit/compare/v5.8.0...v5.8.1) (2025-06-24)
### Bug Fixes
* **build:** asset drag n drop icon ([b5b0fd8](https://github.com/italia/design-react-kit/commit/b5b0fd8a26e8ef7d13bd235c7171e1d649c89bf1))
* dropdown menu in header ([2d6588b](https://github.com/italia/design-react-kit/commit/2d6588b09d4f4c8d45dda2cecc416b00eeee12cf))
# [5.8.0](https://github.com/italia/design-react-kit/compare/v5.7.3...v5.8.0) (2025-06-20)
### Bug Fixes
* put pagination form controls outside list ([419cded](https://github.com/italia/design-react-kit/commit/419cded94a8d13d6e7cdc48052c95f58ded98fb8))
* remove useless pagination ul element ([66eeceb](https://github.com/italia/design-react-kit/commit/66eeceb4d2165739d522c7a846c23267af72b063))
### Features
* add upload component ([2798b78](https://github.com/italia/design-react-kit/commit/2798b7834ba44f54e0b82f0500e4a6ef598122b8))
## [5.7.3](https://github.com/italia/design-react-kit/compare/v5.7.2...v5.7.3) (2025-05-16)
### Bug Fixes
* add missing icons ([c62621a](https://github.com/italia/design-react-kit/commit/c62621a01e9e5a0e972c3b0039139a5fd8457501))
## [5.7.2](https://github.com/italia/design-react-kit/compare/v5.7.1...v5.7.2) (2025-05-13)
### Bug Fixes
* splidejs types ([890df5d](https://github.com/italia/design-react-kit/commit/890df5d440fbac7e9a38e1a9656da44510b3cb86))
## [5.7.1](https://github.com/italia/design-react-kit/compare/v5.7.0...v5.7.1) (2025-04-10)
### Features
* use class sticky-top instead of react-stickup ([da3c86d](https://github.com/italia/design-react-kit/commit/da3c86de49deaf10007a36ef53e50ab39f37ac28))
# [5.7.0](https://github.com/italia/design-react-kit/compare/v5.6.1...v5.7.0) (2025-03-27)
### Bug Fixes
* find dom node method deprecation ([f738af8](https://github.com/italia/design-react-kit/commit/f738af83535fd84aa6b84f8893c867c7349595e7))
### Features
* new carousel component ([a8405ce](https://github.com/italia/design-react-kit/commit/a8405ce6d9987f203e74858f7155a7070ffb858f))
* new transfer component ([0db606d](https://github.com/italia/design-react-kit/commit/0db606d959a03e15c081c61a3fbf3c5eca62de5e))
* new video component ([f63ad5a](https://github.com/italia/design-react-kit/commit/f63ad5adbac080854b9cba1a9a13912a14344861))
* upgrade bootstrap italia ([c3c0efb](https://github.com/italia/design-react-kit/commit/c3c0efbe8e4efe5ee8aa7cb4137d0c389a956de3))
## [5.6.1](https://github.com/italia/design-react-kit/compare/v5.6.0...v5.6.1) (2025-02-13)
### Bug Fixes
* disabled checkbox and radio ([aae38ea](https://github.com/italia/design-react-kit/commit/aae38eac8c1f2388a7e1dcf6d12920ebc6f71dcb))
* symbol label class ([86d01d8](https://github.com/italia/design-react-kit/commit/86d01d809a8c72b9f7e5eaf7071a9116f9f7eb35))
# [5.6.0](https://github.com/italia/design-react-kit/compare/v5.5.1...v5.6.0) (2025-02-11)
### Bug Fixes
* **a11y:** icons ([0408075](https://github.com/italia/design-react-kit/commit/0408075afbdb5a2a93a0e7ca7eae89bd97ac9255))
* **a11y:** input aria describedby ([396c752](https://github.com/italia/design-react-kit/commit/396c7527560cc0a08c3741cdd2b398b2a8ef8293))
* back to top is now focusable ([b87db3f](https://github.com/italia/design-react-kit/commit/b87db3f05b45add57f269f198523efcf13652eb3))
* new label for percentage and currency inputs ([61a8b34](https://github.com/italia/design-react-kit/commit/61a8b340264791575b5683509d62c22ef74a2c32))
### Features
* add icons title for steppers ([fff4263](https://github.com/italia/design-react-kit/commit/fff426363197a52b9eba22141cff05a4e65b5b46))
* new tab component ([b5b9c85](https://github.com/italia/design-react-kit/commit/b5b9c85eda6c3c0ee5ee39a5392dd0f57bca4a6e))
## [5.5.1](https://github.com/italia/design-react-kit/compare/v5.5.0...v5.5.1) (2025-01-09)
### Bug Fixes
* remove dropdown menu offset in slim headers ([52a1149](https://github.com/italia/design-react-kit/commit/52a1149c48303d8e9389000441badf9394c0c674))
# [5.5.0](https://github.com/italia/design-react-kit/compare/v5.4.1...v5.5.0) (2024-12-18)
### Bug Fixes
* add aria hidden to rating icons ([7d62963](https://github.com/italia/design-react-kit/commit/7d62963443023350799438a6d3e948d1c7ed0b0d))
* focus tracking ([27d3714](https://github.com/italia/design-react-kit/commit/27d37148f4493e1231a4f671101f118c3b10fdbb))
* improvements on back to top component ([08fb4c7](https://github.com/italia/design-react-kit/commit/08fb4c750f76b5db5ca9a10005a532804d141957))
* keyboard rating ([bd9ddba](https://github.com/italia/design-react-kit/commit/bd9ddbabc1a997ba8fdd08461172cd6a860623b2))
### Features
* header improvements ([f7e2a76](https://github.com/italia/design-react-kit/commit/f7e2a76164e900d7a61dbe0aec7f56eebccf647d))
* nav mode for skiplinks ([2dc384e](https://github.com/italia/design-react-kit/commit/2dc384eea89caaad426ff46613429226b9eba21b))
* navscroll refactoring with progressbar ([d0cfd5b](https://github.com/italia/design-react-kit/commit/d0cfd5bc90daed5616ced16b767a94bb5abeba59))
* new autocomplete component with italian default messages ([b076b91](https://github.com/italia/design-react-kit/commit/b076b912d888682b497f356e69b9a73f6ed98f52))
## [5.4.1](https://github.com/italia/design-react-kit/compare/v5.4.0...v5.4.1) (2024-11-11)
### Bug Fixes
* form control class missing for text area ([be15805](https://github.com/italia/design-react-kit/commit/be15805128978bb02a3ed537f52f5427c9a8e990))
* remove classname from input wrapper ([5fe3186](https://github.com/italia/design-react-kit/commit/5fe3186574a5b33adf5d1085f01320dcc4b8abf5))
# [5.4.0](https://github.com/italia/design-react-kit/compare/v5.3.0...v5.4.0) (2024-11-07)
### Bug Fixes
* **a11y:** toolbar divider ([5785c9c](https://github.com/italia/design-react-kit/commit/5785c9c288743186eca4ad36294caba86c044f7f))
* thumbnail extra space ([7c06f04](https://github.com/italia/design-react-kit/commit/7c06f0492b0c78f3c96ed99398748fd20df66995))
* timeline headers ([6e24aae](https://github.com/italia/design-react-kit/commit/6e24aae08d3a8e5df8483f761d77f0a7dac1c83e))
* visually hidden in toolbar ([ad00131](https://github.com/italia/design-react-kit/commit/ad00131ded6a8dfbb291f60f11dc77e28bd841ae))
### Features
* add text and date description to card category component ([39925bd](https://github.com/italia/design-react-kit/commit/39925bdb4b11cd2c7f2e2515ba8d6a57f5de2833))
* new lists ([5021fd1](https://github.com/italia/design-react-kit/commit/5021fd120a629f7fb12e818f4e2dcc53a0fda064))
* new responsive images ([99cf472](https://github.com/italia/design-react-kit/commit/99cf4721822a20f9f69eebfdc84f472fa4131b3b))
* use href in forward component ([9e20c53](https://github.com/italia/design-react-kit/commit/9e20c5359b7aa68af083984fe3c554cd7c0c0241))
# [5.3.0](https://github.com/italia/design-react-kit/compare/v5.2.0...v5.3.0) (2024-10-31)
### Bug Fixes
* **a11y:** add aria labelled to sections ([eeca34d](https://github.com/italia/design-react-kit/commit/eeca34d39787fa09bf5a499a1e1ee0be15cf1465))
* **a11y:** hero component ([4d17fe7](https://github.com/italia/design-react-kit/commit/4d17fe71e43cf19d7904cc678439bcffdc76b505))
* **a11y:** title and doc link for modal ([c0a92be](https://github.com/italia/design-react-kit/commit/c0a92be35a076da3cc68b3531f2e7243777c9555))
* group form in examples ([239904d](https://github.com/italia/design-react-kit/commit/239904d11c4d0958d634e670edd68cf45ae7a1aa))
* icons with default title ([14e154b](https://github.com/italia/design-react-kit/commit/14e154b2ad495b18a20cc19774bb2ee3a4fcd722))
### Features
* improve dimmer component ([548608a](https://github.com/italia/design-react-kit/commit/548608a15b4a55061e9f2469ea3a5e79fefc4d3a))
# [5.2.0](https://github.com/italia/design-react-kit/compare/v5.1.0...v5.2.0) (2024-08-05)
### Bug Fixes
* thumbnav is a navigation component ([501417e](https://github.com/italia/design-react-kit/commit/501417eda9006de9ea1931d7809aed33125fd90f))
### Features
* add list component ([e4c9e14](https://github.com/italia/design-react-kit/commit/e4c9e14f6295343bce7262665fa54ba4085cad30))
# [5.1.0](https://github.com/italia/design-react-kit/compare/v5.0.4...v5.1.0) (2024-07-02)
### Bug Fixes
* alert default props ([39821d9](https://github.com/italia/design-react-kit/commit/39821d93a4b68bf0edd60953e940ebed2c1d5775))
* dimmer ios bug ([315760a](https://github.com/italia/design-react-kit/commit/315760a217541f9a5b73dc9ea92b8c559f4be362))
### Features
* add icon and button to input ([7ad4ca9](https://github.com/italia/design-react-kit/commit/7ad4ca948ee52f35835b6efc19fc424976cd818c))
* **deps:** update to react 18 ([ac0b4d5](https://github.com/italia/design-react-kit/commit/ac0b4d597442e6045d771be55a1437131b90b305))
* new dropdown based on reactstrap ([3e4eda6](https://github.com/italia/design-react-kit/commit/3e4eda671f89436587fc315ade8dff0deb2919f2))
## [5.0.4](https://github.com/italia/design-react-kit/compare/v5.0.3...v5.0.4) (2024-05-02)
### Bug Fixes
* refresh callback declaration fix in useNavScroll ([6a9957e](https://github.com/italia/design-react-kit/commit/6a9957e84964018baf095baeee36558815a92de5))
## [5.0.3](https://github.com/italia/design-react-kit/compare/v5.0.2...v5.0.3) (2024-04-11)
### Features
* add to prop to bottomnavitem ([8126a98](https://github.com/italia/design-react-kit/commit/8126a98bf3758b4500d34499adf8d3784001c8ae))
## [5.0.2](https://github.com/italia/design-react-kit/compare/v5.0.1...v5.0.2) (2024-04-08)
### Bug Fixes
* remove to from link list item ([788cf3f](https://github.com/italia/design-react-kit/commit/788cf3f700ca5a4137e114d1265beda26e8364d5))
* select props on change ([61edd6e](https://github.com/italia/design-react-kit/commit/61edd6eab7922a0a59566ce9d73030d933a1f99f))
* select should not ignore provided props ([571b334](https://github.com/italia/design-react-kit/commit/571b334bff225de4177556d98790fb87c608cfc2))
## [5.0.1](https://github.com/italia/design-react-kit/compare/v5.0.0...v5.0.1) (2024-03-22)
### Bug Fixes
* accordion types error ([4e854e7](https://github.com/italia/design-react-kit/commit/4e854e7c792ad4b11adaf08b403a75b66609d672))
# [5.0.0](https://github.com/italia/design-react-kit/compare/v5.0.0-12...v5.0.0) (2024-03-14)
### Bug Fixes
* dropdown import type warning ([9e56cc0](https://github.com/italia/design-react-kit/commit/9e56cc03e10c431f77798a575fde6f374ecac8dc))
### Features
* integrate nav scroll ([5b773be](https://github.com/italia/design-react-kit/commit/5b773be51c5ba056e7912e78bf7288c356fd1e3d))
* stable release ([b365007](https://github.com/italia/design-react-kit/commit/b3650072f964072b4fe9d67ebee9b60d85b6bbde))
# [5.0.0-12](https://github.com/italia/design-react-kit/compare/v5.0.0-11...v5.0.0-12) (2024-03-05)
### Bug Fixes
* declaration file ([a93b3fd](https://github.com/italia/design-react-kit/commit/a93b3fd8ac665ff1614e4362f155bf44668adb11))
# [5.0.0-11](https://github.com/italia/design-react-kit/compare/v5.0.0-10...v5.0.0-11) (2024-02-26)
### Features
* new dropdown component ([6a02102](https://github.com/italia/design-react-kit/commit/6a021029e587d58ee0c1929f2dc6f06e902b49c2))
# [5.0.0-10](https://github.com/italia/design-react-kit/compare/v5.0.0-9...v5.0.0-10) (2024-02-07)
### Bug Fixes
* svg import should be launched manually ([aa61aec](https://github.com/italia/design-react-kit/commit/aa61aecdb8a7ed72feb185c223b841f9512a253c))
# [5.0.0-9](https://github.com/italia/design-react-kit/compare/v5.0.0-8...v5.0.0-9) (2024-02-07)
### Bug Fixes
* input validation ([42afc98](https://github.com/italia/design-react-kit/commit/42afc98f53d442f687727deaf8ab87df0c60d270))
### Features
* upgrade bsi to latest version ([27016b7](https://github.com/italia/design-react-kit/commit/27016b794e94baebfc18e217a4efa57a38178c6e))
# [5.0.0-8](https://github.com/italia/design-react-kit/compare/v5.0.0-7...v5.0.0-8) (2024-01-10)
### Features
* add datepicker component ([f6d696f](https://github.com/italia/design-react-kit/commit/f6d696f8f537ae6b3affc2a40f6a97db0399b371))
# [5.0.0-7](https://github.com/italia/design-react-kit/compare/v5.0.0-6...v5.0.0-7) (2023-12-12)
### Features
* numeric input component ([d4a299c](https://github.com/italia/design-react-kit/commit/d4a299cb43ad138352deab45d552bd33a3be3b19))
================================================
FILE: CODE_OF_CONDUCT.EN.md
================================================
# Code of Conduct
## 1. Purpose
A primary goal of Developers Italia is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof).
This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior.
We invite all those who participate in Developers Italia to help us create safe and positive experiences for everyone.
## 2. Open Source Citizenship
A supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community.
Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society.
If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know.
## 3. Expected Behavior
The following behaviors are expected and requested of all community members:
- Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
- Exercise consideration and respect in your speech and actions.
- Attempt collaboration before conflict.
- Refrain from demeaning, discriminatory, or harassing behavior and speech.
- Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
- Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
## 4. Unacceptable Behavior
The following behaviors are considered harassment and are unacceptable within our community:
- Violence, threats of violence or violent language directed against another person.
- Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
- Posting or displaying sexually explicit or violent material.
- Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
- Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
- Deliberate intimidation, stalking or following (online or in person).
- Advocating for, or encouraging, any of the above behavior.
- Sustained disruption of community events, including talks and presentations.
## 5. Consequences of Unacceptable Behavior
Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated.
Anyone asked to stop unacceptable behavior is expected to comply immediately.
If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning.
## 6. Reporting Guidelines
If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. You can do so by e-mailing coc-report@developers.italia.it.
Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress.
## 7. Addressing Grievances
If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify the managers of Developers Italia with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies.
## 8. Scope
We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues–online and in-person–as well as in all one-on-one communications pertaining to community business.
This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members.
## 9. Contact info
You can reach the managers of Developers Italia at coc-report@developers.italia.it
## 10. License and attribution
This Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/).
Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy).
Retrieved on November 22, 2016 from [http://citizencodeofconduct.org/](http://citizencodeofconduct.org/)
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Codice di condotta
## 1. Scopo
Uno degli obiettivi principali di Developers Italia è quello di includere il maggior numero di contributori, con il background più vario e diversificato possibile. Pertanto, ci impegniamo a fornire un ambiente amichevole, sicuro e accogliente per tutti, indipendentemente dal genere, dall'orientamento sessuale, dalle abilità, dall'etnia, dallo status socioeconomico e dalla religione (o dalla sua mancanza).
Questo codice di condotta delinea le nostre aspettative per tutti coloro che partecipano alla nostra comunità, nonché le conseguenze per comportamenti inaccettabili.
Invitiamo tutti coloro che partecipano a Developers Italia a aiutarci a creare esperienze positive e positive per tutti.
## 2. Cittadinanza open source
Un obiettivo supplementare di questo Codice di condotta è aumentare la cittadinanza open source incoraggiando i partecipanti a riconoscere e rafforzare le relazioni tra le nostre azioni e i loro effetti sulla nostra comunità.
Le comunità rispecchiano le società in cui esistono e l'azione positiva è essenziale per contrastare le molte forme di disuguaglianza e abusi di potere che esistono nella società.
Se vedi qualcuno che sta facendo uno sforzo in più per garantire che la nostra comunità sia accogliente, amichevole e incoraggia tutti i partecipanti a contribuire nella massima misura, vogliamo sapere.
## 3. Comportamento previsto
I seguenti comportamenti sono previsti e richiesti a tutti i membri della comunità:
- Partecipare in modo autentico e attivo. In tal modo, contribuisci alla salute e alla longevità di questa comunità.
- Esercitare considerazione e rispetto nei propri discorsi e azioni.
- Tentativo di collaborazione prima del conflitto.
- Astenersi dal comportamento umiliante, discriminatorio o molesto.
- Sii consapevole di ciò che ti circonda e dei tuoi compagni partecipanti. Avvisare i leader della comunità se si nota una situazione pericolosa, qualcuno in difficoltà o violazioni di questo Codice di condotta, anche se sembrano irrilevanti.
- Ricorda che le sedi di eventi comunitari possono essere condivise con membri del pubblico; si prega di essere rispettosi verso tutti i clienti di questi luoghi.
## 4. Comportamento inaccettabile
I seguenti comportamenti sono considerati molestie e inaccettabili all'interno della nostra comunità:
- Violenza, minacce di violenza o linguaggio violento diretto contro un'altra persona.
- Scherzi e linguaggio sessista, razzista, omofobo, transfobico, o comunque discriminatorio.
- Pubblicare o visualizzare materiale sessualmente esplicito o violento.
- Insulti personali, in particolare quelli relativi al genere, orientamento sessuale, razza, religione o disabilità.
- Attenzione sessuale sgradita. Ciò include commenti o battute sessualizzate; approcci sessuali inappropriati, toccanti e indesiderati.
- Intimidazione intenzionale, stalking o seguito (online o di persona).
- Sostenendo o incoraggiando uno qualsiasi dei suddetti comportamenti.
- Perturbazione continua degli eventi della comunità, inclusi discorsi e presentazioni.
## 5. Conseguenze del comportamento inaccettabile
Il comportamento inaccettabile da parte di qualsiasi membro della comunità, inclusi gli sponsor e coloro che hanno l'autorità decisionale, non sarà tollerato.
Ci si aspetta che chiunque chieda di smettere di comportarsi in modo inaccettabile si adegui immediatamente.
Se un membro della comunità si comporta in modo inaccettabile, gli organizzatori della comunità possono intraprendere qualsiasi azione che ritengano appropriata, fino a includere un divieto temporaneo o l'espulsione definitiva dalla comunità senza preavviso.
## 6. Linee guida per la segnalazione
Se sei soggetto a un comportamento inaccettabile o ne sei testimone o se hai altre preoccupazioni, ti preghiamo di avvisare un organizzatore della comunità il prima possibile. Puoi farlo inviando una e-mail a `coc-report@developers.italia.it`.
Inoltre, gli organizzatori della comunità sono disponibili per aiutare i membri della comunità a impegnarsi con le forze dell'ordine locali o per aiutare altrimenti coloro che vivono comportamenti inaccettabili a sentirsi al sicuro. Nel contesto di eventi di persona, gli organizzatori forniranno anche le scorte come desiderato dalla persona che soffre.
## 7. Affrontare i reclami
Se ritieni di essere stato accusato ingiustamente di violare questo Codice di condotta, dovresti informare i gestori di Developers Italia con una descrizione sintetica del tuo reclamo. Il tuo reclamo verrà gestito in conformità con le nostre attuali politiche di governance.
## 8. Ambito di applicazione
Ci aspettiamo che tutti i partecipanti alla comunità (contributori, pagati o meno, sponsor e altri ospiti) si attengano a questo Codice di condotta in tutte le sedi della comunità, online e di persona, nonché in tutte le comunicazioni individuali relative alla comunità attività commerciale.
Questo codice di condotta e le relative procedure si applicano anche a comportamenti inaccettabili che si verificano al di fuori dell'ambito delle attività della comunità quando tale comportamento ha il potenziale di influire negativamente sulla sicurezza e il benessere dei membri della comunità.
## 9. Informazioni di contatto
Puoi raggiungere i gestori di Developers Italia all'indirizzo `coc-report@developers.italia`.
================================================
FILE: CONTRIBUTING.md
================================================
## Come contribuire 💙
👉🏻 È possibile contribuire alla libreria in vari modi:
- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-react-kit/issues) di React Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit.
- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack.
- Con il codice seguendo le [istruzioni riportate nel README.md](https://github.com/italia/design-react-kit?tab=readme-ov-file#con-il-codice)
================================================
FILE: LICENSE
================================================
Copyright (c) 2018, the respective contributors, as shown by the AUTHORS file.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
================================================
FILE: README.EN.md
================================================
<h1 align="center">Design React Kit</h1>
<p align="center">
<img src=".github/react-logo.png" alt="react-logo" width="120px" height="auto"/>
<br>
<i>Design React Kit is a toolkit based on Bootstrap Italia
<br> to build React web application.</i>
<br>
</p>
<p align="center">
<a href="https://italia.github.io/design-react-kit"><strong>italia.github.io/design-react-kit</strong></a>
<br>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/design-react-kit"><img src="https://img.shields.io/npm/v/design-react-kit.svg" alt="NPM"></a>
<a href="https://github.com/italia/design-react-kit/actions"><img src="https://github.com/italia/design-react-kit/actions/workflows/ci.yml/badge.svg" alt="Build"></a>
<a href="https://codecov.io/gh/italia/design-react-kit"><img src="https://codecov.io/gh/italia/design-react-kit/branch/main/graph/badge.svg?token=0Ud6YSFi0r" alt="codecov"></a>
<a href="https://github.com/italia/design-react-kit/blob/main/LICENSE"><img src="https://img.shields.io/github/license/italia/design-react-kit.svg" alt="License"></a>
<a href="https://github.com/italia/design-react-kit/issues"><img src="https://img.shields.io/github/issues/italia/design-react-kit.svg" alt="GitHub issues"></a>
</p>
<p align="center">
<a href="https://developersitalia.slack.com/messages/C04J92F9XM2/">
<img src="https://img.shields.io/badge/Slack%20channel-%23design--dev--react-blue.svg" alt="Join the #design-system-react channel" />
</a>
<a href="https://slack.developers.italia.it/">
<img src="https://slack.developers.italia.it/badge.svg" alt="Get invited" />
</a>
</p>
_Read this in other languages: [Italiano 🇮🇹](README.md)._
_⚠️ Warning: This kit was designed to work with Bootstrap Italia version 2.x. The kit for version 1.x of Bootstrap Italia has been deprecated and is located on the [4.x] branch (https://github.com/italia/design-react-kit/tree/4.x)._
## Intro
**Design React kit** is a set of React components that implements [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) and [Design UI Kit](https://github.com/italia/design-ui-kit) styling.
Components are showcased with [Storybook](https://storybook.js.org/).
Public version of Storybook is available [here](https://italia.github.io/design-react-kit) for the latest stable release.
To play with the library, the [Playground React Kit](https://github.com/italia/design-react-kit-playground) is available.
# Table of contents
- [Table of contents](#table-of-contents)
- [Usage](#usage)
- [Add bootstrap-italia and fonts](#add-bootstrap-italia-and-fonts)
- [Example](#example)
- [Loading Fonts](#loading-fonts)
- [Peer dependencies](#peer-dependencies)
- [How to contribute 💙](#how-to-contribute-)
- [How to contribute with your own code](#how-to-contribute-with-your-own-code)
- [How to create new components](#how-to-create-new-components)
- [Snapshot tests](#snapshot-tests)
- [Building library](#building-library)
- [Useful links](#useful-links)
- [Browsers support](#browsers-support)
- [TypeScript typing definitions](#typescript-typing-definitions)
- [Main contributors](#main-contributors)
## Usage
To use Design React as a dependency in your React project you can install it from [npm](https://www.npmjs.com/~italia). We suggest to use `create vite` to create a new React webapp from scratch as follows:
```sh
yarn create vite my-react-app --template react
cd nome-app
yarn add design-react-kit --save
```
More information on creating a new app with React:
- [Official documentation](https://react.dev/learn/start-a-new-react-project)
- [Vitejs](https://vitejs.dev/guide/#getting-started)
### Add bootstrap-italia and fonts
The `design-react-kit` module does not include the CSS and font files in the bundle, so this needs to be installed as well:
```sh
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:
```tsx
import React from 'react';
import './App.css';
import { Alert } from 'design-react-kit';
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css';
import 'typeface-titillium-web';
import 'typeface-roboto-mono';
import 'typeface-lora';
function App() {
return <Alert>This is an Alert</Alert>;
}
export default App;
```
You can consult this web template with StackBlitz:
[Web template](https://stackblitz.com/edit/vitejs-vite-yy8bnk?file=src%2FApp.tsx)
### Loading Fonts
The Bootstrap Italia theme defines a specific set of font typefaces to work: `titillium-web`, `roboto-mono` and `lora`. The loading of this set of fonts can be left to the browser or controlled: in this last case it is necessary to use the `FontLoader` component exported by the library.
Declaring the `FontLoader` on top of the Application tree it is enough to trigger the loading of the fonts.
As alternative it is required to manually manage the loading via the `webfontloader` package:
```js
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']
}
});
```
### Peer dependencies
The library does not include `react` and `react-dom`, avoiding versions clashing and increasing the size of the bundle.
For this reason, for local development it will be necessary to manually install dependencies.
The command to be executed is
```sh
yarn install --peers
```
or alternatively manually
```sh
yarn install react react-dom
```
## How to contribute 💙
👉🏻 You can contribute to the library in various ways:
- With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-react-kit/issues) of React Kit (even a comment on the issue to notify the desire to take charge).
- By reporting bugs or improvements to the React Kit [official repository](https://github.com/italia/design-react-kit/).
- By writing to us on the [dedicated channel](https://developersitalia.slack.com/messages/C04J92F9XM2/) of Slack.
## How to contribute with your own code
The minimum requirements of your local environment should be:
- NodeJS (>= 18)
- Yarn
Clone the repo and run `yarn` to install the dependencies.
Then run the `yarn storybook:serve` command to start the development server.
Storybook will therefore be available at http://localhost:9001/
Public version of the Storybook is available [here](https://italia.github.io/design-react-kit).
Storybook has been enriched with some `addons` that make it more talented. Check dependencies on the `package.json` file for details.
## How to create new components
This section explains how to create new components in the repository.
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/Button` path and its structure is as follows:
```
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
```
Some basic rules for structuring the components:
- TSX file component files use JSX syntax.
- The `.stories.tsx` files only contains examples relative to component.
- The `.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.
Documentation:
- [Storybook](https://storybook.js.org/docs/get-started)
- [MDX](https://storybook.js.org/docs/writing-docs/mdx)
### 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:
```sh
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.
## Building library
To build the library and add files into the `dist` folder:
```sh
yarn build
```
## Useful links
- [Playground React Kit](https://github.com/italia/design-react-kit-playground)
## Browsers support
The design kit follows the Guidelines for Public Services Design, within the Section [6.3.1.2.1. Supporto browser](https://docs.italia.it/italia/designers-italia/design-linee-guida-docs/it/2020.1/doc/user-interface/lo-sviluppo-di-un-interfaccia-e-i-web-kit.html#strumenti) via the package `browserslist-config-design-italia`.
## TypeScript typing definitions
The library has been rewritten in Typescript and types are exported in the bundle.
## Main contributors
A special thank you to those who made the development of this library possible!
| [](https://github.com/sabato-galasso) | [](https://github.com/dej611) | [](https://github.com/Virtute90) | [](https://github.com/federico-ntr) |
| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
and thanks to [OpenCity Labs](https://opencitylabs.it) team
<a href="https://opencitylabs.it"><img src="https://opencitylabs.it/wp-content/themes/opencity/assets/img/opencitylabs.png" alt="OpenCity Labs" width="300"></a>
---
All contributors (_made with [contributors-img](https://contrib.rocks)_)
<a href = "https://github.com/italia/design-react-kit/graphs/contributors">
<img src = "https://contrib.rocks/image?repo=italia/design-react-kit"/>
</a>
================================================
FILE: README.md
================================================
<h1 align="center">Design React Kit</h1>
<p align="center">
<img src=".github/react-logo.png" alt="react-logo" width="120px" height="auto"/>
<br>
<i>Design React Kit è un toolkit basato su Bootstrap Italia
<br> per la creazione di applicazioni web sviluppate con React.</i>
<br>
</p>
<p align="center">
<a href="https://italia.github.io/design-react-kit"><strong>italia.github.io/design-react-kit</strong></a>
<br>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/design-react-kit"><img src="https://img.shields.io/npm/v/design-react-kit.svg" alt="NPM"></a>
<a href="https://github.com/italia/design-react-kit/actions"><img src="https://github.com/italia/design-react-kit/actions/workflows/ci.yml/badge.svg" alt="Build"></a>
<a href="https://codecov.io/gh/italia/design-react-kit"><img src="https://codecov.io/gh/italia/design-react-kit/branch/main/graph/badge.svg?token=0Ud6YSFi0r" alt="codecov"></a>
<a href="https://github.com/italia/design-react-kit/blob/main/LICENSE"><img src="https://img.shields.io/github/license/italia/design-react-kit.svg" alt="License"></a>
<a href="https://github.com/italia/design-react-kit/issues"><img src="https://img.shields.io/github/issues/italia/design-react-kit.svg" alt="GitHub issues"></a>
</p>
<p align="center">
<a href="https://developersitalia.slack.com/messages/C04J92F9XM2/">
<img src="https://img.shields.io/badge/Slack%20channel-%23design--dev--react-blue.svg" alt="Join the #design-system-react channel" />
</a>
<a href="https://slack.developers.italia.it/">
<img src="https://slack.developers.italia.it/badge.svg" alt="Get invited" />
</a>
</p>
_Read this in other languages: [English 🇬🇧](README.EN.md)._
_⚠️ Attenzione: questo kit è stato progettato per funzionare con la versione 2.x di Bootstrap Italia. Il kit per la versione 1.x di Bootstrap Italia è stato deprecato e si trova sul branch [4.x](https://github.com/italia/design-react-kit/tree/4.x)._
## Intro
**Design React kit** è un set di componenti React che implementa [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) e gli stili presenti su [Design UI Kit](https://github.com/italia/design-ui-kit).
Per navigare la libreria e visualizzare i componenti, è stato utilizzato [Storybook](https://storybook.js.org/).
La versione pubblica dello Storybook è disponibile [qui](https://italia.github.io/design-react-kit) per l'ultima release stabile pubblicata.
Per giocare con la libreria è disponibile il [Playground React Kit](https://github.com/italia/design-react-kit-playground).
# Indice
- [Indice](#indice)
- [Come usare il kit](#come-usare-il-kit)
- [Aggiungere bootstrap-italia ed i font](#aggiungere-bootstrap-italia-ed-i-font)
- [Esempio](#esempio)
- [Caricamento Font](#caricamento-font)
- [Peer dependencies](#peer-dependencies)
- [Come contribuire 💙](#come-contribuire-)
- [Con il codice](#con-il-codice)
- [Impostare l'ambiente locale](#impostare-lambiente-locale)
- [Come creare nuovi componenti](#come-creare-nuovi-componenti)
- [Snapshot tests](#snapshot-tests)
- [Compilazione libreria](#compilazione-libreria)
- [Link utili](#link-utili)
- [Supporto browsers](#supporto-browsers)
- [TypeScript typings](#typescript-typings)
- [Contributor della libreria](#contributor-della-libreria)
## Come usare il kit
Per utilizzare Design React come dipendenza in un'app è possibile installarla da [npm](https://www.npmjs.com/~italia). Suggeriamo di usare `create vite` per creare una nuova webapp React, come segue:
```sh
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --save
```
Maggiori informazioni per crere una nuova app con React:
- [Documentazione ufficiale](https://react.dev/learn/start-a-new-react-project)
- [Vitejs](https://vitejs.dev/guide/#getting-started)
### Aggiungere bootstrap-italia ed i font
Il `design-react-kit` non include il CSS ed i file font, ed è quindi necessario installarli a parte:
```sh
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save
```
### Esempio
A questo punto, è sufficiente importare esplicitamente nella app CSS e font se si è usato `create vite` all'interno del file `./src/App.js`:
```tsx
import React from 'react';
import './App.css';
import { Alert } from 'design-react-kit';
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css';
import 'typeface-titillium-web';
import 'typeface-roboto-mono';
import 'typeface-lora';
function App() {
return <Alert>This is an Alert</Alert>;
}
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`.
È sufficiente dichiarare il componente `FontLoader` in cima all'app react per permettere il caricamento.
In alternativa è necessario gestire il caricamento dei font manualmente mediante il pacchetto `webfontloader`:
```js
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']
}
});
```
### Peer dependencies
La libreria non include `react` e `react-dom`, evitando clashing di versioni e aumento inutile delle dimensioni del bundle.
Per questo motivo per lo sviluppo in locale sarà necessario installare manualmente le dipendenze.
Il comando da eseguire è
```sh
yarn install --peers
```
oppure in alternativa manualmente
```sh
yarn install react react-dom
```
## Come contribuire 💙
👉🏻 È possibile contribuire alla libreria in vari modi:
- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-react-kit/issues) di React Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit.
- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack.
### Con il codice
Vorresti dare una mano su Design React Kit? **Sei nel posto giusto!**
Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle
[linee guida di design per i servizi web della PA](https://design-italia.readthedocs.io/it/stable/index.html),
e fai riferimento alle [indicazioni su come contribuire a Design React Kit](https://github.com/italia/design-react-kit/blob/main/CONTRIBUTING.md).
### Impostare l'ambiente locale
I requisiti minimi del tuo ambiente locale devono essere:
- NodeJS (>= 18)
- Yarn
Clona il repository ed esegui `yarn` per installare le dipendenze.
Quindi esegui
```sh
yarn storybook:serve
```
per avviare il server di sviluppo.
Storybook sarà quindi disponibile all'indirizzo http://localhost:9001/
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 cartella `src`: ogni componente possiede una sua cartella con tutto ciò che è necessario per farlo funzionare.
Le storie `Storybook` invece sono sotto `stories`.
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
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
```
Alcune regole di base per strutturare i componenti:
- I file TSX file del componente utilizza la sintassi JSX.
- I file `.stories.tsx` dovrebbero contenere solo quanto relativo al componente stesso.
- I file `.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.
Documentazione:
- [Storybook](https://storybook.js.org/docs/get-started)
- [MDX](https://storybook.js.org/docs/writing-docs/mdx)
### 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:
```sh
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.
## Compilazione libreria
Per compilare la libreria e generare i file nella cartella `dist`, è sufficiente lanciare il comando dedicato:
```sh
yarn build
```
## Link utili
- [Playground React Kit](https://github.com/italia/design-react-kit-playground)
## Supporto browsers
Il kit segue le indicazioni riportate nelle Linee Guida di Design per i servizi web della Pubblica Amministrazione, sezione [6.3.1.2.1. Supporto browser](https://docs.italia.it/italia/designers-italia/design-linee-guida-docs/it/2020.1/doc/user-interface/lo-sviluppo-di-un-interfaccia-e-i-web-kit.html#strumenti) mediante l'utilizzo del pacchetto `browserslist-config-design-italia`.
## TypeScript typings
La libreria è stata portata a Typescript ed i tipi sono esportati con essa.
## Contributor della libreria
Un grazie speciale a chi ha reso possibile lo sviluppo di questa libreria!
| [](https://github.com/sabato-galasso) | [](https://github.com/dej611) | [](https://github.com/Virtute90) | [](https://github.com/federico-ntr) |
| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
e al contributo di [OpenCity Labs](https://opencitylabs.it)
<a href="https://opencitylabs.it"><img src="https://opencitylabs.it/wp-content/themes/opencity/assets/img/opencitylabs.png" alt="OpenCity Labs" width="300"></a>
---
Tutti i contributor (_made with [contributors-img](https://contrib.rocks)_)
<a href = "https://github.com/italia/design-react-kit/graphs/contributors">
<img src = "https://contrib.rocks/image?repo=italia/design-react-kit"/>
</a>
================================================
FILE: assets/css/accesibility.css
================================================
.bd-callout-accessibility {
border-left-color: #10925f !important;
}
.bd-callout {
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid #eee;
border-left-width: .25rem;
border-radius: .25rem;
}
================================================
FILE: assets/css/storybook-fixes.css
================================================
/* ==========================
// `<pre>` and `<code>` tags.
// ========================== */
pre,
code,
sbdocs-preview > code .token[class],
sbdocs-preview > code .token.comment[class] {
font-style: normal;
color: #f8f8f2;
}
pre > code,
pre > code[class] {
outline: 0;
display: block;
font-size: 13px;
tab-size: 2;
padding: 1em;
overflow-x: auto;
}
/* =======================================
// Fix incorrect Storybook implementation.
// ======================================= */
[class] > pre.hljs[class] {
overflow: hidden;
padding: 0;
white-space: pre;
}
[class] > pre.hljs[class] > code {
background-color: transparent;
border-radius: 0;
}
/* =======================================
// Specific tweak for the Storybook documentation
// ======================================= */
/* Fix docs wrapper alignment and padding */
.sbdocs.css-qunf3a {
justify-content: left;
padding: 3rem;
}
/* Fix TOC size */
.css-zpcrvf {
width: auto !important;
}
.docs .callout {
max-width: none;
}
.bg-grey {
background-color: #e9e6f2 !important;
}
.bg-dark {
background-color: #17324d !important;
}
.btn-example .btn {
margin: 4px 8px;
width: 200px;
}
.square-color {
width: 150px;
height: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
margin-right: 15px;
float: left;
}
.c-line {
height: 60px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
margin-bottom: 8px;
}
.docs-show-dropdown-open div {
position: relative !important;
display: block !important;
}
div[id*='story'] .progress + .progress {
margin-top: 1rem;
}
div[id*='componenti-bottomnav'] > div {
max-width: 375px;
height: 240px;
margin: 0 5px 20px;
padding: 0;
border-top-style: dashed;
position: relative;
padding: 1rem;
margin-top: 1rem;
border: solid #f3f3f5;
border-width: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 0;
border-width: 0.2rem;
}
div[id*='componenti-bottomnav'] > div::after {
display: block;
clear: both;
content: '';
}
div[id*='componenti-bottomnav'] .bottom-nav {
position: absolute;
}
.test-docs .notification {
position: relative;
}
.test-desktop {
width: 100%;
height: 500px;
background: #fafafa;
border: 1px solid #eee;
position: relative;
overflow: hidden;
}
.test-desktop .notification {
position: absolute;
display: block;
}
.layout-example.docs .d-flex,
.layout-example.docs .row {
background-image:
linear-gradient(45deg, #d9dadb 25%, transparent 25%), linear-gradient(-45deg, #d9dadb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #d9dadb 75%), linear-gradient(-45deg, transparent 75%, #d9dadb 75%);
background-size: 20px 20px;
background-position:
0 0,
0 10px,
10px -10px,
-10px 0;
}
.layout-example.docs .row > .col,
.layout-example.docs .row > [class^='col-'] {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background-color: rgba(0, 102, 204, 0.75);
border: 1px solid #06c;
color: #fff;
}
.toolbar-docs-style {
max-width: 400px;
height: 400px;
}
/* =======================================
// Display Back to top button inline in the docs
// ======================================= */
.back-to-top:not(.example) {
position: relative;
bottom: unset;
right: unset;
visibility: visible;
margin: 0 auto;
opacity: 1;
transform: scale(1);
}
.callout-inner p {
margin-top: 0;
}
================================================
FILE: assets/docs/scss/_callouts.scss
================================================
.bd-callout {
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid #eee;
border-left-width: 0.25rem;
border-radius: 0.25rem;
h4 {
margin-top: 0;
margin-bottom: 0.25rem;
}
h3 {
margin-top: 0;
margin-bottom: 0.25rem;
}
p:last-child {
margin-bottom: 0;
}
code {
border-radius: 0.25rem;
}
& + .bd-callout {
margin-top: -0.25rem;
}
}
// Variations
@mixin bs-callout-variant($color) {
border-left-color: darken($color, 10%);
h4 {
color: darken($color, 10%);
}
h3 {
color: darken($color, 10%);
}
}
.bd-callout-info {
@include bs-callout-variant($docs-info);
}
.bd-callout-warning {
@include bs-callout-variant($docs-warning);
}
.bd-callout-danger {
@include bs-callout-variant($docs-danger);
}
.bd-callout-accessibility {
h4 {
color: $docs-accessibility;
}
border-left-color: lighten($docs-accessibility, 10%);
h3 {
color: $docs-accessibility;
}
border-left-color: lighten($docs-accessibility, 10%);
}
================================================
FILE: assets/docs/scss/_colors.scss
================================================
//
// Docs color palette classes
//
@each $color, $value in $colors {
.swatch-#{$color} {
color: color-contrast($value);
background-color: #{$value};
}
}
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
background-color: #{$value};
}
}
@each $color, $value in $grays {
.swatch-#{$color} {
color: color-contrast($value);
background-color: #{$value};
}
}
$primary-bright: lighten(saturate($primary, 5%), 15%) !default;
$primary-light: lighten(saturate($primary, 5%), 45%) !default;
$docs-info: rgb(23, 50, 77) !default;
$docs-warning: rgb(255, 151, 0) !default;
$docs-danger: rgb(248, 62, 90) !default;
$docs-accessibility: rgb(11, 100, 65) !default;
$docs-dark: #3e5266 !default;
================================================
FILE: assets/docs/scss/bi-fonts.scss
================================================
$font-path: '../../../node_modules/bootstrap-italia/dist/fonts';
/* Titillium+Web:300,400,600,700 */
/* titillium-web-300 - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.ttf')
format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.svg#TitilliumWeb')
format('svg'); /* Legacy iOS */
}
/* titillium-web-300italic - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-regular - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-italic - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700 - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.ttf')
format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.svg#TitilliumWeb')
format('svg'); /* Legacy iOS */
}
/* titillium-web-700italic - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-600 - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.ttf')
format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.svg#TitilliumWeb')
format('svg'); /* Legacy iOS */
}
/* titillium-web-600italic - latin-ext_latin */
@font-face {
font-family: 'Titillium Web';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* Lora:400,700 */
/* lora-regular - latin-ext_latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.woff') format('woff'),
/* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.ttf') format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-700 - latin-ext_latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.woff') format('woff'),
/* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.ttf') format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-italic - latin-ext_latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.woff') format('woff'),
/* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.ttf') format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-700italic - latin-ext_latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.woff') format('woff'),
/* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.ttf') format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.svg#Lora') format('svg'); /* Legacy iOS */
}
/* Roboto+Mono:400,700 */
/* roboto-mono-regular - latin-ext_latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.svg#RobotoMono')
format('svg'); /* Legacy iOS */
}
/* roboto-mono-700 - latin-ext_latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff') format('woff'),
/* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.ttf') format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.svg#RobotoMono')
format('svg'); /* Legacy iOS */
}
/* roboto-mono-italic - latin-ext_latin */
@font-face {
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.ttf') format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.svg#RobotoMono')
format('svg'); /* Legacy iOS */
}
/* roboto-mono-700italic - latin-ext_latin */
@font-face {
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
src:
local(''),
url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff')
format('woff'),
/* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.ttf')
format('truetype'),
/* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.svg#RobotoMono')
format('svg'); /* Legacy iOS */
}
================================================
FILE: assets/docs/scss/docs.scss
================================================
/*!
* Bootstrap Docs (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/.
*/
// Dev notes
//
// Background information on nomenclature and architecture decisions here.
//
// - Bootstrap functions, variables, and mixins are included for easy reuse.
// Doing so gives us access to the same core utilities provided by Bootstrap.
// For example, consistent media queries through those mixins.
//
// - Bootstrap's **docs variables** are prefixed with `$docs-`.
// These custom colors avoid collision with the components Bootstrap provides.
//
// - Classes are prefixed with `.bd-`.
// These classes indicate custom-built or modified components for the design
// and layout of the Bootstrap docs. They are not included in our builds.
//
// Happy Bootstrapping!
@import '../../../node_modules/bootstrap-italia/src/scss/base/functions';
@import '../../../node_modules/bootstrap-italia/src/scss/base/mixins';
@import '../../../node_modules/bootstrap-italia/src/scss/base/variables';
// Load docs components
@import 'colors';
@import 'callouts';
================================================
FILE: babel.config.json
================================================
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-transform-optional-chaining"]
}
================================================
FILE: codecov.yml
================================================
coverage:
status:
project:
default:
target: 90%
threshold: 5%
patch: false
================================================
FILE: commitlint.config.cjs
================================================
module.exports = {
parserPreset: 'conventional-changelog-conventionalcommits',
rules: {
'body-leading-blank': [1, 'always'],
'body-max-line-length': [2, 'always', 100],
'footer-leading-blank': [1, 'always'],
'footer-max-line-length': [2, 'always', 100],
'header-max-length': [2, 'always', 100],
'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
'subject-empty': [2, 'never'],
'subject-full-stop': [2, 'never', '.'],
'type-case': [2, 'always', 'lower-case'],
'type-empty': [2, 'never'],
'type-enum': [
2,
'always',
['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']
]
},
prompt: {
questions: {
type: {
description: "Select the type of change that you're committing",
enum: {
feat: {
description: 'A new feature',
title: 'Features',
emoji: '✨'
},
fix: {
description: 'A bug fix',
title: 'Bug Fixes',
emoji: '🐛'
},
docs: {
description: 'Documentation only changes',
title: 'Documentation',
emoji: '📚'
},
style: {
description:
'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',
title: 'Styles',
emoji: '💎'
},
refactor: {
description: 'A code change that neither fixes a bug nor adds a feature',
title: 'Code Refactoring',
emoji: '📦'
},
perf: {
description: 'A code change that improves performance',
title: 'Performance Improvements',
emoji: '🚀'
},
test: {
description: 'Adding missing tests or correcting existing tests',
title: 'Tests',
emoji: '🚨'
},
build: {
description:
'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',
title: 'Builds',
emoji: '🛠'
},
ci: {
description:
'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',
title: 'Continuous Integrations',
emoji: '⚙️'
},
chore: {
description: "Other changes that don't modify src or test files",
title: 'Chores',
emoji: '♻️'
},
revert: {
description: 'Reverts a previous commit',
title: 'Reverts',
emoji: '🗑'
}
}
},
scope: {
description: 'What is the scope of this change (e.g. component or file name)'
},
subject: {
description: 'Write a short, imperative tense description of the change'
},
body: {
description: 'Provide a longer description of the change'
},
isBreaking: {
description: 'Are there any breaking changes?'
},
breakingBody: {
description: 'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself'
},
breaking: {
description: 'Describe the breaking changes'
},
isIssueAffected: {
description: 'Does this change affect any open issues?'
},
issuesBody: {
description:
'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself'
},
issues: {
description: 'Add issue references (e.g. "fix #123", "re #123".)'
}
}
}
};
================================================
FILE: eslint.config.js
================================================
import js from '@eslint/js';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
import tseslint from 'typescript-eslint';
export default tseslint.config(
{ ignores: ['node_modules', 'storybook-static', 'dist', 'coverage'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['src/**/*.{ts,tsx}', 'stories/**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser
},
plugins: {
'react-refresh': reactRefresh
},
rules: {
'react-refresh/only-export-components': ['off', { allowConstantExport: true }]
}
}
);
================================================
FILE: jest-setup.js
================================================
import '@testing-library/jest-dom'
================================================
FILE: jest.config.cjs
================================================
/**
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/
/** @type {import('jest').Config} */
const config = {
// All imported modules in your tests should be mocked automatically
// automock: false,
// Stop running tests after `n` failures
// bail: 0,
// The directory where Jest should store its cached dependency information
// cacheDirectory: "/tmp/jest_rs",
// Automatically clear mock calls, instances, contexts and results before every test
clearMocks: true,
// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,
// The directory where Jest should output its coverage files
coverageDirectory: 'coverage',
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "/node_modules/"
// ],
// Indicates which provider should be used to instrument code for coverage
coverageProvider: 'v8',
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,
// A path to a custom dependency extractor
// dependencyExtractor: undefined,
// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,
// The default configuration for fake timers
// fakeTimers: {
// "enableGlobally": false
// },
// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],
// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,
// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,
// A set of global variables that need to be available in all test environments
// globals: {},
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",
// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],
// An array of file extensions your modules use
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'mdx'],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: {
'^.+.(svg|png|jpg)$': 'jest-transform-stub',
'^.+\\.css$': 'identity-obj-proxy',
'^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx'
},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],
// Activates notifications for test results
// notify: false,
// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",
// A preset that is used as a base for Jest's configuration
// preset: undefined,
// Run tests from one or more projects
// projects: undefined,
// Use this configuration option to add custom reporters to Jest
// reporters: undefined,
// Automatically reset mock state before every test
// resetMocks: false,
// Reset the module registry before running each individual test
// resetModules: false,
// A path to a custom resolver
// resolver: undefined,
// Automatically restore mock state and implementation before every test
// restoreMocks: false,
// The root directory that Jest should scan for tests and modules within
// rootDir: undefined,
// A list of paths to directories that Jest should use to search for files in
// roots: [
// "<rootDir>"
// ],
// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",
// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],
// A list of paths to modules that run some code to configure or set up the testing framework before each test
setupFilesAfterEnv: ['./jest-setup.js'], //setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],
// The test environment that will be used for testing
testEnvironment: 'jsdom',
// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},
// Adds a location field to test results
// testLocationInResults: false,
// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [
// "/node_modules/"
// ],
// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],
// This option allows the use of a custom results processor
// testResultsProcessor: undefined,
// This option allows use of a custom test runner
// testRunner: "jest-circus/runner",
// A map from regular expressions to paths to transformers
transform: {
'.(ts|tsx)$': 'ts-jest',
'.(js|jsx)$': 'babel-jest'
},
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
transformIgnorePatterns: [
"/node_modules/(?!uuid)/"
// "\\.pnp\\.[^\\/]+$"
],
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,
// Indicates whether each individual test should be reported during the run
// verbose: undefined,
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],
// Whether to use watchman for file crawling
// watchman: true,
};
module.exports = config;
================================================
FILE: package.json
================================================
{
"name": "design-react-kit",
"description": "Componenti React per Bootstrap 5",
"keywords": [
"react",
"bootstrap",
"bootstrap-italia"
],
"author": "Presidenza del Consiglio dei Ministri",
"contributors": [
"Matteo Avesani",
"Gianluca Esposito",
"Matteo Manchi",
"Paolo Mariotti",
"Marco Liberati",
"Francesco Zaia",
"Sanyam Dogra",
"Silvio Relli",
"Sabatino Galasso",
"Andrea Stagi",
"Federico Turbino",
"Nicola Squartini",
"Davide Bizzi"
],
"bugs": {
"url": "https://github.com/italia/design-react-kit/issues"
},
"version": "5.10.0",
"license": "BSD-3",
"type": "module",
"module": "./dist/index.js",
"main": "./dist/index.cjs",
"types": "./dist/types/index.d.ts",
"exports": {
".": {
"types": "./dist/types/index.d.ts",
"module": "./dist/index.js",
"main": "./dist/index.cjs"
}
},
"sideEffects": [
"dist/track-focus.js",
"src/track-focus.js",
"dist/index.ts",
"dist/index.js",
"src/index.ts"
],
"files": [
"dist",
"src"
],
"repository": {
"type": "git",
"url": "git+https://github.com/italia/design-react-kit.git"
},
"engines": {
"node": ">=20"
},
"scripts": {
"start": "NODE_OPTIONS=--max_old_space_size=16384 npm run storybook:serve",
"build": "tsup && tsc",
"test": "jest ./src ./test --passWithNoTests",
"test:ci": "jest ./src ./test --passWithNoTests --runInBand --ci",
"lint": "npx eslint .",
"prepare": "tsup && tsc && husky install",
"format-code": "npx prettier . --write",
"storybook:serve": "storybook dev -p 9001",
"storybook:build": "storybook build --docs",
"storybook:build:base": "storybook build",
"version": "conventional-changelog -p angular -i CHANGELOG.md -s && node scripts/wait-confirm && git add CHANGELOG.md",
"postversion": "echo \"You can now publish your version using 'git push --follow-tags'\""
},
"peerDependencies": {
"bootstrap-italia": "^2.18.0",
"react": ">=18.2.0"
},
"browserslist": [
"extends browserslist-config-design-italia"
],
"lint-staged": {
"./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.25.9",
"@babel/preset-typescript": "^7.26.0",
"@commitlint/cli": "^18.4.3",
"@commitlint/config-conventional": "^18.4.3",
"@eslint/js": "^9.10.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.3.0",
"@types/is-number": "^7.0.3",
"@types/jest": "^29.5.12",
"@types/node": "^20.12.2",
"@types/react": "^18.2.75",
"@types/react-bootstrap": "^0.32.37",
"@types/react-dom": "^18.2.24",
"@types/react-transition-group": "^4.4.10",
"@types/uuid": "^10.0.0",
"bootstrap-italia": "^2.18.0",
"browserslist-config-design-italia": "^1.0.0",
"conventional-changelog": "^7.1.1",
"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",
"jest-environment-jsdom": "^29.7.0",
"jest-transform-stub": "^2.0.0",
"lint-staged": "15.2.10",
"prettier": "^3.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-layout-masonry": "^1.2.0",
"sass-embedded": "^1.90.0",
"storybook": "^9.1.2",
"ts-jest": "^29.1.2",
"tslib": "^2.4.0",
"tsup": "^8.0.2",
"typeface-lora": "^1.1.13",
"typeface-roboto-mono": "^1.1.13",
"typescript": "^5.4.5",
"typescript-eslint": "^8.4.0",
"vite": "^6.4.2"
},
"dependencies": {
"@splidejs/react-splide": "^0.7.12",
"accessible-autocomplete": "^3.0.1",
"classnames": "^2.3.1",
"is-number": "^7.0.0",
"react-bootstrap": "^2.10.6",
"react-toastify": "^7.0.4",
"react-transition-group": "^4.4.5",
"reactstrap": "9.2.2",
"webfontloader": "^1.6.28"
},
"resolutions": {
"@types/react": "18.2.75",
"@types/react-dom": "18.2.24"
},
"overrides": {
"react-stickup": {
"react": "^18.2.0"
}
}
}
================================================
FILE: publiccode.yml
================================================
publiccodeYmlVersion: 0.5.0
name: Design React Kit
applicationSuite: Design system Italia
url: https://github.com/italia/design-react-kit
softwareVersion: v5.10.0
releaseDate: '2026-03-17'
platforms:
- web
categories:
- website-builder
- integrated-library-system
- it-development
- design
organisation:
uri: urn:x-italian-pa:pcm
name: Dipartimento per la trasformazione digitale
roadmap: https://github.com/orgs/italia/projects/17/views/5?filterQuery=repo%3Aitalia%2Fdesign-react-kit
developmentStatus: stable
softwareType: library
intendedAudience:
countries:
- IT
description:
it-IT:
shortDescription: Libreria di componenti React per sviluppare interfacce web
accessibili e coerenti per i siti e i servizi digitali della PA.
longDescription: Il Design React Kit, risorsa ufficiale del Design system
Italia, è una libreria di componenti sviluppati con React, pensata per
supportare la realizzazione di interfacce web per siti e servizi digitali
della Pubblica Amministrazione. Costruito sulle fondamenta di Bootstrap
Italia, ne eredita funzionalità, componenti, griglia e classi di utilità,
rendendoli disponibili in forma riutilizzabile all'interno di applicazioni
React. Il kit consente di sviluppare interfacce accessibili, inclusive e
semplici da mantenere, supportando la creazione di applicazioni web
dinamiche.
documentation: https://italia.github.io/design-react-kit/
features:
- Componenti React pronti all'uso
- Basato su Bootstrap Italia
- Implementa lo UI Kit Italia
- Realizzazione di interfacce responsive e accessibili
- Integrazione in applicazioni React
- Riutilizzo dei componenti
- Conformità alle Linee guida di design per i siti internet e servizi
digitali della PA
legal:
license: BSD-3-Clause-Clear
maintenance:
type: community
contacts:
- name: Designers Italia
email: contatti@designers.italia.it
localisation:
localisationReady: false
availableLanguages:
- it
================================================
FILE: scripts/import_svgs.sh
================================================
#!/bin/sh
# Import icons from BI and make them TS React components
echo 'Importing SVGs...'
npx svgr node_modules/bootstrap-italia/src/svg | tee src/Icon/assets/index.ts
echo 'Linting new components...'
npx eslint src/Icon/assets/*.ts* --fix
echo 'Reconfigure tests for new icons...'
# Find out what SVGs have no title tag and print them into a txt file used for testing
find node_modules/bootstrap-italia/src/svg -iname "*.svg" -exec grep -Li "title" {} + | xargs -L 1 basename > ./test/icons-with-no-title.txt
================================================
FILE: scripts/svgIndexTemplate.js
================================================
const path = require('path');
const kebabCase = (string) =>
string
.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/\s+/g, '-')
.toLowerCase();
function defaultIndexTemplate(filePaths) {
const iconsMap = [];
const switchCases = [];
for (const filePath of filePaths) {
const basename = path.basename(filePath, path.extname(filePath));
const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename;
const kebabName = kebabCase(exportName);
iconsMap.push(kebabName);
switchCases.push(`case '${kebabName}': {
return import('./${exportName}');
}`);
}
const file = `
const iconList: Record<string, boolean> = {
${iconsMap.map((name) => ` "${name}": true,`).join('\n')}
};
export type IconName = keyof typeof iconList;
export const loadIcon = (
name: IconName
) => {
switch (name) {
${switchCases.join('\n')}
default:
throw Error(\`It should not land here. Requested icon: "\${name}"\`);
}
};
export function isBundledIcon(name: string): name is IconName {
return name in iconList;
}
export const allIcons = Object.keys(iconList)
`;
return file;
}
module.exports = defaultIndexTemplate;
================================================
FILE: scripts/svgTemplate.js
================================================
function defaultTemplate({ imports, componentName, props, jsx, interfaces }, { tpl }) {
return tpl`${imports}
${interfaces}
export const component = (${props}) => {
return ${jsx};
};
`;
}
module.exports = defaultTemplate;
================================================
FILE: scripts/wait-confirm.js
================================================
var stdin = process.stdin;
console.log('⌨️ Press any key to continue or ctrl+c to abort...');
stdin.resume();
stdin.setEncoding('utf8');
stdin.on('data', function (key) {
if (key === '\u0003') {
process.exit(1);
} else {
process.exit(0);
}
});
================================================
FILE: src/Accordion/Accordion.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classNames from 'classnames';
export interface AccordionProps extends HTMLAttributes<HTMLElement> {
/** 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;
testId?: string;
}
export const Accordion: FC<AccordionProps> = ({
tag = 'div',
className,
background,
iconLeft = false,
testId,
...attributes
}) => {
const Tag = tag;
const classes = classNames('accordion', className, {
'accordion-background-active': background === 'active',
'accordion-background-hover': background === 'hover',
'accordion-left-icon': iconLeft
});
return <Tag {...attributes} className={classes} data-testid={testId} />;
};
================================================
FILE: src/Accordion/AccordionBody.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, PropsWithChildren, useCallback, useRef, useState } from 'react';
import { Transition } from 'react-transition-group';
import type { TransitionProps } from 'react-transition-group/Transition';
import { TransitionTimeouts, TransitionsKeys } from '../transitions';
import { omit, pick } from '../utils';
export type AccordionBodyProps = Partial<TransitionProps> & {
tag?: ElementType;
className?: string;
listClassName?: string;
active?: boolean;
onToggle?: () => void;
};
// hardcode these entries to avoid leaks
const transitionStatusToClassHash: Record<string, string> = {
entering: 'collapsing',
entered: 'collapse show',
exiting: 'collapsing',
exited: 'collapse'
};
function getTransitionClass(status: string) {
return transitionStatusToClassHash[status] || 'collapse';
}
function getHeight(node: HTMLElement) {
return node.scrollHeight;
}
export const AccordionBody = ({
className,
listClassName,
tag = 'div',
active = false,
children,
timeout = TransitionTimeouts.Collapse,
...attributes
}: PropsWithChildren<AccordionBodyProps>) => {
const [height, setHeight] = useState<null | number>(null);
const nodeRef = useRef<HTMLElement>(null);
const onEntering = useCallback(
(isAppearing: boolean) => {
if (nodeRef.current) {
setHeight(getHeight(nodeRef.current));
attributes.onEntering?.(nodeRef.current, isAppearing);
}
},
[attributes.onEntering]
);
const onEntered = useCallback(
(isAppearing: boolean) => {
setHeight(null);
if (nodeRef.current) {
attributes.onEntered?.(nodeRef.current, isAppearing);
}
},
[attributes.onEntered]
);
const onExit = useCallback(
() => {
if (nodeRef.current) {
setHeight(getHeight(nodeRef.current));
attributes.onExit?.(nodeRef.current);
}
},
[attributes.onExit]
);
const onExiting = useCallback(
() => {
if (nodeRef.current) {
// getting this variable triggers a reflow
// @ts-expect-error variabile non usata
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _unused = nodeRef.current.offsetHeight;
setHeight(0);
attributes.onExiting?.(nodeRef.current);
}
},
[attributes.onExiting]
);
const onExited = useCallback(
() => {
setHeight(null);
if (nodeRef.current) {
attributes.onExited?.(nodeRef.current);
}
},
[attributes.onExited]
);
const Tag = tag;
const transitionProps = pick(attributes, TransitionsKeys);
const childProps = omit(attributes, TransitionsKeys);
return (
<Transition
nodeRef={nodeRef}
timeout={timeout}
in={active}
onEntering={onEntering}
onEntered={onEntered}
onExit={onExit}
onExiting={onExiting}
onExited={onExited}
{...transitionProps}
>
{(status) => {
const transitionClass = getTransitionClass(status);
const classes = classNames(className, transitionClass);
const listClasses = classNames(listClassName, 'accordion-body');
const style = height == null ? null : { height };
return (
<Tag className={classes} ref={nodeRef} style={{ ...childProps.style, ...style }} {...childProps}>
<div className={listClasses}>{children}</div>
</Tag>
);
}}
</Transition>
);
};
================================================
FILE: src/Accordion/AccordionHeader.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes, ReactNode } from 'react';
export interface AccordionHeaderProps extends HTMLAttributes<HTMLElement> {
/** 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;
testId?: string;
}
export const AccordionHeader: FC<AccordionHeaderProps> = ({
className,
tag = 'button',
active = false,
append,
onToggle,
testId,
...attributes
}) => {
const Tag = tag;
const toggleClasses = classNames(className, 'accordion-button', {
collapsed: !active
});
return (
<div className='accordion-header' data-testid={testId}>
<Tag
aria-expanded={active ? 'true' : 'false'}
className={toggleClasses}
onClick={onToggle}
{...attributes}
{...(tag === 'button' && { type: 'button' })}
></Tag>
{append}
</div>
);
};
================================================
FILE: src/Accordion/AccordionItem.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';
export interface AccordionItemProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente */
className?: string;
}
export const AccordionItem: FC<AccordionItemProps> = ({ tag = 'div', className, ...attributes }) => {
const Tag = tag;
const classes = classNames('accordion-item', className);
return <Tag {...attributes} className={classes} />;
};
================================================
FILE: src/Alert/Alert.tsx
================================================
import React, { ElementType, FC, HTMLAttributes, MouseEventHandler, Ref } from 'react';
import { FadeProps, Alert as InnerAlert } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
// Copy over from reactstrap and add new ones
export interface AlertProps extends HTMLAttributes<HTMLElement> {
closeClassName?: string;
closeAriaLabel?: string;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
/** Le varianti di colore definite in Bootstrap Italia
* @default primary
*/
color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
/** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert.
* @default true */
fade?: boolean;
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
transition?: FadeProps;
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement>;
/** Quando abilitato mostra l'alert
* @default true
*/
isOpen?: boolean;
toggle?: MouseEventHandler<unknown>;
testId?: string;
}
export const Alert: FC<AlertProps> = ({ color = 'success', isOpen = true, fade = true, testId, ...props }) => {
const baseProps = {
color,
isOpen,
fade
};
return <InnerAlert data-testid={testId} {...baseProps} {...props} />;
};
================================================
FILE: src/Autocomplete/Autocomplete.tsx
================================================
import React, { FC, useEffect } from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore non ci sono i types
import BaseAutocomplete from 'accessible-autocomplete/react';
// Reference to https://www.npmjs.com/package/accessible-autocomplete
// Implementation example: https://github.com/alphagov/accessible-autocomplete/blob/main/examples/react/index.html
export interface AutocompleteAttributes {
/** Identificativo */
id: string;
/** Label */
label: string;
/** Valori all'interno della select */
source: (query: string, syncResults: () => void) => void;
/** Valori chiave - valore all'interno della select */
onConfirm?: (value: string) => void;
/** Placeholder (default: ``) */
placeholder?: string;
/** Valore di default (default: ``) */
defaultValue?: string;
/** Modalità display menu (default: `inline`) */
displayMenu?: string;
/** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
valid?: boolean;
/** Testo di validazione per l'elemento del moduleo form. */
validationText?: string;
/** Funzione ritornante stringa in caso di nessun risultato */
tNoResults?: () => string;
/** Funzione ritornante stringa di suggerimento */
tAssistiveHint?: () => string;
/** Funzione ritornante stringa se la query è troppo corta */
tStatusQueryTooShort?: () => string;
/** Funzione ritornante stringa se non ci sono risultati di ricerca */
tStatusNoResults?: () => string;
/** Funzione ritornante stringa che identifica l'opzione selezionata */
tStatusSelectedOption?: () => string;
/** Funzione ritornante stringa che identifica i risultati */
tStatusResults?: () => string;
/** Classi aggiuntive da usare per il componente Button */
className?: string;
testId?: string;
}
const tAssistiveHintDefault = () =>
'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';
const tNoResultsDefault = () => 'Nessun risultato trovato';
const tStatusQueryTooShortDefault = (minQueryLength: number) =>
`Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';
const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) =>
`${selectedOption} ${index + 1} di ${length} è sottolineato`;
const tStatusResultsDefault = (length: number, contentSelectedOption: number) => {
const words = {
result: length === 1 ? 'risultato' : 'risultati',
is: length === 1 ? 'è' : 'sono',
available: length === 1 ? 'disponibile' : 'disponibili'
};
return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
};
export const Autocomplete: FC<AutocompleteAttributes> = ({
tAssistiveHint = tAssistiveHintDefault,
tNoResults = tNoResultsDefault,
tStatusQueryTooShort = tStatusQueryTooShortDefault,
tStatusNoResults = tStatusNoResultsDefault,
tStatusSelectedOption = tStatusSelectedOptionDefault,
tStatusResults = tStatusResultsDefault,
placeholder = '',
defaultValue = '',
displayMenu = 'inline',
source,
validationText,
onConfirm,
...attributes
}) => {
const { id, valid } = attributes;
const validityCheck = valid === true || valid === false;
useEffect(() => {
const inputElement: HTMLInputElement = document.getElementById(id) as HTMLInputElement;
const labelElement = inputElement?.parentElement?.parentElement?.getElementsByTagName('label')[0];
if (inputElement.value !== '') {
labelElement?.classList.add('active');
}
inputElement?.addEventListener('focus', () => {
labelElement?.classList.add('active');
});
inputElement?.addEventListener('blur', () => {
if (inputElement.value === '') {
labelElement?.classList.remove('active');
}
if (onConfirm) {
onConfirm(inputElement.value);
}
});
}, [id]);
return (
<>
<label htmlFor={attributes.id}>{attributes.label}</label>
<BaseAutocomplete
source={source}
placeholder={placeholder}
defaultValue={defaultValue}
displayMenu={displayMenu}
tAssistiveHint={tAssistiveHint}
tNoResults={tNoResults}
tStatusQueryTooShort={tStatusQueryTooShort}
tStatusNoResults={tStatusNoResults}
tStatusSelectedOption={tStatusSelectedOption}
tStatusResults={tStatusResults}
onConfirm={onConfirm}
inputClasses={`form-control ${validityCheck && (valid === false ? 'is-invalid' : 'just-validate-success-field')}`}
showNoOptionsFound={true}
hintClasses='app-hint'
autoselect={false}
showAllValues={false}
templates={undefined}
confirmOnBlur={false}
menuAttributes={null}
menuClasses={null}
{...attributes}
/>
<div className='form-feedback just-validate-error-label form-text form-feedback just-validate-error-label'>
{!valid && validationText}
</div>
</>
);
};
================================================
FILE: src/Avatar/AvatarContainer.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
export interface AvatarContainerProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente AvatarContainer */
className?: string;
testId?: string;
}
export const AvatarContainer: FC<AvatarContainerProps> = ({ className, tag = 'div', testId, ...attributes }) => {
const Tag = tag;
const wrapperClasses = classNames(
'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',
className
);
return <Tag {...attributes} className={wrapperClasses} data-testid={testId} />;
};
================================================
FILE: src/Avatar/AvatarExtraText.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
export interface AvatarExtraTextProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente AvatarExtraText */
className?: string;
testId?: string;
}
export const AvatarExtraText: FC<AvatarExtraTextProps> = ({ className, tag = 'div', testId, ...attributes }) => {
const Tag = tag;
const wrapperClass = classNames('extra-text', className);
return <Tag className={wrapperClass} {...attributes} data-testid={testId} />;
};
================================================
FILE: src/Avatar/AvatarGroupContainer.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';
export interface AvatarGroupContainerProps extends HTMLAttributes<HTMLUListElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */
wrapperClassName?: string;
testId?: string;
}
export const AvatarGroupContainer: FC<AvatarGroupContainerProps> = ({
tag = 'ul',
wrapperClassName,
testId,
...attributes
}) => {
const Tag = tag;
const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);
return <Tag {...attributes} className={wrapperClasses} data-testid={testId} />;
};
================================================
FILE: src/Avatar/AvatarIcon.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
export interface AvatarIconProps extends HTMLAttributes<HTMLElement> {
/**
* Utilizzarlo in caso di utilizzo di componenti personalizzati, come ad esempio
* un link gestito da handler onClick.
* */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente AvatarIcon */
className?: string;
/** Le varianti di colore definite in Bootstrap Italia */
color?: 'primary' | 'secondary' | 'green' | 'orange' | 'red' | string;
/** Le dimensioni dell'icona definite in Bootstrap Italia */
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
/**
* Quando definito rende l'icona un link cliccabile. Nota: se definito ignora la prop Tag.
* */
href?: string;
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement | HTMLAnchorElement>;
testId?: string;
}
export const AvatarIcon: FC<AvatarIconProps> = ({
className,
tag = 'div',
size = 'md',
href,
color,
innerRef,
testId,
children,
...attributes
}) => {
const Tag = tag;
const typeClass = classNames('avatar', {
[`size-${size}`]: size,
[`avatar-${color}`]: color,
className
});
if (href) {
return (
<a
href={href}
{...attributes}
className={typeClass}
ref={innerRef as Ref<HTMLAnchorElement>}
data-testid={testId}
>
{children}
</a>
);
}
return (
<Tag {...attributes} className={typeClass} data-testid={testId}>
{children}
</Tag>
);
};
================================================
FILE: src/Avatar/AvatarPresence.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';
export interface AvatarPresenceProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente AvatarPresence */
className?: string;
/** Utilizzare questo attributo per indicare il tipo di presenza dell'utente. */
presence: 'active' | 'busy' | 'hidden' | string;
testId?: string;
}
export const AvatarPresence: FC<AvatarPresenceProps> = ({
className,
tag = 'div',
presence,
testId,
...attributes
}) => {
const Tag = tag;
const typeClass = classNames(
'avatar-presence',
{
presence
},
className
);
return <Tag {...attributes} className={typeClass} data-testid={testId} />;
};
================================================
FILE: src/Avatar/AvatarStatus.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';
export interface AvatarStatusProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente AvatarStatus */
className?: string;
/** Utilizzare questo attributo per indicare il tipo di stato dell'utente. */
status: 'approved' | 'declined' | 'notify' | string;
testId?: string;
}
export const AvatarStatus: FC<AvatarStatusProps> = ({ className, tag = 'div', status, testId, ...attributes }) => {
const Tag = tag;
const typeClass = classNames(
'avatar-status',
{
status
},
className
);
return <Tag {...attributes} className={typeClass} data-testid={testId} />;
};
================================================
FILE: src/Avatar/AvatarWrapper.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
export interface AvatarWrapperProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente AvatarStatus */
className?: string;
/** Utilizzare questo attributo qualora si volesse utilizzare un componente AvatarExtraText all'interno dell'Avatar. */
extra?: 'text' | string;
testId?: string;
}
export const AvatarWrapper: FC<AvatarWrapperProps> = ({ className, tag = 'div', extra, testId, ...attributes }) => {
const Tag = tag;
const wrapperClass = classNames('avatar-wrapper', className, {
[`avatar-extra-${extra}`]: extra
});
return <Tag {...attributes} className={wrapperClass} data-testid={testId} />;
};
================================================
FILE: src/BackToTop/BackToTop.tsx
================================================
import React, { useLayoutEffect, useState } from 'react';
import { Icon } from '../Icon/Icon';
import classNames from 'classnames';
export interface BackToTopProps {
/**
* Aria label che definisce lo scopo del componente (default: `Torna su`)
*/
ariaLabel?: string;
/**
* Classi aggiuntive da usare per il componente
*/
className?: string;
/**
* Renderizza la variante `dark` del componente
*/
dark?: boolean;
/**
* Renderizza la variante `small` del componente
*/
small?: boolean;
/**
* Aggiunge l'ombra al componente
*/
shadow?: boolean;
/**
* Configurazione riguardante dopo quanti pixel di scroll il bottone viene mostrato
*/
showOffset?: number;
}
const backToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
export const BackToTop = ({
ariaLabel = 'Torna su',
className,
dark = false,
small = false,
shadow = false,
showOffset = 200
}: BackToTopProps) => {
const [showBtn, setShowBtn] = useState(false);
useLayoutEffect(() => {
window.addEventListener('scroll', () => {
if (window.scrollY > showOffset) {
setShowBtn(true);
} else {
setShowBtn(false);
}
});
}, [showOffset]);
return (
<a
aria-label={ariaLabel}
href="#"
className={classNames(
className,
'back-to-top',
small && 'back-to-top-small',
showBtn && 'back-to-top-show',
dark && 'dark',
shadow && 'shadow'
)}
id='back-to-top-btn'
onClick={backToTop}
style={{ padding: 0 }}
color={!dark ? 'primary' : ''}
>
<Icon color={dark ? 'secondary' : 'light'} icon='it-arrow-up' style={{ cursor: 'pointer' }} />
</a>
);
};
================================================
FILE: src/Badge/Badge.tsx
================================================
import React, { FC, HTMLAttributes, ElementType, Ref, ReactNode, AnchorHTMLAttributes } from 'react';
import { Badge as BadgeReact } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
export type BadgeProps = {
/** Le varianti di colore definite in Bootstrap Italia */
color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
/** Quando attivo rende i Badge arrotondati */
pill?: boolean;
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente Badge */
className?: string;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement>;
/** Il contenuto del badge */
children: ReactNode;
testId?: string;
} & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
export const Badge: FC<BadgeProps> = ({
color = 'secondary',
pill = false,
tag = 'span',
children,
testId,
...attributes
}) => {
return (
<BadgeReact color={color} pill={pill} tag={tag} {...attributes} data-testid={testId}>
{children}
</BadgeReact>
);
};
================================================
FILE: src/BottomNav/BottomNav.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
export interface BottomNavProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente BottomNav */
className?: string;
testId?: string;
}
export const BottomNav: FC<BottomNavProps> = ({ tag = 'nav', testId, ...attributes }) => {
const Tag = tag;
return (
<Tag className='bottom-nav' data-testid={testId}>
<ul {...attributes} />
</Tag>
);
};
================================================
FILE: src/BottomNav/BottomNavItem.tsx
================================================
import React, { ElementType, FC, HTMLAttributes, MouseEvent } from 'react';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';
export interface BottomNavItemProps extends HTMLAttributes<HTMLLIElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente BottomNavItem */
className?: string;
/** Quando abilitato mostra l'elemento come attivo */
active?: boolean;
/** Indica l'URL a cui puntare (utilizzare o questo o onClick) */
url?: string;
/** Indica il link route a cui l'elemento deve puntare. */
to?: string;
/** Etichetta da associare all'elemento */
label?: string;
/** Testo esplicativo per dispositivi screen reader. */
srText?: string;
/** Icona da utilizzare per l'elemento */
iconName?: string;
/** Quando abilitato indica una sezione che richiede attenzione o presenta nuovi contenuti */
alert?: boolean;
/** Visualizza dei badge con indicazioni numeriche in alto a destra dell'icona */
badge?: number;
/** Da utilizzare al posto di url quando la gestione del click è in JS */
onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
/**
* Indica l'URL a cui far puntare il componente BottomNavItem.
* @deprecated. Usare `url` o `onLinkClick`
* */
link?: string;
testId?: string;
}
export const BottomNavItem: FC<BottomNavItemProps> = ({
active = false,
badge,
alert = false,
url,
to,
srText,
iconName = 'it-comment',
label,
tag = 'a',
onLinkClick,
link,
testId,
...attributes
}) => {
const Tag = tag;
const activeClass = classNames({ active });
const badgeWrapper = Boolean(badge) && (
<div className='badge-wrapper'>
<span className='bottom-nav-badge'>{badge}</span>
</div>
);
const alertWrapper = Boolean(alert) && (
<div className='badge-wrapper'>
<span className='bottom-nav-alert' />
</div>
);
return (
<li {...attributes} data-testid={testId}>
<Tag href={url || link || '#'} className={activeClass} to={to} onClick={onLinkClick}>
{badgeWrapper}
{alertWrapper}
<Icon icon={iconName} />
<span className='bottom-nav-label'>
{label}
{srText ? <span className='visually-hidden'>{srText}</span> : null}
</span>
</Tag>
</li>
);
};
================================================
FILE: src/Breadcrumb/Breadcrumb.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import { Breadcrumb as BreadcrumbBase } from 'reactstrap';
import classNames from 'classnames';
import { CSSModule } from 'reactstrap/types/lib/utils';
export interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Utilizzarlo in caso di utilizzo di componenti personalizzati per la l'elemento lista interno */
listTag?: ElementType;
/** Classi aggiuntive da usare per il componente Nav */
className?: string;
/** Classi aggiuntive da usare per il componente di lista interno */
listClassName?: string;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
/** Indica se si vuole la versione con fondo scuro */
dark?: boolean;
/** Etichetta significativa per descrivere il tipo di navigazione */
'aria-label'?: string;
testId?: string;
}
export const Breadcrumb: FC<BreadcrumbProps> = ({
className,
listClassName,
dark,
'aria-label': label,
testId,
...attributes
}) => {
const classes = classNames(className, 'breadcrumb-container');
const listClasses = classNames(listClassName, { dark }, dark && 'px-3');
const ariaLabel = label ?? 'Percorso di navigazione';
return (
<BreadcrumbBase
className={classes}
listClassName={listClasses}
aria-label={ariaLabel}
data-testid={testId}
{...attributes}
/>
);
};
================================================
FILE: src/Button/Button.tsx
================================================
import React, { FC, ButtonHTMLAttributes, ElementType, Ref } from 'react';
import classNames from 'classnames';
import { Button as ButtonBase } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
// reactstrap wrapper
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
/** Quando abilitato, estende il componente Button fino a prendere tutta la larghezza disponibile */
block?: boolean;
/** Utilizzarlo disabilitare il colore di sfondo, ed applicarlo invece al bordo. */
outline?: boolean;
/** Utilizzarlo in caso di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente Button */
className?: string;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
innerRef?: Ref<HTMLButtonElement>;
/** Da utilizzare si usa una icona nel contenuto del Button */
icon?: boolean;
/** Da utilizzare per le varianti di dimensione del componente Button */
size?: 'lg' | 'sm' | 'xs';
/** Da utilizzare per i bottoni di chiusura all'interno di altri componenti (i.e. Chips, Modali, etc...) */
close?: boolean;
active?: boolean;
href?: string;
testId?: string;
}
export const Button: FC<ButtonProps> = ({
tag = 'button',
icon = false,
color = '',
className,
testId,
...attributes
}) => {
const classes = classNames(className, {
'btn-icon': icon
});
const ariaAttributes = {
...(attributes.disabled && { 'aria-disabled': true })
};
const baseProps = { color, tag };
return <ButtonBase className={classes} data-testid={testId} {...baseProps} {...attributes} {...ariaAttributes} />;
};
================================================
FILE: src/Callout/Callout.tsx
================================================
import React, { FC, ElementType, HTMLAttributes } from 'react';
import classNames from 'classnames';
export interface CalloutProps extends HTMLAttributes<HTMLElement> {
/** Classi aggiuntive per il componente */
className?: string;
/** Permette di dichiarare il colore del bordo e del titolo */
color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
/** Permette personalizzare il tag utilizzato per il Callout (diverso da "div"). Accetta sia tag HTML che componenti React. */
tag?: ElementType;
/** Abilita il Callout di tipo Highlight */
highlight?: boolean;
/** Abilita il Callout di tipo Approfondimento */
detailed?: boolean;
testId?: string;
}
export const Callout: FC<CalloutProps> = ({
children,
color = '',
highlight = false,
className,
detailed,
tag = 'div',
testId,
...attributes
}) => {
const Tag = tag;
const classes = classNames(className, color, 'callout', {
'callout-highlight': highlight,
'callout-more': detailed
});
return (
<Tag className={classes} {...attributes} data-testid={testId}>
{!highlight && !detailed ? <div className='callout-inner'>{children}</div> : children}
</Tag>
);
};
================================================
FILE: src/Callout/CalloutMoreFooter.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, PropsWithChildren, useState } from 'react';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';
export interface CalloutMoreFooterProps {
id?: string;
/** Utilizzarlo in caso si utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente */
className?: string;
fileUrl?: string;
}
export const CalloutMoreFooter: FC<PropsWithChildren<CalloutMoreFooterProps>> = ({
id = 'cm-footer',
tag = 'div',
className,
fileUrl,
children,
...attributes
}) => {
const Tag = tag;
const classes = classNames('collapse-div', className);
const [isOpen, setOpen] = useState(false);
return (
<Tag {...attributes} className={classes}>
<div className='collapse-header' id={`${id}-heading`}>
<Button
color='primary'
className='callout-more-toggle'
onClick={() => setOpen(!isOpen)}
aria-controls={`${id}-collapse`}
aria-expanded={isOpen}
style={{ fontFamily: 'var(--bs-font-sans-serif)', fontSize: '1rem' }}
>
Leggi tutto <span></span>
</Button>
{fileUrl && (
<a
className='callout-more-download'
href={fileUrl}
style={{
fontFamily: 'var(--bs-font-sans-serif)',
fontSize: '1rem'
}}
>
<Icon icon='it-download' />
<span className='visually-hidden'>PDF</span>Download
</a>
)}
</div>
<div
className={`collapse ${isOpen ? 'show' : ''}`}
role='tabpanel'
id={`${id}-collapse`}
aria-labelledby={`${id}-heading`}
>
<div className='collapse-body'>{children}</div>
</div>
</Tag>
);
};
================================================
FILE: src/Callout/CalloutText.tsx
================================================
import React, { FC, ElementType, HTMLAttributes } from 'react';
import classNames from 'classnames';
export interface CalloutTextProps extends HTMLAttributes<HTMLElement> {
/** Aumenta la dimensione del testo nel paragrafo contenuto */
bigText?: boolean;
/** Classi aggiuntive per il componente */
className?: string;
/** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da "div"). Accetta sia tag HTML che componenti React. */
tag?: ElementType;
testId?: string;
}
export const CalloutText: FC<CalloutTextProps> = ({
bigText = false,
children,
className,
tag = 'p',
testId,
...attributes
}) => {
const Tag = tag;
const classes = classNames(className, {
'callout-big-text': bigText
});
return (
<Tag className={classes} {...attributes} data-testid={testId}>
{children}
</Tag>
);
};
================================================
FILE: src/Callout/CalloutTitle.tsx
================================================
import React, { FC, ElementType, HTMLAttributes } from 'react';
import classNames from 'classnames';
export interface CalloutTitleProps extends HTMLAttributes<HTMLElement> {
/** Classi aggiuntive per il componente */
className?: string;
/** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da "div"). Accetta sia tag HTML che componenti React. */
tag?: ElementType;
testId?: string;
}
export const CalloutTitle: FC<CalloutTitleProps> = ({ children, className, tag = 'div', testId, ...attributes }) => {
const Tag = tag;
const classes = classNames(className, 'callout-title');
return (
<Tag className={classes} {...attributes} data-testid={testId}>
{children}
</Tag>
);
};
================================================
FILE: src/Card/Card.tsx
================================================
import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
import classNames from 'classnames';
import { CSSModule } from 'reactstrap/types/lib/utils';
export interface CardProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente Card */
className?: string;
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement>;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
/** Abilita la versione teaser della Card */
teaser?: boolean;
/** 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 = '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 T = tag;
return (
<T
{...attributes}
className={cardClasses}
data-testid={testId}
/>
);
};
================================================
FILE: src/Card/CardBody.tsx
================================================
import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
import { CardBody as InnerCardBody } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
// Note: this is a wrapper class around a reactstrap component.
// TODO: remove this class and restore the direct import when
// https://github.com/storybookjs/storybook/issues/10536 gets resolved
export interface CardBodyProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente Card */
className?: string;
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement>;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
testId?: string;
}
export const CardBody: FC<CardBodyProps> = ({ tag = 'div', testId, ...props }) => (
<InnerCardBody {...props} tag={tag} data-testid={testId} />
);
================================================
FILE: src/Card/CardCategory.tsx
================================================
import React, { FC, HTMLAttributes, MouseEvent } from 'react';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';
export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
/** Mostra un'icona nella Card. Passare il nome dell'icona per utilizzarlo. */
iconName?: string;
/** Mostra la data nella Card. Passare una data già formattata come stringa. */
date?: string;
/** Se usato come link, passare l'URL target. */
href?: string;
/** Descrizione della data (es. 'Data evento') */
dateDescription?: string;
/** Descrizione del testo (es. 'Titolo evento') */
textDescription?: string;
/** Titolo dell' icona */
iconTitle?: string;
/** Da utilizzare al posto di url quando la gestione del click è in JS */
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
testId?: string;
}
export const CardCategory: FC<CardCategoryProps> = ({
iconName,
iconTitle,
date,
href,
onClick,
testId,
children,
textDescription,
dateDescription,
...rest
}) => {
const classes = classNames({
'category-top': date || ' ',
'categoryicon-top': iconName
});
// Simple category link
const categoryLink = !iconName && (
<>
{textDescription && <span className='visually-hidden'>{textDescription}</span>}
<a href={href} className='category' onClick={onClick}>
{children}
</a>
</>
);
const categoryDate = date && <span className='data'>{date}</span>;
// Category with icon
const categoryText = iconName && <span className='text'>{children}</span>;
const categoryIcon = iconName && <Icon icon={iconName} title={iconTitle} />;
return (
<div className={classes} {...rest} data-testid={testId}>
{categoryLink}
{categoryIcon}
{categoryText && textDescription && <span className='visually-hidden'>{textDescription}</span>}
{categoryText}
{dateDescription && <span className='visually-hidden'>{dateDescription}</span>}
{categoryDate}
</div>
);
};
================================================
FILE: src/Card/CardFooterCTA.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
export interface CardFooterCTAProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardFooterCTA*/
className?: string;
testId?: string;
}
export const CardFooterCTA: FC<CardFooterCTAProps> = ({ className, tag = 'div', testId, ...attributes }) => {
const Tag = tag;
const classes = classNames(className, 'it-card-footer');
return <Tag className={classes} {...attributes} data-testid={testId} />;
};
================================================
FILE: src/Card/CardReadMore.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';
export interface CardReadMoreProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardReadMore*/
className?: string;
/** Il contenuto in testo da mostrare */
text: string;
/** Passare l'URL target. */
href?: string;
/** Mostra un'icona nella Card per l'azione "Leggi di più". Passare il nome dell'icona per utilizzarlo. */
iconName?: string;
testId?: string;
}
export const CardReadMore: FC<CardReadMoreProps> = ({
className,
text,
iconName = 'it-arrow-right',
tag = 'a',
href,
testId,
...attributes
}) => {
const Tag = tag;
const classes = classNames(className, 'read-more');
return (
<Tag className={classes} href={href} {...attributes} data-testid={testId}>
<span className='text'>{text}</span>
{iconName && <Icon icon={iconName} />}
</Tag>
);
};
================================================
FILE: src/Card/CardSignature.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
export interface CardSignatureProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardSignature*/
className?: string;
testId?: string;
}
export const CardSignature: FC<CardSignatureProps> = ({ className, tag = 'span', testId, ...attributes }) => {
const Tag = tag;
const classes = classNames(className, 'card-signature');
return <Tag className={classes} {...attributes} data-testid={testId} />;
};
================================================
FILE: src/Card/CardTag.tsx
================================================
import React, { AnchorHTMLAttributes, FC, ElementType } from 'react';
import classNames from 'classnames';
export interface CardTagProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardTag*/
className?: string;
testId?: string;
}
export const CardTag: FC<CardTagProps> = ({ className, tag = 'a', testId, ...attributes }) => {
const Tag = tag;
const classes = classNames(className, 'card-tag');
return <Tag className={classes} {...attributes} data-testid={testId} />;
};
================================================
FILE: src/Card/CardTagsHeader.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';
export interface CardTagsHeaderProps extends HTMLAttributes<HTMLElement> {
/** Mostra la data nella Card. Passare una data già formattata come stringa. */
date?: string;
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardTagsHeader */
className?: string;
testId?: string;
}
export const CardTagsHeader: FC<CardTagsHeaderProps> = ({
date,
children,
className,
tag = 'div',
testId,
...attributes
}) => {
const Tag = tag;
const classes = classNames('head-tags', className);
return (
<Tag className={classes} {...attributes} data-testid={testId}>
{children}
{date && <span className='data'>{date}</span>}
</Tag>
);
};
================================================
FILE: src/Card/CardText.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import { CardText as InnerCardText } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
// Note: this is a wrapper class around a reactstrap component.
// TODO: remove this class and restore the direct import when
// https://github.com/storybookjs/storybook/issues/10536 gets resolved
export interface CardTextProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardText */
className?: string;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
testId?: string;
}
export const CardText: FC<CardTextProps> = (props) => {
return <InnerCardText {...props} data-testid={props.testId} />;
};
================================================
FILE: src/Card/CardTitle.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import { CardTitle as InnerCardTitle } from 'reactstrap';
// Note: this is a wrapper class around a reactstrap component.
// TODO: remove this class and restore the direct import when
// https://github.com/storybookjs/storybook/issues/10536 gets resolved
export interface CardTitleProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente CardTitle */
className?: string;
testId?: string;
}
export const CardTitle: FC<CardTitleProps> = (props) => {
return <InnerCardTitle {...props} data-testid={props.testId} />;
};
================================================
FILE: src/Carousel/Carousel.tsx
================================================
import React, { FC } from 'react';
import classNames from 'classnames';
import {Splide, SplideProps} from '@splidejs/react-splide'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CONFIG_DEFAULT: any = {
slideFocus: false,
rewind: true,
perMove: 1,
i18n: {
prev: 'Slide precedente',
next: 'Slide successiva',
first: 'Vai alla prima slide',
last: 'Vai all’ultima slide',
slideX: 'Vai alla slide %s',
pageX: 'Vai a pagina %s',
play: 'Attiva autoplay',
pause: 'Pausa autoplay',
carousel: 'Carosello',
select: 'Seleziona una slide da mostrare',
slide: 'slide',
slideLabel: '%s di %s',
},
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CONFIGS: any= {
'landscape-three-cols': {
type: 'slide',
perPage: 3,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 2,
gap: 24,
padding: { left: 40, right: 40 },
arrows: false,
},
},
},
'landscape-three-cols-arrows': {
type: 'slide',
perPage: 3,
gap: 24,
padding: { left: 0, right: 0 },
arrows: true,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 40, right: 40 },
arrows: true,
},
992: {
perPage: 2,
gap: 24,
padding: { left: 40, right: 40 },
arrows: true,
},
},
},
'big-image': {
type: 'loop',
perPage: 1,
gap: 48,
padding: { left: 320, right: 320 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 1,
gap: 24,
padding: { left: 160, right: 160 },
arrows: false,
},
},
},
'standard-image': {
type: 'loop',
perPage: 3,
gap: 24,
padding: { left: 48, right: 48 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 40, right: 40 },
arrows: false,
},
992: {
perPage: 2,
gap: 24,
padding: { left: 48, right: 48 },
arrows: false,
},
},
},
'landscape': {
type: 'slide',
perPage: 1,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 1,
gap: 24,
padding: { left: 24, right: 24 },
arrows: false,
},
},
},
'calendar-wrapper': {
type: 'slide',
perPage: 4,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
breakpoints: {
560: {
perPage: 1,
gap: 0,
padding: { left: 24, right: 24 },
arrows: false,
},
768: {
perPage: 2,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 3,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
},
},
},
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const EXTRA_CLASSES: any= {
'landscape-three-cols': [
'it-carousel-landscape-abstract-three-cols'
],
'landscape-three-cols-arrows': [
'it-carousel-landscape-abstract-three-cols-arrow-visible'
],
'big-image': [
'it-carousel-landscape-abstract-three-cols',
'it-full-carousel',
'it-big-img'
],
'standard-image': [
'it-carousel-landscape-abstract-three-cols',
'it-full-carousel',
'it-standard-image'
],
'landscape': [
'it-carousel-landscape-abstract'
],
'calendar-wrapper': [
'it-calendar-wrapper'
]
}
export interface CarouselProps extends SplideProps {
type: string;
children?: React.ReactNode;
}
// Splide wrapper
export const Carousel: FC<CarouselProps> = ({
className = '',
type,
children,
...attributes
}) => {
let conf = Object.assign({}, CONFIG_DEFAULT)
if (['big-image', 'standard-image'].includes(type)){
conf = Object.assign({}, conf, CONFIGS['landscape-three-cols'])
}
conf = Object.assign({}, conf, CONFIGS[type])
return <Splide
{...attributes}
className={classNames('it-carousel-wrapper', className, ...EXTRA_CLASSES[type])}
options={conf}>{children}</Splide>;
};
================================================
FILE: src/Carousel/CarouselSlide.tsx
================================================
import React from 'react';
import {SplideSlide} from '@splidejs/react-splide'
// Splide wrapper
export const CarouselSlide: React.FC<JSX.IntrinsicElements['li']> = ({
children,
}) => {
return <SplideSlide>
<div className='it-single-slide-wrapper'>
{children}
</div>
</SplideSlide>;
};
================================================
FILE: src/Chips/Chip.tsx
================================================
import React, { HTMLAttributes, FC, ElementType } from 'react';
import classNames from 'classnames';
export interface ChipProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente Chip */
className?: string;
/** Impostarlo su `true` per centrare la label all'interno */
simple?: boolean;
/** Impostarlo su `true` per una versione più grande del componente Chip. */
large?: boolean;
/** Impostarlo su `true` per renderizzare il componente Chip come disabilitato */
disabled?: boolean;
/** Le varianti di colore definite in Bootstrap Italia */
color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
testId?: string;
}
export const Chip: FC<ChipProps> = ({
className,
color = '',
tag = 'div',
simple = false,
large = false,
disabled = false,
testId,
...attributes
}) => {
const Tag = tag;
const classes = classNames('chip', className, {
'chip-simple': simple,
'chip-lg': large,
'chip-disabled': disabled,
[`chip-${color}`]: color
});
return <Tag className={classes} {...attributes} data-testid={testId} />;
};
================================================
FILE: src/Chips/ChipLabel.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classNames from 'classnames';
export interface ChipLabelProps extends HTMLAttributes<HTMLElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente ChipLabel */
className?: string;
testId?: string;
}
export const ChipLabel: FC<ChipLabelProps> = ({ className, tag = 'span', testId, ...attributes }) => {
const Tag = tag;
const classes = classNames(className, 'chip-label');
return <Tag {...attributes} className={classes} data-testid={testId} />;
};
================================================
FILE: src/Collapse/Collapse.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes, Ref, useEffect, useRef, useState } from 'react';
import { Collapse as CollapseBase } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
import { Icon } from '../Icon/Icon';
// Copy over from reactstrap and add new ones
export interface CollapseProps extends HTMLAttributes<HTMLElement> {
/** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
isOpen?: boolean;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Indica se il componente Collapse è usato all'interno di un componente navbar */
navbar?: boolean;
/** Indica se il componente Collapse ha al suo interno un Megamenu */
megamenu?: boolean;
/** Indica se il componente Collapse è usato all'interno di un componente Header */
header?: boolean;
delay?: {
show: number;
hide: number;
};
/** Funzione chiamata all'apertura del componente Collapse */
onOpened?: () => void;
/** Funzione chiamata alla chiusura del componente Collapse */
onClosed?: () => void;
/** Funzione chiamata durante la trasizione di apertura del componente Collapse */
onEntering?: () => void;
/** Funzione chiamata al termine della trasizione di apertura del componente Collapse */
onEntered?: () => void;
onExit?: () => void;
/** Funzione chiamata durante la trasizione di chiusura del componente Collapse */
onExiting?: () => void;
/** Funzione chiamata al termine della trasizione di chiusura del componente Collapse */
onExited?: () => void;
/** Funzione chiamata su click di overlay dell'HeaderNav aperto. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
onOverlayClick?: () => void;
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement>;
/** Testo pulsante di chiusura per screen reader */
closeSrText?: string;
testId?: string;
}
export const Collapse: FC<CollapseProps> = ({
header = false,
className,
navbar,
megamenu,
children,
isOpen = false,
onOverlayClick,
cssModule,
testId,
closeSrText = 'Nascondi la navigazione',
...attributes
}) => {
const newCssModule = {
'navbar-collapse': 'navbar-collapsable',
...cssModule
};
// Two-phase state to allow CSS transitions to play.
// isVisible controls display:block/none; isExpanded controls the animation class.
const [isVisible, setIsVisible] = useState(isOpen);
const [isExpanded, setIsExpanded] = useState(isOpen);
const panelRef = useRef<HTMLElement>(null);
const triggerRef = useRef<Element | null>(null);
useEffect(() => {
if (!(megamenu || navbar)) return;
if (isOpen) {
triggerRef.current = document.activeElement;
setIsVisible(true);
// Double rAF ensures the browser has painted display:block before adding
// the expanded class, so the CSS transform transition can fire.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
setIsExpanded(true);
panelRef.current?.focus();
});
});
return;
}
setIsExpanded(false);
// Wait for the CSS transition to complete before hiding.
const timer = setTimeout(() => {
setIsVisible(false);
(triggerRef.current as HTMLElement | null)?.focus();
}, PANEL_TRANSITION_MS);
return () => clearTimeout(timer);
}, [isOpen, megamenu, navbar]);
useEffect(() => {
if (!(megamenu || navbar)) return;
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => { document.body.style.overflow = ''; };
}, [isOpen, megamenu, navbar]);
useEffect(() => {
if (!(megamenu || navbar)) return;
const main = document.querySelector('main');
if (!main) return;
if (isOpen) {
main.setAttribute('inert', '');
} else {
main.removeAttribute('inert');
}
return () => main.removeAttribute('inert');
}, [isOpen, megamenu, navbar]);
useEffect(() => {
if (!(megamenu || navbar)) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen) {
onOverlayClick?.();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isOpen, megamenu, navbar, onOverlayClick]);
// Must match the longest CSS transition on .navbar-collapsable (currently 0.3s + buffer).
const PANEL_TRANSITION_MS = 350;
if (megamenu || navbar) {
const classes = classNames(className, 'navbar-collapse', {
expanded: isExpanded
});
const overlayClasses = classNames('overlay', {
fade: isVisible,
show: isExpanded
});
const displayStyle = { display: isVisible ? 'block' : 'none' };
return (
<CollapseBase
className={classes}
cssModule={newCssModule}
navbar={navbar}
style={displayStyle}
tabIndex={-1}
innerRef={panelRef}
role={isOpen ? 'dialog' : undefined}
aria-modal={isOpen ? true : undefined}
aria-label={isOpen ? 'Menu di navigazione' : undefined}
data-testid={testId}
{...attributes}
>
<div className={overlayClasses} style={displayStyle} onClick={onOverlayClick}></div>
<div className='close-div'>
<button className='btn close-menu' type='button' onClick={onOverlayClick}>
<span className='visually-hidden'>{closeSrText}</span>
<Icon color='white' icon='it-close-big' />
</button>
</div>
{megamenu ? <div className='menu-wrapper '>{children}</div> : <>{children}</>}
</CollapseBase>
);
}
const classes = classNames(className, {
'link-list-wrapper': header
});
return (
<CollapseBase
className={classes}
cssModule={newCssModule}
{...attributes}
navbar={navbar}
isOpen={isOpen}
data-testid={testId}
>
{children}
</CollapseBase>
);
};
================================================
FILE: src/Dimmer/Dimmer.tsx
================================================
import classNames from 'classnames';
import React, { FC, HTMLAttributes } from 'react';
import { Icon } from '../Icon/Icon';
export interface DimmerProps extends HTMLAttributes<HTMLElement> {
/** Il nome dell'icona da mostrare */
icon?: string;
/** Le varianti di colore definite in Bootstrap Italia */
color?: 'primary' | 'secondary';
/** Classi aggiuntive da usare per il componente Dimmer */
className?: string;
/** Mostra il wrapper */
show?: boolean;
/**
* Classi aggiuntive da usare per il componente contenitore del Dimmer
* Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
* passare `true`.
* */
wrapperClassName?: string | true;
testId?: string;
}
export const Dimmer: FC<DimmerProps> = ({
icon,
color,
className,
show = true,
wrapperClassName,
testId,
...attributes
}) => {
const { children, ...rest } = attributes,
classes = classNames('dimmer fade', { show: show }, wrapperClassName === true ? className : wrapperClassName, {
[`dimmer-${color}`]: color
}),
innerClasses = classNames('dimmer-inner', className),
dimmerIcon = icon && (
<div className='dimmer-icon'>
<Icon icon={icon} />
</div>
);
return (
<div className={classes} {...rest} data-testid={testId} aria-hidden={show ? undefined : true}>
<div className={innerClasses} {...rest}>
{dimmerIcon}
{children}
</div>
</div>
);
};
================================================
FILE: src/Dimmer/DimmerButtons.tsx
================================================
import classNames from 'classnames';
import React, { FC, HTMLAttributes } from 'react';
export interface DimmerButtonsProps extends HTMLAttributes<HTMLElement> {
/** Classi aggiuntive da usare per il componente Dimmer */
className?: string;
/** Da utilizzare in presenza di un singolo bottone: quando abilitato ne centra il contenuto. */
single?: boolean;
/** Da utilizzare con `false` per abilitare il precedente comportamento senza sfondo scuro.
* @deprecated
*/
dark?: boolean;
testId?: string;
}
export const DimmerButtons: FC<DimmerButtonsProps> = ({
className,
single = false,
dark = true,
testId,
...attributes
}) => {
const { children, ...rest } = attributes;
const classes = classNames('dimmer-buttons', className, {
'bg-dark': dark,
'single-button': single
});
return (
<div className={classes} {...rest} data-testid={testId}>
{children}
</div>
);
};
================================================
FILE: src/Dropdown/Dropdown.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC } from 'react';
import { Dropdown as BSDRopdown, DropdownProps as BSDRopdownProps } from 'reactstrap';
export interface DropdownProps extends BSDRopdownProps {
tag?: ElementType;
inNavbar?: boolean;
textCenter?: boolean;
theme?: string;
/** Classi aggiuntive da usare per il componente Button */
className?: string;
testId?: string;
}
export const Dropdown: FC<DropdownProps> = ({
className,
testId,
children,
inNavbar,
textCenter,
theme,
...attributes
}) => {
const classes = classNames(className, {
'text-center': textCenter
});
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<BSDRopdown
menuRole='menu'
color={theme}
isOpen={isOpen}
toggle={toggle}
className={classes}
data-testid={testId}
{...attributes}
inNavbar={inNavbar}
nav={inNavbar}
>
{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
React.Children.map(children, (child: any) => React.cloneElement(child, { inNavbar: inNavbar }))
}
</BSDRopdown>
);
};
================================================
FILE: src/Dropdown/DropdownMenu.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import { DropdownMenu as BSDRopdownMenu } from 'reactstrap';
import { SLIM, useHeaderContext } from '../Header/HeaderContext';
export interface DropdownMenuProps extends HTMLAttributes<HTMLElement> {
/** Classi aggiuntive da usare per il componente Button */
inNavbar?: boolean;
className?: string;
testId?: string;
}
export const DropdownMenu: FC<DropdownMenuProps> = ({ className, inNavbar, testId, children, ...attributes }) => {
const type = useHeaderContext();
const style = inNavbar && type === SLIM ? { top: 'unset !important' } : {};
return (
<BSDRopdownMenu style={style} data-testid={testId} {...attributes} className={className}>
{children}
</BSDRopdownMenu>
);
};
================================================
FILE: src/Dropdown/DropdownToggle.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import { DropdownToggle as BSDropdownToggle } from 'reactstrap';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';
export interface DropdownToggleProps extends HTMLAttributes<HTMLElement> {
caret?: boolean;
tag?: ElementType;
inNavbar?: boolean;
testId?: string;
/** Classi aggiuntive da usare per il componente Button */
color?: string;
className?: string;
outline?: boolean;
}
export const DropdownToggle: FC<DropdownToggleProps> = ({
className,
testId,
children,
caret,
inNavbar,
color = '',
tag = 'button'
}) => {
const Tag = tag === 'a' || inNavbar ? 'a' : 'button';
const classes = classNames(className, {
'btn-dropdown': Tag === 'a' && !inNavbar,
'dropdown-toggle': true,
btn: tag === 'button' && !inNavbar
});
let colorClass = '';
if (tag === 'button' && color) {
colorClass = `btn-${color}`;
}
const iconClasses = classNames({
'icon-expand': true,
'icon-sm': !inNavbar,
'icon-xs': inNavbar,
'ms-1': inNavbar,
'icon-light': Tag.valueOf() !== 'a' ? true : false,
color: color ? 'white' : 'primary'
});
return (
<BSDropdownToggle
tag={Tag}
data-testid={testId}
role={Tag.valueOf() === 'a' ? 'button' : 'link'}
href={Tag.valueOf() === 'a' ? '#' : undefined}
className={`${classes} ${colorClass}`}
nav={inNavbar}
>
{children as React.ReactNode}
{caret === true ? <Icon icon='it-expand' className={iconClasses} /> : null}
</BSDropdownToggle>
);
};
================================================
FILE: src/FontLoader/FontLoader.tsx
================================================
import { useEffect } from 'react';
export interface FontLoaderProps {
/**
* Una lista di font aggiuntivi da caricare.
* I font di default Titillium Web, Lora and Roboto Mono vengono aggiunti a questa lista e caricati sempre.
* */
fonts?: string[];
}
const defaultFonts = [
'Titillium Web:300,400,600,700:latin-ext',
'Lora:400,700:latin-ext',
'Roboto Mono:400,700:latin-ext'
];
export function useFontLoader({ fonts }: FontLoaderProps) {
useEffect(() => {
if (typeof window !== 'undefined') {
// eslint-disable-next-line @typescript-eslint/no-require-imports
const WebFont = require('webfontloader');
WebFont.load({
custom: {
families: [...defaultFonts, ...(fonts || [])]
}
});
}
}, [fonts]);
}
export const FontLoader = (props: FontLoaderProps) => {
useFontLoader(props);
return null;
};
================================================
FILE: src/Forward/Forward.tsx
================================================
import React, { FC, AnchorHTMLAttributes } from 'react';
import classNames from 'classnames';
export interface ForwardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
/** Classi aggiuntive da usare per il componente Forward */
className?: string;
/** Riferimento al nodo a cui scorrere quando premuto */
// scrollToRef: MutableRefObject<Element | null>;
testId?: string;
}
export const Forward: FC<ForwardProps> = ({ className, children, testId, ...attributes }) => {
const classes = classNames(className, 'forward');
return (
<a
className={classes}
onClick={(e) => {
e.preventDefault();
if (attributes.href) {
const scrollToRef = document.querySelector(attributes.href);
if (scrollToRef) {
scrollToRef.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
}}
data-testid={testId}
{...attributes}
>
{children}
</a>
);
};
================================================
FILE: src/GoBack/GoBack.tsx
================================================
import classNames from 'classnames';
import React, { ReactNode } from 'react';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';
export interface GoBackProps {
/**
* Optional classnames to pass to the element
*/
className?: string;
/**
* Render the link variant of the go back button
*/
link?: boolean;
/**
* Render the up variant of the go back button
*/
up?: boolean;
children?: ReactNode;
}
const goBack = () => {
window.history.back();
};
export const GoBack = ({ className, link = false, up = false, children }: GoBackProps) => {
const Tag = link ? 'a' : Button;
return (
<Tag className={classNames(className, 'go-back')} color='primary' onClick={goBack}>
<Icon
className={children ? 'me-2' : ''}
color={link ? 'primary' : 'white'}
icon={up ? 'it-arrow-up' : 'it-arrow-left'}
/>
{children}
</Tag>
);
};
================================================
FILE: src/Grid/GridItem.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classname from 'classnames';
export interface GridItemProps extends HTMLAttributes<HTMLSpanElement> {
/** Classi aggiuntive da usare per il componente LinkListItem */
className?: string;
/** Indica il tag da utilizzare per il titolo */
tag?: ElementType;
testId?: string;
}
export const GridItem: FC<GridItemProps> = ({ tag: Tag = 'div', className, children, testId, ...attributes }) => {
const classes = classname('it-grid-item-wrapper', className);
return (
<Tag {...attributes} className={classes} data-testid={testId}>
{children}
</Tag>
);
};
================================================
FILE: src/Grid/GridItemText.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';
export interface GridItemTextProps extends HTMLAttributes<HTMLSpanElement> {
/** Classi aggiuntive da usare per l'elemento */
className?: string;
testId?: string;
}
export const GridItemText: FC<GridItemTextProps> = ({ className, children, testId, ...attributes }) => {
const classes = classname('it-griditem-text', className);
return (
<span {...attributes} className={classes} data-testid={testId}>
{children}
</span>
);
};
================================================
FILE: src/Grid/GridItemTextWrapper.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classname from 'classnames';
export interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElement> {
/** Classi aggiuntive da usare per l'elemento */
className?: string;
testId?: string;
/** Tag dell'elemento (può essere ad esempio trasformato in figcaption) */
tag?: ElementType;
}
export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({
className,
children,
testId,
tag = 'span',
...attributes
}) => {
const classes = classname('it-griditem-text-wrapper', className);
const Tag = tag;
return (
<Tag {...attributes} className={classes} data-testid={testId}>
{children}
</Tag>
);
};
================================================
FILE: src/Grid/GridList.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';
export interface GridListProps extends HTMLAttributes<HTMLSpanElement> {
/** Classi aggiuntive da usare per il componente LinkListItem */
className?: string;
testId?: string;
}
export const GridList: FC<GridListProps> = ({ className, children, testId, ...attributes }) => {
const classes = classname('it-grid-list-wrapper', className);
return (
<div {...attributes} className={classes} data-testid={testId}>
{children}
</div>
);
};
================================================
FILE: src/Grid/GridRow.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';
export interface GridRowProps extends HTMLAttributes<HTMLSpanElement> {
/** Classi aggiuntive da usare per il componente LinkListItem */
className?: string;
testId?: string;
}
export const GridRow: FC<GridRowProps> = ({ className, children, testId, ...attributes }) => {
const classes = classname('grid-row', className);
return (
<div {...attributes} className={classes} data-testid={testId}>
{children}
</div>
);
};
================================================
FILE: src/Grid/index.ts
================================================
export { GridItem } from './GridItem';
export { GridItemText } from './GridItemText';
export { GridItemTextWrapper } from './GridItemTextWrapper';
export { GridList } from './GridList';
export { GridRow } from './GridRow';
export type { GridItemProps } from './GridItem';
export type { GridItemTextProps } from './GridItemText';
export type { GridItemTextWrapperProps } from './GridItemTextWrapper';
export type { GridListProps } from './GridList';
export type { GridRowProps } from './GridRow';
================================================
FILE: src/Header/Header.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classNames from 'classnames';
import { HeaderContext, CENTER, NAVBAR } from './HeaderContext';
export interface HeaderProps extends HTMLAttributes<HTMLElement> {
/** Classi aggiuntive da usare per il componente Header */
className?: string;
/** Tipo di componente Header: può essere solamente uno di questi tre tipi */
type: 'slim' | 'center' | 'navbar';
/** Riduce la grandezza del componente Header. Funziona solamente con Header "center". */
small?: boolean;
/** Imposta il tema per il componente Header. Per gli Header di tipo "slim" o "center"
* il valore di default è "dark". Per l'Header di tipo "nav" il tema di default è "light"
* in mobile, mentre "dark" in versione desktop.
*/
theme?: 'light' | 'dark' | '';
testId?: string;
}
export const Header: FC<HeaderProps> = ({ className, small = false, theme = '', type, testId, ...attributes }) => {
// use context here as theme
const classes = classNames(className, {
[`it-header-${type}-wrapper`]: type,
'it-small-header': type === CENTER && small,
[`theme-${theme}`]: type !== NAVBAR && theme,
'theme-dark-mobile': type === NAVBAR && theme === 'dark',
'theme-light-desk': type === NAVBAR && theme === 'light'
});
return (
<HeaderContext.Provider value={{ type }}>
<div className={classes} {...attributes} data-testid={testId} />
</HeaderContext.Provider>
);
};
================================================
FILE: src/Header/HeaderBrand.tsx
================================================
import React, { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
import classNames from 'classnames';
import { NavbarBrand } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
import { CENTER, useHeaderContext } from './HeaderContext';
import { Icon } from '../Icon/Icon';
export interface HeaderBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
tag?: ElementType;
/** Classi aggiuntive da usare per il componente HeaderBrand */
className?: string;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
/** Da usare con il componente Header Nav in versione "responsive" */
responsive?: boolean;
/** Da utilizzare per specificare URL risorsa esterna. */
href?: string;
/** Icona da utilizzare nel componente. Utilizzata unicamente quando l'Header è di tipo Center. */
iconName?: string;
/** Alt text da utilizzare nell'icona. Utilizzata unicamente quando l'Header è di tipo Center. */
iconAlt?: string;
/** Elementi React da renderizzare al proprio interno. */
children: ReactNode | ReactNode[];
testId?: string;
}
export const HeaderBrand = ({
className,
href,
iconName,
iconAlt,
children,
tag = 'a',
responsive = false,
testId,
...attributes
}: HeaderBrandProps) => {
const type = useHeaderContext();
const defaultAttributes = { tag };
if (type !== CENTER) {
const classes = classNames('d-lg-block', className, {
'd-none': !responsive
});
return (
<NavbarBrand className={classes} href={href} data-testid={testId} {...attributes} {...defaultAttributes}>
{children}
</NavbarBrand>
);
}
return (
<div className='it-brand-wrapper' data-testid={testId}>
<a href={href}>
{iconName && <Icon icon={iconName} title={iconAlt} />}
<div className='it-brand-text'>
{React.Children.map(children, (child, i) => {
if (typeof child !== 'object' || child == null || !('props' in child)) {
return child;
}
// convention here: first item is the main title, while others subtext
const className = classNames(
child.props.className,
{ 'd-none d-md-block': i } // subtext is anything but first element
);
const props = {
className
};
return React.cloneElement(child, props);
})}
</div>
</a>
</div>
);
};
================================================
FILE: src/Header/HeaderContent.tsx
================================================
import React, { HTMLAttributes } from 'react';
import classNames from 'classnames';
import { Col, Container, Navbar, Row } from 'reactstrap';
import { SLIM, CENTER, NAVBAR, useHeaderContext } from './HeaderContext';
export interface HeaderContentProps extends HTMLAttributes<HTMLElement> {
/** Classi aggiuntive da usare per il componente HeaderContent */
className?: string;
/** Da utilizzare per indicare che all'interno dell'Header verrà utilizzato un Megamenu */
megamenu?: boolean;
/** Parametro per il controllo responsive del componente secondo Bootstrap Italia. */
expand?: boolean | 'sm' | 'md' | 'lg' | 'xl';
testId?: string;
}
export const HeaderContent = ({ className, megamenu, testId, ...attributes }: HeaderContentProps) => {
const type = useHeaderContext();
const classes = classNames(className, {
'i
gitextract_9pcbdlnw/ ├── .editorconfig ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── apri-una-segnalazione.it.yaml │ │ ├── config.yml │ │ └── open-an-issue.en.yaml │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ │ ├── ci.yml │ ├── commit-lint.yml │ ├── pc-check.yml │ ├── pc-update.yml │ ├── publiccode-yml-validation.yml │ ├── publish-release.yml │ └── update-docs.yml ├── .gitignore ├── .husky/ │ └── pre-commit ├── .npmignore ├── .nvmrc ├── .prettierrc ├── .storybook/ │ ├── main.ts │ ├── manager-head.html │ ├── manager.js │ ├── preview.ts │ ├── stories-helper.ts │ └── theme.ts ├── AUTHORS ├── CHANGELOG.md ├── CODE_OF_CONDUCT.EN.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.EN.md ├── README.md ├── assets/ │ ├── css/ │ │ ├── accesibility.css │ │ └── storybook-fixes.css │ └── docs/ │ └── scss/ │ ├── _callouts.scss │ ├── _colors.scss │ ├── bi-fonts.scss │ └── docs.scss ├── babel.config.json ├── codecov.yml ├── commitlint.config.cjs ├── eslint.config.js ├── jest-setup.js ├── jest.config.cjs ├── package.json ├── publiccode.yml ├── scripts/ │ ├── import_svgs.sh │ ├── svgIndexTemplate.js │ ├── svgTemplate.js │ └── wait-confirm.js ├── src/ │ ├── Accordion/ │ │ ├── Accordion.tsx │ │ ├── AccordionBody.tsx │ │ ├── AccordionHeader.tsx │ │ └── AccordionItem.tsx │ ├── Alert/ │ │ └── Alert.tsx │ ├── Autocomplete/ │ │ └── Autocomplete.tsx │ ├── Avatar/ │ │ ├── AvatarContainer.tsx │ │ ├── AvatarExtraText.tsx │ │ ├── AvatarGroupContainer.tsx │ │ ├── AvatarIcon.tsx │ │ ├── AvatarPresence.tsx │ │ ├── AvatarStatus.tsx │ │ └── AvatarWrapper.tsx │ ├── BackToTop/ │ │ └── BackToTop.tsx │ ├── Badge/ │ │ └── Badge.tsx │ ├── BottomNav/ │ │ ├── BottomNav.tsx │ │ └── BottomNavItem.tsx │ ├── Breadcrumb/ │ │ └── Breadcrumb.tsx │ ├── Button/ │ │ └── Button.tsx │ ├── Callout/ │ │ ├── Callout.tsx │ │ ├── CalloutMoreFooter.tsx │ │ ├── CalloutText.tsx │ │ └── CalloutTitle.tsx │ ├── Card/ │ │ ├── Card.tsx │ │ ├── CardBody.tsx │ │ ├── CardCategory.tsx │ │ ├── CardFooterCTA.tsx │ │ ├── CardReadMore.tsx │ │ ├── CardSignature.tsx │ │ ├── CardTag.tsx │ │ ├── CardTagsHeader.tsx │ │ ├── CardText.tsx │ │ └── CardTitle.tsx │ ├── Carousel/ │ │ ├── Carousel.tsx │ │ └── CarouselSlide.tsx │ ├── Chips/ │ │ ├── Chip.tsx │ │ └── ChipLabel.tsx │ ├── Collapse/ │ │ └── Collapse.tsx │ ├── Dimmer/ │ │ ├── Dimmer.tsx │ │ └── DimmerButtons.tsx │ ├── Dropdown/ │ │ ├── Dropdown.tsx │ │ ├── DropdownMenu.tsx │ │ └── DropdownToggle.tsx │ ├── FontLoader/ │ │ └── FontLoader.tsx │ ├── Forward/ │ │ └── Forward.tsx │ ├── GoBack/ │ │ └── GoBack.tsx │ ├── Grid/ │ │ ├── GridItem.tsx │ │ ├── GridItemText.tsx │ │ ├── GridItemTextWrapper.tsx │ │ ├── GridList.tsx │ │ ├── GridRow.tsx │ │ └── index.ts │ ├── Header/ │ │ ├── Header.tsx │ │ ├── HeaderBrand.tsx │ │ ├── HeaderContent.tsx │ │ ├── HeaderContext.tsx │ │ ├── HeaderLinkZone.tsx │ │ ├── HeaderRightZone.tsx │ │ ├── HeaderSearch.tsx │ │ ├── HeaderSocialsZone.tsx │ │ ├── HeaderToggler.tsx │ │ └── Headers.tsx │ ├── Hero/ │ │ ├── Hero.tsx │ │ ├── HeroBackground.tsx │ │ ├── HeroBody.tsx │ │ ├── HeroButton.tsx │ │ ├── HeroCategory.tsx │ │ ├── HeroTitle.tsx │ │ └── index.ts │ ├── Icon/ │ │ ├── EmptyIcon.tsx │ │ ├── Icon.tsx │ │ └── assets/ │ │ ├── ItAndroid.tsx │ │ ├── ItAndroidSquare.tsx │ │ ├── ItApple.tsx │ │ ├── ItAppleSquare.tsx │ │ ├── ItArrowDown.tsx │ │ ├── ItArrowDownCircle.tsx │ │ ├── ItArrowDownTriangle.tsx │ │ ├── ItArrowLeft.tsx │ │ ├── ItArrowLeftCircle.tsx │ │ ├── ItArrowLeftTriangle.tsx │ │ ├── ItArrowRight.tsx │ │ ├── ItArrowRightCircle.tsx │ │ ├── ItArrowRightTriangle.tsx │ │ ├── ItArrowUp.tsx │ │ ├── ItArrowUpCircle.tsx │ │ ├── ItArrowUpTriangle.tsx │ │ ├── ItBan.tsx │ │ ├── ItBehance.tsx │ │ ├── ItBluesky.tsx │ │ ├── ItBookmark.tsx │ │ ├── ItBox.tsx │ │ ├── ItBurger.tsx │ │ ├── ItCalendar.tsx │ │ ├── ItCamera.tsx │ │ ├── ItCar.tsx │ │ ├── ItCard.tsx │ │ ├── ItCart.tsx │ │ ├── ItChartLine.tsx │ │ ├── ItCheck.tsx │ │ ├── ItCheckCircle.tsx │ │ ├── ItChevronLeft.tsx │ │ ├── ItChevronRight.tsx │ │ ├── ItClip.tsx │ │ ├── ItClock.tsx │ │ ├── ItClose.tsx │ │ ├── ItCloseBig.tsx │ │ ├── ItCloseCircle.tsx │ │ ├── ItCodeCircle.tsx │ │ ├── ItCollapse.tsx │ │ ├── ItComment.tsx │ │ ├── ItCopy.tsx │ │ ├── ItDelete.tsx │ │ ├── ItDesignersItalia.tsx │ │ ├── ItDownload.tsx │ │ ├── ItError.tsx │ │ ├── ItExchangeCircle.tsx │ │ ├── ItExpand.tsx │ │ ├── ItExternalLink.tsx │ │ ├── ItFacebook.tsx │ │ ├── ItFacebookSquare.tsx │ │ ├── ItFigma.tsx │ │ ├── ItFigmaSquare.tsx │ │ ├── ItFile.tsx │ │ ├── ItFileAudio.tsx │ │ ├── ItFileCompressed.tsx │ │ ├── ItFileCsv.tsx │ │ ├── ItFileDocx.tsx │ │ ├── ItFileImage.tsx │ │ ├── ItFileJson.tsx │ │ ├── ItFileOdp.tsx │ │ ├── ItFileOds.tsx │ │ ├── ItFileOdt.tsx │ │ ├── ItFilePdf.tsx │ │ ├── ItFilePdfExt.tsx │ │ ├── ItFilePpt.tsx │ │ ├── ItFileSheet.tsx │ │ ├── ItFileSigned.tsx │ │ ├── ItFileSlides.tsx │ │ ├── ItFileTxt.tsx │ │ ├── ItFileVideo.tsx │ │ ├── ItFileXlsx.tsx │ │ ├── ItFileXml.tsx │ │ ├── ItFiles.tsx │ │ ├── ItFlag.tsx │ │ ├── ItFlickr.tsx │ │ ├── ItFlickrSquare.tsx │ │ ├── ItFolder.tsx │ │ ├── ItFullscreen.tsx │ │ ├── ItFunnel.tsx │ │ ├── ItGithub.tsx │ │ ├── ItGoogle.tsx │ │ ├── ItHearing.tsx │ │ ├── ItHelp.tsx │ │ ├── ItHelpCircle.tsx │ │ ├── ItHorn.tsx │ │ ├── ItInbox.tsx │ │ ├── ItInfoCircle.tsx │ │ ├── ItInstagram.tsx │ │ ├── ItKey.tsx │ │ ├── ItLessCircle.tsx │ │ ├── ItLink.tsx │ │ ├── ItLinkedin.tsx │ │ ├── ItLinkedinSquare.tsx │ │ ├── ItList.tsx │ │ ├── ItLock.tsx │ │ ├── ItLocked.tsx │ │ ├── ItLogout.tsx │ │ ├── ItMail.tsx │ │ ├── ItMailOpen.tsx │ │ ├── ItMapMarker.tsx │ │ ├── ItMapMarkerCircle.tsx │ │ ├── ItMapMarkerMinus.tsx │ │ ├── ItMapMarkerPlus.tsx │ │ ├── ItMastodon.tsx │ │ ├── ItMastodonSquare.tsx │ │ ├── ItMaximize.tsx │ │ ├── ItMaximizeAlt.tsx │ │ ├── ItMedium.tsx │ │ ├── ItMediumSquare.tsx │ │ ├── ItMinimize.tsx │ │ ├── ItMinus.tsx │ │ ├── ItMinusCircle.tsx │ │ ├── ItMoodle.tsx │ │ ├── ItMoodleSquare.tsx │ │ ├── ItMoreActions.tsx │ │ ├── ItMoreItems.tsx │ │ ├── ItNote.tsx │ │ ├── ItOpenSource.tsx │ │ ├── ItPa.tsx │ │ ├── ItPasswordInvisible.tsx │ │ ├── ItPasswordVisible.tsx │ │ ├── ItPencil.tsx │ │ ├── ItPiattaforme.tsx │ │ ├── ItPin.tsx │ │ ├── ItPinterest.tsx │ │ ├── ItPinterestSquare.tsx │ │ ├── ItPlug.tsx │ │ ├── ItPlus.tsx │ │ ├── ItPlusCircle.tsx │ │ ├── ItPresentation.tsx │ │ ├── ItPrint.tsx │ │ ├── ItQuora.tsx │ │ ├── ItQuoraSquare.tsx │ │ ├── ItReddit.tsx │ │ ├── ItRedditSquare.tsx │ │ ├── ItRefresh.tsx │ │ ├── ItRestore.tsx │ │ ├── ItRss.tsx │ │ ├── ItRssSquare.tsx │ │ ├── ItSearch.tsx │ │ ├── ItSettings.tsx │ │ ├── ItShare.tsx │ │ ├── ItSign.tsx │ │ ├── ItSlack.tsx │ │ ├── ItSlackSquare.tsx │ │ ├── ItSnapchat.tsx │ │ ├── ItSnapchatSquare.tsx │ │ ├── ItSoftware.tsx │ │ ├── ItSpotify.tsx │ │ ├── ItStackexchange.tsx │ │ ├── ItStackexchangeSquare.tsx │ │ ├── ItStackoverflow.tsx │ │ ├── ItStackoverflowSquare.tsx │ │ ├── ItStarFull.tsx │ │ ├── ItStarOutline.tsx │ │ ├── ItTeamDigitale.tsx │ │ ├── ItTelegram.tsx │ │ ├── ItTelephone.tsx │ │ ├── ItThreads.tsx │ │ ├── ItThreadsSquare.tsx │ │ ├── ItTiktok.tsx │ │ ├── ItTiktokSquare.tsx │ │ ├── ItTool.tsx │ │ ├── ItTwitter.tsx │ │ ├── ItTwitterSquare.tsx │ │ ├── ItUnlocked.tsx │ │ ├── ItUpload.tsx │ │ ├── ItUser.tsx │ │ ├── ItVideo.tsx │ │ ├── ItVimeo.tsx │ │ ├── ItVimeoSquare.tsx │ │ ├── ItWarning.tsx │ │ ├── ItWarningCircle.tsx │ │ ├── ItWhatsapp.tsx │ │ ├── ItWhatsappSquare.tsx │ │ ├── ItWifi.tsx │ │ ├── ItYoutube.tsx │ │ ├── ItZoomIn.tsx │ │ ├── ItZoomOut.tsx │ │ └── index.ts │ ├── Input/ │ │ ├── Input.tsx │ │ ├── InputContainer.tsx │ │ ├── TextArea.tsx │ │ └── utils.tsx │ ├── LinkList/ │ │ ├── LinkList.tsx │ │ └── LinkListItem.tsx │ ├── List/ │ │ ├── List.tsx │ │ └── ListItem.tsx │ ├── Megamenu/ │ │ ├── MegamenuFooter.tsx │ │ ├── MegamenuHighlightColumn.tsx │ │ └── MegamenuItem.tsx │ ├── Modal/ │ │ ├── Modal.tsx │ │ ├── ModalBody.tsx │ │ ├── ModalFooter.tsx │ │ └── ModalHeader.tsx │ ├── Nav/ │ │ └── Nav.tsx │ ├── NavScroll/ │ │ ├── debounce.ts │ │ ├── index.ts │ │ ├── types.ts │ │ ├── useNavScroll.ts │ │ └── useSizeDetector.ts │ ├── Notification/ │ │ ├── Notification.tsx │ │ ├── NotificationContent.tsx │ │ ├── NotificationManager.tsx │ │ ├── core.tsx │ │ ├── index.ts │ │ ├── types.ts │ │ └── usePosition.tsx │ ├── Pager/ │ │ └── Pager.tsx │ ├── Progress/ │ │ └── Progress.tsx │ ├── Rating/ │ │ └── Rating.tsx │ ├── ResponsiveImage/ │ │ └── ResponsiveImage.tsx │ ├── Section/ │ │ └── Section.tsx │ ├── Select/ │ │ └── Select.tsx │ ├── Sidebar/ │ │ └── Sidebar.tsx │ ├── Skiplink/ │ │ ├── Skiplink.tsx │ │ └── SkiplinkItem.tsx │ ├── Spinner/ │ │ └── Spinner.tsx │ ├── Stepper/ │ │ ├── StepperContainer.tsx │ │ ├── StepperContent.tsx │ │ ├── StepperDots.tsx │ │ ├── StepperHeader.tsx │ │ ├── StepperHeaderElement.tsx │ │ └── StepperNav.tsx │ ├── Tab/ │ │ ├── TabNav.tsx │ │ ├── TabNavItem.tsx │ │ ├── TabNavLink.tsx │ │ └── TabPanel.tsx │ ├── ThumbNav/ │ │ ├── ThumbNav.tsx │ │ └── ThumbNavItem.tsx │ ├── Timeline/ │ │ ├── TimelinePin.tsx │ │ └── TimelineWrapper.tsx │ ├── Toggle/ │ │ └── Toggle.tsx │ ├── Toolbar/ │ │ ├── Toolbar.tsx │ │ ├── ToolbarDividerItem.tsx │ │ └── ToolbarItem.tsx │ ├── Transfer/ │ │ ├── BacktransferButton.tsx │ │ ├── Item.tsx │ │ ├── ResetButton.tsx │ │ ├── SelectAllCheckbox.tsx │ │ ├── Source.tsx │ │ ├── Target.tsx │ │ ├── Transfer.tsx │ │ ├── TransferButton.tsx │ │ └── useTransferContext.tsx │ ├── Upload/ │ │ ├── Upload.tsx │ │ ├── UploadDragNdrop.tsx │ │ ├── UploadList.tsx │ │ ├── UploadListItem.tsx │ │ └── useUploadContext.ts │ ├── Video/ │ │ └── Video.tsx │ ├── index.ts │ ├── track-focus.js │ ├── transitions.ts │ ├── types/ │ │ └── svg.d.ts │ └── utils.tsx ├── static/ │ └── favicons/ │ ├── browserconfig.xml │ └── manifest.webmanifest ├── stories/ │ ├── Components/ │ │ ├── Accordion.stories.tsx │ │ ├── Alert.stories.tsx │ │ ├── Avatar/ │ │ │ ├── Avatar.stories.tsx │ │ │ ├── AvatarBehaviour.stories.tsx │ │ │ ├── AvatarGroupsList.stories.tsx │ │ │ └── AvatarGroupsOverlapping.stories.tsx │ │ ├── BackToTop.stories.tsx │ │ ├── Badge.stories.tsx │ │ ├── BottomNav.stories.tsx │ │ ├── Breadcrumb.stories.tsx │ │ ├── Button.stories.tsx │ │ ├── Callout.stories.tsx │ │ ├── Card.stories.tsx │ │ ├── Carousel.stories.tsx │ │ ├── Chips.stories.tsx │ │ ├── Color.stories.tsx │ │ ├── ColorCustom.stories.tsx │ │ ├── Dimmer.stories.tsx │ │ ├── Dropdown/ │ │ │ ├── Dropdown.stories.tsx │ │ │ └── DropdownMenu.stories.tsx │ │ ├── Footer.stories.tsx │ │ ├── Form/ │ │ │ ├── Checkbox.stories.tsx │ │ │ ├── FormValidation.stories.tsx │ │ │ ├── Input.stories.tsx │ │ │ ├── InputNumerico.stories.tsx │ │ │ ├── Introduzione.stories.tsx │ │ │ ├── Radio.stories.tsx │ │ │ ├── Select.stories.tsx │ │ │ └── Toggles.stories.tsx │ │ ├── Forward.stories.tsx │ │ ├── GoBack.stories.tsx │ │ ├── Griglie.stories.tsx │ │ ├── Header/ │ │ │ ├── CenterHeader.stories.tsx │ │ │ ├── CompleteHeader.stories.tsx │ │ │ ├── NavHeader.stories.tsx │ │ │ └── SlimHeader.stories.tsx │ │ ├── Hero.stories.tsx │ │ ├── Icon.stories.tsx │ │ ├── ImagesList.stories.tsx │ │ ├── List/ │ │ │ ├── LinkList.stories.tsx │ │ │ └── List.stories.tsx │ │ ├── Megamenu.stories.tsx │ │ ├── Modal.stories.tsx │ │ ├── NavScroll/ │ │ │ ├── NavScroll.stories.tsx │ │ │ └── utils.ts │ │ ├── Notification.stories.tsx │ │ ├── Pager.stories.tsx │ │ ├── Popover.stories.tsx │ │ ├── Progress.stories.tsx │ │ ├── Rating.stories.tsx │ │ ├── Section.stories.tsx │ │ ├── Sidebar.stories.tsx │ │ ├── Skiplinks.stories.tsx │ │ ├── Spinner.stories.tsx │ │ ├── Stepper/ │ │ │ ├── Stepper.Navigation.stories.tsx │ │ │ ├── Stepper.NavigationDark.stories.tsx │ │ │ └── Stepper.stories.tsx │ │ ├── Tab.stories.tsx │ │ ├── Tables.stories.tsx │ │ ├── ThumbNav.stories.tsx │ │ ├── Timeline.stories.tsx │ │ ├── Toolbar.stories.tsx │ │ ├── Tooltip.stories.tsx │ │ ├── Transfer.stories.tsx │ │ ├── Typography.stories.tsx │ │ ├── Upload.stories.tsx │ │ └── Video.stories.tsx │ ├── Documentation/ │ │ ├── Accordion.mdx │ │ ├── Alert.mdx │ │ ├── Avatar.mdx │ │ ├── BackToTop.mdx │ │ ├── Badge.mdx │ │ ├── BottomNav.mdx │ │ ├── Breadcrumb.mdx │ │ ├── Button.mdx │ │ ├── Callout.mdx │ │ ├── Card.mdx │ │ ├── Carousel.mdx │ │ ├── Chips.mdx │ │ ├── Color.mdx │ │ ├── ColorCustom.mdx │ │ ├── Dimmer.mdx │ │ ├── Dropdown.mdx │ │ ├── Footer.mdx │ │ ├── Form/ │ │ │ ├── Checkbox.mdx │ │ │ ├── Input.mdx │ │ │ ├── InputNumerico.mdx │ │ │ ├── Introduzione.mdx │ │ │ ├── Radio.mdx │ │ │ ├── Select.mdx │ │ │ ├── Toggles.mdx │ │ │ └── Transfer.mdx │ │ ├── Forward.mdx │ │ ├── GoBack.mdx │ │ ├── Griglie.mdx │ │ ├── Headers.mdx │ │ ├── Hero.mdx │ │ ├── Icon.mdx │ │ ├── ImagesList.mdx │ │ ├── List.mdx │ │ ├── Megamenu.mdx │ │ ├── Modal.mdx │ │ ├── NavScroll.mdx │ │ ├── Notification.mdx │ │ ├── Pager.mdx │ │ ├── Popover.mdx │ │ ├── Progress.mdx │ │ ├── Rating.mdx │ │ ├── Section.mdx │ │ ├── Sidebar.mdx │ │ ├── Skiplinks.mdx │ │ ├── Stepper.mdx │ │ ├── Tab.mdx │ │ ├── Tables.mdx │ │ ├── ThumbNav.mdx │ │ ├── Timeline.mdx │ │ ├── Toolbar.mdx │ │ ├── Tooltip.mdx │ │ ├── Typography.mdx │ │ ├── Upload.mdx │ │ └── Video.mdx │ ├── Welcome.mdx │ └── faq.mdx ├── test/ │ ├── Accordion.test.tsx │ ├── BottomNavItem.test.tsx │ ├── Breadcrumb.test.tsx │ ├── Collapse.test.tsx │ ├── Dimmer.test.tsx │ ├── DimmerButtons.test.tsx │ ├── Header.test.tsx │ ├── Hero.test.tsx │ ├── Icon.test.tsx │ ├── Input.test.tsx │ ├── List.test.tsx │ ├── Megamenu.test.tsx │ ├── NavScroll.test.tsx │ ├── Notification.test.tsx │ ├── Progress.test.tsx │ ├── Rating.test.tsx │ ├── Section.test.tsx │ ├── StepperHeaderElement.test.tsx │ ├── Storybook.test.tsx │ ├── TextArea.test.tsx │ ├── TimelinePin.test.tsx │ ├── Toolbar.test.tsx │ ├── ToolbarDividerItem.test.tsx │ ├── ToolbarItem.test.tsx │ ├── Transfer.test.tsx │ ├── __mocks__/ │ │ ├── IntersectionObserverMock.ts │ │ ├── bootstrap-italia.ts │ │ └── matchMedia.ts │ ├── __snapshots__/ │ │ └── Storybook.test.tsx.snap │ ├── helper.tsx │ ├── icons-with-no-title.txt │ └── utils.test.tsx ├── tsconfig.json └── tsup.config.ts
SYMBOL INDEX (266 symbols across 200 files)
FILE: .storybook/main.ts
method viteFinal (line 15) | async viteFinal(config) {
FILE: scripts/svgIndexTemplate.js
function defaultIndexTemplate (line 9) | function defaultIndexTemplate(filePaths) {
FILE: scripts/svgTemplate.js
function defaultTemplate (line 1) | function defaultTemplate({ imports, componentName, props, jsx, interface...
FILE: src/Accordion/Accordion.tsx
type AccordionProps (line 4) | interface AccordionProps extends HTMLAttributes<HTMLElement> {
FILE: src/Accordion/AccordionBody.tsx
type AccordionBodyProps (line 8) | type AccordionBodyProps = Partial<TransitionProps> & {
function getTransitionClass (line 24) | function getTransitionClass(status: string) {
function getHeight (line 28) | function getHeight(node: HTMLElement) {
FILE: src/Accordion/AccordionHeader.tsx
type AccordionHeaderProps (line 4) | interface AccordionHeaderProps extends HTMLAttributes<HTMLElement> {
FILE: src/Accordion/AccordionItem.tsx
type AccordionItemProps (line 4) | interface AccordionItemProps extends HTMLAttributes<HTMLElement> {
FILE: src/Alert/Alert.tsx
type AlertProps (line 6) | interface AlertProps extends HTMLAttributes<HTMLElement> {
FILE: src/Autocomplete/Autocomplete.tsx
type AutocompleteAttributes (line 8) | interface AutocompleteAttributes {
FILE: src/Avatar/AvatarContainer.tsx
type AvatarContainerProps (line 4) | interface AvatarContainerProps extends HTMLAttributes<HTMLElement> {
FILE: src/Avatar/AvatarExtraText.tsx
type AvatarExtraTextProps (line 4) | interface AvatarExtraTextProps extends HTMLAttributes<HTMLElement> {
FILE: src/Avatar/AvatarGroupContainer.tsx
type AvatarGroupContainerProps (line 4) | interface AvatarGroupContainerProps extends HTMLAttributes<HTMLUListElem...
FILE: src/Avatar/AvatarIcon.tsx
type AvatarIconProps (line 4) | interface AvatarIconProps extends HTMLAttributes<HTMLElement> {
FILE: src/Avatar/AvatarPresence.tsx
type AvatarPresenceProps (line 4) | interface AvatarPresenceProps extends HTMLAttributes<HTMLElement> {
FILE: src/Avatar/AvatarStatus.tsx
type AvatarStatusProps (line 4) | interface AvatarStatusProps extends HTMLAttributes<HTMLElement> {
FILE: src/Avatar/AvatarWrapper.tsx
type AvatarWrapperProps (line 4) | interface AvatarWrapperProps extends HTMLAttributes<HTMLElement> {
FILE: src/BackToTop/BackToTop.tsx
type BackToTopProps (line 5) | interface BackToTopProps {
FILE: src/Badge/Badge.tsx
type BadgeProps (line 5) | type BadgeProps = {
FILE: src/BottomNav/BottomNav.tsx
type BottomNavProps (line 3) | interface BottomNavProps extends HTMLAttributes<HTMLElement> {
FILE: src/BottomNav/BottomNavItem.tsx
type BottomNavItemProps (line 5) | interface BottomNavItemProps extends HTMLAttributes<HTMLLIElement> {
FILE: src/Breadcrumb/Breadcrumb.tsx
type BreadcrumbProps (line 6) | interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/Button/Button.tsx
type ButtonProps (line 8) | interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
FILE: src/Callout/Callout.tsx
type CalloutProps (line 4) | interface CalloutProps extends HTMLAttributes<HTMLElement> {
FILE: src/Callout/CalloutMoreFooter.tsx
type CalloutMoreFooterProps (line 6) | interface CalloutMoreFooterProps {
FILE: src/Callout/CalloutText.tsx
type CalloutTextProps (line 4) | interface CalloutTextProps extends HTMLAttributes<HTMLElement> {
FILE: src/Callout/CalloutTitle.tsx
type CalloutTitleProps (line 4) | interface CalloutTitleProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/Card.tsx
type CardProps (line 5) | interface CardProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardBody.tsx
type CardBodyProps (line 8) | interface CardBodyProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardCategory.tsx
type CardCategoryProps (line 6) | interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardFooterCTA.tsx
type CardFooterCTAProps (line 4) | interface CardFooterCTAProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardReadMore.tsx
type CardReadMoreProps (line 6) | interface CardReadMoreProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardSignature.tsx
type CardSignatureProps (line 4) | interface CardSignatureProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardTag.tsx
type CardTagProps (line 4) | interface CardTagProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
FILE: src/Card/CardTagsHeader.tsx
type CardTagsHeaderProps (line 4) | interface CardTagsHeaderProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardText.tsx
type CardTextProps (line 8) | interface CardTextProps extends HTMLAttributes<HTMLElement> {
FILE: src/Card/CardTitle.tsx
type CardTitleProps (line 8) | interface CardTitleProps extends HTMLAttributes<HTMLElement> {
FILE: src/Carousel/Carousel.tsx
constant CONFIG_DEFAULT (line 7) | const CONFIG_DEFAULT: any = {
constant CONFIGS (line 28) | const CONFIGS: any= {
constant EXTRA_CLASSES (line 164) | const EXTRA_CLASSES: any= {
type CarouselProps (line 189) | interface CarouselProps extends SplideProps {
FILE: src/Chips/Chip.tsx
type ChipProps (line 4) | interface ChipProps extends HTMLAttributes<HTMLElement> {
FILE: src/Chips/ChipLabel.tsx
type ChipLabelProps (line 4) | interface ChipLabelProps extends HTMLAttributes<HTMLElement> {
FILE: src/Collapse/Collapse.tsx
type CollapseProps (line 10) | interface CollapseProps extends HTMLAttributes<HTMLElement> {
FILE: src/Dimmer/Dimmer.tsx
type DimmerProps (line 6) | interface DimmerProps extends HTMLAttributes<HTMLElement> {
FILE: src/Dimmer/DimmerButtons.tsx
type DimmerButtonsProps (line 4) | interface DimmerButtonsProps extends HTMLAttributes<HTMLElement> {
FILE: src/Dropdown/Dropdown.tsx
type DropdownProps (line 4) | interface DropdownProps extends BSDRopdownProps {
FILE: src/Dropdown/DropdownMenu.tsx
type DropdownMenuProps (line 5) | interface DropdownMenuProps extends HTMLAttributes<HTMLElement> {
FILE: src/Dropdown/DropdownToggle.tsx
type DropdownToggleProps (line 6) | interface DropdownToggleProps extends HTMLAttributes<HTMLElement> {
FILE: src/FontLoader/FontLoader.tsx
type FontLoaderProps (line 3) | interface FontLoaderProps {
function useFontLoader (line 17) | function useFontLoader({ fonts }: FontLoaderProps) {
FILE: src/Forward/Forward.tsx
type ForwardProps (line 4) | interface ForwardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
FILE: src/GoBack/GoBack.tsx
type GoBackProps (line 6) | interface GoBackProps {
FILE: src/Grid/GridItem.tsx
type GridItemProps (line 4) | interface GridItemProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/Grid/GridItemText.tsx
type GridItemTextProps (line 4) | interface GridItemTextProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/Grid/GridItemTextWrapper.tsx
type GridItemTextWrapperProps (line 4) | interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElemen...
FILE: src/Grid/GridList.tsx
type GridListProps (line 4) | interface GridListProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/Grid/GridRow.tsx
type GridRowProps (line 4) | interface GridRowProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/Header/Header.tsx
type HeaderProps (line 6) | interface HeaderProps extends HTMLAttributes<HTMLElement> {
FILE: src/Header/HeaderBrand.tsx
type HeaderBrandProps (line 8) | interface HeaderBrandProps extends AnchorHTMLAttributes<HTMLAnchorElemen...
FILE: src/Header/HeaderContent.tsx
type HeaderContentProps (line 7) | interface HeaderContentProps extends HTMLAttributes<HTMLElement> {
FILE: src/Header/HeaderContext.tsx
constant SLIM (line 3) | const SLIM = 'slim';
constant CENTER (line 4) | const CENTER = 'center';
constant NAVBAR (line 5) | const NAVBAR = 'navbar';
FILE: src/Header/HeaderLinkZone.tsx
type HeaderLinkZoneProps (line 4) | interface HeaderLinkZoneProps extends HTMLAttributes<HTMLElement> {
FILE: src/Header/HeaderRightZone.tsx
type HeaderRightZoneProps (line 6) | interface HeaderRightZoneProps extends HTMLAttributes<HTMLElement> {
FILE: src/Header/HeaderSearch.tsx
type HeaderSearchProps (line 6) | interface HeaderSearchProps extends HTMLAttributes<HTMLElement> {
FILE: src/Header/HeaderSocialsZone.tsx
type HeaderSocialsZoneProps (line 4) | interface HeaderSocialsZoneProps extends HTMLAttributes<HTMLElement> {
FILE: src/Header/HeaderToggler.tsx
type HeaderTogglerProps (line 7) | interface HeaderTogglerProps extends ButtonHTMLAttributes<HTMLButtonElem...
constant BUTTON (line 22) | const BUTTON = 'button';
FILE: src/Header/Headers.tsx
type HeadersProps (line 3) | interface HeadersProps extends HTMLAttributes<HTMLElement> {
FILE: src/Hero/Hero.tsx
type HeroProps (line 4) | interface HeroProps extends HTMLAttributes<HTMLElement> {
FILE: src/Hero/HeroBackground.tsx
type HeroBackgroundProps (line 3) | interface HeroBackgroundProps extends HTMLAttributes<HTMLImageElement> {
FILE: src/Hero/HeroBody.tsx
type HeroBodyProps (line 5) | interface HeroBodyProps extends HTMLAttributes<HTMLElement> {
FILE: src/Hero/HeroButton.tsx
type HeroButtonProps (line 5) | interface HeroButtonProps extends ButtonProps {
FILE: src/Hero/HeroCategory.tsx
type HeroCategoryProps (line 4) | interface HeroCategoryProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/Hero/HeroTitle.tsx
type HeroTitleProps (line 4) | interface HeroTitleProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/Icon/EmptyIcon.tsx
type SVGRProps (line 2) | interface SVGRProps {
FILE: src/Icon/Icon.tsx
function preloadIcons (line 16) | async function preloadIcons(icons: IconName[]) {
type IconProps (line 41) | interface IconProps extends SVGProps<SVGSVGElement> {
FILE: src/Icon/assets/index.ts
type IconName (line 182) | type IconName = keyof typeof iconList;
function isBundledIcon (line 728) | function isBundledIcon(name: string): name is IconName {
type SVGRProps (line 734) | interface SVGRProps {
FILE: src/Input/Input.tsx
type InputType (line 20) | type InputType =
type InputProps (line 50) | interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
FILE: src/Input/InputContainer.tsx
type InputContainerProps (line 3) | interface InputContainerProps extends HTMLAttributes<HTMLElement> {
FILE: src/Input/TextArea.tsx
type TextAreaProps (line 7) | interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaEleme...
FILE: src/Input/utils.tsx
type ValidationProps (line 7) | type ValidationProps = Pick<InputProps, 'valid'>;
type TypeProps (line 8) | type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
type FormControlProps (line 11) | type FormControlProps = Pick<InputProps, 'normalized'> & TypeProps;
function getFormControlClassInternal (line 13) | function getFormControlClassInternal({ plaintext, staticInput, type = 't...
function getFormControlClass (line 27) | function getFormControlClass(props: FormControlProps, cssModule?: CSSMod...
function getValidationTextControlClass (line 31) | function getValidationTextControlClass({ valid }: ValidationProps, cssMo...
function getTag (line 41) | function getTag({ tag, plaintext, staticInput, type = 'text' }: Pick<Inp...
type InputClassesParams (line 54) | type InputClassesParams = ValidationProps &
function getClasses (line 63) | function getClasses(
function useFocus (line 146) | function useFocus<T extends HTMLInputElement | HTMLTextAreaElement>({
FILE: src/LinkList/LinkList.tsx
type LinkListProps (line 4) | interface LinkListProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/LinkList/LinkListItem.tsx
type LinkListItemProps (line 4) | interface LinkListItemProps extends AnchorHTMLAttributes<HTMLAnchorEleme...
FILE: src/List/List.tsx
type ListProps (line 4) | interface ListProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/List/ListItem.tsx
type ListItemProps (line 4) | interface ListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
FILE: src/Megamenu/MegamenuFooter.tsx
type MegamenuFooterProps (line 4) | interface MegamenuFooterProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/Megamenu/MegamenuHighlightColumn.tsx
type MegamenuHCProps (line 5) | interface MegamenuHCProps extends ColProps {
FILE: src/Megamenu/MegamenuItem.tsx
type MegamenuItemProps (line 7) | interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/Modal/Modal.tsx
type ModalProps (line 6) | interface ModalProps extends HTMLAttributes<HTMLElement> {
FILE: src/Modal/ModalBody.tsx
type ModalBodyProps (line 5) | interface ModalBodyProps extends HTMLAttributes<HTMLElement> {
FILE: src/Modal/ModalFooter.tsx
type ModalFooterProps (line 5) | interface ModalFooterProps extends HTMLAttributes<HTMLElement> {
FILE: src/Modal/ModalHeader.tsx
type ModalHeaderProps (line 7) | interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
FILE: src/Nav/Nav.tsx
type NavProps (line 5) | interface NavProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/NavScroll/types.ts
type ChangesType (line 13) | type ChangesType = {
type useNavScrollArgs (line 21) | type useNavScrollArgs = {
type RegisterOptions (line 44) | type RegisterOptions = {
type RegisteredAttributes (line 58) | type RegisteredAttributes<T extends Element> = {
type useNavScrollResult (line 66) | type useNavScrollResult = {
type TrackedElement (line 96) | type TrackedElement = {
FILE: src/NavScroll/useNavScroll.ts
class ScrollCallback (line 25) | class ScrollCallback {
method constructor (line 28) | constructor(id: string, callback: any) {
method dispose (line 34) | dispose() {
method _execute (line 39) | _execute(data: any) {
constant REGISTER_DELAY (line 80) | const REGISTER_DELAY = 50;
function resolveHierarchyIds (line 82) | function resolveHierarchyIds(id: string, lookup: Record<string, string |...
function useNavScroll (line 97) | function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
FILE: src/NavScroll/useSizeDetector.ts
constant DEFAULT_DELAY (line 11) | const DEFAULT_DELAY = 150;
type useSizeDetectorArgs (line 13) | type useSizeDetectorArgs = Omit<useNavScrollArgs, 'offset'> & {
FILE: src/Notification/Notification.tsx
type NotificationProps (line 6) | type NotificationProps = Omit<ToastProps, 'transition'> & NotificationCo...
FILE: src/Notification/NotificationContent.tsx
type NotificationToastProps (line 9) | interface NotificationToastProps {
type NotificationElementProps (line 18) | type NotificationElementProps = {
type NotificationOptions (line 45) | type NotificationOptions = NotificationCommonProps &
function pickIcon (line 55) | function pickIcon(state: NotificationToastProps['state']) {
function NotificationElement (line 70) | function NotificationElement({ closeToast, toastProps, title, body, opti...
FILE: src/Notification/NotificationManager.tsx
type NotificationManagerProps (line 14) | interface NotificationManagerProps extends NotificationCommonProps {
FILE: src/Notification/core.tsx
function notify (line 11) | function notify(
function isReactNode (line 26) | function isReactNode(el: ReactNode | NotificationOptions | undefined): e...
FILE: src/Notification/types.ts
type NotificationCommonProps (line 1) | interface NotificationCommonProps {
type NotificationId (line 12) | type NotificationId = string;
FILE: src/Notification/usePosition.tsx
function usePosition (line 6) | function usePosition() {
FILE: src/Pager/Pager.tsx
type PagerProps (line 5) | interface PagerProps extends HTMLAttributes<HTMLElement> {
FILE: src/Progress/Progress.tsx
type ProgressProps (line 6) | interface ProgressProps extends HTMLAttributes<HTMLElement> {
FILE: src/Rating/Rating.tsx
type UnusedProps (line 10) | type UnusedProps =
type RatingProps (line 21) | interface RatingProps extends Omit<InputProps, UnusedProps> {
FILE: src/ResponsiveImage/ResponsiveImage.tsx
type ResponsiveImageProps (line 3) | interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
FILE: src/Section/Section.tsx
type SectionProps (line 5) | interface SectionProps extends HTMLAttributes<HTMLElement> {
FILE: src/Select/Select.tsx
type SelectProps (line 3) | interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElemen...
FILE: src/Sidebar/Sidebar.tsx
type SidebarProps (line 4) | interface SidebarProps extends HTMLAttributes<HTMLElement> {
FILE: src/Skiplink/Skiplink.tsx
type SkiplinkProps (line 4) | interface SkiplinkProps extends HTMLAttributes<HTMLElement> {
FILE: src/Skiplink/SkiplinkItem.tsx
type SkiplinkItemProps (line 4) | interface SkiplinkItemProps extends AnchorHTMLAttributes<HTMLAnchorEleme...
FILE: src/Spinner/Spinner.tsx
type SpinnerProps (line 4) | interface SpinnerProps extends HTMLAttributes<HTMLElement> {
FILE: src/Stepper/StepperContainer.tsx
type StepperContainerProps (line 4) | interface StepperContainerProps extends HTMLAttributes<HTMLElement> {
FILE: src/Stepper/StepperContent.tsx
type StepperContentProps (line 4) | interface StepperContentProps extends HTMLAttributes<HTMLElement> {
FILE: src/Stepper/StepperDots.tsx
type StepperDotsProps (line 4) | interface StepperDotsProps extends HTMLAttributes<HTMLElement> {
FILE: src/Stepper/StepperHeader.tsx
type StepperHeaderProps (line 4) | interface StepperHeaderProps extends HTMLAttributes<HTMLElement> {
FILE: src/Stepper/StepperHeaderElement.tsx
type StepperHeaderElementProps (line 14) | interface StepperHeaderElementProps extends HTMLAttributes<HTMLLIElement> {
FILE: src/Stepper/StepperNav.tsx
type StepperNavProps (line 4) | interface StepperNavProps extends HTMLAttributes<HTMLElement> {
FILE: src/Tab/TabNav.tsx
type TabNavProps (line 5) | interface TabNavProps extends NavProps {
FILE: src/Tab/TabNavItem.tsx
type TabNavItemProps (line 4) | interface TabNavItemProps extends NavItemProps {
FILE: src/Tab/TabNavLink.tsx
type TabNavLinkProps (line 4) | interface TabNavLinkProps extends NavLinkProps {
FILE: src/Tab/TabPanel.tsx
type TabsProps (line 4) | interface TabsProps extends NavProps {
FILE: src/ThumbNav/ThumbNav.tsx
type ThumbNavProps (line 4) | interface ThumbNavProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/ThumbNav/ThumbNavItem.tsx
type ThumbNavItemProps (line 4) | interface ThumbNavItemProps extends HTMLAttributes<HTMLLIElement> {
FILE: src/Timeline/TimelinePin.tsx
type TimelinePinProps (line 6) | interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
FILE: src/Timeline/TimelineWrapper.tsx
type TimelineProps (line 4) | interface TimelineProps extends HTMLAttributes<HTMLElement> {
FILE: src/Toggle/Toggle.tsx
type ToggleProps (line 7) | interface ToggleProps extends InputProps {
FILE: src/Toolbar/Toolbar.tsx
type ToolbarProps (line 6) | interface ToolbarProps extends HTMLAttributes<HTMLElement> {
FILE: src/Toolbar/ToolbarItem.tsx
type ToolbarItemBadge (line 7) | interface ToolbarItemBadge {
type ToolbarItemProps (line 13) | interface ToolbarItemProps extends HTMLAttributes<HTMLElement> {
function ToolbarItemLabel (line 70) | function ToolbarItemLabel({
FILE: src/Transfer/useTransferContext.tsx
type TransferContextType (line 3) | interface TransferContextType {
FILE: src/Upload/Upload.tsx
type UploadProps (line 5) | interface UploadProps extends InputHTMLAttributes<HTMLInputElement> {
FILE: src/Upload/UploadDragNdrop.tsx
type UploadDragNdropProps (line 6) | interface UploadDragNdropProps {
FILE: src/Upload/UploadList.tsx
type UploadListProps (line 5) | interface UploadListProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/Upload/UploadListItem.tsx
type UploadListItemProps (line 7) | interface UploadListItemProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/Upload/useUploadContext.ts
type UploadContextType (line 3) | interface UploadContextType {
FILE: src/Video/Video.tsx
type VideoSource (line 15) | interface VideoSource {
type VideoTrackSource (line 21) | interface VideoTrackSource {
type VideoYouTube (line 34) | interface VideoYouTube {
type VideoProps (line 44) | interface VideoProps {
FILE: src/track-focus.js
constant DATA_MOUSE_FOCUS (line 11) | const DATA_MOUSE_FOCUS = 'data-focus-mouse';
constant CLASS_NAME_MOUSE_FOCUS (line 12) | const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse';
class TrackFocus (line 14) | class TrackFocus {
method constructor (line 15) | constructor() {
method _bindEvents (line 21) | _bindEvents() {
FILE: src/transitions.ts
type TransitionStates (line 38) | type TransitionStates = keyof typeof transitionStatus;
FILE: src/utils.tsx
function mapToCssModules (line 32) | function mapToCssModules(className: string | null, cssModules?: Record<s...
type UnknownObject (line 43) | type UnknownObject = Record<string, unknown>;
function pick (line 45) | function pick<T extends UnknownObject>(obj: T, keys: keyof T | Array<key...
function omit (line 56) | function omit<T extends UnknownObject>(obj: T, keys: keyof T | Array<key...
FILE: stories/Components/Accordion.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Accordion>;
FILE: stories/Components/Alert.stories.tsx
type Story (line 22) | type Story = StoryObj<typeof Alert>;
FILE: stories/Components/Avatar/Avatar.stories.tsx
type Story (line 18) | type Story = StoryObj<typeof AvatarIcon>;
FILE: stories/Components/Avatar/AvatarBehaviour.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof AvatarIcon>;
FILE: stories/Components/BackToTop.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof BackToTop>;
FILE: stories/Components/Badge.stories.tsx
type Story (line 22) | type Story = StoryObj<typeof Badge>;
FILE: stories/Components/BottomNav.stories.tsx
type Story (line 19) | type Story = StoryObj<typeof BottomNav>;
FILE: stories/Components/Breadcrumb.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof Breadcrumb>;
FILE: stories/Components/Button.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Button>;
FILE: stories/Components/Callout.stories.tsx
type Story (line 16) | type Story = StoryObj<typeof Callout>;
FILE: stories/Components/Card.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Card>;
FILE: stories/Components/Carousel.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Container>;
FILE: stories/Components/Chips.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Chip>;
FILE: stories/Components/Dimmer.stories.tsx
type Story (line 14) | type Story = StoryObj<typeof Dimmer>;
FILE: stories/Components/Dropdown/Dropdown.stories.tsx
type Story (line 19) | type Story = StoryObj<typeof Dropdown>;
FILE: stories/Components/Dropdown/DropdownMenu.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof DropdownMenu>;
FILE: stories/Components/Footer.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Container>;
FILE: stories/Components/Form/Checkbox.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Input>;
FILE: stories/Components/Form/FormValidation.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof Input>;
FILE: stories/Components/Form/Input.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Input>;
FILE: stories/Components/Form/InputNumerico.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Input>;
FILE: stories/Components/Form/Introduzione.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Input>;
FILE: stories/Components/Form/Radio.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Input>;
FILE: stories/Components/Form/Select.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Select>;
FILE: stories/Components/Form/Toggles.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Toggle>;
FILE: stories/Components/Forward.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Forward>;
FILE: stories/Components/GoBack.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Forward>;
FILE: stories/Components/Griglie.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Container>;
FILE: stories/Components/Header/CenterHeader.stories.tsx
type Story (line 27) | type Story = StoryObj<HeaderProps>;
FILE: stories/Components/Header/CompleteHeader.stories.tsx
type ThemeType (line 32) | type ThemeType = {
type HeaderCompleteProps (line 36) | type HeaderCompleteProps = ThemeType & {
type Story (line 278) | type Story = StoryObj<HeaderCompleteProps>;
FILE: stories/Components/Header/NavHeader.stories.tsx
type Story (line 31) | type Story = StoryObj<HeaderProps & { isOpen: boolean }>;
FILE: stories/Components/Header/SlimHeader.stories.tsx
type Story (line 30) | type Story = StoryObj<HeaderProps & { brandText: string }>;
FILE: stories/Components/Hero.stories.tsx
type Story (line 23) | type Story = StoryObj<typeof Hero>;
FILE: stories/Components/Icon.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Icon>;
FILE: stories/Components/ImagesList.stories.tsx
type Story (line 25) | type Story = StoryObj<typeof GridItem>;
FILE: stories/Components/List/LinkList.stories.tsx
type Story (line 25) | type Story = StoryObj<typeof LinkList>;
FILE: stories/Components/List/List.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof ListItem>;
FILE: stories/Components/Megamenu.stories.tsx
type Story (line 34) | type Story = StoryObj<typeof MegamenuItem>;
FILE: stories/Components/Modal.stories.tsx
type Story (line 24) | type Story = StoryObj<typeof ModalBody>;
FILE: stories/Components/NavScroll/NavScroll.stories.tsx
type Story (line 33) | type Story = StoryObj<typeof Container>;
FILE: stories/Components/NavScroll/utils.ts
function getStorybookExtraStyles (line 1) | function getStorybookExtraStyles() {
function insideDocsPage (line 10) | function insideDocsPage() {
function insideIframe (line 14) | function insideIframe() {
FILE: stories/Components/Notification.stories.tsx
type Story (line 19) | type Story = StoryObj<typeof NotificationManager>;
type NotificationDocProps (line 21) | interface NotificationDocProps {
FILE: stories/Components/Pager.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Pager>;
FILE: stories/Components/Popover.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Popover>;
FILE: stories/Components/Progress.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Progress>;
FILE: stories/Components/Rating.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Rating>;
FILE: stories/Components/Sidebar.stories.tsx
type Story (line 14) | type Story = StoryObj<typeof Sidebar>;
FILE: stories/Components/Skiplinks.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Skiplink>;
FILE: stories/Components/Spinner.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Spinner>;
FILE: stories/Components/Tab.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof TabNav>;
FILE: stories/Components/ThumbNav.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof ThumbNav>;
FILE: stories/Components/Timeline.stories.tsx
type Story (line 20) | type Story = StoryObj<typeof Timeline>;
FILE: stories/Components/Toolbar.stories.tsx
type Story (line 20) | type Story = StoryObj<typeof Toolbar>;
FILE: stories/Components/Tooltip.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Tooltip>;
FILE: stories/Components/Transfer.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof Transfer>;
FILE: stories/Components/Typography.stories.tsx
type Story (line 10) | type Story = StoryObj;
FILE: stories/Components/Upload.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Upload>;
type listaFilesArgsI (line 15) | interface listaFilesArgsI {
FILE: stories/Components/Video.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Video>;
FILE: test/Icon.test.tsx
function getIcon (line 7) | function getIcon(container: Element) {
function getIconTitle (line 10) | function getIconTitle(container: HTMLElement, title: string) {
function isEmptyIcon (line 13) | function isEmptyIcon(container: Element) {
FILE: test/NavScroll.test.tsx
function getDefaultProps (line 4) | function getDefaultProps(): useSizeDetectorArgs {
FILE: test/Notification.test.tsx
type MatcherType (line 7) | type MatcherType = 'title' | 'message' | 'closeButton';
function waitForNotificationToDisappear (line 9) | function waitForNotificationToDisappear(pattern: Matcher, type: MatcherT...
FILE: test/Storybook.test.tsx
type StoryFile (line 11) | type StoryFile = {
function getAllStoryFiles (line 24) | function getAllStoryFiles() {
FILE: test/ToolbarItem.test.tsx
function renderWithSize (line 6) | function renderWithSize(size: 'small' | 'medium' | 'large', ui: ReactEle...
FILE: test/__mocks__/bootstrap-italia.ts
class VP (line 8) | class VP {
method constructor (line 11) | constructor(el: Element) {
method setYouTubeVideo (line 15) | setYouTubeVideo(video: string) {
method dispose (line 19) | dispose() {
FILE: test/helper.tsx
function muteConsoleWithCheck (line 8) | function muteConsoleWithCheck(fn: Function, messageToFilter: string | Re...
FILE: tsup.config.ts
method esbuildOptions (line 6) | esbuildOptions(options) {
Condensed preview — 535 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,183K chars).
[
{
"path": ".editorconfig",
"chars": 302,
"preview": "# http://editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_tr"
},
{
"path": ".github/ISSUE_TEMPLATE/apri-una-segnalazione.it.yaml",
"chars": 2368,
"preview": "name: Apri una segnalazione - IT\ndescription: Per segnalare bug, aprire una discussione o inviare un contributo\nlabels: "
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 28,
"preview": "blank_issues_enabled: false\n"
},
{
"path": ".github/ISSUE_TEMPLATE/open-an-issue.en.yaml",
"chars": 2398,
"preview": "name: Open an issue - EN\ndescription: To report bugs, open a discussion, or submit a contribution\nlabels: []\nbody:\n- typ"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 984,
"preview": "<!--\n(Thanks for sending a pull request! Please make sure you click the link above to view the contribution guidelines, "
},
{
"path": ".github/workflows/ci.yml",
"chars": 704,
"preview": "name: Lint, Test & Coverage\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n coverage:\n "
},
{
"path": ".github/workflows/commit-lint.yml",
"chars": 440,
"preview": "on:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\nname: Lint commits\njobs:\n lint-commit"
},
{
"path": ".github/workflows/pc-check.yml",
"chars": 327,
"preview": "on:\n pull_request:\n branches:\n - main\n workflow_dispatch:\nname: Lint publiccode\njobs:\n publiccode_yml_validat"
},
{
"path": ".github/workflows/pc-update.yml",
"chars": 659,
"preview": "name: Publiccode.yml update\n\non:\n schedule:\n - cron: '30 17 * * *'\n\n workflow_dispatch:\n\njobs:\n build:\n runs-on"
},
{
"path": ".github/workflows/publiccode-yml-validation.yml",
"chars": 268,
"preview": "name: publiccode.yml validation\n\non: [pull_request, push]\n\njobs:\n publiccode_yml_validation:\n runs-on: ubuntu-latest"
},
{
"path": ".github/workflows/publish-release.yml",
"chars": 1178,
"preview": "name: Generate new release\non:\n push:\n tags:\n - \"v5*\"\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n "
},
{
"path": ".github/workflows/update-docs.yml",
"chars": 2531,
"preview": "name: Update documentation\n\non:\n workflow_dispatch:\n push:\n tags:\n - \"v5*\"\n\npermissions: {}\n\njobs:\n deploy:\n "
},
{
"path": ".gitignore",
"chars": 123,
"preview": "# Dependencies\nnode_modules\n\n# Outputs\nstorybook-static\ndist/\n.DS_Store\n.idea\n.cache\ncoverage\n\n# Logs\n*.log\n\n*storybook."
},
{
"path": ".husky/pre-commit",
"chars": 68,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged --verbose\n"
},
{
"path": ".npmignore",
"chars": 91,
"preview": ".circleci\n.storybook\nassets\nscripts\nstories\nstorybook-static\ndist\nsrc/__image_snapshots__/\n"
},
{
"path": ".nvmrc",
"chars": 2,
"preview": "20"
},
{
"path": ".prettierrc",
"chars": 217,
"preview": "{\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"semi\": true,\n \"tabWidth\": 2,\n \"bracketSpacing\": true,\n \"jsxBrac"
},
{
"path": ".storybook/main.ts",
"chars": 852,
"preview": "import { StorybookConfig } from '@storybook/react-vite';\n\nconst config: StorybookConfig = {\n stories: ['../stories/**/*"
},
{
"path": ".storybook/manager-head.html",
"chars": 2176,
"preview": "<title>Design React Kit</title>\r\n<meta name=\"description\" content=\"Design React Kit - A React toolkit that implements th"
},
{
"path": ".storybook/manager.js",
"chars": 125,
"preview": "import { addons } from \"storybook/manager-api\";\r\nimport theme from \"./theme\";\r\n\r\naddons.setConfig({\r\n theme: theme,\r\n"
},
{
"path": ".storybook/preview.ts",
"chars": 885,
"preview": "import { Preview } from '@storybook/react-vite';\nimport 'bootstrap-italia/dist/css/bootstrap-italia.min.css';\nimport '.."
},
{
"path": ".storybook/stories-helper.ts",
"chars": 89,
"preview": "export const componentColor = [\"primary\", \"secondary\", \"success\", \"danger\", \"warning\"];\r\n"
},
{
"path": ".storybook/theme.ts",
"chars": 381,
"preview": "import { create } from 'storybook/theming';\r\n\r\nconst theme = create({\r\n base: 'light',\r\n\r\n colorPrimary: '#00C5CA',\r\n "
},
{
"path": "AUTHORS",
"chars": 141,
"preview": "Copyright (c) 2022 - 2024 Presidenza del Consiglio dei Ministri\n\nThe version control system provides attribution for spe"
},
{
"path": "CHANGELOG.md",
"chars": 15987,
"preview": "## 5.10.0 (2026-03-17)\n\n* chore: update publiccode ([dd7364e](https://github.com/italia/design-react-kit/commit/dd7364e)"
},
{
"path": "CODE_OF_CONDUCT.EN.md",
"chars": 5291,
"preview": "# Code of Conduct\n\n## 1. Purpose\n\nA primary goal of Developers Italia is to be inclusive to the largest number of contri"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5354,
"preview": "# Codice di condotta\n\n## 1. Scopo\n\nUno degli obiettivi principali di Developers Italia è quello di includere il maggior "
},
{
"path": "CONTRIBUTING.md",
"chars": 726,
"preview": "## Come contribuire 💙\n\n👉🏻 È possibile contribuire alla libreria in vari modi:\n\n- Con il proprio codice, prendendo in car"
},
{
"path": "LICENSE",
"chars": 1508,
"preview": "Copyright (c) 2018, the respective contributors, as shown by the AUTHORS file.\n\nRedistribution and use in source and bin"
},
{
"path": "README.EN.md",
"chars": 11352,
"preview": "<h1 align=\"center\">Design React Kit</h1>\n\n<p align=\"center\">\n <img src=\".github/react-logo.png\" alt=\"react-logo\" width="
},
{
"path": "README.md",
"chars": 12265,
"preview": "<h1 align=\"center\">Design React Kit</h1>\n\n<p align=\"center\">\n <img src=\".github/react-logo.png\" alt=\"react-logo\" width="
},
{
"path": "assets/css/accesibility.css",
"chars": 250,
"preview": ".bd-callout-accessibility {\n border-left-color: #10925f !important;\n}\n\n.bd-callout {\n padding: 1.25rem;\n margin"
},
{
"path": "assets/css/storybook-fixes.css",
"chars": 3676,
"preview": "/* ==========================\r\n// `<pre>` and `<code>` tags.\r\n// ========================== */\r\n\r\npre,\r\ncode,\r\nsbdocs-pr"
},
{
"path": "assets/docs/scss/_callouts.scss",
"chars": 1159,
"preview": ".bd-callout {\n padding: 1.25rem;\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n border: 1px solid #eee;\n "
},
{
"path": "assets/docs/scss/_colors.scss",
"chars": 814,
"preview": "//\n// Docs color palette classes\n//\n\n@each $color, $value in $colors {\n .swatch-#{$color} {\n color: color-contra"
},
{
"path": "assets/docs/scss/bi-fonts.scss",
"chars": 15035,
"preview": "$font-path: '../../../node_modules/bootstrap-italia/dist/fonts';\r\n\r\n/* Titillium+Web:300,400,600,700 */\r\n\r\n/* titillium-"
},
{
"path": "assets/docs/scss/docs.scss",
"chars": 1242,
"preview": "/*!\n * Bootstrap Docs (https://getbootstrap.com)\n * Copyright 2011-2017 The Bootstrap Authors\n * Copyright 2011-2017 Twi"
},
{
"path": "babel.config.json",
"chars": 252,
"preview": "{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"targets\": {\n \"chrome\": 100\n }\n }"
},
{
"path": "codecov.yml",
"chars": 107,
"preview": "coverage:\n status:\n project:\n default:\n target: 90%\n threshold: 5%\n patch: false\n"
},
{
"path": "commitlint.config.cjs",
"chars": 3789,
"preview": "module.exports = {\n parserPreset: 'conventional-changelog-conventionalcommits',\n rules: {\n 'body-leading-blank': [1"
},
{
"path": "eslint.config.js",
"chars": 654,
"preview": "import js from '@eslint/js';\nimport reactRefresh from 'eslint-plugin-react-refresh';\nimport globals from 'globals';\nimpo"
},
{
"path": "jest-setup.js",
"chars": 35,
"preview": "import '@testing-library/jest-dom'\n"
},
{
"path": "jest.config.cjs",
"chars": 7063,
"preview": "/**\n * For a detailed explanation regarding each configuration property, visit:\n * https://jestjs.io/docs/configuration\n"
},
{
"path": "package.json",
"chars": 4501,
"preview": "{\n \"name\": \"design-react-kit\",\n \"description\": \"Componenti React per Bootstrap 5\",\n \"keywords\": [\n \"react\",\n \"b"
},
{
"path": "publiccode.yml",
"chars": 2055,
"preview": "publiccodeYmlVersion: 0.5.0\nname: Design React Kit\napplicationSuite: Design system Italia\nurl: https://github.com/italia"
},
{
"path": "scripts/import_svgs.sh",
"chars": 517,
"preview": "#!/bin/sh\n\n# Import icons from BI and make them TS React components\necho 'Importing SVGs...'\n\nnpx svgr node_modules/boot"
},
{
"path": "scripts/svgIndexTemplate.js",
"chars": 1171,
"preview": "const path = require('path');\n\nconst kebabCase = (string) =>\n string\n .replace(/([a-z])([A-Z])/g, '$1-$2')\n .repl"
},
{
"path": "scripts/svgTemplate.js",
"chars": 240,
"preview": "function defaultTemplate({ imports, componentName, props, jsx, interfaces }, { tpl }) {\n return tpl`${imports}\n ${in"
},
{
"path": "scripts/wait-confirm.js",
"chars": 261,
"preview": "var stdin = process.stdin;\n\nconsole.log('⌨️ Press any key to continue or ctrl+c to abort...');\n\nstdin.resume();\nstdin.se"
},
{
"path": "src/Accordion/Accordion.tsx",
"chars": 1106,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface A"
},
{
"path": "src/Accordion/AccordionBody.tsx",
"chars": 3465,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, PropsWithChildren, useCallback, useRef, useState } fro"
},
{
"path": "src/Accordion/AccordionHeader.tsx",
"chars": 1309,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, ReactNode } from 'react';\n\nexport "
},
{
"path": "src/Accordion/AccordionItem.tsx",
"chars": 584,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface A"
},
{
"path": "src/Alert/Alert.tsx",
"chars": 1361,
"preview": "import React, { ElementType, FC, HTMLAttributes, MouseEventHandler, Ref } from 'react';\nimport { FadeProps, Alert as Inn"
},
{
"path": "src/Autocomplete/Autocomplete.tsx",
"chars": 5151,
"preview": "import React, { FC, useEffect } from 'react';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignor"
},
{
"path": "src/Avatar/AvatarContainer.tsx",
"chars": 738,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface A"
},
{
"path": "src/Avatar/AvatarExtraText.tsx",
"chars": 659,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface A"
},
{
"path": "src/Avatar/AvatarGroupContainer.tsx",
"chars": 741,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface A"
},
{
"path": "src/Avatar/AvatarIcon.tsx",
"chars": 1601,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, Ref } from 'react';\n\nexport interf"
},
{
"path": "src/Avatar/AvatarPresence.tsx",
"chars": 848,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface A"
},
{
"path": "src/Avatar/AvatarStatus.tsx",
"chars": 825,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface A"
},
{
"path": "src/Avatar/AvatarWrapper.tsx",
"chars": 854,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface A"
},
{
"path": "src/BackToTop/BackToTop.tsx",
"chars": 1738,
"preview": "import React, { useLayoutEffect, useState } from 'react';\nimport { Icon } from '../Icon/Icon';\nimport classNames from 'c"
},
{
"path": "src/Badge/Badge.tsx",
"chars": 1243,
"preview": "import React, { FC, HTMLAttributes, ElementType, Ref, ReactNode, AnchorHTMLAttributes } from 'react';\nimport { Badge as "
},
{
"path": "src/BottomNav/BottomNav.tsx",
"chars": 557,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface BottomNavProps extends HTMLAttributes<"
},
{
"path": "src/BottomNav/BottomNavItem.tsx",
"chars": 2369,
"preview": "import React, { ElementType, FC, HTMLAttributes, MouseEvent } from 'react';\nimport classNames from 'classnames';\nimport "
},
{
"path": "src/Breadcrumb/Breadcrumb.tsx",
"chars": 1494,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport { Breadcrumb as BreadcrumbBase } from 'reactstrap"
},
{
"path": "src/Button/Button.tsx",
"chars": 1672,
"preview": "import React, { FC, ButtonHTMLAttributes, ElementType, Ref } from 'react';\nimport classNames from 'classnames';\n\nimport "
},
{
"path": "src/Callout/Callout.tsx",
"chars": 1198,
"preview": "import React, { FC, ElementType, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Callout/CalloutMoreFooter.tsx",
"chars": 1852,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, PropsWithChildren, useState } from 'react';\nimport"
},
{
"path": "src/Callout/CalloutText.tsx",
"chars": 871,
"preview": "import React, { FC, ElementType, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Callout/CalloutTitle.tsx",
"chars": 738,
"preview": "import React, { FC, ElementType, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Card/Card.tsx",
"chars": 2276,
"preview": "import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';\nimport classNames from 'classnames';\nimport { CSSMo"
},
{
"path": "src/Card/CardBody.tsx",
"chars": 982,
"preview": "import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';\nimport { CardBody as InnerCardBody } from 'reactstr"
},
{
"path": "src/Card/CardCategory.tsx",
"chars": 2011,
"preview": "import React, { FC, HTMLAttributes, MouseEvent } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } fro"
},
{
"path": "src/Card/CardFooterCTA.tsx",
"chars": 644,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Card/CardReadMore.tsx",
"chars": 1082,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } fr"
},
{
"path": "src/Card/CardSignature.tsx",
"chars": 645,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Card/CardTag.tsx",
"chars": 630,
"preview": "import React, { AnchorHTMLAttributes, FC, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport inter"
},
{
"path": "src/Card/CardTagsHeader.tsx",
"chars": 860,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Card/CardText.tsx",
"chars": 857,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport { CardText as InnerCardText } from 'reactstrap';\n"
},
{
"path": "src/Card/CardTitle.tsx",
"chars": 718,
"preview": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport { CardTitle as InnerCardTitle } from 'reactstrap'"
},
{
"path": "src/Carousel/Carousel.tsx",
"chars": 4543,
"preview": "import React, { FC } from 'react';\nimport classNames from 'classnames';\n\nimport {Splide, SplideProps} from '@splidejs/re"
},
{
"path": "src/Carousel/CarouselSlide.tsx",
"chars": 307,
"preview": "import React from 'react';\nimport {SplideSlide} from '@splidejs/react-splide'\n\n// Splide wrapper\nexport const CarouselSl"
},
{
"path": "src/Chips/Chip.tsx",
"chars": 1220,
"preview": "import React, { HTMLAttributes, FC, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Chips/ChipLabel.tsx",
"chars": 626,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface C"
},
{
"path": "src/Collapse/Collapse.tsx",
"chars": 6246,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, Ref, useEffect, useRef, useState }"
},
{
"path": "src/Dimmer/Dimmer.tsx",
"chars": 1484,
"preview": "import classNames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon/I"
},
{
"path": "src/Dimmer/DimmerButtons.tsx",
"chars": 926,
"preview": "import classNames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\n\nexport interface DimmerButtonsP"
},
{
"path": "src/Dropdown/Dropdown.tsx",
"chars": 1193,
"preview": "import classNames from 'classnames';\nimport React, { ElementType, FC } from 'react';\nimport { Dropdown as BSDRopdown, Dr"
},
{
"path": "src/Dropdown/DropdownMenu.tsx",
"chars": 760,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport { DropdownMenu as BSDRopdownMenu } from 'reactstrap';\nimport {"
},
{
"path": "src/Dropdown/DropdownToggle.tsx",
"chars": 1594,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport { DropdownToggle as BSDropdownToggle } from 'reac"
},
{
"path": "src/FontLoader/FontLoader.tsx",
"chars": 878,
"preview": "import { useEffect } from 'react';\n\nexport interface FontLoaderProps {\n /**\n * Una lista di font aggiuntivi da carica"
},
{
"path": "src/Forward/Forward.tsx",
"chars": 1006,
"preview": "import React, { FC, AnchorHTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface ForwardP"
},
{
"path": "src/GoBack/GoBack.tsx",
"chars": 932,
"preview": "import classNames from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { Button } from '../Button/Button'"
},
{
"path": "src/Grid/GridItem.tsx",
"chars": 650,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface Gr"
},
{
"path": "src/Grid/GridItemText.tsx",
"chars": 541,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridItemTextPro"
},
{
"path": "src/Grid/GridItemTextWrapper.tsx",
"chars": 722,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface Gr"
},
{
"path": "src/Grid/GridList.tsx",
"chars": 547,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridListProps e"
},
{
"path": "src/Grid/GridRow.tsx",
"chars": 532,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridRowProps ex"
},
{
"path": "src/Grid/index.ts",
"chars": 497,
"preview": "export { GridItem } from './GridItem';\nexport { GridItemText } from './GridItemText';\nexport { GridItemTextWrapper } fro"
},
{
"path": "src/Header/Header.tsx",
"chars": 1453,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { HeaderContext, CENTER,"
},
{
"path": "src/Header/HeaderBrand.tsx",
"chars": 2559,
"preview": "import React, { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport"
},
{
"path": "src/Header/HeaderContent.tsx",
"chars": 1352,
"preview": "import React, { HTMLAttributes } from 'react';\nimport classNames from 'classnames';\nimport { Col, Container, Navbar, Row"
},
{
"path": "src/Header/HeaderContext.tsx",
"chars": 373,
"preview": "import { createContext, useContext } from 'react';\n\nexport const SLIM = 'slim';\nexport const CENTER = 'center';\nexport c"
},
{
"path": "src/Header/HeaderLinkZone.tsx",
"chars": 581,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface HeaderLinkZone"
},
{
"path": "src/Header/HeaderRightZone.tsx",
"chars": 786,
"preview": "import React, { HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { SLIM, useHeaderContext } f"
},
{
"path": "src/Header/HeaderSearch.tsx",
"chars": 1065,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../Icon/I"
},
{
"path": "src/Header/HeaderSocialsZone.tsx",
"chars": 914,
"preview": "import React, { FC, HTMLAttributes, ReactNode } from 'react';\nimport classNames from 'classnames';\n\nexport interface Hea"
},
{
"path": "src/Header/HeaderToggler.tsx",
"chars": 1752,
"preview": "import React, { ElementType, ButtonHTMLAttributes, useEffect } from 'react';\nimport classNames from 'classnames';\nimport"
},
{
"path": "src/Header/Headers.tsx",
"chars": 841,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\nexport interface HeadersProps ex"
},
{
"path": "src/Hero/Hero.tsx",
"chars": 1230,
"preview": "import classname from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface He"
},
{
"path": "src/Hero/HeroBackground.tsx",
"chars": 679,
"preview": "import React, { FC, HTMLAttributes } from 'react';\n\nexport interface HeroBackgroundProps extends HTMLAttributes<HTMLImag"
},
{
"path": "src/Hero/HeroBody.tsx",
"chars": 648,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\nimport { Col, Container, Row } fr"
},
{
"path": "src/Hero/HeroButton.tsx",
"chars": 523,
"preview": "import React, { FC } from 'react';\nimport classname from 'classnames';\nimport { Button, ButtonProps } from '../Button/Bu"
},
{
"path": "src/Hero/HeroCategory.tsx",
"chars": 492,
"preview": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface HeroCategoryPro"
},
{
"path": "src/Hero/HeroTitle.tsx",
"chars": 493,
"preview": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface He"
},
{
"path": "src/Hero/index.ts",
"chars": 565,
"preview": "export { Hero } from './Hero';\nexport { HeroBackground } from './HeroBackground';\nexport { HeroBody } from './HeroBody';"
},
{
"path": "src/Icon/EmptyIcon.tsx",
"chars": 395,
"preview": "import React, { FC, SVGProps } from 'react';\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nexport const "
},
{
"path": "src/Icon/Icon.tsx",
"chars": 4124,
"preview": "import classNames from 'classnames';\nimport React, { FC, ImgHTMLAttributes, SVGProps, useEffect, useState } from 'react'"
},
{
"path": "src/Icon/assets/ItAndroid.tsx",
"chars": 827,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItAndroidSquare.tsx",
"chars": 1048,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItApple.tsx",
"chars": 992,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItAppleSquare.tsx",
"chars": 1376,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowDown.tsx",
"chars": 565,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowDownCircle.tsx",
"chars": 663,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowDownTriangle.tsx",
"chars": 591,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowLeft.tsx",
"chars": 561,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowLeftCircle.tsx",
"chars": 662,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowLeftTriangle.tsx",
"chars": 588,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowRight.tsx",
"chars": 561,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowRightCircle.tsx",
"chars": 666,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowRightTriangle.tsx",
"chars": 591,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowUp.tsx",
"chars": 561,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowUpCircle.tsx",
"chars": 664,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItArrowUpTriangle.tsx",
"chars": 588,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItBan.tsx",
"chars": 701,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItBehance.tsx",
"chars": 1389,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItBluesky.tsx",
"chars": 1272,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItBookmark.tsx",
"chars": 552,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItBox.tsx",
"chars": 587,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItBurger.tsx",
"chars": 549,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCalendar.tsx",
"chars": 733,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCamera.tsx",
"chars": 894,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCar.tsx",
"chars": 1059,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCard.tsx",
"chars": 727,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCart.tsx",
"chars": 4682,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItChartLine.tsx",
"chars": 608,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCheck.tsx",
"chars": 551,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCheckCircle.tsx",
"chars": 654,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItChevronLeft.tsx",
"chars": 546,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItChevronRight.tsx",
"chars": 544,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItClip.tsx",
"chars": 699,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItClock.tsx",
"chars": 630,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItClose.tsx",
"chars": 593,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCloseBig.tsx",
"chars": 593,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCloseCircle.tsx",
"chars": 699,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCodeCircle.tsx",
"chars": 738,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCollapse.tsx",
"chars": 548,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItComment.tsx",
"chars": 861,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItCopy.tsx",
"chars": 839,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItDelete.tsx",
"chars": 785,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItDesignersItalia.tsx",
"chars": 792,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItDownload.tsx",
"chars": 663,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItError.tsx",
"chars": 658,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItExchangeCircle.tsx",
"chars": 801,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItExpand.tsx",
"chars": 543,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItExternalLink.tsx",
"chars": 691,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFacebook.tsx",
"chars": 623,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFacebookSquare.tsx",
"chars": 701,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFigma.tsx",
"chars": 1212,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFigmaSquare.tsx",
"chars": 1216,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFile.tsx",
"chars": 768,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileAudio.tsx",
"chars": 1149,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileCompressed.tsx",
"chars": 1340,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileCsv.tsx",
"chars": 1857,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileDocx.tsx",
"chars": 2861,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileImage.tsx",
"chars": 6641,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileJson.tsx",
"chars": 1875,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileOdp.tsx",
"chars": 1842,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileOds.tsx",
"chars": 2130,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileOdt.tsx",
"chars": 1671,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFilePdf.tsx",
"chars": 2338,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFilePdfExt.tsx",
"chars": 1445,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFilePpt.tsx",
"chars": 1246,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileSheet.tsx",
"chars": 980,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileSigned.tsx",
"chars": 6561,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileSlides.tsx",
"chars": 1007,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileTxt.tsx",
"chars": 943,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileVideo.tsx",
"chars": 1051,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileXlsx.tsx",
"chars": 2393,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFileXml.tsx",
"chars": 972,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFiles.tsx",
"chars": 914,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFlag.tsx",
"chars": 567,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFlickr.tsx",
"chars": 565,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFlickrSquare.tsx",
"chars": 818,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFolder.tsx",
"chars": 693,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFullscreen.tsx",
"chars": 586,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItFunnel.tsx",
"chars": 558,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
},
{
"path": "src/Icon/assets/ItGithub.tsx",
"chars": 913,
"preview": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component "
}
]
// ... and 335 more files (download for full content)
About this extraction
This page contains the full source code of the italia/design-react-kit GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 535 files (2.9 MB), approximately 775.8k tokens, and a symbol index with 266 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.