fix: component styling and spacing (ory#17)

* feat: add image support and spacing to user error card

* fix: codebox styling and button sizes

* fix: auth form spacing and margins

* fix: gradient card size

* feat: jetbrains mono font

* style: format

* fix: gradient card overlay

* fix: cursor on disabled gradient card

* fix: social button size

* feat: support recovery code flow

* fix: recovery code form submit on code resend

* style: format

* fix: gradient card anchor

* fix: error messages on node instead of global only

* style: format

* fix: correct border default color on light theme

* feat: card subtitle

* feat: ory auth card subtitle

package.json

@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
-    "@ory/client": "^0.2.0-alpha.16",
+    "@ory/client": "^0.2.0-alpha.48",
     "@ory/elements": "*",
     "@ory/elements-test": "*",
     "@ory/integrations": "^0.2.7",

packages/preact/package.json

@@ -11,6 +11,7 @@
     },
     "./style.css": "./dist/style.css",
     "./inter-font.css": "./dist/inter-font.css",
+    "./jetbrains-mono-font.css": "./dist/jetbrains-mono-font.css",
     "./fa-brands.min.css": "./dist/fa-brands.min.css",
     "./fa-solid.min.css": "./dist/fa-solid.min.css",
     "./fontawesome.min.css": "./dist/fontawesome.min.css",

src/assets/jetbrains-mono-font.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}

src/markup-components/components.ts

@@ -15,7 +15,7 @@ import {
   Message as message,
   InputField as inputField,
   UserErrorCard as userErrorCard,
-  NodeMessages as errorMessages,
+  NodeMessages as nodeMessages,
   ProfileSettingsSection as profileSettingsSection,
   PasswordSettingsSection as passwordSettingsSection,
   WebAuthnSettingsSection as webAuthnSettingsSection,
@@ -112,8 +112,8 @@ export const UserErrorCard = (props: UserErrorCardProps) => {
   return ComponentWrapper(userErrorCard(props))
 }
 
-export const ErrorMessages = (props: NodeMessagesProps) => {
-  return ComponentWrapper(errorMessages(props))
+export const NodeMessages = (props: NodeMessagesProps) => {
+  return ComponentWrapper(nodeMessages(props))
 }
 
 export const MenuLink = (props: MenuLinkProps) => {

src/react-components/card-gradient.tsx

@@ -1,16 +1,17 @@
 import React from "react"
 import cn from "classnames"
 import {
+  cardContainer,
   cardGradientActionStyle,
-  cardGradientStyle,
+  cardGradientOverlayStyle,
 } from "../theme/card-gradient.css"
-import { gridStyle, typographyStyle } from "../theme"
+import { colorSprinkle, gridStyle, typographyStyle } from "../theme"
 
 export interface CardGradientProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends React.HTMLAttributes<HTMLAnchorElement> {
   heading: string | React.ReactNode
   content: string | React.ReactNode
-  action: string | React.ReactNode
+  action: string
   target?: string
   disabled?: boolean
   className?: string
@@ -26,32 +27,42 @@ export const CardGradient = ({
   className,
   ...props
 }: CardGradientProps): JSX.Element => (
-  <div
-    className={cn(cardGradientStyle({ disabled: disabled }), className)}
+  <a
+    className={cn(cardContainer, cardGradientOverlayStyle({ disabled }))}
+    target={target}
+    aria-disabled={disabled}
+    {...(!disabled && { href: action })}
     {...props}
   >
-    <div className={gridStyle({ gap: 16 })}>
-      {typeof heading === "string" ? (
-        <div className={typographyStyle({ size: "headline21", type: "bold" })}>
-          {heading}
-        </div>
-      ) : (
-        heading
-      )}
-      {typeof content === "string" ? (
-        <div className={typographyStyle({ size: "small", type: "regular" })}>
-          {content}
-        </div>
-      ) : (
-        content
+    <div
+      className={cn(
+        colorSprinkle({
+          color: disabled ? "foregroundOnDisabled" : "foregroundOnDark",
+        }),
+        className,
       )}
+    >
+      <div className={cn(gridStyle({ gap: 16 }))}>
+        {typeof heading === "string" ? (
+          <div
+            className={typographyStyle({ size: "headline21", type: "bold" })}
+          >
+            {heading}
+          </div>
+        ) : (
+          heading
+        )}
+        {typeof content === "string" ? (
+          <div className={typographyStyle({ size: "small", type: "regular" })}>
+            {content}
+          </div>
+        ) : (
+          content
+        )}
+      </div>
     </div>
-    {typeof action === "string" ? (
-      <a className={cardGradientActionStyle} href={action} target={target}>
-        <i className={cn(`fa fa-arrow-right`)}></i>
-      </a>
-    ) : (
-      action
-    )}
-  </div>
+    <i
+      className={cn(`fa fa-arrow-right`, cardGradientActionStyle({ disabled }))}
+    ></i>
+  </a>
 )

src/react-components/card.tsx

@@ -28,12 +28,7 @@ export const Card = ({
     <div className={gridStyle({ gap: 32 })}>
       <div className={cardTitleImage}>
         {typeof image === "string" ? (
-          <img
-            src={image}
-            alt={`${heading}-image`}
-            width="100%"
-            height="100%"
-          />
+          <img src={image} alt={image} width="100%" height="100%" />
         ) : (
           image
         )}

src/react-components/codebox.tsx

@@ -29,7 +29,7 @@ export const CodeBox = ({
       <div
         className={cn(typographyStyle({ size: "small" }), codeboxHeaderStyle)}
       >
-        <div>Hide contents</div>
+        <div>Toggle content</div>
 
         <label htmlFor={id}>
           <i
@@ -38,6 +38,12 @@ export const CodeBox = ({
               colorSprinkle({ color: "accentDefault" }),
             )}
           ></i>
+          <i
+            className={cn(
+              "fa fa-caret-up",
+              colorSprinkle({ color: "accentDefault" }),
+            )}
+          ></i>
         </label>
       </div>
       <pre

src/react-components/input-field.tsx

@@ -6,22 +6,33 @@ import {
   typographyStyle,
 } from "../theme"
 import cn from "classnames"
+import { Message, MessageStyleProps } from "./message"
 
 export interface InputFieldProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    MessageStyleProps {
   header: string
+  helperMessage?: React.ReactNode | string
+  messageTestId?: string
+  dataTestid?: string
   fullWidth?: boolean
   className?: string
 }
 
 export const InputField = ({
   header: title,
+  helperMessage,
+  messageTestId,
   fullWidth,
   className,
+  dataTestid,
   ...props
 }: InputFieldProps): JSX.Element => {
   return (
-    <div className={cn(className, gridStyle({ gap: 4 }))}>
+    <div
+      data-testid={dataTestid}
+      className={cn(className, gridStyle({ gap: 4 }))}
+    >
       {title && (
         <div className={typographyStyle({ size: "small", type: "regular" })}>
           {title}{" "}
@@ -37,6 +48,13 @@ export const InputField = ({
         placeholder={" "} // we need this so the input css field border is not green by default
         {...props}
       />
+      {typeof helperMessage === "string" ? (
+        <Message data-testid={messageTestId} severity={props.severity}>
+          {helperMessage}
+        </Message>
+      ) : (
+        helperMessage
+      )}
     </div>
   )
 }

src/react-components/message.tsx

@@ -3,24 +3,25 @@ import { MessageStyle, messageStyle, typographyStyle } from "../theme"
 import cn from "classnames"
 
 // required since interfaces cannot extend types whose properties are not statically known
-type messageProps = MessageStyle & Record<string, unknown>
+export type MessageStyleProps = MessageStyle & Record<string, unknown>
 
 export interface MessageProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    messageProps {
+    MessageStyleProps {
   className?: string
   children?: React.ReactNode
 }
 
 export const Message = ({
   severity,
+  textPosition,
   className,
   children,
   ...props
 }: MessageProps): JSX.Element => (
   <div
     className={cn(
-      messageStyle({ severity: severity }),
+      messageStyle({ severity, textPosition }),
       typographyStyle({ size: "caption", type: "regular" }),
       className,
     )}