db-ux-design-system · nmerget · Aug 24, 2023 · Jul 26, 2023 · Jul 26, 2023 · Jul 28, 2023
diff --git a/..._/accordion-item/component/chromium/DBAccordionItem-should-match-screenshot.png b/..._/accordion-item/component/chromium/DBAccordionItem-should-match-screenshot.png
diff --git a/...ordion-item/component/mobile-chrome/DBAccordionItem-should-match-screenshot.png b/...ordion-item/component/mobile-chrome/DBAccordionItem-should-match-screenshot.png
diff --git a/...ordion-item/component/mobile-safari/DBAccordionItem-should-match-screenshot.png b/...ordion-item/component/mobile-safari/DBAccordionItem-should-match-screenshot.png
diff --git a/...s__/accordion-item/component/webkit/DBAccordionItem-should-match-screenshot.png b/...s__/accordion-item/component/webkit/DBAccordionItem-should-match-screenshot.png
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/...wcase/mobile-chrome/regular/neutral/DBAccordionItem-should-match-screenshot.png b/...wcase/mobile-chrome/regular/neutral/DBAccordionItem-should-match-screenshot.png
diff --git a/...wcase/mobile-safari/regular/neutral/DBAccordionItem-should-match-screenshot.png b/...wcase/mobile-safari/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/__snapshots__/accordion/component/chromium/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/component/chromium/DBAccordion-should-match-screenshot.png
diff --git a/...ots__/accordion/component/mobile-chrome/DBAccordion-should-match-screenshot.png b/...ots__/accordion/component/mobile-chrome/DBAccordion-should-match-screenshot.png
diff --git a/...ots__/accordion/component/mobile-safari/DBAccordion-should-match-screenshot.png b/...ots__/accordion/component/mobile-safari/DBAccordion-should-match-screenshot.png
diff --git a/__snapshots__/accordion/component/webkit/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/component/webkit/DBAccordion-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/.../showcase/mobile-chrome/regular/neutral/DBAccordion-should-match-screenshot.png b/.../showcase/mobile-chrome/regular/neutral/DBAccordion-should-match-screenshot.png
diff --git a/.../showcase/mobile-safari/regular/neutral/DBAccordion-should-match-screenshot.png b/.../showcase/mobile-safari/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/build-power-apps/DBUI/DBUI.cdsproj b/build-power-apps/DBUI/DBUI.cdsproj
@@ -44,6 +44,10 @@
   </ItemGroup>
 
   <ItemGroup>
+<!-- <ProjectReference Include="..\accordion-item\DBAccordionItem.pcfproj" />
+
+<ProjectReference Include="..\accordion\DBAccordion.pcfproj" /> -->
+
     <ProjectReference Include="..\button\DBButton.pcfproj" />
     <ProjectReference Include="..\icon\DBIcon.pcfproj" />
     <ProjectReference Include="..\input\DBInput.pcfproj" />

diff --git a/packages/components/index.html b/packages/components/index.html
@@ -7,9 +7,16 @@
 	</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/accordion-item/index.html">DBAccordionItem</a>
+</li>
+
+<li>
+<a href="./src/components/accordion/index.html">DBAccordion</a>
+      </li>
+      <li>
+<a href="./src/components/badge/index.html">DBBadge</a>
+</li>
 
 			<li>
 				<a href="./src/fonts.html">Fonts</a>

diff --git a/packages/components/overrides/angular/src/components/accordion-item/index.ts b/packages/components/overrides/angular/src/components/accordion-item/index.ts
@@ -0,0 +1 @@
+export { DBAccordionItem, DBAccordionItemModule } from './accordion-item';
diff --git a/packages/components/overrides/angular/src/components/accordion/index.ts b/packages/components/overrides/angular/src/components/accordion/index.ts
@@ -0,0 +1 @@
+export { DBAccordion, DBAccordionModule } from './accordion';
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
@@ -20,6 +20,25 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'accordion-item'
+	},
+
+	{
+		name: 'accordion',
+		overwrites: {
+			angular: [
+				{ from: 'openItems = []', to: 'openItems: string[] = []' }
+			],
+			react: [
+				{
+					from: 'const ref = useRef<HTMLDivElement>(null);',
+					to: 'const ref = useRef<HTMLDivElement>(component);'
+				}
+			]
+		}
+	},
+
 	{
 		name: 'badge'
 	},

diff --git a/packages/components/scripts/post-build/vue.js b/packages/components/scripts/post-build/vue.js
@@ -96,7 +96,7 @@ module.exports = (tmp) => {
 			runReplacements(
 				[
 					{
-						from: 'immediate: true,',
+						from: /immediate: true,/g,
 						to: 'immediate: true,\nflush: "post"'
 					}
 				],

diff --git a/packages/components/src/components/accordion-item/accordion-item-web-component.scss b/packages/components/src/components/accordion-item/accordion-item-web-component.scss
@@ -0,0 +1 @@
+@forward "accordion-item";
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -0,0 +1,67 @@
+import {
+	onMount,
+	onUpdate,
+	Show,
+	Slot,
+	useMetadata,
+	useStore
+} from '@builder.io/mitosis';
+import { DBAccordionItemState, DBAccordionItemProps } from './model';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
+
+useMetadata({
+	isAttachedToShadowDom: true,
+	component: {
+		// MS Power Apps
+		includeIcon: false,
+		properties: []
+	}
+});
+
+export default function DBAccordionItem(props: DBAccordionItemProps) {
+	// This is used as forwardRef
+	let component: any;
+	// jscpd:ignore-start
+	const state = useStore<DBAccordionItemState>({
+		_id: DEFAULT_ID,
+		toggle: (event: any) => {
+			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
+			event?.preventDefault();
+			if (props.onToggle) {
+				props.onToggle(!props.open);
+			}
+		}
+	});
+
+	onMount(() => {
+		state._id = props.id || 'accordion-item-' + uuid();
+		if (props.stylePath) {
+			state.stylePath = props.stylePath;
+		}
+	});
+	// jscpd:ignore-end
+
+	return (
+		<details
+			ref={component}
+			id={state._id}
+			class={cls('db-accordion-item', props.className)}
+			aria-disabled={props.disabled}
+			open={props.open}>
+			<Show when={state.stylePath}>
+				<link rel="stylesheet" href={state.stylePath} />
+			</Show>
+			<summary onClick={(event) => state.toggle(event)}>
+				<Show when={props.title}>{props.title}</Show>
+				<Show when={!props.title}>
+					<Slot name="title" />
+				</Show>
+			</summary>
+			<div>
+				<Show when={props.content}>{props.content}</Show>
+				<Show when={!props.content}>{props.children}</Show>
+			</div>
+		</details>
+	);
+}
diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -0,0 +1,71 @@
+@use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as var;
+@use "@db-ui/foundations/build/scss/helpers/functions" as functions;
+@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;
+@use "@db-ui/foundations/build/scss/helpers/component" as component;
+@use "@db-ui/foundations/build/scss/color/color-variants" as col-var;
+@use "@db-ui/foundations/build/scss/animation/animations" as animations;
+@use "../../styles/form-components" as form;
+
+@mixin accordion-item-content() {
+	:not(summary):not(link) {
+		@content;
+	}
+}
+
+.db-accordion-item {
+	@extend %bg-transparent;
+	@include functions.divider($position: "top");
+
+	position: relative;
+	inline-size: 100%;
+
+	@include accordion-item-content() {
+		padding: var.$db-spacing-fixed-md;
+		padding-block-end: var.$db-spacing-fixed-lg;
+	}
+
+	&:last-of-type {
+		@include functions.divider($position: "bottom", $slot: "after");
+	}
+
+	&[aria-disabled="true"] {
+		pointer-events: none;
+		opacity: component.$default-opacity;
+	}
+
+	summary {
+		@extend %dropdown-icon;
+		@include col-var.bg-transparent-interactive(false);
+
+		list-style: none;
+		display: flex;
+		justify-content: space-between;
+		padding: var.$db-spacing-fixed-md;
+		gap: var.$db-spacing-fixed-md;
+
+		&::-webkit-details-marker {
+			display: none;
+		}
+
+		&::after {
+			inset-inline-end: var.$db-spacing-fixed-sm;
+		}
+
+		&:focus-visible {
+			// TODO: Evaluate whether this number is intended
+			border-radius: component.$default-border-radius + 2;
+		}
+	}
+
+	&[open] {
+		@include accordion-item-content() {
+			animation: accordion-open $db-transition-emotional-straight normal
+				both;
+		}
+
+		summary::after {
+			transform: form.$dropdown-icon-transform;
+		}
+	}
+}
diff --git a/packages/components/src/components/accordion-item/accordion-item.spec.tsx b/packages/components/src/components/accordion-item/accordion-item.spec.tsx
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+
+import { DBAccordionItem } from './index';
+// @ts-ignore - vue can only find it with .ts as file ending
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
+
+const comp = <DBAccordionItem title="Test">Test</DBAccordionItem>;
+
+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('DBAccordionItem', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+});
+
+test.describe('DBAccordionItem', () => {
+	test('should not have any A11y issues', async ({ page, mount }) => {
+		await mount(comp);
+		const accessibilityScanResults = await new AxeBuilder({ page })
+			.include('.db-accordion-item')
+			.analyze();
+
+		expect(accessibilityScanResults.violations).toEqual([]);
+	});
+});
diff --git a/packages/components/src/components/accordion-item/docs/Angular.md b/packages/components/src/components/accordion-item/docs/Angular.md
@@ -0,0 +1,36 @@
+## 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 { DBAccordionItemModule } from '@db-ui/ngx-components';
+
+@NgModule({
+  ...
+  imports: [..., DBAccordionItemModule],
+  ...
+})
+
+```
+
+### Use component
+
+#### With Slots
+
+```html app.component.html
+<!-- app.component.html -->
+<db-accordion-item>
+	<ng-container *title>Title</ng-container>
+	Content
+</db-accordion-item>
+```
+
+#### With attributes
+
+```html app.component.html
+<!-- app.component.html -->
+<db-accordion-item title="Title" content="Content"></db-accordion-item>
+```
diff --git a/packages/components/src/components/accordion-item/docs/HTML.md b/packages/components/src/components/accordion-item/docs/HTML.md
@@ -0,0 +1,16 @@
+## 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>
+	<details id="my_id" class="db-accordion-item">
+		<summary>Title</summary>
+		<div>Content</div>
+	</details>
+</body>
+```
diff --git a/packages/components/src/components/accordion-item/docs/Migration.md b/packages/components/src/components/accordion-item/docs/Migration.md
@@ -0,0 +1,23 @@
+## 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
+
+### class
+
+| Before          | Status | After               | Description                                                                                                                      |
+| --------------- | :----: | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `cmp-accordion` |   🔁   | `db-accordion-item` | The old accordion was just 1 item, we split it to combine multiple accordion-items into 1 accordion (which is another component) |
+
+### props
+
+| Before     | Status | After       | Description                                                 |
+| ---------- | :----: | ----------- | ----------------------------------------------------------- |
+| `summary`  |   🔁   | `title`     | The title/summary of the details element.                   |
+| `emphasis` |   ❌   | ❌          | There is no emphasis anymore.                               |
+| `size`     |   ❌   | ❌          | Controlled by the tonality.                                 |
+|            |   🆕   | `disabled`  | Disable the component.                                      |
+|            |   🆕   | `content`   | Pass in a simple string as fallback to normal children/slot |
+|            |   🆕   | `slotTitle` | Pass in a custom title (only required for React)            |
diff --git a/packages/components/src/components/accordion-item/docs/React.md b/packages/components/src/components/accordion-item/docs/React.md
@@ -0,0 +1,25 @@
+## React
+
+For general installation and configuration look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
+
+### Use component
+
+#### With Slots
+
+```tsx App.tsx
+// App.tsx
+import { DBAccordionItem } from "@db-ui/react-components";
+
+const App = () => <DBAccordionItem slotTitle="Title">Content</DBAccordionItem>;
+export default App;
+```
+
+#### With attributes
+
+```tsx App.tsx
+// App.tsx
+import { DBAccordionItem } from "@db-ui/react-components";
+
+const App = () => <DBAccordionItem title="Title" content="Content" />;
+export default App;
+```
diff --git a/packages/components/src/components/accordion-item/docs/Vue.md b/packages/components/src/components/accordion-item/docs/Vue.md
@@ -0,0 +1,34 @@
+## Vue
+
+For general installation and configuration look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
+
+### Use component
+
+#### With Slots
+
+```vue App.vue
+<!-- App.vue -->
+<script>
+import { DBAccordionItem } from "@db-ui/v-components";
+</script>
+
+<template>
+	<DBAccordionItem>
+		<template v-slot:title>Title</template>
+		Content
+	</DBAccordionItem>
+</template>
+```
+
+#### With attributes
+
+```vue App.vue
+<!-- App.vue -->
+<script>
+import { DBAccordionItem } from "@db-ui/v-components";
+</script>
+
+<template>
+	<DBAccordionItem title="Title" content="Content"></DBAccordionItem>
+</template>
+```
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { DBAccordionItem, DBAccordionItemModule } from './accordion-item';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { DBAccordion, DBAccordionModule } from './accordion';