diff options
5 files changed, 30 insertions, 23 deletions
diff --git a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs index 9cc776e02..37f6349e2 100644 --- a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs +++ b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs @@ -52,7 +52,7 @@ export const buildConfig = { minify: false, loader: { '.svg': 'text', - '.png': 'file', + '.png': 'dataurl', }, target: [ 'es6' diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index f01e97eea..73223859a 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -137,7 +137,6 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` flex-direction: row; justify-content: space-between; display: flex; - background-color: #f7f7f7; button { margin-right: 8px; margin-left: 8px; @@ -375,7 +374,6 @@ export const CenteredDialog = styled.div` border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; padding: 10px; - background-color: #f5f5f5; display: flex; justify-content: space-between; } diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index 9b988b0d8..531425bc9 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -22,7 +22,6 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; import { ComponentChild, - ComponentProps, Fragment, FunctionComponent, h, @@ -60,6 +59,7 @@ const SideBar = styled.div` height: calc(100vh - 20px); overflow-y: visible; overflow-x: hidden; + scroll-behavior: smooth; & > { ol { padding: 4px; @@ -86,9 +86,10 @@ const SideBar = styled.div` const Content = styled.div` width: 100%; + padding: 20px; `; -function parseExampleImport(group: string, im: any) { +function parseExampleImport(group: string, im: any): ComponentItem { const component = im.default.title; return { name: component, @@ -113,6 +114,11 @@ const allExamples = Object.entries({ popup, wallet, mui }).map( }), ); +interface ComponentItem { + name: string; + examples: ExampleItem[]; +} + interface ExampleItem { group: string; component: string; @@ -127,7 +133,7 @@ function findByGroupComponentName( group: string, component: string, name: string, -) { +): ExampleItem | undefined { const gl = allExamples.filter((e) => e.title === group); if (gl.length === 0) { return undefined; @@ -163,7 +169,7 @@ function ExampleList({ name: string; examples: ExampleItem[]; }[]; -}) { +}): VNode { const [open, setOpen] = useState(true); return ( <ol> @@ -173,17 +179,15 @@ function ExampleList({ <li> <dl> <dt>{k.name}</dt> - {k.examples.map((r) => ( - <dd> - <a - href={`#${encodeURIComponent(r.group)}-${encodeURIComponent( - r.component, - )}-${encodeURIComponent(r.name)}`} - > - {r.name} - </a> - </dd> - ))} + {k.examples.map((r) => { + const e = encodeURIComponent; + const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`; + return ( + <dd id={eId}> + <a href={`#${eId}`}>{r.name}</a> + </dd> + ); + })} </dl> </li> ))} @@ -219,7 +223,7 @@ function ErrorReport({ }: { children: ComponentChild; selected: ExampleItem | undefined; -}) { +}): VNode { const [error] = useErrorBoundary(); if (error) { return ( @@ -261,13 +265,13 @@ function getSelectionFromLocationHash(): ExampleItem | undefined { ); } -function Application() { +function Application(): VNode { const initialSelection = getSelectionFromLocationHash(); const [selected, updateSelected] = useState<ExampleItem | undefined>( initialSelection, ); - function updateSelectedFromHashChange({ newURL, oldURL }: any) { + function updateSelectedFromHashChange({ newURL, oldURL }: any): void { const selected = getSelectionFromLocationHash(); updateSelected(selected); } diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx index 915bde01c..ddd0926be 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts, Balance, parsePaytoUri } from "@gnu-taler/taler-util"; +import { Balance, parsePaytoUri } from "@gnu-taler/taler-util"; import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits"; import { createExample } from "../test-utils.js"; import { View as TestedComponent } from "./DepositPage.js"; @@ -46,6 +46,7 @@ export const WithEmptyAccountList = createExample(TestedComponent, { available: "USD:10", } as Balance, ], + currency: "USD", onCalculateFee: alwaysReturnFeeToOne, }); @@ -56,5 +57,6 @@ export const WithSomeBankAccounts = createExample(TestedComponent, { available: "USD:10", } as Balance, ], + currency: "USD", onCalculateFee: alwaysReturnFeeToOne, }); diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index f81487c86..b4dfb6ce0 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -32,7 +32,6 @@ import { TransactionWithdrawal, WithdrawalType, } from "@gnu-taler/taler-util"; -import { ComponentChildren, h } from "preact"; import { DevContextProviderForTesting } from "../context/devContext.js"; import { createExample, @@ -239,6 +238,8 @@ export const PaymentPending = createExample(TestedComponent, { transaction: { ...exampleData.payment, pending: true }, }); +import beer from "../../static-dev/beer.png"; + export const PaymentWithProducts = createExample(TestedComponent, { transaction: { ...exampleData.payment, @@ -263,11 +264,13 @@ export const PaymentWithProducts = createExample(TestedComponent, { description: "beer", unit: "pint", quantity: 15, + image: beer, }, { description: "beer", unit: "pint", quantity: 15, + image: beer, }, ], }, |