chore: modal attempt

packages/gatsby-theme-docs/gatsby-node.mjs

@@ -567,7 +567,6 @@ export const onCreateWebpackConfig = (
     },
     {
       test: /\.svg$/,
-      include: /icons/,
       use: [
         {
           loader: require.resolve('@svgr/webpack'),

packages/gatsby-theme-docs/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@commercetools-docs/ui-kit": "21.1.4",
+    "@commercetools-frontend/application-components": "21.23.9",
     "@commercetools-uikit/card": "15.3.0",
     "@commercetools-uikit/checkbox-input": "15.3.0",
     "@commercetools-uikit/design-system": "15.3.0",

packages/gatsby-theme-docs/src/layouts/internals/layout-main.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { designSystem, MediaQuery } from '@commercetools-docs/ui-kit';
+import { PortalsContainer } from '@commercetools-frontend/application-components';
 import { Overlay, TopMenu } from '../../components';
 
 const Container = styled.main`
@@ -33,6 +34,7 @@ const LayoutMain = (props) => (
     autoFocus
     tabIndex={0}
   >
+    <PortalsContainer />
     {props.isTopMenuOpen ? (
       // GIVEN that the viewport is equal or less than laptop (sidebar not visible)
       // AND the top menu has been opened

packages/gatsby-theme-learning/gatsby-ssr.js

@@ -0,0 +1,18 @@
+import ConfigContext from './src/components/config-context';
+
+export const wrapRootElement = ({ element }, pluginOptions) => {
+  return (
+    <ConfigContext.Provider
+      value={{
+        learnApiBaseUrl: pluginOptions.learnApiBaseUrl,
+        auth0Domain: pluginOptions.auth0Domain,
+        features: {
+          courseStatusIndicator:
+            pluginOptions?.features?.courseStatusIndicator || false,
+        },
+      }}
+    >
+      {element}
+    </ConfigContext.Provider>
+  );
+};

packages/gatsby-theme-learning/package.json

@@ -16,6 +16,7 @@
     "@auth0/auth0-react": "2.0.1",
     "@commercetools-docs/gatsby-theme-sso-ui-kit": "21.1.4",
     "@commercetools-docs/ui-kit": "21.1.4",
+    "@commercetools-frontend/application-components": "21.23.9",
     "@commercetools-uikit/avatar": "15.3.0",
     "@commercetools-uikit/checkbox-input": "15.3.0",
     "@commercetools-uikit/design-system": "15.3.0",
@@ -26,6 +27,7 @@
     "@commercetools-uikit/radio-input": "15.3.0",
     "@commercetools-uikit/secondary-button": "15.3.0",
     "@commercetools-uikit/spacings": "15.3.0",
+    "@commercetools-uikit/text-field": "15.3.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "1.6.22",

packages/gatsby-theme-learning/src/components/profile-modal.tsx

@@ -0,0 +1,31 @@
+import {
+  FormDialog,
+  useModalState,
+} from '@commercetools-frontend/application-components';
+import TextField from '@commercetools-uikit/text-field';
+
+const ProfileModal = () => {
+  const formModalState = useModalState(true);
+  return (
+    <FormDialog
+      title="Update email"
+      isOpen={formModalState.isModalOpen}
+      onClose={formModalState.closeModal}
+      isPrimaryButtonDisabled={true}
+      onSecondaryButtonClick={() => null}
+      onPrimaryButtonClick={() => null}
+    >
+      <TextField
+        name="email"
+        title="Email"
+        isRequired={true}
+        value={'[email protected]'}
+        errors={undefined}
+        touched={true}
+        onChange={() => null}
+        onBlur={() => null}
+      />
+    </FormDialog>
+  );
+};
+export default ProfileModal;

packages/gatsby-theme-learning/src/components/quiz.tsx

@@ -10,6 +10,7 @@ import { useSubmitAttempt } from '../hooks/use-submit-attempt';
 import QuizForm from './quiz-form';
 import type { PassthroughData, SubmissionAttempt } from './quiz.types';
 import { canUseDOM, getQuizOutcome, isTestUserEmail } from './quiz.utils';
+import ProfileModal from './profile-modal';
 
 export const OUTCOME_CORRECT = 'correct';
 export const OUTCOME_INCORRECT = 'incorrect';
@@ -240,6 +241,7 @@ const Quiz = (props: QuizProps) => {
       data-test-id="quiz-wrapper"
       outcome={getQuizOutcome(formAttemptData, isLoading)}
     >
+      <ProfileModal />
       <QuizArea />
     </QuizWrapper>
   );