Refactor storybook functions

trento-project · Jun 6, 2024 · bc16935 · bc16935
1 parent 091eed3
commit bc16935
Showing 1 changed file with 59 additions and 39 deletions.
diff --git a/assets/js/common/DisabledGuard/DisabledGuard.stories.jsx b/assets/js/common/DisabledGuard/DisabledGuard.stories.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import Button from '@common/Button';
 import Tooltip from '@common/Tooltip';
+import { PLACES } from '@common/Tooltip/Tooltip';
 
 import DisabledGuard from '.';
 
@@ -21,53 +22,72 @@ export default {
       control: { type: 'boolean' },
       description: 'Add tooltip saying user is not authorized for this action',
     },
+    tooltipMessage: {
+      control: { type: 'text' },
+      description: 'Tooltip message',
+    },
+    tooltipPlace: {
+      control: { type: 'radio' },
+      options: PLACES,
+      description: 'Tooltip place',
+    },
   },
 };
 
-export function Authorized() {
-  return (
-    <DisabledGuard userAbilities={[{ name: 'all', resource: 'all' }]}>
+const guardElement = (args) => (
+  <div className="pt-10 pl-32 w-64">
+    <DisabledGuard {...args}>
       <Button>Click me!</Button>
     </DisabledGuard>
-  );
-}
+  </div>
+);
 
-export function Disabled() {
-  return (
-    <DisabledGuard
-      userAbilities={[]}
-      permitted={['action:resource']}
-      withTooltip={false}
-    >
-      <Button>Click me!</Button>
-    </DisabledGuard>
-  );
-}
-
-export function DisabledWithTooltip() {
-  return (
-    <DisabledGuard userAbilities={[]} permitted={['action:resource']}>
-      <Button>Click me!</Button>
-    </DisabledGuard>
-  );
-}
-
-export function AuthorizedWithOriginalTooltip() {
-  return (
-    <DisabledGuard userAbilities={[{ name: 'all', resource: 'all' }]}>
+const guardElementWithTooltip = (args) => (
+  <div className="pt-10 pl-32 w-64">
+    <DisabledGuard {...args}>
       <Tooltip content="Original tooltip!">
         <Button>Click me!</Button>
       </Tooltip>
     </DisabledGuard>
-  );
-}
+  </div>
+);
 
-export function DisabledWithOriginalTooltip() {
-  return (
-    <DisabledGuard userAbilities={[]} permitted={['action:resource']}>
-      <Tooltip content="Original tooltip!">
-        <Button>Click me!</Button>
-      </Tooltip>
-    </DisabledGuard>
-  );
-}
+export const Authorized = {
+  args: {
+    userAbilities: [{ name: 'all', resource: 'all' }],
+    tooltipMessage: 'Some tooltip',
+  },
+  render: (args) => guardElement(args),
+};
+
+export const Disabled = {
+  args: {
+    ...Authorized.args,
+    userAbilities: [],
+    permitted: ['action:resource'],
+    withTooltip: false,
+  },
+  render: (args) => guardElement(args),
+};
+
+export const DisabledWithTooltip = {
+  args: {
+    ...Disabled.args,
+    withTooltip: true,
+  },
+  render: (args) => guardElement(args),
+};
+
+export const AuthorizedWithOriginalTooltip = {
+  args: {
+    ...Authorized.args,
+  },
+  render: (args) => guardElementWithTooltip(args),
+};
+
+export const DisabledWithOriginalTooltip = {
+  args: {
+    ...DisabledWithTooltip.args,
+  },
+  render: (args) => guardElementWithTooltip(args),
+};