feat(settings): Create content-server version of AppLayout and move styles

This commit:
* Adds AppLayout with Tailwind styles and moves Moz logo from fxa-settings into fxa-react for use in Reactified content-server routes
* Adds postcss-assets to settings for future background-images
* Moves .card styles into fxa-react
* README update on inlining SVGs vs src

Closes FXA-6275

packages/fxa-content-server/app/styles/tailwind.css

@@ -12,7 +12,6 @@
 /* REACT NOTE: when we refactor to React it's going to be nicer to create reusable
  * components and ditch some of these custom component classes. */
 
-@import './tailwind/flows';
 @import './tailwind/state';
 @import './tailwind/ctas';
 @import './tailwind/inputs';

packages/fxa-content-server/tailwind.config.js

@@ -18,9 +18,12 @@ config.content = [
 config.theme.extend = {
   ...config.theme.extend,
   backgroundImage: {
+    ...config.theme.extend.backgroundImage,
     'check-white': 'inline("../images/icon-check-white.svg")',
     'show-password': 'inline("../images/icon-show-password.svg")',
     'hide-password': 'inline("../images/icon-show-password-closed.svg")',
+    /* TODO: move this to `fxa-react` , FXA-5745 */
+    'ff-logo': 'url("../images/firefox-logo.svg")',
   },
   content: {
     ...config.theme.extend.content,

packages/fxa-react/components/Footer/index.tsx

@@ -5,7 +5,7 @@
 import { Localized, useLocalization } from '@fluent/react';
 import React from 'react';
 import LinkExternal from '../LinkExternal';
-import { ReactComponent as MozLogo } from './moz-logo.svg';
+import { ReactComponent as MozLogo } from '../../images/moz-logo.svg';
 
 export const Footer = () => {
   const { l10n } = useLocalization();

packages/fxa-react/components/LinkExternal/index.tsx

@@ -10,6 +10,7 @@ type LinkExternalProps = {
   children: React.ReactNode;
   title?: string;
   'data-testid'?: string;
+  rel?: 'noopener noreferrer' | 'author';
 };
 
 export const LinkExternal = ({
@@ -18,15 +19,16 @@ export const LinkExternal = ({
   children,
   title,
   'data-testid': testid = 'link-external',
+  rel = 'noopener noreferrer',
 }: LinkExternalProps) => (
   <a
     data-testid={testid}
     target="_blank"
-    rel="noopener noreferrer"
     {...{
       className,
       href,
       title,
+      rel,
     }}
   >
     {children}

packages/fxa-react/configs/tailwind.js

@@ -100,6 +100,14 @@ module.exports = {
         30: '0.3',
         40: '0.4',
       },
+      backgroundImage: {
+        /* TODO: be able to reference images here, FXA-5745, this is a workaround/hack
+         * This style lives `fxa-react` since it's used by content-server and Settings, but the
+         * BG image is set in our package TW configs since image paths can't be shared. This will
+         * always be overridden but other packages without this set that use fxa-react shared
+         * styles can't build without this */
+        'ff-logo': 'none',
+      },
       outline: {
         'black-dotted': '1px dotted #000',
       },

packages/fxa-react/styles/flows.css

@@ -2,13 +2,14 @@
  * 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/. */
 
+/* Remove this component class in favor of components with TW classes directly
+ * applied after content-server no longer needs it */
+
 .card {
   @apply relative text-center w-full mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-8 pb-10 pt-33 mobileLandscape:pt-20 mobileLandscape:shadow-card-grey-drop;
 
   &::before {
-    @apply h-16 mobileLandscape:h-20 left-0 block absolute bg-center bg-no-repeat w-full bg-contain top-8 mobileLandscape:-top-10;
-    content: '';
-    background-image: inline('../images/firefox-logo.svg');
+    @apply h-16 mobileLandscape:h-20 left-0 block absolute bg-center bg-no-repeat w-full bg-contain top-8 mobileLandscape:-top-10 content-[''] bg-ff-logo;
   }
 
   &-header {

packages/fxa-react/styles/index.css

@@ -10,3 +10,4 @@
 @import './links.css';
 @import './portal.css';
 @import './ctas.css';
+@import './flows.css';

packages/fxa-settings/README.md

@@ -439,6 +439,8 @@ All previous instances will still use `font-bold mr-2`.
 
 ### Working with SVGs
 
+#### Inlined SVGs
+
 Create React App allows us to use SVGs in a variety of ways, right out of the box. We prefer to inline our SVGs where we can:
 
 ```javascript
@@ -461,29 +463,32 @@ import { ReactComponent as CloseIcon } from 'fxa-react/images/close.svg';
 </button>
 ```
 
-Other ways to use SVGs:
+You can also inline background-images like so, assuming `post-css/assets` is installed and in the `postcss.config.js`:
+
+```css
+background-image: inline('/path-to-image.svg');
+```
+
+To do this with Tailwind, you'll need to add a class to the `backgroundImage` object in the Tailwind config file. Check config files for examples.
+
+#### Non-inlined SVGs
+
+Sometimes it makes sense to let a network request fetch SVGs that are heavy/large and are used across multiple pages for faster rendering after the initial request. While our builds bust our asset caches, if an SVG persists from page to page, it can be more performant to download the image once and let the browser cache it for use across multiple pages, at least until the next release. The Mozilla and Firefox logo are good examples of this.
+
+This can be done with either an image `src` or a background-image with `url`.
 
 ```javascript
 // As an image source:
 import logoUrl from './logo.svg';
 const LogoImage = () => <img src={logoUrl} alt="Logo" />;
-
-// As a background-image (inline style)
-import logoUrl from './logo.svg';
-const LogoImage = () => (
-  <div
-    style={{ backgroundImage: `url(${logoUrl})` }}
-    role="img"
-    aria-label="logo"
-  ></div>
-);
-
-// As a background-image (external style)
-// Just reference it in CSS, the loader will find it
-// .logo { background-image: url('logo.svg'); }
-const LogoImage = () => <div class="logo" role="img" aria-label="logo"></div>;
 ```
 
+```css
+background-image: url('/path-to-image.svg');
+```
+
+To use a background-image with Tailwind, you'll need to add a class to the `backgroundImage` object in the Tailwind config file. Check config files for examples.
+
 ### Metrics
 
 Metrics reports are currently sent to the fxa-content-server metrics endpoint. Use the [metrics library](./src/lib/metrics.ts) to log events and other information.

packages/fxa-settings/package.json

@@ -127,6 +127,7 @@
     "npm-run-all": "^4.1.5",
     "pm2": "^5.2.2",
     "postcss": "^8.4.14",
+    "postcss-assets": "^6.0.0",
     "postcss-import": "^15.0.0",
     "react-test-renderer": "^17.0.2",
     "storybook-addon-rtl": "^0.4.3",

packages/fxa-settings/postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     'postcss-import': {},
+    'postcss-assets': {},
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},

packages/fxa-settings/src/components/AppLayout/index.stories.tsx

@@ -0,0 +1,19 @@
+/* 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 React from 'react';
+import AppLayout from './index';
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/AppLayout',
+  component: AppLayout,
+} as Meta;
+
+export const Basic = () => (
+  <AppLayout>
+    <h1 className="card-header">Header content</h1>
+    <p className="mt-2">Paragraph content here</p>
+  </AppLayout>
+);

packages/fxa-settings/src/components/AppLayout/index.test.tsx

@@ -0,0 +1,27 @@
+/* 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 React from 'react';
+import { render, screen } from '@testing-library/react';
+import AppLayout from '.';
+
+it('renders as expected with children', async () => {
+  render(
+    <AppLayout>
+      <p>Hello, world!</p>
+    </AppLayout>
+  );
+
+  expect(screen.getByTestId('app')).toBeInTheDocument();
+  screen.getByText('Hello, world!');
+  screen.getByRole('main');
+
+  const mozLink = screen.getByRole('link');
+  expect(mozLink).toHaveAttribute('rel', 'author');
+  expect(mozLink).toHaveAttribute(
+    'href',
+    'https://www.mozilla.org/about/?utm_source=firefox-accounts&utm_medium=Referral'
+  );
+  screen.getByAltText('Mozilla logo');
+});

packages/fxa-settings/src/components/AppLayout/index.tsx

@@ -0,0 +1,43 @@
+/* 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 React from 'react';
+import mozLogo from 'fxa-react/images/moz-logo.svg';
+import LinkExternal from 'fxa-react/components/LinkExternal';
+import { useLocalization } from '@fluent/react';
+
+type AppLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const AppLayout = ({ children }: AppLayoutProps) => {
+  const { l10n } = useLocalization();
+  return (
+    <div className="flex min-h-screen flex-col items-center" data-testid="app">
+      <main className="mobileLandscape:flex mobileLandscape:items-center mobileLandscape:flex-1">
+        <section>
+          <div className="card">{children}</div>
+        </section>
+      </main>
+      <footer className="hidden mobileLandscape:block w-full p-8">
+        <LinkExternal
+          rel="author"
+          href="https://www.mozilla.org/about/?utm_source=firefox-accounts&amp;utm_medium=Referral"
+        >
+          <img
+            src={mozLogo}
+            alt={l10n.getString(
+              'app-footer-mozilla-logo-label',
+              null,
+              'Mozilla logo'
+            )}
+            className="w-32"
+          />
+        </LinkExternal>
+      </footer>
+    </div>
+  );
+};
+
+export default AppLayout;

packages/fxa-settings/tailwind.config.js

@@ -23,4 +23,10 @@ if (process.env.STORYBOOK_BUILD === '1') {
   config.content.push('./.storybook/design-guide/**/*.tsx');
 }
 
+config.theme.extend.backgroundImage = {
+  ...config.theme.extend.backgroundImage,
+  /* TODO: move this to `fxa-react`, FXA-5745 */
+  'ff-logo': "url('../../../fxa-react/images/ff-logo.svg')",
+};
+
 module.exports = config;

yarn.lock

@@ -25565,6 +25565,7 @@ fsevents@~2.1.1:
     npm-run-all: ^4.1.5
     pm2: ^5.2.2
     postcss: ^8.4.14
+    postcss-assets: ^6.0.0
     postcss-import: ^15.0.0
     react: ^16.13.1
     react-async-hook: ^4.0.0