@titelmedia/bricks-cta - npm Package Compare versions

Comparing version 2.1.31 to 2.3.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [2.3.0](https://github.com/titel-media/bricks-lerna/compare/v2.2.1...v2.3.0) (2024-02-23)
+
+### Bug Fixes
+
+- component minor refactoring ([ae4e767](https://github.com/titel-media/bricks-lerna/commit/ae4e767abb121047d4a1c73b03ef2e5a9fbc23e7))
+- testing & clean up of components ([6cb9433](https://github.com/titel-media/bricks-lerna/commit/6cb9433d5023a9a41d3d231fbc9ce2bdf360fcef))
+
 ## [2.1.31](https://github.com/titel-media/bricks-lerna/compare/v2.1.30...v2.1.31) (2024-02-16)
@@ -8,0 +15,0 @@

dist/index.js

@@ -25,3 +25,3 @@ "use strict";
   enableAnimation,
-  setAnimationDuration
+  setAnimationDuration = 0.75
 }) => {
@@ -32,9 +32,11 @@ const containerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    if (isAnimationEnable && containerRef.current) {
-      _bricksUtils.gsap.effects.fade(containerRef.current, {
-        duration: setAnimationDuration ? setAnimationDuration : 0.75,
-        trigger: wrapperRef.current
-      });
-    }
-  }, []);
+    if (!containerRef.current || !isAnimationEnable) return;
+    let fadeAnimation = _bricksUtils.gsap.effects.fade(containerRef.current, {
+      duration: setAnimationDuration,
+      trigger: wrapperRef.current
+    });
+    return () => {
+      if (fadeAnimation) fadeAnimation.kill();
+    };
+  }, [setAnimationDuration, isAnimationEnable]);
   return _react.default.createElement("div", {
@@ -45,3 +47,3 @@ ref: wrapperRef
   }, text && _react.default.createElement(_styles.Text, {
-    textColor: textColor?.hex || textColor || '#000000'
+    textColor: textColor?.hex || textColor
   }, text), _react.default.createElement(_styles.Button, {
@@ -54,5 +56,5 @@ href: url,
     backgroundColor: backgroundColor?.hex || backgroundColor || 'transparent',
-    textColor: textColor?.hex || textColor || '#000000',
+    textColor: textColor?.hex || textColor,
     backgroundColorHover: backgroundColorHover?.hex || backgroundColorHover,
-    textColorHover: textColorHover?.hex || textColorHover
+    textColorHover: textColorHover?.hex || textColorHover || '#000000'
   }, buttonText)));
@@ -59,0 +61,0 @@ };

dist/styles.js

@@ -22,3 +22,3 @@ "use strict";
 const Text = _styledComponents.default.p`
-  color: ${props => props.textColor};
+  color: ${props => props.textColor || '#000000'};
   font-family: 'univers-black', sans-serif;
@@ -38,5 +38,5 @@ margin-bottom: 30px;
   ${props => props.border && `
-    border: 1px solid ${props.textColor || 'inherit'};
+    border: 1px solid ${props.textColor || '#000000'};
   `};
-  color: ${props => props.textColor || 'inherit'};
+  color: ${props => props.textColor || '#000000'};
   ${props => props.backgroundColor && `
@@ -43,0 +43,0 @@ background-color: ${props.backgroundColor};

lib/index.js

@@ -6,3 +6,3 @@ import React, { useRef, useEffect } from 'react';
 
-export const CTA = ({
+const CTA = ({
   text,
@@ -18,17 +18,22 @@ buttonText,
   enableAnimation,
-  setAnimationDuration
+  setAnimationDuration = 0.75,
 }) => {
   const containerRef = useRef(null);
   const wrapperRef = useRef(null);
-  const isAnimationEnable = (enableAnimation === 'true' || enableAnimation === true)
-  // 'true' string is for storybook.
+  const isAnimationEnable =
+    enableAnimation === 'true' || enableAnimation === true;
 
   useEffect(() => {
-    if (isAnimationEnable && containerRef.current) {
-      gsap.effects.fade(containerRef.current, {
-        duration: setAnimationDuration ? setAnimationDuration : 0.75,
-        trigger: wrapperRef.current,
-      });
-    }
-  }, []);
+    if (!containerRef.current || !isAnimationEnable) return;
+
+    let fadeAnimation = gsap.effects.fade(containerRef.current, {
+      duration: setAnimationDuration,
+      trigger: wrapperRef.current,
+    });
+
+    return () => {
+      if (fadeAnimation) fadeAnimation.kill();
+    };
+  }, [setAnimationDuration, isAnimationEnable]);
+
   return (
@@ -38,3 +43,7 @@ <div ref={wrapperRef}>
       <Container ref={containerRef}>
-        {text && <Text textColor={textColor?.hex || textColor || '#000000' }>{text}</Text>}
+        {text && (
+          <Text textColor={textColor?.hex || textColor}>
+            {text}
+          </Text>
+        )}
         <Button
@@ -46,6 +55,10 @@ href={url}
           bold={fontWeight === 'bold'}
-          backgroundColor={backgroundColor?.hex || backgroundColor || 'transparent'}
-          textColor={textColor?.hex || textColor || '#000000' }
-          backgroundColorHover={backgroundColorHover?.hex || backgroundColorHover}
-          textColorHover={textColorHover?.hex || textColorHover}
+          backgroundColor={
+            backgroundColor?.hex || backgroundColor || 'transparent'
+          }
+          textColor={textColor?.hex || textColor}
+          backgroundColorHover={
+            backgroundColorHover?.hex || backgroundColorHover
+          }
+          textColorHover={textColorHover?.hex || textColorHover || '#000000'}
         >
@@ -58,1 +71,3 @@ {buttonText}
 };
+
+export { CTA };

lib/styles.js

@@ -17,3 +17,3 @@ import styled from 'styled-components';
 export const Text = styled.p`
-  color: ${props => props.textColor};
+  color: ${props => props.textColor || '#000000'};
   font-family: 'univers-black', sans-serif;
@@ -35,5 +35,5 @@ margin-bottom: 30px;
     `
-    border: 1px solid ${props.textColor || 'inherit'};
+    border: 1px solid ${props.textColor || '#000000'};
   `};
-  color: ${props => props.textColor || 'inherit'};
+  color: ${props => props.textColor || '#000000'};
   ${props =>
@@ -67,3 +67,3 @@ props.backgroundColor &&
   transition: 0.13s all;
-  ${props => setFont({bold: props.bold})};
+  ${props => setFont({ bold: props.bold })};
   ${setFontSizes({
@@ -70,0 +70,0 @@ xs: '13px',

package.json

 {
   "name": "@titelmedia/bricks-cta",
-  "version": "2.1.31",
+  "version": "2.3.0",
   "description": "> TODO: description",
@@ -29,5 +29,5 @@ "author": "highsnob",
     "@titelmedia/bricks-theme": "^2.1.31",
-    "@titelmedia/bricks-utils": "^2.0.0"
+    "@titelmedia/bricks-utils": "^2.3.0"
   },
-  "gitHead": "ecfa0a44cd25544793f0542e4d546eb0f7e43721"
+  "gitHead": "531163ae951fd4c3706bc6c3ca18100c959839c0"
 }

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

Improved metrics

Total package byte prevSize

34109

increased by2.97%

Lines of code

265

increased by5.16%

Dependency changes

• Updated@titelmedia/bricks-utils@^2.3.0