Merge pull request #60 from devandres-tech/storybook/migrate-footer

Storybook/migrate footer

package.json

@@ -11,7 +11,15 @@
     "lint": "eslint --fix . && echo 'Lint complete.'",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "test:coverage": "npm test -- --coverage"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/components/**/*.{js}",
+      "!<rootDir>/node_modules/",
+      "!<rootDir>/path/to/dir/"
+    ]
   },
   "author": "Andres Alcocer",
   "license": "ISC",
@@ -78,6 +86,8 @@
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "image-webpack-loader": "^8.1.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "mini-css-extract-plugin": "^1.3.6",
     "node-sass": "^8.0.0",
     "prettier": "^2.8.0",
@@ -87,6 +97,7 @@
     "svg-react-loader": "^0.4.6",
     "tap-nirvana": "^1.1.0",
     "terser-webpack-plugin": "^5.3.6",
+    "ts-node": "^10.9.1",
     "watch": "^1.0.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",

src/AppRouter.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BrowserRouter, Route, Routes, Outlet } from 'react-router-dom'
 
-import Footer from './components/Footer'
+import Footer from './components/Footer/Footer'
 import Navbar from './components/Navbar'
 import Home from './pages/Home'
 import NotFound from './pages/NotFound'

src/components/Button/Button.tsx

@@ -9,13 +9,20 @@ export enum ButtonType {
 }
 
 interface IButton {
+  buttonType: ButtonType
   label?: string
   onClick?: () => void
-  buttonType: ButtonType
   Icon?: JSX.Element
+  customClassName?: string
 }
 
-const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
+const Button = ({
+  label,
+  onClick,
+  buttonType,
+  Icon,
+  customClassName,
+}: IButton) => {
   const getIconClassName = (): '' | ' with-icon' => {
     return Icon ? ' with-icon' : ''
   }
@@ -28,9 +35,13 @@ const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
     return ButtonType[buttonType ? buttonType : ButtonType.Primary]
   }
 
+  const getCustomClassName = (): string => {
+    return customClassName ? ` ${customClassName}` : ''
+  }
+
   return (
     <button
-      className={`n-button${getIconClassName()}${getLabelClassName()} ${getPrimaryClassName()}`}
+      className={`n-button${getIconClassName()}${getLabelClassName()}${getCustomClassName()} ${getPrimaryClassName()}`}
       onClick={onClick}
     >
       {Icon && Icon}

src/components/Button/__tests__/Button.stories.tsx

@@ -34,6 +34,13 @@ Primary.args = {
   buttonType: ButtonType.Primary,
 }
 
+export const PrimaryWithCustomClass = Template.bind({})
+PrimaryWithCustomClass.args = {
+  label: 'Primary Custom',
+  buttonType: ButtonType.Primary,
+  customClassName: 'custom-class-name',
+}
+
 export const Secondary = Template.bind({})
 Secondary.args = {
   label: 'Secondary',

src/components/Button/__tests__/Button.test.tsx

@@ -6,6 +6,7 @@ import {
   SecondaryWithIcon,
   Alternate,
   IconRoundSecondary,
+  PrimaryWithCustomClass,
 } from './Button.stories'
 import { render } from '@testing-library/react'
 
@@ -48,4 +49,8 @@ describe('Button constructor', (): void => {
     const { container } = render(<Alternate {...Alternate.args} />)
     expect(container).toMatchSnapshot()
   })
+  test('should render custom css class name', (): void => {
+    const { container } = render(<Primary {...PrimaryWithCustomClass.args} />)
+    expect(container).toMatchSnapshot()
+  })
 })

src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -12,6 +12,18 @@ exports[`Button constructor should render alternate button 1`] = `
 </div>
 `;
 
+exports[`Button constructor should render custom css class name 1`] = `
+<div>
+  <button
+    class="n-button with-label custom-class-name Primary"
+  >
+    <span>
+      Primary Custom
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Button constructor should render icon round button 1`] = `
 <div>
   <button

src/components/Footer/Footer.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import './footer.scss'
 
 const footer = () => (
   <footer className='footer'>
     <div className='footer__copyright'>
-      &copy; 2022 Made with ❤️ by{' '}
+      &copy; {new Date().getFullYear()} Made with ❤️ by{' '}
       <a
         className='footer__copyright--link'
         href='https://github.com/devandres-tech'

src/components/Footer/__tests__/Footer.stories.tsx

@@ -0,0 +1,28 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import Footer from '../Footer'
+
+export default {
+  title: 'Footer',
+  component: Footer,
+  parameters: {
+    parameters: {
+      backgrounds: {
+        default: '#141414',
+        values: [
+          { name: 'dark', value: '#141414' },
+          { name: 'light', value: '#fff' },
+        ],
+      },
+    },
+    docs: {
+      description: {
+        component: 'Footer component default styles',
+      },
+    },
+  },
+} as ComponentMeta<typeof Footer>
+
+const Template: ComponentStory<typeof Footer> = () => <Footer />
+
+export const FooterDefault = Template.bind({})

src/components/Footer/__tests__/Footer.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react'
+import { FooterDefault } from './Footer.stories'
+
+describe('Footer constructor', () => {
+  test('should render default footer', () => {})
+  const { container } = render(<FooterDefault />)
+  expect(container).toMatchSnapshot()
+})

src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<div>
+  <footer
+    class="footer"
+  >
+    <div
+      class="footer__copyright"
+    >
+      © 
+      2022
+       Made with ❤️ by
+       
+      <a
+        class="footer__copyright--link"
+        href="https://github.com/devandres-tech"
+      >
+        Dev Andres
+      </a>
+    </div>
+  </footer>
+</div>
+`;

src/components/Footer/footer.scss

@@ -0,0 +1,28 @@
+@import '../../static/sass/style';
+
+.footer {
+  background-color: $color-background;
+  padding-top: 15rem;
+  padding-bottom: 4rem;
+  grid-column: 1 / 13;
+  text-align: center;
+
+  @include responsive(phone) {
+    padding-top: 10rem;
+  }
+
+  &__copyright {
+    color: #fff;
+    font-size: 1.8rem;
+
+    &--link {
+      text-decoration: none;
+      color: $color-red-2;
+      transition: all 0.3s;
+    }
+
+    &--link:hover {
+      color: orange;
+    }
+  }
+}

src/components/Header.tsx

@@ -40,20 +40,14 @@ const Header = ({ name, overview }: IHeader) => {
         buttonType={ButtonType.Secondary}
         label={'More Info'}
       />
-
+      <Button
-      {isMuted ? (
+        Icon={isMuted ? <MuteIcon /> : <UnmuteIcon />}
-        <MuteIcon
+        buttonType={ButtonType.IconRound}
-          onClick={() => setIsMuted(false)}
+        onClick={() => setIsMuted(!isMuted)}
-          className='header__container-btnVolume'
+        customClassName={'header__container-btnVolume'}
-        />
+      />
-      ) : (
-        <UnmuteIcon
-          onClick={() => setIsMuted(true)}
-          className='header__container-btnVolume'
-        />
-      )}
       <p className='header__container-overview'>{overview}</p>
-      <div className='header__container--fadeBottom'></div>
+      <div className='header__container--fadeBottom' />
     </header>
   )
 }

src/components/Navbar.tsx

@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom'
 import { useScroll } from '../hooks/useScroll'
 import Search from '../static/images/search-icon.svg'
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'
-import AddLogo from '../static/images/add.svg'
 import BellLogo from '../static/images/bell-logo.svg'
 import DropdownArrow from '../static/images/drop-down-arrow.svg'
 import DropdownContent from './DropdownContent'

src/static/images/mute.svg

@@ -1,3 +1,3 @@
 <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="#000" stroke-width="2" d="M1,8 L1,16 L6.09901951,16 L12,21 L12,3 L6,8 L1,8 Z M15,9 L21,15 M21,9 L15,15"/>
+  <path fill="none" stroke="#fff" stroke-width="2" d="M1,8 L1,16 L6.09901951,16 L12,21 L12,3 L6,8 L1,8 Z M15,9 L21,15 M21,9 L15,15"/>
 </svg>

src/static/images/unmute.svg

@@ -1,3 +1,3 @@
 <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="#000" stroke-width="2" d="M15,16 C17.209,16 19,14.209 19,12 C19,9.791 17.209,8 15,8 M15,20 C20,20 23,16.411 23,12 C23,7.589 19.411,4 15,4 M1,12 L1,8 L6,8 L12,3 L12,21 L6,16 L1,16 L1,12"/>
+  <path fill="none" stroke="#fff" stroke-width="2" d="M15,16 C17.209,16 19,14.209 19,12 C19,9.791 17.209,8 15,8 M15,20 C20,20 23,16.411 23,12 C23,7.589 19.411,4 15,4 M1,12 L1,8 L6,8 L12,3 L12,21 L6,16 L1,16 L1,12"/>
 </svg>

src/static/sass/layout/_footer.scss

@@ -1,28 +0,0 @@
-.footer {
-   background-color: $color-background;
-   padding-top: 15rem;
-   padding-bottom: 4rem;
-   grid-column: 1 / 13;
-   text-align: center;
-
-   @include responsive(phone) {
-      padding-top: 10rem;
-   }
-
-   &__copyright {
-      color: #fff;
-      font-size: 1.8rem;
-      
-      &--link {
-         text-decoration: none; 
-         color: $color-red-2;
-         transition: all .3s;
-
-      }
-
-      &--link:hover {
-         color: orange;
-      }
-   }  
- 
-}

src/static/sass/layout/_header.scss

@@ -60,13 +60,8 @@
       position: absolute;
       height: 3rem;
       width: 3rem;
-      top: 45rem;
+      top: 40rem;
       right: 14rem;
-      cursor: pointer;
-      border-radius: 50%;
-      padding: 1rem;
-      border: #fff solid 1px;
-      transition: all 0.3s;
 
       @include responsive(tab_medium) {
         top: 30rem;
@@ -75,16 +70,6 @@
         top: 20rem;
         right: 8rem;
       }
-
-      & > * {
-        stroke: #fff;
-        stroke-width: 1;
-      }
-
-      &:hover {
-        background-color: rgba(211, 211, 211, 0.178);
-        transition: all 0.3s;
-      }
     }
 
     &-overview {

src/static/sass/style.scss

@@ -10,6 +10,5 @@
 @import 'components/movieShowcase';
 @import 'components/notfound';
 
-@import 'layout/footer';
 @import 'layout/header';
 @import 'layout/navigation';

webpack.config.js

@@ -107,9 +107,7 @@ module.exports = () => {
           test: /\.(sass|less|css|scss)$/,
           use: [
             // fallback to style-loader in development
-            process.env.NODE_ENV !== 'production'
+            !prod ? 'style-loader' : MiniCssExtractPlugin.loader,
-              ? 'style-loader'
-              : MiniCssExtractPlugin.loader,
             'css-loader',
             'resolve-url-loader',
             'sass-loader',