@khanacademy/wonder-blocks-toolbar 2.1.25

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.js

@@ -0,0 +1,99 @@
+import { Component, createElement } from 'react';
+import { StyleSheet } from 'aphrodite';
+import Color from '@khanacademy/wonder-blocks-color';
+import { View } from '@khanacademy/wonder-blocks-core';
+import { LabelSmall, LabelLarge, HeadingSmall } from '@khanacademy/wonder-blocks-typography';
+
+/*
+ * A toolbar component that often acts as a container header.
+ */
+class Toolbar extends Component {
+  render() {
+    const {
+      color,
+      leftContent,
+      rightContent,
+      size,
+      subtitle,
+      title
+    } = this.props;
+    const TitleComponent = subtitle ? LabelLarge : HeadingSmall;
+    return /*#__PURE__*/createElement(View, {
+      style: [sharedStyles.container, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
+    }, /*#__PURE__*/createElement(View, {
+      style: sharedStyles.column
+    }, /*#__PURE__*/createElement(View, {
+      style: sharedStyles.leftColumn
+    }, leftContent)), title && /*#__PURE__*/createElement(View, {
+      style: [sharedStyles.column, sharedStyles.wideColumn]
+    }, /*#__PURE__*/createElement(View, {
+      style: [sharedStyles.titles, sharedStyles.verticalAlign, sharedStyles.center]
+    }, /*#__PURE__*/createElement(TitleComponent, {
+      id: "wb-toolbar-title"
+    }, title), subtitle && /*#__PURE__*/createElement(LabelSmall, {
+      style: color === "light" && sharedStyles.subtitle
+    }, subtitle))), /*#__PURE__*/createElement(View, {
+      style: sharedStyles.column
+    }, /*#__PURE__*/createElement(View, {
+      style: sharedStyles.rightColumn
+    }, rightContent)));
+  }
+
+}
+Toolbar.defaultProps = {
+  color: "light",
+  leftContent: null,
+  rightContent: null,
+  size: "medium"
+};
+const sharedStyles = StyleSheet.create({
+  container: {
+    border: "1px solid rgba(33, 36, 44, 0.16)",
+    display: "flex",
+    flexDirection: "row",
+    minHeight: 66,
+    paddingLeft: 16,
+    paddingRight: 16,
+    position: "relative",
+    width: "100%"
+  },
+  small: {
+    minHeight: 50
+  },
+  dark: {
+    backgroundColor: Color.darkBlue,
+    boxShadow: "0 1px 0 0 rgba(255, 255, 255, 0.64)",
+    color: "white"
+  },
+  verticalAlign: {
+    justifyContent: "center"
+  },
+  column: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  wideColumn: {
+    flexBasis: "50%"
+  },
+  leftColumn: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flex-start"
+  },
+  rightColumn: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flex-end"
+  },
+  center: {
+    textAlign: "center"
+  },
+  subtitle: {
+    color: "rgba(33, 36, 44, 0.64)"
+  },
+  titles: {
+    padding: 12
+  }
+});
+
+export default Toolbar;

package/dist/index.js

@@ -0,0 +1,247 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
+/***/ }),
+/* 5 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ toolbar_Toolbar; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(3);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
+var wonder_blocks_color_ = __webpack_require__(4);
+var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(1);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
+var wonder_blocks_typography_ = __webpack_require__(2);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-toolbar/src/components/toolbar.js
+/*
+ * A toolbar component that often acts as a container header.
+ */
+
+
+
+
+
+class toolbar_Toolbar extends external_react_["Component"] {
+  render() {
+    const {
+      color,
+      leftContent,
+      rightContent,
+      size,
+      subtitle,
+      title
+    } = this.props;
+    const TitleComponent = subtitle ? wonder_blocks_typography_["LabelLarge"] : wonder_blocks_typography_["HeadingSmall"];
+    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: [sharedStyles.container, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: sharedStyles.column
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: sharedStyles.leftColumn
+    }, leftContent)), title && /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: [sharedStyles.column, sharedStyles.wideColumn]
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: [sharedStyles.titles, sharedStyles.verticalAlign, sharedStyles.center]
+    }, /*#__PURE__*/external_react_["createElement"](TitleComponent, {
+      id: "wb-toolbar-title"
+    }, title), subtitle && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: color === "light" && sharedStyles.subtitle
+    }, subtitle))), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: sharedStyles.column
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: sharedStyles.rightColumn
+    }, rightContent)));
+  }
+
+}
+toolbar_Toolbar.defaultProps = {
+  color: "light",
+  leftContent: null,
+  rightContent: null,
+  size: "medium"
+};
+const sharedStyles = external_aphrodite_["StyleSheet"].create({
+  container: {
+    border: "1px solid rgba(33, 36, 44, 0.16)",
+    display: "flex",
+    flexDirection: "row",
+    minHeight: 66,
+    paddingLeft: 16,
+    paddingRight: 16,
+    position: "relative",
+    width: "100%"
+  },
+  small: {
+    minHeight: 50
+  },
+  dark: {
+    backgroundColor: wonder_blocks_color_default.a.darkBlue,
+    boxShadow: "0 1px 0 0 rgba(255, 255, 255, 0.64)",
+    color: "white"
+  },
+  verticalAlign: {
+    justifyContent: "center"
+  },
+  column: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  wideColumn: {
+    flexBasis: "50%"
+  },
+  leftColumn: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flex-start"
+  },
+  rightColumn: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flex-end"
+  },
+  center: {
+    textAlign: "center"
+  },
+  subtitle: {
+    color: "rgba(33, 36, 44, 0.64)"
+  },
+  titles: {
+    padding: 12
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-toolbar/src/index.js
+
+
+
+/***/ })
+/******/ ]);

package/dist/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export * from "../src/index.js";

package/docs.md

@@ -0,0 +1 @@
+The Toolbar component is a generic toolbar wrapper that exposes customization options. An optional title and subtitle property can be used along with left and right content passed as props.

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@khanacademy/wonder-blocks-toolbar",
+  "version": "2.1.25",
+  "design": "v1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
+  "source": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@khanacademy/wonder-blocks-color": "^1.1.18",
+    "@khanacademy/wonder-blocks-core": "^3.1.4",
+    "@khanacademy/wonder-blocks-typography": "^1.1.25"
+  },
+  "peerDependencies": {
+    "aphrodite": "^1.2.5",
+    "react": "^16.4.1"
+  },
+  "devDependencies": {
+    "wb-dev-build-settings": "^0.1.0"
+  },
+  "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
+}