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

Comparing version 5.2.2 to 5.3.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon-button
 
+## 5.3.0
+
+### Minor Changes
+
+-   16e1635a: IconButton: Add option for `large` value for `size` prop (24x24 icon size with target area of 48x48)
+
 ## 5.2.2
@@ -4,0 +10,0 @@

dist/components/icon-button.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
 import { Link } from "react-router-dom";
-export type IconButtonSize = "xsmall" | "small" | "medium";
+export type IconButtonSize = "xsmall" | "small" | "medium" | "large";
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
@@ -41,3 +41,4 @@ /**
      * Size of the icon button.
-     * One of `xsmall` (16 icon, 20 target), `small` (24, 32), or `medium (24, 40).
+     * One of `xsmall` (16 icon, 20 target), `small` (24, 32), `medium` (24, 40),
+     * or `large` (24, 48).
      * Defaults to `medium`.
@@ -44,0 +45,0 @@ */

dist/es/index.js

@@ -47,2 +47,4 @@ import * as React from 'react';
       return "medium";
+    case "large":
+      return "medium";
   }
@@ -53,3 +55,4 @@ };
   small: 32,
-  medium: 40
+  medium: 40,
+  large: 48
 })[size];
@@ -56,0 +59,0 @@

dist/index.js

@@ -70,2 +70,4 @@ 'use strict';
       return "medium";
+    case "large":
+      return "medium";
   }
@@ -76,3 +78,4 @@ };
   small: 32,
-  medium: 40
+  medium: 40,
+  large: 48
 })[size];
@@ -79,0 +82,0 @@

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "design": "v1",
@@ -5,0 +5,0 @@ "publishConfig": {

src/util/icon-button-util.test.ts

@@ -9,2 +9,3 @@ import {iconSizeForButtonSize, targetPixelsForSize} from "./icon-button-util";
         ${"medium"} | ${"medium"}
+        ${"large"}  | ${"medium"}
     `(
@@ -24,2 +25,3 @@ "should return $expectedIconSize icon for $buttonSize icon button",
         ${"medium"} | ${40}
+        ${"large"}  | ${48}
     `(
@@ -26,0 +28,0 @@ "should return $expectedTargetPixels for $size icon button",

src/util/icon-button-util.ts

@@ -15,2 +15,4 @@ import {IconSize} from "@khanacademy/wonder-blocks-icon";
             return "medium";
+        case "large":
+            return "medium";
     }
@@ -23,2 +25,2 @@ };
 export const targetPixelsForSize = (size: IconButtonSize): number =>
-    ({xsmall: 24, small: 32, medium: 40}[size]);
+    ({xsmall: 24, small: 32, medium: 40, large: 48}[size]);

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

2633

increased by0.04%

Worsened metrics

Total package byte prevSize

195930

decreased by-54.18%

No dependency changes