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

Comparing version 0.1.1 to 1.0.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-banner
 
+## 1.0.0
+
+### Major Changes
+
+-   98829fdc: Wonder Blocks Banner V1
+
+### Minor Changes
+
+-   98829fdc: Make actions small (14px)
+-   98829fdc: Use WB Icon instead of img
+-   98829fdc: Add accessibility support to Banner
+-   98829fdc: Create the base implementation for banner
+-   98829fdc: Make `layout` prop required
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-button@3.0.5
+-   @khanacademy/wonder-blocks-icon-button@3.4.13
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-button@3.0.5
+-   @khanacademy/wonder-blocks-icon-button@3.4.13
+
 ## 0.1.1
@@ -4,0 +28,0 @@

dist/es/index.js

@@ -1,3 +0,217 @@
-const NOTHING = "NOTHING";
+import * as React from 'react';
+import { StyleSheet } from 'aphrodite';
+import Button from '@khanacademy/wonder-blocks-button';
+import Color from '@khanacademy/wonder-blocks-color';
+import { View } from '@khanacademy/wonder-blocks-core';
+import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
+import Link from '@khanacademy/wonder-blocks-link';
+import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { LabelSmall } from '@khanacademy/wonder-blocks-typography';
 
-export { NOTHING };
+const info = {
+  medium: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM10.25 11.25C10.25 10.6977 10.6977 10.25 11.25 10.25H12C12.5523 10.25 13 10.6977 13 11.25V15.5315C13.4313 15.6425 13.75 16.034 13.75 16.5C13.75 17.0523 13.3023 17.5 12.75 17.5H12C11.4477 17.5 11 17.0523 11 16.5V12.2185C10.5687 12.1075 10.25 11.716 10.25 11.25ZM12.9375 7.875C12.9375 8.49632 12.4338 9 11.8125 9C11.1912 9 10.6875 8.49632 10.6875 7.875C10.6875 7.25368 11.1912 6.75 11.8125 6.75C12.4338 6.75 12.9375 7.25368 12.9375 7.875Z"
+};
+const success = {
+  medium: "M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM9.75 10.125C9.75 10.7463 9.24632 11.25 8.625 11.25C8.00368 11.25 7.5 10.7463 7.5 10.125C7.5 9.50368 8.00368 9 8.625 9C9.24632 9 9.75 9.50368 9.75 10.125ZM15.375 11.25C15.9963 11.25 16.5 10.7463 16.5 10.125C16.5 9.50368 15.9963 9 15.375 9C14.7537 9 14.25 9.50368 14.25 10.125C14.25 10.7463 14.7537 11.25 15.375 11.25ZM8.96488 13.7479C8.68763 13.2703 8.07567 13.1078 7.59801 13.3851C7.12036 13.6623 6.9579 14.2743 7.23515 14.7519C7.71955 15.5865 8.41464 16.2791 9.25086 16.7606C10.0871 17.2421 11.0351 17.4956 12 17.4956C12.965 17.4956 13.913 17.2421 14.7492 16.7606C15.5854 16.2791 16.2805 15.5865 16.7649 14.7519C17.0421 14.2743 16.8797 13.6623 16.402 13.3851C15.9244 13.1078 15.3124 13.2703 15.0352 13.7479C14.7266 14.2795 14.2838 14.7207 13.7512 15.0274C13.2185 15.3341 12.6147 15.4956 12 15.4956C11.3854 15.4956 10.7815 15.3341 10.2489 15.0274C9.7162 14.7207 9.27344 14.2795 8.96488 13.7479Z"
+};
+const warning = {
+  medium: "M10.7505 2.33557C11.1301 2.11544 11.5612 1.99951 12 1.99951C12.4388 1.99951 12.8698 2.11544 13.2494 2.33557C13.6282 2.55524 13.9424 2.87089 14.1603 3.25068L14.1616 3.25305L22.4097 17.4997C22.6288 17.8791 22.7443 18.3094 22.7447 18.7475C22.7451 19.1856 22.6303 19.6161 22.412 19.9959C22.1936 20.3757 21.8792 20.6915 21.5004 20.9115C21.1216 21.1316 20.6916 21.2482 20.2535 21.2497L20.25 21.2497H3.74997L3.74645 21.2497C3.30835 21.2482 2.87835 21.1316 2.49953 20.9115C2.12071 20.6915 1.80636 20.3757 1.58798 19.9959C1.36961 19.6161 1.25486 19.1856 1.25525 18.7475C1.25564 18.3094 1.37114 17.8791 1.5902 17.4997L9.83829 3.25305L9.83965 3.25068C10.0576 2.87089 10.3717 2.55524 10.7505 2.33557ZM10.7062 3.74975L11.5716 4.25079L3.32224 18.4998C3.27857 18.5755 3.25533 18.6618 3.25525 18.7493C3.25517 18.8369 3.27812 18.923 3.3218 18.999C3.36547 19.075 3.42834 19.1381 3.50411 19.1821C3.57952 19.2259 3.66508 19.2492 3.75228 19.2497H20.2477C20.3349 19.2492 20.4204 19.2259 20.4958 19.1821C20.5716 19.1381 20.6345 19.075 20.6781 18.999C20.7218 18.923 20.7448 18.8369 20.7447 18.7493C20.7446 18.6619 20.7216 18.576 20.678 18.5003L12.4258 4.24645C12.3828 4.17143 12.3209 4.10907 12.2461 4.06571C12.1713 4.02235 12.0864 3.99951 12 3.99951C11.9135 3.99951 11.8286 4.02235 11.7538 4.06571C11.6791 4.10907 11.6171 4.17142 11.5741 4.24645L10.7062 3.74975ZM12 8.75C12.5523 8.75 13 9.19772 13 9.75V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V9.75C11 9.19772 11.4477 8.75 12 8.75ZM13.125 16.875C13.125 17.4963 12.6213 18 12 18C11.3787 18 10.875 17.4963 10.875 16.875C10.875 16.2537 11.3787 15.75 12 15.75C12.6213 15.75 13.125 16.2537 13.125 16.875Z"
+};
+const critical = {
+  medium: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 6.5C12.5523 6.5 13 6.94772 13 7.5V12.75C13 13.3023 12.5523 13.75 12 13.75C11.4477 13.75 11 13.3023 11 12.75V7.5C11 6.94772 11.4477 6.5 12 6.5ZM13.125 16.125C13.125 16.7463 12.6213 17.25 12 17.25C11.3787 17.25 10.875 16.7463 10.875 16.125C10.875 15.5037 11.3787 15 12 15C12.6213 15 13.125 15.5037 13.125 16.125Z"
+};
+
+var bannerIcons = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    info: info,
+    success: success,
+    warning: warning,
+    critical: critical
+});
+
+const valuesForKind = kind => {
+  switch (kind) {
+    case "success":
+      return {
+        color: Color.green,
+        role: "status"
+      };
+
+    case "warning":
+      return {
+        color: Color.gold,
+        role: "alert",
+        ariaLive: "polite"
+      };
+
+    case "critical":
+      return {
+        color: Color.red,
+        role: "alert"
+      };
+
+    default:
+      return {
+        color: Color.blue,
+        role: "status"
+      };
+  }
+};
+
+const Banner = props => {
+  const {
+    actions,
+    dismissAriaLabel,
+    onDismiss,
+    kind,
+    layout,
+    text,
+    testId
+  } = props;
+  const layoutStyle = {
+    borderRadius: layout && layout === "full-width" ? 0 : 4
+  };
+
+  const renderActions = () => {
+    return actions == null ? void 0 : actions.filter(Boolean).map(action => {
+      const handleClick = action.onClick;
+
+      if (action.href) {
+        var _action$ariaLabel;
+
+        return React.createElement(View, {
+          style: styles.action,
+          key: action.title
+        }, React.createElement(Link, {
+          kind: "primary",
+          href: action.href,
+          onClick: handleClick,
+          "aria-label": (_action$ariaLabel = action.ariaLabel) != null ? _action$ariaLabel : action.title,
+          style: styles.link
+        }, action.title));
+      } else {
+        var _action$ariaLabel2;
+
+        return React.createElement(View, {
+          style: styles.action,
+          key: action.title
+        }, React.createElement(Button, {
+          kind: "tertiary",
+          size: "small",
+          "aria-label": (_action$ariaLabel2 = action.ariaLabel) != null ? _action$ariaLabel2 : action.title,
+          onClick: handleClick
+        }, action.title));
+      }
+    });
+  };
+
+  return React.createElement(View, {
+    style: [styles.containerOuter, layoutStyle, {
+      borderInlineStartColor: valuesForKind(kind).color
+    }],
+    role: valuesForKind(kind).role,
+    "aria-live": valuesForKind(kind).ariaLive,
+    testId: testId
+  }, React.createElement(View, {
+    style: [styles.backgroundColor, layoutStyle, {
+      backgroundColor: valuesForKind(kind).color
+    }]
+  }), React.createElement(View, {
+    style: styles.containerInner
+  }, React.createElement(Icon, {
+    icon: bannerIcons[kind],
+    size: "medium",
+    style: styles.icon,
+    "aria-label": kind,
+    testId: "banner-kind-icon"
+  }), React.createElement(View, {
+    style: styles.labelAndButtonsContainer
+  }, React.createElement(View, {
+    style: styles.labelContainer
+  }, React.createElement(LabelSmall, null, text)), actions && React.createElement(View, {
+    style: styles.actionsContainer
+  }, renderActions())), onDismiss ? React.createElement(View, {
+    style: styles.dismissContainer
+  }, React.createElement(IconButton, {
+    icon: icons.dismiss,
+    kind: "tertiary",
+    onClick: onDismiss,
+    style: styles.dismiss,
+    "aria-label": dismissAriaLabel
+  })) : null));
+};
+
+const defaultProps = {
+  kind: "info",
+  dismissAriaLabel: "Dismiss banner."
+};
+Banner.defaultProps = defaultProps;
+const styles = StyleSheet.create({
+  backgroundColor: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    opacity: 0.08
+  },
+  containerOuter: {
+    borderInlineStartWidth: Spacing.xxSmall_6,
+    width: "100%",
+    backgroundColor: Color.white
+  },
+  containerInner: {
+    flexDirection: "row",
+    padding: Spacing.xSmall_8
+  },
+  icon: {
+    marginTop: Spacing.xSmall_8,
+    marginBottom: Spacing.xSmall_8,
+    marginInlineStart: Spacing.xxxxSmall_2,
+    marginInlineEnd: Spacing.xSmall_8,
+    alignSelf: "flex-start",
+    color: Color.offBlack64
+  },
+  labelAndButtonsContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    alignContent: "center",
+    flexWrap: "wrap",
+    justifyContent: "space-between"
+  },
+  labelContainer: {
+    flexShrink: 1,
+    margin: Spacing.xSmall_8,
+    textAlign: "start"
+  },
+  actionsContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    marginTop: Spacing.xSmall_8,
+    marginBottom: Spacing.xSmall_8
+  },
+  action: {
+    marginLeft: Spacing.xSmall_8,
+    marginRight: Spacing.xSmall_8,
+    justifyContent: "center",
+    height: 18
+  },
+  link: {
+    fontSize: 14
+  },
+  dismiss: {
+    flexShrink: 1
+  },
+  dismissContainer: {
+    height: 40,
+    width: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: Spacing.xSmall_8,
+    marginRight: Spacing.xSmall_8
+  }
+});
+
+export { Banner as default };

package.json

 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "design": "v1",
@@ -19,7 +19,7 @@ "description": "Banner components for Wonder Blocks.",
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-button": "^3.0.4",
+    "@khanacademy/wonder-blocks-button": "^3.0.5",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.4.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.31",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.12",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.13",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
@@ -26,0 +26,0 @@ "@khanacademy/wonder-blocks-typography": "^1.1.33"

src/index.js

 // @flow
+import Banner from "./components/banner.js";
 
-// Just a temporary export to have some code.
-export const NOTHING = "NOTHING";
+export default Banner;

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234474

increased by4214.15%

Number of package files

11

increased by83.33%

Lines of code

6114

increased by5953.47%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Number of low supply chain risk alerts

7

increased by600%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• Updated@khanacademy/wonder-blocks-button@^3.0.5

• Updated@khanacademy/wonder-blocks-icon-button@^3.4.13