@khanacademy/wonder-blocks-color - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # @khanacademy/wonder-blocks-color
 
+## 1.2.1
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+
 ## 1.2.0
+
 ### Minor Changes
 
-- 34c7aacb: Update the value of darkBlue from #0a2a66 to #0b2149
+-   34c7aacb: Update the value of darkBlue from #0a2a66 to #0b2149

dist/index.js

@@ -1,99 +0,11 @@
-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 = 1);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+'use strict';
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return fade; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return mix; });
-/**
- * A color manipulation library useful for dynamically
- * mixing colors together.
- */
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+
 const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
@@ -103,4 +15,2 @@ const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
 
-// Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
-// with r,g,b,a keys.
 const parse = color => {
@@ -145,5 +55,4 @@ if (typeof color !== "string") {
   throw new Error(`Failed to parse color: ${color}`);
-}; // Stringify the color in an `rgba()` or `#abcdef` format.
+};
 
-
 const format = color => {
@@ -164,5 +73,4 @@ const r = Math.round(color.r);
   }
-}; // Adjust the alpha value of a color.
+};
 
-
 const fade = (color, percentage) => {
@@ -174,8 +82,6 @@ if (percentage < 0 || percentage > 1) {
   const components = parse(color);
-  return format({ ...components,
+  return format(_extends__default["default"]({}, components, {
     a: components.a * percentage
-  });
-}; // Mix a color into a background color, using the alpha channel of the base
-// color to determine the linear blend.
-
+  }));
+};
 const mix = (color, background) => {
@@ -192,20 +98,5 @@ const colorObj = parse(color);
 
-/***/ }),
-/* 1 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Color; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SemanticColor", function() { return SemanticColor; });
-/* harmony import */ var _util_utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mix", function() { return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["b"]; });
-
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "fade", function() { return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
-
-
 const offBlack = "#21242c";
 const white = "#ffffff";
 const Color = {
-  // Product
   blue: "#1865f2",
@@ -216,14 +107,12 @@ purple: "#9059ff",
   red: "#d92916",
-  // Neutral
   offBlack,
-  offBlack64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.64),
-  offBlack50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.5),
-  offBlack32: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.32),
-  offBlack16: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.16),
-  offBlack8: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.08),
+  offBlack64: fade(offBlack, 0.64),
+  offBlack50: fade(offBlack, 0.5),
+  offBlack32: fade(offBlack, 0.32),
+  offBlack16: fade(offBlack, 0.16),
+  offBlack8: fade(offBlack, 0.08),
   offWhite: "#f7f8fa",
   white,
-  white64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(white, 0.64),
-  white50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(white, 0.5),
-  // Brand
+  white64: fade(white, 0.64),
+  white50: fade(white, 0.5),
   darkBlue: "#0b2149",
@@ -239,4 +128,5 @@ teal: "#14bf96",
 
-
-/***/ })
-/******/ ]);
+exports.SemanticColor = SemanticColor;
+exports["default"] = Color;
+exports.fade = fade;
+exports.mix = mix;

package.json

 {
   "name": "@khanacademy/wonder-blocks-color",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "design": "v2",
@@ -16,3 +16,3 @@ "publishConfig": {
   "devDependencies": {
-    "wb-dev-build-settings": "^0.4.0"
+    "wb-dev-build-settings": "^0.7.1"
   },
@@ -19,0 +19,0 @@ "author": "",

src/docutils/swatch.js

@@ -6,157 +6,164 @@ // @flow
 import {View} from "@khanacademy/wonder-blocks-core";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {
-    HeadingLarge,
+    Caption,
     LabelLarge,
-    Body,
+    LabelSmall,
+    LabelXSmall,
 } from "@khanacademy/wonder-blocks-typography";
-import Color from "../index.js";
+import Color from "../index";
 
+type Segments = 1 | 2 | 3;
+
+const UseType = {
+    text: {
+        content: "Aa",
+        label: "Text & Icons",
+    },
+    icons: {
+        content: <Icon icon={icons.hint} />,
+        label: "Icons",
+    },
+};
+
+/**
+ * Get the color swatch information for a given color and segment count.
+ */
+const getColorSegments = (segments: Segments, color: string, dark: boolean) => {
+    switch (segments) {
+        case 1:
+            return [
+                {
+                    foreground: dark ? color : Color.white64,
+                    background: dark ? Color.darkBlue : color,
+                },
+            ];
+        case 2:
+            return [
+                {
+                    foreground: color,
+                    background: color,
+                },
+                {
+                    foreground: color,
+                    background: Color.darkBlue,
+                },
+            ];
+        case 3:
+        default:
+            return [
+                {
+                    foreground: Color.white,
+                    background: color,
+                },
+                {
+                    foreground: color,
+                    background: Color.offWhite,
+                },
+                {
+                    foreground: color,
+                    background: Color.white,
+                },
+            ];
+    }
+};
+
 type Props = {|
     color: string,
     name: string,
-    desc: string,
-    use: "text" | "icons" | null,
-    width: 256,
-    segments: 1 | 2 | 3,
+    description: string,
+    use?: "text" | "icons" | null,
+    segments: Segments,
+    dark: boolean,
+    displayColor: boolean,
 |};
 
-type DefaultProps = {|
-    width: $PropertyType<Props, "width">,
-    segments: $PropertyType<Props, "segments">,
-    use: $PropertyType<Props, "use">,
-|};
-
-const constants = {
-    segmentHeight: 64,
-};
-
-export default class Swatch extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        width: 256,
-        segments: 3,
-        use: null,
-    };
-
-    getContent(): ?string {
-        const {use} = this.props;
-        if (use === "text") {
-            return "Aa";
-        } else if (use === "icons") {
-            return "💡";
-        } else {
+export const Swatch = ({
+    name,
+    color,
+    use,
+    description,
+    segments = 3,
+    dark = false,
+    displayColor = false,
+}: Props): React.Element<typeof View> => {
+    const maybeRenderUseLabel = () => {
+        if (!use) {
             return null;
         }
-    }
-    renderThreeSegments(): React.Node {
-        const {color} = this.props;
-        const content = this.getContent();
         return (
-            <View style={[styles.row, styles.border]}>
-                <View
-                    style={[
-                        styles.box,
-                        {background: color, color: Color.white},
-                    ]}
-                >
-                    {content && <HeadingLarge>{content}</HeadingLarge>}
-                </View>
-                <View style={[styles.offWhite, styles.box, {color: color}]}>
-                    {content && <HeadingLarge>{content}</HeadingLarge>}
-                </View>
-                <View style={[styles.white, styles.box, {color: color}]}>
-                    {content && <HeadingLarge>{content}</HeadingLarge>}
-                </View>
-            </View>
+            <LabelSmall style={styles.usage}>
+                Use in: <strong>{UseType[use].label}</strong>
+            </LabelSmall>
         );
-    }
-    renderTwoSegments(): React.Node {
-        const {color} = this.props;
-        const content = this.getContent();
-        return (
-            <View style={[styles.row, styles.border]}>
-                <View style={[styles.white, styles.box]} />
-                <View
-                    style={[
-                        styles.box,
-                        {background: color, color: Color.white},
-                    ]}
-                >
-                    {content && <HeadingLarge>{content}</HeadingLarge>}
-                </View>
-            </View>
-        );
-    }
-    renderOneSegment(): React.Node {
-        const {color, use} = this.props;
-        const content = this.getContent();
-        return (
+    };
+
+    const renderSegments = () => {
+        return getColorSegments(segments, color, dark).map((color, index) => (
             <View
+                key={index}
                 style={[
-                    styles.row,
-                    styles.border,
-                    styles.box,
+                    styles.swatchItem,
                     {
-                        background: color,
-                        height: constants.segmentHeight,
-                        color: Color.white64,
+                        color: color.foreground,
+                        backgroundColor: color.background,
                     },
                 ]}
             >
-                {use === "text" && content && (
-                    <HeadingLarge>{content}</HeadingLarge>
-                )}
+                {use ? <LabelLarge>{UseType[use]?.content}</LabelLarge> : null}
             </View>
-        );
-    }
-    render(): React.Node {
-        const {name, desc, use, segments, width} = this.props;
-        return (
-            <View style={[styles.container, {width}]}>
-                {segments === 3 && this.renderThreeSegments()}
-                {segments === 2 && this.renderTwoSegments()}
-                {segments === 1 && this.renderOneSegment()}
-                <View style={[styles.row, styles.split]}>
-                    <LabelLarge>{name}</LabelLarge>
-                    {use === "text" && (
-                        <LabelLarge>Text &amp; icons</LabelLarge>
-                    )}
-                    {use === "icons" && <LabelLarge>Icons</LabelLarge>}
-                </View>
-                <View style={styles.row}>
-                    <Body>{desc}</Body>
-                </View>
+        ));
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.info}>
+                <LabelLarge>{name}</LabelLarge>
+                <LabelXSmall style={styles.tag}>{color}</LabelXSmall>
+                <Caption>{description}</Caption>
+                {maybeRenderUseLabel()}
             </View>
-        );
-    }
-}
+            <View style={styles.swatch}>{renderSegments()}</View>
+        </View>
+    );
+};
+
 const styles = StyleSheet.create({
-    offWhite: {
+    container: {
+        color: Color.offBlack,
+        flexDirection: "row",
+        marginBottom: Spacing.xLarge_32,
+    },
+    info: {
+        alignItems: "flex-start",
+        flexBasis: "30%",
+    },
+    tag: {
         background: Color.offWhite,
+        border: `solid 1px ${Color.offBlack8}`,
+        borderRadius: Spacing.xxxxSmall_2,
+        margin: `${Spacing.xxxSmall_4}px 0`,
+        padding: `0 ${Spacing.xxxSmall_4}px`,
     },
-    white: {
+    usage: {
+        color: Color.offBlack64,
+    },
+    swatch: {
+        flexDirection: "row",
+        flexBasis: "70%",
+        borderRadius: Spacing.xxxSmall_4,
         background: Color.white,
-    },
-    border: {
-        border: `solid 1px ${Color.offBlack32}`,
-        borderRadius: 4,
+        boxShadow: `0 1px ${Spacing.xxxSmall_4}px 0 ${Color.offBlack8}`,
+        border: `1px solid ${Color.offBlack16}`,
         overflow: "hidden",
+        height: Spacing.xxxLarge_64,
     },
-    box: {
-        width: 256,
-        height: constants.segmentHeight,
+    swatchItem: {
+        gap: Spacing.medium_16,
+        flex: 1,
+        justifyContent: "center",
         alignItems: "center",
-        justifyContent: "center",
+        padding: Spacing.medium_16,
     },
-    row: {
-        flexDirection: "row",
-    },
-    split: {
-        justifyContent: "space-between",
-        marginTop: 16,
-        marginBottom: 8,
-    },
-    container: {
-        color: Color.offBlack,
-        paddingBottom: 16,
-    },
 });

src/index.js

 // @flow
-import {mix, fade} from "./util/utils.js";
+import {mix, fade} from "./util/utils";
 
@@ -4,0 +4,0 @@ const offBlack = "#21242c";

src/util/__tests__/utils.test.js

 // @flow
-import {fade, mix} from "../utils.js";
+import {fade, mix} from "../utils";
 
@@ -4,0 +4,0 @@ const INVALID_COLORS = ["#NOTVALID", "#12345", "#12", "#ABCDEFG", ""];

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

Worsened metrics

Total package byte prevSize

27789

decreased by-77.84%

Number of package files

11

decreased by-15.38%

Lines of code

652

decreased by-29.74%

No dependency changes