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

Comparing version 2.0.1 to 2.1.0

components/text.js

@@ -8,10 +8,9 @@ // @flow
 
-import type {AriaProps, TextTag} from "../util/types.js";
+import type {TextTag, TextViewSharedProps} from "../util/types.js";
 
-type Props = AriaProps & {
+type Props = {|
+    ...TextViewSharedProps,
     style?: StyleType,
     tag: TextTag,
-    children?: any,
-    [otherProp: string]: any,
-};
+|};
 
@@ -54,3 +53,3 @@ const isHeaderRegex = /^h[1-6]$/;
     render() {
-        const {children, style, tag: Tag, ...otherProps} = this.props;
+        const {children, style, tag: Tag, testId, ...otherProps} = this.props;
 
@@ -69,2 +68,3 @@ const isHeader = isHeaderRegex.test(Tag);
                 className={styleAttributes.className}
+                data-test-id={testId}
             >
@@ -71,0 +71,0 @@ {children}

components/text.md

@@ -41,1 +41,10 @@ ```js
 ```
+
+Both `View` and `Text` support a `testId` prop.
+
+```js
+<View>
+    <View testId="foo">Foo</View>
+    <Text testId="bar">Bar</Text>
+</View>
+```

components/view.js

@@ -7,3 +7,3 @@ // @flow
 
-import type {Props} from "../util/types.js";
+import type {TextViewSharedProps} from "../util/types.js";
 
@@ -44,6 +44,7 @@ const styles = StyleSheet.create({
  */
-export default class View extends React.Component<Props> {
+export default class View extends React.Component<TextViewSharedProps> {
     render() {
-        return <StyledDiv {...this.props} />;
+        const {testId, ...restProps} = this.props;
+        return <StyledDiv data-test-id={testId} {...restProps} />;
     }
 }

dist/es/index.js

@@ -1071,3 +1071,4 @@ import React__default, { createElement, Component, Fragment, createContext } from 'react';
           Tag = _this$props.tag,
-          otherProps = _objectWithoutProperties(_this$props, ["children", "style", "tag"]);
+          testId = _this$props.testId,
+          otherProps = _objectWithoutProperties(_this$props, ["children", "style", "tag", "testId"]);
 
@@ -1078,3 +1079,4 @@ var isHeader = isHeaderRegex.test(Tag);
         style: styleAttributes.style,
-        className: styleAttributes.className
+        className: styleAttributes.className,
+        "data-test-id": testId
       }), children);
@@ -1175,3 +1177,9 @@ }
     value: function render() {
-      return createElement(StyledDiv, this.props);
+      var _this$props = this.props,
+          testId = _this$props.testId,
+          restProps = _objectWithoutProperties(_this$props, ["testId"]);
+
+      return createElement(StyledDiv, _extends({
+        "data-test-id": testId
+      }, restProps));
     }
@@ -1178,0 +1186,0 @@ }]);

generated-snapshot.test.js

@@ -63,2 +63,12 @@ // This file is auto-generated by gen-snapshot-tests.js
     it("example 3", () => {
+        const example = (
+            <View>
+                <View testId="foo">Foo</View>
+                <Text testId="bar">Bar</Text>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it("example 4", () => {
         const {
@@ -114,3 +124,3 @@ Body,
     });
-    it("example 4", () => {
+    it("example 5", () => {
         const {
@@ -158,3 +168,3 @@ Body,
     });
-    it("example 5", () => {
+    it("example 6", () => {
         const {
@@ -190,3 +200,3 @@ Body,
     });
-    it("example 6", () => {
+    it("example 7", () => {
         const {
@@ -215,3 +225,3 @@ BodyMonospace,
     });
-    it("example 7", () => {
+    it("example 8", () => {
         const {StyleSheet} = require("aphrodite");
@@ -246,3 +256,3 @@
     });
-    it("example 8", () => {
+    it("example 9", () => {
         const example = (
@@ -260,3 +270,3 @@ <View>
     });
-    it("example 9", () => {
+    it("example 10", () => {
         const example = (
@@ -282,3 +292,3 @@ <WithSSRPlaceholder
     });
-    it("example 10", () => {
+    it("example 11", () => {
         const example = (
@@ -297,3 +307,3 @@ <WithSSRPlaceholder placeholder={null}>
     });
-    it("example 11", () => {
+    it("example 12", () => {
         const {
@@ -377,3 +387,3 @@ Body,
     });
-    it("example 12", () => {
+    it("example 13", () => {
         const {
@@ -380,0 +390,0 @@ Body,

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "design": "v1",
@@ -16,3 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-spacing": "^2.0.14"
+    "@khanacademy/wonder-blocks-spacing": "^2.1.0"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

util/types.js

@@ -97,3 +97,3 @@ // @flow
 // eslint-disable-next-line flowtype/require-exact-type
-export type AriaProps = {
+export type AriaProps = {|
     role?: roles,
@@ -136,10 +136,90 @@ "aria-activedescendant"?: IdRef,
     "aria-valuetext"?: string,
-};
+|};
 
-export type Props = AriaProps & {
-    style?: StyleType,
+type MouseEvents = {|
+    onMouseDown?: (e: SyntheticMouseEvent<*>) => void,
+    onMouseUp?: (e: SyntheticMouseEvent<*>) => void,
+    onMouseMove?: (e: SyntheticMouseEvent<*>) => void,
+    onClick?: (e: SyntheticMouseEvent<*>) => void,
+    onDoubleClick?: (e: SyntheticMouseEvent<*>) => void,
+    onMouseEnter?: (e: SyntheticMouseEvent<*>) => void,
+    onMouseLeave?: (e: SyntheticMouseEvent<*>) => void,
+    onMouseOut?: (e: SyntheticMouseEvent<*>) => void,
+    onMouseOver?: (e: SyntheticMouseEvent<*>) => void,
+    onDrag?: (e: SyntheticMouseEvent<*>) => void,
+    onDragEnd?: (e: SyntheticMouseEvent<*>) => void,
+    onDragEnter?: (e: SyntheticMouseEvent<*>) => void,
+    onDragExit?: (e: SyntheticMouseEvent<*>) => void,
+    onDragLeave?: (e: SyntheticMouseEvent<*>) => void,
+    onDragOver?: (e: SyntheticMouseEvent<*>) => void,
+    onDragStart?: (e: SyntheticMouseEvent<*>) => void,
+    onDrop?: (e: SyntheticMouseEvent<*>) => void,
+|};
+
+type KeyboardEvents = {|
+    onKeyDown?: (e: SyntheticKeyboardEvent<*>) => void,
+    onKeyPress?: (e: SyntheticKeyboardEvent<*>) => void,
+    onKeyUp?: (e: SyntheticKeyboardEvent<*>) => void,
+|};
+
+type InputEvents = {|
+    onChange?: (e: SyntheticInputEvent<*>) => void,
+    onInput?: (e: SyntheticInputEvent<*>) => void,
+    onInvalid?: (e: SyntheticInputEvent<*>) => void,
+    onSubmit?: (e: SyntheticInputEvent<*>) => void,
+|};
+
+type TouchEvents = {|
+    onTouchCancel?: (e: SyntheticTouchEvent<*>) => void,
+    onTouchEnd?: (e: SyntheticTouchEvent<*>) => void,
+    onTouchMove?: (e: SyntheticTouchEvent<*>) => void,
+    onTouchStart?: (e: SyntheticTouchEvent<*>) => void,
+|};
+
+type FocusEvents = {|
+    onFocus?: (e: SyntheticFocusEvent<*>) => void,
+    onBlur?: (e: SyntheticFocusEvent<*>) => void,
+|};
+
+type EventHandlers = {|
+    ...MouseEvents,
+    ...KeyboardEvents,
+    ...InputEvents,
+    ...TouchEvents,
+    ...FocusEvents,
+    // TODO: add remaining supported events https://reactjs.org/docs/events.html#supported-events
+|};
+
+// Props shared between Text and View components.
+export type TextViewSharedProps = {|
+    /**
+     * Text to appear on the button.
+     */
     children?: React.Node,
-    [otherProp: string]: any,
-};
 
+    /**
+     * Optional custom styles.
+     */
+    style?: StyleType,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    tabIndex?: number,
+
+    id?: string,
+
+    // TODO(kevinb) remove the need for this
+    "data-modal-launcher-portal"?: boolean,
+
+    // Used by tooltip bubble
+    "data-placement"?: string,
+
+    ...AriaProps,
+
+    ...EventHandlers,
+|};
+
 export type MediaSize = "small" | "medium" | "large";
@@ -146,0 +226,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

325344

increased by1.8%

Lines of code

6977

increased by1.41%

Dependency changes

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