@fox-dls/carousels 1.1.8 → 1.1.9

package/.ultra.cache.json

@@ -1 +1 @@
-{"files":{"dist":"1638924269667.5444","node_modules":"1638922874290.3389",".babelrc":"f03d0ca709d39fade7fd0a5ff24f9384b515b5b6",".eslintrc.json":"6a0edde9387ee5887d1e599f7a99f09362754acd","CHANGELOG.md":"938ca134a8f27f19d16eafbc8064d38ea166b934","README.md":"87a167329bff7478ccaa650e3d382475d8115cb1","package.json":"8512485560e1085b1d0365303d0dfa2ffc86681a.1638924073109.6638","src/index.ts":"1666f11be8aaf18be8a632f73ad0e73d407aae26.1638920053704.4468","src/lib/card/index.tsx":"52c971cf55cfeb66bdb2f5be883f9a3a2fb62a37","src/lib/card/styles/index.tsx":"0e2c3284b69f0e5c3eabfcbaac81864ff10e5969","src/lib/free/index.tsx":"31d5d59052261c935edb986a1817ee7f273bbbd4","src/lib/free/styles/index.tsx":"5265cb7c9d6bf16b5b09c82bbac9d6aa8d32d798","src/lib/pagination/index.tsx":"561112dbc7d2eeb6e18037ca090a81a6dbe7ac07","src/lib/pagination/styles/index.tsx":"457b030d259318e0431b4d585406078e7ee4faab","src/lib/pills/index.tsx":"c472c9de1791a116bd7e5c1dbe650c3256f6128a","src/lib/pills/styles/index.tsx":"5b249d5b210dd9e81edff8a3412d4b7b9e2ad9a2","src/lib/styles/index.tsx":"276419cd5a78d7b7e027c6f2dc459ea3e81bb85d","tsconfig.build.json":"269572b997c81ac83266026b6b5a2c8699709823.1638923968110.791","tsconfig.json":"af31a7a31827eeec44ed853b8c3000c67f639047.del"},"deps":{"@fox-dls/layout":1638924264191.6038}}
+{"files":{"dist":"1638924930456.3694","node_modules":"1638922874290.3389",".babelrc":"f03d0ca709d39fade7fd0a5ff24f9384b515b5b6",".eslintrc.json":"6a0edde9387ee5887d1e599f7a99f09362754acd","CHANGELOG.md":"938ca134a8f27f19d16eafbc8064d38ea166b934","README.md":"87a167329bff7478ccaa650e3d382475d8115cb1","package.json":"8512485560e1085b1d0365303d0dfa2ffc86681a.1638924872688.9985","src/index.ts":"1666f11be8aaf18be8a632f73ad0e73d407aae26.1638924862097.1138","src/lib/card/index.tsx":"52c971cf55cfeb66bdb2f5be883f9a3a2fb62a37","src/lib/card/styles/index.tsx":"0e2c3284b69f0e5c3eabfcbaac81864ff10e5969","src/lib/free/index.tsx":"31d5d59052261c935edb986a1817ee7f273bbbd4","src/lib/free/styles/index.tsx":"5265cb7c9d6bf16b5b09c82bbac9d6aa8d32d798","src/lib/pagination/index.tsx":"561112dbc7d2eeb6e18037ca090a81a6dbe7ac07","src/lib/pagination/styles/index.tsx":"457b030d259318e0431b4d585406078e7ee4faab","src/lib/pills/index.tsx":"c472c9de1791a116bd7e5c1dbe650c3256f6128a","src/lib/pills/styles/index.tsx":"5b249d5b210dd9e81edff8a3412d4b7b9e2ad9a2","src/lib/styles/index.tsx":"276419cd5a78d7b7e027c6f2dc459ea3e81bb85d","tsconfig.build.json":"269572b997c81ac83266026b6b5a2c8699709823.1638923968110.791","tsconfig.json":"af31a7a31827eeec44ed853b8c3000c67f639047.del"},"deps":{"@fox-dls/layout":1638924264191.6038}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fox-dls/carousels",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/core.esm.js",

package/src/lib/card/index.tsx

@@ -52,11 +52,7 @@ export const CardCarousel: React.FC<any> = ({
                     aria-label="Previous"
                     type="button"
                   >
-                    <span
-                      css={`
-                        position: relative;
-                      `}
-                    >
+                    <span style={{ position: 'relative' }}>
                       <ArrowsIconClip />
                       <ArrowsSvg
                         viewBox="0 0 32 32"
@@ -73,11 +69,7 @@ export const CardCarousel: React.FC<any> = ({
                   </ArrowsButton>
                   <ArrowsDivider />
                   <ArrowsButton aria-label="Next" type="button" ref={nextRef}>
-                    <span
-                      css={`
-                        position: relative;
-                      `}
-                    >
+                    <span style={{ position: 'relative' }}>
                       <ArrowsIconClip />
                       <ArrowsSvg
                         viewBox="0 0 32 32"

package/src/lib/free/index.tsx

@@ -20,7 +20,7 @@ import {
   ArrowsIconClip,
   ArrowsSvg
 } from '../styles';
-import { CarouselSwiper } from './styles';
+import { CarouselSwiper, CarouselMedia } from './styles';
 
 SwiperCore.use([Navigation]);
 
@@ -37,13 +37,7 @@ export const FreeCarousel: React.FC<any> = ({
   const nextRef = useRef<HTMLDivElement>(null);
   return (
     <CarouselContainer>
-      <div
-        css={`
-          @media (max-width: 744px) {
-            display: none !important;
-          }
-        `}
-      >
+      <CarouselMedia>
         <Container>
           {navigation && (
             <CarouselNavbar>
@@ -63,11 +57,7 @@ export const FreeCarousel: React.FC<any> = ({
                         aria-label="Previous"
                         type="button"
                       >
-                        <span
-                          css={`
-                            position: relative;
-                          `}
-                        >
+                        <span style={{ position: 'relative' }}>
                           <ArrowsIconClip />
                           <ArrowsSvg
                             viewBox="0 0 32 32"
@@ -88,11 +78,7 @@ export const FreeCarousel: React.FC<any> = ({
                         type="button"
                         ref={nextRef}
                       >
-                        <span
-                          css={`
-                            position: relative;
-                          `}
-                        >
+                        <span style={{ position: 'relative' }}>
                           <ArrowsIconClip />
                           <ArrowsSvg
                             viewBox="0 0 32 32"
@@ -114,7 +100,7 @@ export const FreeCarousel: React.FC<any> = ({
             </CarouselNavbar>
           )}
         </Container>
-      </div>
+      </CarouselMedia>
       <CarouselSwiper
         {...props}
         cssMode

package/src/lib/free/styles/index.tsx

@@ -78,3 +78,9 @@ export const CarouselSwiper = styled(Swiper)`
     }
   }
 `;
+
+export const CarouselMedia = styled.div`
+  @media (max-width: 744px) {
+    display: none !important;
+  }
+`;

package/src/lib/pagination/index.tsx

@@ -5,7 +5,12 @@ import SwiperCore, { Navigation, Pagination } from 'swiper';
 // eslint-disable-next-line import/extensions
 import { SwiperSlide } from 'swiper/react';
 
-import { CarouselSwiper, CarouselPillSvg, CarouselPill } from './styles';
+import {
+  CarouselSwiper,
+  CarouselPillSvg,
+  CarouselPill,
+  CarouselPillAnimatedContainer
+} from './styles';
 
 SwiperCore.use([Navigation, Pagination]);
 
@@ -20,37 +25,9 @@ export const PaginationCarousel: React.FC<any> = ({
   const nextRef = useRef<HTMLDivElement>(null);
   return (
     <>
-      <div
-        css={`
-          @keyframes fadein {
-            0% {
-              opacity: 0;
-            }
-
-            100% {
-              opacity: 1;
-            }
-          }
-          position: absolute !important;
-          top: 50% !important;
-          pointer-events: auto !important;
-          transform: translateY(-50%) !important;
-          left: 8px !important;
-          animation-duration: 0.3s !important;
-          animation-name: fadein !important;
-          z-index: 180 !important;
-          opacity: 0 !important;
-          :hover {
-            opacity: 1 !important;
-          }
-        `}
-      >
+      <CarouselPillAnimatedContainer>
         <CarouselPill ref={prevRef}>
-          <span
-            css={`
-              position: relative !important;
-            `}
-          >
+          <span style={{ position: 'relative' }}>
             <CarouselPillSvg
               viewBox="0 0 16 16"
               role="presentation"
@@ -61,38 +38,10 @@ export const PaginationCarousel: React.FC<any> = ({
             </CarouselPillSvg>
           </span>
         </CarouselPill>
-      </div>
-      <div
-        css={`
-          @keyframes fadein {
-            0% {
-              opacity: 0;
-            }
-
-            100% {
-              opacity: 1;
-            }
-          }
-          position: absolute !important;
-          top: 50% !important;
-          pointer-events: auto !important;
-          transform: translateY(-50%) !important;
-          right: 8px !important;
-          animation-duration: 0.3s !important;
-          animation-name: fadein !important;
-          z-index: 180 !important;
-          opacity: 0 !important;
-          :hover {
-            opacity: 1 !important;
-          }
-        `}
-      >
+      </CarouselPillAnimatedContainer>
+      <CarouselPillAnimatedContainer>
         <CarouselPill ref={nextRef}>
-          <span
-            css={`
-              position: relative !important;
-            `}
-          >
+          <span style={{ position: 'relative' }}>
             <CarouselPillSvg
               viewBox="0 0 16 16"
               role="presentation"
@@ -103,7 +52,7 @@ export const PaginationCarousel: React.FC<any> = ({
             </CarouselPillSvg>
           </span>
         </CarouselPill>
-      </div>
+      </CarouselPillAnimatedContainer>
       <CarouselSwiper
         {...props}
         pagination={{

package/src/lib/pagination/styles/index.tsx

@@ -78,3 +78,27 @@ export const CarouselPillSvg = styled.svg`
   display: block;
   fill: currentcolor;
 `;
+
+export const CarouselPillAnimatedContainer = styled.div`
+  @keyframes fadein {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+  position: absolute !important;
+  top: 50% !important;
+  pointer-events: auto !important;
+  transform: translateY(-50%) !important;
+  left: 8px !important;
+  animation-duration: 0.3s !important;
+  animation-name: fadein !important;
+  z-index: 180 !important;
+  opacity: 0 !important;
+  :hover {
+    opacity: 1 !important;
+  }
+`;

package/src/lib/pills/index.tsx

@@ -2,12 +2,20 @@
 /* eslint-disable unused-imports/no-unused-vars */
 import React, { useRef, useState } from 'react';
 
-import { css } from 'styled-components';
+import { css } from 'styled-components/macro';
 import SwiperCore, { Navigation } from 'swiper';
 // eslint-disable-next-line import/extensions
 import { SwiperSlide } from 'swiper/react';
 
-import { CarouselSwiper, CarouselPillContainer, CarouselPill } from './styles';
+import {
+  CarouselSwiper,
+  CarouselPillContainer,
+  CarouselPill,
+  CarouselPillFlex,
+  CarouselPillArrowContainer,
+  CarouselPillInlineChild,
+  CarouselPillArrowSVG
+} from './styles';
 
 SwiperCore.use([Navigation]);
 
@@ -28,30 +36,10 @@ export const PillsCarousel: React.FC<any> = ({
   });
   const [swiper, setSwiper] = useState<any>(null);
   return (
-    <div
-      css={`
-        display: flex !important;
-        position: relative !important;
-        min-width: 0px !important;
-      `}
-    >
-      <div
-        css={`
-          position: absolute !important;
-          left: 0px !important;
-          z-index: 3 !important;
-          width: 65px !important;
-          background: linear-gradient(
-            to right,
-            rgb(255, 255, 255) 56.77%,
-            rgba(255, 255, 255, 0) 94.47%
-          ) !important;
-          ${swiperSlides.isBeginning &&
-          css`
-            display: none !important;
-            visibility: hidden !important;
-          `}
-        `}
+    <CarouselPillFlex>
+      <CarouselPillArrowContainer
+        start={true}
+        hidden={swiperSlides.isBeginning}
       >
         {arrows && (
           <CarouselPillContainer>
@@ -62,36 +50,23 @@ export const PillsCarousel: React.FC<any> = ({
               type="button"
               onClick={() => swiper.slidePrev()}
             >
-              <span
-                css={`
-                  position: relative !important;
-                `}
-              >
-                <svg
+              <span style={{ position: 'relative' }}>
+                <CarouselPillArrowSVG
                   viewBox="0 0 32 32"
                   xmlns="http://www.w3.org/2000/svg"
                   aria-hidden="true"
                   role="presentation"
                   focusable="false"
-                  css={`
-                    display: block;
-                    fill: none;
-                    height: 12px;
-                    width: 12px;
-                    stroke: currentcolor;
-                    stroke-width: 5.33333;
-                    overflow: visible;
-                  `}
                 >
                   <g fill="none">
                     <path d="m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932" />
                   </g>
-                </svg>
+                </CarouselPillArrowSVG>
               </span>
             </CarouselPill>
           </CarouselPillContainer>
         )}
-      </div>
+      </CarouselPillArrowContainer>
 
       <CarouselSwiper
         {...props}
@@ -128,42 +103,12 @@ export const PillsCarousel: React.FC<any> = ({
       >
         {React.Children.map(children, child => (
           <SwiperSlide>
-            <div
-              css={`
-                display: inline-block !important;
-                white-space: nowrap !important;
-                padding-right: 8px !important;
-                padding-top: 4px !important;
-                padding-bottom: 4px !important;
-              `}
-            >
-              {child}
-            </div>
+            <CarouselPillInlineChild>{child}</CarouselPillInlineChild>
           </SwiperSlide>
         ))}
       </CarouselSwiper>
 
-      <div
-        css={`
-          -webkit-box-pack: end !important;
-          position: absolute !important;
-          right: 0px !important;
-          z-index: 3 !important;
-          width: 75px !important;
-          display: flex !important;
-          justify-content: flex-end !important;
-          background: linear-gradient(
-            to left,
-            rgb(255, 255, 255) 56.77%,
-            rgba(255, 255, 255, 0) 94.47%
-          ) !important;
-          ${swiperSlides.isEnd &&
-          css`
-            display: none !important;
-            visibility: hidden !important;
-          `}
-        `}
-      >
+      <CarouselPillArrowContainer hidden={swiperSlides.isEnd} end={true}>
         {arrows && (
           <CarouselPillContainer>
             <CarouselPill
@@ -173,36 +118,23 @@ export const PillsCarousel: React.FC<any> = ({
               ref={nextRef}
               onClick={() => swiper.slideNext()}
             >
-              <span
-                css={`
-                  position: relative !important;
-                `}
-              >
-                <svg
+              <span style={{ position: 'relative' }}>
+                <CarouselPillArrowSVG
                   viewBox="0 0 32 32"
                   xmlns="http://www.w3.org/2000/svg"
                   aria-hidden="true"
                   role="presentation"
                   focusable="false"
-                  css={`
-                    display: block;
-                    fill: none;
-                    height: 12px;
-                    width: 12px;
-                    stroke: currentcolor;
-                    stroke-width: 5.33333;
-                    overflow: visible;
-                  `}
                 >
                   <g fill="none">
                     <path d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932" />
                   </g>
-                </svg>
+                </CarouselPillArrowSVG>
               </span>
             </CarouselPill>
           </CarouselPillContainer>
         )}
-      </div>
-    </div>
+      </CarouselPillArrowContainer>
+    </CarouselPillFlex>
   );
 };

package/src/lib/pills/styles/index.tsx

@@ -1,5 +1,5 @@
 import ButtonUnstyled from '@mui/core/ButtonUnstyled';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // eslint-disable-next-line import/extensions
 import { Swiper } from 'swiper/react';
 
@@ -56,3 +56,61 @@ export const CarouselPill = styled(ButtonUnstyled)<any>`
     border: 1px solid rgb(221, 221, 221) !important;
   }
 `;
+
+export const CarouselPillFlex = styled.div`
+  display: flex !important;
+  position: relative !important;
+  min-width: 0px !important;
+`;
+
+export const CarouselPillArrowContainer = styled.div<any>`
+  position: absolute !important;
+  background: linear-gradient(
+    to left,
+    rgb(255, 255, 255) 56.77%,
+    rgba(255, 255, 255, 0) 94.47%
+  ) !important;
+  z-index: 3 !important;
+
+  ${props =>
+    props.start &&
+    css`
+      left: 0px !important;
+      width: 65px !important;
+    `}
+
+  ${props =>
+    props.end &&
+    css`
+      -webkit-box-pack: end !important;
+      right: 0px !important;
+      width: 75px !important;
+      display: flex !important;
+      justify-content: flex-end !important;
+    `}
+
+  ${props =>
+    props.hidden &&
+    css`
+      display: none !important;
+      visibility: hidden !important;
+    `}
+`;
+
+export const CarouselPillInlineChild = styled.div`
+  display: inline-block !important;
+  white-space: nowrap !important;
+  padding-right: 8px !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+`;
+
+export const CarouselPillArrowSVG = styled.svg`
+  display: block;
+  fill: none;
+  height: 12px;
+  width: 12px;
+  stroke: currentcolor;
+  stroke-width: 5.33333;
+  overflow: visible;
+`;