diff --git a/.gitignore b/.gitignore index d597766d81d3..691f917d21bb 100644 --- a/.gitignore +++ b/.gitignore @@ -48,3 +48,5 @@ output/power-apps showcases/patternhub/public/iframe-resizer/* /showcases/**/test-results/ + +/__snapshots__/**/*-win32.png diff --git a/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png index a184e98fecb6..babca87254f9 100644 Binary files a/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png index 6ab485854200..1342200a5ca4 100644 Binary files a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png index f8445f9c4096..6202a996b6e0 100644 Binary files a/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png index fe1e3f60a95d..254ece682ef5 100644 Binary files a/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png and b/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png index 20fb1b8c5862..6aefbefaa6d4 100644 Binary files a/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png and b/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png differ diff --git a/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png index 7d34557a3364..1cce597dc790 100644 Binary files a/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png and b/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png differ diff --git a/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png index 185713c82234..382fb3528508 100644 Binary files a/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png and b/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png differ diff --git a/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png index 643d121a6dbb..b2030a1e7568 100644 Binary files a/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png and b/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png index 429e10a4d7b0..e0df38a3bf95 100644 Binary files a/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png index d7e435aae3f8..792e55534f31 100644 Binary files a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png index bd3e83026ef9..5fa016755b0d 100644 Binary files a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png index 8f0d42136f89..bc6d8346f0a8 100644 Binary files a/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png and b/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png index 80508bf3c612..d55ddb7b4076 100644 Binary files a/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png index 47ce64245a09..2ec7278b7a80 100644 Binary files a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png index 16381522b4b0..2affec20aafa 100644 Binary files a/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png index b47fcec48ab0..19f7d7df567b 100644 Binary files a/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png index 4d75652c5ee4..e185fcc1fb21 100644 Binary files a/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png index c5b7dffb4f25..67d993c61036 100644 Binary files a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png index fef797a9ff27..f927391a7307 100644 Binary files a/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png index a4e7d435a0e8..547c0e80d1eb 100644 Binary files a/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/component/chromium/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/component/chromium/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..3108f1799cb6 Binary files /dev/null and b/__snapshots__/navigation-item/component/chromium/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/component/mobile-chrome/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/component/mobile-chrome/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..3108f1799cb6 Binary files /dev/null and b/__snapshots__/navigation-item/component/mobile-chrome/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/component/mobile-safari/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/component/mobile-safari/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..502adcb41313 Binary files /dev/null and b/__snapshots__/navigation-item/component/mobile-safari/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/component/webkit/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/component/webkit/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..502adcb41313 Binary files /dev/null and b/__snapshots__/navigation-item/component/webkit/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png new file mode 100644 index 000000000000..3108f1799cb6 Binary files /dev/null and b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png differ diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png new file mode 100644 index 000000000000..3108f1799cb6 Binary files /dev/null and b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png differ diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png new file mode 100644 index 000000000000..502adcb41313 Binary files /dev/null and b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png differ diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png new file mode 100644 index 000000000000..502adcb41313 Binary files /dev/null and b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png differ diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png new file mode 100644 index 000000000000..c7dff9b33c23 Binary files /dev/null and b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png differ diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-chrome-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-chrome-linux.png new file mode 100644 index 000000000000..c470d2b73c79 Binary files /dev/null and b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-chrome-linux.png differ diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-safari-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-safari-linux.png new file mode 100644 index 000000000000..bf7cad8a3452 Binary files /dev/null and b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-safari-linux.png differ diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png new file mode 100644 index 000000000000..9044ee57e6ce Binary files /dev/null and b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png differ diff --git a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..222d6e9a2f62 Binary files /dev/null and b/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..b80dba5d5793 Binary files /dev/null and b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-0/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..02adbc9e8dd1 Binary files /dev/null and b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-0/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/webkit/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/webkit/regular/neutral-0/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 000000000000..a866fc386221 Binary files /dev/null and b/__snapshots__/navigation-item/showcase/webkit/regular/neutral-0/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png index e5735f02209c..1e89ab25d2b9 100644 Binary files a/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png index 1236b9b40ba7..a8b13440cbab 100644 Binary files a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png index fe2785054f93..b3232671f348 100644 Binary files a/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png index 5f61149d8312..868b0b31361e 100644 Binary files a/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png and b/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png differ diff --git a/packages/components/overrides/angular/src/components/navigation-item/index.ts b/packages/components/overrides/angular/src/components/navigation-item/index.ts new file mode 100644 index 000000000000..1c9e8b1d3371 --- /dev/null +++ b/packages/components/overrides/angular/src/components/navigation-item/index.ts @@ -0,0 +1 @@ +export { DBNavigationItem, DBNavigationItemModule } from './navigation-item'; diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js index 78f1eeb638f4..4744c8385e99 100644 --- a/packages/components/scripts/post-build/components.js +++ b/packages/components/scripts/post-build/components.js @@ -16,6 +16,10 @@ * }]} */ const getComponents = () => [ + { + name: 'navigation-item' + }, + { name: 'select' }, @@ -29,12 +33,6 @@ const getComponents = () => [ to: 'const dialogRef = useRef(component);' } ], - vue: [ - { - from: 'immediate: true,', - to: 'immediate: true,\nflush: "post"' - } - ], webComponents: [{ from: '__prev.find', to: '!!__prev.find' }] } }, @@ -48,14 +46,6 @@ const getComponents = () => [ { name: 'checkbox', - overwrites: { - vue: [ - { - from: 'immediate: true,', - to: 'immediate: true,\nflush: "post"' - } - ] - }, config: { vue: { vModel: [{ modelValue: 'checked', binding: ':checked' }] @@ -68,14 +58,6 @@ const getComponents = () => [ { name: 'radio', - overwrites: { - vue: [ - { - from: 'immediate: true,', - to: 'immediate: true,\nflush: "post"' - } - ] - }, config: { vue: { vModel: [{ modelValue: 'checked', binding: ':checked' }] diff --git a/packages/components/scripts/post-build/vue.js b/packages/components/scripts/post-build/vue.js index cfee40752edf..d797e9695223 100644 --- a/packages/components/scripts/post-build/vue.js +++ b/packages/components/scripts/post-build/vue.js @@ -93,7 +93,17 @@ module.exports = (tmp) => { }); } - runReplacements([], component, 'vue', vueFile); + runReplacements( + [ + { + from: 'immediate: true,', + to: 'immediate: true,\nflush: "post"' + } + ], + component, + 'vue', + vueFile + ); } catch (error) { console.error('Error occurred:', error); } diff --git a/packages/components/src/components/brand/brand.scss b/packages/components/src/components/brand/brand.scss index a050625ddd50..ea2660572f81 100644 --- a/packages/components/src/components/brand/brand.scss +++ b/packages/components/src/components/brand/brand.scss @@ -19,6 +19,7 @@ } .db-logo { + max-width: none; height: $db-sizing-sm; @media screen and (min-width: $db-screens-m) { height: $db-sizing-md; diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts index 97903c058830..f834f44e11f5 100644 --- a/packages/components/src/components/button/model.ts +++ b/packages/components/src/components/button/model.ts @@ -4,7 +4,8 @@ import { GlobalProps, GlobalState, IconProps, - IconState + IconState, + WidthProps } from '../../shared/model'; // TODO: 👇 Find a way to make react-docgen work without duplicating the types below @@ -68,11 +69,6 @@ export type DBButtonDefaultProps = { */ size?: 'small'; - /** - * Width of the button. Auto width based on text size, full width based on parent elements width. - */ - width?: 'full' | 'auto'; - /** * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons. */ @@ -82,7 +78,8 @@ export type DBButtonDefaultProps = { export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps & - IconProps; + IconProps & + WidthProps; export type DBButtonDefaultState = {}; diff --git a/packages/components/src/components/checkbox/model.ts b/packages/components/src/components/checkbox/model.ts index 9e3d86667dc6..ffcc16166089 100644 --- a/packages/components/src/components/checkbox/model.ts +++ b/packages/components/src/components/checkbox/model.ts @@ -10,7 +10,7 @@ import { FormProps, FormState, FormCheckProps, - FormCheckState + InitializedState } from '../../shared/model'; export interface DBCheckboxDefaultProps { @@ -35,7 +35,7 @@ export type DBCheckboxProps = DBCheckboxDefaultProps & FormCheckProps; export type DBCheckboxDefaultState = { - _indeterminate: boolean; + _indeterminate?: boolean; }; export type DBCheckboxState = DBCheckboxDefaultState & @@ -43,4 +43,4 @@ export type DBCheckboxState = DBCheckboxDefaultState & ChangeEventState & FocusEventState & FormState & - FormCheckState; + InitializedState; diff --git a/packages/components/src/components/drawer/model.ts b/packages/components/src/components/drawer/model.ts index 59ac73ed8cba..b8303bb0bddb 100644 --- a/packages/components/src/components/drawer/model.ts +++ b/packages/components/src/components/drawer/model.ts @@ -3,7 +3,8 @@ import { CloseEventState, GlobalProps, GlobalState, - InnerCloseButtonProps + InnerCloseButtonProps, + WidthProps } from '../../shared/model'; export interface DBDrawerDefaultProps { @@ -34,11 +35,7 @@ export interface DBDrawerDefaultProps { * React specific to change the header of the drawer. */ slotDrawerHeader?: any; - /** - * The width attribute disables the max-width of the drawer and overlays over the entire screen. - * Default max-width is: calc(100% - $db-spacing-fixed-xl), but you can overwrite it with --db-drawer-max-width. - */ - width?: 'full'; + /** * The withCloseButton attribute shows/hides the default close button. */ @@ -48,7 +45,8 @@ export interface DBDrawerDefaultProps { export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps & - InnerCloseButtonProps; + InnerCloseButtonProps & + WidthProps; export interface DBDrawerDefaultState { handleDialogOpen: () => void; diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss index 32031ee7d169..7523779f48ae 100644 --- a/packages/components/src/components/header/header.scss +++ b/packages/components/src/components/header/header.scss @@ -13,8 +13,8 @@ /* Mobile header should always be 56px */ min-height: to-rem(56); - padding-left: $db-spacing-fixed-md; - padding-right: $db-spacing-fixed-md; + gap: $db-spacing-fixed-md; + padding-inline: $db-spacing-fixed-md; .db-link { display: inline-block; @@ -39,10 +39,6 @@ .desktop-navigation { display: inherit; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); } } } diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts index dc8e0aac9780..ca63b022344c 100644 --- a/packages/components/src/components/input/model.ts +++ b/packages/components/src/components/input/model.ts @@ -13,14 +13,14 @@ import { IconProps, IconState, DefaultVariantProps, - KeyValueType + KeyValueType, + IconAfterProps } from '../../shared/model'; export type DBInputDefaultProps = { dataList?: KeyValueType[]; dataListId?: string; description?: string; - iconAfter?: string; type?: | 'text' | 'search' @@ -45,6 +45,7 @@ export type DBInputProps = DBInputDefaultProps & ValidEventProps & FormProps & IconProps & + IconAfterProps & DefaultVariantProps; export type DBInputDefaultState = { diff --git a/packages/components/src/components/navigation-item/docs/Angular.md b/packages/components/src/components/navigation-item/docs/Angular.md new file mode 100644 index 000000000000..9cbf784370cd --- /dev/null +++ b/packages/components/src/components/navigation-item/docs/Angular.md @@ -0,0 +1,26 @@ +## Angular + +For general installation and configuration look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package. + +### Load component + +```ts app.module.ts +//app.module.ts +import { DBNavigationItemModule } from '@db-ui/ngx-components'; + +@NgModule({ + ... + imports: [..., DBNavigationItemModule], + ... +}) + +``` + +### Use component + +```html app.component.html + + + NavigationItem + +``` diff --git a/packages/components/src/components/navigation-item/docs/HTML.md b/packages/components/src/components/navigation-item/docs/HTML.md new file mode 100644 index 000000000000..bfb976b474b8 --- /dev/null +++ b/packages/components/src/components/navigation-item/docs/HTML.md @@ -0,0 +1,20 @@ +## HTML + +For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package. + +### Use component + +```html index.html + +... + + +
  • + NavigationItem + + +
    +
    • +     + +``` diff --git a/packages/components/src/components/navigation-item/docs/Migration.md b/packages/components/src/components/navigation-item/docs/Migration.md new file mode 100644 index 000000000000..5f5eb8a04d6c --- /dev/null +++ b/packages/components/src/components/navigation-item/docs/Migration.md @@ -0,0 +1,8 @@ +## General + +> **Note** +> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components). + +## DB UI Core âž¡ DB UI Components + +New Component 🥳 diff --git a/packages/components/src/components/navigation-item/docs/React.md b/packages/components/src/components/navigation-item/docs/React.md new file mode 100644 index 000000000000..bf302b7d0155 --- /dev/null +++ b/packages/components/src/components/navigation-item/docs/React.md @@ -0,0 +1,19 @@ +## React + +For general installation and configuration look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package. + +### Use component + +```tsx App.tsx +// App.tsx +import { Link } from "react-router-dom"; +import { DBNavigationItem } from "@db-ui/react-components"; + +const App = () => ( + + NavigationItem + +); + +export default App; +``` diff --git a/packages/components/src/components/navigation-item/docs/Vue.md b/packages/components/src/components/navigation-item/docs/Vue.md new file mode 100644 index 000000000000..2427fecbed09 --- /dev/null +++ b/packages/components/src/components/navigation-item/docs/Vue.md @@ -0,0 +1,18 @@ +## Vue + +For general installation and configuration look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package. + +### Use component + +```vue App.vue + + + + +``` diff --git a/packages/components/src/components/navigation-item/index.ts b/packages/components/src/components/navigation-item/index.ts new file mode 100644 index 000000000000..61c256b8fe4d --- /dev/null +++ b/packages/components/src/components/navigation-item/index.ts @@ -0,0 +1 @@ +export { default as DBNavigationItem } from './navigation-item'; diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts new file mode 100644 index 000000000000..06853189f83c --- /dev/null +++ b/packages/components/src/components/navigation-item/model.ts @@ -0,0 +1,48 @@ +import { + ClickEventProps, + ClickEventState, + GlobalProps, + GlobalState, + IconAfterProps, + IconProps, + IconState, + InitializedState, + WidthProps +} from '../../shared/model'; + +export interface DBNavigationItemDefaultProps { + /** + * Indicator for active navigation item (bold font). + */ + active?: boolean; + + /** + * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled). + */ + disabled?: boolean; + + /** + * React-specific property to pass in a slot for sub-navigation + */ + + slotSubNavigation?: any; +} + +export type DBNavigationItemProps = DBNavigationItemDefaultProps & + GlobalProps & + ClickEventProps & + IconProps & + IconAfterProps & + WidthProps; + +export interface DBNavigationItemDefaultState { + hasAreaPopup: boolean; + subNavigationId: string; + hideSubNavigation?: boolean; +} + +export type DBNavigationItemState = DBNavigationItemDefaultState & + ClickEventState & + GlobalState & + IconState & + InitializedState; diff --git a/packages/components/src/components/navigation-item/navigation-item-web-component.scss b/packages/components/src/components/navigation-item/navigation-item-web-component.scss new file mode 100644 index 000000000000..afd7ec3ad9d7 --- /dev/null +++ b/packages/components/src/components/navigation-item/navigation-item-web-component.scss @@ -0,0 +1 @@ +@forward "navigation-item"; diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx new file mode 100644 index 000000000000..415d57069f34 --- /dev/null +++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx @@ -0,0 +1,96 @@ +import { + onMount, + onUpdate, + Show, + Slot, + useMetadata, + useStore +} from '@builder.io/mitosis'; +import { DBNavigationItemProps, DBNavigationItemState } from './model'; +import classNames from 'classnames'; +import { uuid } from '../../utils'; + +useMetadata({ + isAttachedToShadowDom: true, + component: { + // MS Power Apps + includeIcon: false, + properties: [] + } +}); + +export default function DBNavigationItem(props: DBNavigationItemProps) { + // This is used as forwardRef + let component: any; + + // jscpd:ignore-start + const state = useStore({ + initialized: false, + hasAreaPopup: false, + hideSubNavigation: false, + subNavigationId: 'sub-navigation-' + uuid(), + handleClick: (event: any) => { + if (props.onClick) { + props.onClick(event); + } + }, + iconVisible: (icon?: string) => { + return Boolean(icon && icon !== '_' && icon !== 'none'); + }, + getClassNames: (...args: classNames.ArgumentArray) => { + return classNames(args); + } + }); + + onMount(() => { + state.initialized = true; + if (props.stylePath) { + state.stylePath = props.stylePath; + } + }); + + onUpdate(() => { + if (state.initialized && document && state.subNavigationId) { + const subNavigationSlot = document?.getElementById( + state.subNavigationId + ) as HTMLMenuElement; + if (subNavigationSlot) { + const children = subNavigationSlot.children; + if (children?.length > 0) { + state.hasAreaPopup = true; + } else { + state.hideSubNavigation = true; + } + } + } + }, [state.initialized]); + + // jscpd:ignore-end + + return ( +
  • state.handleClick(event)}> + + + + {props.children} + + + + + + +
    • + ); +} diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss new file mode 100644 index 000000000000..8812c1c07ba9 --- /dev/null +++ b/packages/components/src/components/navigation-item/navigation-item.scss @@ -0,0 +1,65 @@ +@use "@db-ui/foundations/build/scss/variables" as *; +@use "@db-ui/foundations/build/scss/variables.global" as *; +@use "@db-ui/foundations/build/scss/helpers/component" as *; +@use "@db-ui/foundations/build/scss/color/color-variants" as *; +@use "@db-ui/foundations/build/scss/icon/icons.helpers" as *; + +.db-navigation-item { + @extend %default-interactive-component; + @extend %default-background-transition; + @extend %transparent-border; + + @include get-variant-bg-color(0); + display: inline-flex; + cursor: pointer; + + position: relative; + + border-radius: $default-card-border-radius; + padding: $db-spacing-fixed-xs $db-spacing-fixed-sm; + white-space: nowrap; // we don't want to break + text-align: center; + align-items: center; // Centering the content vertically and horizontally + + & > a { + text-decoration: none; + } + + &:hover { + @include get-variant-bg-color(0.16); + } + + &:active { + @include get-variant-bg-color(0.24); + } + + @media screen and (min-width: $db-screens-m) { + &:focus { + @include get-variant-bg-color(0.24); + } + } + + &::before { + margin-inline-end: $db-spacing-fixed-sm; + } + + &::after { + margin-inline-start: $db-spacing-fixed-sm; + } + + &[aria-current="page"] { + font-weight: 700; + } + + &[data-width="full"] { + width: 100%; + + &::after { + margin-inline-start: auto; + } + } + + &[data-disabled="true"] { + opacity: $default-opacity; + } +} diff --git a/packages/components/src/components/navigation-item/navigation-item.spec.tsx b/packages/components/src/components/navigation-item/navigation-item.spec.tsx new file mode 100644 index 000000000000..d51aca061a21 --- /dev/null +++ b/packages/components/src/components/navigation-item/navigation-item.spec.tsx @@ -0,0 +1,45 @@ +import { test, expect } from '@playwright/experimental-ct-react'; +import AxeBuilder from '@axe-core/playwright'; + +import { DBNavigationItem } from './index'; +// @ts-ignore - vue can only find it with .ts as file ending +import { DEFAULT_VIEWPORT } from '../../shared/constants.ts'; + +const comp = ( + + Test1 + Test2 + Test3 + +); + +const testComponent = () => { + test('should contain text', async ({ mount }) => { + const component = await mount(comp); + await expect(component).toContainText('Test'); + }); + + test('should match screenshot', async ({ mount }) => { + const component = await mount(comp); + await expect(component).toHaveScreenshot(); + }); +}; + +test.describe('DBNavigationItem', () => { + test.use({ viewport: DEFAULT_VIEWPORT }); + testComponent(); +}); + +test.describe('DBNavigationItem component A11y', () => { + test('DBNavigationItem should not have any automatically detectable accessibility issues', async ({ + page, + mount + }) => { + await mount(comp); + const accessibilityScanResults = await new AxeBuilder({ page }) + .include('.db-navigation-item') + .analyze(); + + expect(accessibilityScanResults.violations).toEqual([]); + }); +}); diff --git a/packages/components/src/components/radio/model.ts b/packages/components/src/components/radio/model.ts index 3f61b888ce72..d3c7760c8c79 100644 --- a/packages/components/src/components/radio/model.ts +++ b/packages/components/src/components/radio/model.ts @@ -10,7 +10,7 @@ import { FormProps, FormState, FormCheckProps, - FormCheckState + InitializedState } from '../../shared/model'; export interface DBRadioDefaultProps { @@ -34,4 +34,4 @@ export type DBRadioState = DBRadioDefaultState & ChangeEventState & FocusEventState & FormState & - FormCheckState; + InitializedState; diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts index ba9e1993d34a..55200f2ca930 100644 --- a/packages/components/src/components/tag/model.ts +++ b/packages/components/src/components/tag/model.ts @@ -10,7 +10,7 @@ import { IconProps, IconState, FormCheckProps, - FormCheckState + InitializedState } from '../../shared/model'; export interface DBTagDefaultProps { @@ -68,5 +68,5 @@ export type DBTagState = DBTagDefaultState & GlobalState & ChangeEventState & FormState & - FormCheckState & + InitializedState & IconState; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 2fc949108d5f..96f70bfd1706 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -18,3 +18,4 @@ export * from './components/radio'; export * from './components/code-docs'; export * from './components/select'; export * from './components/tag'; +export * from './components/navigation-item'; diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts index 82ff255ae74b..d100f0120cf4 100644 --- a/packages/components/src/shared/model.ts +++ b/packages/components/src/shared/model.ts @@ -77,10 +77,24 @@ export type IconProps = { icon?: IconTypes; }; +export type IconAfterProps = { + /** + * Define an icon by it's identifier (like e.g. _account_, compare to [Icons](https://db-ui.github.io/mono/review/main/foundations/icons) to get displayed in front of the elements content. + */ + iconAfter?: IconTypes; +}; + export type IconState = { iconVisible: (icon?: string) => boolean; }; +export type WidthProps = { + /** + * Width of the component. Auto width based on children size, full width based on parent elements width. + */ + width?: 'full' | 'auto'; +}; + export type FormProps = { /** * React specific attribute to set default value. @@ -128,7 +142,7 @@ export type FormState = { propagateChange?: (value: any) => void; }; -export type FormCheckState = { +export type InitializedState = { initialized: boolean; }; diff --git a/packages/components/src/styles/db-ui-components.scss b/packages/components/src/styles/db-ui-components.scss index 34bf6767a33a..8c38b5c4375a 100644 --- a/packages/components/src/styles/db-ui-components.scss +++ b/packages/components/src/styles/db-ui-components.scss @@ -19,10 +19,12 @@ @use "../components/code-docs/code-docs" as *; @use "../components/tag/tag" as *; @use "../components/drawer/drawer" as *; - @use "../components/select/select" as *; +@use "../components/navigation-item/navigation-item" as *; // angular-workaround +dbnavigation-item, +db-navigation-item, dbtag, db-tag, dbselect, diff --git a/showcases/angular-showcase/src/app/app.component.html b/showcases/angular-showcase/src/app/app.component.html index 3a1568959e69..998fbfbbcb2b 100644 --- a/showcases/angular-showcase/src/app/app.component.html +++ b/showcases/angular-showcase/src/app/app.component.html @@ -13,10 +13,12 @@ diff --git a/showcases/angular-showcase/src/app/app.module.ts b/showcases/angular-showcase/src/app/app.module.ts index a5e31f2a08f7..c063aa981581 100644 --- a/showcases/angular-showcase/src/app/app.module.ts +++ b/showcases/angular-showcase/src/app/app.module.ts @@ -19,7 +19,8 @@ import { DBInfotextModule, DBSelectModule, DBDrawerModule, - DBTagModule + DBTagModule, + DBNavigationItemModule } from '../../../../output/angular/src'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app.routing.module'; @@ -38,9 +39,12 @@ import { DefaultComponent } from './components/default.component'; import { TagComponent } from './components/tag/tag.component'; import { DrawerComponent } from './components/drawer/drawer.component'; import { SelectComponent } from './components/select/select.component'; +import { NavigationItemComponent } from './components/navigation-item/navigation-item.component'; @NgModule({ declarations: [ + NavigationItemComponent, + SelectComponent, TagComponent, AppComponent, @@ -59,6 +63,8 @@ import { SelectComponent } from './components/select/select.component'; DrawerComponent ], imports: [ + DBNavigationItemModule, + DBTagModule, DBSelectModule, AppRoutingModule, diff --git a/showcases/angular-showcase/src/app/components/card/card.component.html b/showcases/angular-showcase/src/app/components/card/card.component.html index 6bdde1546e90..6926400818a4 100644 --- a/showcases/angular-showcase/src/app/components/card/card.component.html +++ b/showcases/angular-showcase/src/app/components/card/card.component.html @@ -1,5 +1,5 @@ diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html new file mode 100644 index 000000000000..3aba07792a41 --- /dev/null +++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html @@ -0,0 +1,24 @@ + + + {{ exampleName }} + + diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts new file mode 100644 index 000000000000..c4d7040c705c --- /dev/null +++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +import defaultComponentVariants from '../../../../../shared/navigation-item.json'; + +@Component({ + selector: 'app-navigation-item', + templateUrl: './navigation-item.component.html' +}) +export class NavigationItemComponent { + variants = defaultComponentVariants; + + showAlert = (exampleName: string) => { + // eslint-disable-next-line no-alert + alert(exampleName); + }; +} diff --git a/showcases/angular-showcase/src/app/utils/navigation-item.ts b/showcases/angular-showcase/src/app/utils/navigation-item.ts index b52ebeeaf1b7..c690410c099c 100644 --- a/showcases/angular-showcase/src/app/utils/navigation-item.ts +++ b/showcases/angular-showcase/src/app/utils/navigation-item.ts @@ -1,3 +1,5 @@ +import { NavigationItemComponent } from '../components/navigation-item/navigation-item.component'; + import { SelectComponent } from '../components/select/select.component'; import { TagComponent } from '../components/tag/tag.component'; @@ -15,6 +17,12 @@ import { DividerComponent } from '../components/divider/divider.component'; import { DrawerComponent } from '../components/drawer/drawer.component'; export const NAVIGATION_ITEMS: any[] = [ + { + path: 'navigation-item', + label: 'NavigationItem', + component: NavigationItemComponent + }, + { path: 'divider', label: 'Divider', component: DividerComponent }, { path: 'select', label: 'Select', component: SelectComponent }, { path: 'radio', label: 'Radio', component: RadioComponent }, diff --git a/showcases/e2e/default.ts b/showcases/e2e/default.ts index 81a4201202a7..c1896b549253 100644 --- a/showcases/e2e/default.ts +++ b/showcases/e2e/default.ts @@ -11,19 +11,20 @@ export const getDefaultScreenshotTest = (component: string) => { const isWebkit = testInfo.project.name === 'webkit' || testInfo.project.name === 'mobile_safari'; - const isFirefox = testInfo.project.name === 'firefox'; const showcase = process.env.showcase; const isAngular = showcase.startsWith('angular'); + const header = await page.locator('header'); + const config: any = { - fullPage: true + fullPage: true, + mask: [header] }; - if (isWebkit) { - config.maxDiffPixels = isAngular ? 1000 : 6; - } else if (isFirefox && isAngular) { - config.maxDiffPixelRatio = 0.05; - config.maxDiffPixels = 100; + if (isAngular) { + config.maxDiffPixels = 1000; + } else if (isWebkit) { + config.maxDiffPixels = 6; } else { config.maxDiffPixels = 1; } diff --git a/showcases/e2e/navigation-item/showcase-navigation-item.spec.ts b/showcases/e2e/navigation-item/showcase-navigation-item.spec.ts new file mode 100644 index 000000000000..76f63d70db11 --- /dev/null +++ b/showcases/e2e/navigation-item/showcase-navigation-item.spec.ts @@ -0,0 +1,7 @@ +import { test } from '@playwright/test'; +// @ts-expect-error - required for playwright +import { getDefaultScreenshotTest } from '../default.ts'; + +test.describe('DBNavigationItem', () => { + getDefaultScreenshotTest('navigation-item'); +}); diff --git a/showcases/patternhub/components/component-parser/data.ts b/showcases/patternhub/components/component-parser/data.ts index f27b71ef96f1..bbedc0832cea 100644 --- a/showcases/patternhub/components/component-parser/data.ts +++ b/showcases/patternhub/components/component-parser/data.ts @@ -5,7 +5,8 @@ export type ComponentParserType = { export type ComponentType = { index?: string | number; type?: /* hygen type */ - | 'tag' + | 'navigation-item' + | 'tag' | 'select' | 'h1' | 'h2' diff --git a/showcases/patternhub/components/component-parser/index.tsx b/showcases/patternhub/components/component-parser/index.tsx index a1b83105c5fb..0026593a7c2a 100644 --- a/showcases/patternhub/components/component-parser/index.tsx +++ b/showcases/patternhub/components/component-parser/index.tsx @@ -15,7 +15,8 @@ import { DBCard, DBBrand, DBSection, - DBHeader + DBHeader, + DBNavigationItem } from '../src'; import { ComponentParserType, ComponentType } from './data'; @@ -197,6 +198,14 @@ const ComponentSwitch = ({ ); } + if (type === 'navigation-item') { + return ( + + {resolvedContent} + + ); + } + // hygen before return {resolvedContent}; diff --git a/showcases/patternhub/data/routes.ts b/showcases/patternhub/data/routes.ts index 33c0ee68f5d0..6e0d91b7b308 100644 --- a/showcases/patternhub/data/routes.ts +++ b/showcases/patternhub/data/routes.ts @@ -89,6 +89,16 @@ const componentChildren = [ } ] }, + { + label: '05 Navigation', + link: '/components/05-navigation', + children: [ + { + label: 'DBNavigationItem', + name: 'navigation-item' + } + ] + }, { label: '06 Feedback', link: '/components/06-feedback', diff --git a/showcases/patternhub/scripts/get-example-file.js b/showcases/patternhub/scripts/get-example-file.js index e6a76234381a..ecee0b1457d2 100644 --- a/showcases/patternhub/scripts/get-example-file.js +++ b/showcases/patternhub/scripts/get-example-file.js @@ -17,6 +17,13 @@ const getOption = (optionName, tsType) => { return `${optionName}={['test1','test2']}`; } + if ( + tsType.name === 'intersection' && + tsType.raw.includes('DBNavigationItemActionProps') + ) { + return `${optionName}={{"text":"Test", "icon":"edit"}}`; + } + if (tsType.name === 'number') { return `${optionName}={100}`; } diff --git a/showcases/react-showcase/src/app.tsx b/showcases/react-showcase/src/app.tsx index e00218d13a81..c7e3d854d05c 100644 --- a/showcases/react-showcase/src/app.tsx +++ b/showcases/react-showcase/src/app.tsx @@ -1,6 +1,11 @@ import type { ChangeEvent } from 'react'; import { Link, Outlet } from 'react-router-dom'; -import { DBBrand, DBHeader, DBPage } from '../../../output/react/src'; +import { + DBBrand, + DBHeader, + DBPage, + DBNavigationItem +} from '../../../output/react/src'; import { COLORS, TONALITIES @@ -36,7 +41,9 @@ const App = () => { {getSortedNavigationItems().map((navItem) => (
  • - {navItem.label} + + {navItem.label} +
    • ))} diff --git a/showcases/react-showcase/src/components/navigation-item/index.tsx b/showcases/react-showcase/src/components/navigation-item/index.tsx new file mode 100644 index 000000000000..57a13550f3c0 --- /dev/null +++ b/showcases/react-showcase/src/components/navigation-item/index.tsx @@ -0,0 +1,40 @@ +import { DBNavigationItem, DBButton } from '../../../../../output/react/src'; +import DefaultComponent from '../index'; +import defaultComponentVariants from '../../../../shared/navigation-item.json'; +import type { DBNavigationItemProps } from '../../../../../output/react/src/components/navigation-item/model'; +import { getVariants } from '../data'; + +const getNavigationItem = ({ + children, + icon, + iconAfter, + disabled, + active, + width +}: DBNavigationItemProps) => ( + { + // eslint-disable-next-line no-alert + alert(children.toString()); + }}> + {children} + +); + +const NavigationItemComponent = () => { + return ( + + ); +}; + +export default NavigationItemComponent; diff --git a/showcases/react-showcase/src/utils/navigation-item.tsx b/showcases/react-showcase/src/utils/navigation-item.tsx index 43ba0829d7f8..b64ce9c338b9 100644 --- a/showcases/react-showcase/src/utils/navigation-item.tsx +++ b/showcases/react-showcase/src/utils/navigation-item.tsx @@ -1,3 +1,5 @@ +import NavigationItemComponent from '../components/navigation-item'; + import CheckboxComponent from '../components/checkbox'; import TagComponent from '../components/tag'; import DrawerComponent from '../components/drawer'; @@ -21,6 +23,12 @@ export type NavigationItem = { home?: boolean; }; export const NAVIGATION_ITEMS: NavigationItem[] = [ + { + path: 'navigation-item', + label: 'NavigationItem', + component: + }, + { path: 'checkbox', label: 'Checkbox', component: }, { path: 'divider', label: 'Divider', component: }, { path: 'tag', label: 'Tag', component: }, diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json new file mode 100644 index 000000000000..fea5ce2d3499 --- /dev/null +++ b/showcases/shared/navigation-item.json @@ -0,0 +1,108 @@ +[ + { + "name": "Tonality", + "examples": [ + { + "name": "functional", + "className": "db-ui-functional", + "props": { + "icon": "account", + "iconAfter": "expand-more" + } + }, + { + "name": "regular (Default)", + "className": "db-ui-regular", + "props": { + "icon": "account", + "iconAfter": "expand-more" + } + }, + { + "name": "expressive", + "className": "db-ui-expressive", + "props": { + "icon": "account", + "iconAfter": "expand-more" + } + } + ] + }, + { + "name": "States", + "examples": [ + { + "name": "Enabled (Default)", + "props": { + "icon": "account", + "iconAfter": "expand-more" + } + }, + { + "name": "Disabled", + "props": { + "disabled": true, + "icon": "account", + "iconAfter": "expand-more" + } + }, + { + "name": "Active", + "props": { + "active": true, + "iconAfter": "chevron-right" + } + } + ] + }, + { + "name": "Content", + "examples": [ + { + "name": "Leading Icon - Text", + "props": { + "icon": "account" + } + }, + { + "name": "Leading Icon - Text - Trailing Icon", + "props": { + "icon": "account", + "iconAfter": "expand-more" + } + }, + { + "name": "Text - Trailing Icon", + "props": { + "iconAfter": "expand-more" + } + }, + { + "name": "Text", + "props": {} + } + ] + }, + { + "name": "Width", + "examples": [ + { + "name": "Auto (Default)", + "style": { "width": "400px" }, + "props": { + "icon": "account", + "iconAfter": "expand-more" + } + }, + { + "name": "Full", + "style": { "width": "400px" }, + "props": { + "width": "full", + "icon": "account", + "iconAfter": "expand-more" + } + } + ] + } +] diff --git a/showcases/showcase-styles.css b/showcases/showcase-styles.css index 9e1271447333..af2e24d7d52c 100644 --- a/showcases/showcase-styles.css +++ b/showcases/showcase-styles.css @@ -2,7 +2,6 @@ .desktop-navigation ul { list-style-type: none; display: flex; - gap: var(--db-spacing-fixed-md); } .default-container { diff --git a/showcases/vue-showcase/src/App.vue b/showcases/vue-showcase/src/App.vue index 5958bd4a2b3a..50ffdb906803 100644 --- a/showcases/vue-showcase/src/App.vue +++ b/showcases/vue-showcase/src/App.vue @@ -1,5 +1,10 @@ + + diff --git a/showcases/vue-showcase/src/utils/navigation-items.ts b/showcases/vue-showcase/src/utils/navigation-items.ts index ed29738a21a3..3863d73fd6bf 100644 --- a/showcases/vue-showcase/src/utils/navigation-items.ts +++ b/showcases/vue-showcase/src/utils/navigation-items.ts @@ -1,3 +1,5 @@ +import NavigationItem from '../components/navigation-item/NavigationItem.vue'; + import Select from '../components/select/Select.vue'; import Tag from '../components/tag/Tag.vue'; @@ -15,6 +17,12 @@ import Card from '../components/card/Card.vue'; import Drawer from '../components/drawer/Drawer.vue'; export const navigationItems: any[] = [ + { + path: '/navigation-item', + label: 'NavigationItem', + component: NavigationItem + }, + { path: '/tag', label: 'Tag', component: Tag }, { path: '/', label: 'Home', component: Form }, { path: '/divider', label: 'Divider', component: Divider },