feat: add badge component (#1301)

* feat: add badge component * chore: add icon badge and placement * chore: add badge workaround for angular * chore: add badge vue showcase and snapshots * chore: update package-lock.json * chore: update from main * chore: update package-lock.json * chore: update DBBadge title for angular-showcase * refactor: let's prevent the disturbing whitespaces * Update packages/components/src/components/badge/model.ts Co-authored-by: Maximilian Franzke <[email protected]> * fix: issues from PR * Update packages/components/src/components/badge/model.ts Co-authored-by: Maximilian Franzke <[email protected]> * refactor: removed noText property from db-badge --------- Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
db-ui · Aug 10, 2023 · 265f4ce · 265f4ce
1 parent a4ce9fd
commit 265f4ce
Show file tree

Hide file tree

Showing 41 changed files with 1,030 additions and 104 deletions.
diff --git a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png
diff --git a/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png
diff --git a/__snapshots__/badge/component/mobile-safari/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/mobile-safari/DBBadge-should-match-screenshot.png
diff --git a/__snapshots__/badge/component/webkit/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/webkit/DBBadge-should-match-screenshot.png
diff --git a/..._/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png b/..._/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png
diff --git a/...ge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png b/...ge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png
diff --git a/...ge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png b/...ge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png
diff --git a/...s__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png b/...s__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/index.html b/packages/components/index.html
@@ -7,6 +7,10 @@
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<ul>
+<li>
+<a href="./src/components/badge/index.html">DBBadge</a>
+</li>
+
 			<li>
 				<a href="./src/components/alert/index.html">DBAlert</a>
 			</li>

diff --git a/packages/components/overrides/angular/src/components/badge/index.ts b/packages/components/overrides/angular/src/components/badge/index.ts
@@ -0,0 +1 @@
+export { DBBadge, DBBadgeModule } from './badge';
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
@@ -16,6 +16,10 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'badge'
+	},
+
 	{
 		name: 'navigation-item'
 	},

diff --git a/packages/components/src/components/badge/badge-web-component.scss b/packages/components/src/components/badge/badge-web-component.scss
@@ -0,0 +1 @@
+@forward "badge";
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
@@ -0,0 +1,41 @@
+import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import { DBBadgeState, DBBadgeProps } from './model';
+import { cls } from '../../utils';
+
+useMetadata({
+	isAttachedToShadowDom: true,
+	component: {
+		// MS Power Apps
+		includeIcon: false,
+		properties: []
+	}
+});
+
+export default function DBBadge(props: DBBadgeProps) {
+	// This is used as forwardRef
+	let component: any;
+	// jscpd:ignore-start
+	const state = useStore<DBBadgeState>({});
+
+	onMount(() => {
+		if (props.stylePath) {
+			state.stylePath = props.stylePath;
+		}
+	});
+	// jscpd:ignore-end
+
+	return (
+		<span
+			ref={component}
+			class={cls('db-badge', props.className)}
+			data-variant={props.variant}
+			data-size={props.size}
+			data-emphasis={props.emphasis}
+			data-placement={props.placement}>
+			<Show when={state.stylePath}>
+				<link rel="stylesheet" href={state.stylePath} />
+			</Show>
+			{props.children}
+		</span>
+	);
+}
diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss
@@ -0,0 +1,136 @@
+@use "sass:map";
+@use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as *;
+@use "@db-ui/foundations/build/scss/color-placeholder" as *;
+@use "@db-ui/foundations/build/scss/color/color-variants" as *;
+@use "@db-ui/foundations/build/scss/helpers/component" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
+@use "../../styles/button-components";
+
+@mixin get-tag-colors() {
+	@extend %db-bg-neutral-4;
+
+	&[data-emphasis="strong"] {
+		@extend %db-neutral-component;
+	}
+
+	@each $name, $colors in $component-variants {
+		&[data-variant="#{$name}"] {
+			@if ($name == "critical") {
+				@extend %db-bg-critical;
+
+				&[data-emphasis="strong"] {
+					@extend %db-critical-component;
+				}
+			} @else if ($name == "informational") {
+				@extend %db-bg-informational;
+
+				&[data-emphasis="strong"] {
+					@extend %db-informational-component;
+				}
+			} @else if ($name == "warning") {
+				@extend %db-bg-warning;
+
+				&[data-emphasis="strong"] {
+					@extend %db-warning-component;
+				}
+			} @else if ($name == "successful") {
+				@extend %db-bg-successful;
+
+				&[data-emphasis="strong"] {
+					@extend %db-successful-component;
+				}
+			}
+
+			&:not(&[data-emphasis="strong"]) {
+				--db-current-border-color: #{map.get($colors, "border")};
+			}
+		}
+	}
+}
+
+%absolute-badge {
+	position: absolute;
+
+	transform: translate(var(--badge-transform-x), var(--badge-transform-y));
+
+	&[data-placement$="right"] {
+		--badge-transform-x: 50%;
+		inset-inline-end: 0;
+	}
+
+	&[data-placement$="left"] {
+		--badge-transform-x: -50%;
+		inset-inline-start: 0;
+	}
+
+	&[data-placement*="top"] {
+		--badge-transform-y: -50%;
+		inset-block-start: 0;
+	}
+
+	&[data-placement*="center"] {
+		--badge-transform-y: -50%;
+		inset-block-start: 50%;
+	}
+
+	&[data-placement*="bottom"] {
+		--badge-transform-y: 50%;
+		inset-block-end: 0;
+	}
+}
+
+.db-badge {
+	--badge-size: #{$db-spacing-fixed-sm};
+	@extend %component-border;
+	@extend %db-overwrite-font-size-sm;
+	@extend %default-button;
+
+	@include get-tag-colors();
+
+	display: flex;
+	border-radius: 42px; // extreme radius
+	padding-inline: $db-spacing-fixed-xs;
+	block-size: fit-content;
+	inline-size: fit-content;
+
+	&:empty,
+	> span:empty {
+		block-size: var(--badge-size);
+		inline-size: var(--badge-size);
+		padding: 0;
+	}
+
+	&:has(.db-icon) {
+		padding: $db-spacing-fixed-2xs;
+	}
+
+	& > *,
+	.db-icon {
+		@extend %db-overwrite-font-size-sm;
+	}
+
+	&[data-size="small"] {
+		--badge-size: #{$db-spacing-fixed-xs};
+		@extend %db-overwrite-font-size-2xs;
+		padding-inline: $db-spacing-fixed-2xs;
+
+		&:empty,
+		> span:empty {
+			padding: 0;
+		}
+
+		&:has(.db-icon) {
+			padding: $db-spacing-fixed-3xs;
+		}
+
+		& > *,
+		.db-icon {
+			@extend %db-overwrite-font-size-2xs;
+		}
+	}
+
+	&[data-placement^="corner"] {
+		@extend %absolute-badge;
+	}
+}
diff --git a/packages/components/src/components/badge/badge.spec.tsx b/packages/components/src/components/badge/badge.spec.tsx
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+
+import { DBBadge } from './index';
+// @ts-ignore - vue can only find it with .ts as file ending
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
+
+const comp = <DBBadge>Test</DBBadge>;
+
+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('DBBadge', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+});
+
+test.describe('DBBadge', () => {
+	test('should not have any A11y issues', async ({ page, mount }) => {
+		await mount(comp);
+		const accessibilityScanResults = await new AxeBuilder({ page })
+			.include('.db-badge')
+			.analyze();
+
+		expect(accessibilityScanResults.violations).toEqual([]);
+	});
+});
diff --git a/packages/components/src/components/badge/docs/Angular.md b/packages/components/src/components/badge/docs/Angular.md
@@ -0,0 +1,24 @@
+## 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 { DBBadgeModule } from '@db-ui/ngx-components';
+
+@NgModule({
+  ...
+  imports: [..., DBBadgeModule],
+  ...
+})
+
+```
+
+### Use component
+
+```html app.component.html
+<!-- app.component.html -->
+<db-badge>Badge</db-badge>
+```
diff --git a/packages/components/src/components/badge/docs/HTML.md b/packages/components/src/components/badge/docs/HTML.md
@@ -0,0 +1,13 @@
+## HTML
+
+For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+
+### Use component
+
+```html index.html
+<!-- index.html -->
+...
+<body>
+	<span class="db-badge">Badge</span>
+</body>
+```
diff --git a/packages/components/src/components/badge/docs/React.md b/packages/components/src/components/badge/docs/React.md
@@ -0,0 +1,14 @@
+## 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 { DBBadge } from "@db-ui/react-components";
+
+const App = () => <DBBadge>Badge</DBBadge>;
+
+export default App;
+```
diff --git a/packages/components/src/components/badge/docs/Vue.md b/packages/components/src/components/badge/docs/Vue.md
@@ -0,0 +1,16 @@
+## 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
+<!-- App.vue -->
+<script>
+import { DBBadge } from "@db-ui/v-components";
+</script>
+
+<template>
+	<DBBadge>Badge</DBBadge>
+</template>
+```
diff --git a/packages/components/src/components/badge/index.html b/packages/components/src/components/badge/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>DBBadge</title>
+		<link rel="stylesheet" href="/styles/db-ui-42.css" />
+	</head>
+	<body style="padding: var(--db-spacing-fixed-md)">
+		<span class="db-badge">test </span>
+	</body>
+</html>
diff --git a/packages/components/src/components/badge/index.ts b/packages/components/src/components/badge/index.ts
@@ -0,0 +1 @@
+export { default as DBBadge } from './badge';
diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts
@@ -0,0 +1,31 @@
+import {
+	DefaultVariantProps,
+	EmphasisProps,
+	GlobalProps,
+	GlobalState,
+	SizeProps
+} from '../../shared/model';
+
+export interface DBBadgeDefaultProps {
+	/**
+	 * The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
+	 */
+	placement?:
+		| 'inline'
+		| 'corner-top-left'
+		| 'corner-top-right'
+		| 'corner-center-left'
+		| 'corner-center-right'
+		| 'corner-bottom-left'
+		| 'corner-bottom-right';
+}
+
+export type DBBadgeProps = DBBadgeDefaultProps &
+	GlobalProps &
+	DefaultVariantProps &
+	SizeProps &
+	EmphasisProps;
+
+export interface DBBadgeDefaultState {}
+
+export type DBBadgeState = DBBadgeDefaultState & GlobalState;
diff --git a/packages/components/src/components/infotext/model.ts b/packages/components/src/components/infotext/model.ts
@@ -3,20 +3,17 @@ import {
 	DefaultVariantType,
 	GlobalProps,
 	GlobalState,
-	IconProps
+	IconProps,
+	SizeProps
 } from '../../shared/model';
 
-export interface DBInfotextDefaultProps {
-	/**
-	 * The size attribute changes the font-size of the infotext and hides the icon for size="small".
-	 */
-	size?: 'medium' | 'small';
-}
+export interface DBInfotextDefaultProps {}
 
 export type DBInfotextProps = DBInfotextDefaultProps &
 	GlobalProps &
 	DefaultVariantProps &
-	IconProps;
+	IconProps &
+	SizeProps;
 
 export interface DBInfotextDefaultState {
 	getIcon: (icon?: string, variant?: DefaultVariantType) => string;

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -19,3 +19,4 @@ export * from './components/code-docs';
 export * from './components/select';
 export * from './components/tag';
 export * from './components/navigation-item';
+export * from './components/badge';
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,10 @@ @@
     	</head>
     	<body style="padding: var(--db-spacing-fixed-md)">
     		<ul>
+    <li>
+    <a href="./src/components/badge/index.html">DBBadge</a>
+    </li>
     			<li>
     				<a href="./src/components/alert/index.html">DBAlert</a>
     			</li>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { DBBadge, DBBadgeModule } from './badge';