@khanacademy/wonder-blocks-icon-button - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

components/icon-button-core.js

@@ -12,3 +12,3 @@ // @flow
 } from "@khanacademy/wonder-blocks-color";
-import {addStyle, View} from "@khanacademy/wonder-blocks-core";
+import {addStyle} from "@khanacademy/wonder-blocks-core";
 import type {ClickableHandlers} from "@khanacademy/wonder-blocks-core";
@@ -106,31 +106,25 @@ import Icon from "@khanacademy/wonder-blocks-icon";
             "data-test-id": testId,
-            style: defaultStyle,
+            style: [defaultStyle, style],
             ...handlers,
         };
 
-        if (href) {
+        if (href && !disabled) {
             return router && !skipClientNav ? (
-                <View style={style}>
-                    <StyledLink {...commonProps} to={href}>
-                        {child}
-                    </StyledLink>
-                </View>
+                <StyledLink {...commonProps} to={href}>
+                    {child}
+                </StyledLink>
             ) : (
-                <View>
-                    <StyledAnchor {...commonProps} href={href}>
-                        {child}
-                    </StyledAnchor>
-                </View>
+                <StyledAnchor {...commonProps} href={href}>
+                    {child}
+                </StyledAnchor>
             );
         } else {
             return (
-                <View style={style}>
-                    <StyledButton
-                        type="button"
-                        {...commonProps}
-                        disabled={disabled}
-                    >
-                        {child}
-                    </StyledButton>
-                </View>
+                <StyledButton
+                    type="button"
+                    {...commonProps}
+                    disabled={disabled}
+                >
+                    {child}
+                </StyledButton>
             );
@@ -137,0 +131,0 @@ }

components/icon-button.md

@@ -25,3 +25,3 @@ Primary, secondary, and tertiary IconButton examples:
         kind="tertiary"
-        onClick={(e) => console.log("hello")}
+        href="/search"
     />
@@ -35,2 +35,9 @@ <Strut size={16} />
     />
+    <Strut size={16} />
+    <IconButton
+        disabled={true}
+        icon={icons.search}
+        aria-label="search"
+        href="/search"
+    />
 </View>
@@ -37,0 +44,0 @@ ```

components/icon-button.test.js

@@ -130,2 +130,32 @@ // @flow
     });
+
+    test("disallow navigation when href and disabled are both set", () => {
+        const wrapper = mount(
+            <MemoryRouter>
+                <div>
+                    <IconButton
+                        icon={icons.search}
+                        aria-label="search"
+                        testId="icon-button"
+                        href="/foo"
+                        disabled={true}
+                    />
+                    <Switch>
+                        <Route path="/foo">
+                            <div id="foo">Hello, world!</div>
+                        </Route>
+                    </Switch>
+                </div>
+            </MemoryRouter>,
+        );
+
+        // Act
+        const buttonWrapper = wrapper
+            .find(`[data-test-id="icon-button"]`)
+            .first();
+        buttonWrapper.simulate("click", {button: 0});
+
+        // Assert
+        expect(wrapper.find("#foo").exists()).toBe(false);
+    });
 });

dist/es/index.js

@@ -6,3 +6,3 @@ import React from 'react';
 import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-color';
-import { addStyle, View, getClickableBehavior } from '@khanacademy/wonder-blocks-core';
+import { addStyle, getClickableBehavior } from '@khanacademy/wonder-blocks-core';
 import Icon from '@khanacademy/wonder-blocks-icon';
@@ -218,21 +218,17 @@
         "data-test-id": testId,
-        style: defaultStyle
+        style: [defaultStyle, style]
       }, handlers);
 
-      if (href) {
-        return router && !skipClientNav ? React.createElement(View, {
-          style: style
-        }, React.createElement(StyledLink, _extends({}, commonProps, {
+      if (href && !disabled) {
+        return router && !skipClientNav ? React.createElement(StyledLink, _extends({}, commonProps, {
           to: href
-        }), child)) : React.createElement(View, null, React.createElement(StyledAnchor, _extends({}, commonProps, {
+        }), child) : React.createElement(StyledAnchor, _extends({}, commonProps, {
           href: href
-        }), child));
+        }), child);
       } else {
-        return React.createElement(View, {
-          style: style
-        }, React.createElement(StyledButton, _extends({
+        return React.createElement(StyledButton, _extends({
           type: "button"
         }, commonProps, {
           disabled: disabled
-        }), child));
+        }), child);
       }
@@ -239,0 +235,0 @@ }

dist/index.js

@@ -249,21 +249,17 @@ module.exports =
         "data-test-id": testId,
-        style: defaultStyle
+        style: [defaultStyle, style]
       }, handlers);
 
-      if (href) {
-        return router && !skipClientNav ? external_react_default.a.createElement(wonder_blocks_core_["View"], {
-          style: style
-        }, external_react_default.a.createElement(StyledLink, _extends({}, commonProps, {
+      if (href && !disabled) {
+        return router && !skipClientNav ? external_react_default.a.createElement(StyledLink, _extends({}, commonProps, {
           to: href
-        }), child)) : external_react_default.a.createElement(wonder_blocks_core_["View"], null, external_react_default.a.createElement(StyledAnchor, _extends({}, commonProps, {
+        }), child) : external_react_default.a.createElement(StyledAnchor, _extends({}, commonProps, {
           href: href
-        }), child));
+        }), child);
       } else {
-        return external_react_default.a.createElement(wonder_blocks_core_["View"], {
-          style: style
-        }, external_react_default.a.createElement(StyledButton, _extends({
+        return external_react_default.a.createElement(StyledButton, _extends({
           type: "button"
         }, commonProps, {
           disabled: disabled
-        }), child));
+        }), child);
       }
@@ -270,0 +266,0 @@ }

generated-snapshot.test.js

@@ -38,3 +38,3 @@ // This file is auto-generated by gen-snapshot-tests.js
                     kind="tertiary"
-                    onClick={(e) => console.log("hello")}
+                    href="/search"
                 />
@@ -48,2 +48,9 @@ <Strut size={16} />
                 />
+                <Strut size={16} />
+                <IconButton
+                    disabled={true}
+                    icon={icons.search}
+                    aria-label="search"
+                    href="/search"
+                />
             </View>
@@ -50,0 +57,0 @@ );

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "design": "v1",
@@ -18,5 +18,5 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-color": "^1.0.13",
-    "@khanacademy/wonder-blocks-core": "^1.2.6",
-    "@khanacademy/wonder-blocks-icon": "^1.0.11"
+    "@khanacademy/wonder-blocks-color": "^1.0.14",
+    "@khanacademy/wonder-blocks-core": "^1.2.7",
+    "@khanacademy/wonder-blocks-icon": "^1.0.12"
   },
@@ -23,0 +23,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

Improved metrics

Lines of code

1419

increased by1.43%

Worsened metrics

Total package byte prevSize

174113

decreased by-15.54%

Dependency changes

• Updated@khanacademy/wonder-blocks-color@^1.0.14

• Updated@khanacademy/wonder-blocks-core@^1.2.7

• Updated@khanacademy/wonder-blocks-icon@^1.0.12