From 72b429321553841ac1ff48cf974bfc65da01bb06 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 19 Dec 2022 12:23:39 -0300
Subject: pretty

---
 .../notifications/CreatedSuccessfully.tsx          | 48 +++++++++++--------
 .../notifications/Notifications.stories.tsx        | 55 ++++++++++++----------
 .../src/components/notifications/index.tsx         | 55 +++++++++++++---------
 3 files changed, 92 insertions(+), 66 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/components/notifications')

diff --git a/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx
index 4089f2222..073382fb1 100644
--- a/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx
@@ -14,9 +14,9 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 import { ComponentChildren, h, VNode } from "preact";
 
 interface Props {
@@ -25,25 +25,33 @@ interface Props {
   children: ComponentChildren;
 }
 
-export function CreatedSuccessfully({ children, onConfirm, onCreateAnother }: Props): VNode {
-  return <div class="columns is-fullwidth is-vcentered mt-3">
-    <div class="column" />
-    <div class="column is-four-fifths">
-      <div class="card">
-        <header class="card-header has-background-success">
-          <p class="card-header-title has-text-white-ter">
-            Success.
-          </p>
-        </header>
-        <div class="card-content">
-          {children}
+export function CreatedSuccessfully({
+  children,
+  onConfirm,
+  onCreateAnother,
+}: Props): VNode {
+  return (
+    <div class="columns is-fullwidth is-vcentered mt-3">
+      <div class="column" />
+      <div class="column is-four-fifths">
+        <div class="card">
+          <header class="card-header has-background-success">
+            <p class="card-header-title has-text-white-ter">Success.</p>
+          </header>
+          <div class="card-content">{children}</div>
         </div>
-      </div>
         <div class="buttons is-right">
-          {onCreateAnother && <button class="button is-info" onClick={onCreateAnother}>Create another</button>}
-          <button class="button is-info" onClick={onConfirm}>Continue</button>
+          {onCreateAnother && (
+            <button class="button is-info" onClick={onCreateAnother}>
+              Create another
+            </button>
+          )}
+          <button class="button is-info" onClick={onConfirm}>
+            Continue
+          </button>
         </div>
+      </div>
+      <div class="column" />
     </div>
-    <div class="column" />
-  </div>
+  );
 }
diff --git a/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx b/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx
index 8bc6818b7..af594de0f 100644
--- a/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx
@@ -15,43 +15,48 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h } from 'preact';
+import { h } from "preact";
 import { Notifications } from "./index.js";
 
-
 export default {
-  title: 'Components/Notification',
+  title: "Components/Notification",
   component: Notifications,
   argTypes: {
-    removeNotification: { action: 'removeNotification' },
+    removeNotification: { action: "removeNotification" },
   },
 };
 
 export const Info = (a: any) => <Notifications {...a} />;
 Info.args = {
-  notifications: [{
-    message: 'Title',
-    description: 'Some large description',
-    type: 'INFO',
-  }]
-}
+  notifications: [
+    {
+      message: "Title",
+      description: "Some large description",
+      type: "INFO",
+    },
+  ],
+};
 export const Warn = (a: any) => <Notifications {...a} />;
 Warn.args = {
-  notifications: [{
-    message: 'Title',
-    description: 'Some large description',
-    type: 'WARN',
-  }]
-}
+  notifications: [
+    {
+      message: "Title",
+      description: "Some large description",
+      type: "WARN",
+    },
+  ],
+};
 export const Error = (a: any) => <Notifications {...a} />;
 Error.args = {
-  notifications: [{
-    message: 'Title',
-    description: 'Some large description',
-    type: 'ERROR',
-  }]
-}
+  notifications: [
+    {
+      message: "Title",
+      description: "Some large description",
+      type: "ERROR",
+    },
+  ],
+};
diff --git a/packages/merchant-backoffice-ui/src/components/notifications/index.tsx b/packages/merchant-backoffice-ui/src/components/notifications/index.tsx
index 7c4ab7e2d..235c75577 100644
--- a/packages/merchant-backoffice-ui/src/components/notifications/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/notifications/index.tsx
@@ -15,9 +15,9 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { MessageType, Notification } from "../../utils/types.js";
@@ -29,24 +29,37 @@ interface Props {
 
 function messageStyle(type: MessageType): string {
   switch (type) {
-    case "INFO": return "message is-info";
-    case "WARN": return "message is-warning";
-    case "ERROR": return "message is-danger";
-    case "SUCCESS": return "message is-success";
-    default: return "message"
+    case "INFO":
+      return "message is-info";
+    case "WARN":
+      return "message is-warning";
+    case "ERROR":
+      return "message is-danger";
+    case "SUCCESS":
+      return "message is-success";
+    default:
+      return "message";
   }
 }
 
-export function Notifications({ notifications, removeNotification }: Props): VNode {
-  return <div class="toast">
-    {notifications.map((n,i) => <article key={i} class={messageStyle(n.type)}>
-      <div class="message-header">
-        <p>{n.message}</p>
-        <button class="delete" onClick={() => removeNotification && removeNotification(n)} />
-      </div>
-      {n.description && <div class="message-body">
-        {n.description}
-      </div>}
-    </article>)}
-  </div>
-}
\ No newline at end of file
+export function Notifications({
+  notifications,
+  removeNotification,
+}: Props): VNode {
+  return (
+    <div class="toast">
+      {notifications.map((n, i) => (
+        <article key={i} class={messageStyle(n.type)}>
+          <div class="message-header">
+            <p>{n.message}</p>
+            <button
+              class="delete"
+              onClick={() => removeNotification && removeNotification(n)}
+            />
+          </div>
+          {n.description && <div class="message-body">{n.description}</div>}
+        </article>
+      ))}
+    </div>
+  );
+}
-- 
cgit v1.2.3