@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/dist/esm/src/hooks/useWrapper.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWrapper.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/src/index.esm.js

@@ -0,0 +1,2 @@
+export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
+//# sourceMappingURL=index.esm.js.map

package/dist/esm/src/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/src/readyclasses.module.esm.js

@@ -0,0 +1,2 @@
+import e from"../node_modules/rollup-plugin-styles/dist/runtime/inject-css.esm.js";var s=".readyclasses_module_srOnly__c31559d9{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_module_hidden__c31559d9{display:none}.readyclasses_module_slideIn__c31559d9{animation:readyclasses_module_slideIn__c31559d9 .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_module_slideIn__c31559d9{animation-duration:.1ms}}.readyclasses_module_slideOut__c31559d9{animation:readyclasses_module_slideOut__c31559d9 .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_module_slideOut__c31559d9{animation-duration:.1ms}}@keyframes readyclasses_module_slideIn__c31559d9{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_module_slideOut__c31559d9{0%{transform:translateY(0)}to{transform:translateY(100vh)}}",d={"sr-only":"readyclasses_module_srOnly__c31559d9",hidden:"readyclasses_module_hidden__c31559d9","slide-in":"readyclasses_module_slideIn__c31559d9","slide-out":"readyclasses_module_slideOut__c31559d9"};e(s,{});export{s as css,d as default};
+//# sourceMappingURL=readyclasses.module.esm.js.map

package/dist/esm/src/readyclasses.module.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readyclasses.module.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/src/util/helper.esm.js

@@ -0,0 +1,2 @@
+const e=(e=15,t)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],n="";for(let o=0;o<e&&n.length<e;o++){n=n+("string"!=typeof t||void 0===(null==t?void 0:t[o])||/\s/.test(t[o])?"":t[o])+r[Math.floor(Math.random()*r.length)]}return n.slice(0,e)},t=(e,t,r=!0)=>r?Object.keys(e).reduce(((r,n)=>(t.test(n)&&(r[n]=e[n]),r)),{}):Object.entries(e).filter((([e])=>!t.test(e))).reduce(((e,t)=>({...e,[t[0]]:t[1]})),{}),r=(e,t)=>{let r;return function(...n){clearTimeout(r),r=setTimeout((()=>{clearTimeout(r),e(...n)}),t)}},n=(e,t)=>{let r=0;return function(){let n=Date.now();n-r>=t&&(e(),r=n)}};export{r as debounce,t as filterProps,e as generateID,n as throttle};
+//# sourceMappingURL=helper.esm.js.map

package/dist/esm/src/util/helper.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/util/helper.d.ts

@@ -0,0 +1,12 @@
+export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
+export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => {};
+export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
+export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
+export declare const isEqual: (x: any, y: any) => boolean;
+export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Record<string, any>[], key: string) => boolean;
+export declare const getValueByPath: (obj: {
+    [key: string]: any;
+}, path: string) => any;
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export declare const remToPx: (rem: number) => number;
+export declare const isJsonString: (str: any) => boolean;

package/dist/esm/util/helper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,16 +1,25 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0-alpha.1",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
-  "main": "dist/index.js",
-  "module": "dist/react-lib-components.esm.js",
-  "typings": "dist/index.d.ts",
+  "main": "dist/cjs/src/index.cjs.js",
+  "module": "dist/esm/src/index.esm.js",
+  "typings": "dist/cjs/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -20,21 +29,18 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "dts build",
-    "build-storybook": "build-storybook",
+    "build": "rm -rf dist && rollup -c",
+    "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "dev": "npm-run-all -p start test:watch storybook",
     "lint": "eslint '**/*.{ts,tsx}'",
-    "prepare": "husky install && dts build",
+    "prepare": "husky install && rollup -c",
     "size": "size-limit",
-    "start": "dts watch",
+    "start": "rollup -c -w",
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
     "prettier": "prettier --write --ignore-path .gitignore \"**/*.+(ts|tsx|scss|mdx)\"",
-    "storybook": "start-storybook -p 6006",
-    "test": "dts test --passWithNoTests",
-    "test:watch": "dts test --passWithNoTests --watch"
-  },
-  "jest": {
-    "testEnvironment": "jsdom"
+    "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -42,73 +48,79 @@
   "engines": {
     "node": ">=16"
   },
-  "size-limit": [
-    {
-      "path": "dist/react-lib-components.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/react-lib-components.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@mdx-js/react": "^1.6.22",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@mdx-js/react": "^2.3.0",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.16",
-    "@storybook/theming": "^6.5.16",
-    "@testing-library/dom": "^9.2.0",
+    "@storybook/addon-a11y": "^7.0.12",
+    "@storybook/addon-actions": "^7.0.12",
+    "@storybook/addon-docs": "^7.0.12",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-interactions": "^7.0.12",
+    "@storybook/addon-links": "^7.0.12",
+    "@storybook/blocks": "^7.0.12",
+    "@storybook/react": "^7.0.12",
+    "@storybook/react-webpack5": "^7.0.12",
+    "@storybook/theming": "^7.0.12",
+    "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.5.0",
-    "@tsconfig/create-react-app": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@tsconfig/recommended": "^1.0.2",
     "@types/color-convert": "^2.0.0",
-    "@types/mdx": "^2.0.4",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/jest": "^29.5.1",
+    "@types/mdx": "^2.0.5",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "babel-loader": "^9.1.2",
-    "chromatic": "^6.17.3",
-    "dts-cli": "^1.6.3",
-    "eslint": "^8.39.0",
+    "chromatic": "^6.17.4",
+    "css-loader": "^6.7.4",
+    "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.2",
+    "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-license-header": "^0.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "html-webpack-plugin": "^5.5.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-junit": "^16.0.0",
-    "lint-staged": "^13.2.1",
+    "jest-sonar-reporter": "^2.0.0",
+    "lint-staged": "^13.2.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
+    "postcss-url": "^10.1.3",
     "prettier": "^2.8.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router": "^6.10.0",
-    "react-router-dom": "^6.10.0",
-    "rollup-plugin-cleanup": "^3.2.1",
+    "react-router": "^6.11.2",
+    "react-router-dom": "^6.11.2",
+    "remark-gfm": "^3.0.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
     "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
     "size-limit": "^8.2.4",
-    "style-loader": "^3.3.2",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5"
+    "storybook": "^7.0.12",
+    "style-loader": "^3.3.3",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4"
   }
 }

package/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.breadcrumbs {
+  .last {
+    color: var(--color-primary);
+    margin: 0;
+  }
+
+  .icon {
+    color: var(--color-primary);
+    font-size: 0.75rem;
+    line-height: var(--default-line-height);
+    margin-left: 0.375rem;
+    margin-right: 0.375rem;
+  }
+}

package/src/components/Button/BaseButton.module.scss

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+.button {
+  @include mixins.buttonBase();
+  position: relative;
+
+  .content-hidden {
+    visibility: hidden;
+    display: flex;
+  }
+}
+
+.spinner {
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  left: calc(50% - 0.75rem);
+  transform: translate(-50%, -50%);
+  animation: spin 1s infinite linear;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/components/Button/BaseButton.test.tsx

@@ -0,0 +1,133 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { BaseButton, Props } from "./BaseButton";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const defaultParams: Props = {};
+
+const createBaseButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <BaseButton {...parameters} data-testid="baseButton">
+      baseButton content
+    </BaseButton>
+  );
+  const baseButton = queries.getByTestId("baseButton");
+
+  return {
+    ...queries,
+    baseButton
+  };
+};
+
+describe("BaseButton should render", () => {
+  it("renders without crashing", () => {
+    const { baseButton } = createBaseButton();
+
+    expect(baseButton).toBeDefined();
+    expect(baseButton).toHaveTextContent("baseButton content");
+  });
+});
+
+describe("On click handler", () => {
+  it("executes the onclick handler", async () => {
+    const onClickHandler = jest.fn();
+    const { baseButton } = createBaseButton(defaultParams => ({
+      ...defaultParams,
+      onClick: onClickHandler
+    }));
+
+    await userEvent.click(baseButton);
+
+    expect(onClickHandler).toBeCalled();
+  });
+});
+
+describe("Properties of the button", () => {
+  it("should be disabled, function should not have been called", async () => {
+    const onClickHandler = jest.fn();
+    const { baseButton } = createBaseButton(defaultParams => ({
+      ...defaultParams,
+      disabled: true,
+      onClick: onClickHandler
+    }));
+
+    await userEvent.click(baseButton);
+    expect(onClickHandler).toHaveBeenCalledTimes(0);
+  });
+
+  it("when loading onClick function should not have been called", async () => {
+    const onClickHandler = jest.fn();
+    const { baseButton } = createBaseButton(defaultParams => ({
+      ...defaultParams,
+      loading: true,
+      onClick: onClickHandler
+    }));
+
+    await userEvent.click(baseButton);
+    expect(onClickHandler).toHaveBeenCalledTimes(0);
+  });
+
+  it('should have the class "TESTING"', () => {
+    const { baseButton } = createBaseButton(defaultParams => ({
+      ...defaultParams,
+      className: "TESTING"
+    }));
+
+    expect(baseButton).toHaveClass("TESTING");
+  });
+
+  it('should have a "name" property with the value "button"', () => {
+    const { baseButton } = createBaseButton(defaultParams => ({
+      ...defaultParams,
+      name: "button"
+    }));
+
+    expect(baseButton).toHaveAttribute("name", "button");
+  });
+});
+
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <BaseButton {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/components/Button/BaseButton.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
+import classes from "./BaseButton.module.scss";
+import { Spinner } from "./Spinner";
+
+export interface Props extends ComponentPropsWithRef<"button"> {
+  type?: "submit" | "button" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  color?: "primary" | "secondary" | "warning" | "danger" | "default";
+}
+
+const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, type = "button", className, loading, disabled, ...rest },
+  ref
+) => {
+  const validTypes = ["submit", "button", "reset"];
+  const isDisabled = disabled ?? loading;
+  if (!validTypes.includes(type))
+    throw new Error(
+      `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
+    );
+
+  return (
+    <button
+      {...rest}
+      disabled={isDisabled}
+      ref={ref}
+      type={type}
+      className={`${classes.button} ${loading ? classes.loading : ""} ${
+        className ? className : ""
+      }`}
+    >
+      {loading ? (
+        <Fragment>
+          <div className={classes["content-hidden"]}>{children}</div>
+          <Spinner className={classes["spinner"]} />
+        </Fragment>
+      ) : (
+        children
+      )}
+    </button>
+  );
+};
+
+export const BaseButton = React.forwardRef(BaseButtonComponent);

package/src/components/Button/Button.module.scss

@@ -0,0 +1,65 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+.fill {
+  @include mixins.button("fill");
+}
+
+.outline {
+  @include mixins.button("outline");
+}
+
+.text {
+  @include mixins.button("text");
+}
+
+.has-icon {
+  display: flex;
+  align-items: center;
+
+  &.start-icon {
+    padding-left: 0.75rem;
+    padding-right: 1.25rem;
+  }
+
+  &.end-icon {
+    padding-left: 1.25rem;
+    padding-right: 0.75rem;
+  }
+
+  i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.5rem;
+    margin-right: 0.25rem;
+  }
+}
+
+@media only screen and (min-width: 30em) {
+  .has-icon {
+    &.start-icon {
+      padding-left: 1rem;
+    }
+
+    &.end-icon {
+      padding-right: 1rem;
+    }
+  }
+}