DIG-5600: Banner Design for ABP wip5

CityOfBoston · Jan 31, 2025 · 05918bd · 05918bd
1 parent 6e2fdb0
commit 05918bd
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 31 deletions.
diff --git a/services-js/access-boston/fixtures/apps.yaml b/services-js/access-boston/fixtures/apps.yaml
@@ -4,7 +4,7 @@ notice:
   text: 'Make your Access Boston account even more secure by setting up the PingID app. It is faster and easier to use than getting codes via text, email or phone! Directions are [here](https://www.boston.gov/access-boston-portal-help#pingid-app-instructions)'
   copy: 'Make your Access Boston account even more secure by setting up the PingID app. It is faster and easier to use than getting codes via text, email or phone! Directions are [here](https://www.boston.gov/access-boston-portal-help#pingid-app-instructions)'
   alert: true
-  type: 'warn'
+  type: 'info'
 categories:
   - title: Applications
     show_request_access_link: false

diff --git a/services-js/access-boston/src/client/common/AccessBostonHeader.tsx b/services-js/access-boston/src/client/common/AccessBostonHeader.tsx
@@ -5,7 +5,12 @@ import { Component } from 'react';
 
 import Link from 'next/link';
 
-import { CHARLES_BLUE, SANS, WHITE } from '@cityofboston/react-fleet';
+import {
+  CHARLES_BLUE,
+  SANS,
+  WHITE,
+  MEDIA_SMALL_MAX,
+} from '@cityofboston/react-fleet';
 
 import { Account } from '../graphql/fetch-account';
 import RedirectForm from '../RedirectForm';
@@ -83,4 +88,8 @@ const ACCESS_BOSTON_TITLE_STYLE = css({
   textTransform: 'uppercase',
   fontSize: '1.25rem',
   fontWeight: 'bold',
+
+  [MEDIA_SMALL_MAX]: {
+    fontSize: '1.00rem',
+  },
 });
diff --git a/services-js/access-boston/src/client/graphql/fetch-account-and-apps.ts b/services-js/access-boston/src/client/graphql/fetch-account-and-apps.ts
@@ -29,6 +29,7 @@ const QUERY = gql`
       label
       pretext
       text
+      type
     }
 
     apps {

diff --git a/services-js/access-boston/src/client/graphql/queries.ts b/services-js/access-boston/src/client/graphql/queries.ts
@@ -75,6 +75,7 @@ export interface FetchAccountAndApps_notice {
   label: string;
   pretext: string;
   text: string;
+  type: string;
 }
 
 export interface FetchAccountAndApps_apps_categories_apps {

diff --git a/services-js/access-boston/src/lib/AppsRegistry.ts b/services-js/access-boston/src/lib/AppsRegistry.ts
@@ -4,6 +4,8 @@ export interface Notice {
   label: string;
   pretext: string;
   text: string;
+  // type: 'info' | 'warn' | 'error' | 'success' | string | undefined | null;
+  type: string;
 }
 
 export interface AppsCategory {
@@ -31,10 +33,12 @@ export class NoticeClass implements Notice {
   label: string = '';
   pretext: string = '';
   text: string = '';
+  type: string = 'info';
 
-  constructor(opts: { label?: any; pretext?: any; text?: any }) {
+  constructor(opts: { label?: any; pretext?: any; text?: any; type?: string }) {
     (this.label = opts.label ? opts.label : ''),
       (this.pretext = opts.pretext ? opts.pretext : ''),
+      (this.type = opts.type ? opts.type : 'info'),
       (this.text = opts.text ? opts.text : '');
   }
 }

diff --git a/services-js/access-boston/src/pages/gen-components.tsx b/services-js/access-boston/src/pages/gen-components.tsx
@@ -140,7 +140,7 @@ export const NOTICE_WRAPPER = css(`
       line-height: 24px;
       font-size: 16px;
       color: ${CHARLES_BLUE};
-      // padding-top: 0.25rem;
+      padding-top: 0.25rem;
 
       label {
         text-transform: uppercase;

diff --git a/services-js/access-boston/src/pages/index.tsx b/services-js/access-boston/src/pages/index.tsx
@@ -127,7 +127,9 @@ export default class IndexPage extends React.Component<Props> {
               <div className={`bg__warn`}>
                 <div className="b-c">
                   <div className="g p-v500 banner-copy-wrapper daysUntilMfa">
-                    <div className="banner__icon-col">{barnnerElem()}</div>
+                    <div className="banner__icon-col">
+                      {barnnerElem('warn')}
+                    </div>
                     <div className="banner__copy-col">
                       <label>Account Notice</label>
                       <div className="banner__copy-mfa-reg">

diff --git a/services-js/access-boston/src/server/graphql/schema.ts b/services-js/access-boston/src/server/graphql/schema.ts
@@ -117,6 +117,7 @@ export interface Notice {
   label: string;
   pretext: string;
   text: string;
+  type: string;
 }
 
 // This file is built by the "generate-graphql-schema" script from
@@ -144,6 +145,7 @@ const queryRootResolvers: QueryRootResolvers = {
       label: notice['label'],
       pretext: notice['pretext'],
       text: notice['text'],
+      type: notice['type'] ? notice['type'] : 'info',
     };
   },
 

diff --git a/services-js/access-boston/src/stories/IndexPage.stories.tsx b/services-js/access-boston/src/stories/IndexPage.stories.tsx
@@ -43,7 +43,7 @@ storiesOf('IndexPage', module)
       notice={new NoticeClass({})}
     />
   ))
-  .add('change password success', () => (
+  .add('FlashMessage: change password success', () => (
     <IndexPage
       account={ACCOUNT}
       apps={APPS}

diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -45,7 +45,7 @@ exports[`Storyshots AccessBostonHeader default 1`] = `
   className="p-a200 css-1yqn408"
 >
   <h1
-    className="css-e3scnp"
+    className="css-1yejkau"
   >
     <a
       href="/"
@@ -100,7 +100,7 @@ exports[`Storyshots ChangePasswordPage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -540,7 +540,7 @@ exports[`Storyshots ChangePasswordPage first time registration 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -983,7 +983,7 @@ exports[`Storyshots ChangePasswordPage first time registration w/ temp password
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -1431,7 +1431,7 @@ exports[`Storyshots ChangePasswordPage network error 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -1926,7 +1926,7 @@ exports[`Storyshots ChangePasswordPage session error 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -2399,7 +2399,7 @@ exports[`Storyshots ChangePasswordPage submitting 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -2861,7 +2861,7 @@ exports[`Storyshots Common/AppWrapper default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -4111,7 +4111,7 @@ exports[`Storyshots DonePage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -4208,7 +4208,7 @@ exports[`Storyshots ForgotPasswordPage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       Access Boston
     </h1>
@@ -4522,7 +4522,7 @@ Array [
       className="p-a200 css-1yqn408"
     >
       <h1
-        className="css-e3scnp"
+        className="css-1yejkau"
       >
         Access Boston
       </h1>
@@ -4881,7 +4881,7 @@ Array [
       className="p-a200 css-1yqn408"
     >
       <h1
-        className="css-e3scnp"
+        className="css-1yejkau"
       >
         Access Boston
       </h1>
@@ -5228,7 +5228,7 @@ exports[`Storyshots ForgotPasswordPage success 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       Access Boston
     </h1>
@@ -5314,7 +5314,7 @@ exports[`Storyshots GroupManagementPage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -7520,15 +7520,15 @@ exports[`Storyshots GroupManagementPage/SelectedComponent person view 1`] = `
 </section>
 `;
 
-exports[`Storyshots IndexPage change password success 1`] = `
+exports[`Storyshots IndexPage FlashMessage: change password success 1`] = `
 <div
   className="css-1ewon3a-AppWrapper"
 >
   <header
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -7577,7 +7577,7 @@ exports[`Storyshots IndexPage change password success 1`] = `
     className="mn css-1jubgvi"
   >
     <div
-      className="css-5i69v3"
+      className="css-41bvl4"
     >
       <div
         className="bg__success"
@@ -8646,7 +8646,7 @@ exports[`Storyshots IndexPage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -9717,7 +9717,7 @@ exports[`Storyshots IndexPage hasn’t registered MFA 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -9766,7 +9766,7 @@ exports[`Storyshots IndexPage hasn’t registered MFA 1`] = `
     className="mn css-1jubgvi"
   >
     <div
-      className="css-5i69v3"
+      className="css-41bvl4"
     >
       <div
         className="bg__warn"
@@ -12382,7 +12382,7 @@ exports[`Storyshots RegisterMfaPage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -12684,7 +12684,7 @@ exports[`Storyshots RegisterMfaPage email 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -12929,7 +12929,7 @@ exports[`Storyshots RegisterMfaPage modal open 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -14573,7 +14573,7 @@ exports[`Storyshots RegisterPage default 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
@@ -14771,7 +14771,7 @@ exports[`Storyshots RegisterPage password already ok 1`] = `
     className="p-a200 css-1yqn408"
   >
     <h1
-      className="css-e3scnp"
+      className="css-1yejkau"
     >
       <a
         href="/"
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ const QUERY = gql` @@
           label
           pretext
           text
+          type
         }
         apps {
@@ Expand Down @@