pending operations

7 files changed, 159 insertions, 21 deletions

diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
index d5bd9d421..091964a63 100644
--- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { h, JSX, VNode, ComponentChildren } from "preact";
 import { theme } from "./style";
 
 const root = css`
@@ -33,7 +33,7 @@ const avatarImageStyle = css`
   text-indent: 10000;
 `;
 
-interface Props {
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   variant?: "circular" | "rounded" | "square";
   children?: ComponentChildren;
 }
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx
index f3272a57b..b185504e4 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -15,6 +15,7 @@ interface Props {
   startIcon?: VNode;
   variant?: "contained" | "outlined" | "text";
   color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  onClick: () => void;
 }
 
 const baseStyle = css`
@@ -139,6 +140,7 @@ export function Button({
   variant = "text",
   size = "medium",
   color = "primary",
+  onClick,
 }: Props): VNode {
   const style = css`
     user-select: none;
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
index 3c9361326..7db608d27 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
@@ -178,6 +178,26 @@ export const Responsive12Spacing = () => (
   </Fragment>
 );
 
+export const ResponsiveAuthWidth = () => (
+  <Fragment>
+    <Wrapper>
+      <Grid container columns={12}>
+        <Grid item>
+          <Item>item 1</Item>
+        </Grid>
+        <Grid item xs={1}>
+          <Item>item 2 short</Item>
+        </Grid>
+        <Grid item>
+          <Item>item 3 with long text </Item>
+        </Grid>
+        <Grid item xs={"true"}>
+          <Item>item 4</Item>
+        </Grid>
+      </Grid>
+    </Wrapper>
+  </Fragment>
+);
 export const Example = () => (
   <Wrapper>
     <p>Item row space is responsive: xs=6 sm=4 md=1</p>
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx
index ccabed060..345305fe1 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx
@@ -90,6 +90,20 @@ const columnGapVariant = css`
       padding-left: var(--space-col-md);
     }
   }
+  ${theme.breakpoints.up("lg")} {
+    width: calc(100% + var(--space-col-lg));
+    margin-left: calc(-1 * var(--space-col-lg));
+    & > div {
+      padding-left: var(--space-col-lg);
+    }
+  }
+  ${theme.breakpoints.up("xl")} {
+    width: calc(100% + var(--space-col-xl));
+    margin-left: calc(-1 * var(--space-col-xl));
+    & > div {
+      padding-left: var(--space-col-xl);
+    }
+  }
 `;
 const rowGapVariant = css`
   ${theme.breakpoints.up("xs")} {
@@ -110,31 +124,77 @@ const rowGapVariant = css`
       padding-top: var(--space-row-md);
     }
   }
+  ${theme.breakpoints.up("lg")} {
+    margin-top: calc(-1 * var(--space-row-lg));
+    & > div {
+      padding-top: var(--space-row-lg);
+    }
+  }
+  ${theme.breakpoints.up("xl")} {
+    margin-top: calc(-1 * var(--space-row-xl));
+    & > div {
+      padding-top: var(--space-row-xl);
+    }
+  }
 `;
 
-const sizeVariant = css`
+const sizeVariantXS = css`
   ${theme.breakpoints.up("xs")} {
     flex-basis: var(--relation-col-vs-xs);
     flex-grow: 0;
     max-width: var(--relation-col-vs-xs);
   }
+`;
+const sizeVariantSM = css`
   ${theme.breakpoints.up("sm")} {
     flex-basis: var(--relation-col-vs-sm);
     flex-grow: 0;
     max-width: var(--relation-col-vs-sm);
   }
+`;
+const sizeVariantMD = css`
   ${theme.breakpoints.up("md")} {
     flex-basis: var(--relation-col-vs-md);
     flex-grow: 0;
     max-width: var(--relation-col-vs-md);
   }
 `;
+const sizeVariantLG = css`
+  ${theme.breakpoints.up("lg")} {
+    flex-basis: var(--relation-col-vs-lg);
+    flex-grow: 0;
+    max-width: var(--relation-col-vs-lg);
+  }
+`;
+const sizeVariantXL = css`
+  ${theme.breakpoints.up("xl")} {
+    flex-basis: var(--relation-col-vs-xl);
+    flex-grow: 0;
+    max-width: var(--relation-col-vs-xl);
+  }
+`;
+
+const sizeVariantExpand = css`
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+`;
+
+const sizeVariantAuto = css`
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-width: none;
+  width: auto;
+`;
 
-const GridContext = createContext<ResponsiveSize>(toResponsive(12));
+const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12));
 
-function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize {
+function toResponsive(
+  v: number | Partial<ResponsiveSize>,
+): Partial<ResponsiveSize> {
   const p = typeof v === "number" ? { xs: v } : v;
-  const xs = p.xs || 12;
+  const xs = p.xs;
   const sm = p.sm || xs;
   const md = p.md || sm;
   const lg = p.lg || md;
@@ -174,6 +234,7 @@ export function Grid({
   const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing);
 
   const ssize = toResponsive({ xs, md, lg, xl, sm } as any);
+  console.log(ssize);
 
   if (container) {
     console.log(rowSpacing);
@@ -197,23 +258,51 @@ export function Grid({
   const relationStyles = !item
     ? {}
     : {
+        "--relation-col-vs-xs": relation(columns, ssize, "xs"),
         "--relation-col-vs-sm": relation(columns, ssize, "sm"),
+        "--relation-col-vs-md": relation(columns, ssize, "md"),
         "--relation-col-vs-lg": relation(columns, ssize, "lg"),
-        "--relation-col-vs-xs": relation(columns, ssize, "xs"),
         "--relation-col-vs-xl": relation(columns, ssize, "xl"),
-        "--relation-col-vs-md": relation(columns, ssize, "md"),
       };
 
   return (
     <GridContext.Provider value={columns}>
       <div
-        id={container ? "container" : "item"}
         class={[
           root,
           container && containerStyle,
           item && itemStyle,
           zeroMinWidth && zeroMinWidthStyle,
-          sizeVariant,
+          xs &&
+            (xs === "auto"
+              ? sizeVariantAuto
+              : xs === "true"
+              ? sizeVariantExpand
+              : sizeVariantXS),
+          sm &&
+            (sm === "auto"
+              ? sizeVariantAuto
+              : sm === "true"
+              ? sizeVariantExpand
+              : sizeVariantSM),
+          md &&
+            (md === "auto"
+              ? sizeVariantAuto
+              : md === "true"
+              ? sizeVariantExpand
+              : sizeVariantMD),
+          lg &&
+            (lg === "auto"
+              ? sizeVariantAuto
+              : lg === "true"
+              ? sizeVariantExpand
+              : sizeVariantLG),
+          xl &&
+            (xl === "auto"
+              ? sizeVariantAuto
+              : xl === "true"
+              ? sizeVariantExpand
+              : sizeVariantXL),
           container && columnGapVariant,
           container && rowGapVariant,
         ].join(" ")}
@@ -222,6 +311,7 @@ export function Grid({
           ...spacingStyles,
           justifyContent,
           alignItems,
+          flexWrap: wrap,
         }}
       >
         {children}
@@ -230,8 +320,8 @@ export function Grid({
   );
 }
 function relation(
-  cols: ResponsiveSize,
-  values: ResponsiveSize,
+  cols: Partial<ResponsiveSize>,
+  values: Partial<ResponsiveSize>,
   size: ResponsiveKeys,
 ) {
   const colsNum = typeof cols === "number" ? cols : cols[size] || 12;
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx
index 00eeda324..6209aa7a0 100644
--- a/packages/taler-wallet-webextension/src/mui/Paper.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx
@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { h, JSX, VNode, ComponentChildren } from "preact";
 import { alpha } from "./colors/manipulation";
 import { theme } from "./style";
 
@@ -20,17 +20,20 @@ const baseStyle = css`
   }
 `;
 
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  elevation?: number;
+  square?: boolean;
+  variant?: "elevation" | "outlined";
+  children?: ComponentChildren;
+}
+
 export function Paper({
   elevation = 1,
   square,
   variant = "elevation",
   children,
-}: {
-  elevation?: number;
-  square?: boolean;
-  variant?: "elevation" | "outlined";
-  children?: ComponentChildren;
-}): VNode {
+  ...rest
+}: Props): VNode {
   return (
     <div
       class={[
@@ -45,6 +48,7 @@ export function Paper({
           getOverlayAlpha(elevation),
         )}, ${alpha("#fff", getOverlayAlpha(elevation))})`,
       }}
+      {...rest}
     >
       {children}
     </div>
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx
index 830f1005a..7ff4a694c 100644
--- a/packages/taler-wallet-webextension/src/mui/Typography.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx
@@ -1,5 +1,6 @@
 import { css } from "@linaria/core";
 import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { theme } from "./style";
 
 type VariantEnum =
   | "body1"
@@ -74,6 +75,7 @@ export function Typography({
       : {
           textAlign: align,
         };
+  console.log("typograph", cmp, variant);
   return h(
     cmp,
     {
@@ -82,6 +84,7 @@ export function Typography({
         noWrap && noWrapStyle,
         gutterBottom && gutterBottomStyle,
         paragraph && paragraphStyle,
+        theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting
       ].join(" "),
       style: {
         ...alignStyle,
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx
index e2af05c49..5f9cd2244 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/packages/taler-wallet-webextension/src/mui/style.tsx
@@ -24,7 +24,7 @@ export function pxToRem(size: number): string {
 
 export interface Spacing {
   (): string;
-  (value: number): string;
+  (value?: number): string;
   (topBottom: number, rightLeft: number): string;
   (top: number, rightLeft: number, bottom: number): string;
   (top: number, right: number, bottom: number, left: number): string;
@@ -184,11 +184,14 @@ function createTheme() {
       spacing: spacingInput,
     });
 
-    const spacing = (...argsInput: ReadonlyArray<number | string>): string => {
+    const spacing = (
+      ...argsInput: ReadonlyArray<number | string | undefined>
+    ): string => {
       const args = argsInput.length === 0 ? [1] : argsInput;
 
       return args
         .map((argument) => {
+          if (argument === undefined) return "";
           const output = transform(argument);
           return typeof output === "number" ? `${output}px` : output;
         })
@@ -348,6 +351,7 @@ function createTheme() {
     // ...other
     // } = typography;
     const variants = {
+      // (fontWeight, size, lineHeight, letterSpacing, casing) =>
       // h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
       // h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
       // h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
@@ -356,7 +360,21 @@ function createTheme() {
       // h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
       // subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
       // subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
+      body1: css`
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+        font-weight: ${fontWeightRegular};
+        font-size: ${pxToRem(16)};
+        line-height: 1.5;
+        letter-spacing: ${round(0.15 / 16)}em;
+      `,
       // body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
+      body2: css`
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+        font-weight: ${fontWeightRegular};
+        font-size: ${pxToRem(14)};
+        line-height: 1.43;
+        letter-spacing: ${round(0.15 / 14)}em;
+      `,
       // body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
       button: css`
         font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -366,6 +384,7 @@ function createTheme() {
         letter-spacing: ${round(0.4 / 14)}em;
         text-transform: uppercase;
       `,
+      /* just of caseAllCaps */
       // button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
       // caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
       // overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),