From 6f735d41281323f034212e30a50e76331d8ba72c Mon Sep 17 00:00:00 2001
From: Nazarii Baran <5796655-nazarii.baran@users.noreply.gitlab.com>
Date: Sun, 23 Aug 2020 18:44:26 +0300
Subject: [PATCH 1/2] uikit init + button added

---
 .../components/button/button.component.tsx    | 55 +++++++++++++++----
 src/core/components/button/button.props.ts    | 27 ++++++++-
 src/core/components/button/button.scss        | 54 +++++++++++++++++-
 src/core/utils/formaters.ts                   | 10 ++++
 src/core/utils/index.ts                       |  1 +
 src/modules/app/app.component.tsx             |  2 +
 src/modules/uikit/index.ts                    |  1 +
 src/modules/uikit/uikit.component.tsx         | 24 ++++++++
 src/modules/uikit/uikit.props.ts              |  6 ++
 src/modules/uikit/uikit.scss                  | 24 ++++++++
 src/styles/core/mixins.scss                   | 17 ++++++
 tsconfig.json                                 |  4 +-
 12 files changed, 210 insertions(+), 15 deletions(-)
 create mode 100644 src/core/utils/formaters.ts
 create mode 100644 src/modules/uikit/index.ts
 create mode 100644 src/modules/uikit/uikit.component.tsx
 create mode 100644 src/modules/uikit/uikit.props.ts
 create mode 100644 src/modules/uikit/uikit.scss

diff --git a/src/core/components/button/button.component.tsx b/src/core/components/button/button.component.tsx
index 2285cc7..608412f 100644
--- a/src/core/components/button/button.component.tsx
+++ b/src/core/components/button/button.component.tsx
@@ -1,18 +1,51 @@
-import * as React from "react";
-import { ButtonProps } from './button.props'
+import * as React from 'react';
+import { ButtonProps } from './button.props';
 import * as styles from './button.scss';
+import classNames from 'classnames';
+import { capitalize } from '@core/utils';
 
 /**
  * Renders Button
  */
-const Button: React.FC<ButtonProps> = ({}) => {
-  return (
-    <div className={styles.button}>
-      {/* content */}
-      {/* content */}
-      {/* content */}
-    </div>
-  );
-};
+const Button: React.FC<ButtonProps> = ({
+  className,
+  type,
+  theme,
+  size,
+  children,
+  disabled,
+  onClick,
+  ...props
+}) => (
+  <button
+    className={classNames(
+      styles.button,
+      styles['button' + capitalize(theme)],
+      styles['button' + capitalize(size)],
+      {
+        [styles.buttonDisabled]: disabled
+      },
+      className
+    )}
+    type={type}
+    disabled={disabled}
+    onClick={onClick}
+    {...props}
+  >
+    {children}
+  </button>
+);
 
 export { Button };
+
+/**
+ * Default props
+ */
+Button.defaultProps = {
+  className: '',
+  type: 'button',
+  theme: 'primary',
+  size: 'md',
+  disabled: false,
+  onClick: () => {}
+};
diff --git a/src/core/components/button/button.props.ts b/src/core/components/button/button.props.ts
index 7fc6d21..d75ecfd 100644
--- a/src/core/components/button/button.props.ts
+++ b/src/core/components/button/button.props.ts
@@ -1,6 +1,31 @@
 /**
  * Props
  */
-type ButtonProps = {};
+type ButtonProps = {
+  /**
+   * ClassName
+   */
+  className?: string;
+  /**
+   * Button type
+   */
+  type?: 'submit' | 'button';
+  /**
+   * Button theme
+   */
+  theme?: 'primary' | 'secondary';
+  /**
+   * Button size
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Is button disabled
+   */
+  disabled?: boolean;
+  /**
+   * Handle click
+   */
+  onClick?: () => void;
+};
 
 export { ButtonProps };
diff --git a/src/core/components/button/button.scss b/src/core/components/button/button.scss
index 39e260a..304dafe 100644
--- a/src/core/components/button/button.scss
+++ b/src/core/components/button/button.scss
@@ -1,3 +1,53 @@
+@import 'core.scss';
+
 .button {
-	
-}
\ No newline at end of file
+  @include flex(center, center);
+  width: fit-content;
+  border: 0;
+  border-radius: 4px;
+  transition: 0.25s;
+  cursor: pointer;
+  outline: none;
+
+  &--primary {
+    color: #ffffff;
+    background: #99c642;
+    border: 1px solid #99c642;
+    &:hover {
+      &:enabled {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  &--secondary {
+    color: #99c642;
+    background: transparent;
+    border: 1px solid #99c642;
+    &:hover {
+      &:enabled {
+        color: #ffffff;
+        background: #99c642;
+      }
+    }
+  }
+
+  &--sm {
+    padding: 12px;
+    font-size: 12px;
+  }
+
+  &--md {
+    padding: 16px;
+    font-size: 16px;
+  }
+  &--lg {
+    padding: 16px 24px;
+    font-size: 24px;
+  }
+  &--disabled {
+    background: gray;
+    border: 1px solid gray;
+    cursor: not-allowed;
+  }
+}
diff --git a/src/core/utils/formaters.ts b/src/core/utils/formaters.ts
new file mode 100644
index 0000000..f450889
--- /dev/null
+++ b/src/core/utils/formaters.ts
@@ -0,0 +1,10 @@
+/**
+ * Capitalize each word in string
+ */
+const capitalize = (source: string) =>
+  source
+    .split(' ')
+    .map(item => item.charAt(0).toUpperCase() + item.substring(1))
+    .join(' ');
+
+export { capitalize };
diff --git a/src/core/utils/index.ts b/src/core/utils/index.ts
index ff36df7..ab27dc1 100644
--- a/src/core/utils/index.ts
+++ b/src/core/utils/index.ts
@@ -2,3 +2,4 @@ export * from './register';
 export * from './formik';
 export * from './copy-to-clipboard';
 export * from './hoc';
+export * from './formaters';
diff --git a/src/modules/app/app.component.tsx b/src/modules/app/app.component.tsx
index a6896e6..ebef0bb 100644
--- a/src/modules/app/app.component.tsx
+++ b/src/modules/app/app.component.tsx
@@ -3,6 +3,7 @@ import { AppProps } from './app.props';
 import * as styles from './app.scss';
 import { register } from '@core';
 import { Switch, Route } from 'react-router-dom';
+import { Uikit } from '../uikit';
 
 const Auth = register('auth', () => import('@auth'));
 const Profile = register('profile', () => import('@profile'));
@@ -16,6 +17,7 @@ const App: React.FC<AppProps> = ({}) => (
       <Switch>
         <Route path='/auth' component={Auth} />
         <Route path='/profile' component={Profile} />
+        <Route path='/uikit' component={Uikit} />
       </Switch>
     </React.Suspense>
   </div>
diff --git a/src/modules/uikit/index.ts b/src/modules/uikit/index.ts
new file mode 100644
index 0000000..7ca3587
--- /dev/null
+++ b/src/modules/uikit/index.ts
@@ -0,0 +1 @@
+export * from "./uikit.component";
diff --git a/src/modules/uikit/uikit.component.tsx b/src/modules/uikit/uikit.component.tsx
new file mode 100644
index 0000000..0c38321
--- /dev/null
+++ b/src/modules/uikit/uikit.component.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { UikitProps } from './uikit.props';
+import * as styles from './uikit.scss';
+import { Button } from '@core';
+
+/**
+ * Renders Uikit
+ */
+const Uikit: React.FC<UikitProps> = ({}) => (
+  <div className={styles.uikit}>
+    <div className={styles.section}>
+      <h1 className={styles.title}>Button</h1>
+      <div className={styles.buttons}>
+        <Button>Primary</Button>
+        <Button theme='secondary'>Secondary</Button>
+        <Button size='lg'>Large</Button>
+        <Button size='sm'>Small</Button>
+        <Button disabled>Disabled</Button>
+      </div>
+    </div>
+  </div>
+);
+
+export { Uikit };
diff --git a/src/modules/uikit/uikit.props.ts b/src/modules/uikit/uikit.props.ts
new file mode 100644
index 0000000..34b2f49
--- /dev/null
+++ b/src/modules/uikit/uikit.props.ts
@@ -0,0 +1,6 @@
+/**
+ * Props
+ */
+type UikitProps = {};
+
+export { UikitProps };
diff --git a/src/modules/uikit/uikit.scss b/src/modules/uikit/uikit.scss
new file mode 100644
index 0000000..8f62cc9
--- /dev/null
+++ b/src/modules/uikit/uikit.scss
@@ -0,0 +1,24 @@
+@import 'core.scss';
+
+.uikit {
+  padding: 15px;
+}
+
+.title {
+  font-size: 24px;
+}
+
+.section {
+  margin: 100px 0;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.buttons {
+  @include flex($align: center);
+  button:not(:first-child) {
+    margin-left: 24px;
+  }
+}
diff --git a/src/styles/core/mixins.scss b/src/styles/core/mixins.scss
index 210c878..93de072 100644
--- a/src/styles/core/mixins.scss
+++ b/src/styles/core/mixins.scss
@@ -1,2 +1,19 @@
 @import './variables.scss';
 @import './media.scss';
+
+@mixin flex($justify: flex-start, $align: flex-start, $direction: row) {
+  display: flex;
+  justify-content: $justify;
+  align-items: $align;
+  flex-direction: $direction;
+}
+
+@mixin size($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin min-size($size) {
+  min-width: $size;
+  min-height: $size;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 142f7d4..e9db3f7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,7 +29,9 @@
       "@main-page": ["./src/modules/main-page/index"],
       "@main-page/*": ["./src/modules/main-page/*"],
       "@profile": ["./src/modules/profile/index"],
-      "@profile/*": ["./src/modules/profile/*"]
+      "@profile/*": ["./src/modules/profile/*"],
+      "@uikit": ["./src/modules/uikit/index"],
+      "@uikit/*": ["./src/modules/uikit/*"]
     }
   },
   "include": ["./src/**/*", "./typings/**/*"],

From 7ca35de6e3b44ac86a62099511c8b238c00678a9 Mon Sep 17 00:00:00 2001
From: Nazarii Baran <5796655-nazarii.baran@users.noreply.gitlab.com>
Date: Sun, 23 Aug 2020 19:04:34 +0300
Subject: [PATCH 2/2] added card component

---
 src/core/components/card/card.component.tsx | 27 +++++++++++++++++++++
 src/core/components/card/card.props.ts      | 15 ++++++++++++
 src/core/components/card/card.scss          | 19 +++++++++++++++
 src/core/components/card/index.ts           |  1 +
 src/core/components/index.ts                |  1 +
 src/modules/uikit/uikit.component.tsx       | 14 ++++++++++-
 src/modules/uikit/uikit.scss                | 12 +++++++++
 7 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/card/card.component.tsx
 create mode 100644 src/core/components/card/card.props.ts
 create mode 100644 src/core/components/card/card.scss
 create mode 100644 src/core/components/card/index.ts

diff --git a/src/core/components/card/card.component.tsx b/src/core/components/card/card.component.tsx
new file mode 100644
index 0000000..bbaf45f
--- /dev/null
+++ b/src/core/components/card/card.component.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CardProps } from './card.props';
+import * as styles from './card.scss';
+import classNames from 'classnames';
+
+/**
+ * Renders Card
+ */
+const Card: React.FC<CardProps> = ({ className, children, disabled }) => (
+  <div
+    className={classNames(styles.card, className, {
+      [styles.cardDisabled]: disabled
+    })}
+  >
+    {children}
+  </div>
+);
+
+export { Card };
+
+/**
+ * Default props
+ */
+Card.defaultProps = {
+  className: '',
+  disabled: false
+};
diff --git a/src/core/components/card/card.props.ts b/src/core/components/card/card.props.ts
new file mode 100644
index 0000000..eb2a50c
--- /dev/null
+++ b/src/core/components/card/card.props.ts
@@ -0,0 +1,15 @@
+/**
+ * Props
+ */
+type CardProps = {
+  /**
+   * ClassName
+   */
+  className?: string;
+  /**
+   * Is card disabled
+   */
+  disabled?: boolean;
+};
+
+export { CardProps };
diff --git a/src/core/components/card/card.scss b/src/core/components/card/card.scss
new file mode 100644
index 0000000..1c2b480
--- /dev/null
+++ b/src/core/components/card/card.scss
@@ -0,0 +1,19 @@
+@import 'core.scss';
+
+.card {
+  @include size(400px);
+  z-index: 3;
+  padding: 12px;
+  border-radius: 4px;
+  box-shadow: 1px 1px 5px 0 rgba(181, 177, 174, 0.2);
+  cursor: pointer;
+  &:hover {
+    &:not(.card--disabled) {
+      box-shadow: 1px 1px 20px 0 rgba(187, 151, 135, 0.1);
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+}
diff --git a/src/core/components/card/index.ts b/src/core/components/card/index.ts
new file mode 100644
index 0000000..8151bac
--- /dev/null
+++ b/src/core/components/card/index.ts
@@ -0,0 +1 @@
+export * from "./card.component";
diff --git a/src/core/components/index.ts b/src/core/components/index.ts
index eaf5eea..9bbf268 100644
--- a/src/core/components/index.ts
+++ b/src/core/components/index.ts
@@ -1 +1,2 @@
 export * from './button';
+export * from './card';
diff --git a/src/modules/uikit/uikit.component.tsx b/src/modules/uikit/uikit.component.tsx
index 0c38321..b3da03a 100644
--- a/src/modules/uikit/uikit.component.tsx
+++ b/src/modules/uikit/uikit.component.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { UikitProps } from './uikit.props';
 import * as styles from './uikit.scss';
-import { Button } from '@core';
+import { Button, Card } from '@core';
 
 /**
  * Renders Uikit
  */
 const Uikit: React.FC<UikitProps> = ({}) => (
   <div className={styles.uikit}>
+    {/* Button */}
     <div className={styles.section}>
       <h1 className={styles.title}>Button</h1>
       <div className={styles.buttons}>
@@ -18,6 +19,17 @@ const Uikit: React.FC<UikitProps> = ({}) => (
         <Button disabled>Disabled</Button>
       </div>
     </div>
+
+    {/* Card */}
+    <div className={styles.section}>
+      <h1 className={styles.title}>Card</h1>
+      <div className={styles.cards}>
+        <Card className={styles.card}>This is a custom card</Card>
+        <Card className={styles.card} disabled>
+          This is a disabled card
+        </Card>
+      </div>
+    </div>
   </div>
 );
 
diff --git a/src/modules/uikit/uikit.scss b/src/modules/uikit/uikit.scss
index 8f62cc9..e9f39ae 100644
--- a/src/modules/uikit/uikit.scss
+++ b/src/modules/uikit/uikit.scss
@@ -22,3 +22,15 @@
     margin-left: 24px;
   }
 }
+
+.cards {
+  @include flex($align: center);
+  .card {
+    @include flex(center, center);
+    font-size: 16px;
+
+    &:not(:first-child) {
+      margin-left: 16px;
+    }
+  }
+}