Upgrade ui-components

Author: RoyEJohnson

package.json

@@ -12,7 +12,7 @@
     "@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.2",
     "@openstax/open-search-client": "0.1.0-build.7",
     "@openstax/ts-utils": "1.6.0",
-    "@openstax/ui-components": "https://github.com/openstax/ui-components#1.3.4-post2",
+    "@openstax/ui-components": "openstax/ui-components#1.6.4",
     "@sentry/integrations": "^7.54.0",
     "@sentry/react": "^7.54.0",
     "color": "^3.1.2",

src/app/content/components/ConfirmationToast.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ToastData, ToastContainer } from '@openstax/ui-components';
+
+const ctx = React.createContext({});
+const defaultToastData: Omit<ToastData, 'message'> = {
+  title: '',
+  variant: 'success',
+  dismissAfterMs: 4000,
+};
+type ConfirmationToastData = Partial<ToastData> & Pick<ToastData, 'message'>;
+
+function useConfirmationToastContext() {
+  return React.useContext(ctx) as (data: ConfirmationToastData) => void;
+}
+
+function ConfirmationToastProvider({ children }: React.PropsWithChildren<{}>) {
+  const [toastData, setToastData] = React.useState<ToastData[]>([]);
+  const showToast = React.useCallback(
+    (data: ConfirmationToastData) =>
+      setToastData([
+        {
+          ...defaultToastData,
+          ...data,
+          onDismiss() {
+            setToastData([]);
+          },
+        },
+      ]),
+    []
+  );
+
+  return (
+    <ctx.Provider value={showToast}>
+      <ToastContainer toasts={toastData} />
+      {children}
+    </ctx.Provider>
+  );
+}
+
+export { useConfirmationToastContext, ConfirmationToastProvider };

src/app/content/components/Content.tsx

@@ -35,6 +35,7 @@ import PrevNextBar from './PrevNextBar';
 
 import Navigation from './Navigation';
 import Topbar from './Topbar';
+import { ConfirmationToastProvider } from './ConfirmationToast';
 import Wrapper from './Wrapper';
 
 // tslint:disable-next-line:variable-name
@@ -71,6 +72,7 @@ const OuterWrapper = styled.div`
   }
 `;
 
+
 // tslint:disable-next-line:variable-name
 const Content = ({mobileExpanded, book}: {mobileExpanded: boolean; book: Book}) => <Layout>
   <ScrollOffset
@@ -96,18 +98,20 @@ const Content = ({mobileExpanded, book}: {mobileExpanded: boolean; book: Book})
       <OuterWrapper>
         <Topbar />
         <Wrapper>
-          <Navigation />
-          <ContentPane>
-            <ContentNotifications mobileExpanded={mobileExpanded} />
-            <ContentWarning book={book} />
-            <Page>
-              <PrevNextBar />
-              <LabsCTA />
-              <BuyBook />
-            </Page>
-            <Attribution />
-            <Footer />
-          </ContentPane>
+          <ConfirmationToastProvider>
+            <Navigation />
+            <ContentPane>
+              <ContentNotifications mobileExpanded={mobileExpanded} />
+              <ContentWarning book={book} />
+              <Page>
+                <PrevNextBar />
+                <LabsCTA />
+                <BuyBook />
+              </Page>
+              <Attribution />
+              <Footer />
+            </ContentPane>
+          </ConfirmationToastProvider>
         </Wrapper>
       </OuterWrapper>
     </ErrorBoundary>