diff --git a/packages/elements-react/src/theme/default/components/form/index.tsx b/packages/elements-react/src/theme/default/components/form/index.tsx index ea7605c9d..67796774c 100644 --- a/packages/elements-react/src/theme/default/components/form/index.tsx +++ b/packages/elements-react/src/theme/default/components/form/index.tsx @@ -64,3 +64,5 @@ export function DefaultMessage({ message }: OryMessageContentProps) { ) } + +export { DefaultButtonSocial } from "./social" diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx index 0bc00e139..1bcac25b1 100644 --- a/packages/elements-react/src/theme/default/components/form/social.tsx +++ b/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,6 +28,7 @@ export function extractProvider( type DefaultSocialButtonProps = OryNodeOidcButtonProps & { showLabel?: boolean + logos?: Record } export function DefaultButtonSocial({ @@ -34,7 +36,9 @@ export function DefaultButtonSocial({ node, onClick, showLabel: _showLabel, + logos: providedLogos, }: DefaultSocialButtonProps) { + const logos = { ...defaultLogos, ...providedLogos } const { node_type: _ignoredNodeType, type: _ignoredType, @@ -73,7 +77,7 @@ export function DefaultButtonSocial({ ) : ( @@ -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) => (props: DefaultSocialButtonProps) => ( + + ) + export function DefaultSocialButtonContainer({ children, nodes, diff --git a/packages/elements-react/src/theme/default/provider-logos/apple.svg b/packages/elements-react/src/theme/default/provider-logos/apple.svg index c85777c57..7cd5e61a2 100644 --- a/packages/elements-react/src/theme/default/provider-logos/apple.svg +++ b/packages/elements-react/src/theme/default/provider-logos/apple.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/elements-react/src/theme/default/provider-logos/google.svg b/packages/elements-react/src/theme/default/provider-logos/google.svg index b8cf5b26b..3f670be38 100644 --- a/packages/elements-react/src/theme/default/provider-logos/google.svg +++ b/packages/elements-react/src/theme/default/provider-logos/google.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + + +