From 6da1a0361ec916b6652865af7bc1bdf81ae5d5a6 Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Wed, 12 Apr 2023 13:20:50 -0400
Subject: [PATCH 1/3] fix: makes all button type button by default

---
 src/components/Drawer/index.tsx                            | 4 ++--
 src/components/EventCard/index.tsx                         | 1 +
 src/components/HorizontalResizeablePanel/index.tsx         | 2 ++
 src/components/Modal/index.tsx                             | 2 +-
 src/components/ModuleCard/index.tsx                        | 1 +
 src/components/ProgramCard/index.tsx                       | 1 +
 src/components/WYSIWYGInput/Toolbar/Section/Item/index.tsx | 1 +
 7 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index f04d360..b136fea 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -204,12 +204,12 @@ export const Drawer: React.FC<PropsWithChildren<DrawerProps>> = ({
       <div className={classnames('flex items-center', { 'justify-between': onBack, 'justify-end': !onBack })}>
         {/* If there's the back button, display it */}
         {onBack && (
-          <button className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={onBack}>
+          <button type="button" className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={onBack}>
             {/* Adds a back icon */}
             <BackIcon className="pui-animate-scaleHover-target" />
           </button>
         )}
-        <button className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={() => onOpen(false)}>
+        <button type="button" className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={() => onOpen(false)}>
           {/* Adds a close icon */}
           <CrossIcon className="pui-animate-scaleHover-target" />
         </button>
diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx
index 56ef2e2..89b9a5a 100644
--- a/src/components/EventCard/index.tsx
+++ b/src/components/EventCard/index.tsx
@@ -135,6 +135,7 @@ export const EventCard: React.FC<EventCardProps> = ({
             />
           </div>
           <button
+            type="button"
             onClick={onPressButton}
             className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >
diff --git a/src/components/HorizontalResizeablePanel/index.tsx b/src/components/HorizontalResizeablePanel/index.tsx
index b34d4c8..e6bdbab 100644
--- a/src/components/HorizontalResizeablePanel/index.tsx
+++ b/src/components/HorizontalResizeablePanel/index.tsx
@@ -147,6 +147,7 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
     <div {...props} className={classNames('relative', props.className)} ref={ref}>
       {resizeLeft && (
         <button
+          type="button"
           className="absolute h-full inset-y-0 w-2 cursor-col-resize"
           style={{ left: '-4px' }}
           onMouseDown={(e) => onMove(e, 'left')}
@@ -154,6 +155,7 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
       )}
       {resizeRight && (
         <button
+          type="button"
           className="absolute h-full inset-y-0 w-2 cursor-col-resize"
           style={{ right: '-4px' }}
           onMouseDown={(e) => onMove(e, 'right')}
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 7f70d11..8cc59af 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -116,7 +116,7 @@ export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
             <h3 className={classnames(removePadding ? 'p-0' : 'p-4')}>{title}</h3>
             {/* Adds a close icon */}
             {isClosable && (
-              <button className="pui-btn-icon text-pui-paragraph-900 px-6 py-4" onClick={onToggle}>
+              <button type="button" className="pui-btn-icon text-pui-paragraph-900 px-6 py-4" onClick={onToggle}>
                 <CrossIcon className="pui-animate-scaleHover-target" />
               </button>
             )}
diff --git a/src/components/ModuleCard/index.tsx b/src/components/ModuleCard/index.tsx
index 16b061b..52dfa3f 100644
--- a/src/components/ModuleCard/index.tsx
+++ b/src/components/ModuleCard/index.tsx
@@ -114,6 +114,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
         <div className={classnames('text-base mb-6 font-normal', classNameContent)}>{content}</div>
         <div className="flex-1 inline-flex justify-end items-end w-full">
           <button
+            type="button"
             onClick={onPressButton}
             className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >
diff --git a/src/components/ProgramCard/index.tsx b/src/components/ProgramCard/index.tsx
index 361e8ff..7f511b2 100644
--- a/src/components/ProgramCard/index.tsx
+++ b/src/components/ProgramCard/index.tsx
@@ -116,6 +116,7 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
         </div>
         <div className="inline-flex justify-end items-center w-full">
           <button
+            type="button"
             onClick={onPressButton}
             className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >
diff --git a/src/components/WYSIWYGInput/Toolbar/Section/Item/index.tsx b/src/components/WYSIWYGInput/Toolbar/Section/Item/index.tsx
index 01524a3..bab8aec 100644
--- a/src/components/WYSIWYGInput/Toolbar/Section/Item/index.tsx
+++ b/src/components/WYSIWYGInput/Toolbar/Section/Item/index.tsx
@@ -66,6 +66,7 @@ export const SectionItems: React.FC<SectionItemsProps> = ({
             const isActive = item.isActive(editorState);
             return (
               <button
+                type="button"
                 key={item.name}
                 className={classnames(
                   'pui-btn-icon p-0 h-8 w-8 flex items-center justify-center border border-gray-200',

From d978f02210ae1ddd5a657dd3c90bb334ce2c6c7c Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Wed, 12 Apr 2023 13:54:32 -0400
Subject: [PATCH 2/3] feat: adds selectstack component

---
 CHANGELOG.md                                  |  2 +
 .../SelectStack/SelectStack.stories.tsx       | 49 +++++++++++++++
 src/components/SelectStack/index.tsx          | 61 +++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 src/components/SelectStack/SelectStack.stories.tsx
 create mode 100644 src/components/SelectStack/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c169a0b..f823d03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added `SelectStack` component
+
 ### Fixed
 
 ## [9.5.0] 2023-04-12
diff --git a/src/components/SelectStack/SelectStack.stories.tsx b/src/components/SelectStack/SelectStack.stories.tsx
new file mode 100644
index 0000000..2bdcf9e
--- /dev/null
+++ b/src/components/SelectStack/SelectStack.stories.tsx
@@ -0,0 +1,49 @@
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { SelectStack, SelectStackProps } from '.';
+
+const items = ['Option 1', 'Option 2', 'Option 3'];
+
+export default {
+  title: 'Components/Inputs/SelectStack',
+  component: SelectStack,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    className: {
+      control: {
+        type: 'text'
+      }
+    },
+    items: { defaultValue: items },
+    onClick: { action: 'onClick' }
+  }
+} as Meta;
+
+/**
+ * A story that displays a SelectStack example
+ *
+ * @param props the story props
+ * @param props.onClick On click event handler
+ */
+const Template: Story<SelectStackProps & { onClick?: () => void }> = ({ onClick, ...props }) => {
+  const [activeItem, setActiveItem] = useState(items[0]);
+
+  return (
+    <SelectStack
+      {...props}
+      onClick={(item, e) => {
+        setActiveItem(item);
+
+        onClick?.(item, e);
+      }}
+      activeItem={activeItem}
+    />
+  );
+};
+
+export const Default = Template.bind({});
diff --git a/src/components/SelectStack/index.tsx b/src/components/SelectStack/index.tsx
new file mode 100644
index 0000000..206ec38
--- /dev/null
+++ b/src/components/SelectStack/index.tsx
@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export type SelectStackProps = Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'onClick'
+> & {
+  /** The items to display */
+  items?: string[];
+  /** The active item */
+  activeItem?: string;
+  /**The container class name */
+  containerClassName?: string;
+  /** On click event handler */
+  onClick?: (item: string, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+/**
+ * A stack of selectable buttons
+ *
+ * @param props The component props
+ * @param props.items The items to display
+ * @param props.activeItem The active item
+ * @param props.onClick On click event handler
+ * @param props.containerClassName The container class name
+ */
+export const SelectStack: React.FC<SelectStackProps> = ({
+  items,
+  activeItem,
+  onClick,
+  containerClassName,
+  ...props
+}) => {
+  return (
+    <div className={classNames('mb-2 flex items-center', containerClassName)}>
+      {items?.map((item, index) => {
+        const active = item === activeItem;
+        return (
+          <button
+            key={index}
+            type="button"
+            {...props}
+            onClick={onClick ? (e) => onClick(item, e) : undefined}
+            className={classNames(
+              'border border-black px-4 py-1 rounded-full transition-colors ',
+              {
+                'rounded-l-none': index > 0, // All BUT first
+                'rounded-r-none border-r-0': index < items.length - 1 // All BUT last,
+              },
+              active ? (!props.disabled ? 'text-pui-placeholder-color' : 'text-gray-500') : 'text-gray-400',
+              !props.disabled ? 'hover:bg-gray-100' : 'border-gray-300 bg-gray-50',
+              props.className
+            )}
+          >
+            {item}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

From 6f96d14bdd2f2d1d3cfea728bc971b3931d3e5ce Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Wed, 12 Apr 2023 13:56:06 -0400
Subject: [PATCH 3/3] build: version 10.0.0

---
 CHANGELOG.md | 12 ++++++++++--
 package.json |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f823d03..b79bd63 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,10 +23,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added `SelectStack` component
-
 ### Fixed
 
+## [10.0.0] 2023-04-12
+
+### **Breaking changes**
+
+- Fix: made sure all buttons are of `type=button` unless stated otherwise. To fix issues where buttons would accidentally submit forms.
+
+### Added
+
+- Added `SelectStack` component
+
 ## [9.5.0] 2023-04-12
 
 ### Added
diff --git a/package.json b/package.json
index fdc0d11..0a94c28 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "9.5.0",
+  "version": "10.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"