@khanacademy/wonder-blocks-progress-spinner 1.1.37 → 1.1.39

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-progress-spinner
 
+## 1.1.39
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
+## 1.1.38
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.6.1
+
 ## 1.1.37
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Color = require('@khanacademy/wonder-blocks-color');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+
+const heights = {
+  xsmall: 16,
+  small: 24,
+  medium: 48,
+  large: 96
+};
+const paths = {
+  xsmall: "M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z",
+  small: "M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z",
+  medium: "M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z",
+  large: "M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
+};
+const colors = {
+  light: Color__default["default"].white,
+  dark: Color__default["default"].offBlack16
+};
+const StyledPath = wonderBlocksCore.addStyle("path");
+class CircularSpinner extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      light,
+      style,
+      testId
+    } = this.props;
+    const height = heights[size];
+    const path = paths[size];
+    const color = light ? colors.light : colors.dark;
+    const svg = React__namespace.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: height,
+      height: height,
+      viewBox: `0 0 ${height} ${height}`,
+      "data-test-id": testId
+    }, React__namespace.createElement(StyledPath, {
+      style: [styles.loadingSpinner, {
+        fill: color
+      }],
+      fillRule: "nonzero",
+      d: path
+    }));
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles.spinnerContainer, style]
+    }, svg);
+  }
+
+}
+CircularSpinner.defaultProps = {
+  size: "large",
+  light: false
+};
+const rotateKeyFrames = {
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "50%": {
+    transform: "rotate(180deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+};
+const styles = aphrodite.StyleSheet.create({
+  spinnerContainer: {
+    justifyContent: "center"
+  },
+  loadingSpinner: {
+    transformOrigin: "50% 50%",
+    animationName: rotateKeyFrames,
+    animationDuration: "1.1s",
+    animationIterationCount: "infinite",
+    animationTimingFunction: "linear"
+  }
+});
+
+exports.CircularSpinner = CircularSpinner;

package/dist/index.js.flow

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-progress-spinner",
-  "version": "1.1.37",
+  "version": "1.1.39",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,14 +17,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5"
+    "@khanacademy/wonder-blocks-core": "^4.6.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
-}
+}

package/src/components/circular-spinner.md

@@ -1,74 +0,0 @@
-```js
-import {StyleSheet} from "aphrodite";
-import {Text, View} from "@khanacademy/wonder-blocks-core";
-import Color from "@khanacademy/wonder-blocks-color";
-
-const styles = StyleSheet.create({
-    contents: {
-        flexDirection: "row",
-    },
-    dark: {
-        background: Color.darkBlue,
-        color: Color.white,
-    },
-    block: {
-        width: 154,
-        height: 154,
-        marginRight: 16,
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-    },
-    inline: {
-        display: "inline",
-    }
-});
-
-<View>
-    <View style={styles.contents}>
-        <View style={styles.block}>
-            <CircularSpinner size="large" />
-            <Text>size: large (96px)</Text>
-        </View>
-        <View style={styles.block}>
-            <CircularSpinner size="medium" />
-            <Text>size: medium (48px)</Text>
-        </View>
-        <View style={styles.block}>
-            <CircularSpinner size="small" />
-            <Text>size: small (24px)</Text>
-        </View>
-        <View style={styles.block}>
-            <CircularSpinner size="xsmall" />
-            <Text>size: xsmall (16px)</Text>
-        </View>
-    </View>
-
-    <View style={[styles.contents, styles.dark]}>
-        <View style={styles.block}>
-            <CircularSpinner size="large" light />
-            <Text>light, size: large (96px)</Text>
-        </View>
-        <View style={styles.block}>
-            <CircularSpinner size="medium" light />
-            <Text>light, size: medium (48px)</Text>
-        </View>
-        <View style={styles.block}>
-            <CircularSpinner size="small" light />
-            <Text>light, size: small (24px)</Text>
-        </View>
-        <View style={styles.block}>
-            <CircularSpinner size="xsmall" light />
-            <Text>light, size: xsmall (16px)</Text>
-        </View>
-    </View>
-
-    <View>
-        <Text>
-            Inline inside
-            <CircularSpinner size="xsmall" style={styles.inline} />
-            {" "}some text.
-        </Text>
-    </View>
-</View>
-```