Merge pull request #2 from qmachard/feat/components

feat(Components): Integrate all expected components

.storybook/config.js

@@ -1,6 +1,7 @@
 import { configure } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 
+import './style.css';
 import '../src/components/global/Layout/Layout.scss';
 
 setOptions({

.storybook/style.css

@@ -0,0 +1,32 @@
+.examples {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.example {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  border: 1px solid #F0F0F0;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.example .icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+
+.example_view {
+  display: block;
+  padding: 10px;
+}
+
+.example_label {
+  display: block;
+  text-align: center;
+  padding: 5px;
+  background-color: #F0F0F0;
+  width: 100%;
+}

gatsby-config.js

@@ -5,6 +5,19 @@
  */
 
 module.exports = {
-  plugins: [`gatsby-plugin-sass`],
+  plugins: [
+    {
+      resolve: `gatsby-plugin-sass`,
+    },
+    {
+      resolve: `gatsby-plugin-force-file-loader`,
+      options: {
+        rules: [
+          'fonts', /* Matches Gatsby default rules for fonts */
+          'images', /* Matches Gatsby default rules for images */
+          'media', /* Matches Gatsby default rules for media (video/audio) */
+        ],
+      },
+    },
+  ],
 };
-

package.json

@@ -16,7 +16,9 @@
   "dependencies": {
     "autoprefixer": "^8.2.0",
     "classnames": "^2.2.6",
+    "flexboxgrid-sass": "^8.0.5",
     "gatsby": "^2.13.28",
+    "gatsby-plugin-force-file-loader": "^0.1.0",
     "gatsby-plugin-postcss-sass": "^1.0.22",
     "gatsby-plugin-react-helmet": "^3.1.2",
     "gatsby-plugin-sass": "^2.1.3",

src/assets/scss/fonts.scss

@@ -0,0 +1,38 @@
+@import 'variables';
+@import 'mixins';
+
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: $font-normal;
+  font-display: swap;
+  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v8/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: $font-semibold;
+  font-display: swap;
+  src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v8/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: $font-bold;
+  font-display: swap;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v8/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Questrial';
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+  src: local('Questrial'), local('Questrial-Regular'), url(https://fonts.gstatic.com/s/questrial/v9/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/assets/scss/global.scss

@@ -0,0 +1,14 @@
+@import 'variables';
+@import 'mixins';
+
+body {
+  background: var(--color-background);
+  font-family: var(--font-family);
+  font-size: var(--font-size-normal);
+  color: var(--color-text);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

src/assets/scss/helpers.scss

@@ -0,0 +1,11 @@
+.a-block {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

src/assets/scss/mixins.scss

@@ -0,0 +1,27 @@
+@import 'variables';
+
+// -- FONTS
+
+/// Declare a font-face
+///
+/// @param string  $font-family   Using name of font
+/// @param string  $name          Filename of font file
+/// @param string  $weight        Weight of font (100, 200, normal, bold, etc.) [optional]
+/// @param string  $style         Style of font (normal, italic, etc.) [optional]
+/// @param bool    $woff2         If font is woff2 format [optional]
+/// @output Font-face
+///
+@mixin font-face($font-family, $name, $weight: normal, $style: normal, $woff2: false) {
+  $file-path: '../../../assets/fonts/' + $name;
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+    @if $woff2 == true {
+      src: url('#{$file-path}.woff') format('woff'),
+      url('#{$file-path}.woff2') format('woff2');
+    } @else {
+      src: url('#{$file-path}.woff') format('woff');
+    }
+  }
+}

src/assets/scss/reset.scss

@@ -365,3 +365,8 @@ textarea {
   color: #000;
   padding: 0.2em 0;
 }
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

src/assets/scss/theme.scss

@@ -0,0 +1,16 @@
+@import 'variables';
+@import 'mixins';
+
+:root {
+  --font-family: #{$font-family};
+  --font-family-title: #{$font-family-title};
+  --font-normal: #{$font-normal};
+  --font-semibold: #{$font-semibold};
+  --font-bold: #{$font-bold};
+  --font-size-normal: 14px;
+  --font-size-title-1: 50px;
+  --color-background: #fafafa;
+  --color-text: #0A0A0A;
+  --color-bg-card: #FFFFFF;
+  --color-smooth: #e2e2e2;
+}

src/assets/scss/typography.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+
+.title-1 {
+  font-family: var(--font-family-title);
+  font-size: var(--font-size-title-1);
+  font-weight: var(--font-bold);
+  margin-bottom: 50px;
+}

src/assets/scss/variables.scss

@@ -0,0 +1,5 @@
+$font-family: 'Poppins', sans-serif;
+$font-family-title: 'Questrial', sans-serif;
+$font-normal: 400;
+$font-semibold: 500;
+$font-bold: 600;

src/components/atoms/Card/Card.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import './Card.scss';
+
+/**
+ * Card Component
+ */
+class Card extends React.PureComponent {
+  render() {
+    const {padding, link, className, children} = this.props;
+
+    const componentClassNames = classNames('card', {
+      'card--padding': padding,
+      'card--link': link,
+    }, className);
+
+    return (
+      <article className={componentClassNames}>
+        {children}
+      </article>
+    );
+  }
+}
+
+Card.propTypes = {
+  padding: PropTypes.bool,
+  link: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+Card.defaultProps = {
+  padding: true,
+  link: false,
+};
+
+export default Card;

src/components/atoms/Card/Card.scss

@@ -0,0 +1,35 @@
+.card {
+  display: inline-block;
+  background: var(--color-bg-card);
+  border-radius: 5px;
+  color: var(--color-text);
+  box-shadow:
+          0 3px 3px rgba(0, 0, 0, 0.2), /** Simulate Direct Light - Color is a darkened shade of blue **/
+          0 3px 20px rgba(0, 0, 0, 0.3)  /** Simulate Ambient Light - Color is a darkened shade of blue **/;
+  overflow: hidden;
+
+  &--padding {
+    padding: 50px 30px;
+  }
+
+  &--link {
+    transition: 0.4s ease-in-out;
+    transform: scale(1);
+    cursor: pointer;
+
+    &:hover {
+      z-index: 1;
+      transform: scale(1.03);
+      box-shadow:
+              0 3px 10px rgba(0, 0, 0, 0.2), /** Simulate Direct Light - Color is a darkened shade of blue **/
+              0 10px 30px rgba(0, 0, 0, 0.3)  /** Simulate Ambient Light - Color is a darkened shade of blue **/;
+    }
+  }
+}
+
+.card_title {
+  font-size: 24px;
+  font-weight: var(--font-semibold);
+  word-wrap: break-word;
+  color: inherit;
+}

src/components/atoms/Icon/Icon.jsx

@@ -10,21 +10,23 @@ import './Icon.scss';
  */
 class Icon extends React.PureComponent {
   render() {
-    const {icon, className} = this.props;
+    const {icon, title, className} = this.props;
 
     const componentClassName = classNames('icon', `icon-${icon}`, className);
 
     return (
-      <svg className={componentClassName}>
-        <use xlinkHref={`${icons}#${icon}`} />
-      </svg>
+      <i className={componentClassName} title={title}>
+        <svg className="icon_svg">
+          <use xlinkHref={`${icons}#${icon}`} />
+        </svg>
+      </i>
     );
   }
 }
 
 Icon.propTypes = {
   icon: PropTypes.string.isRequired,
-  className: PropTypes.string,
+  title: PropTypes.string.isRequired,
 };
 
 Icon.defaultProps = {};

src/components/atoms/Icon/Icon.scss

@@ -1,4 +1,6 @@
-.icon {
-  width: 24px;
-  height: 24px;
+.icon {}
+
+.icon_svg {
+  width: 100%;
+  height: 100%;
 }

src/components/atoms/Tag/Tag.jsx

@@ -1,20 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './Tag.scss';
+
 /**
  * Tag Component
  */
 class Tag extends React.PureComponent {
   render() {
+    const {icon, children} = this.props;
+
     return (
-      <span></span>
+      <span className="tag">
+        {icon}
+        {children}
+      </span>
     );
   }
 }
 
 Tag.propTypes = {
-  icon: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  icon: PropTypes.element,
 };
 
 Tag.defaultProps = {};

src/components/atoms/Tag/Tag.scss

@@ -0,0 +1,15 @@
+.tag {
+  display: inline-flex;
+  align-items: center;
+  font-weight: var(--font-semibold);
+
+  .icon {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+  }
+
+  & + .tag {
+    margin-left: 20px;
+  }
+}

src/components/atoms/Tag/index.js

@@ -1 +1 @@
-export default from './Tag';
+export { default } from './Tag';

src/components/global/Layout/Layout.scss

@@ -1,3 +1,15 @@
 @import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+// Libs
+@import "../../../../node_modules/flexboxgrid-sass/flexboxgrid.scss";
+
+// Theme styles
+@import '../../../assets/scss/theme';
+
+// Commons styles
 @import '../../../assets/scss/reset';
 @import '../../../assets/scss/global';
+@import '../../../assets/scss/fonts';
+@import '../../../assets/scss/helpers';
+@import '../../../assets/scss/typography';