feat: hide Ory branding on qualifying plans

GitOrigin-RevId: bff5672da6df152437347b39a7202fcfbc193ef5

Author: jonas-jonas

packages/elements-react/api-report/elements-react.api.json

@@ -6021,6 +6021,33 @@
                 "endIndex": 2
               }
             },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@ory/elements-react!ProjectConfiguration#hide_ory_branding:member",
+              "docComment": "/**\n * Whether to hide the Ory branding badge on the account experience card.\n *\n * Defaults to `false`. Customers on qualifying plans can opt into hiding it.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "hide_ory_branding?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "hide_ory_branding",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@ory/elements-react!ProjectConfiguration#login_ui_url:member",

packages/elements-react/api-report/elements-react.api.md

@@ -706,6 +706,7 @@ export type OryVerificationSuccessEvent = {
 export interface ProjectConfiguration {
     default_redirect_url: string;
     error_ui_url: string;
+    hide_ory_branding?: boolean;
     login_ui_url: string;
     logo_dark_url?: string;
     logo_light_url?: string;
@@ -830,7 +831,7 @@ export type VerificationFlowContainer = {
 // dist/index.d.ts:737:5 - (ae-forgotten-export) The symbol "SelectRenderer" needs to be exported by the entry point index.d.ts
 // dist/index.d.ts:1077:5 - (ae-forgotten-export) The symbol "Locale" needs to be exported by the entry point index.d.ts
 // dist/index.d.ts:1081:5 - (ae-forgotten-export) The symbol "LocaleMap" needs to be exported by the entry point index.d.ts
-// dist/index.d.ts:1624:5 - (ae-forgotten-export) The symbol "OrySDK" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:1630:5 - (ae-forgotten-export) The symbol "OrySDK" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/elements-react/src/context/config.tsx

@@ -37,6 +37,7 @@ const defaultProject: ProjectConfiguration = {
   settings_ui_url: "/ui/settings",
   default_redirect_url: "/ui/welcome",
   error_ui_url: "/ui/error",
+  hide_ory_branding: false,
 }
 
 /**

packages/elements-react/src/theme/default/components/card/badge.tsx

@@ -6,7 +6,10 @@ import OryLogoVertical from "../../assets/ory-badge-vertical.svg"
 
 export function Badge() {
   return (
-    <div className="absolute border border-ory-border-default bg-ory-background-default p-2 font-bold text-ory-foreground-default max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding max-sm:py-[7px] sm:top-8 sm:right-0 sm:translate-x-full sm:rounded-r-branding sm:pl-[7px]">
+    <div
+      data-testid="ory/card/badge"
+      className="absolute border border-ory-border-default bg-ory-background-default p-2 font-bold text-ory-foreground-default max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding max-sm:py-[7px] sm:top-8 sm:right-0 sm:translate-x-full sm:rounded-r-branding sm:pl-[7px]"
+    >
       <OryLogoHorizontal width={22} height={8} className="sm:hidden" />
       <OryLogoVertical width={8} height={22} className="max-sm:hidden" />
     </div>

packages/elements-react/src/theme/default/components/card/card.test.tsx

@@ -0,0 +1,54 @@
+// Copyright © 2025 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { OryConfigurationProvider } from "@ory/elements-react"
+import { render } from "@testing-library/react"
+import { DefaultCard } from "./index"
+
+// Replace the SVG modules used by <Badge />. The Jest `jest-transform-stub`
+// turns SVG imports into empty strings, which React then treats as the
+// element's tag name and JSDOM rejects with `InvalidCharacterError`. Mocking
+// them with simple React components avoids that and lets us assert on the
+// rendered DOM.
+jest.mock(
+  "../../assets/ory-badge-horizontal.svg",
+  () =>
+    function OryBadgeHorizontal() {
+      return <svg data-testid="ory/card/badge/horizontal" />
+    },
+)
+jest.mock(
+  "../../assets/ory-badge-vertical.svg",
+  () =>
+    function OryBadgeVertical() {
+      return <svg data-testid="ory/card/badge/vertical" />
+    },
+)
+
+function renderCard(hideOryBranding: boolean | undefined) {
+  return render(
+    <OryConfigurationProvider
+      sdk={{ url: "https://example.com" }}
+      project={{ hide_ory_branding: hideOryBranding }}
+    >
+      <DefaultCard>content</DefaultCard>
+    </OryConfigurationProvider>,
+  )
+}
+
+describe("DefaultCard branding badge", () => {
+  test("should render the Ory badge by default", () => {
+    const { container } = renderCard(undefined)
+    expect(container.querySelector("svg")).toBeTruthy()
+  })
+
+  test("should render the Ory badge when hide_ory_branding is false", () => {
+    const { container } = renderCard(false)
+    expect(container.querySelector("svg")).toBeTruthy()
+  })
+
+  test("should omit the Ory badge when hide_ory_branding is true", () => {
+    const { container } = renderCard(true)
+    expect(container.querySelector("svg")).toBeFalsy()
+  })
+})

packages/elements-react/src/theme/default/components/card/index.tsx

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { OryCardProps } from "@ory/elements-react"
+import { OryCardProps, useOryConfiguration } from "@ory/elements-react"
 import { Badge } from "./badge"
 import { DefaultCardContent } from "./content"
 import { DefaultCardFooter } from "./footer"
@@ -24,6 +24,8 @@ export function DefaultCard({
   className,
   ...rest
 }: OryCardProps & ComponentPropsWithoutRef<"div">) {
+  const { project } = useOryConfiguration()
+
   return (
     <div className={cn("ory-elements", className)} {...rest}>
       <div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
@@ -32,7 +34,7 @@ export function DefaultCard({
           data-testid="ory/card"
         >
           {children}
-          <Badge />
+          {!project.hide_ory_branding && <Badge />}
         </div>
       </div>
     </div>

packages/elements-react/src/util/clientConfiguration.ts

@@ -108,6 +108,12 @@ export interface ProjectConfiguration {
    * The URL for the recovery UI.
    */
   recovery_ui_url: string
+  /**
+   * Whether to hide the Ory branding badge on the account experience card.
+   *
+   * Defaults to `false`. Customers on qualifying plans can opt into hiding it.
+   */
+  hide_ory_branding?: boolean
   /**
    * Whether registration is enabled.
    *