WIP: notifications strategy

build-tools/utils/pluralize.js

@@ -30,6 +30,7 @@ const pluralizationMap = {
   Drawer: 'Drawers',
   ErrorBoundary: 'ErrorBoundaries',
   ExpandableSection: 'ExpandableSections',
+  FeaturePrompt: 'FeaturePrompts',
   FileDropzone: 'FileDropzones',
   FileInput: 'FileInputs',
   FileTokenGroup: 'FileTokenGroups',

package.json

@@ -170,12 +170,12 @@
     {
       "path": "lib/components/internal/plugins/index.js",
       "brotli": false,
-      "limit": "15 kB"
+      "limit": "16 kB"
     },
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1150 kB",
+      "limit": "1250 kB",
       "ignore": "react-dom"
     }
   ],

pages/app-layout-toolbar/with-content-layout.page.tsx

@@ -43,7 +43,7 @@ export default function WithDrawers() {
   const [splitPanelOpen, setSplitPanelOpen] = useState(false);
   const pageLayoutRef = useRef<AppLayoutToolbarProps.Ref>(null);
 
-  const drawersProps: Pick<AppLayoutToolbarProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
+  const drawersProps: Pick<AppLayoutToolbarProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> = {
     activeDrawerId: activeDrawerId,
     drawers: [
       {

pages/app/app-context.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import mapValues from 'lodash/mapValues';
 
@@ -23,6 +23,8 @@ export interface AppContextType<T = unknown> {
   urlParams: AppUrlParams & T;
   setUrlParams: (newParams: Partial<AppUrlParams & T>) => void;
   setMode: (newMode: Mode) => void;
+  header: null | React.ReactNode;
+  setHeader: (header: React.ReactNode) => void;
 }
 
 const appContextDefaults: AppContextType = {
@@ -37,6 +39,8 @@ const appContextDefaults: AppContextType = {
   },
   setMode: () => {},
   setUrlParams: () => {},
+  header: null,
+  setHeader: () => {},
 };
 
 const AppContext = createContext<AppContextType>(appContextDefaults);
@@ -100,8 +104,12 @@ export function AppContextProvider({ children }: { children: React.ReactNode })
     }
   }
 
+  const [header, setHeader] = useState<React.ReactNode>(null);
+
   return (
-    <AppContext.Provider value={{ mode, pageId, urlParams, setUrlParams: setUrlParams, setMode: updateMode }}>
+    <AppContext.Provider
+      value={{ mode, pageId, urlParams, setUrlParams: setUrlParams, setMode: updateMode, header, setHeader }}
+    >
       {children}
     </AppContext.Provider>
   );

pages/app/components/header.tsx

@@ -10,13 +10,17 @@ import ThemeSwitcher from './theme-switcher';
 import styles from './header.scss';
 
 export default function Header({ sticky }: { sticky?: boolean }) {
-  const { mode } = useContext(AppContext);
+  const { mode, header: customHeader } = useContext(AppContext);
   return (
     <>
       {/* #h selector for compatibility with global navigation */}
-      <header id="h" className={clsx(styles.header, sticky && styles['header-sticky'])}>
-        <Link to={`/${mode}/`}>Demo Assets</Link>
-        <ThemeSwitcher />
+      <header id="h" className={clsx(!customHeader && styles.header, sticky && styles['header-sticky'])}>
+        {customHeader ?? (
+          <>
+            <Link to={`/${mode}/`}>Demo Assets</Link>
+            <ThemeSwitcher />
+          </>
+        )}
       </header>
     </>
   );

pages/app/index.tsx

@@ -51,8 +51,10 @@ function isAppLayoutPage(pageId?: string) {
     'funnel-analytics/static-single-page-flow',
     'funnel-analytics/static-multi-page-flow',
     'charts.test',
+    'notifications-strategy',
     'error-boundary/demo-async-load',
     'error-boundary/demo-components',
+    'notifications-strategy',
   ];
   return pageId !== undefined && appLayoutPages.some(match => pageId.includes(match));
 }

pages/app/templates.tsx

@@ -41,7 +41,9 @@ export function SimplePage({ title, subtitle, settings, children, screenshotArea
             <SpaceBetween size="m">{children}</SpaceBetween>
           </ScreenshotArea>
         ) : (
-          <Box>{children}</Box>
+          <Box>
+            <SpaceBetween size="m">{children}</SpaceBetween>
+          </Box>
         )}
       </SpaceBetween>
     </Box>