@khanacademy/wonder-blocks-banner 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-banner
 
+## 1.2.0
+
+### Minor Changes
+
+-   b9b24953: Allow for custom actions in Banner
+
+## 1.1.1
+
+### Patch Changes
+
+-   Updated dependencies [ceb111df]
+    -   @khanacademy/wonder-blocks-button@3.0.7
+    -   @khanacademy/wonder-blocks-icon-button@3.4.15
+    -   @khanacademy/wonder-blocks-link@3.8.13
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -72,7 +72,14 @@ const Banner = props => {
   } = props;
 
   const renderActions = () => {
-    return actions == null ? void 0 : actions.filter(Boolean).map(action => {
+    return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
+      if (action.type === "custom") {
+        return React.createElement(View, {
+          style: styles.action,
+          key: `custom-action-${i}`
+        }, action.node);
+      }
+
       const handleClick = action.onClick;
 
       if (action.href) {

package/dist/index.js

@@ -225,7 +225,14 @@ const Banner = props => {
   } = props;
 
   const renderActions = () => {
-    return actions == null ? void 0 : actions.filter(Boolean).map(action => {
+    return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
+      if (action.type === "custom") {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
+          style: styles.action,
+          key: `custom-action-${i}`
+        }, action.node);
+      }
+
       const handleClick = action.onClick;
 
       if (action.href) {
@@ -374,6 +381,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   },
   floatingBorder: {
     borderRadius: 4,
+    // Stop the square corners of the inner container from
+    // flowing out of the rounded corners of the outer container.
     overflow: "hidden"
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-button": "^3.0.6",
+    "@khanacademy/wonder-blocks-button": "^3.0.7",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.5.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.32",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.14",
-    "@khanacademy/wonder-blocks-link": "^3.8.12",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.15",
+    "@khanacademy/wonder-blocks-link": "^3.8.13",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.34"
   },

package/src/components/__docs__/banner.stories.js

@@ -393,6 +393,85 @@ WithDismissal.parameters = {
     },
 };
 
+export const WithCustomAction: StoryComponentType = () => (
+    <Banner
+        text="some text"
+        layout="floating"
+        actions={[
+            {
+                type: "custom",
+                node: (
+                    <Button
+                        kind="tertiary"
+                        size="small"
+                        onClick={() => {}}
+                        spinner={true}
+                    >
+                        Spinner Button
+                    </Button>
+                ),
+            },
+        ]}
+    />
+);
+
+WithCustomAction.parameters = {
+    docs: {
+        storyDescription: `**NOTE: Custom actions are discouraged**
+            **and should only be used as a last resort!**\n\nThere are a
+            number of other props that Buttons and Links may have that are
+            not currently supported by the \`actions\` prop in Banner.
+            These would require the use of custom actions. If it absolutely
+            necessary to have a custom action, it can be done by passing
+            in an object into the \`actions\` prop array that has
+            \`type:"custom"\`, and your desired element in the \`node\`
+            field. Here is an example of a case where the built in actions
+            may not be enough - a button with a \`spinner\` prop would need
+            a custom implementation here.`,
+    },
+};
+
+export const WithMixedActions: StoryComponentType = () => (
+    <Banner
+        text="some text"
+        layout="floating"
+        actions={[
+            {
+                title: "Normal button",
+                onClick: () => {},
+            },
+            {
+                type: "custom",
+                node: (
+                    <Button kind="tertiary" size="small" onClick={() => {}}>
+                        Custom button
+                    </Button>
+                ),
+            },
+            {
+                type: "custom",
+                node: (
+                    <Button
+                        kind="tertiary"
+                        size="small"
+                        onClick={() => {}}
+                        spinner={true}
+                    >
+                        Spinner Button
+                    </Button>
+                ),
+            },
+        ]}
+    />
+);
+
+WithMixedActions.parameters = {
+    docs: {
+        storyDescription: `Here is an example that includes both a
+            normal action and a custom action.`,
+    },
+};
+
 export const RightToLeft: StoryComponentType = () => (
     <View style={styles.rightToLeft}>
         <Banner

package/src/components/__tests__/banner.test.js

@@ -2,6 +2,8 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
+import Button from "@khanacademy/wonder-blocks-button";
+
 import Banner from "../banner.js";
 
 describe("Banner", () => {
@@ -82,6 +84,38 @@ describe("Banner", () => {
         expect(link).toBeInTheDocument();
     });
 
+    test("passing a custom action causes the action to appear", async () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text="some text"
+                layout="floating"
+                actions={[
+                    {
+                        type: "custom",
+                        node: (
+                            <Button
+                                kind="tertiary"
+                                size="small"
+                                onClick={() => {}}
+                                spinner={true}
+                                testId="custom-button-in-banner"
+                            >
+                                Spinner Button
+                            </Button>
+                        ),
+                    },
+                ]}
+            />,
+        );
+
+        // Assert
+        const button = await screen.findByTestId("custom-button-in-banner");
+        expect(button).toBeInTheDocument();
+    });
+
     test("passing multiple actions causes multiple actions to appear", async () => {
         // Arrange
 
@@ -93,7 +127,19 @@ describe("Banner", () => {
                 actions={[
                     {title: "button 1", onClick: () => {}},
                     {title: "button 2", onClick: () => {}},
-                    {title: "button 3", onClick: () => {}},
+                    {
+                        type: "custom",
+                        node: (
+                            <Button
+                                kind="tertiary"
+                                size="small"
+                                onClick={() => {}}
+                                spinner={true}
+                            >
+                                Spinner Button
+                            </Button>
+                        ),
+                    },
                 ]}
             />,
         );

package/src/components/banner.js

@@ -29,7 +29,15 @@ type ActionTriggerWithLink = {|
     onClick?: () => void,
 |};
 
-type ActionTrigger = ActionTriggerWithButton | ActionTriggerWithLink;
+type ActionTriggerCustom = {|
+    type: "custom",
+    node: React.Node,
+|};
+
+type ActionTrigger =
+    | ActionTriggerWithButton
+    | ActionTriggerWithLink
+    | ActionTriggerCustom;
 
 type BannerKind =
     /**
@@ -181,8 +189,17 @@ const Banner = (props: Props): React.Node => {
     } = props;
 
     const renderActions = () => {
-        return actions?.filter(Boolean).map((action) => {
+        return actions?.filter(Boolean).map((action, i) => {
+            if (action.type === "custom") {
+                return (
+                    <View style={styles.action} key={`custom-action-${i}`}>
+                        {action.node}
+                    </View>
+                );
+            }
+
             const handleClick = action.onClick;
+
             if (action.href) {
                 return (
                     <View style={styles.action} key={action.title}>
@@ -352,6 +369,8 @@ const styles = StyleSheet.create({
     },
     floatingBorder: {
         borderRadius: 4,
+        // Stop the square corners of the inner container from
+        // flowing out of the rounded corners of the outer container.
         overflow: "hidden",
     },
 });