From 05918bd251993851111bf80a5190c5b4ede1ddb8 Mon Sep 17 00:00:00 2001 From: "Phillip B. Kelly" Date: Fri, 31 Jan 2025 17:12:15 -0500 Subject: [PATCH] DIG-5600: Banner Design for ABP wip5 --- services-js/access-boston/fixtures/apps.yaml | 2 +- .../src/client/common/AccessBostonHeader.tsx | 11 +++- .../client/graphql/fetch-account-and-apps.ts | 1 + .../src/client/graphql/queries.ts | 1 + .../access-boston/src/lib/AppsRegistry.ts | 6 ++- .../src/pages/gen-components.tsx | 2 +- services-js/access-boston/src/pages/index.tsx | 4 +- .../src/server/graphql/schema.ts | 2 + .../src/stories/IndexPage.stories.tsx | 2 +- .../__snapshots__/Storyshots.test.ts.snap | 50 +++++++++---------- 10 files changed, 50 insertions(+), 31 deletions(-) diff --git a/services-js/access-boston/fixtures/apps.yaml b/services-js/access-boston/fixtures/apps.yaml index 2f6795499..d86d3a71b 100644 --- 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 index 64cc35643..f115e4345 100644 --- 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 index dfdc0a9ae..7f51e41f8 100644 --- 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 index a3f60101d..c75bd1738 100644 --- 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 index ffd58768b..c0ef592f1 100644 --- 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 index bf6d07a59..952a758f6 100644 --- 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 index fbb9d002f..c0d05e1b1 100644 --- 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 {
-
{barnnerElem()}
+
+ {barnnerElem('warn')} +
diff --git a/services-js/access-boston/src/server/graphql/schema.ts b/services-js/access-boston/src/server/graphql/schema.ts index 0f6fca2c8..3f51277be 100644 --- 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 index c9c3aacbd..0381e5b7e 100644 --- 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', () => (

Access Boston

@@ -4522,7 +4522,7 @@ Array [ className="p-a200 css-1yqn408" >

Access Boston

@@ -4881,7 +4881,7 @@ Array [ className="p-a200 css-1yqn408" >

Access Boston

@@ -5228,7 +5228,7 @@ exports[`Storyshots ForgotPasswordPage success 1`] = ` className="p-a200 css-1yqn408" >

Access Boston

@@ -5314,7 +5314,7 @@ exports[`Storyshots GroupManagementPage default 1`] = ` className="p-a200 css-1yqn408" >

`; -exports[`Storyshots IndexPage change password success 1`] = ` +exports[`Storyshots IndexPage FlashMessage: change password success 1`] = `