Merge pull request #124 from brainstormforce/template/dashboards

SUR-285 Template: Implement Dashbaords

package.json

@@ -74,6 +74,7 @@
     "@storybook/react": "^8.3.3",
     "@storybook/react-webpack5": "^8.3.3",
     "@storybook/test": "^8.3.3",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@wordpress/eslint-plugin": "^20.3.0",
     "@wordpress/prettier-config": "^4.4.0",
     "@wordpress/scripts": "^27.9.0",

src/components/badge/badge.jsx

@@ -26,6 +26,7 @@ const BadgeComponent = ( props, ref ) => {
 
 	// Size classes - Based on the size prop.
 	const sizeClasses = {
+		xxs: 'py-0.5 px-0.5 text-xs',
 		xs: 'py-0.5 px-1 text-xs',
 		sm: 'py-1 px-1.5 text-xs',
 		md: 'py-1 px-1.5 text-sm',
@@ -56,6 +57,14 @@ const BadgeComponent = ( props, ref ) => {
 	let buttonClasses =
 		'group relative justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4 cursor-pointer';
 
+	const iconSizeClasses = {
+		xxs: '[&>svg]:size-3',
+		xs: '[&>svg]:size-3',
+		sm: '[&>svg]:size-3',
+		md: '[&>svg]:size-4',
+		lg: '[&>svg]:size-5',
+	};
+
 	if ( disabled ) {
 		filteredClasses = variantClasses.disabled;
 		buttonClasses += ' cursor-not-allowed disabled';
@@ -79,7 +88,12 @@ const BadgeComponent = ( props, ref ) => {
 			ref={ ref }
 		>
 			{ icon ? (
-				<span className="justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4">
+				<span
+					className={ cn(
+						'justify-center flex items-center',
+						iconSizeClasses[ size ]
+					) }
+				>
 					{ icon }
 				</span>
 			) : null }

src/components/badge/badge.stories.js

@@ -24,7 +24,7 @@ export default {
 			name: 'Size',
 			description: 'Defines the size of the badge.',
 			control: 'select',
-			options: [ 'xs', 'sm', 'md', 'lg' ],
+			options: [ 'xxs', 'xs', 'sm', 'md', 'lg' ],
 			table: {
 				type: { summary: 'string' },
 				defaultValue: { summary: 'md' },

src/components/switch/switch.jsx

@@ -113,10 +113,15 @@ const SwitchComponent = (
 			toggleDial:
 				'size-4 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-5 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4',
 		},
+		md: {
+			container: 'w-10 h-5',
+			toggleDial:
+				'size-3 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-5 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4',
+		},
 		sm: {
-			container: 'w-9 h-5',
+			container: 'w-8 h-4',
 			toggleDial:
-				'size-3 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4',
+				'size-2.5 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4',
 		},
 	};
 

src/components/switch/switch.stories.js

@@ -13,7 +13,7 @@ export default {
 			name: 'Size',
 			description: 'Defines the size of the switch.',
 			control: 'radio',
-			options: [ 'sm', 'lg' ],
+			options: [ 'sm', 'md', 'lg' ],
 			table: {
 				type: { summary: 'string' },
 				defaultValue: { summary: 'lg' },