feat: add tab component (#2067)

* feat: add tab component * feat: added content section - added content section (icon trailing, leading, only icon) - index.html needs to be adjusted accordingly - only icon styling not done yet * feat: added behavior and content alignment * feat: adjusted index.html * feat: articles show when inputs checked * feat: adjusted html file * feat: tab-bar in html started first styling * feat: tab-bar html * feat: add tabs, tab-list, tab-panel * feat: add tabs for all frameworks * fix: linting issues * chore: update screenshots * chore: update background for tab puls * fix: linting issues * fix: issues for patternhub build * fix: issues with pipeline * chore: update snapshots * chore: update angular showcase tabs title * chore: update tabs divider to work with overflow * chore: update snapshots * chore: update snapshots * fix: issue for angular * chore: update from main * chore: update from main * Update index.html --------- Co-authored-by: NicolasMerget <[email protected]> Co-authored-by: Nicolas Merget <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
db-ui · Feb 19, 2024 · 704095c · 704095c
1 parent e16dcfa
commit 704095c
Show file tree

Hide file tree

Showing 137 changed files with 2,384 additions and 313 deletions.
diff --git a/...m/showcase/chromium/regular/neutral/DBAccordionItem-should-match-screenshot.png b/...m/showcase/chromium/regular/neutral/DBAccordionItem-should-match-screenshot.png
diff --git a/...em/showcase/firefox/regular/neutral/DBAccordionItem-should-match-screenshot.png b/...em/showcase/firefox/regular/neutral/DBAccordionItem-should-match-screenshot.png
diff --git a/...tem/showcase/webkit/regular/neutral/DBAccordionItem-should-match-screenshot.png b/...tem/showcase/webkit/regular/neutral/DBAccordionItem-should-match-screenshot.png
diff --git a/...rdion/showcase/chromium/regular/neutral/DBAccordion-should-match-screenshot.png b/...rdion/showcase/chromium/regular/neutral/DBAccordion-should-match-screenshot.png
diff --git a/...ordion/showcase/firefox/regular/neutral/DBAccordion-should-match-screenshot.png b/...ordion/showcase/firefox/regular/neutral/DBAccordion-should-match-screenshot.png
diff --git a/...cordion/showcase/webkit/regular/neutral/DBAccordion-should-match-screenshot.png b/...cordion/showcase/webkit/regular/neutral/DBAccordion-should-match-screenshot.png
diff --git a/...s__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png b/...s__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...ts__/alert/showcase/firefox/regular/neutral/DBAlert-should-match-screenshot.png b/...ts__/alert/showcase/firefox/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...ots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png b/...ots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png
diff --git a/...s__/badge/showcase/chromium/regular/neutral/DBBadge-should-match-screenshot.png b/...s__/badge/showcase/chromium/regular/neutral/DBBadge-should-match-screenshot.png
diff --git a/...ts__/badge/showcase/firefox/regular/neutral/DBBadge-should-match-screenshot.png b/...ts__/badge/showcase/firefox/regular/neutral/DBBadge-should-match-screenshot.png
diff --git a/...ots__/badge/showcase/webkit/regular/neutral/DBBadge-should-match-screenshot.png b/...ots__/badge/showcase/webkit/regular/neutral/DBBadge-should-match-screenshot.png
diff --git a/..._/button/showcase/chromium/regular/neutral/DBButton-should-match-screenshot.png b/..._/button/showcase/chromium/regular/neutral/DBButton-should-match-screenshot.png
diff --git a/...__/button/showcase/firefox/regular/neutral/DBButton-should-match-screenshot.png b/...__/button/showcase/firefox/regular/neutral/DBButton-should-match-screenshot.png
diff --git a/...s__/button/showcase/webkit/regular/neutral/DBButton-should-match-screenshot.png b/...s__/button/showcase/webkit/regular/neutral/DBButton-should-match-screenshot.png
diff --git a/...ots__/icon/showcase/chromium/regular/neutral/DBIcon-should-match-screenshot.png b/...ots__/icon/showcase/chromium/regular/neutral/DBIcon-should-match-screenshot.png
diff --git a/...hots__/icon/showcase/firefox/regular/neutral/DBIcon-should-match-screenshot.png b/...hots__/icon/showcase/firefox/regular/neutral/DBIcon-should-match-screenshot.png
diff --git a/...shots__/icon/showcase/webkit/regular/neutral/DBIcon-should-match-screenshot.png b/...shots__/icon/showcase/webkit/regular/neutral/DBIcon-should-match-screenshot.png
diff --git a/...fotext/showcase/chromium/regular/neutral/DBInfotext-should-match-screenshot.png b/...fotext/showcase/chromium/regular/neutral/DBInfotext-should-match-screenshot.png
diff --git a/...nfotext/showcase/firefox/regular/neutral/DBInfotext-should-match-screenshot.png b/...nfotext/showcase/firefox/regular/neutral/DBInfotext-should-match-screenshot.png
diff --git a/...infotext/showcase/webkit/regular/neutral/DBInfotext-should-match-screenshot.png b/...infotext/showcase/webkit/regular/neutral/DBInfotext-should-match-screenshot.png
diff --git a/...s__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png b/...s__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...ts__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png b/...ts__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...ots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png b/...ots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png
diff --git a/...ots__/link/showcase/chromium/regular/neutral/DBLink-should-match-screenshot.png b/...ots__/link/showcase/chromium/regular/neutral/DBLink-should-match-screenshot.png
diff --git a/...hots__/link/showcase/firefox/regular/neutral/DBLink-should-match-screenshot.png b/...hots__/link/showcase/firefox/regular/neutral/DBLink-should-match-screenshot.png
diff --git a/...shots__/link/showcase/webkit/regular/neutral/DBLink-should-match-screenshot.png b/...shots__/link/showcase/webkit/regular/neutral/DBLink-should-match-screenshot.png
diff --git a/...section/showcase/chromium/regular/neutral/DBSection-should-match-screenshot.png b/...section/showcase/chromium/regular/neutral/DBSection-should-match-screenshot.png
diff --git a/.../section/showcase/firefox/regular/neutral/DBSection-should-match-screenshot.png b/.../section/showcase/firefox/regular/neutral/DBSection-should-match-screenshot.png
diff --git a/..._/section/showcase/webkit/regular/neutral/DBSection-should-match-screenshot.png b/..._/section/showcase/webkit/regular/neutral/DBSection-should-match-screenshot.png
diff --git a/...shots__/tab/showcase/chromium/regular/neutral/DBTab-should-match-screenshot.png b/...shots__/tab/showcase/chromium/regular/neutral/DBTab-should-match-screenshot.png
diff --git a/...pshots__/tab/showcase/firefox/regular/neutral/DBTab-should-match-screenshot.png b/...pshots__/tab/showcase/firefox/regular/neutral/DBTab-should-match-screenshot.png
diff --git a/...__/tab/showcase/mobile-chrome/regular/neutral/DBTab-should-match-screenshot.png b/...__/tab/showcase/mobile-chrome/regular/neutral/DBTab-should-match-screenshot.png
diff --git a/...__/tab/showcase/mobile-safari/regular/neutral/DBTab-should-match-screenshot.png b/...__/tab/showcase/mobile-safari/regular/neutral/DBTab-should-match-screenshot.png
diff --git a/...apshots__/tab/showcase/webkit/regular/neutral/DBTab-should-match-screenshot.png b/...apshots__/tab/showcase/webkit/regular/neutral/DBTab-should-match-screenshot.png
diff --git a/__snapshots__/tabs/component/chromium/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/component/chromium/DBTabs-should-match-screenshot.png
diff --git a/__snapshots__/tabs/component/firefox/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/component/firefox/DBTabs-should-match-screenshot.png
diff --git a/__snapshots__/tabs/component/mobile-chrome/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/component/mobile-chrome/DBTabs-should-match-screenshot.png
diff --git a/...ots__/tabs/showcase/chromium/regular/neutral/DBTabs-should-match-screenshot.png b/...ots__/tabs/showcase/chromium/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/...hots__/tabs/showcase/firefox/regular/neutral/DBTabs-should-match-screenshot.png b/...hots__/tabs/showcase/firefox/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/.../tabs/showcase/mobile-chrome/regular/neutral/DBTabs-should-match-screenshot.png b/.../tabs/showcase/mobile-chrome/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/.../tabs/showcase/mobile-safari/regular/neutral/DBTabs-should-match-screenshot.png b/.../tabs/showcase/mobile-safari/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/...shots__/tabs/showcase/webkit/regular/neutral/DBTabs-should-match-screenshot.png b/...shots__/tabs/showcase/webkit/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/...shots__/tag/showcase/chromium/regular/neutral/DBTag-should-match-screenshot.png b/...shots__/tag/showcase/chromium/regular/neutral/DBTag-should-match-screenshot.png
diff --git a/...pshots__/tag/showcase/firefox/regular/neutral/DBTag-should-match-screenshot.png b/...pshots__/tag/showcase/firefox/regular/neutral/DBTag-should-match-screenshot.png
diff --git a/...apshots__/tag/showcase/webkit/regular/neutral/DBTag-should-match-screenshot.png b/...apshots__/tag/showcase/webkit/regular/neutral/DBTag-should-match-screenshot.png
diff --git a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png
diff --git a/...shots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png b/...shots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png
diff --git a/...xtarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png b/...xtarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...extarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png b/...extarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...a/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png b/...a/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...a/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png b/...a/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png b/...textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/packages/components/index.html b/packages/components/index.html
@@ -3,10 +3,19 @@
 	<head>
 		<meta charset="UTF-8" />
 		<title>Dev</title>
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
 		<link rel="stylesheet" href="/styles/db-ui-42.css" />
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<ul>
+			<li>
+				<a href="./src/components/tabs/index.html">DBTabs</a>
+			</li>
+
+			<li>
+				<a href="./src/components/tab/index.html">DBTab</a>
+			</li>
+
 			<li>
 				<a href="./src/components/tooltip/index.html">DBTooltip</a>
 			</li>

diff --git a/packages/components/overrides/angular/src/components/tab-bar/index.ts b/packages/components/overrides/angular/src/components/tab-bar/index.ts
diff --git a/packages/components/overrides/angular/src/components/tab-list/index.ts b/packages/components/overrides/angular/src/components/tab-list/index.ts
@@ -0,0 +1 @@
+export { DBTabList } from './tab-list';
diff --git a/packages/components/overrides/angular/src/components/tab-panel/index.ts b/packages/components/overrides/angular/src/components/tab-panel/index.ts
@@ -0,0 +1 @@
+export { DBTabPanel } from './tab-panel';
diff --git a/packages/components/overrides/angular/src/components/tabs/index.ts b/packages/components/overrides/angular/src/components/tabs/index.ts
@@ -0,0 +1 @@
+export { DBTabs } from './tabs';
diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js
@@ -185,6 +185,15 @@ module.exports = (tmp) => {
 			}
 		];
 
+		if (component.config?.angular?.initValues) {
+			component.config?.angular?.initValues.forEach((init) => {
+				replacements.push({
+					from: `["${init.key}"];`,
+					to: `["${init.key}"] = ${init.value === '' ? '""' : init.value};`
+				});
+			});
+		}
+
 		if (component.config?.angular?.controlValueAccessor) {
 			setControlValueAccessorReplacements(
 				replacements,

diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
@@ -14,7 +14,8 @@
  *     },
  *     angular?: {
  * 			controlValueAccessor?: string,
- * 			directives?: {name:string, ngContentName?:string}[]
+ * 			directives?: {name:string, ngContentName?:string}[],
+ * 			initValues?: {key:string, value:any}[]
  * 		},
  *     react?: {
  * 			propsPassingFilter?: string[];
@@ -23,6 +24,45 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'tab-panel',
+		config: {
+			angular: {
+				initValues: [
+					{ key: 'name', value: '' },
+					{ key: 'index', value: 0 }
+				]
+			}
+		}
+	},
+	{
+		name: 'tab',
+		config: {
+			angular: {
+				initValues: [
+					{ key: 'name', value: '' },
+					{ key: 'index', value: 0 }
+				]
+			}
+		}
+	},
+
+	{
+		name: 'tabs',
+		overwrites: {
+			angular: [
+				{
+					from: 'scrollContainer = null;',
+					to: 'scrollContainer: Element | null = null;'
+				}
+			]
+		}
+	},
+
+	{
+		name: 'tab-list'
+	},
+
 	{
 		name: 'tooltip'
 	},
@@ -233,12 +273,6 @@ const getComponents = () => [
 	{
 		name: 'card'
 	},
-	{
-		name: 'tab-bar'
-	},
-	{
-		name: 'tab'
-	},
 	{
 		name: 'button'
 	},

diff --git a/packages/components/src/components/accordion/model.ts b/packages/components/src/components/accordion/model.ts
@@ -1,4 +1,9 @@
-import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
+import {
+	GlobalProps,
+	GlobalState,
+	InitializedState,
+	ItemClickState
+} from '../../shared/model';
 import { DBAccordionItemDefaultProps } from '../accordion-item/model';
 
 export interface DBAccordionItemInterface
@@ -28,12 +33,11 @@ export interface DBAccordionDefaultProps {
 export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
 
 export interface DBAccordionDefaultState {
-	clickedId: string;
 	openItems: string[];
-	handleItemClick: (id: string) => void;
 	convertItems: (items?: any[] | string) => DBAccordionItemInterface[];
 }
 
 export type DBAccordionState = DBAccordionDefaultState &
 	GlobalState &
-	InitializedState;
+	InitializedState &
+	ItemClickState;
diff --git a/packages/components/src/components/main-navigation/main-navigation.scss b/packages/components/src/components/main-navigation/main-navigation.scss
@@ -72,7 +72,7 @@
 
 			&[aria-current="page"] {
 				// add puls for main-navigation items
-				@extend %show-db-puls;
+				@extend %show-db-puls-auto;
 
 				menu {
 					// hide puls for non main-navigation items

diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -7,9 +7,9 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DBNavigationItemState, DBNavigationItemProps } from './model';
+import { DBNavigationItemProps, DBNavigationItemState } from './model';
 import { DBButton } from '../button';
-import { cls, uuid } from '../../utils';
+import { cls, uuid, visibleInVX, visibleInVY } from '../../utils';
 import { DEFAULT_BACK } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
 
@@ -63,10 +63,23 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			const subNavigationSlot = document?.getElementById(
 				state.subNavigationId
 			) as HTMLMenuElement;
+
 			if (subNavigationSlot) {
 				const children = subNavigationSlot.children;
 				if (children?.length > 0) {
 					state.hasAreaPopup = true;
+					if (!visibleInVX(subNavigationSlot)) {
+						subNavigationSlot.setAttribute(
+							'data-outside-vx',
+							'true'
+						);
+					}
+					if (!visibleInVY(subNavigationSlot)) {
+						subNavigationSlot.setAttribute(
+							'data-outside-vy',
+							'true'
+						);
+					}
 				} else {
 					state.hasSubNavigation = false;
 				}

diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -69,7 +69,7 @@
 
 .db-navigation-item {
 	--db-has-before: 0;
-	@extend %db-puls;
+	@extend %db-puls-auto;
 
 	@include icon-passing.icon-passing();
 
@@ -183,6 +183,11 @@
 
 		transition: visibility 1ms linear; // workaround to enable focus with keyboard
 
+		&[data-outside-vx="true"] {
+			transform: translateX(-100%);
+			inset-inline-start: 100%;
+		}
+
 		&:hover,
 		&:focus-within {
 			visibility: visible;
@@ -209,8 +214,27 @@
 			);
 			inset-inline-start: calc(100% + #{variables.$db-spacing-fixed-xs});
 
+			&[data-outside-vy="true"] {
+				inset-block-start: calc(
+					100% + #{variables.$db-spacing-fixed-md}
+				);
+				transform: translateY(-100%);
+			}
+
+			&[data-outside-vx="true"] {
+				transform: translateX(-100%);
+				inset-inline-start: calc(
+					-1 * #{variables.$db-spacing-fixed-xs}
+				);
+
+				&[data-outside-vy="true"] {
+					transform: translate(-100%, -100%);
+				}
+			}
+
 			&::before {
 				content: "";
+				position: absolute;
 				padding: variables.$db-spacing-fixed-xs;
 				// #{$db-spacing-fixed-3xs} for box shadow
 				inset-block-start: #{variables.$db-spacing-fixed-3xs};
@@ -220,6 +244,17 @@
 				block-size: 100%;
 				inline-size: variables.$db-spacing-fixed-xs;
 			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				padding: variables.$db-spacing-fixed-xs;
+				// #{$db-spacing-fixed-3xs} for box shadow
+				inset-block-start: #{variables.$db-spacing-fixed-3xs};
+				inset-inline-end: calc(-1 *#{variables.$db-spacing-fixed-xs});
+				block-size: 100%;
+				inline-size: variables.$db-spacing-fixed-xs;
+			}
 		}
 	}
 

diff --git a/packages/components/src/components/tab-bar/docs/Angular.md b/packages/components/src/components/tab-bar/docs/Angular.md
diff --git a/packages/components/src/components/tab-bar/docs/HTML.md b/packages/components/src/components/tab-bar/docs/HTML.md
diff --git a/packages/components/src/components/tab-bar/docs/React.md b/packages/components/src/components/tab-bar/docs/React.md
diff --git a/packages/components/src/components/tab-bar/docs/Vue.md b/packages/components/src/components/tab-bar/docs/Vue.md
diff --git a/packages/components/src/components/tab-bar/index.ts b/packages/components/src/components/tab-bar/index.ts
diff --git a/packages/components/src/components/tab-bar/model.ts b/packages/components/src/components/tab-bar/model.ts
diff --git a/packages/components/src/components/tab-bar/tab-bar-web-component.scss b/packages/components/src/components/tab-bar/tab-bar-web-component.scss
diff --git a/packages/components/src/components/tab-bar/tab-bar.lite.tsx b/packages/components/src/components/tab-bar/tab-bar.lite.tsx
diff --git a/packages/components/src/components/tab-bar/tab-bar.scss b/packages/components/src/components/tab-bar/tab-bar.scss
diff --git a/packages/components/src/components/tab-list/docs/Angular.md b/packages/components/src/components/tab-list/docs/Angular.md
@@ -0,0 +1,26 @@
+## Angular
+
+For general installation and configuration take a 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 { DBTabListModule } from '@db-ui/ngx-components';
+
+@NgModule({
+  ...
+  imports: [..., DBTabListModule],
+  ...
+})
+
+```
+
+### Use component
+
+```html app.component.html
+<!-- app.component.html -->
+<db-tab-list>TabList</db-tab-list>
+```
+
+
diff --git a/packages/components/src/components/tab-list/docs/HTML.md b/packages/components/src/components/tab-list/docs/HTML.md
@@ -0,0 +1,16 @@
+## HTML
+
+For general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+
+### Use component
+
+```html index.html
+<!-- index.html -->
+...
+<body>
+	<div class="db-tab-list">
+		TabList
+	</div>
+</body>
+```
+