added ability to add mulitple actions (#163)

* added ability to add mulitple actions

* fixed format

* changed to use secondaryActions

src/components/list-empty-state/ListEmptyState.tsx

@@ -5,21 +5,31 @@ import {
   EmptyStateBody,
   Title,
   Button,
+  ButtonVariant,
+  EmptyStateSecondaryActions,
 } from "@patternfly/react-core";
 import { PlusCircleIcon } from "@patternfly/react-icons";
 
+export type Action = {
+  text: string;
+  type?: ButtonVariant;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+};
+
 export type ListEmptyStateProps = {
   message: string;
   instructions: string;
   primaryActionText: string;
   onPrimaryAction: MouseEventHandler<HTMLButtonElement>;
+  secondaryActions: Action[];
 };
 
 export const ListEmptyState = ({
   message,
   instructions,
-  primaryActionText,
   onPrimaryAction,
+  primaryActionText,
+  secondaryActions,
 }: ListEmptyStateProps) => {
   return (
     <>
@@ -32,6 +42,17 @@ export const ListEmptyState = ({
         <Button variant="primary" onClick={onPrimaryAction}>
           {primaryActionText}
         </Button>
+        <EmptyStateSecondaryActions>
+          {secondaryActions.map((action) => (
+            <Button
+              key={action.text}
+              variant={action.type || ButtonVariant.primary}
+              onClick={action.onClick}
+            >
+              {action.text}
+            </Button>
+          ))}
+        </EmptyStateSecondaryActions>
       </EmptyState>
     </>
   );

src/components/list-empty-state/_tests_/ListEmptyState.test.tsx

@@ -8,8 +8,9 @@ describe("<ListEmptyState />", () => {
       <ListEmptyState
         message="No things"
         instructions="You haven't created any things for this list."
-        primaryActionText="Add a thing"
+        primaryActionText="Add it now!"
         onPrimaryAction={() => {}}
+        secondaryActions={[{ text: "Add a thing", onClick: () => {} }]}
       />
     );
     expect(comp.asFragment()).toMatchSnapshot();

src/components/list-empty-state/_tests_/__snapshots__/ListEmptyState.test.tsx.snap

@@ -39,10 +39,24 @@ exports[`<ListEmptyState /> render 1`] = `
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="button"
+      >
+        Add it now!
+      </button>
+      <div
+        class="pf-c-empty-state__secondary"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
           Add a thing
         </button>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;

src/stories/ListEmptyState.stories.tsx

@@ -22,6 +22,6 @@ export const View = Template.bind({});
 View.args = {
   message: "No things",
   instructions: "You haven't created any things for this list.",
-  primaryActionText: "Add a thing",
+  primaryActionText: "Add it now!",
-  onPrimaryAction: handleClick,
+  secondaryActions: [{ text: "Add a thing", onClick: handleClick }],
 };