@khanacademy/wonder-blocks-banner 1.2.7 → 1.2.9

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @khanacademy/wonder-blocks-banner
 
+## 1.2.9
+
+### Patch Changes
+
+-   Updated dependencies [779b031d]
+-   Updated dependencies [2c0ad5ca]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+    -   @khanacademy/wonder-blocks-link@3.9.3
+    -   @khanacademy/wonder-blocks-button@3.0.16
+    -   @khanacademy/wonder-blocks-icon@1.2.39
+    -   @khanacademy/wonder-blocks-icon-button@3.4.23
+    -   @khanacademy/wonder-blocks-typography@1.1.40
+
+## 1.2.8
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [3813715d]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-button@3.0.15
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-icon@1.2.38
+    -   @khanacademy/wonder-blocks-icon-button@3.4.22
+    -   @khanacademy/wonder-blocks-link@3.9.2
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 1.2.7
 
 ### Patch Changes

package/dist/components/banner-icons.d.ts

@@ -0,0 +1,5 @@
+import { IconAsset } from "@khanacademy/wonder-blocks-icon";
+export declare const info: IconAsset;
+export declare const success: IconAsset;
+export declare const warning: IconAsset;
+export declare const critical: IconAsset;

package/dist/components/banner-icons.js.flow

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for banner-icons
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import { IconAsset } from "@khanacademy/wonder-blocks-icon";
+declare export var info: IconAsset;
+declare export var success: IconAsset;
+declare export var warning: IconAsset;
+declare export var critical: IconAsset;

package/dist/components/banner.d.ts

@@ -0,0 +1,111 @@
+import * as React from "react";
+type ActionTriggerBase = {
+    title: string;
+    ariaLabel?: string;
+};
+type ActionTriggerWithButton = ActionTriggerBase & {
+    onClick: () => void;
+};
+type ActionTriggerWithLink = ActionTriggerBase & {
+    href: string;
+    onClick?: () => void;
+};
+type ActionTriggerCustom = {
+    type: "custom";
+    node: React.ReactNode;
+};
+type ActionTrigger = ActionTriggerWithButton | ActionTriggerWithLink | ActionTriggerCustom;
+type BannerKind = 
+/**
+ * Color blue, circle 'i' icon. This is the default.
+ */
+"info"
+/**
+ * Color green, smiley icon
+ */
+ | "success"
+/**
+ * Color gold, triangle exclamation-point icon
+ */
+ | "warning"
+/**
+ * Color red, circle exclamation-point icon
+ */
+ | "critical";
+type BannerLayout = 
+/**
+ * Renders a rounded rectangle, usually for when banner is used as an inset
+ * element on a screen (e.g., the SOT card) that appears to be floating
+ */
+"floating"
+/**
+ * Renders a full-width banner, with no rounded corners.
+ * This is the default.
+ */
+ | "full-width";
+type Props = {
+    /**
+     * Accessible label for the banner.
+     * This is read out before the other contents of the banner.
+     */
+    ["aria-label"]?: string;
+    /**
+     * Determines the color and icon of the banner.
+     */
+    kind?: BannerKind;
+    /**
+     * Determines the edge style of the Banner.
+     */
+    layout: BannerLayout;
+    /**
+     * Text on the banner (LabelSmall) or a node if you want something different.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Links or tertiary Buttons that appear to the right of the text.
+     *
+     * The ActionTrigger must have either an onClick or an href field, or both.
+     */
+    actions?: Array<ActionTrigger>;
+    /**
+     * If present, dismiss button is on right side. If not, no button appears.
+     */
+    onDismiss?: () => void | null | undefined;
+    /**
+     * The accessible label for the dismiss button.
+     * Please pass in a translated string.
+     */
+    dismissAriaLabel?: string;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+};
+/**
+ * Banner. A banner displays a prominent message and related optional actions.
+ * It can be used as a way of informing the user of important changes.
+ * Typically, it is displayed toward the top of the screen.
+ *
+ * There are two possible layouts for banners - floating and full-width.
+ * The `floating` layout is intended to be used when there is whitespace
+ * around the banner. The `full-width` layout is intended to be used when
+ * the banner needs to be flush with surrounding elements.
+ *
+ * ### Usage
+ * ```jsx
+ * import Banner from "@khanacademy/wonder-blocks-banner";
+ *
+ * <Banner
+ *     text="Here is some example text."
+ *     kind="success"
+ *     layout="floating"
+ *     actions={[
+ *         {title: "Button 1", onClick: () => {}},
+ *         {title: "Button 2", onClick: () => {}},
+ *     ]}
+ *     onDismiss={() => {console.log("Has been dismissed.")}}
+ * />
+ * ```
+ */
+declare const Banner: React.FC<Props>;
+export default Banner;

package/dist/components/banner.js.flow

@@ -0,0 +1,113 @@
+/**
+ * Flowtype definitions for banner
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+declare type ActionTriggerBase = {
+  title: string,
+  ariaLabel?: string,
+  ...
+};
+declare type ActionTriggerWithButton = {
+  ...ActionTriggerBase,
+  ...{
+    onClick: () => void,
+    ...
+  },
+};
+declare type ActionTriggerWithLink = {
+  ...ActionTriggerBase,
+  ...{
+    href: string,
+    onClick?: () => void,
+    ...
+  },
+};
+declare type ActionTriggerCustom = {
+  type: "custom",
+  node: React.Node,
+  ...
+};
+declare type ActionTrigger =
+  | ActionTriggerWithButton
+  | ActionTriggerWithLink
+  | ActionTriggerCustom;
+declare type BannerKind = "info" | "success" | "warning" | "critical";
+declare type BannerLayout = "floating" | "full-width";
+declare type Props = {
+  /**
+   * Accessible label for the banner.
+   * This is read out before the other contents of the banner.
+   */
+  "aria-label": string | void,
+
+  /**
+   * Determines the color and icon of the banner.
+   */
+  kind?: BannerKind,
+
+  /**
+   * Determines the edge style of the Banner.
+   */
+  layout: BannerLayout,
+
+  /**
+   * Text on the banner (LabelSmall) or a node if you want something different.
+   */
+  text: string | React.Node,
+
+  /**
+   * Links or tertiary Buttons that appear to the right of the text.
+   *
+   * The ActionTrigger must have either an onClick or an href field, or both.
+   */
+  actions?: Array<ActionTrigger>,
+
+  /**
+   * If present, dismiss button is on right side. If not, no button appears.
+   */
+  onDismiss?: () => void | null | void,
+
+  /**
+   * The accessible label for the dismiss button.
+   * Please pass in a translated string.
+   */
+  dismissAriaLabel?: string,
+
+  /**
+   * Test ID used for e2e testing.
+   */
+  testId?: string,
+  ...
+};
+/**
+ * Banner. A banner displays a prominent message and related optional actions.
+ * It can be used as a way of informing the user of important changes.
+ * Typically, it is displayed toward the top of the screen.
+ *
+ * There are two possible layouts for banners - floating and full-width.
+ * The `floating` layout is intended to be used when there is whitespace
+ * around the banner. The `full-width` layout is intended to be used when
+ * the banner needs to be flush with surrounding elements.
+ *
+ * ### Usage
+ * ```jsx
+ * import Banner from "@khanacademy/wonder-blocks-banner";
+ *
+ * <Banner
+ *     text="Here is some example text."
+ *     kind="success"
+ *     layout="floating"
+ *     actions={[
+ *         {title: "Button 1", onClick: () => {}},
+ *         {title: "Button 2", onClick: () => {}},
+ *     ]}
+ *     onDismiss={() => {console.log("Has been dismissed.")}}
+ * />
+ * ```
+ */
+declare var Banner: React.FC<Props>;
+declare export default typeof Banner;

package/dist/es/index.js

@@ -37,20 +37,17 @@ const valuesForKind = kind => {
         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,
@@ -58,7 +55,6 @@ const valuesForKind = kind => {
       };
   }
 };
-
 const Banner = props => {
   const {
     actions,
@@ -70,7 +66,6 @@ const Banner = props => {
     text,
     testId
   } = props;
-
   const renderActions = () => {
     return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
       if (action.type === "custom") {
@@ -79,12 +74,9 @@ const Banner = props => {
           key: `custom-action-${i}`
         }, action.node);
       }
-
       const handleClick = action.onClick;
-
       if (action.href) {
         var _action$ariaLabel;
-
         return React.createElement(View, {
           style: styles.action,
           key: action.title
@@ -97,7 +89,6 @@ const Banner = props => {
         }, action.title));
       } else {
         var _action$ariaLabel2;
-
         return React.createElement(View, {
           style: styles.action,
           key: action.title
@@ -110,7 +101,6 @@ const Banner = props => {
       }
     });
   };
-
   return React.createElement(View, {
     style: [styles.containerOuter, layout === "floating" && styles.floatingBorder, {
       borderInlineStartColor: valuesForKind(kind).color
@@ -147,7 +137,6 @@ const Banner = props => {
     "aria-label": dismissAriaLabel
   })) : null));
 };
-
 const styles = StyleSheet.create({
   backgroundColor: {
     position: "absolute",

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import Banner from "./components/banner";
+export default Banner;

package/dist/index.js

@@ -67,20 +67,17 @@ const valuesForKind = kind => {
         color: Color__default["default"].green,
         role: "status"
       };
-
     case "warning":
       return {
         color: Color__default["default"].gold,
         role: "alert",
         ariaLive: "polite"
       };
-
     case "critical":
       return {
         color: Color__default["default"].red,
         role: "alert"
       };
-
     default:
       return {
         color: Color__default["default"].blue,
@@ -88,7 +85,6 @@ const valuesForKind = kind => {
       };
   }
 };
-
 const Banner = props => {
   const {
     actions,
@@ -100,7 +96,6 @@ const Banner = props => {
     text,
     testId
   } = props;
-
   const renderActions = () => {
     return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
       if (action.type === "custom") {
@@ -109,12 +104,9 @@ const Banner = props => {
           key: `custom-action-${i}`
         }, action.node);
       }
-
       const handleClick = action.onClick;
-
       if (action.href) {
         var _action$ariaLabel;
-
         return React__namespace.createElement(wonderBlocksCore.View, {
           style: styles.action,
           key: action.title
@@ -127,7 +119,6 @@ const Banner = props => {
         }, action.title));
       } else {
         var _action$ariaLabel2;
-
         return React__namespace.createElement(wonderBlocksCore.View, {
           style: styles.action,
           key: action.title
@@ -140,7 +131,6 @@ const Banner = props => {
       }
     });
   };
-
   return React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles.containerOuter, layout === "floating" && styles.floatingBorder, {
       borderInlineStartColor: valuesForKind(kind).color
@@ -177,7 +167,6 @@ const Banner = props => {
     "aria-label": dismissAriaLabel
   })) : null));
 };
-
 const styles = aphrodite.StyleSheet.create({
   backgroundColor: {
     position: "absolute",

package/dist/index.js.flow

@@ -1,2 +1,9 @@
-// @flow
-export * from "../src/index";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import Banner from "./components/banner";
+declare export default typeof Banner;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,20 +16,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-button": "^3.0.14",
-    "@khanacademy/wonder-blocks-color": "^1.2.1",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.37",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.21",
-    "@khanacademy/wonder-blocks-link": "^3.9.1",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.38"
+    "@khanacademy/wonder-blocks-button": "^3.0.16",
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.9.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.39",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.23",
+    "@khanacademy/wonder-blocks-link": "^3.9.3",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6",
+    "@khanacademy/wonder-blocks-typography": "^1.1.40"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.3"
   }
 }

package/src/components/__tests__/{banner.test.js → banner.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
@@ -222,7 +221,7 @@ describe("Banner", () => {
 
     it.each(["info", "success", "warning", "critical"])(
         "%s kind displays %s icon",
-        (kind) => {
+        (kind: any) => {
             // Arrange
 
             // Act
@@ -361,7 +360,7 @@ describe("Banner", () => {
         ["success", "status"],
         ["warning", "alert"],
         ["critical", "alert"],
-    ])("%s banners have role: %s", (kind, role) => {
+    ])("%s banners have role: %s", (kind: any, role: any) => {
         // Arrange
 
         // Act

package/src/components/{banner-icons.js → banner-icons.ts}

@@ -1,7 +1,6 @@
-// @flow
 // TODO(WB-1409): Use Phosphor icons instead of custom svgs. Also, use
 // Wonder Blocks Icon instead of img in the render function.
-import {type IconAsset} from "@khanacademy/wonder-blocks-icon";
+import {IconAsset} from "@khanacademy/wonder-blocks-icon";
 
 export const info: IconAsset = {
     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",