Feature/plan section (#395)

* stachign code * adding cards * adding more card content * more card updates * more styles * finishing design * fixing padding * more plan id's * simplifying bar * fixing free card * clean up * adding version tracker * pr callouts * adding lilypad 2.0 (#401) * adding lilypad 2.0 * client --------- Co-authored-by: Nick Grato <[email protected]> * loading section * more marketing page designs and new utility classes * adding legacy section and breaking up the form component in the email section. * making the grid section * adding slider * adding assets * finishing touches * fixing chf price * fixing build * pr clean up * copy changes * commenting out button toggle * final touches --------- Co-authored-by: Nick Grato <[email protected]>
Hubs-Foundation · Aug 17, 2023 · 37fcf61 · 37fcf61
1 parent 307d2af
commit 37fcf61
Show file tree

Hide file tree

Showing 80 changed files with 1,725 additions and 1,293 deletions.
diff --git a/client/components/modals/ConfirmPlanModal/ConfirmPlanModal.tsx b/client/components/modals/ConfirmPlanModal/ConfirmPlanModal.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonCategoriesE, Modal } from '@mozilla/lilypad-ui';
+import { Button, Modal } from '@mozilla/lilypad-ui';
 import InfoBlock from '@Shared/InfoBlock/InfoBlock';
 import { PERSONAL_COPY } from 'components/modules/plans/plan.const';
 import styles from './ConfirmPlanModal.module.scss';
@@ -35,7 +35,7 @@ const ConfirmPlanModal = () => {
             </p>
 
             <Button
-              category={ButtonCategoriesE.SECONDARY_SOLID}
+              category="secondary_solid"
               text="Upgrade Plan"
               label="Upgrade Plan"
               href={RoutesE.SUBSCRIBE}

diff --git a/client/components/modals/SubscriptionModal/SubscriptionModal.tsx b/client/components/modals/SubscriptionModal/SubscriptionModal.tsx
@@ -1,6 +1,6 @@
 import styles from './SubscriptionModal.module.scss';
 import { useCallback } from 'react';
-import { Icon, Button, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Icon, Button } from '@mozilla/lilypad-ui';
 import { FXA_SERVER } from 'config';
 
 type SubscriptionModalT = {
@@ -70,15 +70,15 @@ const SubscriptionModal = ({
         <div className={styles.footer_container}>
           <Button
             label="cancel"
-            category={ButtonCategoriesE.PRIMARY_CLEAR}
+            category="primary_clear"
             text="Nevermind"
             classProp="mr-10-dt"
             onClick={handleCloseClick}
           />
           <Button
             label="continue to firefox account"
             onClick={onManageAccountClick}
-            category={ButtonCategoriesE.PRIMARY_SOLID}
+            category="primary_solid"
             classProp="mb-24-mb"
             text="Continue to Firefox Account"
             target="_blank"

diff --git a/client/components/modules/hubs/CustomizeHub/CustomizeHub.tsx b/client/components/modules/hubs/CustomizeHub/CustomizeHub.tsx
@@ -1,6 +1,6 @@
 import styles from './CustomizeHub.module.scss';
 import { useRouter } from 'next/router';
-import { Button, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Button } from '@mozilla/lilypad-ui';
 import Card from '@Shared/Card/Card';
 import { HubT } from 'types/General';
 
@@ -22,7 +22,7 @@ export const CustomizeHub = ({ hub }: CustomizeHubPropsT) => {
           iconPlacedRight={true}
           text="Edit Domain"
           label="edit domain"
-          category={ButtonCategoriesE.SECONDARY_SOLID}
+          category="secondary_solid"
           onClick={() => {
             router.push({
               pathname: '/hubs/[hub_id]',
@@ -40,7 +40,7 @@ export const CustomizeHub = ({ hub }: CustomizeHubPropsT) => {
           iconPlacedRight={true}
           text="Upload Client"
           label="Upload Client"
-          category={ButtonCategoriesE.SECONDARY_SOLID}
+          category="secondary_solid"
           onClick={() => {
             router.push({
               pathname: '/custom-client',

diff --git a/client/components/modules/hubs/HubCard/ErrorBox.tsx b/client/components/modules/hubs/HubCard/ErrorBox.tsx
@@ -1,5 +1,5 @@
 import styles from './ErrorBox.module.scss';
-import { Button, ButtonCategoriesE, Icon } from '@mozilla/lilypad-ui';
+import { Button, Icon } from '@mozilla/lilypad-ui';
 
 type ErrorBoxPropsT = {
   onTryAgainClick?: Function;
@@ -42,7 +42,7 @@ const ErrorBox = ({
           icon="x"
           classProp={styles.close}
           onClick={handleOnClose}
-          category={ButtonCategoriesE.PRIMARY_CLEAR}
+          category="primary_clear"
         />
       )}
       <div className={styles.error_icon_wrapper}>
@@ -63,7 +63,7 @@ const ErrorBox = ({
           <Button
             label="contact us"
             text="Contact Us"
-            category={ButtonCategoriesE.PRIMARY_OUTLINE}
+            category="primary_outline"
             onClick={handleContactClick}
           />
         </div>

diff --git a/client/components/modules/hubs/HubCard/HubCardHeader.tsx b/client/components/modules/hubs/HubCard/HubCardHeader.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonCategoriesE, Dropdown } from '@mozilla/lilypad-ui';
+import { Button, Dropdown } from '@mozilla/lilypad-ui';
 import { useRouter } from 'next/router';
 import { RoutesE } from 'types/Routes';
 import { StatusE } from 'types/General';
@@ -71,7 +71,7 @@ const HubCardHeader = ({
             <Button
               icon="more-vertical"
               label="toggle"
-              category={ButtonCategoriesE.PRIMARY_CLEAR}
+              category="primary_clear"
             />
           }
           content={DropdownContent}

diff --git a/client/components/modules/hubs/HubFormCard/HubFormCard.tsx b/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
@@ -1,14 +1,7 @@
 import { useState, useContext, FocusEventHandler } from 'react';
 import { useRouter } from 'next/router';
 import styles from './HubFormCard.module.scss';
-import {
-  Button,
-  ButtonCategoriesE,
-  ButtonSizesE,
-  Icon,
-  Input,
-  Pill,
-} from '@mozilla/lilypad-ui';
+import { Button, Icon, Input, Pill } from '@mozilla/lilypad-ui';
 import { validateHubSubdomain } from 'services/hub.service';
 import { StoreContext, SubdomainRetryT } from 'contexts/StoreProvider';
 import { RoutesE } from 'types/Routes';
@@ -162,8 +155,8 @@ const HubFormCard = ({ hub, onSubmit, classProp = '' }: HubFormCardPropsT) => {
           <Button
             label="cancel"
             onClick={handleCancelClick}
-            size={ButtonSizesE.LARGE}
-            category={ButtonCategoriesE.PRIMARY_CLEAR}
+            size="large"
+            category="primary_clear"
             icon="arrow-left"
             classProp="mr-5"
           />
@@ -258,14 +251,14 @@ const HubFormCard = ({ hub, onSubmit, classProp = '' }: HubFormCardPropsT) => {
               label="cancel"
               classProp="mr-5"
               onClick={handleCancelClick}
-              category={ButtonCategoriesE.PRIMARY_CLEAR}
+              category="primary_clear"
               text="Cancel"
             />
 
             <Button
               label="Apply Changes"
               type="submit"
-              category={ButtonCategoriesE.PRIMARY_SOLID}
+              category="primary_solid"
               text="Apply Changes"
             />
           </section>

diff --git a/client/components/modules/plans/BeginStarterPlanButton/BeginStarterPlanButton.tsx b/client/components/modules/plans/BeginStarterPlanButton/BeginStarterPlanButton.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  CategoryE,
-  NewNotificationT,
-  NotificationLocationE,
-  NotificationTypesE,
-} from '@mozilla/lilypad-ui';
+import { Button } from '@mozilla/lilypad-ui';
 import { StoreContext } from 'contexts/StoreProvider';
 import { useRouter } from 'next/router';
 import { useCallback, useContext, useState } from 'react';
@@ -29,13 +23,13 @@ const BeginStarterPlanButton = ({
       title: 'Error',
       description: 'Failed to create Starter Hub, please try again.',
       duration: 8000,
-      type: NotificationTypesE.ERROR,
-      location: NotificationLocationE.TOP_RIGHT,
+      type: 'error',
+      location: 'top_right',
       pauseOnHover: true,
       autoClose: true,
       hasIcon: true,
-      category: CategoryE.TOAST,
-    } as NewNotificationT);
+      category: 'toast',
+    });
   }, [storeContext]);
 
   const startStarterPlan = async () => {

diff --git a/client/components/modules/plans/ContactCard/ContactCard.tsx b/client/components/modules/plans/ContactCard/ContactCard.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Button } from '@mozilla/lilypad-ui';
 import styles from './ContactCard.module.scss';
 
 type ContactCardPropsT = {
@@ -21,7 +21,7 @@ const ContactCard = ({ email, subject, classProp = '' }: ContactCardPropsT) => {
           label="contact us"
           text="Contact us"
           onClick={handleContactClick}
-          category={ButtonCategoriesE.SECONDARY_SOLID}
+          category="secondary_solid"
         />
       </div>
     </div>

diff --git a/client/components/modules/side-panel/UpgradePlan/UpgradePlan.tsx b/client/components/modules/side-panel/UpgradePlan/UpgradePlan.tsx
@@ -1,5 +1,5 @@
 import styles from './UpgradePlan.module.scss';
-import { Button, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Button } from '@mozilla/lilypad-ui';
 import { RoutesE } from 'types/Routes';
 
 const UpgradePlan = () => {
@@ -14,7 +14,7 @@ const UpgradePlan = () => {
       </div>
       <div className="mt-12-mb">
         <Button
-          category={ButtonCategoriesE.SECONDARY_SOLID}
+          category="secondary_solid"
           text="Upgrade"
           label="Upgrade"
           href={RoutesE.SUBSCRIBE}

diff --git a/client/components/navigation/MainNav/MainNav.tsx b/client/components/navigation/MainNav/MainNav.tsx
@@ -14,7 +14,6 @@ import {
 import {
   Button,
   Avatar,
-  ButtonCategoriesE,
   Icon,
   Dropdown,
   dropdownT,
@@ -138,7 +137,7 @@ const MainNav = ({
               <Button
                 label="edit dashboard"
                 classProp={styles.exit_button}
-                category={ButtonCategoriesE.SECONDARY_OUTLINE}
+                category="secondary_outline"
                 text="Exit Dashboard"
                 onClick={onLogOutClick}
               />
@@ -170,7 +169,7 @@ const MainNav = ({
           {showLoggedOutUi && (
             <Button
               label="sign in"
-              category={ButtonCategoriesE.SECONDARY_OUTLINE}
+              category="secondary_outline"
               text="Sign In"
               href={`https://${AUTH_SERVER}/login?idp=fxa&client=https://${DASH_ROOT_DOMAIN}`}
             />

diff --git a/client/components/shared/ButtonToggle/ButtonToggle.tsx b/client/components/shared/ButtonToggle/ButtonToggle.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Button } from '@mozilla/lilypad-ui';
 import { useState } from 'react';
 import styles from './ButtonToggle.module.scss';
 
@@ -39,11 +39,7 @@ const ButtonToggle = ({
           onClick={() => {
             handleButtonClick(value);
           }}
-          category={
-            value === currentValue
-              ? ButtonCategoriesE.PRIMARY_SOLID
-              : ButtonCategoriesE.PRIMARY_CLEAR
-          }
+          category={value === currentValue ? 'primary_solid' : 'primary_clear'}
         />
       ))}
     </div>

diff --git a/client/components/shared/ExpansionPanel/ExpansionPanel.tsx b/client/components/shared/ExpansionPanel/ExpansionPanel.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useState, useCallback } from 'react';
 import styles from './ExpansionPanel.module.scss';
-import { Icon, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Icon } from '@mozilla/lilypad-ui';
 import FadeIn from '@Util/FadeIn';
 
 export type ExpansionPanelPropsT = {

diff --git a/client/components/shared/FeedbackBanner/FeedbackBanner.tsx b/client/components/shared/FeedbackBanner/FeedbackBanner.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import styles from './FeedbackBanner.module.scss';
-import { Button, ButtonCategoriesE, Icon } from '@mozilla/lilypad-ui';
+import { Button, Icon } from '@mozilla/lilypad-ui';
 import FadeIn from '@Util/FadeIn';
 
 type FeedbackBannerPropsT = {
@@ -50,7 +50,7 @@ const FeedbackBanner = ({ classProp = '' }: FeedbackBannerPropsT) => {
               label="give feedback"
               href="https://connect.mozilla.org/t5/ideas/idb-p/ideas/label-name/hubs"
               classProp={styles.button}
-              category={ButtonCategoriesE.SECONDARY_OUTLINE}
+              category="secondary_outline"
               target="_blank"
               text="Give Feedback"
             />

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint && prettier -c ."
   },
   "dependencies": {
-    "@mozilla/lilypad-ui": "1.8.6",
+    "@mozilla/lilypad-ui": "2.0.0",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.1",
     "cookies-next": "^2.0.4",

diff --git a/client/pages/custom-client/index.tsx b/client/pages/custom-client/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Head from 'next/head';
 import type { GetServerSidePropsContext } from 'next';
 import { AxiosRequestHeaders } from 'axios';
-import { Button, ButtonSizesE, ButtonCategoriesE } from '@mozilla/lilypad-ui';
+import { Button } from '@mozilla/lilypad-ui';
 import { HubT } from 'types/General';
 import { RoutesE } from 'types/Routes';
 import { customClientRG } from 'services/routeGuard.service';
@@ -68,8 +68,8 @@ const CustomClient = ({ subscription }: HubDetailsViewPropsT) => {
               <Button
                 label="cancel"
                 onClick={handleCancelClick}
-                size={ButtonSizesE.LARGE}
-                category={ButtonCategoriesE.PRIMARY_CLEAR}
+                size="large"
+                category="primary_clear"
                 icon="arrow-left"
                 classProp="mr-5"
               />

diff --git a/client/pages/hubs/[hub_id].tsx b/client/pages/hubs/[hub_id].tsx
@@ -5,11 +5,6 @@ import { RoutesE } from 'types/Routes';
 import { getHub, updateHub } from 'services/hub.service';
 import { hubIdRG } from 'services/routeGuard.service';
 import Head from 'next/head';
-import {
-  NotificationTypesE,
-  NotificationLocationE,
-  CategoryE,
-} from '@mozilla/lilypad-ui';
 import SkeletonCard from '@Shared/SkeletonCard/SkeletonCard';
 import HubFormCard, {
   HubFormCardT,
@@ -65,12 +60,12 @@ const HubDetailsView = ({ subscription }: HubDetailsViewPropsT) => {
         title: 'Error',
         description: errorMessage,
         duration: 8000,
-        type: NotificationTypesE.ERROR,
-        location: NotificationLocationE.TOP_CENTER,
+        type: 'error',
+        location: 'top_center',
         pauseOnHover: true,
         autoClose: true,
         hasIcon: true,
-        category: CategoryE.TOAST,
+        category: 'toast',
       });
       setLoading(false);
     },