From f9f670fb2ea2b9f829271a6e0a009e293d5b2474 Mon Sep 17 00:00:00 2001 From: Lisa Chan Date: Mon, 3 Jun 2024 12:56:11 -0400 Subject: [PATCH] fix(payments-next): Implement a11y improvements --- .../[interval]/[cartId]/start/page.tsx | 25 ++- apps/payments/next/app/layout.tsx | 2 +- libs/payments/ui/src/index.ts | 2 +- .../client/components/CheckoutCheckbox.tsx | 155 ++++++++-------- .../lib/client/components/CheckoutForm.ftl | 2 +- .../lib/client/components/CheckoutForm.tsx | 170 +++++++++++------- .../lib/client/components/PaymentSection.tsx | 49 ++--- .../lib/client/components/PrimaryButton.tsx | 2 +- .../lib/client/components/StripeWrapper.tsx | 18 +- .../ui/src/lib/server/purchase-details.tsx | 44 ++--- .../ui/src/lib/server/subscription-title.tsx | 7 +- .../assets/src/configs/tailwind.config.js | 10 +- libs/shared/react/.eslintrc.json | 18 ++ libs/shared/react/README.md | 11 ++ libs/shared/react/jest.config.ts | 11 ++ libs/shared/react/package.json | 4 + libs/shared/react/project.json | 27 +++ .../react/src/components/LinkExternal.ftl | 4 + .../react/src/components/LinkExternal.tsx | 49 +++++ libs/shared/react/src/index.ts | 5 + libs/shared/react/tsconfig.json | 16 ++ libs/shared/react/tsconfig.lib.json | 11 ++ libs/shared/react/tsconfig.spec.json | 14 ++ package.json | 2 +- tsconfig.base.json | 1 + yarn.lock | 61 ++++--- 26 files changed, 453 insertions(+), 267 deletions(-) create mode 100644 libs/shared/react/.eslintrc.json create mode 100644 libs/shared/react/README.md create mode 100644 libs/shared/react/jest.config.ts create mode 100644 libs/shared/react/package.json create mode 100644 libs/shared/react/project.json create mode 100644 libs/shared/react/src/components/LinkExternal.ftl create mode 100644 libs/shared/react/src/components/LinkExternal.tsx create mode 100644 libs/shared/react/src/index.ts create mode 100644 libs/shared/react/tsconfig.json create mode 100644 libs/shared/react/tsconfig.lib.json create mode 100644 libs/shared/react/tsconfig.spec.json diff --git a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx index cecfb4ea4b6..775bcfae9c3 100644 --- a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx +++ b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx @@ -1,22 +1,23 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { revalidatePath } from 'next/cache'; +import { headers } from 'next/headers'; +import { PaymentSection } from '@fxa/payments/ui'; import { app, getCartOrRedirectAction, SupportedPages, } from '@fxa/payments/ui/server'; import { DEFAULT_LOCALE } from '@fxa/shared/l10n'; -import { auth, signIn } from 'apps/payments/next/auth'; -import { headers } from 'next/headers'; -import { CheckoutParams } from '../layout'; import { getFakeCartData, getContentfulContent, } from 'apps/payments/next/app/_lib/apiClient'; -import { PaymentSection } from '@fxa/payments/ui'; +import { auth, signIn } from 'apps/payments/next/auth'; import { PrimaryButton } from 'libs/payments/ui/src/lib/client/components/PrimaryButton'; -import { revalidatePath } from 'next/cache'; +import { CheckoutParams } from '../layout'; export const dynamic = 'force-dynamic'; @@ -62,13 +63,13 @@ export default async function Checkout({ params }: { params: CheckoutParams }) { await signIn('fxa'); }} > -

+

{l10n.getFragmentWithSource( 'next-new-user-sign-in-link-2', { elems: { a: ( - ), @@ -76,7 +77,7 @@ export default async function Checkout({ params }: { params: CheckoutParams }) { }, <> Already have a Mozilla account?  - @@ -84,8 +85,6 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {

-
-
{/** Temporary Content. This will be replaced in M3b by the Passwordless @@ -122,7 +121,7 @@ export default async function Checkout({ params }: { params: CheckoutParams }) { {!session ? (

{l10n.getString( @@ -132,7 +131,7 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {

) : (

{l10n.getString( @@ -141,7 +140,7 @@ export default async function Checkout({ params }: { params: CheckoutParams }) { )}

)} -

+

{l10n.getString( 'next-payment-method-first-approve', `First you'll need to approve your subscription` diff --git a/apps/payments/next/app/layout.tsx b/apps/payments/next/app/layout.tsx index 5ca420959d5..0b39fe14c56 100644 --- a/apps/payments/next/app/layout.tsx +++ b/apps/payments/next/app/layout.tsx @@ -21,7 +21,7 @@ export default function RootLayout({
diff --git a/libs/payments/ui/src/index.ts b/libs/payments/ui/src/index.ts index a3fb2322408..0abbf34ed28 100644 --- a/libs/payments/ui/src/index.ts +++ b/libs/payments/ui/src/index.ts @@ -5,7 +5,7 @@ // Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities export * from './lib/utils/helpers'; -export * from './lib/client/components/StripeWrapper'; +export * from './lib/client/components/CheckoutForm'; export * from './lib/client/components/CheckoutCheckbox'; export * from './lib/client/components/PaymentSection'; export * from './lib/client/providers/Providers'; diff --git a/libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx b/libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx index 408fd41c568..5f7f6b8b930 100644 --- a/libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx +++ b/libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx @@ -3,9 +3,10 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 'use client'; -import * as HoverCard from '@radix-ui/react-hover-card'; -import { useEffect, useState } from 'react'; import { Localized } from '@fluent/react'; +import * as Tooltip from '@radix-ui/react-tooltip'; +import { useEffect, useState } from 'react'; +import { LinkExternal } from '@fxa/shared/react'; interface CheckoutCheckboxProps { isRequired: boolean; @@ -38,84 +39,92 @@ export function CheckoutCheckbox({ }; return ( - - + + , until I cancel my subscription. + + + )} + + + +
+ You need to complete this before moving forward +
+ + + + + + + ); } diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm.ftl b/libs/payments/ui/src/lib/client/components/CheckoutForm.ftl index 4584304c28d..9e0409d96e8 100644 --- a/libs/payments/ui/src/lib/client/components/CheckoutForm.ftl +++ b/libs/payments/ui/src/lib/client/components/CheckoutForm.ftl @@ -1,8 +1,8 @@ ## Checkout Form next-new-user-submit = Subscribe Now +next-payment-validate-name-error = Please enter your full name # Label for the Full Name input payment-name-label = Name as it appears on your card payment-name-placeholder = Full Name - diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx b/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx index b8237bd70ed..dddc52d06a8 100644 --- a/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx +++ b/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx @@ -3,24 +3,28 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 'use client'; +import { Localized, useLocalization } from '@fluent/react'; +import * as Form from '@radix-ui/react-form'; import { PaymentElement, useStripe, useElements, } from '@stripe/react-stripe-js'; import { StripePaymentElementChangeEvent } from '@stripe/stripe-js'; -import { checkoutCartWithStripe } from '../../actions/checkoutCartWithStripe'; -import { useEffect, useState } from 'react'; -import { handleStripeErrorAction } from '../../actions/handleStripeError'; -import LockImage from '@fxa/shared/assets/images/lock.svg'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; -import * as Form from '@radix-ui/react-form'; -import { Localized, useLocalization } from '@fluent/react'; +import { useEffect, useState } from 'react'; +import LockImage from '@fxa/shared/assets/images/lock.svg'; +import { CheckoutCheckbox } from './CheckoutCheckbox'; import { PrimaryButton } from './PrimaryButton'; +import { checkoutCartWithStripe } from '../../actions/checkoutCartWithStripe'; +import { handleStripeErrorAction } from '../../actions/handleStripeError'; interface CheckoutFormProps { - readOnly: boolean; + cmsCommonContent: { + termsOfServiceUrl: string; + privacyNoticeUrl: string; + }; cart: { id: string; version: number; @@ -29,11 +33,18 @@ interface CheckoutFormProps { locale: string; } -export function CheckoutForm({ readOnly, cart, locale }: CheckoutFormProps) { - const router = useRouter(); - const stripe = useStripe(); +export function CheckoutForm({ + cmsCommonContent, + cart, + locale, +}: CheckoutFormProps) { const { l10n } = useLocalization(); const elements = useElements(); + const router = useRouter(); + const stripe = useStripe(); + + const [formEnabled, setFormEnabled] = useState(false); + const [showConsentError, setShowConsentError] = useState(false); const [isPaymentElementLoading, setIsPaymentElementLoading] = useState(true); const [loading, setLoading] = useState(false); const [stripeFieldsComplete, setStripeFieldsComplete] = useState(false); @@ -68,7 +79,7 @@ export function CheckoutForm({ readOnly, cart, locale }: CheckoutFormProps) { ) => { event.preventDefault(); - if (!stripe || !elements || readOnly) { + if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; @@ -135,71 +146,96 @@ export function CheckoutForm({ readOnly, cart, locale }: CheckoutFormProps) { const nonStripeFieldsComplete = !!fullName; return ( - - {!isPaymentElementLoading && ( - - - - Name as it appears on your card - - - - { - setFullName(e.target.value); - setHasFullNameError(!e.target.value); - }} - /> - - {hasFullNameError && ( - -

- Please enter your name -

- - )} - - )} - + { + setFormEnabled(consentCheckbox); + setShowConsentError(true); }} /> - {!isPaymentElementLoading && ( - - +
setShowConsentError(true)} + > + +

+ Enter your card information +

+ + {!isPaymentElementLoading && ( + + + + Name as it appears on your card + + + + { + setFullName(e.target.value); + setHasFullNameError(!e.target.value); + }} + aria-required + /> + + {hasFullNameError && ( + + +

+ Please enter your name +

+ + + )} + + )} + + {!isPaymentElementLoading && ( + - - Subscribe Now + + Subscribe Now - - - )} + + )} +
); } diff --git a/libs/payments/ui/src/lib/client/components/PaymentSection.tsx b/libs/payments/ui/src/lib/client/components/PaymentSection.tsx index f805e684086..83251560da5 100644 --- a/libs/payments/ui/src/lib/client/components/PaymentSection.tsx +++ b/libs/payments/ui/src/lib/client/components/PaymentSection.tsx @@ -1,12 +1,11 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + 'use client'; -import { useState } from 'react'; -import { CheckoutCheckbox } from './CheckoutCheckbox'; +import { CheckoutForm } from './CheckoutForm'; import { StripeWrapper } from './StripeWrapper'; -import { Localized } from '@fluent/react'; interface PaymentFormProps { cmsCommonContent: { @@ -31,42 +30,16 @@ export function PaymentSection({ cart, locale, }: PaymentFormProps) { - const [formEnabled, setFormEnabled] = useState(false); - const [showConsentError, setShowConsentError] = useState(false); - return ( - <> - { - setFormEnabled(consentCheckbox); - setShowConsentError(true); - }} + + -
setShowConsentError(true)} - > - -

- Enter your card information -

- - -
- + ); } diff --git a/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx b/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx index 5f25bd68924..6835a9279d5 100644 --- a/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx +++ b/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx @@ -10,7 +10,7 @@ export function PrimaryButton({ children, ...props }: PrimaryButtonProps) { return ( diff --git a/libs/payments/ui/src/lib/client/components/StripeWrapper.tsx b/libs/payments/ui/src/lib/client/components/StripeWrapper.tsx index 0ec99c3ea21..b1131dbbc5c 100644 --- a/libs/payments/ui/src/lib/client/components/StripeWrapper.tsx +++ b/libs/payments/ui/src/lib/client/components/StripeWrapper.tsx @@ -3,30 +3,21 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 'use client'; -import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js'; import { Elements } from '@stripe/react-stripe-js'; -import { CheckoutForm } from './CheckoutForm'; +import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js'; import { useContext, useState } from 'react'; import { ConfigContext } from '../providers/ConfigProvider'; interface StripeWrapperProps { - readOnly: boolean; amount: number; currency: string; - cart: { - id: string; - version: number; - email: string | null; - }; - locale: string; + children: React.ReactNode; } export function StripeWrapper({ - readOnly, amount, currency, - cart, - locale, + children, }: StripeWrapperProps) { const config = useContext(ConfigContext); const [stripePromise] = useState(() => loadStripe(config.stripePublicApiKey)); @@ -42,6 +33,7 @@ export function StripeWrapper({ fontFamily: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif', fontSizeBase: '16px', + fontSizeSm: '16px', fontWeightNormal: '500', colorDanger: '#D70022', }, @@ -67,7 +59,7 @@ export function StripeWrapper({ return ( - + {children} ); } diff --git a/libs/payments/ui/src/lib/server/purchase-details.tsx b/libs/payments/ui/src/lib/server/purchase-details.tsx index dcfc0804973..b7e1d87fe0e 100644 --- a/libs/payments/ui/src/lib/server/purchase-details.tsx +++ b/libs/payments/ui/src/lib/server/purchase-details.tsx @@ -2,10 +2,10 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Invoice } from '@fxa/payments/cart'; import Image from 'next/image'; -import { formatPlanPricing } from '../utils/helpers'; +import { Invoice } from '@fxa/payments/cart'; import { LocalizerRsc } from '@fxa/shared/l10n/server'; +import { formatPlanPricing } from '../utils/helpers'; type ListLabelItemProps = { labelLocalizationId: string; @@ -114,7 +114,7 @@ export async function PurchaseDetails(props: PurchaseDetailsProps) { ))} -
    +
      {!!listAmount && ( ))} -
    -
    -

    - {l10n.getString('next-plan-details-total-label', 'Total')} -

    - - {l10n.getString( - `plan-price-interval-${interval}`, - { - amount: l10n.getLocalizedCurrency(totalAmount, currency), - }, - formatPlanPricing(totalAmount, currency, interval) - )} - -
    +
  • +

    + {l10n.getString('next-plan-details-total-label', 'Total')} +

    + + {l10n.getString( + `plan-price-interval-${interval}`, + { + amount: l10n.getLocalizedCurrency(totalAmount, currency), + }, + formatPlanPricing(totalAmount, currency, interval) + )} + +
    • +
{/* TODO - Add InfoBox as part of Coupon Form - Consider adding as child component */}

); diff --git a/libs/payments/ui/src/lib/server/subscription-title.tsx b/libs/payments/ui/src/lib/server/subscription-title.tsx index 34ecdd5e028..bb1c1a3b6f8 100644 --- a/libs/payments/ui/src/lib/server/subscription-title.tsx +++ b/libs/payments/ui/src/lib/server/subscription-title.tsx @@ -3,9 +3,9 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import Image from 'next/image'; +import checkLogo from '@fxa/shared/assets/images/check.svg'; import { CartState } from '@fxa/shared/db/mysql/account'; import { LocalizerRsc } from '@fxa/shared/l10n/server'; -import checkLogo from '@fxa/shared/assets/images/check.svg'; const getComponentTitle = (cartState: CartState) => { switch (cartState) { @@ -53,7 +53,10 @@ export async function SubscriptionTitle({ const displaySubtitle = subheaders.includes(cartState); return ( -
+

{l10n.getString(componentTitle.titleFtl, componentTitle.title)}

diff --git a/libs/shared/assets/src/configs/tailwind.config.js b/libs/shared/assets/src/configs/tailwind.config.js index 81844cb6803..ad23fabd57a 100644 --- a/libs/shared/assets/src/configs/tailwind.config.js +++ b/libs/shared/assets/src/configs/tailwind.config.js @@ -84,15 +84,15 @@ module.exports = { '0%': { transform: 'rotate(0)' }, '100%': { transform: 'rotate(360deg)' }, }, - 'slide-up': { - '0%': { opacity: 0, transform: 'translateY(10px)' }, + 'slide-down': { + '0%': { opacity: 0, transform: 'translateY(-10px)' }, '100%': { opacity: 1, transform: 'translateY(0)' }, }, }, animation: { 'delayed-fade-in': 'fade-in 1s linear 5s forwards', spin: 'rotate 0.8s linear infinite', - 'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)', + 'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)', }, listStyleType: { circle: 'circle', @@ -275,7 +275,7 @@ module.exports = { }, }, plugins: [ - plugin(function({ addUtilities }) { + plugin(function ({ addUtilities }) { const customUtilities = { '.clip-auto': { clip: 'auto', @@ -284,7 +284,7 @@ module.exports = { addUtilities(customUtilities, ['responsive', 'hover', 'focus']); }), - plugin(function({ addComponents }) { + plugin(function ({ addComponents }) { const carets = { '.caret-top': { borderLeft: '0.75rem solid transparent', diff --git a/libs/shared/react/.eslintrc.json b/libs/shared/react/.eslintrc.json new file mode 100644 index 00000000000..3456be9b903 --- /dev/null +++ b/libs/shared/react/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/libs/shared/react/README.md b/libs/shared/react/README.md new file mode 100644 index 00000000000..1955612f9a2 --- /dev/null +++ b/libs/shared/react/README.md @@ -0,0 +1,11 @@ +# shared-react + +This library was generated with [Nx](https://nx.dev). + +## Building + +Run `nx build shared-react` to build the library. + +## Running unit tests + +Run `nx test shared-react` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/shared/react/jest.config.ts b/libs/shared/react/jest.config.ts new file mode 100644 index 00000000000..3ce1092dcf9 --- /dev/null +++ b/libs/shared/react/jest.config.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +export default { + displayName: 'shared-react', + preset: '../../../jest.preset.js', + testEnvironment: 'node', + transform: { + '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], + }, + moduleFileExtensions: ['ts', 'js', 'html'], + coverageDirectory: '../../../coverage/libs/shared/react', +}; diff --git a/libs/shared/react/package.json b/libs/shared/react/package.json new file mode 100644 index 00000000000..7062d8d1ffb --- /dev/null +++ b/libs/shared/react/package.json @@ -0,0 +1,4 @@ +{ + "name": "@fxa/shared/react", + "version": "0.0.1" +} diff --git a/libs/shared/react/project.json b/libs/shared/react/project.json new file mode 100644 index 00000000000..42a3602c6d3 --- /dev/null +++ b/libs/shared/react/project.json @@ -0,0 +1,27 @@ +{ + "name": "shared-react", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/shared/react/src", + "projectType": "library", + "tags": [], + "targets": { + "build": { + "executor": "@nx/js:tsc", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/shared/react", + "tsConfig": "libs/shared/react/tsconfig.lib.json", + "packageJson": "libs/shared/react/package.json", + "main": "libs/shared/react/src/index.ts", + "assets": ["libs/shared/react/*.md"] + } + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/shared/react/jest.config.ts" + } + } + } +} diff --git a/libs/shared/react/src/components/LinkExternal.ftl b/libs/shared/react/src/components/LinkExternal.ftl new file mode 100644 index 00000000000..77b54087231 --- /dev/null +++ b/libs/shared/react/src/components/LinkExternal.ftl @@ -0,0 +1,4 @@ +## Strings shared between multiple FxA products for external link + +# Message for screen readers, to announce that external link will open in new window +next-link-sr-new-window = Opens in new window diff --git a/libs/shared/react/src/components/LinkExternal.tsx b/libs/shared/react/src/components/LinkExternal.tsx new file mode 100644 index 00000000000..75008205bfd --- /dev/null +++ b/libs/shared/react/src/components/LinkExternal.tsx @@ -0,0 +1,49 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +'use client'; + +import { Localized } from '@fluent/react'; + +interface LinkExternalProps { + className?: string; + href: string; + children: React.ReactNode; + title?: string; + 'data-testid'?: string; + rel?: 'noopener noreferrer' | 'author'; + tabIndex?: number; + onClick?: () => void; +} + +export const LinkExternal = ({ + className, + href, + children, + title, + 'data-testid': testid = 'link-external', + rel = 'noopener noreferrer', + tabIndex, + onClick, +}: LinkExternalProps) => ( + + {children} + + Opens in new window + + +); + +export default LinkExternal; diff --git a/libs/shared/react/src/index.ts b/libs/shared/react/src/index.ts new file mode 100644 index 00000000000..d7b8e01da47 --- /dev/null +++ b/libs/shared/react/src/index.ts @@ -0,0 +1,5 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +export * from './components/LinkExternal'; diff --git a/libs/shared/react/tsconfig.json b/libs/shared/react/tsconfig.json new file mode 100644 index 00000000000..25f7201d870 --- /dev/null +++ b/libs/shared/react/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "module": "commonjs" + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/shared/react/tsconfig.lib.json b/libs/shared/react/tsconfig.lib.json new file mode 100644 index 00000000000..db774135877 --- /dev/null +++ b/libs/shared/react/tsconfig.lib.json @@ -0,0 +1,11 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "commonjs", + "outDir": "../../../dist/out-tsc", + "declaration": true, + "types": ["node"] + }, + "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts", "src/**/*.tsx"] +} diff --git a/libs/shared/react/tsconfig.spec.json b/libs/shared/react/tsconfig.spec.json new file mode 100644 index 00000000000..69a251f328c --- /dev/null +++ b/libs/shared/react/tsconfig.spec.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/package.json b/package.json index 8e990c25b6d..c8594d4a323 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@opentelemetry/sdk-trace-node": "^1.23.0", "@opentelemetry/sdk-trace-web": "^1.23.0", "@radix-ui/react-form": "^0.0.3", - "@radix-ui/react-hover-card": "^1.0.7", + "@radix-ui/react-tooltip": "^1.0.7", "@sentry/browser": "^7.113.0", "@sentry/integrations": "^7.113.0", "@sentry/node": "^7.113.0", diff --git a/tsconfig.base.json b/tsconfig.base.json index 83f2e5f30ba..50e9059fcf8 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -58,6 +58,7 @@ "@fxa/shared/notifier": ["libs/shared/notifier/src/index.ts"], "@fxa/shared/otp": ["libs/shared/otp/src/index.ts"], "@fxa/shared/pem-jwk": ["libs/shared/pem-jwk/src/index.ts"], + "@fxa/shared/react": ["libs/shared/react/src/index.ts"], "@fxa/shared/sentry": ["libs/shared/sentry/src/index.ts"], "@fxa/vendored/common-password-list": [ "libs/vendored/common-password-list/src/index.ts" diff --git a/yarn.lock b/yarn.lock index 7040dfb5960..470b0033ae5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14964,34 +14964,6 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-hover-card@npm:^1.0.7": - version: 1.0.7 - resolution: "@radix-ui/react-hover-card@npm:1.0.7" - dependencies: - "@babel/runtime": ^7.13.10 - "@radix-ui/primitive": 1.0.1 - "@radix-ui/react-compose-refs": 1.0.1 - "@radix-ui/react-context": 1.0.1 - "@radix-ui/react-dismissable-layer": 1.0.5 - "@radix-ui/react-popper": 1.1.3 - "@radix-ui/react-portal": 1.0.4 - "@radix-ui/react-presence": 1.0.1 - "@radix-ui/react-primitive": 1.0.3 - "@radix-ui/react-use-controllable-state": 1.0.1 - peerDependencies: - "@types/react": "*" - "@types/react-dom": "*" - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - peerDependenciesMeta: - "@types/react": - optional: true - "@types/react-dom": - optional: true - checksum: 812c348d8331348774b0460cd9058fdb34e0a4e167cc3ab7350d60d0ac374c673e8159573919da299f58860b8eeb9d43c21ccb679cf6db70f5db0386359871ef - languageName: node - linkType: hard - "@radix-ui/react-id@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-id@npm:1.0.1" @@ -15345,6 +15317,37 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-tooltip@npm:^1.0.7": + version: 1.0.7 + resolution: "@radix-ui/react-tooltip@npm:1.0.7" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-dismissable-layer": 1.0.5 + "@radix-ui/react-id": 1.0.1 + "@radix-ui/react-popper": 1.1.3 + "@radix-ui/react-portal": 1.0.4 + "@radix-ui/react-presence": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-slot": 1.0.2 + "@radix-ui/react-use-controllable-state": 1.0.1 + "@radix-ui/react-visually-hidden": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 894d448c69a3e4d7626759f9f6c7997018fe8ef9cde098393bd83e10743d493dfd284eef041e46accc45486d5a5cd5f76d97f56afbdace7aed6e0cb14007bf15 + languageName: node + linkType: hard + "@radix-ui/react-use-callback-ref@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" @@ -38813,7 +38816,7 @@ fsevents@~2.1.1: "@opentelemetry/sdk-trace-node": ^1.23.0 "@opentelemetry/sdk-trace-web": ^1.23.0 "@radix-ui/react-form": ^0.0.3 - "@radix-ui/react-hover-card": ^1.0.7 + "@radix-ui/react-tooltip": ^1.0.7 "@sentry/browser": ^7.113.0 "@sentry/integrations": ^7.113.0 "@sentry/node": ^7.113.0