diff --git a/packages/ui/src/__mocks__/logto.tsx b/packages/ui/src/__mocks__/logto.tsx index 13d247f90..ce5307626 100644 --- a/packages/ui/src/__mocks__/logto.tsx +++ b/packages/ui/src/__mocks__/logto.tsx @@ -96,6 +96,24 @@ export const socialConnectors = [ }, ]; +export const mockSocialConnectorData = { + id: 'arbitrary-social-connector-data', + target: 'google', + platform: ConnectorPlatform.Web, + type: ConnectorType.Social, + logo: 'http://logto.dev/logto.png', + name: { + en: 'Sign in with Xxx', + 'zh-CN': '使用 Xxx 登录', + }, + description: { + en: 'Sign in with Xxx', + 'zh-CN': '使用 Xxx 登录', + }, + readme: '', + configTemplate: '', +}; + export const mockSignInExperience: SignInExperience = { id: 'foo', branding: { diff --git a/packages/ui/src/components/Button/SocialIconButton.tsx b/packages/ui/src/components/Button/SocialIconButton.tsx index 81469f726..1c49d728f 100644 --- a/packages/ui/src/components/Button/SocialIconButton.tsx +++ b/packages/ui/src/components/Button/SocialIconButton.tsx @@ -1,12 +1,13 @@ -import { ConnectorMetadata } from '@logto/schemas'; import classNames from 'classnames'; import React from 'react'; +import { ConnectorData } from '@/types'; + import * as styles from './SocialIconButton.module.scss'; type Props = { className?: string; - connector: Pick; + connector: ConnectorData; onClick?: () => void; }; diff --git a/packages/ui/src/components/Button/SocialLinkButton.tsx b/packages/ui/src/components/Button/SocialLinkButton.tsx index ae052b136..25ce10b2b 100644 --- a/packages/ui/src/components/Button/SocialLinkButton.tsx +++ b/packages/ui/src/components/Button/SocialLinkButton.tsx @@ -1,16 +1,17 @@ -import { ConnectorMetadata } from '@logto/schemas'; import classNames from 'classnames'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import { ConnectorData } from '@/types'; + import * as socialLinkButtonStyles from './SocialLinkButton.module.scss'; import * as styles from './index.module.scss'; export type Props = { isDisabled?: boolean; className?: string; - connector: Pick; - onClick?: (id: string) => void; + connector: ConnectorData; + onClick?: () => void; }; const SocialLinkButton = ({ isDisabled, className, connector, onClick }: Props) => { @@ -34,9 +35,7 @@ const SocialLinkButton = ({ isDisabled, className, connector, onClick }: Props) className )} type="button" - onClick={() => { - onClick?.(target); - }} + onClick={onClick} > {logo && {target}} {localName} diff --git a/packages/ui/src/components/Button/index.test.tsx b/packages/ui/src/components/Button/index.test.tsx index 4c2bd27f0..5aa162a07 100644 --- a/packages/ui/src/components/Button/index.test.tsx +++ b/packages/ui/src/components/Button/index.test.tsx @@ -1,6 +1,8 @@ import { render, fireEvent } from '@testing-library/react'; import React from 'react'; +import { mockSocialConnectorData } from '@/__mocks__/logto'; + import SocialLinkButton from './SocialLinkButton'; import Button from './index'; @@ -24,14 +26,7 @@ describe('Button Component', () => { }); it('render SocialLinkButton', () => { - const connector = { - target: 'foo', - name: { - en: 'Sign in with Logto', - 'zh-CN': '使用 Logto 登录', - }, - logo: 'http://logto.dev/logto.png', - }; + const connector = mockSocialConnectorData; const { queryByText, container } = render( ); diff --git a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx index 60408776f..ccc6048fc 100644 --- a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx +++ b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx @@ -33,11 +33,11 @@ const PrimarySocialSignIn = ({ className, isPopup = false, onSocialSignInCallbac
{displayConnectors.map((connector) => ( { - void invokeSocialSignIn(connector.target, onSocialSignInCallback); + void invokeSocialSignIn(connector.id, onSocialSignInCallback); }} /> ))} diff --git a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.test.tsx b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.test.tsx index 08e8eb449..9e47782a7 100644 --- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.test.tsx +++ b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.test.tsx @@ -28,7 +28,7 @@ describe('SecondarySocialSignIn', () => { platform: 'web', getPostMessage: jest.fn(() => jest.fn()), callbackLink: '/logto:', - supportedSocialConnectorIds: socialConnectors.map(({ target }) => target), + supportedSocialConnectorIds: socialConnectors.map(({ id }) => id), }; /* eslint-enable @silverhand/fp/no-mutation */ }); diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts index ab186bced..bfdfc5aa3 100644 --- a/packages/ui/src/types/index.ts +++ b/packages/ui/src/types/index.ts @@ -1,10 +1,4 @@ -import { - Branding, - LanguageInfo, - TermsOfUse, - ConnectorMetadata, - ConnectorPlatform, -} from '@logto/schemas'; +import { Branding, LanguageInfo, TermsOfUse, ConnectorMetadata } from '@logto/schemas'; export type UserFlow = 'sign-in' | 'register'; export type SignInMethod = 'username' | 'email' | 'sms' | 'social'; @@ -16,7 +10,6 @@ export enum SearchParameters { export interface ConnectorData extends ConnectorMetadata { id: string; - platform: ConnectorPlatform; } export type SignInExperienceSettings = {