Merge pull request #14397 from mozilla/FXA-5631

refactor(payments): update Header to utilize Tailwind

packages/fxa-payments-server/public/locales/en-US/main.ftl

@@ -22,6 +22,8 @@ brand-name-apple-app-store = App Store
 document =
   .title = Firefox Accounts
 
+brand-name-firefox-logo = { -brand-name-firefox } logo
+
 ## General aria-label
 
 close-aria =

packages/fxa-payments-server/src/components/Header/index.scss

@@ -1,41 +0,0 @@
-@import '../../../../fxa-content-server/app/styles/breakpoints';
-@import '../../styles/variables';
-
-.fxa-settings-header {
-  align-items: center;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(12, 12, 13, 0.1);
-  display: flex;
-  height: $header-height;
-  justify-content: space-between;
-  left: 0;
-  margin: 0 auto;
-  padding: 0 16px;
-  position: fixed;
-  top: 0;
-  white-space: nowrap;
-  width: 100%;
-  z-index: 6;
-
-  @include min-width('tablet') {
-    height: $header-height-tablet;
-    padding: 0 16px;
-  }
-
-  .fxa-logo {
-    background-image: url('../../images/firefox-logo-combined.svg');
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 100%;
-    margin: 0;
-    padding-left: 48px;
-    width: 120px;
-  }
-
-  .avatar {
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-  }
-}

packages/fxa-payments-server/src/components/Header/index.stories.tsx

@@ -3,12 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import MockApp from '../../../.storybook/components/MockApp';
-import Header from './index';
+import { Header, HeaderProps } from './index';
 import { Profile } from '../../store/types';
 
-const userProfile: Profile = {
+export default {
+  title: 'components/Header',
+  component: Header,
+} as Meta;
+
+const profile: Profile = {
   avatar: 'http://placekitten.com/256/256',
   displayName: 'Foxy77',
   email: 'foxy@firefox.com',
@@ -20,14 +25,17 @@ const userProfile: Profile = {
   metricsEnabled: true,
 };
 
-storiesOf('components/Header', module)
-  .add('default', () => (
+const storyWithProps = ({ profile }: HeaderProps) => {
+  const story = () => (
     <MockApp>
-      <Header {...{ profile: userProfile }} />
+      <Header profile={profile} />
     </MockApp>
-  ))
-  .add('no profile', () => (
-    <MockApp>
-      <Header />
-    </MockApp>
-  ));
+  );
+  return story;
+};
+
+export const Default = storyWithProps({
+  profile,
+});
+
+export const NoProfile = storyWithProps({});

packages/fxa-payments-server/src/components/Header/index.test.tsx

@@ -31,9 +31,6 @@ describe('Header', () => {
 
     const { queryByTestId } = subject();
 
-    const branding = queryByTestId('branding');
-    expect(branding).toHaveAttribute('title', 'firefox');
-
     const avatar = queryByTestId('avatar');
     expect(avatar).toHaveAttribute('alt', userProfile.displayName);
   });

packages/fxa-payments-server/src/components/Header/index.tsx

@@ -1,30 +1,42 @@
 import React from 'react';
-
-import './index.scss';
 import { Profile } from '../../store/types';
+import firefoxLogo from '../../images/firefox-logo-combined.svg';
+import { useLocalization } from '@fluent/react';
 
-type HeaderProps = {
+export type HeaderProps = {
   profile?: Profile;
   className?: string;
 };
 
 export const Header = ({ profile, className = 'default' }: HeaderProps) => {
+  const { l10n } = useLocalization();
   let profileSection = null;
+
   if (profile) {
     const { avatar, displayName, email } = profile;
     profileSection = (
       <img
-        className="avatar hoisted"
+        className="rounded-full w-8 h-8"
         src={avatar}
         data-testid="avatar"
         alt={displayName || email}
+        title={displayName || email}
       />
     );
   }
 
   return (
-    <header className={`${className} fxa-settings-header`} role="banner">
-      <div className="fxa-logo" data-testid="branding" title="firefox"></div>
+    <header
+      className={`${className} flex justify-between items-center bg-white shadow h-16 fixed left-0 top-0 my-0 mx-auto px-4 py-0 w-full z-10 tablet:h-20`}
+      role="banner"
+    >
+      <div data-testid="branding">
+        <img
+          src={firefoxLogo}
+          alt={l10n.getString('brand-name-firefox-logo', null, 'Firefox logo')}
+          className="w-[120px]"
+        />
+      </div>
       {profileSection}
     </header>
   );