initial commit

packages/woocommerce-blocks/assets/js/base/components/button/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { Button as WPButton } from 'wordpress-components';
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+import Spinner from '@woocommerce/base-components/spinner';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface ButtonProps extends WPButton.ButtonProps {
+	className?: string;
+	showSpinner?: boolean;
+	children?: ReactNode;
+}
+
+/**
+ * Component that visually renders a button but semantically might be `<button>` or `<a>` depending
+ * on the props.
+ */
+const Button = ( {
+	className,
+	showSpinner = false,
+	children,
+	...props
+}: ButtonProps ): JSX.Element => {
+	const buttonClassName = classNames(
+		'wc-block-components-button',
+		className,
+		{
+			'wc-block-components-button--loading': showSpinner,
+		}
+	);
+
+	return (
+		<WPButton className={ buttonClassName } { ...props }>
+			{ showSpinner && <Spinner /> }
+			<span className="wc-block-components-button__text">
+				{ children }
+			</span>
+		</WPButton>
+	);
+};
+
+export default Button;

packages/woocommerce-blocks/assets/js/base/components/button/stories/index.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import Button from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/Button',
+	component: Button,
+};
+
+export const Default = () => <Button>Buy now</Button>;

packages/woocommerce-blocks/assets/js/base/components/button/style.scss

@@ -0,0 +1,35 @@
+.wc-block-components-button:not(.is-link) {
+	@include reset-typography();
+	align-items: center;
+	background-color: $gray-900;
+	color: $white;
+	display: inline-flex;
+	font-weight: bold;
+	min-height: 3em;
+	justify-content: center;
+	line-height: 1;
+	padding: 0 em($gap);
+	text-align: center;
+	text-decoration: none;
+	text-transform: none;
+	position: relative;
+
+	&:disabled,
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: $gray-900;
+		color: $white;
+	}
+
+	.wc-block-components-button__text {
+		display: block;
+
+		> svg {
+			fill: currentColor;
+		}
+	}
+	.wc-block-components-spinner + .wc-block-components-button__text {
+		visibility: hidden;
+	}
+}