Merge branch 'main' into fix-patternhub-next-previous

db-ui · Nov 19, 2024 · 94bef43 · 94bef43
2 parents 69d01e7 + 386de47
commit 94bef43
Show file tree

Hide file tree

Showing 47 changed files with 1,187 additions and 74 deletions.
diff --git a/__snapshots__/stack/component/chromium/DBStack-should-match-screenshot.png b/__snapshots__/stack/component/chromium/DBStack-should-match-screenshot.png
diff --git a/__snapshots__/stack/component/firefox/DBStack-should-match-screenshot.png b/__snapshots__/stack/component/firefox/DBStack-should-match-screenshot.png
diff --git a/__snapshots__/stack/component/mobile-chrome/DBStack-should-match-screenshot.png b/__snapshots__/stack/component/mobile-chrome/DBStack-should-match-screenshot.png
diff --git a/__snapshots__/stack/patternhub/stack-docs-should-match-screenshot.png b/__snapshots__/stack/patternhub/stack-docs-should-match-screenshot.png
diff --git a/__snapshots__/stack/patternhub/stack-overview-should-match-screenshot.png b/__snapshots__/stack/patternhub/stack-overview-should-match-screenshot.png
diff --git a/__snapshots__/stack/patternhub/stack-properties-should-match-screenshot.png b/__snapshots__/stack/patternhub/stack-properties-should-match-screenshot.png
diff --git a/...hContrast/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/...hContrast/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png
diff --git a/.../chromium/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/.../chromium/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png
diff --git a/...e/firefox/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/...e/firefox/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png
diff --git a/...le-chrome/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/...le-chrome/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png
diff --git a/...le-safari/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/...le-safari/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png
diff --git a/...se/webkit/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png b/...se/webkit/DBStack-should-match-screenshot-1/DBStack-should-match-screenshot.png
diff --git a/packages/components/index.html b/packages/components/index.html
@@ -8,6 +8,10 @@
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<ul>
+			<li>
+				<a href="./src/components/stack/index.html">DBStack</a>
+			</li>
+
 			<li>
 				<a href="./src/components/switch/index.html">DBSwitch</a>
 			</li>

diff --git a/packages/components/scripts/post-build/components.ts b/packages/components/scripts/post-build/components.ts
@@ -29,6 +29,9 @@ export type Component = {
 };
 
 export const getComponents = (): Component[] => [
+	{
+		name: 'stack'
+	},
 	{
 		name: 'switch',
 		overwrites: {

diff --git a/packages/components/src/components/stack/docs/Angular.md b/packages/components/src/components/stack/docs/Angular.md
@@ -0,0 +1,28 @@
+## 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.component.ts
+// app.component.ts
+import { DBStack } from '@db-ui/ngx-components';
+
+@Component({
+  // ...
+	standalone: true,
+  imports: [..., DBStack],
+  // ...
+})
+```
+
+### Use component
+
+```html app.component.html
+<!-- app.component.html -->
+<db-stack>
+	<span>Test 1</span>
+	<span>Test 2</span>
+	<span>Test 3</span>
+</db-stack>
+```
diff --git a/packages/components/src/components/stack/docs/HTML.md b/packages/components/src/components/stack/docs/HTML.md
@@ -0,0 +1,17 @@
+## 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-stack">
+		<span>Test 1</span>
+		<span>Test 2</span>
+		<span>Test 3</span>
+	</div>
+</body>
+```
diff --git a/packages/components/src/components/stack/docs/Migration.md b/packages/components/src/components/stack/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/stack/docs/React.md b/packages/components/src/components/stack/docs/React.md
@@ -0,0 +1,20 @@
+## React
+
+For general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
+
+### Use component
+
+```tsx App.tsx
+// App.tsx
+import { DBStack } from "@db-ui/react-components";
+
+const App = () => (
+	<DBStack>
+		<span>Test 1</span>
+		<span>Test 2</span>
+		<span>Test 3</span>
+	</DBStack>
+);
+
+export default App;
+```
diff --git a/packages/components/src/components/stack/docs/Vue.md b/packages/components/src/components/stack/docs/Vue.md
@@ -0,0 +1,20 @@
+## Vue
+
+For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
+
+### Use component
+
+```vue App.vue
+<!-- App.vue -->
+<script>
+import { DBStack } from "@db-ui/v-components";
+</script>
+
+<template>
+	<DBStack>
+		<span>Test 1</span>
+		<span>Test 2</span>
+		<span>Test 3</span>
+	</DBStack>
+</template>
+```
diff --git a/packages/components/src/components/stack/index.html b/packages/components/src/components/stack/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>DBStack</title>
+		<link rel="stylesheet" href="/styles/db-ui-42.css" />
+	</head>
+	<body style="padding: var(--db-spacing-fixed-md)">
+		<div class="db-stack">Test</div>
+	</body>
+</html>
diff --git a/packages/components/src/components/stack/index.ts b/packages/components/src/components/stack/index.ts
@@ -0,0 +1 @@
+export { default as DBStack } from './stack';
diff --git a/packages/components/src/components/stack/model.ts b/packages/components/src/components/stack/model.ts
@@ -0,0 +1,52 @@
+import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
+
+export const StackVariantList = ['simple', 'divider'] as const;
+export type StackVariantType = (typeof StackVariantList)[number];
+
+export const StackDirectionList = ['row', 'column'] as const;
+export type StackDirectionType = (typeof StackDirectionList)[number];
+
+export const StackAlignmentList = [
+	'stretch',
+	'start',
+	'end',
+	'center'
+] as const;
+export type StackAlignmentType = (typeof StackAlignmentList)[number];
+
+export const StackJustifyContentList = [
+	'space-between',
+	'start',
+	'end',
+	'center'
+] as const;
+export type StackJustifyContentType = (typeof StackJustifyContentList)[number];
+
+export type DBStackDefaultProps = {
+	/**
+	 * Change variant of stack. To use variant="divider" add a DBDivider after each element
+	 */
+	variant?: StackVariantType;
+	/**
+	 * Set the direction of the stack. Defaults to "column"
+	 */
+	direction?: StackDirectionType;
+	/**
+	 * If the stack should wrap if parent is too small otherwise you get an overflow
+	 */
+	wrap?: boolean;
+	/**
+	 * Represents css align-items
+	 */
+	alignment?: StackAlignmentType;
+	/**
+	 * Represents css justify-content
+	 */
+	justifyContent?: StackJustifyContentType;
+};
+
+export type DBStackProps = DBStackDefaultProps & GlobalProps & GapSpacingProps;
+
+export type DBStackDefaultState = {};
+
+export type DBStackState = DBStackDefaultState & GlobalState;
diff --git a/packages/components/src/components/stack/stack-web-component.scss b/packages/components/src/components/stack/stack-web-component.scss
@@ -0,0 +1 @@
+@forward "stack";
diff --git a/packages/components/src/components/stack/stack.lite.tsx b/packages/components/src/components/stack/stack.lite.tsx
@@ -0,0 +1,28 @@
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBStackState, DBStackProps } from './model';
+import { cls, getBooleanAsString } from '../../utils';
+
+useMetadata({});
+
+export default function DBStack(props: DBStackProps) {
+	// This is used as forwardRef
+	const ref = useRef<HTMLDivElement>(null);
+	// jscpd:ignore-start
+	const state = useStore<DBStackState>({});
+	// jscpd:ignore-end
+
+	return (
+		<div
+			ref={ref}
+			id={props.id}
+			class={cls('db-stack', props.className)}
+			data-gap={props.gap}
+			data-variant={props.variant}
+			data-direction={props.direction}
+			data-alignment={props.alignment}
+			data-justify-content={props.justifyContent}
+			data-wrap={getBooleanAsString(props.wrap)}>
+			{props.children}
+		</div>
+	);
+}
diff --git a/packages/components/src/components/stack/stack.scss b/packages/components/src/components/stack/stack.scss
@@ -0,0 +1,5 @@
+@use "../../styles/stack-components";
+
+.db-stack {
+	@extend %default-stack;
+}
diff --git a/packages/components/src/components/stack/stack.spec.tsx b/packages/components/src/components/stack/stack.spec.tsx
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+
+import { DBStack } from './index';
+// @ts-ignore - vue can only find it with .ts as file ending
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
+
+const comp: any = (
+	<DBStack>
+		<span>Test</span>
+		<span>Test 2</span>
+		<span>Test 3</span>
+	</DBStack>
+);
+
+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();
+	});
+};
+
+const testA11y = () => {
+	test('should not have any A11y issues', async ({ page, mount }) => {
+		await mount(comp);
+		const accessibilityScanResults = await new AxeBuilder({ page })
+			.include('.db-stack')
+			.analyze();
+
+		expect(accessibilityScanResults.violations).toEqual([]);
+	});
+};
+
+test.describe('DBStack', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+	testA11y();
+});
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -35,3 +35,4 @@ export * from './shared/icon-types';
 export * from './shared/model';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from './components/stack';
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -121,6 +121,26 @@ export type GapProps = {
 	gap?: boolean;
 };
 
+export const GapSpacingList = [
+	'none',
+	'3x-large',
+	'2x-large',
+	'x-large',
+	'large',
+	'medium',
+	'small',
+	'x-small',
+	'2x-small',
+	'3x-small'
+] as const;
+export type GapSpacingType = (typeof GapSpacingList)[number];
+export type GapSpacingProps = {
+	/**
+	 * Set the gap/spacing between elements
+	 */
+	gap?: GapSpacingType;
+};
+
 export type OverflowProps = {
 	/**
 	 * The overflow attribute sets a max-width and longer text will be dotted.

diff --git a/packages/components/src/styles/_custom-elements.scss b/packages/components/src/styles/_custom-elements.scss
@@ -0,0 +1,7 @@
+$custom-elements: // angular-workaround
+	db-stack, db-switch, db-tab-panel, db-tabs, db-tab-list, db-tab-item,
+	db-tab-bar, db-tooltip, db-popover, db-textarea, db-navigation,
+	db-accordion-item, db-accordion, db-badge, db-navigation-item, db-tag,
+	db-radio, db-select, db-notification, db-codedocs, db-brand, db-button,
+	db-card, db-checkbox, db-divider, db-drawer, db-header, db-icon, db-infotext,
+	db-input, db-link, db-page, db-section, db-tab, db-tabbar;
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,10 @@ @@
     	</head>
     	<body style="padding: var(--db-spacing-fixed-md)">
     		<ul>
+    			<li>
+    				<a href="./src/components/stack/index.html">DBStack</a>
+    			</li>
     			<li>
     				<a href="./src/components/switch/index.html">DBSwitch</a>
     			</li>
@@ Expand Down @@