refactor: component properties for alpha components

packages/components/src/components/accordion/model.ts

@@ -1,7 +1,7 @@
 import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
 import { DBAccordionItemDefaultProps } from '../accordion-item/model';
 
-export const AccordionVariantList = ['default', 'card'] as const;
+export const AccordionVariantList = ['divider', 'card'] as const;
 export type AccordionVariantType = (typeof AccordionVariantList)[number];
 
 export const AccordionBehaviourList = ['multiple', 'single'] as const;
@@ -34,7 +34,7 @@ export type DBAccordionDefaultProps = {
 
 	/**
 	 * Defines the display of the accordion and the items:
-	 * "default": with a dividing line between the items
+	 * "divider": with a dividing line between the items
 	 * "card": w/o dividing line, but items are shown in the card variant
 	 */
 	variant?: AccordionVariantType;

packages/components/src/components/card/model.ts

@@ -6,7 +6,7 @@ import {
 	SpacingProps
 } from '../../shared/model';
 
-export const CardBehaviourList = ['default', 'interactive'] as const;
+export const CardBehaviourList = ['static', 'interactive'] as const;
 export type CardBehaviourType = (typeof CardBehaviourList)[number];
 
 export const CardElevationLevelList = ['1', '2', '3'] as const;

packages/components/src/components/header/header.scss

@@ -18,6 +18,11 @@
 		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
 	}
 
+	&[data-width="small"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-sm;
+	}
+
 	&[data-width="medium"] {
 		margin-inline: auto;
 		max-inline-size: screen-sizes.$db-breakpoint-md;

packages/components/src/components/popover/popover.lite.tsx

@@ -97,7 +97,7 @@ export default function DBPopover(props: DBPopoverProps) {
 				class="db-popover-content"
 				data-spacing={props.spacing}
 				data-gap={getBooleanAsString(props.gap)}
-				data-animation={props.animation}
+				data-animation={getBooleanAsString(props.animation ?? true)}
 				data-open={props.open}
 				data-delay={props.delay}
 				data-width={props.width}

packages/components/src/components/section/section.scss

@@ -10,6 +10,16 @@ $default-section-padding-inline: variables.$db-spacing-fixed-md;
 		padding-inline: $default-section-padding-inline;
 	}
 
+	&[data-width="small"] {
+		padding-inline: max(
+			calc(
+				#{$default-section-padding-inline} +
+					(100vw - #{screen-sizes.$db-breakpoint-sm}) / 2
+			),
+			#{$default-section-padding-inline}
+		);
+	}
+
 	&[data-width="medium"] {
 		padding-inline: max(
 			calc(

packages/components/src/components/tooltip/model.ts

@@ -9,11 +9,8 @@ import {
 	PopoverState
 } from '../../shared/model';
 
-export const TooltipVariantList = ['with arrow', 'basic'] as const;
-export type TooltipVariantType = (typeof TooltipVariantList)[number];
-
 export type DBTooltipDefaultProps = {
-	variant?: TooltipVariantType;
+	showArrow?: boolean;
 };
 
 export type DBTooltipProps = DBTooltipDefaultProps &

packages/components/src/components/tooltip/tooltip.lite.tsx

@@ -6,7 +6,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBTooltipProps, DBTooltipState } from './model';
-import { cls, handleDataOutside, uuid } from '../../utils';
+import { cls, getBooleanAsString, handleDataOutside, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -65,10 +65,10 @@ export default function DBTooltip(props: DBTooltipProps) {
 			class={cls('db-tooltip', props.className)}
 			id={state._id}
 			data-emphasis={props.emphasis}
-			data-animation={props.animation}
+			data-animation={getBooleanAsString(props.animation ?? true)}
 			data-delay={props.delay}
 			data-width={props.width}
-			data-variant={props.variant}
+			data-show-arrow={getBooleanAsString(props.showArrow ?? true)}
 			data-placement={props.placement}
 			// TODO: clarify this attribute and we need to set it statically
 			data-gap="true"

packages/components/src/components/tooltip/tooltip.scss

@@ -35,7 +35,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 	}
 
 	// Arrow
-	&:not([data-variant="basic"]) {
+	&[data-show-arrow="true"] {
 		&::after {
 			@extend %component-border;
 

packages/components/src/shared/model.ts

@@ -174,7 +174,7 @@ export type WidthProps = {
 	width?: WidthType;
 };
 
-export const MaxWidthList = ['full', 'medium', 'large'] as const;
+export const MaxWidthList = ['full', 'medium', 'large', 'small'] as const;
 export type MaxWidthType = (typeof MaxWidthList)[number];
 
 export type ContainerWidthProps = {
@@ -186,8 +186,6 @@ export type ContainerWidthProps = {
 
 export const PopoverDelayList = ['none', 'slow', 'fast'] as const;
 export type PopoverDelayType = (typeof PopoverDelayList)[number];
-export const PopoverAnimationList = ['enabled', 'disabled'] as const;
-export type PopoverAnimationType = (typeof PopoverAnimationList)[number];
 export const PopoverWidthList = ['auto', 'fixed'] as const;
 export type PopoverWidthType = (typeof PopoverWidthList)[number];
 export type PopoverProps = {
@@ -198,7 +196,7 @@ export type PopoverProps = {
 	/**
 	 * Disable animation
 	 */
-	animation?: PopoverAnimationType;
+	animation?: boolean;
 	/**
 	 * Use fixed with for default max-width
 	 */

packages/components/src/styles/internal/_popover-component.scss

@@ -132,7 +132,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 }
 
 @mixin get-popover-show() {
-	&[data-animation="disabled"] {
+	&[data-animation="false"] {
 		opacity: 1;
 		transform: translate(
 			var(--db-popover-center-x, 0),
@@ -141,7 +141,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	}
 
 	@media screen and (prefers-reduced-motion: no-preference) {
-		&:not([data-animation="disabled"]) {
+		&[data-animation="true"] {
 			animation: popover-animation
 				#{variables.$db-transition-straight-emotional} normal both;
 

showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html

@@ -13,6 +13,7 @@
 		<ul>
 			<db-navigation-item
 				[icon]="exampleProps?.icon"
+				[showIcon]="exampleProps?.showIcon"
 				[width]="exampleProps?.width"
 				[disabled]="exampleProps?.disabled"
 				[active]="exampleProps?.active"

showcases/react-showcase/src/components/navigation-item/index.tsx

@@ -11,7 +11,8 @@ const getNavigationItem = ({
 	disabled,
 	active,
 	width,
-	areaPopup
+	areaPopup,
+	showIcon
 }: DBNavigationItemProps & { areaPopup: boolean }) => (
 	<ul>
 		<DBNavigationItem
@@ -23,6 +24,7 @@ const getNavigationItem = ({
 				// eslint-disable-next-line no-alert
 				alert(children.toString());
 			}}
+			showIcon={showIcon}
 			subNavigation={
 				areaPopup && (
 					<ul>

showcases/react-showcase/src/components/tooltip/index.tsx

@@ -13,7 +13,7 @@ const getTooltip = ({
 	delay,
 	content,
 	animation,
-	variant
+	showArrow
 }: DBTooltipProps & { content: string }) => (
 	<DBButton>
 		{children}
@@ -23,7 +23,7 @@ const getTooltip = ({
 			placement={placement}
 			animation={animation}
 			delay={delay}
-			variant={variant}>
+			showArrow={showArrow}>
 			{content}
 		</DBTooltip>
 	</DBButton>

showcases/shared/accordion-item.json

@@ -26,36 +26,38 @@
 		]
 	},
 	{
-		"name": "Interaction States",
+		"name": "Disabled",
 		"examples": [
 			{
-				"name": "Enabled (Default)/Hover/Pressed",
+				"name": "(Default) False",
 				"props": {
-					"headlinePlain": "Enabled (Default)/Hover/Pressed"
+					"headlinePlain": "(Default) False",
+					"disabled": false
 				}
 			},
 			{
-				"name": "Disabled",
+				"name": "True",
 				"props": {
-					"headlinePlain": "Disabled",
+					"headlinePlain": "True",
 					"disabled": true
 				}
 			}
 		]
 	},
 	{
-		"name": "Content States",
+		"name": "Open",
 		"examples": [
 			{
-				"name": "(Default) Collapsed",
+				"name": "(Default) False",
 				"props": {
-					"headlinePlain": "(Default) Collapsed"
+					"headlinePlain": "(Default) False",
+					"open": false
 				}
 			},
 			{
-				"name": "Open",
+				"name": "True",
 				"props": {
-					"headlinePlain": "Open",
+					"headlinePlain": "True",
 					"open": true
 				}
 			}

showcases/shared/accordion.json

@@ -70,10 +70,13 @@
 		],
 		"examples": [
 			{
-				"name": "background (default)"
+				"name": "(Default) Divider",
+				"props": {
+					"variant": "divider"
+				}
 			},
 			{
-				"name": "card",
+				"name": "Card",
 				"props": {
 					"variant": "card"
 				}

showcases/shared/card.json

@@ -23,19 +23,19 @@
 		"name": "Elevation Level",
 		"examples": [
 			{
-				"name": "(Default) Level 1 - Adaptive",
+				"name": "(Default) Level 1",
 				"props": {
 					"elevationLevel": "1"
 				}
 			},
 			{
-				"name": "Level 2 - Adaptive",
+				"name": "Level 2",
 				"props": {
 					"elevationLevel": "2"
 				}
 			},
 			{
-				"name": "Level 3 - Adaptive",
+				"name": "Level 3",
 				"props": {
 					"elevationLevel": "3"
 				}
@@ -75,7 +75,10 @@
 		"name": "Behaviour",
 		"examples": [
 			{
-				"name": "(Default) Non interactive"
+				"name": "(Default) Static",
+				"props": {
+					"behaviour": "static"
+				}
 			},
 			{
 				"name": "Interactive",