Carousel slider

components/CarouselSlide/index.js

@@ -0,0 +1 @@
+export { default as React } from './react'

components/CarouselSlide/react.README.md

@@ -0,0 +1,3 @@
+# Usage
+
+Pass in children to the CarouselSlide to create a responsive carousel slider that works for all screenns and devices.

components/CarouselSlide/react.js

@@ -0,0 +1,75 @@
+import React from 'react';
+// components
+import ReactCarousel from 'react-elastic-carousel';
+// icons
+import { mChevronRight, mChevronLeft } from '@masonite/svg-icons';
+// css
+import classes from './style.module.scss';
+
+const CarouselSlide = ({ children }) => {
+  const breakPoints = [
+    { width: 1, itemsToShow: 1, itemsToScroll: 1 },
+    { width: 768, itemsToShow: 2, itemsToScroll: 2 },
+    { width: 1200, itemsToShow: 3, itemsToScroll: 3 },
+  ];
+
+  return (
+    <ReactCarousel breakPoints={breakPoints} showArrows={false} renderPagination={CarouselPagination}>
+      {children}
+    </ReactCarousel>
+  );
+};
+
+const getPaginationOptions = (pages, activePage) => {
+  if (pages.length === 0) {
+    return [];
+  }
+  // return all page options if we have 5 or less
+  if (pages.length <= 5) {
+    return pages;
+  }
+
+  // if we are in the first 2 items, just return 5 options 0-4
+  // since we know at this point we have more than 5 options
+  if (activePage === 0 || activePage === 1) {
+    return [0, 1, 2, 3, 4];
+  }
+
+  // if we are at one of the last 2 items then we need
+  // to just return the last 5 pages
+  if (activePage === pages.length - 1 || activePage === pages.length - 2) {
+    return [pages.length - 5, pages.length - 4, pages.length - 3, pages.length - 2, pages.length - 1];
+  }
+
+  // otherwise we are somewhere in the middle, center the current page
+  // and return 2 before and 2 after
+  return [activePage - 2, activePage - 1, activePage, activePage + 1, activePage + 2];
+};
+
+const CarouselPagination = ({ pages = [], activePage, onClick }) => {
+  return (
+    <div className={classes.pagination}>
+      <button disabled={activePage === 0} onClick={() => onClick(activePage - 1)}>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: mChevronLeft,
+          }}
+        />
+      </button>
+      {getPaginationOptions(pages, activePage).map((index) => (
+        <button key={`pagination-index-${index}`} onClick={() => onClick(index)} className={activePage === index ? classes.active : ''}>
+          {index + 1}
+        </button>
+      ))}
+      <button disabled={activePage === pages.length - 1} onClick={() => onClick(activePage + 1)}>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: mChevronRight,
+          }}
+        />
+      </button>
+    </div>
+  );
+};
+
+export default CarouselSlide;

components/CarouselSlide/react.stories.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import CarouselSlide from './react';
+import TrendCard from '../TrendCard/react';
+import Readme from './react.README.md';
+
+storiesOf('CarouselSlide', module)
+  .addParameters({ readme: { sidebar: Readme } })
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    const squareImage = boolean('Square image', false);
+    return (
+      <CarouselSlide>
+        <TrendCard
+          title='Why Stile and Rail Doors are Worth the Investment'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/img/masonite/8hui9fjtwo/exact/Harring_Hotel%20Indigo_2_L2.jpeg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Attack Resistant Door Opening'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/download/masonite/ja05d7snlv/Attack-Resiatant_Library_mobil.jpg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Reasons to Use Acoustically-Rated Doors in Healthcare Construction'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/img/masonite/v5g5khzopv/exact/CHUM_020706_10_N407.jpeg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Adding Security Features to Wood Doors in Office Construction'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/download/masonite/rhcsfxmw8l/Etsy_CF041517_2.jpg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='The Most In-Demand Colors for Factory Painted Doors for 2020'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/img/masonite/yxzvpmqv3y/300x300px/MDF-3-Panel-MockShaker-CEN301-WinterWhite-bty.jpeg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Variations of Authentic Wood Veneers for Doors'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/img/masonite/m6wbtcs5ft/exact/Hotel%20Indigo_bar%20area_L8.jpeg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Why Stile and Rail Doors are Worth the Investment'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/img/masonite/8hui9fjtwo/exact/Harring_Hotel%20Indigo_2_L2.jpeg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Attack Resistant Door Opening'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/download/masonite/ja05d7snlv/Attack-Resiatant_Library_mobil.jpg'
+          squareImage={squareImage}
+        />
+        <TrendCard
+          title='Reasons to Use Acoustically-Rated Doors in Healthcare Construction'
+          content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+          image='https://embed.widencdn.net/img/masonite/v5g5khzopv/exact/CHUM_020706_10_N407.jpeg'
+          squareImage={squareImage}
+        />
+      </CarouselSlide>
+    );
+  });