@fox-dls/carousels 1.1.6 → 1.2.0

package/src/lib/pills/index.tsx

@@ -2,12 +2,19 @@
 /* eslint-disable unused-imports/no-unused-vars */
 import React, { useRef, useState } from 'react';
 
-import { css } from 'styled-components';
 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 +35,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 +49,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 +102,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 +117,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;
+`;

package/tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.build.json",
-  "include": ["src", "types", "../../types"]
+  "include": ["src", "types", "../../types", "../styled.d.ts"]
 }