add lucide and style button with icon

packages/chord-chart-studio/css/global.css

@@ -37,7 +37,8 @@ img {
 /* ===== Variables ===== */
 
 :root {
-	--space-xxs: 4px;
+	--space-xxxs: 4px;
+	--space-xxs: 6px;
 	--space-xs: 8px;
 	--space-s: 12px;
 	--space-m: 16px;

packages/chord-chart-studio/package.json

@@ -44,6 +44,7 @@
     "file-saver": "^2.0.5",
     "filesize": "^10.1.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.349.0",
     "modern-normalize": "^2.0.0",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",

packages/chord-chart-studio/src/components/button/Button.jsx

@@ -1,19 +1,35 @@
-import styles from './Button.module.css';
+import React from 'react';
+
 import { Button as ReactAriaButton } from 'react-aria-components';
+import styles from './Button.module.css';
 
-import React from 'react';
+import Icon from '../icon/Icon';
 
 const defaultType = 'primary';
 
-export default function Button({ children, type = defaultType, onPress }) {
+export default function Button({
+	children,
+	type = defaultType,
+	icon = '',
+	onPress,
+}) {
 	const className = [
 		styles.button,
 		styles[type] ? styles[type] : styles[defaultType],
 	];
 
+	const renderedIcon = icon ? (
+		<span className={styles.icon}>
+			<Icon id={icon} size={20} />
+		</span>
+	) : (
+		''
+	);
+
 	return (
 		<ReactAriaButton onPress={onPress} className={className.join(' ')}>
-			{children}
+			{renderedIcon}
+			<span className={styles.label}>{children}</span>
 		</ReactAriaButton>
 	);
 }

packages/chord-chart-studio/src/components/button/Button.module.css

@@ -1,10 +1,25 @@
 .button {
-	border: 0;
-	border-radius: var(--rounded-m);
+	/*** layout ***/
 	padding: var(--space-s) var(--space-m);
 
+	display: flex;
+	align-items: center;
+
+	:is(.icon, .label) {
+		height: 20px;
+	}
+
+	.icon {
+		margin-right: var(--space-xxs);
+	}
+
+	/*** Styles ***/
+
 	font-weight: var(--font-weight-bold);
 
+	border: 0;
+	border-radius: var(--rounded-m);
+
 	outline-offset: var(--space-xxs);
 	outline-style: solid;
 	outline-width: 0;
@@ -14,13 +29,15 @@
 	}
 
 	&[data-focused] {
-		ooutline-width: 0;
+		outline-width: 0;
 	}
 
 	&[data-focus-visible] {
 		outline-width: 2px;
 	}
 
+	/*** Colors ***/
+
 	&.primary {
 		background-color: var(--sky600);
 		color: var(--sky50);

packages/chord-chart-studio/src/components/button/Button.stories.js

@@ -16,6 +16,10 @@ export default {
 			control: 'select',
 			options: ['primary', 'secondary', 'tertiary'],
 		},
+		icon: {
+			control: 'select',
+			options: ['plus', 'import'],
+		},
 	},
 	args: { children: 'myButton', onPress: fn() },
 };

packages/chord-chart-studio/src/components/icon/Icon.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Plus, Import } from 'lucide-react';
+
+export default function Icon({ id, size }) {
+	let Component;
+
+	switch (id) {
+		case 'plus':
+			Component = Plus;
+			break;
+		case 'import':
+			Component = Import;
+			break;
+	}
+	return <Component size={size} />;
+}

packages/chord-chart-studio/src/components/icon/Icon.stories.js

@@ -0,0 +1,24 @@
+import Icon from './Icon';
+
+export default {
+	component: Icon,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		id: {
+			control: 'select',
+			options: ['plus', 'import'],
+		},
+	},
+	args: {},
+};
+
+export const Plus = {
+	args: { id: 'plus' },
+};
+
+export const Import = {
+	args: { id: 'import' },
+};

yarn.lock

@@ -10261,6 +10261,7 @@ __metadata:
     file-saver: "npm:^2.0.5"
     filesize: "npm:^10.1.0"
     lodash: "npm:^4.17.21"
+    lucide-react: "npm:^0.349.0"
     modern-normalize: "npm:^2.0.0"
     normalize.css: "npm:^8.0.1"
     prop-types: "npm:^15.8.1"
@@ -17485,6 +17486,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.349.0":
+  version: 0.349.0
+  resolution: "lucide-react@npm:0.349.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  checksum: 52af64feb7dcf3ea44bbc05ffae695ebb9f7d922af27110e1e820bbf3e894e5362b7d732f74a59ba88ed4f42ea0951a5c3ee96e9281edcc9b4e3751ccb5029c5
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"