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

Comparing version 1.1.1 to 1.2.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-banner
 
+## 1.2.0
+
+### Minor Changes
+
+-   b9b24953: Allow for custom actions in Banner
+
 ## 1.1.1
@@ -4,0 +10,0 @@

dist/es/index.js

@@ -75,3 +75,10 @@ import * as React from 'react';
   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;
@@ -78,0 +85,0 @@

dist/index.js

@@ -228,3 +228,10 @@ module.exports =
   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;
@@ -231,0 +238,0 @@

package.json

 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "design": "v1",
@@ -5,0 +5,0 @@ "description": "Banner components for Wonder Blocks.",

src/components/__docs__/banner.stories.js

@@ -396,2 +396,81 @@ // @flow
 
+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 = () => (
@@ -398,0 +477,0 @@ <View style={styles.rightToLeft}>

src/components/__tests__/banner.test.js

@@ -5,2 +5,4 @@ // @flow
 
+import Button from "@khanacademy/wonder-blocks-button";
+
 import Banner from "../banner.js";
@@ -86,2 +88,34 @@
 
+    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 () => {
@@ -98,3 +132,15 @@ // Arrange
                     {title: "button 2", onClick: () => {}},
-                    {title: "button 3", onClick: () => {}},
+                    {
+                        type: "custom",
+                        node: (
+                            <Button
+                                kind="tertiary"
+                                size="small"
+                                onClick={() => {}}
+                                spinner={true}
+                            >
+                                Spinner Button
+                            </Button>
+                        ),
+                    },
                 ]}
@@ -101,0 +147,0 @@ />,

src/components/banner.js

@@ -32,4 +32,12 @@ // @flow
 
-type ActionTrigger = ActionTriggerWithButton | ActionTriggerWithLink;
+type ActionTriggerCustom = {|
+    type: "custom",
+    node: React.Node,
+|};
 
+type ActionTrigger =
+    | ActionTriggerWithButton
+    | ActionTriggerWithLink
+    | ActionTriggerCustom;
+
 type BannerKind =
@@ -185,4 +193,13 @@ /**
     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) {
@@ -189,0 +206,0 @@ return (

No alert changes

Improved metrics

Total package byte prevSize

82634

increased by6.22%

Lines of code

1970

increased by7.83%

No dependency changes