diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-19 12:23:39 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-19 12:23:39 -0300 |
commit | 72b429321553841ac1ff48cf974bfc65da01bb06 (patch) | |
tree | 7db9a4462f02de6cb86de695a1e64772b00ead5f /packages/merchant-backoffice-ui/src/components/notifications | |
parent | 770ab6f01dc81a16f384f314982bd761540f8e65 (diff) | |
download | wallet-core-72b429321553841ac1ff48cf974bfc65da01bb06.tar.xz |
pretty
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/notifications')
3 files changed, 92 insertions, 66 deletions
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> + ); +} |