feat: allow overriding OIDC logos (#299)

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

@@ -172,6 +172,156 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!DefaultButtonSocial:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function DefaultButtonSocial({ attributes, node, onClick, "
+            },
+            {
+              "kind": "Reference",
+              "text": "showLabel",
+              "canonicalReference": "@ory/elements-react!~__type#showLabel"
+            },
+            {
+              "kind": "Content",
+              "text": ": _showLabel, "
+            },
+            {
+              "kind": "Reference",
+              "text": "logos",
+              "canonicalReference": "@ory/elements-react!~__type#logos"
+            },
+            {
+              "kind": "Content",
+              "text": ": providedLogos, }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "DefaultSocialButtonProps",
+              "canonicalReference": "@ory/elements-react!~DefaultSocialButtonProps:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 7,
+            "endIndex": 8
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "{ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }",
+              "parameterTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "DefaultButtonSocial"
+        },
+        {
+          "kind": "Namespace",
+          "canonicalReference": "@ory/elements-react!DefaultButtonSocial:namespace",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare namespace DefaultButtonSocial "
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "releaseTag": "Public",
+          "name": "DefaultButtonSocial",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Function",
+              "canonicalReference": "@ory/elements-react!DefaultButtonSocial.WithLogos:function(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "WithLogos: (logos: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Record",
+                  "canonicalReference": "!Record:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<string, "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ElementType",
+                  "canonicalReference": "@types/react!React.ElementType:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Content",
+                  "text": "(props: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "DefaultSocialButtonProps",
+                  "canonicalReference": "@ory/elements-react!~DefaultSocialButtonProps:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "react_jsx_runtime.JSX.Element",
+                  "canonicalReference": "@types/react!JSX.Element:interface"
+                }
+              ],
+              "returnTypeTokenRange": {
+                "startIndex": 6,
+                "endIndex": 10
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "logos",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 5
+                  },
+                  "isOptional": false
+                }
+              ],
+              "name": "WithLogos"
+            }
+          ]
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!DefaultCard:function(1)",

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

@@ -8,6 +8,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { ConfigurationParameters } from '@ory/client-fetch';
 import { DetailedHTMLProps } from 'react';
+import { ElementType } from 'react';
 import { FlowError } from '@ory/client-fetch';
 import { FormEventHandler } from 'react';
 import { HTMLAttributes } from 'react';
@@ -28,6 +29,17 @@ import { UiText } from '@ory/client-fetch';
 import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
+// Warning: (ae-forgotten-export) The symbol "DefaultSocialButtonProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export function DefaultButtonSocial({ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }: DefaultSocialButtonProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export namespace DefaultButtonSocial {
+    var // (undocumented)
+    WithLogos: (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => react_jsx_runtime.JSX.Element;
+}
+
 // Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -126,8 +138,8 @@ export type VerificationFlowContextProps = {
 
 // Warnings were encountered during analysis:
 //
-// dist/theme/default/index.d.ts:27:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
-// dist/theme/default/index.d.ts:28:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:36:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:37:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

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

@@ -64,3 +64,5 @@ export function DefaultMessage({ message }: OryMessageContentProps) {
     </span>
   )
 }
+
+export { DefaultButtonSocial } from "./social"

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -7,9 +7,10 @@ import {
   uiTextToFormattedMessage,
   useOryFlow,
 } from "@ory/elements-react"
-import logos from "../../provider-logos"
+import defaultLogos from "../../provider-logos"
 import { cn } from "../../utils/cn"
 import { useIntl } from "react-intl"
+import { ElementType } from "react"
 
 export function extractProvider(
   context: object | undefined,
@@ -27,14 +28,17 @@ export function extractProvider(
 
 type DefaultSocialButtonProps = OryNodeOidcButtonProps & {
   showLabel?: boolean
+  logos?: Record<string, ElementType>
 }
 
 export function DefaultButtonSocial({
   attributes,
   node,
   onClick,
   showLabel: _showLabel,
+  logos: providedLogos,
 }: DefaultSocialButtonProps) {
+  const logos = { ...defaultLogos, ...providedLogos }
   const {
     node_type: _ignoredNodeType,
     type: _ignoredType,
@@ -73,7 +77,7 @@ export function DefaultButtonSocial({
           <Logo
             size={20}
             // alt={node.meta.label?.text || attributes.value}
-            className="object-fill w-full h-full"
+            // className="object-fill w-full h-full"
           />
         ) : (
           <span className="rounded-full aspect-square border flex items-center justify-center text-xs">
@@ -90,6 +94,17 @@ export function DefaultButtonSocial({
   )
 }
 
+/**
+ * Returns a variant of DefaultButtonSocial that can use your own logos
+ *
+ * @param logos - a record of provider names and their respective logos
+ * @returns a variant of DefaultButtonSocial that uses the provided logos
+ */
+DefaultButtonSocial.WithLogos =
+  (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => (
+    <DefaultButtonSocial {...props} logos={logos} />
+  )
+
 export function DefaultSocialButtonContainer({
   children,
   nodes,