@elvia/elvis-carousel - npm Package Compare versions

Comparing version 0.0.1-beta.2 to 0.0.1-beta.3

dist/react/js/elvia-carousel.js

@@ -6,3 +6,3 @@ /*
 import React, { useState, useRef, useEffect } from 'react';
-import { CarouselContainer, CarouselTitle, CarouselElement, LeftCarouselButton, ListOfDots, Dot, NavigationRow, RightCarouselButton, CarouselElementContainer } from './StyledComponents';
+import { CarouselContainer, CarouselTitle, CarouselElement, LeftCarouselButton, ListOfDots, Dot, NavigationRow, RightCarouselButton, CarouselElementContainer, CheckButton } from './StyledComponents';
 import { CSSTransition } from 'react-transition-group';
@@ -16,3 +16,5 @@ // don't know why it says it does not exist
   valueOnChange,
-  webcomponent
+  webcomponent,
+  useOnboardingCheckmark,
+  onHide
 }) => {
@@ -28,2 +30,3 @@ const [index, setIndex] = useState(value);
   const hideRightArrow = hideArrows && index === lengthOfElements - 1;
+  const showOnboardingCheckmark = hideRightArrow && useOnboardingCheckmark;
 
@@ -61,20 +64,22 @@ const updateValue = index => {
   const handleMouseMove = e => {
-    if (isDown) {
-      const clientX = "changedTouches" in e ? e.changedTouches[0].clientX : e.clientX;
+    if (!isDown) {
+      return;
+    }
 
-      if (!itemsRef.current) {
-        return;
-      }
+    const clientX = "changedTouches" in e ? e.changedTouches[0].clientX : e.clientX;
 
-      const x = clientX - itemsRef.current.offsetLeft;
-      const distance = (x - startX) * 3;
+    if (!itemsRef.current) {
+      return;
+    }
 
-      if (distance < -400 && !hideRightArrow) {
-        handleButtonClick(index, 'right');
-      }
+    const x = clientX - itemsRef.current.offsetLeft;
+    const distance = (x - startX) * 3;
 
-      if (distance > 400 && !hideLeftArrow) {
-        handleButtonClick(index, 'left');
-      }
+    if (distance < -400 && !hideRightArrow) {
+      handleButtonClick(index, 'right');
     }
+
+    if (distance > 400 && !hideLeftArrow) {
+      handleButtonClick(index, 'left');
+    }
   };
@@ -88,2 +93,4 @@
     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);
@@ -119,3 +126,6 @@ setSlideDirection(direction);
     onClick: () => handleButtonClick(index, 'left')
-  }, /*#__PURE__*/React.createElement("i", null)), /*#__PURE__*/React.createElement(ListOfDots, null, Array.from(Array(lengthOfElements), (e, listIndex) => /*#__PURE__*/React.createElement(Dot, {
+  }, /*#__PURE__*/React.createElement("i", null)), /*#__PURE__*/React.createElement(ListOfDots, {
+    hideRightArrow: hideRightArrow && !showOnboardingCheckmark,
+    hideLeftArrow: hideLeftArrow
+  }, Array.from(Array(lengthOfElements), (e, listIndex) => /*#__PURE__*/React.createElement(Dot, {
     key: listIndex,
@@ -126,3 +136,6 @@ isSelected: listIndex === index,
     onClick: () => updateValue(listIndex)
-  }))), /*#__PURE__*/React.createElement(RightCarouselButton, {
+  }))), showOnboardingCheckmark ? /*#__PURE__*/React.createElement(CheckButton, {
+    "aria-label": "Introduksjonsstegene er fullført. Lukk introduksjon",
+    onClick: () => onHide()
+  }, /*#__PURE__*/React.createElement("i", null)) : /*#__PURE__*/React.createElement(RightCarouselButton, {
     "aria-label": `Gå til side ${index + 1}`,
@@ -129,0 +142,0 @@ hidden: hideRightArrow,

dist/react/js/StyledComponents.js

@@ -113,2 +113,21 @@ /*
 `;
+export const ListOfDots = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0px 24px;
+  padding: 0px  ${props => props.hideRightArrow ? '64px' : '24px'} 0 ${props => props.hideLeftArrow ? '64px' : '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: #29d305;
+  }
+`;
 export const LeftCarouselButton = styled.button`
@@ -168,16 +187,26 @@ border: none;
 `;
-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;
+export const CheckButton = 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-color: #29d305;
+        }
+      }
+    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:24px;
+      width: 24px;
+    }
 `;

dist/web_component/js/elvia-carousel.js

@@ -10,3 +10,3 @@ /*
   static get observedAttributes() {
-    return ["elements", "hidearrows", "value"];
+    return ["classname", "elements", "hidearrows", "useonboardingcheckmark", "value"];
   }
@@ -19,2 +19,5 @@
       "attributes": [{
+        "name": "className",
+        "type": "string"
+      }, {
         "name": "elements",
@@ -26,2 +29,5 @@ "type": "number | string | HTMLElement"
       }, {
+        "name": "useOnboardingCheckmark",
+        "type": "boolean"
+      }, {
         "name": "value",
@@ -35,2 +41,22 @@ "type": "number"
 
+  set className(newValue) {
+    super.setProps({
+      'classname': newValue
+    });
+  }
+
+  get className() {
+    return super.getProps()['classname'];
+  }
+
+  set classname(newValue) {
+    super.setProps({
+      'classname': newValue
+    });
+  }
+
+  get classname() {
+    return super.getProps()['classname'];
+  }
+
   set elements(newValue) {
@@ -66,2 +92,22 @@ super.setProps({
 
+  set useOnboardingCheckmark(newValue) {
+    super.setProps({
+      'useonboardingcheckmark': newValue
+    });
+  }
+
+  get useOnboardingCheckmark() {
+    return super.getProps()['useonboardingcheckmark'];
+  }
+
+  set useonboardingcheckmark(newValue) {
+    super.setProps({
+      'useonboardingcheckmark': newValue
+    });
+  }
+
+  get useonboardingcheckmark() {
+    return super.getProps()['useonboardingcheckmark'];
+  }
+
   set value(newValue) {
@@ -68,0 +114,0 @@ super.setProps({

package.json

 {
   "name": "@elvia/elvis-carousel",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.3",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

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

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

Worsened metrics

Total package byte prevSize

31454

decreased by-67.71%

Number of package files

12

decreased by-7.69%

Lines of code

785

decreased by-23.26%

No dependency changes