WIP - Revisions

mozilla · Jun 4, 2024 · 1323f41 · 1323f41
1 parent 2b19dbf
commit 1323f41
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 15 deletions.
diff --git a/libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx b/libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx
@@ -6,7 +6,7 @@
 import { Localized } from '@fluent/react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { useEffect, useState } from 'react';
-import { LinkExternal } from '@fxa/shared/react/components/LinkExternal';
+import { LinkExternal } from '@fxa/shared/react';
 
 interface CheckoutCheckboxProps {
   isRequired: boolean;
@@ -62,6 +62,7 @@ export function CheckoutCheckbox({
                   <LinkExternal
                     href={termsOfService}
                     className="text-blue-500 underline"
+                    data-testid="link-external-terms-of-service"
                   >
                     Terms of Service
                   </LinkExternal>
@@ -70,6 +71,7 @@ export function CheckoutCheckbox({
                   <LinkExternal
                     href={privacyNotice}
                     className="text-blue-500 underline"
+                    data-testid="link-external-privacy-notice"
                   >
                     Privacy Notice
                   </LinkExternal>
@@ -82,13 +84,15 @@ export function CheckoutCheckbox({
                 <LinkExternal
                   href={termsOfService}
                   className="text-blue-500 underline"
+                  data-testid="link-external-terms-of-service"
                 >
                   Terms of Service
                 </LinkExternal>{' '}
                 and{' '}
                 <LinkExternal
                   href={privacyNotice}
                   className="text-blue-500 underline"
+                  data-testid="link-external-privacy-notice"
                 >
                   Privacy Notice
                 </LinkExternal>
@@ -99,7 +103,8 @@ export function CheckoutCheckbox({
           <Tooltip.Portal>
             <Tooltip.Content
               id="checkboxError"
-              className="animate-slide-up z-20"
+              className="animate-slide-down z-20"
+              side="bottom"
               sideOffset={20}
               align="start"
               alignOffset={50}

diff --git a/libs/payments/ui/tsconfig.lib.json b/libs/payments/ui/tsconfig.lib.json
@@ -19,5 +19,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "../../shared/react/src/components/LinkExternal.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
diff --git 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
@@ -13,11 +13,6 @@
     {
       "files": ["*.js", "*.jsx"],
       "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {}
     }
   ]
 }
diff --git a/libs/shared/react/src/index.ts 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.lib.json b/libs/shared/react/tsconfig.lib.json
@@ -7,5 +7,5 @@
     "types": ["node"]
   },
   "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -58,7 +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/*"],
+      "@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"