diff --git a/__tests__/Button.test.tsx b/__tests__/Button.test.tsx
new file mode 100644
index 0000000..3294529
--- /dev/null
+++ b/__tests__/Button.test.tsx
@@ -0,0 +1,83 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Button from '@/components/Button';
+import { Variant } from '@/components';
+
+describe('Button test', () => {
+ it('should render button', () => {
+ const container = shallow(
+ <Button
+ variant={Variant.PRIMARY}
+ >
+ Hello world
+ </Button>
+ );
+
+ expect(container.find('button').length).toBe(1);
+ });
+
+ it('should render button as link', () => {
+ const container = shallow(
+ <Button
+ as="a"
+ variant={Variant.PRIMARY}
+ >
+ Hello world
+ </Button>
+ );
+
+ expect(container.find('a').length).toBe(1);
+ });
+
+ it('should render block button', () => {
+ const container = shallow(
+ <Button
+ variant={Variant.PRIMARY}
+ block
+ >
+ Hello world
+ </Button>
+ );
+
+ expect(container.find('button').hasClass('btn-block')).toBeTruthy();
+ });
+
+ it('should render small button', () => {
+ const container = shallow(
+ <Button
+ variant={Variant.PRIMARY}
+ small
+ >
+ Hello world
+ </Button>
+ );
+
+ expect(container.find('button').hasClass('btn-small')).toBeTruthy();
+ });
+
+ it('should render button with icon left', () => {
+ const container = shallow(
+ <Button
+ variant={Variant.PRIMARY}
+ iconLeft={<i>icon</i>}
+ >
+ Hello world
+ </Button>
+ );
+
+ expect(container.find('button').find('i').text()).toContain('icon');
+ });
+
+ it('should render button with icon left', () => {
+ const container = shallow(
+ <Button
+ variant={Variant.PRIMARY}
+ iconRight={<i>icon</i>}
+ >
+ Hello world
+ </Button>
+ );
+
+ expect(container.find('button').find('i').text()).toContain('icon');
+ });
+});
diff --git a/package-lock.json b/package-lock.json
index 4574ecf..a0b0bf3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1289,6 +1289,40 @@
}
}
},
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.2.32",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.32/fontawesome-common-types-0.2.32.tgz",
+ "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+ },
+ "@fortawesome/fontawesome-free": {
+ "version": "5.15.1",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-free/-/5.15.1/fontawesome-free-5.15.1.tgz",
+ "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
+ },
+ "@fortawesome/fontawesome-svg-core": {
+ "version": "1.2.32",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.32/fontawesome-svg-core-1.2.32.tgz",
+ "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.32"
+ }
+ },
+ "@fortawesome/free-regular-svg-icons": {
+ "version": "5.15.1",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/free-regular-svg-icons/-/5.15.1/free-regular-svg-icons-5.15.1.tgz",
+ "integrity": "sha512-eD9NWFy89e7SVVtrLedJUxIpCBGhd4x7s7dhesokjyo1Tw62daqN5UcuAGu1NrepLLq1IeAYUVfWwnOjZ/j3HA==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.2.32"
+ }
+ },
+ "@fortawesome/react-fontawesome": {
+ "version": "0.1.11",
+ "resolved": "https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.1.11/react-fontawesome-0.1.11.tgz",
+ "integrity": "sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==",
+ "requires": {
+ "prop-types": "^15.7.2"
+ }
+ },
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -13798,7 +13832,6 @@
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
- "dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -13808,8 +13841,7 @@
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "dev": true
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
}
},
diff --git a/package.json b/package.json
index fc2f54d..286380b 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,10 @@
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
+ "@fortawesome/fontawesome-free": "^5.15.1",
+ "@fortawesome/fontawesome-svg-core": "^1.2.32",
+ "@fortawesome/free-regular-svg-icons": "^5.15.1",
+ "@fortawesome/react-fontawesome": "^0.1.11",
"clsx": "^1.1.1",
"react": "^17.0.1"
}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 0000000..636bea7
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+
+export type ButtonComponentTypes = 'button' | 'a';
+
+export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+ as?: ButtonComponentTypes;
+ variant: Variant | string;
+ iconLeft?: React.ReactElement;
+ iconRight?: React.ReactElement;
+ block?: boolean;
+ small?: boolean;
+}
+
+const Button = React.forwardRef<HTMLElement, ButtonProps>((
+ {
+ as: Component = 'button',
+ children,
+ className,
+ variant,
+ iconLeft,
+ iconRight,
+ block,
+ small,
+ ...rest
+ },
+ ref
+): React.ReactElement => {
+ return (
+ <Component
+ ref={ref as React.RefObject<any>}
+ className={clsx(
+ 'btn',
+ `btn-${variant}`,
+ block &&'btn-block',
+ small && 'btn-small',
+ className
+ )}
+ {...rest}
+ >
+ {iconLeft && (
+ <div className="icon-container icon-left">
+ {iconLeft}
+ </div>
+ )}
+ <span>{children}</span>
+ {iconRight && (
+ <div className="icon-container icon-right">
+ {iconRight}
+ </div>
+ )}
+ </Component>
+ );
+});
+
+Button.displayName = 'Button';
+Button.propTypes = {
+ as: PropTypes.oneOf(['button', 'a']),
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ variant: PropTypes.string.isRequired,
+ iconLeft: PropTypes.element,
+ iconRight: PropTypes.element,
+ block: PropTypes.bool,
+ small: PropTypes.bool
+};
+
+export default Button;
diff --git a/src/components/utils/Variant.ts b/src/components/utils/Variant.ts
index f4a6f3c..e1dc5dc 100644
--- a/src/components/utils/Variant.ts
+++ b/src/components/utils/Variant.ts
@@ -1,2 +1,15 @@
export enum Variant {
+ PRIMARY = 'primary',
+ PRIMARY_GHOST = 'primary-ghost',
+ SECONDARY = 'secondary',
+ DANGER = 'danger',
+ DANGER_GHOST = 'danger-ghost'
}
+
+export const variantList: string[] = [
+ 'primary',
+ 'primary-ghost',
+ 'secondary',
+ 'danger',
+ 'danger-ghost'
+];
diff --git a/src/style/base/_base.scss b/src/style/base/_base.scss
index 8342c14..90a9def 100644
--- a/src/style/base/_base.scss
+++ b/src/style/base/_base.scss
@@ -1,5 +1,7 @@
html {
font-size: var(--base-font-size);
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
}
body {
@@ -9,4 +11,5 @@ body {
font: {
family: var(--base-font-family);
}
+ line-height: 1.2rem;
}
diff --git a/src/style/base/_typography.scss b/src/style/base/_typography.scss
index a0867eb..aaaa460 100644
--- a/src/style/base/_typography.scss
+++ b/src/style/base/_typography.scss
@@ -82,6 +82,8 @@
url('../fonts/inter/inter-v2-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
h1 {
font-size: 2rem;
color: mixins.color('gray', 900);
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index 3a041c0..580ece2 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -1,8 +1,6 @@
@use "mixins";
@use "colors";
-$primary-radius: 4px;
-
/**
* 1. Base
*/
@@ -12,6 +10,8 @@ $base-font-color: mixins.color('blueGray', 900);
$base-font-family: 'Inter, apple-sf-pro-text, Helvetica, Arial, sans-serif';
$base-font-size: 16px;
$base-border-color: mixins.color('gray', 300);
+$base-border-radius: 4px;
+$base-gutter: 1rem;
:root {
--base-font-size: #{$base-font-size};
@@ -20,10 +20,41 @@ $base-border-color: mixins.color('gray', 300);
--base-font-color: #{$base-font-color};
--base-font-family: #{$base-font-family};
--base-border-color: #{$base-border-color};
+ --base-border-radius: #{$base-border-radius};
+ --base-gutter: #{$base-gutter};
}
/**
- * 2. Panel
+ * 2. Colors
+ */
+$primary-color: mixins.color('deepPurple', 600);
+$primary-color-hover: mixins.color('deepPurple', 700);
+$primary-color-active: mixins.color('deepPurple', 800);
+
+$secondary-color: mixins.color('red', 600);
+$secondary-color-hover: mixins.color('red', 700);
+$secondary-color-active: mixins.color('red', 800);
+
+$danger-color: mixins.color('red', 700);
+$danger-color-hover: mixins.color('red', 800);
+$danger-color-active: mixins.color('red', 900);
+
+:root {
+ --primary-color: #{$primary-color};
+ --primary-color-hover: #{$primary-color-hover};
+ --primary-color-active: #{$primary-color-active};
+
+ --secondary-color: #{$secondary-color};
+ --secondary-color-hover: #{$secondary-color-hover};
+ --secondary-color-active: #{$secondary-color-active};
+
+ --danger-color: #{$danger-color};
+ --danger-color-hover: #{$danger-color-hover};
+ --danger-color-active: #{$danger-color-active};
+}
+
+/**
+ * 3. Panel
*/
$panel-background: #fff;
$panel-gutter: 2rem;
@@ -34,10 +65,61 @@ $panel-gutter: 2rem;
}
/**
- * 3. Page
+ * 4. Page
*/
$page-gutter: 2rem;
:root {
--page-gutter: #{$page-gutter};
}
+
+/**
+ * 5. Button
+ */
+$button-padding: 1rem;
+$button-font-weight: 600;
+$button-font-size: 1rem;
+
+$primary-button-ghost-hover-background: mixins.color('deepPurple', 50);
+$primary-button-ghost-active-background: mixins.color('deepPurple', 75);
+
+$secondary-button-background: transparent;
+$secondary-button-hover-background: mixins.color('deepPurple', 50);
+$secondary-button-active-background: mixins.color('deepPurple', 75);
+
+$danger-button-ghost-hover-background: mixins.color('red', 50);
+$danger-button-ghost-active-background: mixins.color('red', 75);
+
+:root {
+ --button-padding: #{$button-padding};
+ --button-font-weight: #{$button-font-weight};
+ --button-font-size: #{$button-font-size};
+
+ --primary-button-background: var(--primary-color);
+ --primary-button-border: var(--primary-color);
+ --primary-button-hover-background: var(--primary-color-hover);
+ --primary-button-hover-border: var(--primary-color-hover);
+ --primary-button-active-background: var(--primary-color-active);
+ --primary-button-active-border: var(--primary-color-active);
+
+ --primary-button-ghost-color: var(--primary-color);
+ --primary-button-ghost-border: var(--primary-color);
+ --primary-button-ghost-hover-background: #{$primary-button-ghost-hover-background};
+ --primary-button-ghost-active-background: #{$primary-button-ghost-active-background};
+
+ --secondary-button-background: #{$secondary-button-background};
+ --secondary-button-hover-background: #{$secondary-button-hover-background};
+ --secondary-button-active-background: #{$secondary-button-active-background};
+
+ --danger-button-background: var(--danger-color);
+ --danger-button-border: var(--danger-color);
+ --danger-button-hover-background: var(--danger-color-hover);
+ --danger-button-hover-border: var(--danger-color-hover);
+ --danger-button-active-background: var(--danger-color-active);
+ --danger-button-active-border: var(--danger-color-active);
+
+ --danger-button-ghost-color: var(--danger-color);
+ --danger-button-ghost-border: var(--danger-color);
+ --danger-button-ghost-hover-background: #{$danger-button-ghost-hover-background};
+ --danger-button-ghost-active-background: #{$danger-button-ghost-active-background};
+}
diff --git a/src/style/components/_button.scss b/src/style/components/_button.scss
new file mode 100644
index 0000000..324efe1
--- /dev/null
+++ b/src/style/components/_button.scss
@@ -0,0 +1,107 @@
+.btn {
+ border: solid 1px transparent;
+ border-radius: var(--base-border-radius);
+ cursor: pointer;
+ display: inline-flex;
+ padding: var(--button-padding);
+ outline: none;
+ justify-content: center;
+ font: {
+ weight: var(--button-font-weight);
+ size: var(--button-font-size);
+ }
+
+ &.btn-primary {
+ background: var(--primary-button-background);
+ border-color: var(--primary-button-border);
+ color: #fff;
+
+ &:hover {
+ background: var(--primary-button-hover-background);
+ border-color: var(--primary-button-hover-border);
+ }
+
+ &:active {
+ background: var(--primary-button-active-background);
+ border-color: var(--primary-button-active-border);
+ }
+ }
+
+ &.btn-primary-ghost {
+ border-color: var(--primary-button-ghost-border);
+ color: var(--primary-button-ghost-color);
+
+ &:hover {
+ background: var(--primary-button-ghost-hover-background);
+ border-color: var(--primary-button-border);
+ }
+
+ &:active {
+ background: var(--primary-button-ghost-active-background);
+ border-color: var(--primary-button-border);
+ }
+ }
+
+ &.btn-secondary {
+ background: transparent;
+ color: var(--primary-color);
+ border-color: var(--base-border-color);
+
+ &:hover {
+ background: var(--secondary-button-hover-background);
+ }
+
+ &:active {
+ background: var(--secondary-button-active-background);
+ }
+ }
+
+ &.btn-danger {
+ background: var(--danger-button-background);
+ border-color: var(--danger-button-border);
+ color: #fff;
+
+ &:hover {
+ background: var(--danger-button-hover-background);
+ border-color: var(--danger-button-hover-border);
+ }
+
+ &:active {
+ background: var(--danger-button-active-background);
+ border-color: var(--danger-button-active-border);
+ }
+ }
+
+ &.btn-danger-ghost {
+ border-color: var(--danger-button-ghost-border);
+ color: var(--danger-button-ghost-color);
+
+ &:hover {
+ background: var(--danger-button-ghost-hover-background);
+ border-color: var(--danger-button-ghost-border);
+ }
+
+ &:active {
+ background: var(--danger-button-ghost-active-background);
+ border-color: var(--danger-button-ghost-border);
+ }
+ }
+
+ .icon-container {
+ &.icon-left {
+ margin-right: var(--base-gutter);
+ }
+
+ &.icon-right {
+ margin-left: var(--base-gutter);
+ }
+ }
+
+ &.btn-block {
+ width: 100%;
+ }
+
+ &.btn-small {
+ padding: 0.5rem;
+ }
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index c804147..6a062b6 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -10,5 +10,6 @@
/**
* 2. Components
*/
+@use "components/button";
@use "components/page";
@use "components/panel";