From 8d2b60766b357e7df7c18d4f334b1fd4ea299faa Mon Sep 17 00:00:00 2001
From: Adam Hooper <adam@adamhooper.com>
Date: Mon, 23 Aug 2021 14:21:24 -0400
Subject: [PATCH 1/9] Restore <Button inactive>

It's used all over qz-react. It was removed in #24 without any
explanation. Seems like an oversight.
---
 src/components/Button/Button.jsx  | 10 +++++++++-
 src/components/Button/Button.scss |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index 962172d4..c763a371 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -43,6 +43,7 @@ const Button = ( {
 	children,
 	ariaDescribedBy,
 	disabled,
+	inactive,
 	inline,
 	loading,
 	on,
@@ -54,7 +55,7 @@ const Button = ( {
 	<button
 		aria-checked={ariaChecked}
 		aria-describedby={ariaDescribedBy}
-		className={cx( 'button', { block: !inline } )}
+		className={cx( 'button', { block: !inline, inactive } )}
 		disabled={disabled || loading}
 		on={on}
 		onClick={onClick}
@@ -95,6 +96,12 @@ Button.propTypes = {
 	 * element.
 	 */
 	disabled: PropTypes.bool.isRequired,
+	/**
+	 * Same visual state as `props.disabled`, but without affecting
+	 * interactivity. Use this when you want to indicate that a form's
+	 * contents are invalid, but still submissible.
+	 */
+	inactive: PropTypes.bool.isRequired,
 	/**
 	 * Whether the button should be purely textual, e.g. for use in a
 	 * paragraph of text.
@@ -146,6 +153,7 @@ Button.propTypes = {
 
 Button.defaultProps = {
 	disabled: false,
+	inactive: false,
 	inline: false,
 	loading: false,
 	onClick: () => {},
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 37e98c54..7414f3af 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -11,10 +11,13 @@
 	cursor: pointer;
 	position: relative;
 
-	&:disabled {
+	&:disabled, &.inactive {
 		@include states.fade-on-hover;
 
 		opacity: 0.5;
+	}
+
+	&:disabled {
 		cursor: default;
 	}
 

From 2dcd8f483f5c63946b047023b804a37192264c2a Mon Sep 17 00:00:00 2001
From: Adam Hooper <adam@adamhooper.com>
Date: Mon, 23 Aug 2021 16:14:09 -0400
Subject: [PATCH 2/9] Button: jsx => tsx

---
 src/components/Button/Button.scss             |   3 +-
 .../Button/{Button.jsx => Button.tsx}         | 150 ++++++++----------
 .../Button/buttonElementWithAmp.d.ts          |   9 ++
 3 files changed, 80 insertions(+), 82 deletions(-)
 rename src/components/Button/{Button.jsx => Button.tsx} (56%)
 create mode 100644 src/components/Button/buttonElementWithAmp.d.ts

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 7414f3af..7f0b4e8e 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -11,7 +11,8 @@
 	cursor: pointer;
 	position: relative;
 
-	&:disabled, &.inactive {
+	&:disabled,
+	&.inactive {
 		@include states.fade-on-hover;
 
 		opacity: 0.5;
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.tsx
similarity index 56%
rename from src/components/Button/Button.jsx
rename to src/components/Button/Button.tsx
index c763a371..03c22b8a 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.tsx
@@ -1,36 +1,37 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames/bind';
 import styles from './Button.scss';
 import Spinner from '../Spinner/Spinner';
 
 const cx = classnames.bind( styles );
 
-const ButtonLabel = ( {
-	children,
-	inline,
-	variant,
-} ) => <span className={cx( 'label', `variant-${variant}`, { block: !inline } )}>{children}</span>;
+type Variant = 'primary' | 'secondary' | 'warning'
 
-ButtonLabel.propTypes = {
+const ButtonLabel = ( props: {
 	/**
 	 * Child nodes to be rendered as the label for the button. Maps to
 	 * the button element’s innerHTML.
 	 */
-	children: PropTypes.node.isRequired,
+	children: React.ReactNode,
 	/**
 	 * Whether the label should be purely textual, e.g. for use in a
 	 * paragraph of text.
 	 */
-	inline: PropTypes.bool.isRequired,
+	inline?: boolean,
 	/**
 	 * Visual variations of the button.
 	 */
-	variant: PropTypes.oneOf( [
-		'primary',
-		'secondary',
-		'warning',
-	] ).isRequired,
+	variant?: Variant,
+} ) => {
+	const {
+		children,
+		inline = false,
+		variant = 'primary',
+	} = props;
+
+	return (
+		<span className={cx( 'label', `variant-${variant}`, { block: !inline } )}>{children}</span>
+	);
 };
 
 ButtonLabel.defaultProps = {
@@ -38,126 +39,113 @@ ButtonLabel.defaultProps = {
 	variant: 'primary',
 };
 
-const Button = ( {
-	ariaChecked,
-	children,
-	ariaDescribedBy,
-	disabled,
-	inactive,
-	inline,
-	loading,
-	on,
-	onClick,
-	role,
-	type,
-	variant,
-} ) => (
-	<button
-		aria-checked={ariaChecked}
-		aria-describedby={ariaDescribedBy}
-		className={cx( 'button', { block: !inline, inactive } )}
-		disabled={disabled || loading}
-		on={on}
-		onClick={onClick}
-		role={role}
-		type={type}
-	>
-		<ButtonLabel variant={variant} inline={inline}>
-			{
-				loading && (
-					<div className={styles.spinner}>
-						<Spinner />
-					</div>
-				)
-			}
-			<span className={cx( 'label-text', { loading } )}>{children}</span>
-		</ButtonLabel>
-	</button>
-);
+type AriaRole = (
+	'checkbox' | 'link' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'switch' | 'tab'
+)
 
-Button.propTypes = {
+const Button = ( props: {
 	/**
 	 * Forwarded to the button element as `aria-checked`. Only use when
 	 * `props.role` is one of `checkbox`, `menuitemcheckbox`,
 	 * `menuitemradiobutton`, `radiobutton`, or `switch`.
 	 */
-	ariaChecked: PropTypes.bool,
+	ariaChecked?: boolean,
 	/**
 	 * Forwarded to the button element as `aria-described-by`.
 	 */
-	ariaDescribedBy: PropTypes.string,
+	ariaDescribedBy?: string,
 	/**
 	 * Child nodes to be rendered as the label for the button. Maps to
 	 * the button element’s innerHTML.
 	 */
-	children: PropTypes.node.isRequired,
+	children: React.ReactNode,
 	/**
 	 * Whether the button is interactive. Forwarded to the button
 	 * element.
 	 */
-	disabled: PropTypes.bool.isRequired,
+	disabled?: boolean,
 	/**
 	 * Same visual state as `props.disabled`, but without affecting
 	 * interactivity. Use this when you want to indicate that a form's
 	 * contents are invalid, but still submissible.
 	 */
-	inactive: PropTypes.bool.isRequired,
+	inactive?: boolean,
 	/**
 	 * Whether the button should be purely textual, e.g. for use in a
 	 * paragraph of text.
 	 */
-	inline: PropTypes.bool.isRequired,
+	inline?: boolean,
 	/**
 	 * Visually replaces `props.children` with the Spinner component. Use
 	 * when waiting for an action to complete in response to a user
 	 * engaging the button.
 	 */
-	loading: PropTypes.bool.isRequired,
+	loading?: boolean,
 	/**
 	 * For binding Google AMP interactivity. See
 	 * https://amp.dev/documentation/examples/components/amp-bind/
 	 */
-	on: PropTypes.string,
+	on?: string,
 	/**
 	 * Function to run when the button is engaged. Forwarded to the button
 	 * element.
 	 */
-	onClick: PropTypes.func.isRequired,
+	onClick: React.UIEventHandler<HTMLButtonElement>,
 	/**
 	 * The WAI-ARIA element role. It is always preferable to use the
 	 * approporiate HTML element over the role attribute, e.g.
 	 * `<input type="checkbox" />` is preferred to `<Button role="checkbox" />`.
 	 * Forwarded to the button element.
 	 */
-	role: PropTypes.oneOf( [
-		'checkbox',
-		'link',
-		'menuitem',
-		'menuitemcheckbox',
-		'menuitemradio',
-		'option',
-		'radio',
-		'switch',
-		'tab',
-	] ),
+	role?: AriaRole,
 	/**
 	 * When value is 'submit', the button will submit a parent `<form>`
 	 * element when engaged. Forwarded to the button element.
 	 */
-	type: PropTypes.oneOf( [ 'submit', 'button' ] ).isRequired,
+	type: 'submit' | 'button',
 	/**
 	 * Visual variations of the button. See `ButtonLabel.propTypes.variant`
 	 */
-	variant: PropTypes.string,
-};
+	variant?: Variant
+} ) => {
+	const {
+		ariaChecked,
+		ariaDescribedBy,
+		children,
+		disabled = false,
+		inactive = false,
+		inline = false,
+		loading = false,
+		on,
+		onClick,
+		role,
+		type = 'button',
+		variant = 'primary',
+	} = props;
 
-Button.defaultProps = {
-	disabled: false,
-	inactive: false,
-	inline: false,
-	loading: false,
-	onClick: () => {},
-	type: 'button',
+	return (
+		<button
+			aria-checked={ariaChecked}
+			aria-describedby={ariaDescribedBy}
+			className={cx( 'button', { block: !inline, inactive } )}
+			disabled={disabled || loading}
+			on={on}
+			onClick={onClick}
+			role={role}
+			type={type}
+		>
+			<ButtonLabel variant={variant} inline={inline}>
+				{
+					loading && (
+						<div className={styles.spinner}>
+							<Spinner />
+						</div>
+					)
+				}
+				<span className={cx( 'label-text', { loading } )}>{children}</span>
+			</ButtonLabel>
+		</button>
+	);
 };
 
 export { ButtonLabel };
diff --git a/src/components/Button/buttonElementWithAmp.d.ts b/src/components/Button/buttonElementWithAmp.d.ts
new file mode 100644
index 00000000..4084a5bf
--- /dev/null
+++ b/src/components/Button/buttonElementWithAmp.d.ts
@@ -0,0 +1,9 @@
+import 'react';
+
+// Allow <button on="[amp code]"> attribute in TypeScript
+// https://www.credera.com/insights/typescript-adding-custom-type-definitions-for-existing-libraries
+declare module 'react' {
+	interface ButtonHTMLAttributes<T> {
+		on?: string;
+	}
+}

From 8c59340b7f3ac0a09fd468f7e2f2adf13f41d307 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Mon, 23 Aug 2021 20:25:17 +0000
Subject: [PATCH 3/9] Add TypeScript types

---
 dist/Button/Button.d.ts     | 155 +++++++++++++++++++++---------------
 dist/Button/Button.d.ts.map |   2 +-
 2 files changed, 92 insertions(+), 65 deletions(-)

diff --git a/dist/Button/Button.d.ts b/dist/Button/Button.d.ts
index 7ef0fe38..0560b5cd 100644
--- a/dist/Button/Button.d.ts
+++ b/dist/Button/Button.d.ts
@@ -1,66 +1,93 @@
+import React from 'react';
+declare type Variant = 'primary' | 'secondary' | 'warning';
+declare const ButtonLabel: {
+    (props: {
+        /**
+         * Child nodes to be rendered as the label for the button. Maps to
+         * the button element’s innerHTML.
+         */
+        children: React.ReactNode;
+        /**
+         * Whether the label should be purely textual, e.g. for use in a
+         * paragraph of text.
+         */
+        inline?: boolean | undefined;
+        /**
+         * Visual variations of the button.
+         */
+        variant?: "primary" | "secondary" | "warning" | undefined;
+    }): JSX.Element;
+    defaultProps: {
+        inline: boolean;
+        variant: string;
+    };
+};
+declare type AriaRole = ('checkbox' | 'link' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'switch' | 'tab');
+declare const Button: (props: {
+    /**
+     * Forwarded to the button element as `aria-checked`. Only use when
+     * `props.role` is one of `checkbox`, `menuitemcheckbox`,
+     * `menuitemradiobutton`, `radiobutton`, or `switch`.
+     */
+    ariaChecked?: boolean | undefined;
+    /**
+     * Forwarded to the button element as `aria-described-by`.
+     */
+    ariaDescribedBy?: string | undefined;
+    /**
+     * Child nodes to be rendered as the label for the button. Maps to
+     * the button element’s innerHTML.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is interactive. Forwarded to the button
+     * element.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Same visual state as `props.disabled`, but without affecting
+     * interactivity. Use this when you want to indicate that a form's
+     * contents are invalid, but still submissible.
+     */
+    inactive?: boolean | undefined;
+    /**
+     * Whether the button should be purely textual, e.g. for use in a
+     * paragraph of text.
+     */
+    inline?: boolean | undefined;
+    /**
+     * Visually replaces `props.children` with the Spinner component. Use
+     * when waiting for an action to complete in response to a user
+     * engaging the button.
+     */
+    loading?: boolean | undefined;
+    /**
+     * For binding Google AMP interactivity. See
+     * https://amp.dev/documentation/examples/components/amp-bind/
+     */
+    on?: string | undefined;
+    /**
+     * Function to run when the button is engaged. Forwarded to the button
+     * element.
+     */
+    onClick: React.UIEventHandler<HTMLButtonElement>;
+    /**
+     * The WAI-ARIA element role. It is always preferable to use the
+     * approporiate HTML element over the role attribute, e.g.
+     * `<input type="checkbox" />` is preferred to `<Button role="checkbox" />`.
+     * Forwarded to the button element.
+     */
+    role?: "link" | "option" | "switch" | "checkbox" | "radio" | "menuitem" | "tab" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    /**
+     * When value is 'submit', the button will submit a parent `<form>`
+     * element when engaged. Forwarded to the button element.
+     */
+    type: 'submit' | 'button';
+    /**
+     * Visual variations of the button. See `ButtonLabel.propTypes.variant`
+     */
+    variant?: "primary" | "secondary" | "warning" | undefined;
+}) => JSX.Element;
+export { ButtonLabel };
 export default Button;
-export function ButtonLabel({ children, inline, variant, }: {
-    children: any;
-    inline: any;
-    variant: any;
-}): JSX.Element;
-export namespace ButtonLabel {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const inline: PropTypes.Validator<boolean>;
-        const variant: PropTypes.Validator<string>;
-    }
-    namespace defaultProps {
-        const inline_1: boolean;
-        export { inline_1 as inline };
-        const variant_1: string;
-        export { variant_1 as variant };
-    }
-}
-declare function Button({ ariaChecked, children, ariaDescribedBy, disabled, inline, loading, on, onClick, role, type, variant, }: {
-    ariaChecked: any;
-    children: any;
-    ariaDescribedBy: any;
-    disabled: any;
-    inline: any;
-    loading: any;
-    on: any;
-    onClick: any;
-    role: any;
-    type: any;
-    variant: any;
-}): JSX.Element;
-declare namespace Button {
-    export namespace propTypes_1 {
-        export const ariaChecked: PropTypes.Requireable<boolean>;
-        export const ariaDescribedBy: PropTypes.Requireable<string>;
-        const children_1: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        export { children_1 as children };
-        export const disabled: PropTypes.Validator<boolean>;
-        const inline_2: PropTypes.Validator<boolean>;
-        export { inline_2 as inline };
-        export const loading: PropTypes.Validator<boolean>;
-        export const on: PropTypes.Requireable<string>;
-        export const onClick: PropTypes.Validator<(...args: any[]) => any>;
-        export const role: PropTypes.Requireable<string>;
-        export const type: PropTypes.Validator<string>;
-        const variant_2: PropTypes.Requireable<string>;
-        export { variant_2 as variant };
-    }
-    export { propTypes_1 as propTypes };
-    export namespace defaultProps_1 {
-        const disabled_1: boolean;
-        export { disabled_1 as disabled };
-        const inline_3: boolean;
-        export { inline_3 as inline };
-        const loading_1: boolean;
-        export { loading_1 as loading };
-        export function onClick_1(): void;
-        export { onClick_1 as onClick };
-        const type_1: string;
-        export { type_1 as type };
-    }
-    export { defaultProps_1 as defaultProps };
-}
-import PropTypes from "prop-types";
 //# sourceMappingURL=Button.d.ts.map
\ No newline at end of file
diff --git a/dist/Button/Button.d.ts.map b/dist/Button/Button.d.ts.map
index f862c8a7..84e72324 100644
--- a/dist/Button/Button.d.ts.map
+++ b/dist/Button/Button.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.jsx"],"names":[],"mappings":";AAQA;;;;gBAIkG;;;;;;;;;;;;;;AA4BlG;;;;;;;;;;;;gBAkCC;;;;;;;;;;;;;;;;;;;;;;;;;;QA4ES,kCAAQ"}
\ No newline at end of file
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAC/G,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;aACM,MAAM,cAAc,CAAC,iBAAiB,CAAC;IAChD;;;;;OAKG;;IAEH;;;OAGG;UACG,QAAQ,GAAG,QAAQ;IACzB;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file

From a5843167f700a43cdbaad2ec419a86539ea4f20c Mon Sep 17 00:00:00 2001
From: Adam Hooper <adam@adamhooper.com>
Date: Mon, 23 Aug 2021 16:36:18 -0400
Subject: [PATCH 4/9] Button `type`: make it optional again

---
 src/components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 03c22b8a..9bba3461 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -102,7 +102,7 @@ const Button = ( props: {
 	 * When value is 'submit', the button will submit a parent `<form>`
 	 * element when engaged. Forwarded to the button element.
 	 */
-	type: 'submit' | 'button',
+	type?: 'submit' | 'button',
 	/**
 	 * Visual variations of the button. See `ButtonLabel.propTypes.variant`
 	 */

From 3cc90f035e5506eb091eef813c0d05754c6fe3e2 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Mon, 23 Aug 2021 20:38:22 +0000
Subject: [PATCH 5/9] Add TypeScript types

---
 dist/Button/Button.d.ts     | 2 +-
 dist/Button/Button.d.ts.map | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/Button/Button.d.ts b/dist/Button/Button.d.ts
index 0560b5cd..13722552 100644
--- a/dist/Button/Button.d.ts
+++ b/dist/Button/Button.d.ts
@@ -82,7 +82,7 @@ declare const Button: (props: {
      * When value is 'submit', the button will submit a parent `<form>`
      * element when engaged. Forwarded to the button element.
      */
-    type: 'submit' | 'button';
+    type?: "button" | "submit" | undefined;
     /**
      * Visual variations of the button. See `ButtonLabel.propTypes.variant`
      */
diff --git a/dist/Button/Button.d.ts.map b/dist/Button/Button.d.ts.map
index 84e72324..a8ce7c47 100644
--- a/dist/Button/Button.d.ts.map
+++ b/dist/Button/Button.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAC/G,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;aACM,MAAM,cAAc,CAAC,iBAAiB,CAAC;IAChD;;;;;OAKG;;IAEH;;;OAGG;UACG,QAAQ,GAAG,QAAQ;IACzB;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAC/G,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;aACM,MAAM,cAAc,CAAC,iBAAiB,CAAC;IAChD;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file

From 1a71a285bab7a29037a51b3986081c4b5b9f615c Mon Sep 17 00:00:00 2001
From: Adam Hooper <adam@adamhooper.com>
Date: Mon, 23 Aug 2021 16:41:43 -0400
Subject: [PATCH 6/9] Button: make onClick optional

a <button type="submit"> doesn't need an onClick handler
---
 src/components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 9bba3461..6648487b 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -90,7 +90,7 @@ const Button = ( props: {
 	 * Function to run when the button is engaged. Forwarded to the button
 	 * element.
 	 */
-	onClick: React.UIEventHandler<HTMLButtonElement>,
+	onClick?: React.UIEventHandler<HTMLButtonElement>,
 	/**
 	 * The WAI-ARIA element role. It is always preferable to use the
 	 * approporiate HTML element over the role attribute, e.g.

From 2868fc64cdedef2326b6e2a52dd9fa2827e5f4e1 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Mon, 23 Aug 2021 20:43:31 +0000
Subject: [PATCH 7/9] Add TypeScript types

---
 dist/Button/Button.d.ts     | 2 +-
 dist/Button/Button.d.ts.map | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/Button/Button.d.ts b/dist/Button/Button.d.ts
index 13722552..13e3b503 100644
--- a/dist/Button/Button.d.ts
+++ b/dist/Button/Button.d.ts
@@ -70,7 +70,7 @@ declare const Button: (props: {
      * Function to run when the button is engaged. Forwarded to the button
      * element.
      */
-    onClick: React.UIEventHandler<HTMLButtonElement>;
+    onClick?: ((event: React.UIEvent<HTMLButtonElement, UIEvent>) => void) | undefined;
     /**
      * The WAI-ARIA element role. It is always preferable to use the
      * approporiate HTML element over the role attribute, e.g.
diff --git a/dist/Button/Button.d.ts.map b/dist/Button/Button.d.ts.map
index a8ce7c47..187ce8a3 100644
--- a/dist/Button/Button.d.ts.map
+++ b/dist/Button/Button.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAC/G,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;aACM,MAAM,cAAc,CAAC,iBAAiB,CAAC;IAChD;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAC/G,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file

From 3b272861847060141ff8d685f1bc1f356bf57514 Mon Sep 17 00:00:00 2001
From: Adam Hooper <adam@adamhooper.com>
Date: Tue, 24 Aug 2021 09:20:25 -0400
Subject: [PATCH 8/9] Add a comment for type-safety zealots like me

---
 dist/Button/Button.d.ts.map      |  2 +-
 src/components/Button/Button.tsx | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/dist/Button/Button.d.ts.map b/dist/Button/Button.d.ts.map
index 187ce8a3..92662876 100644
--- a/dist/Button/Button.d.ts.map
+++ b/dist/Button/Button.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAC/G,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GACR,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,eAAe,GACf,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,CACP,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6648487b..9fb68f90 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -40,7 +40,15 @@ ButtonLabel.defaultProps = {
 };
 
 type AriaRole = (
-	'checkbox' | 'link' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'switch' | 'tab'
+	'checkbox'
+	| 'link'
+	| 'menuitem'
+	| 'menuitemcheckbox'
+	| 'menuitemradio'
+	| 'option'
+	| 'radio'
+	| 'switch'
+	| 'tab'
 )
 
 const Button = ( props: {
@@ -90,7 +98,7 @@ const Button = ( props: {
 	 * Function to run when the button is engaged. Forwarded to the button
 	 * element.
 	 */
-	onClick?: React.UIEventHandler<HTMLButtonElement>,
+	onClick?: React.UIEventHandler<HTMLButtonElement>, // empty when type="submit"
 	/**
 	 * The WAI-ARIA element role. It is always preferable to use the
 	 * approporiate HTML element over the role attribute, e.g.

From 38894574f4ebb43c26b34832aaf87b00d7b193ff Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Tue, 24 Aug 2021 13:22:32 +0000
Subject: [PATCH 9/9] Add TypeScript types