feat: update components to affect tonality changes

packages/components/_templates/mitosis/new/tsx.ejs.t

@@ -23,7 +23,7 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
   });
 
   return (
-    <div class={'db-<%= name %>' + (props.className || '')}>
+    <div class={'db-<%= name %>' + (props.className ? ' ' + props.className : '')}>
       <Show when={state.stylePath}>
         <link rel="stylesheet" href={state.stylePath} />
       </Show>

packages/components/src/components/button/button.lite.tsx

@@ -42,17 +42,24 @@ export default function DBButton(props: DBButtonProps) {
 
 	return (
 		<button
-			class={'db-button' + (props.className || '')}
+			class={
+				'db-button' +
+				(props.className ? ' ' + props.className : '') +
+				(props.onlyIcon ? ' is-icon-text-replace' : '')
+			}
+			data-size={props.size}
+			data-state={props.state}
+			data-width={props.width}
 			data-variant={props.variant}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
-			<Show when={props.icon}>
-				<DBIcon icon={props.icon} />
-			</Show>
-			{/* we need spacings around props.text for compilation */}
-			<Show when={props.text}> {props.text} </Show>
-			{props.children}
+
+			<DBIcon icon={props.icon} withText={!props.onlyIcon}>
+				{/* we need spacings around props.text for compilation */}
+				<Show when={props.text}> {props.text} </Show>
+				{props.children}
+			</DBIcon>
 		</button>
 	);
 }

packages/components/src/components/button/model.ts

@@ -3,7 +3,11 @@ import { GlobalProps, GlobalState } from '../../shared/model';
 export type DBButtonDefaultProps = {
 	text?: string;
 	icon?: string;
-	variant?: string;
+	onlyIcon?: boolean;
+	state?: 'loading';
+	size?: 'small';
+	width?: 'full';
+	variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
 };
 
 export type DBButtonProps = DBButtonDefaultProps & GlobalProps;

packages/components/src/components/card/card.lite.tsx

@@ -16,7 +16,11 @@ useMetadata({
 						name: 'Interactive',
 						value: 'ia'
 					},
-					{ key: 'Full Width', name: 'Full Width', value: 'full-width' }
+					{
+						key: 'Full Width',
+						name: 'Full Width',
+						value: 'full-width'
+					}
 				]
 			}
 		]
@@ -34,12 +38,22 @@ export default function DBCard(props: DBCardProps) {
 
 	return (
 		<div
-			class={'db-card' + (props.className || '')}
+			class={'db-card' + (props.className ? ' ' + props.className : '')}
 			data-variant={props.variant}
-			data-color-variant={props.colorVariant}>
+			data-color-variant={props.colorVariant}
+			data-direction={props.direction}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
+			<Show when={props.imgSrc}>
+				<img
+					class="db-card-image"
+					src={props.imgSrc}
+					alt={props.imgAlt}
+					height={props.imgHeight}
+					width={props.imgWidth}
+				/>
+			</Show>
 			{props.children}
 		</div>
 	);

packages/components/src/components/card/card.scss

@@ -15,7 +15,24 @@
 
 	border-radius: 8px;
 	box-shadow: $db-elevation-4;
-	padding: $db-spacing-fixed-md;
+	display: flex;
+	flex-direction: column;
+
+	& > .db-card-image {
+		width: 100%;
+	}
+
+	&[data-direction="row"] {
+		@media only screen and (min-width: #{$db-screens-md}) {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: $db-spacing-fixed-md;
+
+			& > .db-card-image {
+				height: 100%;
+			}
+		}
+	}
 
 	& > a {
 		text-decoration: none;
@@ -36,51 +53,4 @@
 			box-shadow: $db-elevation-2;
 		}
 	}
-
-	// Cards contents are probably deprecated
-	// TODO: probably remove after discussions and/or move to demonstration styles for the homepage
-	figure {
-		margin: $db-spacing-fixed-md $db-spacing-fixed-md $db-spacing-fixed-md
-			$db-spacing-fixed-xs;
-	}
-	// Banner variant
-	&[data-variant="banner"] {
-		figure {
-			display: flex;
-		}
-
-		figcaption {
-			margin-left: 1rem;
-
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				font-size: to-rem($pxValue: 18);
-
-				&,
-				& ~ p {
-					margin: 0.125rem 0;
-				}
-			}
-
-			p {
-				font-size: to-rem($pxValue: 14);
-
-				max-width: to-rem(
-					$pxValue: 290
-				); // TODO: This would need some rework
-			}
-		}
-	}
-	// Tile variant
-	&[data-variant="tile"] {
-		text-align: center;
-	}
-
-	figcaption {
-		max-width: 60ch;
-	}
 }

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

@@ -2,6 +2,11 @@ import { GlobalProps, GlobalState } from '../../shared/model';
 
 export type DBCardDefaultProps = {
 	colorVariant?: string;
+	direction?: 'row' | 'column';
+	imgAlt?: string;
+	imgSrc?: string;
+	imgHeight?: number | string;
+	imgWidth?: number | string;
 	variant?: 'full-width' | 'ia';
 };
 

packages/components/src/components/divider/divider.lite.tsx

@@ -44,7 +44,9 @@ export default function DBDivider(props: DBDividerProps) {
 		<div
 			data-margin={props.margin}
 			data-variant={props.variant}
-			class={'db-divider' + (props.className || '')}>
+			class={
+				'db-divider' + (props.className ? ' ' + props.className : '')
+			}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

packages/components/src/components/icon/icon.lite.tsx

@@ -30,12 +30,17 @@ export default function DBIcon(props: DBIconProps) {
 
 	return (
 		<span
-			class={'db-icon' + (props.className || '')}
+			class={
+				'db-icon' +
+				(props.className ? ' ' + props.className : '') +
+				(props.withText ? '' : ' is-icon-text-replace')
+			}
 			data-icon={props.icon}
 			aria-hidden="true">
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
+			{props.children}
 		</span>
 	);
 }

packages/components/src/components/icon/icon.scss

@@ -0,0 +1,3 @@
+.db-icon {
+	display: flex;
+}

packages/components/src/components/icon/model.ts

@@ -2,6 +2,7 @@ import { GlobalProps, GlobalState } from '../../shared/model';
 
 export type DBIconDefaultProps = {
 	icon?: string;
+	withText?: boolean;
 };
 
 export type DBIconProps = DBIconDefaultProps & GlobalProps;

packages/components/src/components/tab-bar/tab-bar.lite.tsx

@@ -43,7 +43,11 @@ export default function DBTabBar(props: DBTabBarProps) {
 	});
 
 	return (
-		<div class={'cmp-tab-bar' + (props.className || '')} role="tablist">
+		<div
+			class={
+				'cmp-tab-bar' + (props.className ? ' ' + props.className : '')
+			}
+			role="tablist">
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

packages/components/src/components/tab/tab.lite.tsx

@@ -46,7 +46,7 @@ export default function DBTab(props: DBTabProps) {
 	});
 
 	return (
-		<div class={'db-tab' + (props.className || '')}>
+		<div class={'db-tab' + (props.className ? ' ' + props.className : '')}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

packages/foundations/scripts/scss-scaling-generator.js

@@ -5,18 +5,14 @@ const fileHeader =
 	new Date().toString() +
 	'\n';
 
-const generateSpacings = (utility) => {
+const generateScaling = () => {
 	let allClasses = fileHeader;
 
-	if (utility) {
-		allClasses += `@use "scaling-placeholder" as *;\n`;
-	}
-
 	const scaleTypeKey = ['regular', 'functional', 'expressive'];
 
 	for (const scale of scaleTypeKey) {
 		allClasses += `
-${utility ? '.' : '%'}db-scaling-${scale}{
+%db-scaling-${scale}{
 \t--db-sizing-xs: #{$db-sizing-${scale}-xs};
 \t--db-sizing-sm: #{$db-sizing-${scale}-s};
 \t--db-sizing-md: #{$db-sizing-${scale}-m};
@@ -58,4 +54,4 @@ ${utility ? '.' : '%'}db-scaling-${scale}{
 	return allClasses;
 };
 
-module.exports = generateSpacings;
+module.exports = generateScaling;