@elvia/elvis-carousel - npm Package Compare versions

Comparing version 0.0.1-beta.6 to 1.0.0

CHANGELOG.md

 # Elvia Carousel Changelog
 
-## 1.0.0 (28.06.21)
+## 1.0.0 (01.10.21)
 
@@ -8,2 +8,1 @@ ### New features
 - First version of the Carousel component
-

dist/react/js/elvia-carousel.js

@@ -6,4 +6,4 @@ /*
 import React, { useState, useRef, useEffect } from 'react';
-import { CarouselContainer, CarouselTitle, CarouselElement, LeftCarouselButton, ListOfDots, Dot, NavigationRow, RightCarouselButton, CarouselElementContainer, CheckButton } from './StyledComponents';
-import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import { CarouselContainer, CarouselElement, CarouselTitle, LeftCarouselButton, ListOfDots, Dot, NavigationRow, RightCarouselButton, CarouselElementContainer, CheckButton } from './StyledComponents';
 // don't know why it says it does not exist
@@ -20,9 +20,10 @@ export const Carousel = ({
 }) => {
+  const [carouselElements, setCarouselElements] = useState();
+  const [lengthOfElements, setLengthOfElements] = useState(0);
   const [index, setIndex] = useState(value);
   const [isDown, setIsDown] = useState(false);
   const [startX, setStartX] = useState(0);
-  const [slideIn, setSlideIn] = useState(true);
+  const [fadeIn, setFadeIn] = useState(true);
   const [slideDirection, setSlideDirection] = useState('left');
   const itemsRef = useRef(null);
-  const lengthOfElements = typeof elements === 'object' ? elements.length : elements;
   const hideLeftArrow = hideArrows && index === 0;
@@ -44,11 +45,69 @@ const hideRightArrow = hideArrows && index === lengthOfElements - 1;
     }
-  }; // Is necessary since the web component does not send all props at once
+  };
 
+  useEffect(() => {
+    if (!webcomponent) {
+      return;
+    } // Get slotted items from web component
 
+
+    const slots = webcomponent.getAllSlots();
+    const slotElements = Object.keys(slots).filter(el => {
+      return el.includes('element-');
+    });
+
+    if (!slotElements) {
+      return;
+    }
+
+    const newElements = [];
+
+    for (let i = 1; i < slotElements.length + 1; i++) {
+      const newEl = {
+        title: '',
+        element: ''
+      };
+      const title = Object.keys(slots).find(el => {
+        return el === 'title-' + i;
+      });
+      const element = Object.keys(slots).find(el => {
+        return el === 'element-' + i;
+      });
+      newEl.title = /*#__PURE__*/React.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: title ? slots[title].innerHTML : ''
+        }
+      });
+      newEl.element = /*#__PURE__*/React.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: element ? slots[element].innerHTML : ''
+        }
+      });
+      newElements.push(newEl);
+    }
+
+    setCarouselElements(newElements);
+  }, [webcomponent]); // Is necessary since the web component
+
   useEffect(() => {
     setIndex(index);
-  }, [index]);
+  }, [index]); // Is necessary since the web component
 
+  useEffect(() => {
+    if (elements !== undefined) {
+      setCarouselElements(elements);
+      setLengthOfElements(typeof elements === 'object' ? elements.length : typeof elements === 'string' ? +elements : elements);
+    }
+  }, [elements]); // Is necessary since the web component
+
+  useEffect(() => {
+    if (!carouselElements || typeof carouselElements === 'number') {
+      return;
+    }
+
+    setLengthOfElements(carouselElements.length);
+  }, [carouselElements]);
+
   const handleMouseDown = e => {
-    const clientX = "changedTouches" in e ? e.changedTouches[0].clientX : e.clientX;
+    const clientX = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;
 
@@ -68,3 +127,3 @@ if (!itemsRef.current) {
 
-    const clientX = "changedTouches" in e ? e.changedTouches[0].clientX : e.clientX;
+    const clientX = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;
 
@@ -87,28 +146,33 @@ if (!itemsRef.current) {
 
-  const handleButtonClick = (index, direction) => {
+  const handleButtonClick = (index, direction, dotClick) => {
     setIsDown(false);
     const oppositeDirection = direction === 'left' ? 'right' : 'left';
     setSlideDirection(oppositeDirection);
-    setSlideIn(false);
+    setFadeIn(false);
     setTimeout(() => {
       // Using modulo to be able to carousel to next element
       // For decrement you have to add the length of elements to prevent negative values
-      direction === 'left' ? updateValue((index - 1 + lengthOfElements) % lengthOfElements) : updateValue((index + 1) % lengthOfElements);
+      if (dotClick) {
+        updateValue(index);
+      } else {
+        direction === 'left' ? updateValue((index - 1 + lengthOfElements) % lengthOfElements) : updateValue((index + 1) % lengthOfElements);
+      }
+
       setSlideDirection(direction);
-      setSlideIn(true);
-    }, 500);
+      setFadeIn(true);
+    }, 480);
   };
 
+  const classNameContainer = classnames({
+    ['exit-animation']: !fadeIn,
+    ['enter-animation']: fadeIn
+  });
   return /*#__PURE__*/React.createElement(CarouselContainer, {
     slideDirection: slideDirection,
     className: className
-  }, typeof elements === 'object' && /*#__PURE__*/React.createElement(CSSTransition, {
-    in: slideIn,
-    classNames: 'carousel',
-    timeout: {
-      appear: 300,
-      enter: 1000,
-      exit: 1000
-    }
-  }, /*#__PURE__*/React.createElement(CarouselElementContainer, null, /*#__PURE__*/React.createElement(CarouselTitle, null, elements[index].title), /*#__PURE__*/React.createElement(CarouselElement, {
+  }, typeof carouselElements === 'object' && /*#__PURE__*/React.createElement(CarouselElementContainer, {
+    className: classNameContainer
+  }, typeof carouselElements[index].title === 'string' && /*#__PURE__*/React.createElement(CarouselTitle, null, /*#__PURE__*/React.createElement("h2", {
+    className: "e-title-sm"
+  }, carouselElements[index].title)), typeof carouselElements[index].title === 'object' && /*#__PURE__*/React.createElement(CarouselTitle, null, carouselElements[index].title), /*#__PURE__*/React.createElement(CarouselElement, {
     ref: itemsRef,
@@ -122,4 +186,4 @@ onMouseDown: e => handleMouseDown(e),
     onTouchEnd: () => setIsDown(false)
-  }, elements[index].element))), /*#__PURE__*/React.createElement(NavigationRow, null, /*#__PURE__*/React.createElement(LeftCarouselButton, {
-    "aria-label": `Gå til side ${index + 1}`,
+  }, carouselElements[index].element)), /*#__PURE__*/React.createElement(NavigationRow, null, /*#__PURE__*/React.createElement(LeftCarouselButton, {
+    "aria-label": `Gå til forrige side`,
     "aria-hidden": hideLeftArrow,
@@ -133,8 +197,8 @@ hidden: hideLeftArrow,
     "aria-label": listIndex === index ? `Du er på side ${listIndex + 1}` : `Gå til side ${listIndex + 1}`,
-    onClick: () => updateValue(listIndex)
+    onClick: () => listIndex !== index && handleButtonClick(listIndex, listIndex > index ? 'right' : 'left', true)
   }))), showOnboardingCheckmark ? /*#__PURE__*/React.createElement(CheckButton, {
-    "aria-label": "Introduksjonsstegene er fullført. Lukk introduksjon",
+    "aria-label": 'Fullfør og lukk.',
     onClick: () => onHide && onHide()
   }, /*#__PURE__*/React.createElement("i", null)) : /*#__PURE__*/React.createElement(RightCarouselButton, {
-    "aria-label": `Gå til side ${index + 1}`,
+    "aria-label": `Gå til neste side`,
     "aria-hidden": hideRightArrow,
@@ -141,0 +205,0 @@ hidden: hideRightArrow,

dist/react/js/StyledComponents.js

@@ -13,198 +13,41 @@ /*
 const mobileMax = '767px';
-export const CarouselContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  overflow: hidden;
-
-  .carousel-enter {
-    transform: ${props => props.slideDirection === 'left' ? 'translateX(-30%)' : 'translateX(30%)'};
-  }
-
-  .carousel-enter-active {
-    transform: translateX(0);
-    transition: all 500ms ease-in;
-  }
-
-  .carousel-exit {
-    transform: translateX(0);
-  }
-
-  .carousel-exit-active {
-    transform: ${props => props.slideDirection === 'left' ? 'translateX(-30%)' : 'translateX(30%)'};
-    transition: all 500ms ease-in;
-  }
-`;
-export const CarouselElementContainer = styled.div`
-  transform: scale(0.98);
-  cursor: pointer;
-
-  // Prevent imagine dragging
-  // Note: This does not work for Firefox
-  img {
-    -webkit-user-drag: none;
-    -khtml-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-    user-drag: none;
-  }
-
-  &:active {
-    cursor: grabbing;
-    cursor: -webkit-grabbing;
-    transform: scale(1);
-    user-select: none;
-  }
-`;
-export const CarouselTitle = styled.h2`
-  font-family: 'Red Hat Display', Verdana, sans-serif;
-  font-weight: 700;
-  line-height: '28px';
-  font-size: '30px';
-  color: ${ElviaColors.elviaOff};
-  text-transform: 'unset';
-  letter-spacing: 'unset';
-  font-style: unset;
-  * {
-    margin: 0px;
-    font-family: 'Red Hat Display', Verdana, sans-serif;
-    font-weight: 700;
-    line-height: '28px';
-    font-size: '30px';
-    color: ${ElviaColors.elviaOff};
-    text-transform: 'unset';
-    letter-spacing: 'unset';
-    font-style: unset;
-  }
-`;
-export const CarouselElement = styled.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
-  font-family: 'Red Hat Text', Verdana, sans-serif;
-  line-height: '28px';
-  font-size: '16px';
-  color: ${ElviaColors.elviaOff};
-  text-transform: 'unset';
-  letter-spacing: 'unset';
-  padding-bottom: '10px';
-  font-style: unset;
-  * {
-    margin: 0px;
-    font-family: 'Red Hat Text', Verdana, sans-serif;
-    line-height: '28px';
-    font-size: '16px';
-    color: ${ElviaColors.elviaOff};
-    text-transform: 'unset';
-    letter-spacing: 'unset';
-    font-style: unset;
-  }
-`;
-export const NavigationRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-
-  @media (max-width: ${mobileMax}) {
-    justify-content: space-between;
-  }
-`;
-export const ListOfDots = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding: 0px 24px;
-`;
-export const Dot = styled.button`
-  border: 1px solid
-    ${props => props.isSelected ? ElviaColors.elviaCharge : ElviaColors.elviaOff};
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background-color: ${props => props.isSelected ? ElviaColors.elviaCharge : ElviaColors.elviaOn};
-  margin: 8px;
-  cursor: pointer;
-  padding: 0;
-  &:hover {
-    background-color: ${ElviaColors.elviaCharge};
-  }
-`;
-export const LeftCarouselButton = styled.button`
-  border: none;
-  background: transparent;
-  display: flex;
-  padding: 24px 0px 24px 16px;
-  visibility: ${props => props.hidden ? 'hidden' : 'visible'};
-
-  cursor: pointer;
-  &:hover {
-    i {
-      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12z' fill='%2329D305'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.4 12a.8.8 0 01.8-.8h9.6a.8.8 0 110 1.6H7.2a.8.8 0 01-.8-.8z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.766 7.434a.8.8 0 010 1.132L8.33 12l3.435 3.434a.8.8 0 11-1.132 1.132l-4-4a.8.8 0 010-1.132l4-4a.8.8 0 011.132 0z' fill='black'/%3e%3c/svg%3e");
-    }
-  }
-
-  i {
-    border: none;
-    border-radius: 50%;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.4 12a.8.8 0 01.8-.8h9.6a.8.8 0 110 1.6H7.2a.8.8 0 01-.8-.8z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.766 7.434a.8.8 0 010 1.132L8.33 12l3.435 3.434a.8.8 0 11-1.132 1.132l-4-4a.8.8 0 010-1.132l4-4a.8.8 0 011.132 0z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.6C6.256 1.6 1.6 6.256 1.6 12c0 5.744 4.656 10.4 10.4 10.4 5.744 0 10.4-4.656 10.4-10.4 0-5.744-4.656-10.4-10.4-10.4zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12z' fill='%2329D305'/%3e%3c/svg%3e");
-    background-color: ${ElviaColors.elviaOn};
-    display: inline-block;
-    height: 32px;
-    width: 32px;
-  }
-`;
-export const RightCarouselButton = styled.button`
-  margin-left: 0;
-  border: none;
-  background: transparent;
-  display: flex;
-  padding: 24px 16px 24px 0px;
-  visibility: ${props => props.hidden ? 'hidden' : 'visible'};
-  cursor: pointer;
-  &:hover {
-    i {
-      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z' fill='%2329D305'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.366 7.434a.8.8 0 10-1.132 1.132L14.87 11.2H7.2a.8.8 0 100 1.6h7.669l-2.635 2.634a.8.8 0 101.132 1.132l3.996-3.996a.77.77 0 00.166-.237.798.798 0 00-.166-.902l-3.996-3.997z' fill='black'/%3e%3c/svg%3e");
-    }
-  }
-  i {
-    border: none;
-    border-radius: 50%;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.366 7.434a.8.8 0 10-1.132 1.132L14.87 11.2H7.2a.8.8 0 100 1.6h7.669l-2.635 2.634a.8.8 0 101.132 1.132l3.996-3.996a.77.77 0 00.166-.237.798.798 0 00-.166-.902l-3.996-3.997z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22.4c5.744 0 10.4-4.656 10.4-10.4 0-5.744-4.656-10.4-10.4-10.4C6.256 1.6 1.6 6.256 1.6 12c0 5.744 4.656 10.4 10.4 10.4zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z' fill='%2329D305'/%3e%3c/svg%3e");
-    background-color: ${ElviaColors.elviaOn};
-    display: inline-block;
-    height: 32px;
-    width: 32px;
-  }
-`;
-export const CheckButton = styled.button`
-  margin-left: 0;
-  border: none;
-  background: transparent;
-  display: flex;
-  padding: 24px 16px 24px 0px;
-  cursor: pointer;
-  &:hover {
-    i {
-      background-color: ${ElviaColors.elviaCharge};
-    }
-  }
-  i {
-    border: none;
-    border-radius: 50%;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0)' fill='%2329D305'%3e%3cpath d='M12 23.997c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z'/%3e%3cpath  fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M6.53 11.307a.75.75 0 011.061 0l3.005 3.002 6.54-6.534a.75.75 0 011.062 1.06l-7.072 7.063a.75.75 0 01-1.06 0L6.53 12.366a.748.748 0 010-1.06z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0'%3e%3cpath d='M0 0h24v24H0V0z' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
-    display: inline-block;
-    display: inline-block;
-    height: 32px;
-    width: 32px;
-  }
-`;
+export const CarouselContainer = styled.div.withConfig({
+  displayName: "StyledComponents__CarouselContainer",
+  componentId: "sc-1925xqb-0"
+})(["display:flex;justify-content:center;flex-direction:column;overflow:hidden;@keyframes exitLeft{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}@keyframes exitRight{0%{transform:translateX(0);}100%{transform:translateX(100%);}}@keyframes fadeInOpacity{0%{opacity:0;}100%{opacity:1;}}.exit-animation{animation:", " 500ms ease-in;}.enter-animation{animation:fadeInOpacity 0.5s ease-in;}"], props => props.slideDirection === 'left' ? 'exitLeft' : 'exitRight');
+export const CarouselElementContainer = styled.div.withConfig({
+  displayName: "StyledComponents__CarouselElementContainer",
+  componentId: "sc-1925xqb-1"
+})(["margin-bottom:24px;img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;}&:active{cursor:grabbing;cursor:-webkit-grabbing;user-select:none;@media (hover:none){transform:scale(0.98);}}"]);
+export const CarouselElement = styled.div.withConfig({
+  displayName: "StyledComponents__CarouselElement",
+  componentId: "sc-1925xqb-2"
+})(["display:flex;align-items:center;flex-direction:column;font-family:'Red Hat Text',Verdana,sans-serif;line-height:'28px';font-size:'16px';color:", ";text-transform:'unset';letter-spacing:'unset';padding-bottom:'10px';font-style:unset;*{margin:0px;font-family:'Red Hat Text',Verdana,sans-serif;line-height:'28px';font-size:'16px';color:", ";text-transform:'unset';letter-spacing:'unset';font-style:unset;}"], ElviaColors.elviaOff, ElviaColors.elviaOff);
+export const CarouselTitle = styled.div.withConfig({
+  displayName: "StyledComponents__CarouselTitle",
+  componentId: "sc-1925xqb-3"
+})(["margin-top:0;*{margin-top:0;}"]);
+export const NavigationRow = styled.div.withConfig({
+  displayName: "StyledComponents__NavigationRow",
+  componentId: "sc-1925xqb-4"
+})(["display:flex;align-items:center;justify-content:flex-start;width:100%;@media (max-width:", "){justify-content:space-between;}"], mobileMax);
+export const ListOfDots = styled.div.withConfig({
+  displayName: "StyledComponents__ListOfDots",
+  componentId: "sc-1925xqb-5"
+})(["display:flex;flex-direction:row;align-items:center;padding:0px 24px;"]);
+export const Dot = styled.button.withConfig({
+  displayName: "StyledComponents__Dot",
+  componentId: "sc-1925xqb-6"
+})(["border:1px solid ", ";height:", ";width:", ";@media (max-width:767px){border:1px solid ", ";height:", ";width:", ";}border-radius:50%;background-color:", ";margin:", ";cursor:pointer;padding:0;&:hover{background-color:", ";}"], props => props.isSelected ? ElviaColors.elviaCharge : ElviaColors.elviaOff, props => props.isSelected ? '9px' : '8px', props => props.isSelected ? '9px' : '8px', props => props.isSelected ? ElviaColors.elviaCharge : ElviaColors.elviaOff, props => props.isSelected ? '13px' : '12px', props => props.isSelected ? '13px' : '12px', props => props.isSelected ? ElviaColors.elviaCharge : ElviaColors.elviaOn, props => props.isSelected ? '7.5px' : '8px', ElviaColors.elviaCharge);
+export const LeftCarouselButton = styled.button.withConfig({
+  displayName: "StyledComponents__LeftCarouselButton",
+  componentId: "sc-1925xqb-7"
+})(["border:none;background:transparent;display:flex;padding:0px;visibility:", ";cursor:pointer;&:hover{i{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12z' fill='%2329D305'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.4 12a.8.8 0 01.8-.8h9.6a.8.8 0 110 1.6H7.2a.8.8 0 01-.8-.8z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.766 7.434a.8.8 0 010 1.132L8.33 12l3.435 3.434a.8.8 0 11-1.132 1.132l-4-4a.8.8 0 010-1.132l4-4a.8.8 0 011.132 0z' fill='black'/%3e%3c/svg%3e\");}}i{border:none;border-radius:50%;background-size:contain;background-position:center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.4 12a.8.8 0 01.8-.8h9.6a.8.8 0 110 1.6H7.2a.8.8 0 01-.8-.8z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.766 7.434a.8.8 0 010 1.132L8.33 12l3.435 3.434a.8.8 0 11-1.132 1.132l-4-4a.8.8 0 010-1.132l4-4a.8.8 0 011.132 0z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.6C6.256 1.6 1.6 6.256 1.6 12c0 5.744 4.656 10.4 10.4 10.4 5.744 0 10.4-4.656 10.4-10.4 0-5.744-4.656-10.4-10.4-10.4zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12z' fill='%2329D305'/%3e%3c/svg%3e\");background-color:", ";display:inline-block;height:32px;width:32px;}"], props => props.hidden ? 'hidden' : 'visible', ElviaColors.elviaOn);
+export const RightCarouselButton = styled.button.withConfig({
+  displayName: "StyledComponents__RightCarouselButton",
+  componentId: "sc-1925xqb-8"
+})(["margin-left:0;border:none;background:transparent;display:flex;padding:0px;visibility:", ";cursor:pointer;&:hover{i{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z' fill='%2329D305'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.366 7.434a.8.8 0 10-1.132 1.132L14.87 11.2H7.2a.8.8 0 100 1.6h7.669l-2.635 2.634a.8.8 0 101.132 1.132l3.996-3.996a.77.77 0 00.166-.237.798.798 0 00-.166-.902l-3.996-3.997z' fill='black'/%3e%3c/svg%3e\");}}i{border:none;border-radius:50%;background-size:contain;background-position:center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.366 7.434a.8.8 0 10-1.132 1.132L14.87 11.2H7.2a.8.8 0 100 1.6h7.669l-2.635 2.634a.8.8 0 101.132 1.132l3.996-3.996a.77.77 0 00.166-.237.798.798 0 00-.166-.902l-3.996-3.997z' fill='black'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22.4c5.744 0 10.4-4.656 10.4-10.4 0-5.744-4.656-10.4-10.4-10.4C6.256 1.6 1.6 6.256 1.6 12c0 5.744 4.656 10.4 10.4 10.4zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z' fill='%2329D305'/%3e%3c/svg%3e\");background-color:", ";display:inline-block;height:32px;width:32px;}"], props => props.hidden ? 'hidden' : 'visible', ElviaColors.elviaOn);
+export const CheckButton = styled.button.withConfig({
+  displayName: "StyledComponents__CheckButton",
+  componentId: "sc-1925xqb-9"
+})(["margin-left:0;border:none;background:transparent;display:flex;padding:24px 16px 24px 0px;cursor:pointer;&:hover{i{background-color:", ";}}i{border:none;border-radius:50%;background-size:contain;background-position:center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0)' fill='%2329D305'%3e%3cpath d='M12 23.997c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z'/%3e%3cpath  fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M6.53 11.307a.75.75 0 011.061 0l3.005 3.002 6.54-6.534a.75.75 0 011.062 1.06l-7.072 7.063a.75.75 0 01-1.06 0L6.53 12.366a.748.748 0 010-1.06z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0'%3e%3cpath d='M0 0h24v24H0V0z' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\");display:inline-block;display:inline-block;height:32px;width:32px;}"], ElviaColors.elviaCharge);

dist/web_component/js/elvia-carousel.js

@@ -19,18 +19,24 @@ /*
         "name": "className",
-        "type": "string"
+        "type": "string",
+        "propType": "string"
       }, {
         "name": "elements",
-        "type": "number | string | HTMLElement"
+        "type": "string",
+        "propType": "number | string | HTMLElement"
       }, {
         "name": "hideArrows",
-        "type": "boolean"
+        "type": "boolean",
+        "propType": "boolean"
       }, {
         "name": "useOnboardingCheckmark",
-        "type": "boolean"
+        "type": "boolean",
+        "propType": "boolean"
       }, {
         "name": "value",
-        "type": "number"
+        "type": "number",
+        "propType": "number"
       }],
       "reactName": "Carousel",
-      "slotItems": false
+      "slotItems": true,
+      "useWrapper": false
     };
@@ -37,0 +43,0 @@ }

package.json

 {
   "name": "@elvia/elvis-carousel",
-  "version": "0.0.1-beta.6",
+  "version": "1.0.0",
   "description": "",
@@ -13,8 +13,4 @@ "license": "MIT",
     "@elvia/elvis-component-wrapper": "^2.0.3",
-    "react-transition-group": "^4.4.2",
     "styled-components": "^5.2.3"
-  },
-  "devDependencies": {
-    "@types/react-transition-group": "^4.4.1"
   }
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35113

increased by16.21%

Dependency count

2

decreased by-33.33%

Dev dependency count

0

decreased by-100%

Number of package files

13

increased by8.33%

Lines of code

803

increased by2.29%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

Dependency changes

• + Addedreact-is@18.3.1(transitive)

• - Removedreact-transition-group@^4.4.2

• - Removed@babel/runtime@7.26.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-transition-group@4.4.5(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)