@micromag/element-call-to-action 0.3.496 → 0.3.503

package/assets/css/styles.css

@@ -1 +1 @@
-@-webkit-keyframes micromag-element-call-to-action-appear{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-element-call-to-action-appear{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.micromag-element-call-to-action-container{opacity:1;position:relative;text-align:center;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;z-index:100}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;display:block;margin:0 auto 3px}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon{display:inline-block;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block;line-height:1;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{-webkit-user-drag:none;background-color:rgba(0,0,0,0);display:block;margin:0 auto;padding:5px 10px;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button *{display:inline}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;background-color:#fff;height:100vh;left:0;opacity:0;position:fixed;top:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:100vw}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}
+@-webkit-keyframes micromag-element-call-to-action-appear{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-element-call-to-action-appear{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.micromag-element-call-to-action-container{opacity:1;position:relative;text-align:center;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;z-index:100}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;display:block;margin:0 auto 3px}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon{display:inline-block;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block;line-height:1;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{-webkit-user-drag:none;background-color:rgba(0,0,0,0);display:block;margin:0 auto;padding:5px 10px;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button *{display:inline}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:focus{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;background-color:#fff;height:100vh;left:0;opacity:0;position:fixed;top:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:100vw}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}

package/es/index.js

@@ -147,10 +147,15 @@ function CallToAction(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     leaving = _useState2[0],
     setLeaving = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggled = _useState4[0],
+    setToggled = _useState4[1];
 
   // On click
   var onClickLink = useCallback(function (e) {
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
+    setToggled(!toggled);
     if (inWebView && openWebView !== null) {
       openWebView({
         url: url
@@ -162,7 +167,7 @@ function CallToAction(_ref) {
     if (trackEvent !== null) {
       trackEvent('call_to_action', isString(action) ? action : 'click', url);
     }
-  }, [url, onClick, trackEvent, inWebView, openWebView]);
+  }, [toggled, url, onClick, trackEvent, inWebView, openWebView]);
   var onDrag = useCallback(function (_ref5) {
     var event = _ref5.event;
     // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
@@ -218,6 +223,7 @@ function CallToAction(_ref) {
     focusable: focusable,
     buttonStyle: boxStyle,
     inline: true,
+    "aria-pressed": toggled,
     href: !inWebView ? url : null,
     external: true,
     onClick: onClickLink

package/lib/index.js

@@ -149,10 +149,15 @@ function CallToAction(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     leaving = _useState2[0],
     setLeaving = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggled = _useState4[0],
+    setToggled = _useState4[1];
 
   // On click
   var onClickLink = React.useCallback(function (e) {
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
+    setToggled(!toggled);
     if (inWebView && openWebView !== null) {
       openWebView({
         url: url
@@ -164,7 +169,7 @@ function CallToAction(_ref) {
     if (trackEvent !== null) {
       trackEvent('call_to_action', isString(action) ? action : 'click', url);
     }
-  }, [url, onClick, trackEvent, inWebView, openWebView]);
+  }, [toggled, url, onClick, trackEvent, inWebView, openWebView]);
   var onDrag = React.useCallback(function (_ref5) {
     var event = _ref5.event;
     // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
@@ -220,6 +225,7 @@ function CallToAction(_ref) {
     focusable: focusable,
     buttonStyle: boxStyle,
     inline: true,
+    "aria-pressed": toggled,
     href: !inWebView ? url : null,
     external: true,
     onClick: onClickLink

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.496",
+    "version": "0.3.503",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,10 +63,10 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.491",
-        "@micromag/element-button": "^0.3.491",
-        "@micromag/element-text": "^0.3.491",
-        "@micromag/element-webview": "^0.3.491",
+        "@micromag/core": "^0.3.503",
+        "@micromag/element-button": "^0.3.503",
+        "@micromag/element-text": "^0.3.503",
+        "@micromag/element-webview": "^0.3.503",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -80,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "f13d557c21ad604187a57413ef65cfc96430042b"
+    "gitHead": "50e91d4d3f655cd4fbe8a9fc1c3dec54f3fc63ca"
 }