diff --git a/package.json b/package.json index 9e71c8782c..66fc5b5a59 100644 --- a/package.json +++ b/package.json @@ -76,10 +76,10 @@ "build-storybook": "sb build -c .storybook -o storybook-static", "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .", "lint:js:fix": "npm run lint:js -- --fix", - "lint:styles": "stylelint '{styles,src}/**/*.scss'", - "lint:styles:fix": "npm run lint:styles -- --fix", - "lint:prettier": "prettier --check '**/*.md'", - "lint:prettier:fix": "prettier --write '**/*.md'", + "lint:styles": "cross-env stylelint '{styles,src}/**/*.scss'", + "lint:styles:fix": "cross-env npm run lint:styles -- --fix", + "lint:prettier": "cross-env prettier --check '**/*.md'", + "lint:prettier:fix": "cross-env prettier --write '**/*.md'", "lint": "run-p lint:*", "typecheck": "tsc --noEmit", "prepublishOnly": "npm run build", diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss index e5e1e52092..b8e54e99cc 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.scss +++ b/src/components/Breadcrumbs/Breadcrumbs.scss @@ -1,4 +1,5 @@ @use '../variables'; +@use '../../../styles/mixins'; $block: '.#{variables.$ns}breadcrumbs'; @@ -12,7 +13,17 @@ $block: '.#{variables.$ns}breadcrumbs'; gap: 4px; } - &__item { + &__switcher { + @include mixins.button-reset(); + color: var(--g-color-text-secondary); + + &:focus-visible { + outline: 2px solid var(--g-color-line-focus); + } + } + + &__item, + &__switcher { flex-shrink: 1; display: inline-block; overflow: hidden; diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index 4ba7a894aa..d29768ad77 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -12,13 +12,23 @@ import {BreadcrumbsSeparator} from './BreadcrumbsSeparator'; import './Breadcrumbs.scss'; -export interface BreadcrumbsItem { +type BaseBreadcrumbsItem = { text: string; - action: (event: React.MouseEvent | KeyboardEvent) => void; - href?: string; items?: BreadcrumbsItem[]; title?: string; -} +}; + +type LinkBreadcrumbsItem = { + href: string; + action?: (event: React.MouseEvent | KeyboardEvent) => void; +} & BaseBreadcrumbsItem; + +type ButtonBreadcrumbsItem = { + href?: undefined; + action: (event: React.MouseEvent | KeyboardEvent) => void; +} & BaseBreadcrumbsItem; + +export type BreadcrumbsItem = LinkBreadcrumbsItem | ButtonBreadcrumbsItem; export interface BreadcrumbsProps extends QAProps { items: T[]; diff --git a/src/components/Breadcrumbs/BreadcrumbsButton.tsx b/src/components/Breadcrumbs/BreadcrumbsButton.tsx new file mode 100644 index 0000000000..0f3670958e --- /dev/null +++ b/src/components/Breadcrumbs/BreadcrumbsButton.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import {block} from '../utils/cn'; + +const b = block('breadcrumbs'); + +export function BreadcrumbsButton(props: { + title: string; + onClick: React.MouseEventHandler; + children: React.ReactNode; +}) { + return