Skip to content

Commit

Permalink
ASUB-8549 custom buttom for facebook and apple - updating user accoun… (
Browse files Browse the repository at this point in the history
#2176)

* including custom buttom for facebook and apple - updating user account management
* updating sdk-identity version to 1.88
  • Loading branch information
LauraPinilla authored Jul 31, 2024
1 parent 236fba9 commit 957d9ac
Show file tree
Hide file tree
Showing 51 changed files with 2,185 additions and 509 deletions.
112 changes: 112 additions & 0 deletions .storybook/themes/news.scss
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,67 @@
"padding-inline-start": var(--global-spacing-4),
"padding-inline-end": var(--global-spacing-4)
),
"account-management-social-signon-edit": (
"align-items": center,
"border-color": var(--border-color),
"border-radius": var(--border-radius),
"border-style": var(--global-border-style-1),
"border-width": var(--global-border-width-1),
"display": flex,
"justify-content": space-between,
"margin-block-end": var(--global-spacing-2),
"padding-block-start": var(--global-spacing-4),
"padding-block-end": var(--global-spacing-4),
"padding-inline-start": var(--global-spacing-4),
"padding-inline-end": var(--global-spacing-4),
"min-width": 280px
),
"account-management-social-signon-identity": (
"display": flex,
"components": (
"icon": (
"margin-inline-end": var(--global-spacing-2)
)
)
),
"account-management-social-signon-button-connect": (
"background-color": var(--global-black)
),
"account-management-social-signon-button-disconnect": (
"color": var(--global-black),
"border-color": var(--global-black)
),
"account-management-social-signon-button-connected": (
"position": absolute,
"transform": translatey(175%),
"background": var(--global-white),
"font-size": var(--global-font-size-3),
"padding-inline-end": var(--global-spacing-1),
"color": var(--global-green-5),
"components": (
"icon": (
"margin-inline-start": var(--global-spacing-1),
"margin-inline-end": var(--global-spacing-1),
"fill": var(--global-green-5),
"block-size": var(--global-spacing-4),
"inline-size": var(--global-spacing-4)
)
)
),
"account-management-social-signon-identities-error": (
"font-family": var(--font-family-primary),
"margin-block-end": var(--global-spacing-4),
"components": (
"paragraph": (
"background-color": var(--status-color-danger-subtle),
"color": var(--status-color-danger),
"padding-block-end": var(--global-spacing-1),
"padding-block-start": var(--global-spacing-1),
"padding-inline-start": var(--global-spacing-2),
"padding-inline-end": var(--global-spacing-2)
)
)
),
"ads-block": (
"components": (
"paragraph": (
Expand Down Expand Up @@ -3580,6 +3641,57 @@
)
)
),
"social-sign-on-button-container-apple-custom": (
"inline-size": 100%
),
"social-sign-on-button-container-facebook": (
"justify-content": center,
"border-block-start-width": 1px,
"border-block-end-width": 1px,
"border-inline-start-width": 1px,
"border-inline-end-width": 1px,
"border-block-start-color": var(--border-color),
"border-block-end-color": var(--border-color),
"border-inline-start-color": var(--border-color),
"border-inline-end-color": var(--border-color),
"border-radius": var(--global-spacing-1),
"color": var(--text-color),
"font-weight": var(--global-font-weight-7),
"font-family": var(--font-family-primary),
"inline-size": 100%,
"components": (
"button-secondary-reverse-hover": (
"color": var(--text-color)
),
"icon": (
"fill": #4285F4
)
)
),
"social-sign-on-button-container-google": (
"justify-content": center,
"border-block-start-width": 1px,
"border-block-end-width": 1px,
"border-inline-start-width": 1px,
"border-inline-end-width": 1px,
"border-block-start-color": var(--border-color),
"border-block-end-color": var(--border-color),
"border-inline-start-color": var(--border-color),
"border-inline-end-color": var(--border-color),
"border-radius": var(--global-spacing-1),
"color": var(--text-color),
"font-weight": var(--global-font-weight-7),
"font-family": var(--font-family-primary),
"inline-size": 100%,
"components": (
"button-secondary-reverse-hover": (
"color": var(--text-color)
),
"icon": (
"fill": #4285F4
)
)
),
"social-sign-on-dividerWithText": (
"display": flex,
"align-items": center,
Expand Down
45 changes: 45 additions & 0 deletions blocks/identity-block/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,36 @@
@include scss.block-properties("account-management-social-edit");
}

&__social-signOn-edit {
@include scss.block-components("account-management-social-signon-edit");
@include scss.block-properties("account-management-social-signon-edit");
}

&__social-signOn-identity {
@include scss.block-components("account-management-social-signon-identity");
@include scss.block-properties("account-management-social-signon-identity");
}

&__social-signOn-button-connect{
@include scss.block-components("account-management-social-signon-button-connect");
@include scss.block-properties("account-management-social-signon-button-connect");
}

&__social-signOn-button-disconnect{
@include scss.block-components("account-management-social-signon-button-disconnect");
@include scss.block-properties("account-management-social-signon-button-disconnect");
}

&__social-signOn-button-connected{
@include scss.block-components("account-management-social-signon-button-connected");
@include scss.block-properties("account-management-social-signon-button-connected");
}

&__social-signOn-identities-error{
@include scss.block-components("account-management-social-signon-identities-error");
@include scss.block-properties("account-management-social-signon-identities-error");
}

@include scss.block-components("account-management");
@include scss.block-properties("account-management");
}
Expand Down Expand Up @@ -173,7 +203,22 @@

.b-social-sign-on {
&__button-container {
&__Google {
@include scss.block-components("social-sign-on-button-container-google");
@include scss.block-properties("social-sign-on-button-container-google");
}

&__Facebook {
@include scss.block-components("social-sign-on-button-container-facebook");
@include scss.block-properties("social-sign-on-button-container-facebook");
}

&__Apple {
&__custom {
@include scss.block-components("social-sign-on-button-container-apple-custom");
@include scss.block-properties("social-sign-on-button-container-apple-custom");
}

@include scss.block-components("social-sign-on-button-container-apple");
@include scss.block-properties("social-sign-on-button-container-apple");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function EditableFieldPresentational({
setIsEditable={setIsEditable}
>
<div>
{isEditable ? (
{(isEditable || formErrorText ) ? (
<>
{children}
{formErrorText ? (
Expand Down
26 changes: 15 additions & 11 deletions blocks/identity-block/components/editable-form-input/index.test.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";

import '@testing-library/jest-dom';
import EditableFormInputField, { ConditionalFormContainer } from ".";

describe("Editable form input field", () => {
it("conditional form renders a form when show form elected", () => {
render(<ConditionalFormContainer showForm />);
it("conditional form renders a form when show form selected", () => {
render(
<ConditionalFormContainer showForm onSubmit={jest.fn()} setIsEditable={jest.fn()}>
<input name="testField" defaultValue="testValue" />{" "}
</ConditionalFormContainer>,
);
expect(screen.getByTestId("conditional-form")).not.toBeNull();
});

it("conditional form does not render a form when show form not elected", () => {
it("conditional form does not render a form when show form not selected", () => {
render(<ConditionalFormContainer showForm={false} />);
expect(screen.queryByTestId("conditional-form")).toBeNull();
});
Expand All @@ -23,7 +27,7 @@ describe("Editable form input field", () => {
onSubmit={() => {}}
>
<p id="test-child">Test child</p>
</EditableFormInputField>
</EditableFormInputField>,
);
expect(screen.getByText("initial value")).not.toBeNull();
expect(screen.getByText("edit text")).not.toBeNull();
Expand All @@ -40,7 +44,7 @@ describe("Editable form input field", () => {
formErrorText="Error Text"
>
<p id="test-child">Test child</p>
</EditableFormInputField>
</EditableFormInputField>,
);

expect(screen.getByText("Error Text")).not.toBeNull();
Expand All @@ -55,7 +59,7 @@ describe("Editable form input field", () => {
onSubmit={() => {}}
>
<p id="test-child">Test child</p>
</EditableFormInputField>
</EditableFormInputField>,
);

fireEvent.click(screen.getByRole("button"));
Expand All @@ -69,7 +73,7 @@ describe("Editable form input field", () => {
render(
<ConditionalFormContainer onSubmit={callback} setIsEditable={() => {}} showForm>
<input name="inputField" type="email" defaultValue="invalid" />
</ConditionalFormContainer>
</ConditionalFormContainer>,
);

fireEvent.submit(screen.getByTestId("conditional-form"));
Expand All @@ -83,7 +87,7 @@ describe("Editable form input field", () => {
render(
<ConditionalFormContainer onSubmit={callback} showForm setIsEditable={() => {}}>
<input name="inputField" type="email" defaultValue="[email protected]" />
</ConditionalFormContainer>
</ConditionalFormContainer>,
);

fireEvent.submit(screen.getByTestId("conditional-form"));
Expand All @@ -103,7 +107,7 @@ describe("Editable form input field", () => {
formErrorText="Error"
>
<input name="inputField" type="email" defaultValue="invalid" />
</EditableFormInputField>
</EditableFormInputField>,
);

fireEvent.click(screen.getByText("cancel change"));
Expand All @@ -115,7 +119,7 @@ describe("Editable form input field", () => {
render(
<EditableFormInputField formErrorText="Error">
<input name="inputField" type="email" defaultValue="invalid" />
</EditableFormInputField>
</EditableFormInputField>,
);

expect(screen.getByText("Error")).not.toBeNull();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,32 +1,28 @@
import React from "react";
import { Button, Icon, useIdentity } from "@wpmedia/arc-themes-components";
import { useFusionContext } from "fusion:context";
import getTranslatedPhrases from "fusion:intl";
import { Button, Icon, useIdentity, usePhrases } from "@wpmedia/arc-themes-components";

import { SIGN_UP } from "../constants";

const AppleIcon = <Icon name="Apple" width={21} height={24} viewBox="0 0 24 24" />;

function AppleSignIn({ socialSignOnIn, className }) {
const { siteProperties } = useFusionContext();
const { locale } = siteProperties;
const phrases = getTranslatedPhrases(locale);
function AppleSignIn({ customButtons, socialSignOnIn, className }) {
const phrases = usePhrases();
const { Identity } = useIdentity();

return (
<Button
id="apple-btn"
variant="secondary-reverse"
onClick={() => Identity.initAppleSignOn()}
iconLeft={AppleIcon}
className={`${className}__Apple`}
>
{socialSignOnIn !== SIGN_UP ? (
<span>{phrases.t("identity-block.social-signOn-apple-login")}</span>
) : (
<span>{phrases.t("identity-block.social-signOn-apple-signUp")}</span>
)}
</Button>
<Button
id="apple-btn"
variant="secondary-reverse"
onClick={() => Identity.initAppleSignOn()}
iconLeft={AppleIcon}
className={`${className}__Apple ${customButtons ? `${className}__Apple__custom` : ''}`}
>
{socialSignOnIn !== SIGN_UP ? (
<span>{phrases.t("identity-block.social-signOn-apple-login")}</span>
) : (
<span>{phrases.t("identity-block.social-signOn-apple-signUp")}</span>
)}
</Button>
);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,46 @@
import React from "react";

import { Button, Icon, usePhrases } from "@wpmedia/arc-themes-components";

import { SIGN_UP } from "../constants";

function FacebookSignIn({socialSignOnIn}) {
const facebookTextType = socialSignOnIn === SIGN_UP ? 'continue_with' : 'login_with';
const FacebookIcon = <Icon name="Facebook" />;

function FacebookSignIn({ customButtons, socialSignOnIn, className }) {
const phrases = usePhrases();
const facebookTextType = socialSignOnIn === SIGN_UP ? "continue_with" : "login_with";

if (customButtons) {
return (
<Button
id="facebook-btn"
variant="secondary-reverse"
iconLeft={FacebookIcon}
className={`${className}__Facebook`}
onClick={() => window?.onFacebookSignOn()}
>
{socialSignOnIn !== SIGN_UP ? (
<span>{phrases.t("identity-block.social-signOn-facebook-login")}</span>
) : (
<span>{phrases.t("identity-block.social-signOn-facebook-signUp")}</span>
)}
</Button>
);
}

return (
<div
className="fb-login-button"
data-width="400"
data-size="large"
data-button-type={facebookTextType}
data-scope="public_profile,email"
data-auto-logout-link="false"
data-use-continue-as="true"
data-onlogin="window.onFacebookSignOn()"
/>
<div data-testid="fb-login-button">
<div
className="fb-login-button"
data-width="400"
data-size="large"
data-button-type={facebookTextType}
data-scope="public_profile,email"
data-auto-logout-link="false"
data-use-continue-as="true"
data-onlogin="window.onFacebookSignOn()"
/>
</div>
);
}

Expand Down
Loading

0 comments on commit 957d9ac

Please sign in to comment.