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

Comparing version 2.2.1 to 2.3.0

dist/es/index.js

@@ -1263,2 +1263,70 @@ import React__default, { createElement, Component, createContext } from 'react';
 /**
+ * This is a wrapper that returns an identifier. If the `id` prop is set, the component will
+ * return the same id to be consumed by its children. Otherwise, a unique id will be provided.
+ * This is beneficial for accessibility purpuses, among other things.
+ *
+ * The main difference with UniqueIDProvider is that IDProvider has a single responsibility,
+ * to return an identifier that can by used by the children that are rendered internally.
+ *
+ * This way, the wrapped component will receive this custom ID and will use it to connect
+ * different elements.
+ *
+ * e.g. It uses the same generated id to connect a Dialog with its main title, or form label
+ * with the associated input element, etc.
+ */
+var IDProvider =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(IDProvider, _React$Component);
+
+  function IDProvider() {
+    _classCallCheck(this, IDProvider);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(IDProvider).apply(this, arguments));
+  }
+
+  _createClass(IDProvider, [{
+    key: "renderChildren",
+    value: function renderChildren(ids) {
+      var _this$props = this.props,
+          id = _this$props.id,
+          children = _this$props.children;
+      var uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
+
+      if (!uniqueId) {
+        throw new Error("Did not get an identifier factory nor a id prop");
+      }
+
+      return children(uniqueId);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props2 = this.props,
+          id = _this$props2.id,
+          scope = _this$props2.scope;
+
+      if (id) {
+        // Let's bypass the extra weight of an id provider since we don't
+        // need it.
+        return this.renderChildren();
+      } else {
+        return createElement(UniqueIDProvider, {
+          scope: scope,
+          mockOnFirstRender: true
+        }, function (ids) {
+          return _this.renderChildren(ids);
+        });
+      }
+    }
+  }]);
+
+  return IDProvider;
+}(Component);
+
+_defineProperty(IDProvider, "defaultId", "wb-id");
+
+/**
  * Returns true for external url.
@@ -1539,2 +1607,2 @@ * Such as http://, https://, //
 
-export { ClickableBehavior, Text, View, WithSSRPlaceholder, UniqueIDProvider, addStyle, getClickableBehavior, getElementIntersection };
+export { ClickableBehavior, Text, View, WithSSRPlaceholder, IDProvider, UniqueIDProvider, addStyle, getClickableBehavior, getElementIntersection };

generated-snapshot.test.js

@@ -12,2 +12,3 @@ // This file is auto-generated by gen-snapshot-tests.js
 import ClickableBehavior from "./components/clickable-behavior.js";
+import IDProvider from "./components/id-provider.js";
 import Text from "./components/text.js";
@@ -20,2 +21,34 @@ import UniqueIDProvider from "./components/unique-id-provider.js";
     it("example 1", () => {
+        const example = (
+            <View>
+                <IDProvider scope="field">
+                    {(uniqueId) => (
+                        <label htmlFor={uniqueId}>
+                            Label with ID {uniqueId}:
+                            <input type="text" id={uniqueId} />
+                        </label>
+                    )}
+                </IDProvider>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it("example 2", () => {
+        const example = (
+            <View>
+                <IDProvider scope="field" id="some-user-id">
+                    {(uniqueId) => (
+                        <label htmlFor={uniqueId}>
+                            Label with ID {uniqueId}:
+                            <input type="text" id={uniqueId} />
+                        </label>
+                    )}
+                </IDProvider>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it("example 3", () => {
         const {StyleSheet} = require("aphrodite");
@@ -50,3 +83,3 @@
     });
-    it("example 2", () => {
+    it("example 4", () => {
         const example = (
@@ -64,3 +97,3 @@ <View>
     });
-    it("example 3", () => {
+    it("example 5", () => {
         const example = (
@@ -75,3 +108,3 @@ <View>
     });
-    it("example 4", () => {
+    it("example 6", () => {
         const {
@@ -127,3 +160,3 @@ Body,
     });
-    it("example 5", () => {
+    it("example 7", () => {
         const {
@@ -171,3 +204,3 @@ Body,
     });
-    it("example 6", () => {
+    it("example 8", () => {
         const {
@@ -203,3 +236,3 @@ Body,
     });
-    it("example 7", () => {
+    it("example 9", () => {
         const {
@@ -228,3 +261,3 @@ BodyMonospace,
     });
-    it("example 8", () => {
+    it("example 10", () => {
         const {StyleSheet} = require("aphrodite");
@@ -259,3 +292,3 @@
     });
-    it("example 9", () => {
+    it("example 11", () => {
         const example = (
@@ -273,3 +306,3 @@ <View>
     });
-    it("example 10", () => {
+    it("example 12", () => {
         const example = (
@@ -295,3 +328,3 @@ <WithSSRPlaceholder
     });
-    it("example 11", () => {
+    it("example 13", () => {
         const example = (
@@ -310,3 +343,3 @@ <WithSSRPlaceholder placeholder={null}>
     });
-    it("example 12", () => {
+    it("example 14", () => {
         const {
@@ -390,3 +423,3 @@ Body,
     });
-    it("example 13", () => {
+    it("example 15", () => {
         const {
@@ -393,0 +426,0 @@ Body,

index.js

@@ -12,2 +12,3 @@ // @flow
 } from "./components/with-ssr-placeholder.js";
+export {default as IDProvider} from "./components/id-provider.js";
 export {default as UniqueIDProvider} from "./components/unique-id-provider.js";
@@ -14,0 +15,0 @@ export {default as addStyle} from "./util/add-style.js";

index.test.js

@@ -20,2 +20,3 @@ // @flow
                 "getElementIntersection",
+                "IDProvider",
                 "UniqueIDProvider",
@@ -22,0 +23,0 @@ ].sort(),

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "design": "v1",
@@ -16,3 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-spacing": "^2.1.3"
+    "@khanacademy/wonder-blocks-spacing": "^2.1.4"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

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

302336

decreased by-3.85%

Number of package files

40

decreased by-23.08%

Lines of code

6393

decreased by-5.37%

Dependency changes

• Updated@khanacademy/wonder-blocks-spacing@^2.1.4