@cloudflare/component-card 10.0.17 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 10.1.0
+
+### Minor Changes
+
+- 077d121634: Adds tracking to CardDrawers when they are opened
+
+## 10.0.18
+
+### Patch Changes
+
+- @cloudflare/component-arrow-swivel@8.0.17
+- @cloudflare/component-button@8.3.12
+- @cloudflare/component-link@8.0.23
+
 ## 10.0.17
 
 ### Patch Changes

package/es/CardDrawers.js

@@ -86,6 +86,7 @@ class CardDrawers extends React.Component {
       } else {
         triggers.push(content ? /*#__PURE__*/React.createElement(CardToolbarDrawerTrigger, {
           key: triggerId,
+          name: name,
           id: triggerId,
           isActive: isActive,
           onClick: () => this.handleLinkClick(drawerId),

package/es/CardToolbarDrawerTrigger.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TextButton } from '@cloudflare/component-button';
 import { ArrowSwivel } from '@cloudflare/component-arrow-swivel';
+import sparrow from '@cloudflare/util-sparrow';
 
 class CardToolbarDrawerTrigger extends React.Component {
   constructor(props) {
@@ -9,6 +10,22 @@ class CardToolbarDrawerTrigger extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
+  componentDidUpdate() {
+    var {
+      isActive,
+      name
+    } = this.props;
+
+    if (isActive) {
+      sparrow.sendEvent('click help drawer', {
+        name,
+        category: 'help drawer',
+        location: document.location.href,
+        open: isActive
+      });
+    }
+  }
+
   handleClick(e) {
     e.preventDefault();
     this.props.onClick();
@@ -48,7 +65,8 @@ CardToolbarDrawerTrigger.propTypes = {
   children: PropTypes.node,
   ariaControls: PropTypes.string.isRequired,
   ariaExpanded: PropTypes.bool.isRequired,
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  name: PropTypes.string.isRequired
 };
 CardToolbarDrawerTrigger.defaultProps = {
   isActive: false

package/lib/CardDrawers.js

@@ -143,6 +143,7 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
         } else {
           triggers.push(content ? /*#__PURE__*/_react.default.createElement(_CardToolbarDrawerTrigger.default, {
             key: triggerId,
+            name: name,
             id: triggerId,
             isActive: isActive,
             onClick: function onClick() {

package/lib/CardToolbarDrawerTrigger.js

@@ -15,6 +15,8 @@ var _componentButton = require("@cloudflare/component-button");
 
 var _componentArrowSwivel = require("@cloudflare/component-arrow-swivel");
 
+var _utilSparrow = _interopRequireDefault(require("@cloudflare/util-sparrow"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -53,6 +55,22 @@ var CardToolbarDrawerTrigger = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(CardToolbarDrawerTrigger, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$props = this.props,
+          isActive = _this$props.isActive,
+          name = _this$props.name;
+
+      if (isActive) {
+        _utilSparrow.default.sendEvent('click help drawer', {
+          name: name,
+          category: 'help drawer',
+          location: document.location.href,
+          open: isActive
+        });
+      }
+    }
+  }, {
     key: "handleClick",
     value: function handleClick(e) {
       e.preventDefault();
@@ -61,13 +79,13 @@ var CardToolbarDrawerTrigger = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          children = _this$props.children,
-          isActive = _this$props.isActive,
-          ariaControls = _this$props.ariaControls,
-          ariaExpanded = _this$props.ariaExpanded,
-          ariaLabel = _this$props.ariaLabel;
+      var _this$props2 = this.props,
+          id = _this$props2.id,
+          children = _this$props2.children,
+          isActive = _this$props2.isActive,
+          ariaControls = _this$props2.ariaControls,
+          ariaExpanded = _this$props2.ariaExpanded,
+          ariaLabel = _this$props2.ariaLabel;
       return /*#__PURE__*/_react.default.createElement(_componentButton.TextButton, {
         id: id,
         onClick: this.handleClick,
@@ -95,7 +113,8 @@ CardToolbarDrawerTrigger.propTypes = {
   children: _propTypes.default.node,
   ariaControls: _propTypes.default.string.isRequired,
   ariaExpanded: _propTypes.default.bool.isRequired,
-  ariaLabel: _propTypes.default.string
+  ariaLabel: _propTypes.default.string,
+  name: _propTypes.default.string.isRequired
 };
 CardToolbarDrawerTrigger.defaultProps = {
   isActive: false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-card",
   "description": "Cloudflare Card Component",
-  "version": "10.0.17",
+  "version": "10.1.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -12,9 +12,9 @@
     "module": "es/index.js"
   },
   "dependencies": {
-    "@cloudflare/component-arrow-swivel": "^8.0.16",
-    "@cloudflare/component-button": "^8.3.11",
-    "@cloudflare/component-link": "^8.0.22",
+    "@cloudflare/component-arrow-swivel": "^8.0.17",
+    "@cloudflare/component-button": "^8.3.12",
+    "@cloudflare/component-link": "^8.0.23",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {

package/src/CardDrawers.js

@@ -43,7 +43,6 @@ class CardDrawers extends React.Component {
 
   handleLinkClick(id) {
     this.props.onClick && this.props.onClick(id);
-
     this.setState(
       ({ active }) => ({ active: active === id ? null : id }),
       () => this.runToggleFunctions(id, this.state.active === id)
@@ -74,7 +73,6 @@ class CardDrawers extends React.Component {
         const triggerId = `trigger-${this._cardId}-${drawerIdProps}`;
         const drawerId = `drawer-${this._cardId}-${drawerIdProps}`;
         const isActive = drawerId === active;
-
         onClick && this.addToggleFunction(drawerId, onClick);
         if (!content && !href) {
           console.error(
@@ -89,6 +87,7 @@ class CardDrawers extends React.Component {
             content ? (
               <CardToolbarDrawerTrigger
                 key={triggerId}
+                name={name}
                 id={triggerId}
                 isActive={isActive}
                 onClick={() => this.handleLinkClick(drawerId)}
@@ -104,7 +103,6 @@ class CardDrawers extends React.Component {
               </CardToolbarLink>
             )
           );
-
           content &&
             drawers.push(
               <Drawer

package/src/CardToolbarDrawerTrigger.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TextButton } from '@cloudflare/component-button';
 import { ArrowSwivel } from '@cloudflare/component-arrow-swivel';
+import sparrow from '@cloudflare/util-sparrow';
 
 class CardToolbarDrawerTrigger extends React.Component {
   constructor(props) {
@@ -9,6 +10,18 @@ class CardToolbarDrawerTrigger extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
+  componentDidUpdate() {
+    const { isActive, name } = this.props;
+    if (isActive) {
+      sparrow.sendEvent('click help drawer', {
+        name,
+        category: 'help drawer',
+        location: document.location.href,
+        open: isActive
+      });
+    }
+  }
+
   handleClick(e) {
     e.preventDefault();
     this.props.onClick();
@@ -50,7 +63,8 @@ CardToolbarDrawerTrigger.propTypes = {
   children: PropTypes.node,
   ariaControls: PropTypes.string.isRequired,
   ariaExpanded: PropTypes.bool.isRequired,
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  name: PropTypes.string.isRequired
 };
 
 CardToolbarDrawerTrigger.defaultProps = {