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

Comparing version 2.0.10 to 2.1.0

dist/es/index.js

@@ -906,4 +906,5 @@ import { Component, createElement } from 'react';
           hideDefaultFocusRing = _this$props.hideDefaultFocusRing,
+          light = _this$props.light,
           disabled = _this$props.disabled,
-          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "disabled"]);
+          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]);
 
@@ -913,3 +914,3 @@ var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
       var getStyle = function getStyle(state) {
-        return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && styles.focused, style];
+        return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
       };
@@ -960,2 +961,3 @@
 _defineProperty(Clickable, "defaultProps", {
+  light: false,
   disabled: false,
@@ -998,2 +1000,5 @@ "aria-label": ""
     outline: "solid 2px ".concat(Color.blue)
+  },
+  focusedLight: {
+    outline: "solid 2px ".concat(Color.white)
   }
@@ -1000,0 +1005,0 @@ });

dist/index.js

@@ -1092,4 +1092,5 @@ module.exports =
           hideDefaultFocusRing = _this$props.hideDefaultFocusRing,
+          light = _this$props.light,
           disabled = _this$props.disabled,
-          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "disabled"]);
+          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]);
 
@@ -1099,3 +1100,3 @@ var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
       var getStyle = function getStyle(state) {
-        return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && styles.focused, style];
+        return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
       };
@@ -1146,2 +1147,3 @@
 clickable_defineProperty(clickable_Clickable, "defaultProps", {
+  light: false,
   disabled: false,
@@ -1186,2 +1188,5 @@ "aria-label": ""
     outline: "solid 2px ".concat(es.blue)
+  },
+  focusedLight: {
+    outline: "solid 2px ".concat(es.white)
   }
@@ -1188,0 +1193,0 @@ });

package.json

 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "design": "v1",
@@ -30,3 +30,3 @@ "description": "Clickable component for Wonder-Blocks.",
   },
-  "gitHead": "59c7258165cbf82e1d80c42f26275225e0ccbc90"
+  "gitHead": "195b760d4ce4fcc1ef10b98ed6b839b1f58966aa"
 }

src/__tests__/generated-snapshot.test.js

@@ -62,2 +62,41 @@ // This file is auto-generated by gen-snapshot-tests.js
         const styles = StyleSheet.create({
+            background: {
+                backgroundColor: Color.darkBlue,
+                color: Color.white,
+                padding: Spacing.small_12,
+            },
+            hovered: {
+                textDecoration: "underline",
+                backgroundColor: Color.purple,
+            },
+            pressed: {
+                color: Color.blue,
+            },
+        });
+        const example = (
+            <View style={styles.background}>
+                <Clickable
+                    onClick={() => alert("You clicked some text!")}
+                    role="tab"
+                    light={true}
+                >
+                    {({hovered, focused, pressed}) => (
+                        <View
+                            style={[
+                                hovered && styles.hovered,
+                                pressed && styles.pressed,
+                            ]}
+                        >
+                            <Body>This text is clickable!</Body>
+                        </View>
+                    )}
+                </Clickable>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 3", () => {
+        const styles = StyleSheet.create({
             row: {
@@ -99,3 +138,3 @@ flexDirection: "row",
 
-    it("example 3", () => {
+    it("example 4", () => {
         const styles = StyleSheet.create({
@@ -102,0 +141,0 @@ hovered: {

src/components/clickable.js

@@ -52,2 +52,9 @@ // @flow
     /**
+     * Whether the Clickable is on a dark colored background.
+     * Sets the default focus ring color to white, instead of blue.
+     * Defaults to false.
+     */
+    light: boolean,
+
+    /**
      * Disables or enables the child; defaults to false
@@ -171,2 +178,3 @@ */
 type DefaultProps = {|
+    light: $PropertyType<Props, "light">,
     disabled: $PropertyType<Props, "disabled">,
@@ -208,2 +216,3 @@ "aria-label": $PropertyType<Props, "aria-label">,
     static defaultProps: DefaultProps = {
+        light: false,
         disabled: false,
@@ -275,2 +284,3 @@ "aria-label": "",
             hideDefaultFocusRing,
+            light,
             disabled,
@@ -288,3 +298,5 @@ ...restProps
             styles.link,
-            !hideDefaultFocusRing && state.focused && styles.focused,
+            !hideDefaultFocusRing &&
+                state.focused &&
+                (light ? styles.focusedLight : styles.focused),
             style,
@@ -378,2 +390,5 @@ ];
     },
+    focusedLight: {
+        outline: `solid 2px ${Color.white}`,
+    },
 });

src/components/clickable.md

@@ -53,2 +53,48 @@ ### Creating a Clickable component
 
+Clickable has a `light` prop which changes the default focus ring color to fit a dark background.
+
+```jsx
+import {StyleSheet} from "aphrodite";
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Color from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {Body} from "@khanacademy/wonder-blocks-typography";
+
+const styles = StyleSheet.create({
+    background: {
+        backgroundColor: Color.darkBlue,
+        color: Color.white,
+        padding: Spacing.small_12,
+    },
+    hovered: {
+        textDecoration: "underline",
+        backgroundColor: Color.purple,
+    },
+    pressed: {
+        color: Color.blue,
+    },
+});
+
+<View style={styles.background}>
+    <Clickable
+        onClick={() => alert("You clicked some text!")}
+        role="tab"
+        light={true}
+    >
+        {
+            ({hovered, focused, pressed}) =>
+            <View style={[
+                hovered && styles.hovered,
+                pressed && styles.pressed,
+            ]}>
+                <Body>
+                    This text is clickable!
+                </Body>
+            </View>
+        }
+    </Clickable>
+</View>
+```
+
 ### Client-Side routing with Clickable
@@ -55,0 +101,0 @@

src/components/clickable.stories.js

@@ -8,2 +8,4 @@ // @flow
 import Color from "@khanacademy/wonder-blocks-color";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Body} from "@khanacademy/wonder-blocks-typography";
@@ -17,2 +19,43 @@
 
+export const basic: StoryComponentType = () => (
+    <View>
+        <View style={styles.centerText}>
+            <Clickable
+                href="https://www.khanacademy.org/about/tos"
+                skipClientNav={true}
+            >
+                {({hovered, focused, pressed}) => (
+                    <View
+                        style={[
+                            hovered && styles.hovered,
+                            pressed && styles.pressed,
+                        ]}
+                    >
+                        <Body>This text is clickable!</Body>
+                    </View>
+                )}
+            </Clickable>
+        </View>
+        <Strut size={Spacing.xLarge_32} />
+        <View style={[styles.centerText, styles.dark]}>
+            <Clickable
+                href="https://www.khanacademy.org/about/tos"
+                skipClientNav={true}
+                light={true}
+            >
+                {({hovered, focused, pressed}) => (
+                    <View
+                        style={[
+                            hovered && styles.hovered,
+                            pressed && styles.pressed,
+                        ]}
+                    >
+                        <Body>This text is clickable!</Body>
+                    </View>
+                )}
+            </Clickable>
+        </View>
+    </View>
+);
+
 export const keyboardNavigation: StoryComponentType = () => (
@@ -80,2 +123,10 @@ <View>
     },
+    centerText: {
+        textAlign: "center",
+    },
+    dark: {
+        backgroundColor: Color.darkBlue,
+        color: Color.white,
+        padding: Spacing.xSmall_8,
+    },
 });

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

213040

increased by3.6%

Lines of code

4968

increased by2.31%

No dependency changes