diff --git a/apps/website/screens/components/accordion/code/examples/accordions.ts b/apps/website/screens/components/accordion/code/examples/accordions.tsx similarity index 100% rename from apps/website/screens/components/accordion/code/examples/accordions.ts rename to apps/website/screens/components/accordion/code/examples/accordions.tsx diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx similarity index 100% rename from apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts rename to apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx diff --git a/apps/website/screens/components/accordion/code/examples/basicUsage.ts b/apps/website/screens/components/accordion/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/accordion/code/examples/basicUsage.ts rename to apps/website/screens/components/accordion/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/accordion/code/examples/controlled.ts b/apps/website/screens/components/accordion/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/accordion/code/examples/controlled.ts rename to apps/website/screens/components/accordion/code/examples/controlled.tsx diff --git a/apps/website/screens/components/accordion/code/examples/icons.ts b/apps/website/screens/components/accordion/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/accordion/code/examples/icons.ts rename to apps/website/screens/components/accordion/code/examples/icons.tsx diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts b/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/accordion/code/examples/uncontrolled.ts rename to apps/website/screens/components/accordion/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/accordion/overview/examples/basicExample.ts b/apps/website/screens/components/accordion/overview/examples/basicExample.tsx similarity index 100% rename from apps/website/screens/components/accordion/overview/examples/basicExample.ts rename to apps/website/screens/components/accordion/overview/examples/basicExample.tsx diff --git a/apps/website/screens/components/accordion/overview/examples/nestedExample.ts b/apps/website/screens/components/accordion/overview/examples/nestedExample.tsx similarity index 100% rename from apps/website/screens/components/accordion/overview/examples/nestedExample.ts rename to apps/website/screens/components/accordion/overview/examples/nestedExample.tsx diff --git a/apps/website/screens/components/alert/code/examples/basicUsage.ts b/apps/website/screens/components/alert/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/alert/code/examples/basicUsage.ts rename to apps/website/screens/components/alert/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/alert/code/examples/semantic.ts b/apps/website/screens/components/alert/code/examples/semantic.tsx similarity index 100% rename from apps/website/screens/components/alert/code/examples/semantic.ts rename to apps/website/screens/components/alert/code/examples/semantic.tsx diff --git a/apps/website/screens/components/alert/code/examples/severalMessages.ts b/apps/website/screens/components/alert/code/examples/severalMessages.tsx similarity index 100% rename from apps/website/screens/components/alert/code/examples/severalMessages.ts rename to apps/website/screens/components/alert/code/examples/severalMessages.tsx diff --git a/apps/website/screens/components/alert/overview/examples/banner.ts b/apps/website/screens/components/alert/overview/examples/banner.tsx similarity index 100% rename from apps/website/screens/components/alert/overview/examples/banner.ts rename to apps/website/screens/components/alert/overview/examples/banner.tsx diff --git a/apps/website/screens/components/alert/overview/examples/dialog.ts b/apps/website/screens/components/alert/overview/examples/dialog.tsx similarity index 100% rename from apps/website/screens/components/alert/overview/examples/dialog.ts rename to apps/website/screens/components/alert/overview/examples/dialog.tsx diff --git a/apps/website/screens/components/alert/overview/examples/inline.ts b/apps/website/screens/components/alert/overview/examples/inline.tsx similarity index 100% rename from apps/website/screens/components/alert/overview/examples/inline.ts rename to apps/website/screens/components/alert/overview/examples/inline.tsx diff --git a/apps/website/screens/components/badge/code/examples/contextual.ts b/apps/website/screens/components/badge/code/examples/contextual.tsx similarity index 100% rename from apps/website/screens/components/badge/code/examples/contextual.ts rename to apps/website/screens/components/badge/code/examples/contextual.tsx diff --git a/apps/website/screens/components/badge/code/examples/icons.ts b/apps/website/screens/components/badge/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/badge/code/examples/icons.ts rename to apps/website/screens/components/badge/code/examples/icons.tsx diff --git a/apps/website/screens/components/badge/code/examples/notification.ts b/apps/website/screens/components/badge/code/examples/notification.tsx similarity index 100% rename from apps/website/screens/components/badge/code/examples/notification.ts rename to apps/website/screens/components/badge/code/examples/notification.tsx diff --git a/apps/website/screens/components/badge/overview/examples/contextual.ts b/apps/website/screens/components/badge/overview/examples/contextual.tsx similarity index 100% rename from apps/website/screens/components/badge/overview/examples/contextual.ts rename to apps/website/screens/components/badge/overview/examples/contextual.tsx diff --git a/apps/website/screens/components/badge/overview/examples/notification.ts b/apps/website/screens/components/badge/overview/examples/notification.tsx similarity index 100% rename from apps/website/screens/components/badge/overview/examples/notification.ts rename to apps/website/screens/components/badge/overview/examples/notification.tsx diff --git a/apps/website/screens/components/bleed/code/examples/basicUsage.ts b/apps/website/screens/components/bleed/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/bleed/code/examples/basicUsage.ts rename to apps/website/screens/components/bleed/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/bleed/code/examples/customSides.ts b/apps/website/screens/components/bleed/code/examples/customSides.tsx similarity index 100% rename from apps/website/screens/components/bleed/code/examples/customSides.ts rename to apps/website/screens/components/bleed/code/examples/customSides.tsx diff --git a/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts b/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts rename to apps/website/screens/components/breadcrumbs/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts b/apps/website/screens/components/breadcrumbs/code/examples/nextJS.tsx similarity index 100% rename from apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts rename to apps/website/screens/components/breadcrumbs/code/examples/nextJS.tsx diff --git a/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts b/apps/website/screens/components/bulleted-list/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts rename to apps/website/screens/components/bulleted-list/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts b/apps/website/screens/components/bulleted-list/code/examples/nestedList.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/code/examples/nestedList.ts rename to apps/website/screens/components/bulleted-list/code/examples/nestedList.tsx diff --git a/apps/website/screens/components/bulleted-list/overview/examples/circle.ts b/apps/website/screens/components/bulleted-list/overview/examples/circle.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/overview/examples/circle.ts rename to apps/website/screens/components/bulleted-list/overview/examples/circle.tsx diff --git a/apps/website/screens/components/bulleted-list/overview/examples/disc.ts b/apps/website/screens/components/bulleted-list/overview/examples/disc.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/overview/examples/disc.ts rename to apps/website/screens/components/bulleted-list/overview/examples/disc.tsx diff --git a/apps/website/screens/components/bulleted-list/overview/examples/icon.ts b/apps/website/screens/components/bulleted-list/overview/examples/icon.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/overview/examples/icon.ts rename to apps/website/screens/components/bulleted-list/overview/examples/icon.tsx diff --git a/apps/website/screens/components/bulleted-list/overview/examples/number.ts b/apps/website/screens/components/bulleted-list/overview/examples/number.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/overview/examples/number.ts rename to apps/website/screens/components/bulleted-list/overview/examples/number.tsx diff --git a/apps/website/screens/components/bulleted-list/overview/examples/square.ts b/apps/website/screens/components/bulleted-list/overview/examples/square.tsx similarity index 100% rename from apps/website/screens/components/bulleted-list/overview/examples/square.ts rename to apps/website/screens/components/bulleted-list/overview/examples/square.tsx diff --git a/apps/website/screens/components/button/code/examples/basicUsage.ts b/apps/website/screens/components/button/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/button/code/examples/basicUsage.ts rename to apps/website/screens/components/button/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/button/code/examples/icons.ts b/apps/website/screens/components/button/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/button/code/examples/icons.ts rename to apps/website/screens/components/button/code/examples/icons.tsx diff --git a/apps/website/screens/components/button/code/examples/semantic.ts b/apps/website/screens/components/button/code/examples/semantic.tsx similarity index 100% rename from apps/website/screens/components/button/code/examples/semantic.ts rename to apps/website/screens/components/button/code/examples/semantic.tsx diff --git a/apps/website/screens/components/button/code/examples/sizes.ts b/apps/website/screens/components/button/code/examples/sizes.tsx similarity index 100% rename from apps/website/screens/components/button/code/examples/sizes.ts rename to apps/website/screens/components/button/code/examples/sizes.tsx diff --git a/apps/website/screens/components/button/overview/examples/iconUsage.ts b/apps/website/screens/components/button/overview/examples/iconUsage.tsx similarity index 100% rename from apps/website/screens/components/button/overview/examples/iconUsage.ts rename to apps/website/screens/components/button/overview/examples/iconUsage.tsx diff --git a/apps/website/screens/components/button/overview/examples/semantics.ts b/apps/website/screens/components/button/overview/examples/semantics.tsx similarity index 100% rename from apps/website/screens/components/button/overview/examples/semantics.ts rename to apps/website/screens/components/button/overview/examples/semantics.tsx diff --git a/apps/website/screens/components/button/overview/examples/variants.ts b/apps/website/screens/components/button/overview/examples/variants.tsx similarity index 100% rename from apps/website/screens/components/button/overview/examples/variants.ts rename to apps/website/screens/components/button/overview/examples/variants.tsx diff --git a/apps/website/screens/components/checkbox/code/examples/controlled.ts b/apps/website/screens/components/checkbox/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/checkbox/code/examples/controlled.ts rename to apps/website/screens/components/checkbox/code/examples/controlled.tsx diff --git a/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts b/apps/website/screens/components/checkbox/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/checkbox/code/examples/uncontrolled.ts rename to apps/website/screens/components/checkbox/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts b/apps/website/screens/components/checkbox/overview/examples/labelPosition.tsx similarity index 100% rename from apps/website/screens/components/checkbox/overview/examples/labelPosition.ts rename to apps/website/screens/components/checkbox/overview/examples/labelPosition.tsx diff --git a/apps/website/screens/components/checkbox/overview/examples/stacking.ts b/apps/website/screens/components/checkbox/overview/examples/stacking.tsx similarity index 100% rename from apps/website/screens/components/checkbox/overview/examples/stacking.ts rename to apps/website/screens/components/checkbox/overview/examples/stacking.tsx diff --git a/apps/website/screens/components/chip/code/examples/basicUsage.ts b/apps/website/screens/components/chip/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/chip/code/examples/basicUsage.ts rename to apps/website/screens/components/chip/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/chip/code/examples/icons.ts b/apps/website/screens/components/chip/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/chip/code/examples/icons.ts rename to apps/website/screens/components/chip/code/examples/icons.tsx diff --git a/apps/website/screens/components/chip/overview/examples/categorization.ts b/apps/website/screens/components/chip/overview/examples/categorization.tsx similarity index 100% rename from apps/website/screens/components/chip/overview/examples/categorization.ts rename to apps/website/screens/components/chip/overview/examples/categorization.tsx diff --git a/apps/website/screens/components/chip/overview/examples/filter.ts b/apps/website/screens/components/chip/overview/examples/filter.tsx similarity index 100% rename from apps/website/screens/components/chip/overview/examples/filter.ts rename to apps/website/screens/components/chip/overview/examples/filter.tsx diff --git a/apps/website/screens/components/container/code/examples/basicUsage.ts b/apps/website/screens/components/container/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/container/code/examples/basicUsage.ts rename to apps/website/screens/components/container/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/container/code/examples/listbox.ts b/apps/website/screens/components/container/code/examples/listbox.tsx similarity index 100% rename from apps/website/screens/components/container/code/examples/listbox.ts rename to apps/website/screens/components/container/code/examples/listbox.tsx diff --git a/apps/website/screens/components/contextual-menu/code/examples/actionMenu.ts b/apps/website/screens/components/contextual-menu/code/examples/actionMenu.tsx similarity index 100% rename from apps/website/screens/components/contextual-menu/code/examples/actionMenu.ts rename to apps/website/screens/components/contextual-menu/code/examples/actionMenu.tsx diff --git a/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.ts b/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx similarity index 100% rename from apps/website/screens/components/contextual-menu/code/examples/navigationMenu.ts rename to apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/actionsCell.ts b/apps/website/screens/components/data-grid/code/examples/actionsCell.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/actionsCell.ts rename to apps/website/screens/components/data-grid/code/examples/actionsCell.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts b/apps/website/screens/components/data-grid/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/basicUsage.ts rename to apps/website/screens/components/data-grid/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/customSort.ts b/apps/website/screens/components/data-grid/code/examples/customSort.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/customSort.ts rename to apps/website/screens/components/data-grid/code/examples/customSort.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/expandable.ts b/apps/website/screens/components/data-grid/code/examples/expandable.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/expandable.ts rename to apps/website/screens/components/data-grid/code/examples/expandable.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts b/apps/website/screens/components/data-grid/code/examples/hierarchical.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/hierarchical.ts rename to apps/website/screens/components/data-grid/code/examples/hierarchical.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts rename to apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/paginator.ts b/apps/website/screens/components/data-grid/code/examples/paginator.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/paginator.ts rename to apps/website/screens/components/data-grid/code/examples/paginator.tsx diff --git a/apps/website/screens/components/data-grid/code/examples/selectable.ts b/apps/website/screens/components/data-grid/code/examples/selectable.tsx similarity index 100% rename from apps/website/screens/components/data-grid/code/examples/selectable.ts rename to apps/website/screens/components/data-grid/code/examples/selectable.tsx diff --git a/apps/website/screens/components/date-input/code/examples/basicUsage.ts b/apps/website/screens/components/date-input/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/date-input/code/examples/basicUsage.ts rename to apps/website/screens/components/date-input/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/date-input/code/examples/controlled.ts b/apps/website/screens/components/date-input/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/date-input/code/examples/controlled.ts rename to apps/website/screens/components/date-input/code/examples/controlled.tsx diff --git a/apps/website/screens/components/date-input/code/examples/errorHandling.ts b/apps/website/screens/components/date-input/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/date-input/code/examples/errorHandling.ts rename to apps/website/screens/components/date-input/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/date-input/code/examples/uncontrolled.ts b/apps/website/screens/components/date-input/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/date-input/code/examples/uncontrolled.ts rename to apps/website/screens/components/date-input/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts b/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx similarity index 100% rename from apps/website/screens/components/dialog/code/examples/backgroundClick.ts rename to apps/website/screens/components/dialog/code/examples/backgroundClick.tsx diff --git a/apps/website/screens/components/dialog/code/examples/basicUsage.ts b/apps/website/screens/components/dialog/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/dialog/code/examples/basicUsage.ts rename to apps/website/screens/components/dialog/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/dialog/code/examples/withContent.ts b/apps/website/screens/components/dialog/code/examples/withContent.tsx similarity index 100% rename from apps/website/screens/components/dialog/code/examples/withContent.ts rename to apps/website/screens/components/dialog/code/examples/withContent.tsx diff --git a/apps/website/screens/components/divider/code/examples/basicUsage.ts b/apps/website/screens/components/divider/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/divider/code/examples/basicUsage.ts rename to apps/website/screens/components/divider/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/divider/code/examples/vertical.ts b/apps/website/screens/components/divider/code/examples/vertical.tsx similarity index 100% rename from apps/website/screens/components/divider/code/examples/vertical.ts rename to apps/website/screens/components/divider/code/examples/vertical.tsx diff --git a/apps/website/screens/components/dropdown/code/examples/basicUsage.ts b/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/dropdown/code/examples/basicUsage.ts rename to apps/website/screens/components/dropdown/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/dropdown/code/examples/icons.ts b/apps/website/screens/components/dropdown/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/dropdown/code/examples/icons.ts rename to apps/website/screens/components/dropdown/code/examples/icons.tsx diff --git a/apps/website/screens/components/dropdown/overview/examples/iconUsage.ts b/apps/website/screens/components/dropdown/overview/examples/iconUsage.tsx similarity index 100% rename from apps/website/screens/components/dropdown/overview/examples/iconUsage.ts rename to apps/website/screens/components/dropdown/overview/examples/iconUsage.tsx diff --git a/apps/website/screens/components/file-input/code/examples/basicUsage.ts b/apps/website/screens/components/file-input/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/file-input/code/examples/basicUsage.ts rename to apps/website/screens/components/file-input/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/file-input/code/examples/errorHandling.ts b/apps/website/screens/components/file-input/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/file-input/code/examples/errorHandling.ts rename to apps/website/screens/components/file-input/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/file-input/code/examples/formFileInput.ts b/apps/website/screens/components/file-input/code/examples/formFileInput.tsx similarity index 100% rename from apps/website/screens/components/file-input/code/examples/formFileInput.ts rename to apps/website/screens/components/file-input/code/examples/formFileInput.tsx diff --git a/apps/website/screens/components/file-input/overview/examples/variants.ts b/apps/website/screens/components/file-input/overview/examples/variants.tsx similarity index 100% rename from apps/website/screens/components/file-input/overview/examples/variants.ts rename to apps/website/screens/components/file-input/overview/examples/variants.tsx diff --git a/apps/website/screens/components/flex/code/examples/directionAlignment.ts b/apps/website/screens/components/flex/code/examples/directionAlignment.tsx similarity index 100% rename from apps/website/screens/components/flex/code/examples/directionAlignment.ts rename to apps/website/screens/components/flex/code/examples/directionAlignment.tsx diff --git a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts b/apps/website/screens/components/flex/code/examples/gapOrderGrow.tsx similarity index 100% rename from apps/website/screens/components/flex/code/examples/gapOrderGrow.ts rename to apps/website/screens/components/flex/code/examples/gapOrderGrow.tsx diff --git a/apps/website/screens/components/heading/code/examples/basicUsage.ts b/apps/website/screens/components/heading/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/heading/code/examples/basicUsage.ts rename to apps/website/screens/components/heading/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/image/code/examples/basicUsage.ts b/apps/website/screens/components/image/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/image/code/examples/basicUsage.ts rename to apps/website/screens/components/image/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/inset/code/examples/basicUsage.ts b/apps/website/screens/components/inset/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/inset/code/examples/basicUsage.ts rename to apps/website/screens/components/inset/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/inset/code/examples/customSides.ts b/apps/website/screens/components/inset/code/examples/customSides.tsx similarity index 100% rename from apps/website/screens/components/inset/code/examples/customSides.ts rename to apps/website/screens/components/inset/code/examples/customSides.tsx diff --git a/apps/website/screens/components/link/code/LinkCodePage.tsx b/apps/website/screens/components/link/code/LinkCodePage.tsx index 526270d6e..2afc352bc 100644 --- a/apps/website/screens/components/link/code/LinkCodePage.tsx +++ b/apps/website/screens/components/link/code/LinkCodePage.tsx @@ -186,20 +186,21 @@ const sections = [ ), }, { - title: "React router v6", + title: "React router v6+", content: ( <> In{" "} React Router v6 {" "} - the prop component is no longer available so it is necessary to use hooks provided by{" "} - - React Router v6 + and higher, the prop component is no longer available so it is necessary to use hooks provided by the + newer versions of{" "} + + React Router . diff --git a/apps/website/screens/components/link/code/examples/basicUsage.ts b/apps/website/screens/components/link/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/link/code/examples/basicUsage.ts rename to apps/website/screens/components/link/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/link/code/examples/icons.ts b/apps/website/screens/components/link/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/link/code/examples/icons.ts rename to apps/website/screens/components/link/code/examples/icons.tsx diff --git a/apps/website/screens/components/link/code/examples/nextLink.ts b/apps/website/screens/components/link/code/examples/nextLink.tsx similarity index 100% rename from apps/website/screens/components/link/code/examples/nextLink.ts rename to apps/website/screens/components/link/code/examples/nextLink.tsx diff --git a/apps/website/screens/components/link/code/examples/routerLink6.tsx b/apps/website/screens/components/link/code/examples/routerLink6.tsx index e2f7cbd2b..07e9534b8 100644 --- a/apps/website/screens/components/link/code/examples/routerLink6.tsx +++ b/apps/website/screens/components/link/code/examples/routerLink6.tsx @@ -1,39 +1,28 @@ import { DxcLink, DxcInset } from "@dxc-technology/halstack-react"; +import { forwardRef } from "react"; const useHref = (to: string) => { console.log(to); }; -type routerProps = { - replace: string; - state: string; - target: string; +const useNavigate = () => { + return (to: string, options?: { replace?: boolean; state?: any }) => { + console.log(`Use navigate mock function called "${to}"`, options); + }; }; - -const useLinkClickHandler = (to: string, { replace, state, target }: routerProps) => { - console.log("useClickHandler"); -}; - const code = `() => { - const CustomLink = React.forwardRef( - ({ onClick, replace = false, state, target, to, ...rest }, ref) => { - let href = useHref(to); - let handleClick = () => (useLinkClickHandler(to, { - replace, - state, - target, - })); + const CustomLink = forwardRef( + ({ children, to, replace = false, state, ...rest }, ref) => { + const navigate = useNavigate(); + + const handleClick = () => { + navigate(to, { replace, state }); + }; return ( - { - handleClick(event); - }} - ref={ref} - target={target} - /> + + {children} + ); } ); @@ -41,7 +30,7 @@ const code = `() => { This is a text with a - React Router v6 + React Router v6+ {" "} link. @@ -49,10 +38,11 @@ const code = `() => { }`; const scope = { + DxcInset, DxcLink, + forwardRef, useHref, - useLinkClickHandler, - DxcInset, + useNavigate, }; export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx index ad74af017..21ef7689b 100644 --- a/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx +++ b/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx @@ -5,7 +5,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import routerLink from "./examples/routerLink"; -import routerLinkV6 from "./examples/routerLinkV6"; +import routerLink6 from "./examples/routerLink6"; import nextLink from "./examples/nextLink"; import icons from "./examples/icons"; import Code, { TableCode } from "@/common/Code"; @@ -139,6 +139,19 @@ const sections = [ - + + + + + onClick + + + + {"() => void"} + + This function will be called when the user clicks on this tab. + - + notificationNumber @@ -209,24 +222,25 @@ const sections = [ ), }, { - title: "React router v6", + title: "React router v6+", content: ( <> In{" "} React Router v6 {" "} - the prop component is no longer available so it is necessary to use hooks provided by{" "} - - React Router v6 + and higher, the prop component is no longer available so it is necessary to use hooks provided by the + newer versions of{" "} + + React Router . - + ), }, diff --git a/apps/website/screens/components/nav-tabs/code/examples/basicUsage.ts b/apps/website/screens/components/nav-tabs/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/nav-tabs/code/examples/basicUsage.ts rename to apps/website/screens/components/nav-tabs/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/nav-tabs/code/examples/icons.ts b/apps/website/screens/components/nav-tabs/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/nav-tabs/code/examples/icons.ts rename to apps/website/screens/components/nav-tabs/code/examples/icons.tsx diff --git a/apps/website/screens/components/nav-tabs/code/examples/nextLink.ts b/apps/website/screens/components/nav-tabs/code/examples/nextLink.tsx similarity index 100% rename from apps/website/screens/components/nav-tabs/code/examples/nextLink.ts rename to apps/website/screens/components/nav-tabs/code/examples/nextLink.tsx diff --git a/apps/website/screens/components/nav-tabs/code/examples/routerLink6.tsx b/apps/website/screens/components/nav-tabs/code/examples/routerLink6.tsx new file mode 100644 index 000000000..da38d3e34 --- /dev/null +++ b/apps/website/screens/components/nav-tabs/code/examples/routerLink6.tsx @@ -0,0 +1,50 @@ +import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; +import { forwardRef } from "react"; + +const useNavigate = () => { + return (to: string, options?: { replace?: boolean; state?: any }) => { + console.log(`Use navigate mock function called "${to}"`, options); + }; +}; + +const code = `() => { + const CustomTab = forwardRef( + ({ children, to, replace = false, state, ...rest }, ref) => { + const navigate = useNavigate(); + + const handleClick = () => { + navigate(to, { replace, state }); + }; + + return ( + + {children} + + ); + } + ); + return ( + + + + Tab 1 + + Tab 2 + Tab 3 + + + ); +}`; + +const scope = { + DxcInset, + DxcNavTabs, + forwardRef, + useNavigate, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/code/examples/routerLinkV6.ts b/apps/website/screens/components/nav-tabs/code/examples/routerLinkV6.ts deleted file mode 100644 index 895753f69..000000000 --- a/apps/website/screens/components/nav-tabs/code/examples/routerLinkV6.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; - -type routerProps = { - replace: string; - state: string; - target: string; -}; - -const useHref = (to: string) => { - console.log(to); -}; - -const useLinkClickHandler = (to: string, { replace, state, target }: routerProps) => {}; - -const code = `() => { - const CustomTab = React.forwardRef( - ({ onClick, replace = false, state, target, to, ...rest }, ref) => { - let href = useHref(to); - let handleClick = useLinkClickHandler(to, { - replace, - state, - target, - }); - return ( - { - if (!event.defaultPrevented) { - handleClick(event); - } - }} - ref={ref} - target={target} - /> - ); - } - ); - - return ( - - - - Tab 1 - - Tab 2 - Tab 3 - - - ); -}`; - -const scope = { - DxcNavTabs, - DxcInset, - useHref, - useLinkClickHandler, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/overview/examples/badges.ts b/apps/website/screens/components/nav-tabs/overview/examples/badges.tsx similarity index 100% rename from apps/website/screens/components/nav-tabs/overview/examples/badges.ts rename to apps/website/screens/components/nav-tabs/overview/examples/badges.tsx diff --git a/apps/website/screens/components/nav-tabs/overview/examples/icons_left.ts b/apps/website/screens/components/nav-tabs/overview/examples/icons_left.tsx similarity index 100% rename from apps/website/screens/components/nav-tabs/overview/examples/icons_left.ts rename to apps/website/screens/components/nav-tabs/overview/examples/icons_left.tsx diff --git a/apps/website/screens/components/nav-tabs/overview/examples/icons_top.ts b/apps/website/screens/components/nav-tabs/overview/examples/icons_top.tsx similarity index 100% rename from apps/website/screens/components/nav-tabs/overview/examples/icons_top.ts rename to apps/website/screens/components/nav-tabs/overview/examples/icons_top.tsx diff --git a/apps/website/screens/components/number-input/code/examples/controlled.ts b/apps/website/screens/components/number-input/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/number-input/code/examples/controlled.ts rename to apps/website/screens/components/number-input/code/examples/controlled.tsx diff --git a/apps/website/screens/components/number-input/code/examples/errorHandling.ts b/apps/website/screens/components/number-input/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/number-input/code/examples/errorHandling.ts rename to apps/website/screens/components/number-input/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/number-input/code/examples/uncontrolled.ts b/apps/website/screens/components/number-input/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/number-input/code/examples/uncontrolled.ts rename to apps/website/screens/components/number-input/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/number-input/overview/examples/prefixSuffix.ts b/apps/website/screens/components/number-input/overview/examples/prefixSuffix.tsx similarity index 100% rename from apps/website/screens/components/number-input/overview/examples/prefixSuffix.ts rename to apps/website/screens/components/number-input/overview/examples/prefixSuffix.tsx diff --git a/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts b/apps/website/screens/components/paginator/code/examples/itemsPerPage.tsx similarity index 100% rename from apps/website/screens/components/paginator/code/examples/itemsPerPage.ts rename to apps/website/screens/components/paginator/code/examples/itemsPerPage.tsx diff --git a/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.tsx similarity index 100% rename from apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts rename to apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.tsx diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.ts b/apps/website/screens/components/paginator/overview/examples/scrollable.tsx similarity index 100% rename from apps/website/screens/components/paginator/overview/examples/scrollable.ts rename to apps/website/screens/components/paginator/overview/examples/scrollable.tsx diff --git a/apps/website/screens/components/password-input/code/examples/controlled.ts b/apps/website/screens/components/password-input/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/password-input/code/examples/controlled.ts rename to apps/website/screens/components/password-input/code/examples/controlled.tsx diff --git a/apps/website/screens/components/password-input/code/examples/errorHandling.ts b/apps/website/screens/components/password-input/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/password-input/code/examples/errorHandling.ts rename to apps/website/screens/components/password-input/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/password-input/code/examples/uncontrolled.ts b/apps/website/screens/components/password-input/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/password-input/code/examples/uncontrolled.ts rename to apps/website/screens/components/password-input/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/password-input/overview/examples/showHide.ts b/apps/website/screens/components/password-input/overview/examples/showHide.tsx similarity index 100% rename from apps/website/screens/components/password-input/overview/examples/showHide.ts rename to apps/website/screens/components/password-input/overview/examples/showHide.tsx diff --git a/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts b/apps/website/screens/components/progress-bar/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/progress-bar/code/examples/basicUsage.ts rename to apps/website/screens/components/progress-bar/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/progress-bar/code/examples/overlay.ts b/apps/website/screens/components/progress-bar/code/examples/overlay.tsx similarity index 100% rename from apps/website/screens/components/progress-bar/code/examples/overlay.ts rename to apps/website/screens/components/progress-bar/code/examples/overlay.tsx diff --git a/apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.ts b/apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.tsx similarity index 100% rename from apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.ts rename to apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.tsx diff --git a/apps/website/screens/components/quick-nav/code/examples/quickNav.ts b/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx similarity index 100% rename from apps/website/screens/components/quick-nav/code/examples/quickNav.ts rename to apps/website/screens/components/quick-nav/code/examples/quickNav.tsx diff --git a/apps/website/screens/components/quick-nav/code/examples/withContent.ts b/apps/website/screens/components/quick-nav/code/examples/withContent.tsx similarity index 100% rename from apps/website/screens/components/quick-nav/code/examples/withContent.ts rename to apps/website/screens/components/quick-nav/code/examples/withContent.tsx diff --git a/apps/website/screens/components/radio-group/code/examples/controlled.ts b/apps/website/screens/components/radio-group/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/radio-group/code/examples/controlled.ts rename to apps/website/screens/components/radio-group/code/examples/controlled.tsx diff --git a/apps/website/screens/components/radio-group/code/examples/errorHandling.ts b/apps/website/screens/components/radio-group/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/radio-group/code/examples/errorHandling.ts rename to apps/website/screens/components/radio-group/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/radio-group/code/examples/uncontrolled.ts b/apps/website/screens/components/radio-group/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/radio-group/code/examples/uncontrolled.ts rename to apps/website/screens/components/radio-group/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/radio-group/overview/examples/stacking.ts b/apps/website/screens/components/radio-group/overview/examples/stacking.tsx similarity index 100% rename from apps/website/screens/components/radio-group/overview/examples/stacking.ts rename to apps/website/screens/components/radio-group/overview/examples/stacking.tsx diff --git a/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts b/apps/website/screens/components/resultset-table/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/resultset-table/code/examples/basicUsage.ts rename to apps/website/screens/components/resultset-table/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts b/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.tsx similarity index 100% rename from apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts rename to apps/website/screens/components/resultset-table/code/examples/paginatorHidden.tsx diff --git a/apps/website/screens/components/resultset-table/code/examples/reduced.ts b/apps/website/screens/components/resultset-table/code/examples/reduced.tsx similarity index 100% rename from apps/website/screens/components/resultset-table/code/examples/reduced.ts rename to apps/website/screens/components/resultset-table/code/examples/reduced.tsx diff --git a/apps/website/screens/components/resultset-table/code/examples/sortable.ts b/apps/website/screens/components/resultset-table/code/examples/sortable.tsx similarity index 100% rename from apps/website/screens/components/resultset-table/code/examples/sortable.ts rename to apps/website/screens/components/resultset-table/code/examples/sortable.tsx diff --git a/apps/website/screens/components/select/code/examples/controlled.ts b/apps/website/screens/components/select/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/select/code/examples/controlled.ts rename to apps/website/screens/components/select/code/examples/controlled.tsx diff --git a/apps/website/screens/components/select/code/examples/errorHandling.ts b/apps/website/screens/components/select/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/select/code/examples/errorHandling.ts rename to apps/website/screens/components/select/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/select/code/examples/groupedOptions.ts b/apps/website/screens/components/select/code/examples/groupedOptions.tsx similarity index 100% rename from apps/website/screens/components/select/code/examples/groupedOptions.ts rename to apps/website/screens/components/select/code/examples/groupedOptions.tsx diff --git a/apps/website/screens/components/select/code/examples/icons.ts b/apps/website/screens/components/select/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/select/code/examples/icons.ts rename to apps/website/screens/components/select/code/examples/icons.tsx diff --git a/apps/website/screens/components/select/code/examples/uncontrolled.ts b/apps/website/screens/components/select/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/select/code/examples/uncontrolled.ts rename to apps/website/screens/components/select/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/select/overview/examples/filterable.ts b/apps/website/screens/components/select/overview/examples/filterable.tsx similarity index 100% rename from apps/website/screens/components/select/overview/examples/filterable.ts rename to apps/website/screens/components/select/overview/examples/filterable.tsx diff --git a/apps/website/screens/components/select/overview/examples/multiple.ts b/apps/website/screens/components/select/overview/examples/multiple.tsx similarity index 100% rename from apps/website/screens/components/select/overview/examples/multiple.ts rename to apps/website/screens/components/select/overview/examples/multiple.tsx diff --git a/apps/website/screens/components/select/overview/examples/requiredOptional.ts b/apps/website/screens/components/select/overview/examples/requiredOptional.tsx similarity index 100% rename from apps/website/screens/components/select/overview/examples/requiredOptional.ts rename to apps/website/screens/components/select/overview/examples/requiredOptional.tsx diff --git a/apps/website/screens/components/select/overview/examples/single.ts b/apps/website/screens/components/select/overview/examples/single.tsx similarity index 100% rename from apps/website/screens/components/select/overview/examples/single.ts rename to apps/website/screens/components/select/overview/examples/single.tsx diff --git a/apps/website/screens/components/slider/code/examples/complex.ts b/apps/website/screens/components/slider/code/examples/complex.tsx similarity index 100% rename from apps/website/screens/components/slider/code/examples/complex.ts rename to apps/website/screens/components/slider/code/examples/complex.tsx diff --git a/apps/website/screens/components/slider/code/examples/controlled.ts b/apps/website/screens/components/slider/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/slider/code/examples/controlled.ts rename to apps/website/screens/components/slider/code/examples/controlled.tsx diff --git a/apps/website/screens/components/slider/code/examples/formatLabel.ts b/apps/website/screens/components/slider/code/examples/formatLabel.tsx similarity index 100% rename from apps/website/screens/components/slider/code/examples/formatLabel.ts rename to apps/website/screens/components/slider/code/examples/formatLabel.tsx diff --git a/apps/website/screens/components/slider/code/examples/uncontrolled.ts b/apps/website/screens/components/slider/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/slider/code/examples/uncontrolled.ts rename to apps/website/screens/components/slider/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/slider/overview/examples/continuous.ts b/apps/website/screens/components/slider/overview/examples/continuous.tsx similarity index 100% rename from apps/website/screens/components/slider/overview/examples/continuous.ts rename to apps/website/screens/components/slider/overview/examples/continuous.tsx diff --git a/apps/website/screens/components/slider/overview/examples/discrete.ts b/apps/website/screens/components/slider/overview/examples/discrete.tsx similarity index 100% rename from apps/website/screens/components/slider/overview/examples/discrete.ts rename to apps/website/screens/components/slider/overview/examples/discrete.tsx diff --git a/apps/website/screens/components/slider/overview/examples/input.ts b/apps/website/screens/components/slider/overview/examples/input.tsx similarity index 100% rename from apps/website/screens/components/slider/overview/examples/input.ts rename to apps/website/screens/components/slider/overview/examples/input.tsx diff --git a/apps/website/screens/components/spinner/code/examples/basicUsage.ts b/apps/website/screens/components/spinner/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/spinner/code/examples/basicUsage.ts rename to apps/website/screens/components/spinner/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/spinner/code/examples/overlay.ts b/apps/website/screens/components/spinner/code/examples/overlay.tsx similarity index 100% rename from apps/website/screens/components/spinner/code/examples/overlay.ts rename to apps/website/screens/components/spinner/code/examples/overlay.tsx diff --git a/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.ts b/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.tsx similarity index 100% rename from apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.ts rename to apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.tsx diff --git a/apps/website/screens/components/spinner/overview/examples/small.ts b/apps/website/screens/components/spinner/overview/examples/small.tsx similarity index 100% rename from apps/website/screens/components/spinner/overview/examples/small.ts rename to apps/website/screens/components/spinner/overview/examples/small.tsx diff --git a/apps/website/screens/components/status-light/overview/examples/variants.ts b/apps/website/screens/components/status-light/overview/examples/variants.tsx similarity index 100% rename from apps/website/screens/components/status-light/overview/examples/variants.ts rename to apps/website/screens/components/status-light/overview/examples/variants.tsx diff --git a/apps/website/screens/components/switch/code/examples/controlled.ts b/apps/website/screens/components/switch/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/switch/code/examples/controlled.ts rename to apps/website/screens/components/switch/code/examples/controlled.tsx diff --git a/apps/website/screens/components/switch/code/examples/uncontrolled.ts b/apps/website/screens/components/switch/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/switch/code/examples/uncontrolled.ts rename to apps/website/screens/components/switch/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/switch/overview/examples/labelPosition.ts b/apps/website/screens/components/switch/overview/examples/labelPosition.tsx similarity index 100% rename from apps/website/screens/components/switch/overview/examples/labelPosition.ts rename to apps/website/screens/components/switch/overview/examples/labelPosition.tsx diff --git a/apps/website/screens/components/switch/overview/examples/stacking.ts b/apps/website/screens/components/switch/overview/examples/stacking.tsx similarity index 100% rename from apps/website/screens/components/switch/overview/examples/stacking.ts rename to apps/website/screens/components/switch/overview/examples/stacking.tsx diff --git a/apps/website/screens/components/table/code/examples/actions.ts b/apps/website/screens/components/table/code/examples/actions.tsx similarity index 100% rename from apps/website/screens/components/table/code/examples/actions.ts rename to apps/website/screens/components/table/code/examples/actions.tsx diff --git a/apps/website/screens/components/table/code/examples/basicUsage.ts b/apps/website/screens/components/table/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/table/code/examples/basicUsage.ts rename to apps/website/screens/components/table/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/table/code/examples/reduced.ts b/apps/website/screens/components/table/code/examples/reduced.tsx similarity index 100% rename from apps/website/screens/components/table/code/examples/reduced.ts rename to apps/website/screens/components/table/code/examples/reduced.tsx diff --git a/apps/website/screens/components/tabs/code/TabsCodePage.tsx b/apps/website/screens/components/tabs/code/TabsCodePage.tsx index 3fc64c528..c330bcbb2 100644 --- a/apps/website/screens/components/tabs/code/TabsCodePage.tsx +++ b/apps/website/screens/components/tabs/code/TabsCodePage.tsx @@ -182,7 +182,7 @@ const sections = [ {"() => void"} - This function will be called when the user clicks on this tab. + This function will be called when the user clicks on this tab. This feature is mostly recommended for compatibility with third-party routing APIs. - diff --git a/apps/website/screens/components/tabs/code/examples/controlled.ts b/apps/website/screens/components/tabs/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/tabs/code/examples/controlled.ts rename to apps/website/screens/components/tabs/code/examples/controlled.tsx diff --git a/apps/website/screens/components/tabs/code/examples/icons.ts b/apps/website/screens/components/tabs/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/tabs/code/examples/icons.ts rename to apps/website/screens/components/tabs/code/examples/icons.tsx diff --git a/apps/website/screens/components/tabs/code/examples/uncontrolled.ts b/apps/website/screens/components/tabs/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/tabs/code/examples/uncontrolled.ts rename to apps/website/screens/components/tabs/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/tabs/overview/examples/default.ts b/apps/website/screens/components/tabs/overview/examples/default.tsx similarity index 100% rename from apps/website/screens/components/tabs/overview/examples/default.ts rename to apps/website/screens/components/tabs/overview/examples/default.tsx diff --git a/apps/website/screens/components/tabs/overview/examples/scrollable.ts b/apps/website/screens/components/tabs/overview/examples/scrollable.tsx similarity index 100% rename from apps/website/screens/components/tabs/overview/examples/scrollable.ts rename to apps/website/screens/components/tabs/overview/examples/scrollable.tsx diff --git a/apps/website/screens/components/text-input/code/examples/action.ts b/apps/website/screens/components/text-input/code/examples/action.tsx similarity index 100% rename from apps/website/screens/components/text-input/code/examples/action.ts rename to apps/website/screens/components/text-input/code/examples/action.tsx diff --git a/apps/website/screens/components/text-input/code/examples/controlled.ts b/apps/website/screens/components/text-input/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/text-input/code/examples/controlled.ts rename to apps/website/screens/components/text-input/code/examples/controlled.tsx diff --git a/apps/website/screens/components/text-input/code/examples/errorHandling.ts b/apps/website/screens/components/text-input/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/text-input/code/examples/errorHandling.ts rename to apps/website/screens/components/text-input/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/text-input/code/examples/functionSuggestions.ts b/apps/website/screens/components/text-input/code/examples/functionSuggestions.tsx similarity index 100% rename from apps/website/screens/components/text-input/code/examples/functionSuggestions.ts rename to apps/website/screens/components/text-input/code/examples/functionSuggestions.tsx diff --git a/apps/website/screens/components/text-input/code/examples/uncontrolled.ts b/apps/website/screens/components/text-input/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/text-input/code/examples/uncontrolled.ts rename to apps/website/screens/components/text-input/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/text-input/overview/examples/customAction.ts b/apps/website/screens/components/text-input/overview/examples/customAction.tsx similarity index 100% rename from apps/website/screens/components/text-input/overview/examples/customAction.ts rename to apps/website/screens/components/text-input/overview/examples/customAction.tsx diff --git a/apps/website/screens/components/text-input/overview/examples/prefixSuffix.ts b/apps/website/screens/components/text-input/overview/examples/prefixSuffix.tsx similarity index 100% rename from apps/website/screens/components/text-input/overview/examples/prefixSuffix.ts rename to apps/website/screens/components/text-input/overview/examples/prefixSuffix.tsx diff --git a/apps/website/screens/components/textarea/code/examples/controlled.ts b/apps/website/screens/components/textarea/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/textarea/code/examples/controlled.ts rename to apps/website/screens/components/textarea/code/examples/controlled.tsx diff --git a/apps/website/screens/components/textarea/code/examples/errorHandling.ts b/apps/website/screens/components/textarea/code/examples/errorHandling.tsx similarity index 100% rename from apps/website/screens/components/textarea/code/examples/errorHandling.ts rename to apps/website/screens/components/textarea/code/examples/errorHandling.tsx diff --git a/apps/website/screens/components/textarea/code/examples/uncontrolled.ts b/apps/website/screens/components/textarea/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/textarea/code/examples/uncontrolled.ts rename to apps/website/screens/components/textarea/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/toast/code/examples/basicUsage.ts b/apps/website/screens/components/toast/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/toast/code/examples/basicUsage.ts rename to apps/website/screens/components/toast/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/toast/code/examples/loading.ts b/apps/website/screens/components/toast/code/examples/loading.tsx similarity index 100% rename from apps/website/screens/components/toast/code/examples/loading.ts rename to apps/website/screens/components/toast/code/examples/loading.tsx diff --git a/apps/website/screens/components/toast/code/examples/semantic.ts b/apps/website/screens/components/toast/code/examples/semantic.tsx similarity index 100% rename from apps/website/screens/components/toast/code/examples/semantic.ts rename to apps/website/screens/components/toast/code/examples/semantic.tsx diff --git a/apps/website/screens/components/toggle-group/code/examples/controlled.ts b/apps/website/screens/components/toggle-group/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/toggle-group/code/examples/controlled.ts rename to apps/website/screens/components/toggle-group/code/examples/controlled.tsx diff --git a/apps/website/screens/components/toggle-group/code/examples/uncontrolled.ts b/apps/website/screens/components/toggle-group/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/toggle-group/code/examples/uncontrolled.ts rename to apps/website/screens/components/toggle-group/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/toggle-group/overview/examples/multipleSelection.ts b/apps/website/screens/components/toggle-group/overview/examples/multipleSelection.tsx similarity index 100% rename from apps/website/screens/components/toggle-group/overview/examples/multipleSelection.ts rename to apps/website/screens/components/toggle-group/overview/examples/multipleSelection.tsx diff --git a/apps/website/screens/components/toggle-group/overview/examples/orientation.ts b/apps/website/screens/components/toggle-group/overview/examples/orientation.tsx similarity index 100% rename from apps/website/screens/components/toggle-group/overview/examples/orientation.ts rename to apps/website/screens/components/toggle-group/overview/examples/orientation.tsx diff --git a/apps/website/screens/components/toggle-group/overview/examples/singleSelection.ts b/apps/website/screens/components/toggle-group/overview/examples/singleSelection.tsx similarity index 100% rename from apps/website/screens/components/toggle-group/overview/examples/singleSelection.ts rename to apps/website/screens/components/toggle-group/overview/examples/singleSelection.tsx diff --git a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts b/apps/website/screens/components/tooltip/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/tooltip/code/examples/basicUsage.ts rename to apps/website/screens/components/tooltip/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/typography/code/examples/basicUsage.ts b/apps/website/screens/components/typography/code/examples/basicUsage.tsx similarity index 100% rename from apps/website/screens/components/typography/code/examples/basicUsage.ts rename to apps/website/screens/components/typography/code/examples/basicUsage.tsx diff --git a/apps/website/screens/components/typography/code/examples/nestedTexts.ts b/apps/website/screens/components/typography/code/examples/nestedTexts.tsx similarity index 100% rename from apps/website/screens/components/typography/code/examples/nestedTexts.ts rename to apps/website/screens/components/typography/code/examples/nestedTexts.tsx diff --git a/apps/website/screens/components/wizard/code/examples/controlled.ts b/apps/website/screens/components/wizard/code/examples/controlled.tsx similarity index 100% rename from apps/website/screens/components/wizard/code/examples/controlled.ts rename to apps/website/screens/components/wizard/code/examples/controlled.tsx diff --git a/apps/website/screens/components/wizard/code/examples/icons.ts b/apps/website/screens/components/wizard/code/examples/icons.tsx similarity index 100% rename from apps/website/screens/components/wizard/code/examples/icons.ts rename to apps/website/screens/components/wizard/code/examples/icons.tsx diff --git a/apps/website/screens/components/wizard/code/examples/uncontrolled.ts b/apps/website/screens/components/wizard/code/examples/uncontrolled.tsx similarity index 100% rename from apps/website/screens/components/wizard/code/examples/uncontrolled.ts rename to apps/website/screens/components/wizard/code/examples/uncontrolled.tsx diff --git a/apps/website/screens/components/wizard/overview/examples/description.ts b/apps/website/screens/components/wizard/overview/examples/description.tsx similarity index 100% rename from apps/website/screens/components/wizard/overview/examples/description.ts rename to apps/website/screens/components/wizard/overview/examples/description.tsx diff --git a/apps/website/screens/components/wizard/overview/examples/horizontal.ts b/apps/website/screens/components/wizard/overview/examples/horizontal.tsx similarity index 100% rename from apps/website/screens/components/wizard/overview/examples/horizontal.ts rename to apps/website/screens/components/wizard/overview/examples/horizontal.tsx diff --git a/apps/website/screens/components/wizard/overview/examples/linearNonLinear.ts b/apps/website/screens/components/wizard/overview/examples/linearNonLinear.tsx similarity index 100% rename from apps/website/screens/components/wizard/overview/examples/linearNonLinear.ts rename to apps/website/screens/components/wizard/overview/examples/linearNonLinear.tsx diff --git a/apps/website/screens/components/wizard/overview/examples/stepNavigation.ts b/apps/website/screens/components/wizard/overview/examples/stepNavigation.tsx similarity index 100% rename from apps/website/screens/components/wizard/overview/examples/stepNavigation.ts rename to apps/website/screens/components/wizard/overview/examples/stepNavigation.tsx diff --git a/apps/website/screens/components/wizard/overview/examples/validation.ts b/apps/website/screens/components/wizard/overview/examples/validation.tsx similarity index 100% rename from apps/website/screens/components/wizard/overview/examples/validation.ts rename to apps/website/screens/components/wizard/overview/examples/validation.tsx diff --git a/apps/website/screens/components/wizard/overview/examples/vertical.ts b/apps/website/screens/components/wizard/overview/examples/vertical.tsx similarity index 100% rename from apps/website/screens/components/wizard/overview/examples/vertical.ts rename to apps/website/screens/components/wizard/overview/examples/vertical.tsx diff --git a/apps/website/screens/overview/installation/examples/building.ts b/apps/website/screens/overview/installation/examples/building.tsx similarity index 100% rename from apps/website/screens/overview/installation/examples/building.ts rename to apps/website/screens/overview/installation/examples/building.tsx diff --git a/apps/website/screens/principles/data-visualization/examples/barChart.ts b/apps/website/screens/principles/data-visualization/examples/barChart.tsx similarity index 100% rename from apps/website/screens/principles/data-visualization/examples/barChart.ts rename to apps/website/screens/principles/data-visualization/examples/barChart.tsx diff --git a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.tsx similarity index 100% rename from apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts rename to apps/website/screens/principles/iconography/examples/buttonsWithIcon.tsx diff --git a/apps/website/screens/principles/localization/examples/translations.ts b/apps/website/screens/principles/localization/examples/translations.tsx similarity index 100% rename from apps/website/screens/principles/localization/examples/translations.ts rename to apps/website/screens/principles/localization/examples/translations.tsx diff --git a/apps/website/screens/utilities/halstack-provider/examples/customTranslations.ts b/apps/website/screens/utilities/halstack-provider/examples/customTranslations.tsx similarity index 100% rename from apps/website/screens/utilities/halstack-provider/examples/customTranslations.ts rename to apps/website/screens/utilities/halstack-provider/examples/customTranslations.tsx diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index c74f593c2..aa6764515 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -86,7 +86,16 @@ const Underline = styled.span<{ active: TabProps["active"] }>` const Tab = forwardRef( ( - { href, active = false, icon, disabled = false, notificationNumber = false, children, ...otherProps }: TabProps, + { + active = false, + children, + disabled = false, + href, + icon, + onClick, + notificationNumber = false, + ...otherProps + }: TabProps, ref: Ref ) => { const { iconPosition, tabIndex, focusedLabel } = useContext(NavTabsContext) ?? {}; @@ -95,7 +104,7 @@ const Tab = forwardRef( useImperativeHandle(ref, () => innerRef.current!, []); useEffect(() => { - if (focusedLabel === children.toString()) { + if (focusedLabel === children?.toString()) { tabRef?.current?.focus(); } }, [children, focusedLabel]); @@ -116,9 +125,13 @@ const Tab = forwardRef( { tabRef.current = anchorRef; if (ref) { @@ -126,11 +139,8 @@ const Tab = forwardRef( else innerRef.current = anchorRef; } }} - onKeyDown={handleOnKeyDown} - tabIndex={active ? tabIndex : -1} role="tab" - aria-selected={active} - aria-disabled={disabled} + tabIndex={active ? tabIndex : -1} {...otherProps} > {icon && ( diff --git a/packages/lib/src/nav-tabs/types.ts b/packages/lib/src/nav-tabs/types.ts index efe2e9bd8..abde4211d 100644 --- a/packages/lib/src/nav-tabs/types.ts +++ b/packages/lib/src/nav-tabs/types.ts @@ -2,9 +2,9 @@ import { ReactNode, SVGProps } from "react"; import { SVG } from "../common/utils"; export type NavTabsContextProps = { + focusedLabel: string | undefined; iconPosition: "top" | "left"; tabIndex: number; - focusedLabel: string | undefined; }; export type TabProps = { @@ -12,6 +12,10 @@ export type TabProps = { * Whether the tab is active or not. */ active?: boolean; + /** + * Tab text label. + */ + children: string; /** * Whether the tab is disabled or not. */ @@ -24,6 +28,10 @@ export type TabProps = { * Material Symbol name or SVG element used as the icon that will be displayed in the tab. */ icon?: string | SVG; + /** + * This function will be called when the user clicks on this tab. + */ + onClick?: () => void; /** * If the value is 'true', an empty badge will appear. * If it is 'false', no badge will appear. @@ -32,21 +40,17 @@ export type TabProps = { * it will appear as '+99' in the badge. */ notificationNumber?: boolean | number; - /** - * Tab text label. - */ - children: string; }; type Props = { - /** - * Whether the icon should appear above or to the left of the label. - */ - iconPosition?: "top" | "left"; /** * Contains one or more DxcNavTabs.Tab. */ children: ReactNode; + /** + * Whether the icon should appear above or to the left of the label. + */ + iconPosition?: "top" | "left"; /** * Value of the tabindex attribute applied to each tab. */