diff options
author | Florian Dold <florian@dold.me> | 2022-10-24 10:46:14 +0200 |
---|---|---|
committer | Florian Dold <florian@dold.me> | 2022-10-24 10:46:14 +0200 |
commit | 3e060b80428943c6562250a6ff77eff10a0259b7 (patch) | |
tree | d08472bc5ca28621c62ac45b229207d8215a9ea7 /packages/merchant-backoffice-ui/src/components/notifications | |
parent | fb52ced35ac872349b0e1062532313662552ff6c (diff) | |
download | wallet-core-3e060b80428943c6562250a6ff77eff10a0259b7.tar.xz |
repo: integrate packages from former merchant-backoffice.git
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/notifications')
3 files changed, 158 insertions, 0 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx new file mode 100644 index 000000000..e0b355c2e --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx @@ -0,0 +1,49 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { ComponentChildren, h, VNode } from "preact"; + +interface Props { + onCreateAnother?: () => void; + onConfirm: () => void; + 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} + </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> + </div> + </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 new file mode 100644 index 000000000..3b95295fe --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx @@ -0,0 +1,57 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { h } from 'preact'; +import { Notifications } from './index'; + + +export default { + title: 'Components/Notification', + component: Notifications, + argTypes: { + removeNotification: { action: 'removeNotification' }, + }, +}; + +export const Info = (a: any) => <Notifications {...a} />; +Info.args = { + 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', + }] +} +export const Error = (a: any) => <Notifications {...a} />; +Error.args = { + 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 new file mode 100644 index 000000000..34bd40ec6 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/notifications/index.tsx @@ -0,0 +1,52 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { h, VNode } from "preact"; +import { MessageType, Notification } from "../../utils/types"; + +interface Props { + notifications: Notification[]; + removeNotification?: (n: Notification) => void; +} + +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" + } +} + +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 |