@zendeskgarden/react-theming - npm Package Compare versions

Comparing version 3.1.3 to 3.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [3.2.0](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-theming@3.1.3...@zendeskgarden/react-theming@3.2.0) (2018-12-04)
+
+
+### Features
+
+* **docs:** Improve theming docs ([#195](https://github.com/zendeskgarden/react-components/issues/195)) ([7e57c47](https://github.com/zendeskgarden/react-components/commit/7e57c47))
+
+
+
+
+
 <a name="3.1.3"></a>
@@ -8,0 +19,0 @@ ## [3.1.3](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-theming@3.1.2...@zendeskgarden/react-theming@3.1.3) (2018-08-17)

dist/index.js

@@ -90,3 +90,3 @@ /*!
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
@@ -98,86 +98,46 @@ /************************************************************************/
 
-module.exports = require("styled-components");
+module.exports = require("prop-types");
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
-"use strict";
+module.exports = require("styled-components");
 
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+module.exports = require("react");
 
-var _ThemeProvider = __webpack_require__(2);
-
-Object.defineProperty(exports, 'ThemeProvider', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_ThemeProvider).default;
-  }
-});
-
-var _isRtl = __webpack_require__(5);
-
-Object.defineProperty(exports, 'isRtl', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_isRtl).default;
-  }
-});
-
-var _retrieveTheme = __webpack_require__(6);
-
-Object.defineProperty(exports, 'retrieveTheme', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_retrieveTheme).default;
-  }
-});
-
-var _withTheme = __webpack_require__(7);
-
-Object.defineProperty(exports, 'withTheme', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_withTheme).default;
-  }
-});
-
-var _getDocument = __webpack_require__(8);
-
-Object.defineProperty(exports, 'getDocument', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getDocument).default;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+__webpack_require__.r(__webpack_exports__);
 
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(0);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
-var _propTypes = __webpack_require__(3);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(1);
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+// CONCATENATED MODULE: ./src/ThemeProvider/ThemeProvider.js
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
 
-var _react = __webpack_require__(4);
 
-var _react2 = _interopRequireDefault(_react);
 
-var _styledComponents = __webpack_require__(0);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemeProvider = function ThemeProvider(props) {
+var ThemeProvider_ThemeProvider = function ThemeProvider(props) {
   var theme = {
@@ -188,48 +148,17 @@ rtl: props.rtl,
   };
+  return external_react_default.a.createElement(external_styled_components_["ThemeProvider"], {
+    theme: theme
+  }, props.children);
+};
 
-  return _react2.default.createElement(
-    _styledComponents.ThemeProvider,
-    { theme: theme },
-    props.children
-  );
-}; /**
-    * Copyright Zendesk, Inc.
-    *
-    * Use of this source code is governed under the Apache License, Version 2.0
-    * found at http://www.apache.org/licenses/LICENSE-2.0.
-    */
-
-ThemeProvider.propTypes = {
-  children: _propTypes2.default.node,
-  rtl: _propTypes2.default.bool,
-  theme: _propTypes2.default.object,
-  document: _propTypes2.default.object
+ThemeProvider_ThemeProvider.propTypes = {
+  children: external_prop_types_default.a.node,
+  rtl: external_prop_types_default.a.bool,
+  theme: external_prop_types_default.a.object,
+  document: external_prop_types_default.a.object
 };
-
 /** @component */
-exports.default = ThemeProvider;
 
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = isRtl;
+/* harmony default export */ var src_ThemeProvider_ThemeProvider = (ThemeProvider_ThemeProvider);
+// CONCATENATED MODULE: ./src/utils/isRtl.js
 /**
@@ -249,14 +178,3 @@ * Copyright Zendesk, Inc.
 }
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = retrieveTheme;
+// CONCATENATED MODULE: ./src/utils/retrieveTheme.js
 /**
@@ -285,38 +203,16 @@ * Copyright Zendesk, Inc.
 }
+// CONCATENATED MODULE: ./src/utils/withTheme.js
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
 
-/***/ }),
-/* 7 */
-/***/ (function(module, exports, __webpack_require__) {
+/** @component */
 
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = withTheme;
-
-var _styledComponents = __webpack_require__(0);
-
-/** @component */
 function withTheme(WrappedComponent) {
-  return (0, _styledComponents.withTheme)(WrappedComponent);
-} /**
-   * Copyright Zendesk, Inc.
-   *
-   * Use of this source code is governed under the Apache License, Version 2.0
-   * found at http://www.apache.org/licenses/LICENSE-2.0.
-   */
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getDocument;
+  return Object(external_styled_components_["withTheme"])(WrappedComponent);
+}
+// CONCATENATED MODULE: ./src/utils/getDocument.js
 /**
@@ -336,5 +232,22 @@ * Copyright Zendesk, Inc.
 }
+// CONCATENATED MODULE: ./src/index.js
+/* concated harmony reexport ThemeProvider */__webpack_require__.d(__webpack_exports__, "ThemeProvider", function() { return src_ThemeProvider_ThemeProvider; });
+/* concated harmony reexport isRtl */__webpack_require__.d(__webpack_exports__, "isRtl", function() { return isRtl; });
+/* concated harmony reexport retrieveTheme */__webpack_require__.d(__webpack_exports__, "retrieveTheme", function() { return retrieveTheme; });
+/* concated harmony reexport withTheme */__webpack_require__.d(__webpack_exports__, "withTheme", function() { return withTheme; });
+/* concated harmony reexport getDocument */__webpack_require__.d(__webpack_exports__, "getDocument", function() { return getDocument; });
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
 
+
+
+
+
+
 /***/ })
 /******/ ])));
 //# sourceMappingURL=index.js.map

dist/umd/bundle.min.js

@@ -7,3 +7,3 @@ /*!
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("styled-components"),require("rop-types"),require("react")):"function"==typeof define&&define.amd?define(["styled-components","prop-types","react"],t):"object"==typeof exports?exports.GardenTheming=t(require("styled-components"),require("rop-types"),require("react")):e.GardenTheming=t(e.styled,e.PropTypes,e.React)}(window,function(e,t,r){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var u=t[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var u in e)r.d(n,u,function(t){return e[t]}.bind(null,u));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(2);Object.defineProperty(t,"ThemeProvider",{enumerable:!0,get:function(){return c(n).default}});var u=r(5);Object.defineProperty(t,"isRtl",{enumerable:!0,get:function(){return c(u).default}});var o=r(6);Object.defineProperty(t,"retrieveTheme",{enumerable:!0,get:function(){return c(o).default}});var i=r(7);Object.defineProperty(t,"withTheme",{enumerable:!0,get:function(){return c(i).default}});var f=r(8);function c(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"getDocument",{enumerable:!0,get:function(){return c(f).default}})},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(r(3)),u=i(r(4)),o=r(0);function i(e){return e&&e.__esModule?e:{default:e}}var f=function(e){var t={rtl:e.rtl,styles:e.theme,document:e.document};return u.default.createElement(o.ThemeProvider,{theme:t},e.children)};f.propTypes={children:n.default.node,rtl:n.default.bool,theme:n.default.object,document:n.default.object},t.default=f},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).theme;return Boolean(e&&e.rtl)}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var r=t.theme.styles;if(!r)return;var n=r[e];if("function"==typeof n)return n(t);return n}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return(0,n.withTheme)(e)};var n=r(0)},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).theme;return e&&e.document||document}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("rop-types"),require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","styled-components","react"],t):"object"==typeof exports?exports.GardenTheming=t(require("rop-types"),require("styled-components"),require("react")):e.GardenTheming=t(e.PropTypes,e.styled,e.React)}(window,function(r,n,o){return function(r){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=r,o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=3)}([function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),u=r(2),i=r.n(u),c=r(1),f=function(e){var t={rtl:e.rtl,styles:e.theme,document:e.document};return i.a.createElement(c.ThemeProvider,{theme:t},e.children)};f.propTypes={children:o.a.node,rtl:o.a.bool,theme:o.a.object,document:o.a.object};var d=f;function l(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).theme;return Boolean(e&&e.rtl)}function p(e,t){var r=t.theme.styles;if(r){var n=r[e];return"function"==typeof n?n(t):n}}function a(e){return Object(c.withTheme)(e)}function s(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).theme;return e&&e.document||document}r.d(t,"ThemeProvider",function(){return d}),r.d(t,"isRtl",function(){return l}),r.d(t,"retrieveTheme",function(){return p}),r.d(t,"withTheme",function(){return a}),r.d(t,"getDocument",function(){return s})}])});
 //# sourceMappingURL=bundle.min.js.map

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "3.1.3",
+  "version": "3.2.0",
   "main": "./dist/index.js",
@@ -38,3 +38,4 @@ "files": [
   "zendeskgarden:library": "GardenTheming",
-  "zendeskgarden:src": "src/index.js"
+  "zendeskgarden:src": "src/index.js",
+  "gitHead": "100dd0814a481ce46eecd0246a9ea35b024aa154"
 }

README.md

@@ -83,2 +83,51 @@ # @zendeskgarden/react-theming [![npm version](https://img.shields.io/npm/v/@zendeskgarden/react-theming.svg?style=flat-square)](https://www.npmjs.com/package/@zendeskgarden/react-theming)
 
+### Advanced usage
+
+If you need to compose from other theme overrides e.g. you find yourself overriding
+the same properties in several components or you're using props to alter your
+overrides then please see the following code example.
+
+```jsx static
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { Notification, Title, Paragraph } from '@zendeskgarden/react-notifications';
+import { css } from 'styled-components';
+
+const commonOverrides = `
+  &&:hover {
+    color: blue;
+  }
+`;
+const theme = {
+  'notifications.title': css`
+    ${commonOverrides} && {
+      color: red;
+    }
+  `,
+  'notifications.paragraph': css`
+    ${commonOverrides} ${props => (props.purple ? 'color: purple' : '')};
+  `
+};
+
+<ThemeProvider theme={theme}>
+  <Notification>
+    <Title>Themed Title (hover as well)</Title>
+    <Paragraph purple>Custom theme triggered by prop</Paragraph>
+  </Notification>
+</ThemeProvider>;
+```
+
+The main difference here is the usage of the [`css` helper](https://www.styled-components.com/docs/api#css)
+from styled-components. This will correctly pass down the props from the component so you can conditionally
+apply styles based on props or compose from other template literals.
+
+### Theme ids
+
+Each component has a `COMPONENT_ID` applied so you can target it in your own theme
+file to override the default look and feel. This table contains all the ids and which
+package they apply to.
+
+```jsx noeditor
+<CIDTable />
+```
+
 ### WARNING
@@ -85,0 +134,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53693

increased by25.41%

Number of package files

8

increased by14.29%

Number of lines in readme file

140

increased by53.85%

Worsened metrics

Number of downloads

100754

decreased by-4.53%

Lines of code

227

decreased by-21.72%

No dependency changes