@cloudflare/component-card 4.0.8 → 4.0.12

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.11...@cloudflare/component-card@4.0.12) (2021-11-15)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
+## [4.0.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.10...@cloudflare/component-card@4.0.11) (2021-11-15)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
+## [4.0.10](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.9...@cloudflare/component-card@4.0.10) (2021-11-05)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
+## [4.0.9](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.8...@cloudflare/component-card@4.0.9) (2021-11-05)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
 ## [4.0.8](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.7...@cloudflare/component-card@4.0.8) (2021-11-04)
 
 **Note:** Version bump only for package @cloudflare/component-card
@@ -4154,7 +4186,7 @@ references ([fe1d8b5](http://stash.cfops.it:7999/www/cf-ux/commits/fe1d8b5))
 
 ### Bug Fixes
 
-* **cf-component-card:** UI-164 Add missing CardToolbarLink component to type
+* **cf-component-card:** UI-164 Add missing CardToolbarTrigger component to type
 definitions ([cfe8e21](http://stash.cfops.it:7999/www/cf-ux/commits/cfe8e21))
 
 <a name="4.1.1"></a>

package/README.md

@@ -78,14 +78,9 @@ class CardComponent extends React.Component {
         />
         <CardToolbar
           controls={[]}
-          links={[
+          triggers={[
             <CardToolbarLink
-              key="ToolBarLink"
-              expandable={false}
-              isActive={false}
-              onClick={() =>
-                window.open('https://en.wikipedia.org/wiki/Main_Page')
-              }
+              href="https://en.wikipedia.org/wiki/Main_Page"
             >
               Wikipedia
             </CardToolbarLink>

package/es/CardDrawer.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import { createStyledComponent } from '@cloudflare/style-container';
 const CardDrawer = createStyledComponent(({
   theme,
@@ -5,5 +6,16 @@ const CardDrawer = createStyledComponent(({
 }) => ({
   borderTop: isActive ? `1px solid ${theme.colors.gray[7]}` : 'initial',
   padding: isActive ? 3 : 'initial'
-}));
+}), 'div', ['role', 'aria-labelledby']);
+CardDrawer.propTypes = {
+  id: PropTypes.string.isRequired,
+  key: PropTypes.string.isRequired,
+  'aria-labelledby': PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  addToggleFunction: PropTypes.func.isRequired,
+  role: PropTypes.string
+};
+CardDrawer.defaultProps = {
+  role: 'region'
+};
 export default CardDrawer;

package/es/CardDrawers.js

@@ -8,9 +8,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CardSection from './CardSection';
 import CardToolbar from './CardToolbar';
-import CardToolbarLink from './CardToolbarLink';
+import CardToolbarDrawerTrigger from './CardToolbarDrawerTrigger';
 import CardPropTypes from './CardPropTypes';
 import CardDrawer from './CardDrawer';
+import CardToolbarLink from './CardToolbarLink';
 let UNIQUE_ID = 0;
 
 class CardDrawers extends React.Component {
@@ -52,40 +53,52 @@ class CardDrawers extends React.Component {
 
   render() {
     const active = this.props.hasOwnProperty('active') ? this.props.active : this.state.active;
-    const links = [];
+    const triggers = [];
     const drawers = [];
     this.props.drawers.forEach((_ref) => {
-      let drawerId = _ref.id,
+      let drawerIdProps = _ref.id,
           name = _ref.name,
           content = _ref.content,
           drawerComponent = _ref.drawerComponent,
           onClick = _ref.onClick,
-          rest = _objectWithoutProperties(_ref, ["id", "name", "content", "drawerComponent", "onClick"]);
+          href = _ref.href,
+          rest = _objectWithoutProperties(_ref, ["id", "name", "content", "drawerComponent", "onClick", "href"]);
 
       // The component used for the drawer can be overridden
       const Drawer = drawerComponent || CardDrawer;
+      const triggerId = `trigger-${this._cardId}-${drawerIdProps}`;
+      const drawerId = `drawer-${this._cardId}-${drawerIdProps}`;
       const isActive = drawerId === active;
-      const id = `card-${this._cardId}-drawer-${drawerId}`;
       onClick && this.addToggleFunction(drawerId, onClick);
-      links.push( /*#__PURE__*/React.createElement(CardToolbarLink, {
-        key: drawerId,
-        id: id,
-        isActive: isActive,
-        onClick: () => this.handleLinkClick(drawerId),
-        expandable: content ? true : false
-      }, name));
-      content && drawers.push( /*#__PURE__*/React.createElement(Drawer, _extends({
-        key: drawerId,
-        role: "tabpanel",
-        "aria-labelledby": id,
-        "aria-hidden": isActive ? 'false' : 'true',
-        isActive: isActive,
-        addToggleFunction: this.addToggleFunction.bind(this, drawerId)
-      }, rest), isActive && content));
+
+      if (!content && !href) {
+        console.error('Drawer items must have either `content` or `href` property.');
+      } else if (content && href) {
+        console.error('Drawer items must have either `content` or `href` property, but not both.');
+      } else {
+        triggers.push(content ? /*#__PURE__*/React.createElement(CardToolbarDrawerTrigger, {
+          key: triggerId,
+          id: triggerId,
+          isActive: isActive,
+          onClick: () => this.handleLinkClick(drawerId),
+          ariaControls: drawerId,
+          ariaExpanded: isActive
+        }, name) : /*#__PURE__*/React.createElement(CardToolbarLink, {
+          id: triggerId,
+          href: href
+        }, name));
+        content && drawers.push( /*#__PURE__*/React.createElement(Drawer, _extends({
+          key: drawerId,
+          id: drawerId,
+          "aria-labelledby": triggerId,
+          isActive: isActive,
+          addToggleFunction: this.addToggleFunction.bind(this, drawerId)
+        }, rest), isActive && content));
+      }
     });
     return /*#__PURE__*/React.createElement(CardSection, null, /*#__PURE__*/React.createElement(CardToolbar, {
       controls: this.props.controls,
-      links: links
+      triggers: triggers
     }), /*#__PURE__*/React.createElement("div", null, drawers));
   }
 

package/es/CardToolbar.js

@@ -16,7 +16,7 @@ const styles = ({
   }
 });
 
-const Links = createComponent(() => ({
+const Triggers = createComponent(() => ({
   float: 'right',
   position: 'relative'
 }), 'div');
@@ -24,17 +24,15 @@ const Links = createComponent(() => ({
 const CardToolbar = ({
   className,
   controls,
-  links
+  triggers
 }) => /*#__PURE__*/React.createElement("div", {
   className: className
-}, /*#__PURE__*/React.createElement("div", null, controls), /*#__PURE__*/React.createElement(Links, {
-  role: "tablist"
-}, links));
+}, /*#__PURE__*/React.createElement("div", null, controls), /*#__PURE__*/React.createElement(Triggers, null, triggers));
 
 CardToolbar.propTypes = {
   className: PropTypes.string,
   controls: PropTypes.any,
-  links: PropTypes.any
+  triggers: PropTypes.any
 };
 CardToolbar.displayName = 'CardToolbar';
 export default createStyledComponent(styles, CardToolbar);

package/es/CardToolbarDrawerTrigger.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextButton } from '@cloudflare/component-button';
+import { ArrowSwivel } from '@cloudflare/component-arrow-swivel';
+
+class CardToolbarDrawerTrigger extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    this.props.onClick();
+  }
+
+  render() {
+    const _this$props = this.props,
+          id = _this$props.id,
+          children = _this$props.children,
+          isActive = _this$props.isActive,
+          ariaControls = _this$props.ariaControls,
+          ariaExpanded = _this$props.ariaExpanded;
+    return /*#__PURE__*/React.createElement(TextButton, {
+      id: id,
+      onClick: this.handleClick,
+      isActive: isActive,
+      px: 3,
+      py: 2,
+      fontSize: 3,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded
+    }, children, /*#__PURE__*/React.createElement(ArrowSwivel, {
+      isActive: isActive,
+      duration: 50
+    }));
+  }
+
+}
+
+CardToolbarDrawerTrigger.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  ariaControls: PropTypes.string.isRequired,
+  ariaExpanded: PropTypes.bool.isRequired
+};
+CardToolbarDrawerTrigger.defaultProps = {
+  isActive: false
+};
+export default CardToolbarDrawerTrigger;

package/es/CardToolbarLink.js

@@ -1,47 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@cloudflare/component-link';
-
-class CardToolbarLink extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(e) {
-    e.preventDefault();
-    this.props.onClick();
-  }
-
-  render() {
-    const _this$props = this.props,
-          id = _this$props.id,
-          children = _this$props.children,
-          expandable = _this$props.expandable,
-          isActive = _this$props.isActive;
-    return /*#__PURE__*/React.createElement(Link, {
-      role: expandable ? 'tab' : 'link',
-      id: id,
-      onClick: this.handleClick,
-      isActive: isActive,
-      expandable: expandable,
-      px: 3,
-      py: 2,
-      fontSize: 3
-    }, children);
-  }
-
-}
-
+import { createComponent } from '@cloudflare/style-container';
+const CardToolbarLink = createComponent({}, ({
+  id,
+  href,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Link, {
+    px: 3,
+    py: 2,
+    fontSize: 3,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    id: id ? id : null,
+    href: href
+  }, children);
+});
 CardToolbarLink.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  isActive: PropTypes.bool.isRequired,
   id: PropTypes.string,
-  children: PropTypes.node,
-  expandable: PropTypes.bool
-};
-CardToolbarLink.defaultProps = {
-  expandable: true,
-  isActive: false
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
 };
 export default CardToolbarLink;

package/es/index.js

@@ -8,7 +8,8 @@ import CardSection from './CardSection';
 import CardTitle from './CardTitle';
 import CardFooter from './CardFooter';
 import CardToolbar from './CardToolbar';
+import CardToolbarDrawerTrigger from './CardToolbarDrawerTrigger';
 import CardToolbarLink from './CardToolbarLink';
 import CardPropTypes from './CardPropTypes';
 import CardDrawer from './CardDrawer';
-export { Card, CardContent, CardControl, CardDrawer, CardDrawers, CardMessages, CardPropTypes, CardSection, CardBlock, CardTitle, CardFooter, CardToolbar, CardToolbarLink };
+export { Card, CardContent, CardControl, CardDrawer, CardDrawers, CardMessages, CardPropTypes, CardSection, CardBlock, CardTitle, CardFooter, CardToolbar, CardToolbarDrawerTrigger, CardToolbarLink };

package/index.d.ts

@@ -107,20 +107,32 @@ export const CardTitle: typeof CardTitleUnstyled;
 ////////////////////////////////////////////////////////////////////////
 export type TCardToolbarProps = {
   controls?: any;
-  links?: React.ReactElement<TCardToolbarLinkProps>[];
+  triggers?:
+    | React.ReactElement<TCardToolbarDrawerTriggerProps>[]
+    | React.ReactElement<TCardToolbarLinkProps>[];
 };
 export type TCardToolbarRule = TRule<{}>;
 export const CardToolbarTheme: TCardToolbarRule;
 export const CardToolbarUnstyled: React.StatelessComponent<TCardToolbarProps>;
 export const CardToolbar: typeof CardToolbarUnstyled;
 
-// <CardToolbarLink>
+// <CardToolbarDrawerTrigger>
 ////////////////////////////////////////////////////////////////////////
-export type TCardToolbarLinkProps = {
-  to?: string;
+export type TCardToolbarDrawerTriggerProps = {
   onClick: () => void;
   isActive: boolean;
   id?: string;
   expandable?: boolean;
+  ariaControls?: string;
+  ariaExpanded?: boolean;
+};
+export const CardToolbarDrawerTrigger: React.StatelessComponent<TCardToolbarDrawerTriggerProps>;
+
+// <CardToolbarLink>
+////////////////////////////////////////////////////////////////////////
+export type TCardToolbarLinkProps = {
+  id?: string;
+  href: string;
+  children: React.ReactNode;
 };
 export const CardToolbarLink: React.StatelessComponent<TCardToolbarLinkProps>;

package/lib/CardDrawer.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styleContainer = require("@cloudflare/style-container");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var CardDrawer = (0, _styleContainer.createStyledComponent)(function (_ref) {
   var theme = _ref.theme,
       isActive = _ref.isActive;
@@ -14,6 +18,17 @@ var CardDrawer = (0, _styleContainer.createStyledComponent)(function (_ref) {
     borderTop: isActive ? "1px solid ".concat(theme.colors.gray[7]) : 'initial',
     padding: isActive ? 3 : 'initial'
   };
-});
+}, 'div', ['role', 'aria-labelledby']);
+CardDrawer.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  key: _propTypes.default.string.isRequired,
+  'aria-labelledby': _propTypes.default.string.isRequired,
+  isActive: _propTypes.default.bool.isRequired,
+  addToggleFunction: _propTypes.default.func.isRequired,
+  role: _propTypes.default.string
+};
+CardDrawer.defaultProps = {
+  role: 'region'
+};
 var _default = CardDrawer;
 exports.default = _default;

package/lib/CardDrawers.js

@@ -15,12 +15,14 @@ var _CardSection = _interopRequireDefault(require("./CardSection"));
 
 var _CardToolbar = _interopRequireDefault(require("./CardToolbar"));
 
-var _CardToolbarLink = _interopRequireDefault(require("./CardToolbarLink"));
+var _CardToolbarDrawerTrigger = _interopRequireDefault(require("./CardToolbarDrawerTrigger"));
 
 var _CardPropTypes = _interopRequireDefault(require("./CardPropTypes"));
 
 var _CardDrawer = _interopRequireDefault(require("./CardDrawer"));
 
+var _CardToolbarLink = _interopRequireDefault(require("./CardToolbarLink"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -107,42 +109,54 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
       var _this3 = this;
 
       var active = this.props.hasOwnProperty('active') ? this.props.active : this.state.active;
-      var links = [];
+      var triggers = [];
       var drawers = [];
       this.props.drawers.forEach(function (_ref2) {
-        var drawerId = _ref2.id,
+        var drawerIdProps = _ref2.id,
             name = _ref2.name,
             content = _ref2.content,
             drawerComponent = _ref2.drawerComponent,
             onClick = _ref2.onClick,
-            rest = _objectWithoutProperties(_ref2, ["id", "name", "content", "drawerComponent", "onClick"]);
+            href = _ref2.href,
+            rest = _objectWithoutProperties(_ref2, ["id", "name", "content", "drawerComponent", "onClick", "href"]);
 
         // The component used for the drawer can be overridden
         var Drawer = drawerComponent || _CardDrawer.default;
+        var triggerId = "trigger-".concat(_this3._cardId, "-").concat(drawerIdProps);
+        var drawerId = "drawer-".concat(_this3._cardId, "-").concat(drawerIdProps);
         var isActive = drawerId === active;
-        var id = "card-".concat(_this3._cardId, "-drawer-").concat(drawerId);
         onClick && _this3.addToggleFunction(drawerId, onClick);
-        links.push( /*#__PURE__*/_react.default.createElement(_CardToolbarLink.default, {
-          key: drawerId,
-          id: id,
-          isActive: isActive,
-          onClick: function onClick() {
-            return _this3.handleLinkClick(drawerId);
-          },
-          expandable: content ? true : false
-        }, name));
-        content && drawers.push( /*#__PURE__*/_react.default.createElement(Drawer, _extends({
-          key: drawerId,
-          role: "tabpanel",
-          "aria-labelledby": id,
-          "aria-hidden": isActive ? 'false' : 'true',
-          isActive: isActive,
-          addToggleFunction: _this3.addToggleFunction.bind(_this3, drawerId)
-        }, rest), isActive && content));
+
+        if (!content && !href) {
+          console.error('Drawer items must have either `content` or `href` property.');
+        } else if (content && href) {
+          console.error('Drawer items must have either `content` or `href` property, but not both.');
+        } else {
+          triggers.push(content ? /*#__PURE__*/_react.default.createElement(_CardToolbarDrawerTrigger.default, {
+            key: triggerId,
+            id: triggerId,
+            isActive: isActive,
+            onClick: function onClick() {
+              return _this3.handleLinkClick(drawerId);
+            },
+            ariaControls: drawerId,
+            ariaExpanded: isActive
+          }, name) : /*#__PURE__*/_react.default.createElement(_CardToolbarLink.default, {
+            id: triggerId,
+            href: href
+          }, name));
+          content && drawers.push( /*#__PURE__*/_react.default.createElement(Drawer, _extends({
+            key: drawerId,
+            id: drawerId,
+            "aria-labelledby": triggerId,
+            isActive: isActive,
+            addToggleFunction: _this3.addToggleFunction.bind(_this3, drawerId)
+          }, rest), isActive && content));
+        }
       });
       return /*#__PURE__*/_react.default.createElement(_CardSection.default, null, /*#__PURE__*/_react.default.createElement(_CardToolbar.default, {
         controls: this.props.controls,
-        links: links
+        triggers: triggers
       }), /*#__PURE__*/_react.default.createElement("div", null, drawers));
     }
   }]);

package/lib/CardToolbar.js

@@ -28,7 +28,7 @@ var styles = function styles(_ref) {
   };
 };
 
-var Links = (0, _styleContainer.createComponent)(function () {
+var Triggers = (0, _styleContainer.createComponent)(function () {
   return {
     float: 'right',
     position: 'relative'
@@ -38,18 +38,16 @@ var Links = (0, _styleContainer.createComponent)(function () {
 var CardToolbar = function CardToolbar(_ref2) {
   var className = _ref2.className,
       controls = _ref2.controls,
-      links = _ref2.links;
+      triggers = _ref2.triggers;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
-  }, /*#__PURE__*/_react.default.createElement("div", null, controls), /*#__PURE__*/_react.default.createElement(Links, {
-    role: "tablist"
-  }, links));
+  }, /*#__PURE__*/_react.default.createElement("div", null, controls), /*#__PURE__*/_react.default.createElement(Triggers, null, triggers));
 };
 
 CardToolbar.propTypes = {
   className: _propTypes.default.string,
   controls: _propTypes.default.any,
-  links: _propTypes.default.any
+  triggers: _propTypes.default.any
 };
 CardToolbar.displayName = 'CardToolbar';
 

package/lib/CardToolbarDrawerTrigger.js

@@ -0,0 +1,95 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentButton = require("@cloudflare/component-button");
+
+var _componentArrowSwivel = require("@cloudflare/component-arrow-swivel");
+
+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"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+var CardToolbarDrawerTrigger = /*#__PURE__*/function (_React$Component) {
+  _inherits(CardToolbarDrawerTrigger, _React$Component);
+
+  function CardToolbarDrawerTrigger(props) {
+    var _this;
+
+    _classCallCheck(this, CardToolbarDrawerTrigger);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(CardToolbarDrawerTrigger).call(this, props));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  _createClass(CardToolbarDrawerTrigger, [{
+    key: "handleClick",
+    value: function handleClick(e) {
+      e.preventDefault();
+      this.props.onClick();
+    }
+  }, {
+    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;
+      return /*#__PURE__*/_react.default.createElement(_componentButton.TextButton, {
+        id: id,
+        onClick: this.handleClick,
+        isActive: isActive,
+        px: 3,
+        py: 2,
+        fontSize: 3,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded
+      }, children, /*#__PURE__*/_react.default.createElement(_componentArrowSwivel.ArrowSwivel, {
+        isActive: isActive,
+        duration: 50
+      }));
+    }
+  }]);
+
+  return CardToolbarDrawerTrigger;
+}(_react.default.Component);
+
+CardToolbarDrawerTrigger.propTypes = {
+  onClick: _propTypes.default.func.isRequired,
+  isActive: _propTypes.default.bool.isRequired,
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node,
+  ariaControls: _propTypes.default.string.isRequired,
+  ariaExpanded: _propTypes.default.bool.isRequired
+};
+CardToolbarDrawerTrigger.defaultProps = {
+  isActive: false
+};
+var _default = CardToolbarDrawerTrigger;
+exports.default = _default;

package/lib/CardToolbarLink.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,77 +11,28 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _componentLink = require("@cloudflare/component-link");
 
-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"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _styleContainer = require("@cloudflare/style-container");
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-var CardToolbarLink = /*#__PURE__*/function (_React$Component) {
-  _inherits(CardToolbarLink, _React$Component);
-
-  function CardToolbarLink(props) {
-    var _this;
-
-    _classCallCheck(this, CardToolbarLink);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(CardToolbarLink).call(this, props));
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    return _this;
-  }
-
-  _createClass(CardToolbarLink, [{
-    key: "handleClick",
-    value: function handleClick(e) {
-      e.preventDefault();
-      this.props.onClick();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          children = _this$props.children,
-          expandable = _this$props.expandable,
-          isActive = _this$props.isActive;
-      return /*#__PURE__*/_react.default.createElement(_componentLink.Link, {
-        role: expandable ? 'tab' : 'link',
-        id: id,
-        onClick: this.handleClick,
-        isActive: isActive,
-        expandable: expandable,
-        px: 3,
-        py: 2,
-        fontSize: 3
-      }, children);
-    }
-  }]);
-
-  return CardToolbarLink;
-}(_react.default.Component);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var CardToolbarLink = (0, _styleContainer.createComponent)({}, function (_ref) {
+  var id = _ref.id,
+      href = _ref.href,
+      children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_componentLink.Link, {
+    px: 3,
+    py: 2,
+    fontSize: 3,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    id: id ? id : null,
+    href: href
+  }, children);
+});
 CardToolbarLink.propTypes = {
-  onClick: _propTypes.default.func.isRequired,
-  isActive: _propTypes.default.bool.isRequired,
   id: _propTypes.default.string,
-  children: _propTypes.default.node,
-  expandable: _propTypes.default.bool
-};
-CardToolbarLink.defaultProps = {
-  expandable: true,
-  isActive: false
+  href: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node.isRequired
 };
 var _default = CardToolbarLink;
 exports.default = _default;

package/lib/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "CardToolbar", {
     return _CardToolbar.default;
   }
 });
+Object.defineProperty(exports, "CardToolbarDrawerTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _CardToolbarDrawerTrigger.default;
+  }
+});
 Object.defineProperty(exports, "CardToolbarLink", {
   enumerable: true,
   get: function get() {
@@ -102,6 +108,8 @@ var _CardFooter = _interopRequireDefault(require("./CardFooter"));
 
 var _CardToolbar = _interopRequireDefault(require("./CardToolbar"));
 
+var _CardToolbarDrawerTrigger = _interopRequireDefault(require("./CardToolbarDrawerTrigger"));
+
 var _CardToolbarLink = _interopRequireDefault(require("./CardToolbarLink"));
 
 var _CardPropTypes = _interopRequireDefault(require("./CardPropTypes"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-card",
   "description": "Cloudflare Card Component",
-  "version": "4.0.8",
+  "version": "4.0.12",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,8 +11,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-link": "^4.0.8",
-    "@cloudflare/style-container": "^7.5.14",
+    "@cloudflare/component-arrow-swivel": "^2.4.89",
+    "@cloudflare/component-button": "^2.11.10",
+    "@cloudflare/component-link": "^4.0.11",
+    "@cloudflare/style-container": "^7.5.16",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
@@ -29,5 +31,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "c0f55b7686dd50538f3aecd7e24e86681fe61ad4"
+  "gitHead": "3c93419b5ec7702dc1f5da2d871c9ac707f8b468"
 }

package/src/CardDrawer.js

@@ -1,8 +1,26 @@
+import PropTypes from 'prop-types';
 import { createStyledComponent } from '@cloudflare/style-container';
 
-const CardDrawer = createStyledComponent(({ theme, isActive }) => ({
-  borderTop: isActive ? `1px solid ${theme.colors.gray[7]}` : 'initial',
-  padding: isActive ? 3 : 'initial'
-}));
+const CardDrawer = createStyledComponent(
+  ({ theme, isActive }) => ({
+    borderTop: isActive ? `1px solid ${theme.colors.gray[7]}` : 'initial',
+    padding: isActive ? 3 : 'initial'
+  }),
+  'div',
+  ['role', 'aria-labelledby']
+);
+
+CardDrawer.propTypes = {
+  id: PropTypes.string.isRequired,
+  key: PropTypes.string.isRequired,
+  'aria-labelledby': PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  addToggleFunction: PropTypes.func.isRequired,
+  role: PropTypes.string
+};
+
+CardDrawer.defaultProps = {
+  role: 'region'
+};
 
 export default CardDrawer;

package/src/CardDrawers.js

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 
 import CardSection from './CardSection';
 import CardToolbar from './CardToolbar';
-import CardToolbarLink from './CardToolbarLink';
+import CardToolbarDrawerTrigger from './CardToolbarDrawerTrigger';
 import CardPropTypes from './CardPropTypes';
 import CardDrawer from './CardDrawer';
+import CardToolbarLink from './CardToolbarLink';
 
 let UNIQUE_ID = 0;
 
@@ -54,50 +55,74 @@ class CardDrawers extends React.Component {
       ? this.props.active
       : this.state.active;
 
-    const links = [];
+    const triggers = [];
     const drawers = [];
 
     this.props.drawers.forEach(
-      ({ id: drawerId, name, content, drawerComponent, onClick, ...rest }) => {
+      ({
+        id: drawerIdProps,
+        name,
+        content,
+        drawerComponent,
+        onClick,
+        href,
+        ...rest
+      }) => {
         // The component used for the drawer can be overridden
         const Drawer = drawerComponent || CardDrawer;
+        const triggerId = `trigger-${this._cardId}-${drawerIdProps}`;
+        const drawerId = `drawer-${this._cardId}-${drawerIdProps}`;
         const isActive = drawerId === active;
-        const id = `card-${this._cardId}-drawer-${drawerId}`;
 
         onClick && this.addToggleFunction(drawerId, onClick);
-
-        links.push(
-          <CardToolbarLink
-            key={drawerId}
-            id={id}
-            isActive={isActive}
-            onClick={() => this.handleLinkClick(drawerId)}
-            expandable={content ? true : false}
-          >
-            {name}
-          </CardToolbarLink>
-        );
-
-        content &&
-          drawers.push(
-            <Drawer
-              key={drawerId}
-              role="tabpanel"
-              aria-labelledby={id}
-              aria-hidden={isActive ? 'false' : 'true'}
-              isActive={isActive}
-              addToggleFunction={this.addToggleFunction.bind(this, drawerId)}
-              {...rest}
-            >
-              {isActive && content}
-            </Drawer>
+        if (!content && !href) {
+          console.error(
+            'Drawer items must have either `content` or `href` property.'
           );
+        } else if (content && href) {
+          console.error(
+            'Drawer items must have either `content` or `href` property, but not both.'
+          );
+        } else {
+          triggers.push(
+            content ? (
+              <CardToolbarDrawerTrigger
+                key={triggerId}
+                id={triggerId}
+                isActive={isActive}
+                onClick={() => this.handleLinkClick(drawerId)}
+                ariaControls={drawerId}
+                ariaExpanded={isActive}
+              >
+                {name}
+              </CardToolbarDrawerTrigger>
+            ) : (
+              <CardToolbarLink id={triggerId} href={href}>
+                {name}
+              </CardToolbarLink>
+            )
+          );
+
+          content &&
+            drawers.push(
+              <Drawer
+                key={drawerId}
+                id={drawerId}
+                aria-labelledby={triggerId}
+                isActive={isActive}
+                addToggleFunction={this.addToggleFunction.bind(this, drawerId)}
+                {...rest}
+              >
+                {isActive && content}
+              </Drawer>
+            );
+        }
       }
     );
 
     return (
       <CardSection>
-        <CardToolbar controls={this.props.controls} links={links} />
+        <CardToolbar controls={this.props.controls} triggers={triggers} />
         <div>{drawers}</div>
       </CardSection>
     );

package/src/CardToolbar.js

@@ -19,7 +19,7 @@ const styles = ({ theme }) => ({
   }
 });
 
-const Links = createComponent(
+const Triggers = createComponent(
   () => ({
     float: 'right',
     position: 'relative'
@@ -27,17 +27,17 @@ const Links = createComponent(
   'div'
 );
 
-const CardToolbar = ({ className, controls, links }) => (
+const CardToolbar = ({ className, controls, triggers }) => (
   <div className={className}>
     <div>{controls}</div>
-    <Links role="tablist">{links}</Links>
+    <Triggers>{triggers}</Triggers>
   </div>
 );
 
 CardToolbar.propTypes = {
   className: PropTypes.string,
   controls: PropTypes.any,
-  links: PropTypes.any
+  triggers: PropTypes.any
 };
 CardToolbar.displayName = 'CardToolbar';
 export default createStyledComponent(styles, CardToolbar);

package/src/CardToolbarDrawerTrigger.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextButton } from '@cloudflare/component-button';
+import { ArrowSwivel } from '@cloudflare/component-arrow-swivel';
+
+class CardToolbarDrawerTrigger extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    this.props.onClick();
+  }
+
+  render() {
+    const { id, children, isActive, ariaControls, ariaExpanded } = this.props;
+
+    return (
+      <TextButton
+        id={id}
+        onClick={this.handleClick}
+        isActive={isActive}
+        px={3}
+        py={2}
+        fontSize={3}
+        aria-controls={ariaControls}
+        aria-expanded={ariaExpanded}
+      >
+        {children}
+        <ArrowSwivel isActive={isActive} duration={50} />
+      </TextButton>
+    );
+  }
+}
+
+CardToolbarDrawerTrigger.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  ariaControls: PropTypes.string.isRequired,
+  ariaExpanded: PropTypes.bool.isRequired
+};
+
+CardToolbarDrawerTrigger.defaultProps = {
+  isActive: false
+};
+
+export default CardToolbarDrawerTrigger;

package/src/CardToolbarLink.js

@@ -1,48 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@cloudflare/component-link';
+import { createComponent } from '@cloudflare/style-container';
 
-class CardToolbarLink extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(e) {
-    e.preventDefault();
-    this.props.onClick();
-  }
-
-  render() {
-    const { id, children, expandable, isActive } = this.props;
-    return (
-      <Link
-        role={expandable ? 'tab' : 'link'}
-        id={id}
-        onClick={this.handleClick}
-        isActive={isActive}
-        expandable={expandable}
-        px={3}
-        py={2}
-        fontSize={3}
-      >
-        {children}
-      </Link>
-    );
-  }
-}
+const CardToolbarLink = createComponent({}, ({ id, href, children }) => {
+  return (
+    <Link
+      px={3}
+      py={2}
+      fontSize={3}
+      target="_blank"
+      rel="noopener noreferrer"
+      id={id ? id : null}
+      href={href}
+    >
+      {children}
+    </Link>
+  );
+});
 
 CardToolbarLink.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  isActive: PropTypes.bool.isRequired,
   id: PropTypes.string,
-  children: PropTypes.node,
-  expandable: PropTypes.bool
-};
-
-CardToolbarLink.defaultProps = {
-  expandable: true,
-  isActive: false
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
 };
 
 export default CardToolbarLink;

package/src/index.js

@@ -8,6 +8,7 @@ import CardSection from './CardSection';
 import CardTitle from './CardTitle';
 import CardFooter from './CardFooter';
 import CardToolbar from './CardToolbar';
+import CardToolbarDrawerTrigger from './CardToolbarDrawerTrigger';
 import CardToolbarLink from './CardToolbarLink';
 import CardPropTypes from './CardPropTypes';
 import CardDrawer from './CardDrawer';
@@ -25,5 +26,6 @@ export {
   CardTitle,
   CardFooter,
   CardToolbar,
+  CardToolbarDrawerTrigger,
   CardToolbarLink
 };