goblin-gadgets 3.2.2 → 3.2.3

package/widgets/carousel/scenarios.js

@@ -1,163 +1,163 @@
-import React from 'react';
-import CarouselItem from '../carousel-item/widget';
-import Button from '../button/widget';
-
-/******************************************************************************/
-
-function getChildren(width, height, itemMargin) {
-  return (
-    <>
-      <CarouselItem
-        width={width}
-        height={height}
-        itemMargin={itemMargin}
-        backgroundColor="yellow"
-      >
-        <Button text="1/5" />
-      </CarouselItem>
-      <CarouselItem
-        width={width}
-        height={height}
-        itemMargin={itemMargin}
-        backgroundColor="orange"
-      >
-        <Button text="2/5" />
-      </CarouselItem>
-      <CarouselItem
-        width={width}
-        height={height}
-        itemMargin={itemMargin}
-        backgroundColor="red"
-      >
-        <Button text="3/5" />
-      </CarouselItem>
-      <CarouselItem
-        width={width}
-        height={height}
-        itemMargin={itemMargin}
-        backgroundColor="purple"
-      >
-        <Button text="4/5" />
-      </CarouselItem>
-      <CarouselItem
-        width={width}
-        height={height}
-        itemMargin={itemMargin}
-        backgroundColor="blue"
-      >
-        <Button text="5/5" />
-      </CarouselItem>
-    </>
-  );
-}
-
-/******************************************************************************/
-
-export default [
-  {
-    name: 'Spaced',
-    props: {
-      maxWidth: '660px',
-      itemWidth: '220px',
-      itemMargin: '10px',
-      buttonsCenter: '0px',
-      buttonsShape: 'circle',
-      buttonsSize: '40px',
-      buttonsShift: '5px',
-      cycling: 'blocked',
-      navigator: 'bullets',
-      responsive: true,
-      touch: true,
-      children: getChildren('200px', '300px', '10px'),
-    },
-  },
-  {
-    name: 'Near',
-    props: {
-      maxWidth: '606px',
-      itemWidth: '202px',
-      itemMargin: '1px',
-      buttonsCenter: '0px',
-      buttonsShape: 'circle',
-      buttonsSize: '40px',
-      buttonsShift: '5px',
-      cycling: 'blocked',
-      navigator: 'bullets',
-      responsive: true,
-      touch: true,
-      children: getChildren('200px', '300px', '1px'),
-    },
-  },
-  {
-    name: 'Compact',
-    props: {
-      maxWidth: '600px',
-      itemWidth: '200px',
-      itemMargin: '0px',
-      buttonsCenter: '0px',
-      buttonsShape: 'circle',
-      buttonsSize: '40px',
-      buttonsShift: '5px',
-      cycling: 'blocked',
-      navigator: 'bullets',
-      responsive: true,
-      touch: true,
-      children: getChildren('200px', '300px', '0px'),
-    },
-  },
-  {
-    name: '1/5',
-    props: {
-      maxWidth: '220px',
-      itemWidth: '220px',
-      itemMargin: '10px',
-      buttonsCenter: '0px',
-      buttonsShape: 'semiCircle',
-      buttonsSize: '80px',
-      forceRequiredToOverflow: 5,
-      cycling: 'blocked',
-      navigator: 'bullets',
-      responsive: true,
-      touch: true,
-      children: getChildren('200px', '300px', '10px'),
-    },
-  },
-  {
-    name: '3/5',
-    props: {
-      maxWidth: '660px',
-      itemWidth: '220px',
-      itemMargin: '10px',
-      buttonsCenter: '0px',
-      buttonsShape: 'semiCircle',
-      buttonsSize: '80px',
-      forceRequiredToOverflow: 5,
-      cycling: 'blocked',
-      navigator: 'bullets',
-      responsive: true,
-      touch: true,
-      children: getChildren('200px', '300px', '10px'),
-    },
-  },
-  {
-    name: '5/5',
-    props: {
-      maxWidth: '1100px',
-      itemWidth: '220px',
-      itemMargin: '10px',
-      buttonsCenter: '0px',
-      buttonsShape: 'semiCircle',
-      buttonsSize: '80px',
-      forceRequiredToOverflow: 5,
-      cycling: 'blocked',
-      navigator: 'bullets',
-      responsive: true,
-      touch: true,
-      children: getChildren('200px', '300px', '10px'),
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+import React from 'react';
+import CarouselItem from '../carousel-item/widget';
+import Button from '../button/widget';
+
+/******************************************************************************/
+
+function getChildren(width, height, itemMargin) {
+  return (
+    <>
+      <CarouselItem
+        width={width}
+        height={height}
+        itemMargin={itemMargin}
+        backgroundColor="yellow"
+      >
+        <Button text="1/5" />
+      </CarouselItem>
+      <CarouselItem
+        width={width}
+        height={height}
+        itemMargin={itemMargin}
+        backgroundColor="orange"
+      >
+        <Button text="2/5" />
+      </CarouselItem>
+      <CarouselItem
+        width={width}
+        height={height}
+        itemMargin={itemMargin}
+        backgroundColor="red"
+      >
+        <Button text="3/5" />
+      </CarouselItem>
+      <CarouselItem
+        width={width}
+        height={height}
+        itemMargin={itemMargin}
+        backgroundColor="purple"
+      >
+        <Button text="4/5" />
+      </CarouselItem>
+      <CarouselItem
+        width={width}
+        height={height}
+        itemMargin={itemMargin}
+        backgroundColor="blue"
+      >
+        <Button text="5/5" />
+      </CarouselItem>
+    </>
+  );
+}
+
+/******************************************************************************/
+
+export default [
+  {
+    name: 'Spaced',
+    props: {
+      maxWidth: '660px',
+      itemWidth: '220px',
+      itemMargin: '10px',
+      buttonsCenter: '0px',
+      buttonsShape: 'circle',
+      buttonsSize: '40px',
+      buttonsShift: '5px',
+      cycling: 'blocked',
+      navigator: 'bullets',
+      responsive: true,
+      touch: true,
+      children: getChildren('200px', '300px', '10px'),
+    },
+  },
+  {
+    name: 'Near',
+    props: {
+      maxWidth: '606px',
+      itemWidth: '202px',
+      itemMargin: '1px',
+      buttonsCenter: '0px',
+      buttonsShape: 'circle',
+      buttonsSize: '40px',
+      buttonsShift: '5px',
+      cycling: 'blocked',
+      navigator: 'bullets',
+      responsive: true,
+      touch: true,
+      children: getChildren('200px', '300px', '1px'),
+    },
+  },
+  {
+    name: 'Compact',
+    props: {
+      maxWidth: '600px',
+      itemWidth: '200px',
+      itemMargin: '0px',
+      buttonsCenter: '0px',
+      buttonsShape: 'circle',
+      buttonsSize: '40px',
+      buttonsShift: '5px',
+      cycling: 'blocked',
+      navigator: 'bullets',
+      responsive: true,
+      touch: true,
+      children: getChildren('200px', '300px', '0px'),
+    },
+  },
+  {
+    name: '1/5',
+    props: {
+      maxWidth: '220px',
+      itemWidth: '220px',
+      itemMargin: '10px',
+      buttonsCenter: '0px',
+      buttonsShape: 'semiCircle',
+      buttonsSize: '80px',
+      forceRequiredToOverflow: 5,
+      cycling: 'blocked',
+      navigator: 'bullets',
+      responsive: true,
+      touch: true,
+      children: getChildren('200px', '300px', '10px'),
+    },
+  },
+  {
+    name: '3/5',
+    props: {
+      maxWidth: '660px',
+      itemWidth: '220px',
+      itemMargin: '10px',
+      buttonsCenter: '0px',
+      buttonsShape: 'semiCircle',
+      buttonsSize: '80px',
+      forceRequiredToOverflow: 5,
+      cycling: 'blocked',
+      navigator: 'bullets',
+      responsive: true,
+      touch: true,
+      children: getChildren('200px', '300px', '10px'),
+    },
+  },
+  {
+    name: '5/5',
+    props: {
+      maxWidth: '1100px',
+      itemWidth: '220px',
+      itemMargin: '10px',
+      buttonsCenter: '0px',
+      buttonsShape: 'semiCircle',
+      buttonsSize: '80px',
+      forceRequiredToOverflow: 5,
+      cycling: 'blocked',
+      navigator: 'bullets',
+      responsive: true,
+      touch: true,
+      children: getChildren('200px', '300px', '10px'),
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];

package/widgets/carousel/styles.js

@@ -1,133 +1,133 @@
-import {Unit} from 'goblin-theme';
-
-/******************************************************************************/
-
-export const propNames = [
-  'maxWidth',
-  'buttonsSize',
-  'buttonsTop',
-  'buttonsBottom',
-  'buttonsCenter',
-  'buttonsShift',
-  'navigator',
-];
-
-export default function styles(theme, props) {
-  const {
-    maxWidth,
-    buttonsSize = '40px',
-    buttonsTop,
-    buttonsBottom,
-    buttonsShift = '0px',
-    buttonsCenter,
-    navigator,
-  } = props;
-
-  const bullets = navigator === 'bullets';
-
-  const carousel = {
-    //? width: 'calc(100vw - 80px)',
-    width: '100vw',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  };
-
-  const carouselShrinked = {
-    position: 'relative',
-    alignSelf: 'center',
-    overflowX: 'hidden',
-    overflowY: 'hidden',
-  };
-
-  const carouselShrinked_SIMPLE = {
-    width: '100%',
-    position: 'relative',
-    alignSelf: 'center',
-    overflowX: 'hidden',
-    overflowY: 'hidden',
-  };
-
-  const carouselShrinked_MEDIA = {
-    'position': 'relative',
-    'alignSelf': 'center',
-    'overflowX': 'hidden',
-    'overflowY': 'hidden',
-    'maxWidth': '1240px',
-    '@media (min-width: 820px) and (max-width: 1240px)': {
-      maxWidth: '820px',
-    },
-    '@media (min-width: 410px) and (max-width: 820px)': {
-      maxWidth: '410px',
-    },
-  };
-
-  const horizontalBand = {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'row',
-    transition: '0.2s ease-out',
-  };
-
-  /******************************************************************************/
-
-  const touchLayer = {
-    position: 'absolute',
-    top: '0px',
-    bottom: bullets ? '30px' : '0px', // keep space for navigator
-    left: '0px',
-    right: '0px',
-  };
-
-  const navigatorStyle = {
-    height: '20px',
-    margin: '10px 0px 0px 0px',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  };
-
-  /******************************************************************************/
-
-  let top = buttonsTop;
-  if (buttonsCenter) {
-    const hn = bullets ? Unit.multiply('30px', 0.5) : '0px';
-    top = `calc(50% - ${hn} - ${Unit.multiply(
-      buttonsSize,
-      0.5
-    )} + ${buttonsCenter})`;
-  }
-
-  const buttonPrev = {
-    position: 'absolute',
-    top: top,
-    bottom: buttonsBottom,
-    left: buttonsShift,
-  };
-
-  const buttonNext = {
-    position: 'absolute',
-    top: top,
-    bottom: buttonsBottom,
-    right: buttonsShift,
-  };
-
-  /******************************************************************************/
-
-  return {
-    carousel,
-    carouselShrinked,
-    carouselShrinked_SIMPLE,
-    carouselShrinked_MEDIA,
-    horizontalBand,
-
-    touchLayer,
-    navigator: navigatorStyle,
-
-    buttonPrev,
-    buttonNext,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+
+/******************************************************************************/
+
+export const propNames = [
+  'maxWidth',
+  'buttonsSize',
+  'buttonsTop',
+  'buttonsBottom',
+  'buttonsCenter',
+  'buttonsShift',
+  'navigator',
+];
+
+export default function styles(theme, props) {
+  const {
+    maxWidth,
+    buttonsSize = '40px',
+    buttonsTop,
+    buttonsBottom,
+    buttonsShift = '0px',
+    buttonsCenter,
+    navigator,
+  } = props;
+
+  const bullets = navigator === 'bullets';
+
+  const carousel = {
+    //? width: 'calc(100vw - 80px)',
+    width: '100vw',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  };
+
+  const carouselShrinked = {
+    position: 'relative',
+    alignSelf: 'center',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+  };
+
+  const carouselShrinked_SIMPLE = {
+    width: '100%',
+    position: 'relative',
+    alignSelf: 'center',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+  };
+
+  const carouselShrinked_MEDIA = {
+    'position': 'relative',
+    'alignSelf': 'center',
+    'overflowX': 'hidden',
+    'overflowY': 'hidden',
+    'maxWidth': '1240px',
+    '@media (min-width: 820px) and (max-width: 1240px)': {
+      maxWidth: '820px',
+    },
+    '@media (min-width: 410px) and (max-width: 820px)': {
+      maxWidth: '410px',
+    },
+  };
+
+  const horizontalBand = {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    transition: '0.2s ease-out',
+  };
+
+  /******************************************************************************/
+
+  const touchLayer = {
+    position: 'absolute',
+    top: '0px',
+    bottom: bullets ? '30px' : '0px', // keep space for navigator
+    left: '0px',
+    right: '0px',
+  };
+
+  const navigatorStyle = {
+    height: '20px',
+    margin: '10px 0px 0px 0px',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  /******************************************************************************/
+
+  let top = buttonsTop;
+  if (buttonsCenter) {
+    const hn = bullets ? Unit.multiply('30px', 0.5) : '0px';
+    top = `calc(50% - ${hn} - ${Unit.multiply(
+      buttonsSize,
+      0.5
+    )} + ${buttonsCenter})`;
+  }
+
+  const buttonPrev = {
+    position: 'absolute',
+    top: top,
+    bottom: buttonsBottom,
+    left: buttonsShift,
+  };
+
+  const buttonNext = {
+    position: 'absolute',
+    top: top,
+    bottom: buttonsBottom,
+    right: buttonsShift,
+  };
+
+  /******************************************************************************/
+
+  return {
+    carousel,
+    carouselShrinked,
+    carouselShrinked_SIMPLE,
+    carouselShrinked_MEDIA,
+    horizontalBand,
+
+    touchLayer,
+    navigator: navigatorStyle,
+
+    buttonPrev,
+    buttonNext,
+  };
+}
+
+/******************************************************************************/