Commit f77d10ee authored by y.troniak's avatar y.troniak

Fixing some errors

adding:
Slider
Image
Icon
parent e72e45fa
PUBLIC_URL="/assets/"
REACT_APP_ROOT_URL=""
REACT_APP_STORAGE_VERSION=1.0
REACT_APP_ROOT_URL="https://etergo.com"
NODE_ENV="development"
......@@ -24,11 +24,17 @@ module.exports = {
// 'sass-loader',
// ],
// },
{
test: /\.svg$/,
loader: 'svg-inline-loader',
include: path.resolve(__dirname, "../")
}
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 //files that larger than this limit in bytes will be extended files
}
}
]
}
]
}
};
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>ic_configure_appscooter</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M38.25,40.5 C39.4932864,40.5 40.5,39.4932864 40.5,38.25 L40.5,9.75 C40.5,8.50671356 39.4932864,7.5 38.25,7.5 L9.75,7.5 C8.50671356,7.5 7.5,8.50671356 7.5,9.75 L7.5,38.25 C7.5,39.4932864 8.50671356,40.5 9.75,40.5 L38.25,40.5 Z M38.25,42 L9.75,42 C7.67828644,42 6,40.3217136 6,38.25 L6,9.75 C6,7.67828644 7.67828644,6 9.75,6 L38.25,6 C40.3217136,6 42,7.67828644 42,9.75 L42,38.25 C42,40.3217136 40.3217136,42 38.25,42 Z M6.75,12.75 C6.33578644,12.75 6,12.4142136 6,12 C6,11.5857864 6.33578644,11.25 6.75,11.25 L41.25,11.25 C41.6642136,11.25 42,11.5857864 42,12 C42,12.4142136 41.6642136,12.75 41.25,12.75 L6.75,12.75 Z M10.125,10.5 C9.50378644,10.5 9,9.99621356 9,9.375 C9,8.75378644 9.50378644,8.25 10.125,8.25 C10.746065,8.25 11.2497591,8.75354556 11.2499999,9.37455443 C11.25,9.99621356 10.7462136,10.5 10.125,10.5 Z M13.875,10.5 C13.2537864,10.5 12.75,9.99621356 12.75,9.375 C12.75,8.75378644 13.2537864,8.25 13.875,8.25 C14.496065,8.25 14.9997591,8.75354556 14.9999999,9.37455443 C15,9.99621356 14.4962136,10.5 13.875,10.5 Z M17.625,10.5 C17.0037864,10.5 16.5,9.99621356 16.5,9.375 C16.5,8.75378644 17.0037864,8.25 17.625,8.25 C18.2462136,8.25 18.75,8.75378644 18.75,9.375 C18.75,9.99621356 18.2462136,10.5 17.625,10.5 Z M31.6339286,16.3660714 C31.6339286,16.6767316 31.3820887,16.9285714 31.0714286,16.9285714 C30.7607684,16.9285714 30.5089286,16.6767316 30.5089286,16.3660714 L30.5089286,15.2410714 C30.5089286,14.9304113 30.7607684,14.6785714 31.0714286,14.6785714 C31.3820887,14.6785714 31.6339286,14.9304113 31.6339286,15.2410714 L31.6339286,16.3660714 Z M30.5564479,33.429996 C30.5078499,33.1231605 30.7171927,32.8350248 31.0240282,32.7864269 C31.3308636,32.7378289 31.6189993,32.9471718 31.6675973,33.2540072 C31.8967019,34.7005171 33.2550559,35.687419 34.7015658,35.4583143 C36.1480756,35.2292097 37.1349776,33.8708557 36.9058729,32.4243458 C36.7198723,31.2499843 35.7781816,30.3518933 34.6162522,30.2071049 C34.3079762,30.1686906 34.0892101,29.8876425 34.1276245,29.5793666 C34.1660388,29.2710906 34.4470868,29.0523245 34.7553628,29.0907389 C36.4113721,29.2970946 37.7521083,30.5757556 38.0170223,32.2483571 C38.3433229,34.3085378 36.9377353,36.2431631 34.8775545,36.5694637 C32.8173738,36.8957643 30.8827484,35.4901767 30.5564479,33.429996 Z M15,34.6875 C13.9792594,34.6875 13.1517857,33.8600263 13.1517857,32.8392857 C13.1517857,31.8185451 13.9792594,30.9910714 15,30.9910714 C16.0207406,30.9910714 16.8482143,31.8185451 16.8482143,32.8392857 C16.8482143,33.8600263 16.0207406,34.6875 15,34.6875 Z M15,33.5625 C15.3994202,33.5625 15.7232143,33.2387059 15.7232143,32.8392857 C15.7232143,32.4398655 15.3994202,32.1160714 15,32.1160714 C14.6005798,32.1160714 14.2767857,32.4398655 14.2767857,32.8392857 C14.2767857,33.2387059 14.6005798,33.5625 15,33.5625 Z M29.1428571,17.4107143 C28.3883967,17.4107143 27.7767857,18.0223253 27.7767857,18.7767857 C27.7767857,19.5312461 28.3883967,20.1428571 29.1428571,20.1428571 L31.7142857,20.1428571 C32.4687461,20.1428571 33.0803571,19.5312461 33.0803571,18.7767857 C33.0803571,18.0223253 32.4687461,17.4107143 31.7142857,17.4107143 L29.1428571,17.4107143 Z M29.1428571,16.2857143 L31.7142857,16.2857143 C33.0900665,16.2857143 34.2053571,17.401005 34.2053571,18.7767857 C34.2053571,20.1525665 33.0900665,21.2678571 31.7142857,21.2678571 L29.1428571,21.2678571 C27.7670764,21.2678571 26.6517857,20.1525665 26.6517857,18.7767857 C26.6517857,17.401005 27.7670764,16.2857143 29.1428571,16.2857143 Z M34.2857143,34.6875 C33.2649737,34.6875 32.4375,33.8600263 32.4375,32.8392857 C32.4375,31.8185451 33.2649737,30.9910714 34.2857143,30.9910714 C35.3064549,30.9910714 36.1339286,31.8185451 36.1339286,32.8392857 C36.1339286,33.8600263 35.3064549,34.6875 34.2857143,34.6875 Z M9.9375,27.405601 C9.9375,26.5550027 10.2415395,26.1208821 10.9308042,25.6463097 C11.030579,25.5780502 11.0785235,25.5451576 11.1225187,25.5141165 C11.6402527,25.148826 11.8311059,24.814371 11.8311059,23.9222217 C11.8311059,22.2504336 14.7154888,21.3317292 18.2831027,21.297164 C21.9651058,21.2614906 24.7459987,22.2004633 24.7459987,24.1485941 C24.7459987,24.2658644 24.7454137,24.3884663 24.7442791,24.5283766 C24.7434959,24.6249448 24.7427315,24.701987 24.7409139,24.8745422 C24.7184105,27.0102042 24.8051192,27.8745003 25.2439951,28.6729612 C25.7956983,29.6766921 26.9393794,30.204723 29.0440441,30.204723 C30.1041735,30.204723 30.6064475,29.838204 30.781603,29.0999637 C30.9516269,28.3833515 30.8109824,27.332476 30.4014596,26.0144274 C30.2212061,25.4342814 29.9949783,24.8190933 29.7174486,24.1372009 C29.5886832,23.8208238 29.454717,23.5038779 29.2903699,23.1238662 C29.2431729,23.0147348 28.9794305,22.4090607 28.9131374,22.2547078 C28.6051983,21.5377211 28.5,21.2509649 28.5,21.0003637 C28.5,20.6897036 28.7518398,20.4378637 29.0625,20.4378637 L31.875,20.4378637 C32.0300253,20.4378637 32.178178,20.5018437 32.2844689,20.6146936 C34.099149,22.5413531 36.0892163,25.3431108 36.132157,26.3789261 C36.1767142,27.4537367 35.5748502,29.4699612 34.5168748,31.039054 C32.9765388,33.3235403 30.6208775,34.6875 27.4234403,34.6875 C21.0725516,34.6875 9.9375,29.8761094 9.9375,27.405601 Z M29.8420721,21.5628637 C29.8736854,21.6389708 29.9086315,21.7218042 29.9468312,21.8107461 C30.0117774,21.9619629 30.2747175,22.5657945 30.3229415,22.6773006 C30.4902507,23.0641614 30.6271949,23.3881526 30.759451,23.7131066 C31.0481343,24.4224033 31.2849498,25.066383 31.4757976,25.6806265 C31.9401601,27.1751769 32.1040212,28.399523 31.8762154,29.3596723 C31.5763769,30.6234233 30.6084708,31.329723 29.0440441,31.329723 C26.5636433,31.329723 25.0318149,30.6224867 24.2581076,29.2148567 C23.6888176,28.1791295 23.5912759,27.2068525 23.6159764,24.8626888 C23.6177887,24.6905995 23.6185427,24.6146123 23.6193161,24.5192534 C23.6204278,24.3821731 23.6209987,24.2625142 23.6209987,24.1485941 C23.6209987,23.1536169 21.3663879,22.3923441 18.2940019,22.4221112 C15.3676641,22.4504633 12.9561059,23.2185684 12.9561059,23.9222217 C12.9561059,25.1981862 12.5749074,25.8662061 11.7710872,26.4333465 C11.72003,26.4693703 11.6647328,26.5073073 11.5687906,26.5729156 C11.1544615,26.8581893 11.0625,26.9894958 11.0625,27.405601 C11.0625,27.9073528 13.4706113,29.5253798 16.6502483,30.8992823 C20.3989587,32.5190781 24.4155838,33.5625 27.4234403,33.5625 C30.230623,33.5625 32.2450048,32.3961457 33.5840998,30.4101218 C34.5108767,29.0356106 35.0424967,27.2547012 35.0081224,26.4255239 C34.9823346,25.8034699 33.1951048,23.2673589 31.6299436,21.5628637 L30.2916333,21.5628637 L29.8420721,21.5628637 Z M34.2857143,33.5625 C34.6851345,33.5625 35.0089286,33.2387059 35.0089286,32.8392857 C35.0089286,32.4398655 34.6851345,32.1160714 34.2857143,32.1160714 C33.8862941,32.1160714 33.5625,32.4398655 33.5625,32.8392857 C33.5625,33.2387059 33.8862941,33.5625 34.2857143,33.5625 Z M13.1114647,29.5685315 C13.3805043,29.4132014 13.7245239,29.5053812 13.879854,29.7744208 C14.035184,30.0434604 13.9430043,30.38748 13.6739647,30.5428101 C12.4056351,31.2750805 11.9710733,32.8968872 12.7033437,34.1652167 C13.4356141,35.4335463 15.0574208,35.8681081 16.3257504,35.1358377 C17.320708,34.5613986 17.8246511,33.4190151 17.5994144,32.3112135 C17.5375178,32.006782 17.7341312,31.7098144 18.0385627,31.6479178 C18.3429942,31.5860212 18.6399618,31.7826346 18.7018584,32.0870661 C19.0227703,33.6654352 18.3052285,35.2920235 16.8882504,36.1101163 C15.0818416,37.1530468 12.7719957,36.5341255 11.7290652,34.7277167 C10.6861346,32.921308 11.3050559,30.6114621 13.1114647,29.5685315 Z M24.5625,24.5625 L24.5625,25.6875 L17.4107143,25.6875 C17.1000541,25.6875 16.8482143,25.4356602 16.8482143,25.125 C16.8482143,24.8143398 17.1000541,24.5625 17.4107143,24.5625 L24.5625,24.5625 Z" id="path-1"></path>
</defs>
<g id="ic_configure_appscooter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Combined-Shape" fill="#203840" fill-rule="nonzero" xlink:href="#path-1"></use>
</g>
</svg>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
{
"name": "ui-kit",
"version": "0.1.7",
"version": "0.1.8",
"private": true,
"main": "dist/index.js",
"scripts": {
......@@ -25,7 +25,9 @@
],
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0"
"react-dom": "^16.6.0",
"react-lazyload": "^2.3.0",
"react-slick": "^0.23.2"
},
"peerDependencies": {
"react": "^16.2.0",
......@@ -57,7 +59,6 @@
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
......
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Oval 4</title>
<desc>Created with Sketch.</desc>
<g id="👁️-Icons-✅" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 Z M17.3333333,12.6666667 L14,16 L17.3333333,19.3333333" id="Oval-4" stroke="#30AFBF" stroke-width="2"></path>
</g>
</svg>
\ No newline at end of file
......@@ -52,6 +52,7 @@ export const iconNames = [
'ic-pre-order',
'zoom-in',
'zoom-out',
'arrow_circle'
];
export const iconSizes = ['inherit', 'small', 'medium', 'medium-plus', 'large', 'larger', 'extra-large', 'huge'];
......
import PropTypes from 'prop-types';
import SVG from 'react-inlinesvg';
import React, { PureComponent } from 'react';
import { iconColors, iconNames, iconSizes } from "./iconNames";
import React, {PureComponent} from 'react';
import {iconColors, iconNames, iconSizes} from "./iconNames";
import './icons.scss'
export default class Icon extends PureComponent {
......@@ -13,7 +13,7 @@ export default class Icon extends PureComponent {
};
render() {
const { name, size, color, extraClasses } = this.props;
const {name, size, color, extraClasses} = this.props;
// eslint-disable-next-line
const icon = require(`./assets/${name}.svg`);
return (
......
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import LazyLoad from 'react-lazyload';
/**
* Formula to compute which src to load properly
* for screens with 450px wide with 1x pixel density
* 480w/(450px/640px * 90%) = 1.6
* 1500w/(450px/640px * 100%) = 16
* in the case above 0.66 is closer to a screen with 1x pixel ratio
* but if the pixel ratio would be 2 the larger thing would load.
*/
class Image extends Component {
state = {
didLoad: false,
};
onLoad = () => {
this.setState({ didLoad: true });
};
render() {
const {
alt = '',
className,
desktop = '1210x605',
mobile = '375x195',
src,
crop = false,
lazyLoad = false,
} = this.props;
if (!src) return null;
const link = src && src.startsWith('http') ? src : `${process.env.REACT_APP_ROOT_URL}${src}`;
const generateSrcSet = dimensions => {
const [width, height] = dimensions.split('x');
return `${link}?width=${width}&height=${height}&${crop ? 'crop=1' : ''}`;
};
const style = this.state.didLoad ? {} : { visibility: 'hidden' };
const img = (
<img
sizes="(max-width: 640px) 90vw, 64rem"
srcSet={`${generateSrcSet(mobile)} 480w, ${generateSrcSet(desktop)} 1200w`}
style={style}
src={link}
onLoad={this.onLoad}
alt={alt}
{...className && { className }}
/>
);
return lazyLoad ? (
<LazyLoad once height={200}>
{img}
</LazyLoad>
) : (
img
);
}
}
Image.propTypes = {
alt: PropTypes.string,
className: PropTypes.string,
desktop: PropTypes.string,
mobile: PropTypes.string,
src: PropTypes.string.isRequired,
crop: PropTypes.bool,
lazyLoad: PropTypes.bool,
};
export default Image;
import React from 'react';
import Slider from 'react-slick';
import PropTypes from 'prop-types';
import {SliderArrow} from "./sliderArrow";
import Index from "../../atoms/Image/index";
import './styles.scss'
const EtergoSlider = (
{
dots = true,
infinite = true,
speed = 500,
slidesToShow = 1,
slidesToScroll = 1,
arrows = true,
adaptiveHeight = true,
className = 'custom__slider',
nextArrow = <SliderArrow right={true}/>,
prevArrow = <SliderArrow/>,
images = []
}) => {
return (
<Slider
dots={dots}
infinite={infinite}
speed={speed}
slidesToShow={slidesToShow}
slidesToScroll={slidesToScroll}
arrows={arrows}
adaptiveHeight={adaptiveHeight}
className={className}
nextArrow={nextArrow}
prevArrow={prevArrow}
images={images}
responsive={[
{
breakpoint: 1024,
settings: {
dotsClass: 'slick-dots',
},
},
]}
dotsClass="slick-dots"
customPaging={i => <button>{i}</button>}
>
{images.map((el, i) => (
<Index key={i} src={el}/>
))}
</Slider>
);
};
EtergoSlider.propTypes = {
dots: PropTypes.bool,
infinite: PropTypes.bool,
speed: PropTypes.number,
slidesToShow: PropTypes.number,
slidesToScroll: PropTypes.number,
arrows: PropTypes.bool,
adaptiveHeight: PropTypes.bool,
className: PropTypes.string,
nextArrow: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
prevArrow: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
images: PropTypes.array,
}
export default EtergoSlider;
import PropTypes from 'prop-types';
import React from 'react';
import Icon from "../../atoms/Icons";
export const SliderArrow = props => {
const { onClick, color = 'current' } = props;
return (
<div className={`slider__arrow ${props.right ? 'slider__arrow--right' : ''}`} role="none" onClick={onClick}>
<Icon name={`${props.right ? 'arrow_circle' : 'arrow_circle'}`} color={color} />
</div>
);
};
SliderArrow.propTypes = {
className: PropTypes.string,
currentSlide: PropTypes.number,
onClick: PropTypes.func,
right: PropTypes.bool,
slideCount: PropTypes.number,
style: PropTypes.object,
};
@import '../../styles/utilities/variables';
@import '../../styles/utilities/mixins';
/* Slider */
.slick-slider {
box-sizing: border-box;
display: block;
font-family: $font-numbers;
position: relative;
touch-action: pan-y;
user-select: none;
}
.slick-list {
display: block;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
&:focus {
outline: none;
}
&.dragging {
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: translate3d(0, 0, 0);
}
.slick-track {
display: block;
left: 0;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0;
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
font-size: 0;
max-height: 100%;
}
&.slick-loading img {
display: none;
}
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
border: 1px solid transparent;
display: block;
height: auto;
}
}
.slick-arrow.slick-hidden {
display: none;
}
.slider-thumbs {
// sass-lint:disable no-important
display: flex !important; // to overlap display:block of react-slick
flex-direction: row;
li {
border: .125rem solid palette(white);
cursor: pointer;
margin: 0 .25rem;
button {
display: block;
padding: 0;
}
&.slick-active {
border-color: palette(blue, light);
}
}
}
.custom__slider {
.slider__arrow {
background: transparent;
bottom: 0;
margin: auto;
top: 0;
&--right {
left: auto;
}
}
.slick-track {
img {
width: 100%;
}
}
.slick-dots {
bottom: 0;
list-style: none;
margin: 0;
position: absolute;
text-align: center;
width: 100%;
.slick-active {
button {
background-color: palette(blue, light);
height: .6rem;
opacity: 1;
width: .6rem;
}
}
li {
display: inline-block;
height: 1rem;
margin: 0 .3rem;
padding: 0;
position: relative;
width: 1rem;
button {
background-color: palette(blue, light);
border: 0;
border-radius: 50%;
cursor: pointer;
display: block;
font-size: 0;
height: .375rem;
line-height: 0;
margin: auto;
opacity: .7;
outline: 0;
overflow: hidden;
transition: width $transition-time, opacity $transition-time*2;
width: .375rem;
}
}
}
}
.slider {
&--with-background {
background: palette(grey, menu);
.slick-slider {
padding: 0 3rem;
}
}
&--pre-order {
position: relative;
.slider__image {
margin: 0 auto;
max-height: calc(100vh - 10rem);
width: auto;
@include breakpoint(md) {
margin: 0 0 0 auto;
}
}
.slick-arrow {
position: absolute;
top: 50%;
&.slick-prev {
left: -1rem;
}
&.slick-next {
right: -1rem;
}
}
}
&__control {
// sass-lint:disable no-important
display: flex !important; //important is the only way to make this block flex, and remove inline value
// sass-lint:enable no-important
justify-content: space-between;
width: auto;
@include breakpoint(md) {
bottom: 1.5rem;
left: 1.5rem;
}
li {
border: 2px solid transparent;
flex-grow: 1;
margin: 1rem .5rem;
transition: border-color $transition-time;
@include breakpoint(md) {
margin-bottom: 1rem;
}
&.slick-active {
box-shadow: 0 0 8px 0 rgba(32, 56, 64, .2);
}
}
}
&__arrow {
background: palette(blue);
bottom: 0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 2rem;
left: 0;
position: absolute;
text-align: center;
width: 2rem;
z-index: $z-index-1;
line-height: 0;
svg {
path {
fill: transparent;
}
}
&--right {
left: auto;
right: 0;
svg {
transform: rotate(180deg);
}
}
}
&__image {
width: 100%;
}
}
import Footer from './components/Footer';
import Icon from './atoms/Icons';
import Image from './atoms/Index';
import Breadcrumb from './components/BreadCrumb';
import EtergoSlider from './components/EtergoSlider';
import Section from './atoms/Section';
......@@ -8,5 +10,7 @@ export {
Footer,
Icon,
Breadcrumb,
Section
Section,
EtergoSlider,
Image
}
......@@ -7,12 +7,14 @@ import Icon from "../atoms/Icons";
import {iconColors, iconNames, iconSizes} from "../atoms/Icons/iconNames";
import Footer from "../components/Footer";
import Section from "../atoms/Section";
import EtergoSlider from "../components/EtergoSlider";
import Index from "../atoms/Image/index";
storiesOf('Icon', module)
.add('Etergo Icons', () => iconNames.map((name, i) =>
<div className='box__item' key={i}>
<h4>{name}</h4>
<Icon name={name} color={"current"} size={"huge"}/>
<Icon name={name} color={"current"} size={"large"}/>
</div>))
.add('Icons sizes', () => iconSizes.map((size, i) =>
<div className='box__item' key={i}>
......@@ -61,3 +63,59 @@ storiesOf('Section', module)
</div>
));
const imagesArray = [
"/media/uploads/page/red_glossy_01_p0m6IJi.png",
"/media/uploads/page/red_glossy_02_QzWsXI8.png",
"/media/uploads/page/red_glossy_03_LGecbZB.png",
"/media/uploads/page/red_glossy_04_kUuLUIB.png",
"/media/uploads/page/red_glossy_05.png"
]
storiesOf('Index', module)
.add('image', () => (
<div className="container">
<Section style={{background: '#eee'}} className="center-xs row">
<h5>Simple image</h5>
<Index src={imagesArray[0]}/>
</Section>
<Section style={{background: '#eee'}} className="center-xs row">
<h5>Cropped image <b>crop desktop="400x200" mobile="250x30"</b></h5>
<Index src={imagesArray[0]} crop desktop="400x200" mobile="250x30"/>
</Section>
<Section style={{background: '#eee'}} className="center-xs row">
<h5>custom height <b>desktop="88x88" mobile="40x40"</b></h5>
<Index src={imagesArray[0]} desktop="88x88" mobile="40x40"/>
</Section>
</div>
))
storiesOf('Slider', module).add('default slider', () => (
<div className="container">
<Section style={{background: '#eee'}} className="center-xs row">
<div className="col-xs-12 col-md-6">
<EtergoSlider images={imagesArray}/>
</div>
</Section>
</div>
)).add('Some options', () => (
<div className="container">
<Section style={{background: '#eee'}} className="center-xs row">
<div className="col-xs-12 col-md-6">
<h5>Without arrows</h5>
<EtergoSlider images={imagesArray} arrows={false}/>
</div>
<div className="col-xs-12 col-md-6">
<h5>Without dots</h5>
<EtergoSlider images={imagesArray} dots={false}/>
</div>
<div className="col-xs-12 col-md-6">
<h5>Pure slider</h5>
<EtergoSlider images={imagesArray} dots={false} arrows={false}/>
</div>
<div className="col-xs-12 col-md-6">
<h5>Custom slided shown</h5>
<EtergoSlider images={imagesArray} slidesToShow={2} slidesToScroll={3}/>
</div>
</Section>
</div>
))
......@@ -2,39 +2,46 @@ const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
},
{
test: /\.css$/,