cf-component-card - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

es/Card.js

@@ -10,5 +10,19 @@ var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
+var styles = function styles(_ref) {
+  var theme = _ref.theme;
+  return {
+    marginTop: '1em',
+    marginBottom: '1em',
+    padding: 0,
+    border: '1px solid ' + theme.colorGrayLight,
+    backgroundColor: theme.colorWhite,
+
+    borderRadius: '2px',
+    transition: 'all 0.35s ease'
+  };
+};
+
 var Card = function (_React$Component) {
@@ -28,3 +42,3 @@ _inherits(Card, _React$Component);
         'section',
-        { id: this.props.id, className: 'cf-card' },
+        { id: this.props.id, className: this.props.className },
         this.props.children
@@ -43,2 +57,2 @@ );
 
-export default Card;
+export default createComponent(styles, Card);

es/CardBlock.js

@@ -10,5 +10,17 @@ var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
+var styles = function styles(_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: '1rem 1.4rem 1.26667rem',
+    borderTop: '1px solid ' + theme.colorGrayLight,
+
+    '&:first-child': {
+      borderTop: 0
+    }
+  };
+};
+
 var CardBlock = function (_React$Component) {
@@ -26,7 +38,5 @@ _inherits(CardBlock, _React$Component);
     value: function render() {
-      var className = 'cf-card__block';
-
       return React.createElement(
         'div',
-        { className: className },
+        { className: this.props.className },
         this.props.children
@@ -44,2 +54,2 @@ );
 
-export default CardBlock;
+export default createComponent(styles, CardBlock);

es/CardContent.js

@@ -1,52 +0,29 @@
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
-var CardContent = function (_React$Component) {
-  _inherits(CardContent, _React$Component);
+var styles = function styles() {
+  return {
+    padding: '1.5rem',
 
-  function CardContent() {
-    _classCallCheck(this, CardContent);
-
-    return _possibleConstructorReturn(this, (CardContent.__proto__ || Object.getPrototypeOf(CardContent)).apply(this, arguments));
-  }
-
-  _createClass(CardContent, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        { className: 'cf-card__content' },
-        React.createElement(
-          'h3',
-          { className: 'cf-card__title' },
-          this.props.title
-        ),
-        this.props.children,
-        this.props.footerMessage ? React.createElement(
-          'div',
-          { className: 'cf-card__footer_message' },
-          this.props.footerMessage
-        ) : null
-      );
+    tablet: {
+      display: 'table-cell'
     }
-  }]);
+  };
+};
 
-  return CardContent;
-}(React.Component);
+var CardContent = function CardContent(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+  return React.createElement(
+    'div',
+    { className: className },
+    children
+  );
+};
 
 CardContent.propTypes = {
-  title: PropTypes.node,
-  footerMessage: PropTypes.string,
   children: PropTypes.node
 };
 
-export default CardContent;
+export default createComponent(styles, CardContent);

es/CardControl.js

@@ -1,37 +0,39 @@
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
-var CardControl = function (_React$Component) {
-  _inherits(CardControl, _React$Component);
+var styles = function styles(_ref) {
+  var theme = _ref.theme,
+      wide = _ref.wide;
+  return {
+    position: 'relative',
+    padding: wide ? 0 : '2rem',
+    border: '0 solid ' + theme.colorGrayLight,
+    borderTopWidth: '1px',
+    backgroundColor: 'rgba(0, 0, 0, 0.06)',
+    textAlign: wide ? 'inherit' : 'center',
 
-  function CardControl() {
-    _classCallCheck(this, CardControl);
+    tablet: {
+      width: '40%',
+      borderLeftWidth: '1px',
+      borderTopWidth: 0,
+      verticalAlign: 'middle',
+      display: 'table-cell'
+    },
 
-    return _possibleConstructorReturn(this, (CardControl.__proto__ || Object.getPrototypeOf(CardControl)).apply(this, arguments));
-  }
-
-  _createClass(CardControl, [{
-    key: 'render',
-    value: function render() {
-      var className = 'cf-card__control' + (this.props.wide ? ' cf-card__control--wide' : '');
-
-      return React.createElement(
-        'div',
-        { className: className },
-        this.props.children
-      );
+    desktop: {
+      width: '30%'
     }
-  }]);
+  };
+};
 
-  return CardControl;
-}(React.Component);
+var CardControl = function CardControl(_ref2) {
+  var className = _ref2.className,
+      children = _ref2.children;
+  return React.createElement(
+    'div',
+    { className: className },
+    children
+  );
+};
 
@@ -43,2 +45,2 @@ CardControl.propTypes = {
 
-export default CardControl;
+export default createComponent(styles, CardControl, ['wide']);

es/CardDrawers.js

@@ -11,2 +11,4 @@ var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
+
 import CardSection from './CardSection';
@@ -19,2 +21,18 @@ import CardToolbar from './CardToolbar';
 
+var Drawer = createComponent(function (_ref) {
+  var theme = _ref.theme,
+      isActive = _ref.isActive;
+  return {
+    borderTop: isActive ? '1px solid ' + theme.colorGrayLight : 'initial',
+    padding: isActive ? '1.5rem' : 'initial'
+  };
+}, 'div', ['key', 'id', 'isActive', 'onClick']);
+
+var Container = createComponent(function (_ref2) {
+  var active = _ref2.active;
+  return {
+    display: active ? 'block' : 'none'
+  };
+}, 'div', ['active']);
+
 var CardDrawers = function (_React$Component) {
@@ -74,10 +92,4 @@ _inherits(CardDrawers, _React$Component);
 
-        var className = 'cf-card__drawer';
-
-        if (isActive) {
-          className += ' cf-card__drawer--active';
-        }
-
         drawers.push(React.createElement(
-          'div',
+          Drawer,
           {
@@ -88,3 +100,3 @@ key: drawer.id,
             'aria-hidden': isActive ? 'false' : 'true',
-            className: className
+            isActive: isActive
           },
@@ -95,8 +107,2 @@ isActive && drawer.content
 
-      var containerClassName = 'cf-card__drawers_container';
-
-      if (active) {
-        containerClassName += ' cf-card__drawers_container--open';
-      }
-
       return React.createElement(
@@ -107,4 +113,4 @@ CardSection,
         React.createElement(
-          'div',
-          { className: containerClassName },
+          Container,
+          { active: this.props.active },
           drawers
@@ -111,0 +117,0 @@ )

es/CardMessages.js

@@ -1,49 +0,33 @@
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
-var CardMessages = function (_React$Component) {
-  _inherits(CardMessages, _React$Component);
+var styles = function styles() {
+  return {
+    paddingTop: '0.5rem'
+  };
+};
 
-  function CardMessages() {
-    _classCallCheck(this, CardMessages);
-
-    return _possibleConstructorReturn(this, (CardMessages.__proto__ || Object.getPrototypeOf(CardMessages)).apply(this, arguments));
-  }
-
-  _createClass(CardMessages, [{
-    key: 'render',
-    value: function render() {
+var CardMessages = function CardMessages(_ref) {
+  var className = _ref.className,
+      messages = _ref.messages;
+  return React.createElement(
+    'div',
+    { className: className },
+    messages.map(function (message, index) {
       return React.createElement(
         'div',
-        { className: 'cf-card__messages' },
-        this.props.messages.map(function (message, index) {
-          return React.createElement(
-            'div',
-            {
-              key: index,
-              role: 'alert',
-              className: 'cf-card__message cf-card__message--' + message.type
-            },
-            message.content
-          );
-        })
+        { key: index, role: 'alert' },
+        message.content
       );
-    }
-  }]);
+    })
+  );
+};
 
-  return CardMessages;
-}(React.Component);
-
 CardMessages.propTypes = {
+  /* The messages to render */
   messages: PropTypes.arrayOf(PropTypes.shape({
+    /* The type of message, currently does nothing */
     type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
+    /* The content to be rendered */
     content: PropTypes.any.isRequired
@@ -53,2 +37,2 @@ })).isRequired
 
-export default CardMessages;
+export default createComponent(styles, CardMessages);

es/CardSection.js

@@ -1,37 +0,30 @@
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
-var CardSection = function (_React$Component) {
-  _inherits(CardSection, _React$Component);
+var styles = function styles(_ref) {
+  var theme = _ref.theme,
+      status = _ref.status;
+  return {
+    display: 'table',
+    tableLayout: 'fixed',
+    width: '100%',
+    borderTop: '1px solid ' + theme.colorGrayLight,
+    borderLeft: status === 'error' ? '3px solid ' + theme.colorRed : 'initial',
 
-  function CardSection() {
-    _classCallCheck(this, CardSection);
-
-    return _possibleConstructorReturn(this, (CardSection.__proto__ || Object.getPrototypeOf(CardSection)).apply(this, arguments));
-  }
-
-  _createClass(CardSection, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        {
-          className: 'cf-card__section cf-card__section--' + this.props.status
-        },
-        this.props.children
-      );
+    '&:first-child': {
+      borderTop: 'initial'
     }
-  }]);
+  };
+};
 
-  return CardSection;
-}(React.Component);
+var CardSection = function CardSection(_ref2) {
+  var className = _ref2.className,
+      children = _ref2.children;
+  return React.createElement(
+    'div',
+    { className: className },
+    children
+  );
+};
 
@@ -47,2 +40,2 @@ CardSection.propTypes = {
 
-export default CardSection;
+export default createComponent(styles, CardSection, ['status']);

es/CardToolbar.js

@@ -1,45 +0,49 @@
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
 
-var CardToolbar = function (_React$Component) {
-  _inherits(CardToolbar, _React$Component);
+var styles = function styles(_ref) {
+  var theme = _ref.theme;
+  return {
+    borderTop: '1px solid ' + theme.colorGrayLight,
+    minHeight: '2.96666rem',
 
-  function CardToolbar() {
-    _classCallCheck(this, CardToolbar);
+    '&:first-child': {
+      borderTop: 'initial'
+    },
 
-    return _possibleConstructorReturn(this, (CardToolbar.__proto__ || Object.getPrototypeOf(CardToolbar)).apply(this, arguments));
-  }
-
-  _createClass(CardToolbar, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        { className: 'cf-card__toolbar' },
-        React.createElement(
-          'div',
-          { className: 'cf-card__toolbar_controls' },
-          this.props.controls
-        ),
-        React.createElement(
-          'div',
-          { className: 'cf-card__toolbar_links', role: 'tablist' },
-          this.props.links
-        )
-      );
+    '&::after': {
+      content: "''",
+      display: 'table',
+      clear: 'both'
     }
-  }]);
+  };
+};
 
-  return CardToolbar;
-}(React.Component);
+var Links = createComponent(function () {
+  return {
+    float: 'right'
+  };
+}, 'div', ['role']);
 
+var CardToolbar = function CardToolbar(_ref2) {
+  var className = _ref2.className,
+      controls = _ref2.controls,
+      links = _ref2.links;
+  return React.createElement(
+    'div',
+    { className: className },
+    React.createElement(
+      'div',
+      null,
+      controls
+    ),
+    React.createElement(
+      Links,
+      { role: 'tablist' },
+      links
+    )
+  );
+};
+
 CardToolbar.propTypes = {
@@ -50,2 +54,2 @@ controls: PropTypes.any,
 
-export default CardToolbar;
+export default createComponent(styles, CardToolbar);

es/CardToolbarLink.js

@@ -12,3 +12,27 @@ var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import Link from 'cf-component-link';
+import { createComponent } from 'cf-style-container';
 
+var styles = function styles(_ref) {
+  var isActive = _ref.isActive;
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    padding: '0.73333rem 2em 0.73333rem 0.5rem',
+
+    '&::after': {
+      content: "'\\f003'",
+      fontFamily: '"cloudflare-font"',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      marginTop: '-0.7em',
+
+      position: 'absolute',
+      top: '60%',
+      right: '1rem',
+      transition: 'transform 0.2s ease',
+      transform: isActive ? 'rotate(90deg)' : 'initial'
+    }
+  };
+};
+
 var CardToolbarLink = function (_React$Component) {
@@ -35,8 +59,2 @@ _inherits(CardToolbarLink, _React$Component);
     value: function render() {
-      var className = 'cf-card__toolbar_link';
-
-      if (this.props.isActive) {
-        className += ' cf-card__toolbar_link--open';
-      }
-
       return React.createElement(
@@ -47,3 +65,3 @@ Link,
           id: this.props.id,
-          className: className,
+          className: this.props.className,
           onClick: this.handleClick
@@ -66,2 +84,2 @@ },
 
-export default CardToolbarLink;
+export default createComponent(styles, CardToolbarLink, ['isActive']);

es/index.js

@@ -1,11 +0,34 @@
-import Card from './Card';
-import CardContent from './CardContent';
-import CardControl from './CardControl';
-import CardDrawers from './CardDrawers';
-import CardLoadingText from './CardLoadingText';
-import CardMessages from './CardMessages';
+import { applyTheme } from 'cf-style-container';
+
+import CardUnstyled from './Card';
+import CardTheme from './CardTheme';
+import CardBlockUnstyled from './CardBlock';
+import CardBlockTheme from './CardBlockTheme';
+import CardContentUnstyled from './CardContent';
+import CardContentTheme from './CardContentTheme';
+import CardControlUnstyled from './CardControl';
+import CardControlTheme from './CardControlTheme';
+import CardDrawersUnstyled from './CardDrawers';
+import CardDrawersTheme from './CardDrawersTheme.js';
+import CardMessagesUnstyled from './CardMessages';
+import CardMessagesTheme from './CardMessagesTheme';
+import CardSectionUnstyled from './CardSection';
+import CardSectionTheme from './CardSectionTheme';
+import CardTitleUnstyled from './CardTitle';
+import CardTitleTheme from './CardTitleTheme';
+import CardFooterUnstyled from './CardFooter';
+import CardFooterTheme from './CardFooterTheme';
+
 import CardPropTypes from './CardPropTypes';
-import CardSection from './CardSection';
-import CardBlock from './CardBlock';
 
-export { Card, CardContent, CardControl, CardDrawers, CardLoadingText, CardMessages, CardPropTypes, CardSection, CardBlock };
+var Card = applyTheme(CardUnstyled, CardTheme);
+var CardBlock = applyTheme(CardBlockUnstyled, CardBlockTheme);
+var CardContent = applyTheme(CardContentUnstyled, CardContentTheme);
+var CardControl = applyTheme(CardControlUnstyled, CardControlTheme);
+var CardDrawers = applyTheme(CardDrawersUnstyled, CardDrawersTheme);
+var CardMessages = applyTheme(CardMessagesUnstyled, CardMessagesTheme);
+var CardSection = applyTheme(CardSectionUnstyled, CardSectionTheme);
+var CardTitle = applyTheme(CardTitleUnstyled, CardTitleTheme);
+var CardFooter = applyTheme(CardFooterUnstyled, CardFooterTheme);
+
+export { Card, CardUnstyled, CardTheme, CardContent, CardContentUnstyled, CardContentTheme, CardControl, CardControlUnstyled, CardControlTheme, CardDrawers, CardDrawersUnstyled, CardDrawersTheme, CardMessages, CardMessagesUnstyled, CardMessagesTheme, CardPropTypes, CardSection, CardSectionUnstyled, CardSectionTheme, CardBlock, CardBlockUnstyled, CardBlockTheme, CardTitle, CardTitleUnstyled, CardTitleTheme, CardFooter, CardFooterUnstyled, CardFooterTheme };

lib/Card.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _cfStyleContainer = require('cf-style-container');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,2 +28,16 @@
 
+var styles = function styles(_ref) {
+  var theme = _ref.theme;
+  return {
+    marginTop: '1em',
+    marginBottom: '1em',
+    padding: 0,
+    border: '1px solid ' + theme.colorGrayLight,
+    backgroundColor: theme.colorWhite,
+
+    borderRadius: '2px',
+    transition: 'all 0.35s ease'
+  };
+};
+
 var Card = function (_React$Component) {
@@ -41,3 +57,3 @@ _inherits(Card, _React$Component);
         'section',
-        { id: this.props.id, className: 'cf-card' },
+        { id: this.props.id, className: this.props.className },
         this.props.children
@@ -56,2 +72,2 @@ );
 
-exports.default = Card;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, Card);

lib/CardBlock.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _cfStyleContainer = require('cf-style-container');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,2 +28,14 @@
 
+var styles = function styles(_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: '1rem 1.4rem 1.26667rem',
+    borderTop: '1px solid ' + theme.colorGrayLight,
+
+    '&:first-child': {
+      borderTop: 0
+    }
+  };
+};
+
 var CardBlock = function (_React$Component) {
@@ -39,7 +53,5 @@ _inherits(CardBlock, _React$Component);
     value: function render() {
-      var className = 'cf-card__block';
-
       return _react2.default.createElement(
         'div',
-        { className: className },
+        { className: this.props.className },
         this.props.children
@@ -57,2 +69,2 @@ );
 
-exports.default = CardBlock;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardBlock);

lib/CardContent.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -18,49 +16,30 @@
 
+var _cfStyleContainer = require('cf-style-container');
+
 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"); } }
+var styles = function styles() {
+  return {
+    padding: '1.5rem',
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var CardContent = function (_React$Component) {
-  _inherits(CardContent, _React$Component);
-
-  function CardContent() {
-    _classCallCheck(this, CardContent);
-
-    return _possibleConstructorReturn(this, (CardContent.__proto__ || Object.getPrototypeOf(CardContent)).apply(this, arguments));
-  }
-
-  _createClass(CardContent, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        { className: 'cf-card__content' },
-        _react2.default.createElement(
-          'h3',
-          { className: 'cf-card__title' },
-          this.props.title
-        ),
-        this.props.children,
-        this.props.footerMessage ? _react2.default.createElement(
-          'div',
-          { className: 'cf-card__footer_message' },
-          this.props.footerMessage
-        ) : null
-      );
+    tablet: {
+      display: 'table-cell'
     }
-  }]);
+  };
+};
 
-  return CardContent;
-}(_react2.default.Component);
+var CardContent = function CardContent(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+  return _react2.default.createElement(
+    'div',
+    { className: className },
+    children
+  );
+};
 
 CardContent.propTypes = {
-  title: _propTypes2.default.node,
-  footerMessage: _propTypes2.default.string,
   children: _propTypes2.default.node
 };
 
-exports.default = CardContent;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardContent);

lib/CardControl.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -18,34 +16,40 @@
 
+var _cfStyleContainer = require('cf-style-container');
+
 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"); } }
+var styles = function styles(_ref) {
+  var theme = _ref.theme,
+      wide = _ref.wide;
+  return {
+    position: 'relative',
+    padding: wide ? 0 : '2rem',
+    border: '0 solid ' + theme.colorGrayLight,
+    borderTopWidth: '1px',
+    backgroundColor: 'rgba(0, 0, 0, 0.06)',
+    textAlign: wide ? 'inherit' : 'center',
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+    tablet: {
+      width: '40%',
+      borderLeftWidth: '1px',
+      borderTopWidth: 0,
+      verticalAlign: 'middle',
+      display: 'table-cell'
+    },
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var CardControl = function (_React$Component) {
-  _inherits(CardControl, _React$Component);
-
-  function CardControl() {
-    _classCallCheck(this, CardControl);
-
-    return _possibleConstructorReturn(this, (CardControl.__proto__ || Object.getPrototypeOf(CardControl)).apply(this, arguments));
-  }
-
-  _createClass(CardControl, [{
-    key: 'render',
-    value: function render() {
-      var className = 'cf-card__control' + (this.props.wide ? ' cf-card__control--wide' : '');
-
-      return _react2.default.createElement(
-        'div',
-        { className: className },
-        this.props.children
-      );
+    desktop: {
+      width: '30%'
     }
-  }]);
+  };
+};
 
-  return CardControl;
-}(_react2.default.Component);
+var CardControl = function CardControl(_ref2) {
+  var className = _ref2.className,
+      children = _ref2.children;
+  return _react2.default.createElement(
+    'div',
+    { className: className },
+    children
+  );
+};
 
@@ -57,2 +61,2 @@ CardControl.propTypes = {
 
-exports.default = CardControl;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardControl, ['wide']);

lib/CardDrawers.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _cfStyleContainer = require('cf-style-container');
+
 var _CardSection = require('./CardSection');
@@ -44,2 +46,18 @@
 
+var Drawer = (0, _cfStyleContainer.createComponent)(function (_ref) {
+  var theme = _ref.theme,
+      isActive = _ref.isActive;
+  return {
+    borderTop: isActive ? '1px solid ' + theme.colorGrayLight : 'initial',
+    padding: isActive ? '1.5rem' : 'initial'
+  };
+}, 'div', ['key', 'id', 'isActive', 'onClick']);
+
+var Container = (0, _cfStyleContainer.createComponent)(function (_ref2) {
+  var active = _ref2.active;
+  return {
+    display: active ? 'block' : 'none'
+  };
+}, 'div', ['active']);
+
 var CardDrawers = function (_React$Component) {
@@ -99,10 +117,4 @@ _inherits(CardDrawers, _React$Component);
 
-        var className = 'cf-card__drawer';
-
-        if (isActive) {
-          className += ' cf-card__drawer--active';
-        }
-
         drawers.push(_react2.default.createElement(
-          'div',
+          Drawer,
           {
@@ -113,3 +125,3 @@ key: drawer.id,
             'aria-hidden': isActive ? 'false' : 'true',
-            className: className
+            isActive: isActive
           },
@@ -120,8 +132,2 @@ isActive && drawer.content
 
-      var containerClassName = 'cf-card__drawers_container';
-
-      if (active) {
-        containerClassName += ' cf-card__drawers_container--open';
-      }
-
       return _react2.default.createElement(
@@ -132,4 +138,4 @@ _CardSection2.default,
         _react2.default.createElement(
-          'div',
-          { className: containerClassName },
+          Container,
+          { active: this.props.active },
           drawers
@@ -136,0 +142,0 @@ )

lib/CardMessages.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -18,46 +16,34 @@
 
+var _cfStyleContainer = require('cf-style-container');
+
 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"); } }
+var styles = function styles() {
+  return {
+    paddingTop: '0.5rem'
+  };
+};
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var CardMessages = function (_React$Component) {
-  _inherits(CardMessages, _React$Component);
-
-  function CardMessages() {
-    _classCallCheck(this, CardMessages);
-
-    return _possibleConstructorReturn(this, (CardMessages.__proto__ || Object.getPrototypeOf(CardMessages)).apply(this, arguments));
-  }
-
-  _createClass(CardMessages, [{
-    key: 'render',
-    value: function render() {
+var CardMessages = function CardMessages(_ref) {
+  var className = _ref.className,
+      messages = _ref.messages;
+  return _react2.default.createElement(
+    'div',
+    { className: className },
+    messages.map(function (message, index) {
       return _react2.default.createElement(
         'div',
-        { className: 'cf-card__messages' },
-        this.props.messages.map(function (message, index) {
-          return _react2.default.createElement(
-            'div',
-            {
-              key: index,
-              role: 'alert',
-              className: 'cf-card__message cf-card__message--' + message.type
-            },
-            message.content
-          );
-        })
+        { key: index, role: 'alert' },
+        message.content
       );
-    }
-  }]);
+    })
+  );
+};
 
-  return CardMessages;
-}(_react2.default.Component);
-
 CardMessages.propTypes = {
+  /* The messages to render */
   messages: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    /* The type of message, currently does nothing */
     type: _propTypes2.default.oneOf(['info', 'success', 'error', 'warning']),
+    /* The content to be rendered */
     content: _propTypes2.default.any.isRequired
@@ -67,2 +53,2 @@ })).isRequired
 
-exports.default = CardMessages;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardMessages);

lib/CardSection.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -18,34 +16,31 @@
 
+var _cfStyleContainer = require('cf-style-container');
+
 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"); } }
+var styles = function styles(_ref) {
+  var theme = _ref.theme,
+      status = _ref.status;
+  return {
+    display: 'table',
+    tableLayout: 'fixed',
+    width: '100%',
+    borderTop: '1px solid ' + theme.colorGrayLight,
+    borderLeft: status === 'error' ? '3px solid ' + theme.colorRed : 'initial',
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var CardSection = function (_React$Component) {
-  _inherits(CardSection, _React$Component);
-
-  function CardSection() {
-    _classCallCheck(this, CardSection);
-
-    return _possibleConstructorReturn(this, (CardSection.__proto__ || Object.getPrototypeOf(CardSection)).apply(this, arguments));
-  }
-
-  _createClass(CardSection, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        {
-          className: 'cf-card__section cf-card__section--' + this.props.status
-        },
-        this.props.children
-      );
+    '&:first-child': {
+      borderTop: 'initial'
     }
-  }]);
+  };
+};
 
-  return CardSection;
-}(_react2.default.Component);
+var CardSection = function CardSection(_ref2) {
+  var className = _ref2.className,
+      children = _ref2.children;
+  return _react2.default.createElement(
+    'div',
+    { className: className },
+    children
+  );
+};
 
@@ -61,2 +56,2 @@ CardSection.propTypes = {
 
-exports.default = CardSection;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardSection, ['status']);

lib/CardToolbar.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -18,42 +16,50 @@
 
+var _cfStyleContainer = require('cf-style-container');
+
 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"); } }
+var styles = function styles(_ref) {
+  var theme = _ref.theme;
+  return {
+    borderTop: '1px solid ' + theme.colorGrayLight,
+    minHeight: '2.96666rem',
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+    '&:first-child': {
+      borderTop: 'initial'
+    },
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+    '&::after': {
+      content: "''",
+      display: 'table',
+      clear: 'both'
+    }
+  };
+};
 
-var CardToolbar = function (_React$Component) {
-  _inherits(CardToolbar, _React$Component);
+var Links = (0, _cfStyleContainer.createComponent)(function () {
+  return {
+    float: 'right'
+  };
+}, 'div', ['role']);
 
-  function CardToolbar() {
-    _classCallCheck(this, CardToolbar);
+var CardToolbar = function CardToolbar(_ref2) {
+  var className = _ref2.className,
+      controls = _ref2.controls,
+      links = _ref2.links;
+  return _react2.default.createElement(
+    'div',
+    { className: className },
+    _react2.default.createElement(
+      'div',
+      null,
+      controls
+    ),
+    _react2.default.createElement(
+      Links,
+      { role: 'tablist' },
+      links
+    )
+  );
+};
 
-    return _possibleConstructorReturn(this, (CardToolbar.__proto__ || Object.getPrototypeOf(CardToolbar)).apply(this, arguments));
-  }
-
-  _createClass(CardToolbar, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        { className: 'cf-card__toolbar' },
-        _react2.default.createElement(
-          'div',
-          { className: 'cf-card__toolbar_controls' },
-          this.props.controls
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: 'cf-card__toolbar_links', role: 'tablist' },
-          this.props.links
-        )
-      );
-    }
-  }]);
-
-  return CardToolbar;
-}(_react2.default.Component);
-
 CardToolbar.propTypes = {
@@ -64,2 +70,2 @@ controls: _propTypes2.default.any,
 
-exports.default = CardToolbar;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardToolbar);

lib/CardToolbarLink.js

@@ -21,2 +21,4 @@ 'use strict';
 
+var _cfStyleContainer = require('cf-style-container');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +32,25 @@
 
+var styles = function styles(_ref) {
+  var isActive = _ref.isActive;
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    padding: '0.73333rem 2em 0.73333rem 0.5rem',
+
+    '&::after': {
+      content: "'\\f003'",
+      fontFamily: '"cloudflare-font"',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      marginTop: '-0.7em',
+
+      position: 'absolute',
+      top: '60%',
+      right: '1rem',
+      transition: 'transform 0.2s ease',
+      transform: isActive ? 'rotate(90deg)' : 'initial'
+    }
+  };
+};
+
 var CardToolbarLink = function (_React$Component) {
@@ -52,8 +77,2 @@ _inherits(CardToolbarLink, _React$Component);
     value: function render() {
-      var className = 'cf-card__toolbar_link';
-
-      if (this.props.isActive) {
-        className += ' cf-card__toolbar_link--open';
-      }
-
       return _react2.default.createElement(
@@ -64,3 +83,3 @@ _cfComponentLink2.default,
           id: this.props.id,
-          className: className,
+          className: this.props.className,
           onClick: this.handleClick
@@ -83,2 +102,2 @@ },
 
-exports.default = CardToolbarLink;
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardToolbarLink, ['isActive']);

lib/index.js

@@ -6,4 +6,6 @@ 'use strict';
 });
-exports.CardBlock = exports.CardSection = exports.CardPropTypes = exports.CardMessages = exports.CardLoadingText = exports.CardDrawers = exports.CardControl = exports.CardContent = exports.Card = undefined;
+exports.CardFooterTheme = exports.CardFooterUnstyled = exports.CardFooter = exports.CardTitleTheme = exports.CardTitleUnstyled = exports.CardTitle = exports.CardBlockTheme = exports.CardBlockUnstyled = exports.CardBlock = exports.CardSectionTheme = exports.CardSectionUnstyled = exports.CardSection = exports.CardPropTypes = exports.CardMessagesTheme = exports.CardMessagesUnstyled = exports.CardMessages = exports.CardDrawersTheme = exports.CardDrawersUnstyled = exports.CardDrawers = exports.CardControlTheme = exports.CardControlUnstyled = exports.CardControl = exports.CardContentTheme = exports.CardContentUnstyled = exports.CardContent = exports.CardTheme = exports.CardUnstyled = exports.Card = undefined;
 
+var _cfStyleContainer = require('cf-style-container');
+
 var _Card = require('./Card');
@@ -13,2 +15,14 @@
 
+var _CardTheme = require('./CardTheme');
+
+var _CardTheme2 = _interopRequireDefault(_CardTheme);
+
+var _CardBlock = require('./CardBlock');
+
+var _CardBlock2 = _interopRequireDefault(_CardBlock);
+
+var _CardBlockTheme = require('./CardBlockTheme');
+
+var _CardBlockTheme2 = _interopRequireDefault(_CardBlockTheme);
+
 var _CardContent = require('./CardContent');
@@ -18,2 +32,6 @@
 
+var _CardContentTheme = require('./CardContentTheme');
+
+var _CardContentTheme2 = _interopRequireDefault(_CardContentTheme);
+
 var _CardControl = require('./CardControl');
@@ -23,2 +41,6 @@
 
+var _CardControlTheme = require('./CardControlTheme');
+
+var _CardControlTheme2 = _interopRequireDefault(_CardControlTheme);
+
 var _CardDrawers = require('./CardDrawers');
@@ -28,5 +50,5 @@
 
-var _CardLoadingText = require('./CardLoadingText');
+var _CardDrawersTheme = require('./CardDrawersTheme.js');
 
-var _CardLoadingText2 = _interopRequireDefault(_CardLoadingText);
+var _CardDrawersTheme2 = _interopRequireDefault(_CardDrawersTheme);
 
@@ -37,5 +59,5 @@ var _CardMessages = require('./CardMessages');
 
-var _CardPropTypes = require('./CardPropTypes');
+var _CardMessagesTheme = require('./CardMessagesTheme');
 
-var _CardPropTypes2 = _interopRequireDefault(_CardPropTypes);
+var _CardMessagesTheme2 = _interopRequireDefault(_CardMessagesTheme);
 
@@ -46,16 +68,65 @@ var _CardSection = require('./CardSection');
 
-var _CardBlock = require('./CardBlock');
+var _CardSectionTheme = require('./CardSectionTheme');
 
-var _CardBlock2 = _interopRequireDefault(_CardBlock);
+var _CardSectionTheme2 = _interopRequireDefault(_CardSectionTheme);
 
+var _CardTitle = require('./CardTitle');
+
+var _CardTitle2 = _interopRequireDefault(_CardTitle);
+
+var _CardTitleTheme = require('./CardTitleTheme');
+
+var _CardTitleTheme2 = _interopRequireDefault(_CardTitleTheme);
+
+var _CardFooter = require('./CardFooter');
+
+var _CardFooter2 = _interopRequireDefault(_CardFooter);
+
+var _CardFooterTheme = require('./CardFooterTheme');
+
+var _CardFooterTheme2 = _interopRequireDefault(_CardFooterTheme);
+
+var _CardPropTypes = require('./CardPropTypes');
+
+var _CardPropTypes2 = _interopRequireDefault(_CardPropTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.Card = _Card2.default;
-exports.CardContent = _CardContent2.default;
-exports.CardControl = _CardControl2.default;
-exports.CardDrawers = _CardDrawers2.default;
-exports.CardLoadingText = _CardLoadingText2.default;
-exports.CardMessages = _CardMessages2.default;
+var Card = (0, _cfStyleContainer.applyTheme)(_Card2.default, _CardTheme2.default);
+var CardBlock = (0, _cfStyleContainer.applyTheme)(_CardBlock2.default, _CardBlockTheme2.default);
+var CardContent = (0, _cfStyleContainer.applyTheme)(_CardContent2.default, _CardContentTheme2.default);
+var CardControl = (0, _cfStyleContainer.applyTheme)(_CardControl2.default, _CardControlTheme2.default);
+var CardDrawers = (0, _cfStyleContainer.applyTheme)(_CardDrawers2.default, _CardDrawersTheme2.default);
+var CardMessages = (0, _cfStyleContainer.applyTheme)(_CardMessages2.default, _CardMessagesTheme2.default);
+var CardSection = (0, _cfStyleContainer.applyTheme)(_CardSection2.default, _CardSectionTheme2.default);
+var CardTitle = (0, _cfStyleContainer.applyTheme)(_CardTitle2.default, _CardTitleTheme2.default);
+var CardFooter = (0, _cfStyleContainer.applyTheme)(_CardFooter2.default, _CardFooterTheme2.default);
+
+exports.Card = Card;
+exports.CardUnstyled = _Card2.default;
+exports.CardTheme = _CardTheme2.default;
+exports.CardContent = CardContent;
+exports.CardContentUnstyled = _CardContent2.default;
+exports.CardContentTheme = _CardContentTheme2.default;
+exports.CardControl = CardControl;
+exports.CardControlUnstyled = _CardControl2.default;
+exports.CardControlTheme = _CardControlTheme2.default;
+exports.CardDrawers = CardDrawers;
+exports.CardDrawersUnstyled = _CardDrawers2.default;
+exports.CardDrawersTheme = _CardDrawersTheme2.default;
+exports.CardMessages = CardMessages;
+exports.CardMessagesUnstyled = _CardMessages2.default;
+exports.CardMessagesTheme = _CardMessagesTheme2.default;
 exports.CardPropTypes = _CardPropTypes2.default;
-exports.CardSection = _CardSection2.default;
-exports.CardBlock = _CardBlock2.default;
+exports.CardSection = CardSection;
+exports.CardSectionUnstyled = _CardSection2.default;
+exports.CardSectionTheme = _CardSectionTheme2.default;
+exports.CardBlock = CardBlock;
+exports.CardBlockUnstyled = _CardBlock2.default;
+exports.CardBlockTheme = _CardBlockTheme2.default;
+exports.CardTitle = CardTitle;
+exports.CardTitleUnstyled = _CardTitle2.default;
+exports.CardTitleTheme = _CardTitleTheme2.default;
+exports.CardFooter = CardFooter;
+exports.CardFooterUnstyled = _CardFooter2.default;
+exports.CardFooterTheme = _CardFooterTheme2.default;

package.json

 {
   "name": "cf-component-card",
   "description": "Cloudflare Card Component",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

README.md

@@ -44,6 +44,4 @@ # cf-component-card
         <CardSection>
-          <CardContent
-            title="Hello World"
-            footerMessage="This is a footer message."
-          >
+          <CardContent>
+            <CardTitle>Card Title</CardTitle>
             <p>Here is some content.</p>
@@ -56,2 +54,3 @@ <CardMessages
             />
+            <CardFooter>Card Footer</CardFooter>
           </CardContent>
@@ -58,0 +57,0 @@ <CardControl>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

50

increased by72.41%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

59247

decreased by-51.17%

Lines of code

1297

decreased by-25.93%

Number of lines in readme file

82

decreased by-1.2%

No dependency changes