Migrate Kyper AttentionFilled Icon to MXUI

README.md

@@ -46,8 +46,7 @@ const App = () => {
 | `onShowConnectSuccessSurvey`   | [`AnalyticContextType`](./typings/connectProps.d.ts#L100)  | The connect widget provides a way to let your analytics provider know that the connect success survey was shown. [More details](./docs/ANALYTICS.md#onShowConnectSuccessSurvey)  |
 | `onSubmitConnectSuccessSurvey` | [`AnalyticContextType`](./typings/connectProps.d.ts#L101)  | The connect widget provides a way to submit connect success survey responses using your own analytics provider. [More details](./docs/ANALYTICS.md#onSubmitConnectSuccessSurvey) |                                               |
 | `profiles`                     | [`ProfilesTypes`](./typings/connectProps.d.ts)             | The connect widget uses the profiles to set the initial state of the widget. [More details](./docs/PROFILES.md)                                                                  | See more details                              |
-| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details                              |
-| `showTooSmallDialog`           | `boolean`                                                  | The connect widget can show a warning when the widget size is below the supported 320px.                                                                                         | `true`                                        |
+| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details 
 | `webSocketConnection`          | `object`                                                   | An object containing `isConnected()` function and `webSocketMessages$` observable for real-time updates.                                                                         | `null`                                        |
 | `experimentalFeatures`         | `object`                                                   | An object to enable or disable experimental features like `useWebSockets: true`.                                                                                                 | `null`                                        |
 

src/ConnectWidget.tsx

@@ -7,10 +7,10 @@ import Connect from 'src/Connect'
 import { WidgetDimensionObserver } from 'src/components/app/WidgetDimensionObserver'
 import { initGettextLocaleData } from 'src/utilities/Personalization'
 import { ConnectedTokenProvider } from 'src/ConnectedTokenProvider'
-import { TooSmallDialog } from 'src/components/app/TooSmallDialog'
 import { setLocalizedContent } from 'src/redux/reducers/localizedContentSlice'
 import { WebSocketProvider } from 'src/context/WebSocketContext'
 import './sharedVariables.css'
+import 'src/styles/spacing.css'
 
 interface PostMessageContextType {
   postMessageEventOverrides?: PostMessageEventOverrides
@@ -23,7 +23,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
   onPostMessage = () => {},
   onAnalyticPageview = () => {},
   postMessageEventOverrides,
-  showTooSmallDialog = true,
   webSocketConnection,
   ...props
 }: any) => {
@@ -40,7 +39,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
       <WebSocketProvider value={webSocketConnection}>
         <PostMessageContext.Provider value={{ onPostMessage, postMessageEventOverrides }}>
           <WidgetDimensionObserver heightOffset={0}>
-            {showTooSmallDialog && <TooSmallDialog onAnalyticPageview={onAnalyticPageview} />}
             <Connect onAnalyticPageview={onAnalyticPageview} {...props} />
           </WidgetDimensionObserver>
         </PostMessageContext.Provider>

src/ConnectedTokenProvider.tsx

@@ -99,6 +99,8 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
       styleOverrides: {
         root: {
           '&.MuiFormControlLabel-labelPlacementStart': {
+            // TODO: Remove the custom margins once we are on MXUI v2.
+            marginBottom: '16px',
             marginLeft: 0,
             marginRight: 0,
           },
@@ -127,6 +129,8 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
       },
     },
   },
+  // TODO: Remove this custom spacing scale once we are on MXUI v2.
+  spacing: (factor: number) => `${factor * 8}px`,
 })
 
 interface Props {

src/components/ConfigError.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 36px;
+  text-align: center;
+}
+
+.errorTitle {
+  margin-bottom: var(--spacing-tiny);
+}

src/components/ConfigError.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Text } from '@mxenabled/mxui'
-import { useTokens } from '@kyper/tokenprovider'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Container } from 'src/components/Container'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
+import styles from 'src/components/ConfigError.module.css'
 
 interface ConfigError {
   title: string
@@ -15,13 +14,11 @@ interface ConfigErrorProps {
 }
 
 export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
   return (
     <Container>
-      <div style={styles.container}>
-        <AttentionFilled color="#4D4D4D" size={32} style={styles.errorIcon} />
-        <Text component={'h2'} style={styles.errorTitle} truncate={false} variant="H2">
+      <div className={styles.container}>
+        <Icon fill={true} name="error" size={32} sx={{ mb: 3 }} />
+        <Text className={styles.errorTitle} component="h2" truncate={false} variant="H2">
           {error.title}
         </Text>
         <Text component="p" truncate={false} variant="Paragraph">
@@ -31,21 +28,3 @@ export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
     </Container>
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getStyles = (tokens: any) => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyCcontent: 'center',
-    marginTop: '36px',
-    textAlign: 'center',
-  } as React.CSSProperties,
-  errorTitle: {
-    marginBottom: tokens.Spacing.Tiny,
-  },
-  errorIcon: {
-    marginBottom: tokens.Spacing.Large,
-  },
-})

src/components/ConnectSuccessSurvey.tsx

@@ -1,14 +1,13 @@
 import React, { useState, useImperativeHandle, useContext } from 'react'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Button, TextField } from '@mui/material'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import { AttentionFilled } from '@kyper/icon/AttentionFilled'
-import { useTokens } from '@kyper/tokenprovider'
 
 import { __ } from 'src/utilities/Intl'
 import { ThankYouMessage } from 'src/components/ThankYouMessage'
 import { AnalyticContext } from 'src/Connect'
+import styles from 'src/components/ConnectedSuccessSurvey.module.css'
 
 interface ConnectSuccessSurveyProps {
   handleBack: () => void
@@ -61,9 +60,6 @@ export const ConnectSuccessSurvey = React.forwardRef<
   const [showErrorMessage, setShowErrorMessage] = useState(false)
   const { onSubmitConnectSuccessSurvey } = useContext(AnalyticContext)
 
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
-
   useImperativeHandle(connectSuccessSurveyRef, () => {
     return {
       handleConnectSuccessSurveyBackButton() {
@@ -102,39 +98,40 @@ export const ConnectSuccessSurvey = React.forwardRef<
   }
 
   const currentQuestion = SURVEY_QUESTIONS[currentQuestionIndex]
+  const isLastQuestion = currentQuestionIndex === SURVEY_QUESTIONS.length - 1
 
   return (
     <div>
       {showThankYouMessage ? (
         <ThankYouMessage handleDone={handleDone} />
       ) : (
         <React.Fragment>
-          <div style={styles.surveyQuestion}>
+          <div className={styles.surveyQuestion}>
             <Text component="h2" truncate={false} variant="H2">
               {currentQuestion.question()}
             </Text>
             {currentQuestion.type === 'number' ? (
               <React.Fragment>
                 <ToggleButtonGroup
                   aria-label="Platform"
+                  className={styles.toggleButtonGroup}
                   color="primary"
                   exclusive={true}
                   onChange={(_, newSelected) =>
                     handleToggleButtonChange(currentQuestionIndex, newSelected)
                   }
-                  style={styles.toggleButtonGroup}
                   value={answers[currentQuestionIndex]}
                 >
                   {Object.keys(SURVEY_RATING).map((key) => {
                     return (
                       <ToggleButton
+                        className={styles.toggleButton}
                         key={key}
-                        style={styles.toggleButton}
                         sx={{
-                          color: '#2C64EF',
+                          color: 'primary.main',
                           '&.Mui-selected': {
-                            backgroundColor: '#2C64EF',
-                            color: tokens.TextColor.Light,
+                            backgroundColor: 'primary.main',
+                            color: 'primary.contrastText',
                             boxShadow: 'none',
                           },
                         }}
@@ -145,7 +142,7 @@ export const ConnectSuccessSurvey = React.forwardRef<
                     )
                   })}
                 </ToggleButtonGroup>
-                <div style={styles.boundLabels}>
+                <div className={styles.boundLabels}>
                   <Text bold={true} variant="Small">
                     {__('Strongly disagree')}
                   </Text>
@@ -155,8 +152,8 @@ export const ConnectSuccessSurvey = React.forwardRef<
                 </div>
               </React.Fragment>
             ) : (
-              <div style={styles.textQuestion}>
-                <Text style={styles.textQuestionTitle} variant="Paragraph">
+              <div className={styles.textQuestion}>
+                <Text className={styles.textQuestionTitle} variant="Paragraph">
                   {__('Please let us know how we can improve.')}
                 </Text>
                 <TextField
@@ -169,104 +166,27 @@ export const ConnectSuccessSurvey = React.forwardRef<
               </div>
             )}
             {showErrorMessage && (
-              <div style={styles.errorMessage}>
-                <AttentionFilled color="#E32727" size={16} style={styles.errorIcon} />
-                <Text color="#E32727" sx={{ fontSize: '12px' }} variant="XSmall">
+              <div className={styles.errorMessage}>
+                <Icon fill={true} name="error" size={16} sx={{ color: 'error.main', mr: 0.5 }} />
+                <Text color="error.main" sx={{ fontSize: '12px' }} variant="XSmall">
                   {__('Please select an option before continuing.')}
                 </Text>
               </div>
             )}
-            {currentQuestionIndex === SURVEY_QUESTIONS.length - 1 ? (
-              <Button
-                fullWidth={true}
-                onClick={sendFeedback}
-                style={styles.button}
-                variant="contained"
-              >
-                {__('Send feedback')}
-              </Button>
-            ) : (
-              <Button
-                fullWidth={true}
-                onClick={handleContinue}
-                style={styles.button}
-                variant="contained"
-              >
-                {__('Continue')}
-              </Button>
-            )}
+
+            <Button
+              fullWidth={true}
+              onClick={isLastQuestion ? sendFeedback : handleContinue}
+              sx={{ mt: 4 }}
+              variant="contained"
+            >
+              {isLastQuestion ? __('Send feedback') : __('Continue')}
+            </Button>
           </div>
         </React.Fragment>
       )}
     </div>
   )
 })
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getStyles = (tokens: any) => ({
-  checkMarkIcon: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginBottom: tokens.Spacing.XLarge,
-  },
-  toggleButtonGroup: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: '4px',
-    marginTop: tokens.Spacing.XLarge,
-    marginBottom: '10px',
-  },
-  toggleButton: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: '1 0 0',
-    height: '48px',
-    padding: '12px',
-    border: '1px solid #8994A2',
-    fontWeight: tokens.FontWeight.Semibold,
-  },
-  surveyQuestion: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  } as React.CSSProperties,
-  thankYouContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  boundLabels: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    marginBottom: '10px',
-  },
-  button: {
-    marginTop: tokens.Spacing.XLarge,
-  },
-  errorMessage: {
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-  },
-  errorIcon: {
-    marginRight: tokens.Spacing.Tiny,
-  },
-  textQuestion: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    marginTop: tokens.Spacing.Large,
-  } as React.CSSProperties,
-  textQuestionTitle: {
-    marginBottom: tokens.Spacing.Medium,
-  },
-})
-
 ConnectSuccessSurvey.displayName = 'ConnectSuccessSurvey'

src/components/ConnectedSuccessSurvey.module.css

@@ -0,0 +1,53 @@
+.surveyQuestion {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleButtonGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-radius: 4px;
+  margin-top: var(--spacing-xlarge);
+  margin-bottom: 10px;
+}
+
+.toggleButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  height: 48px;
+  padding: var(--spacing-small);
+  border: 1px solid var(--mui-palette-divider);
+  font-weight: 600;
+  color: var(--mui-palette-primary-main);
+}
+
+.boundLabels {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.errorMessage {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.textQuestion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: var(--spacing-large);
+}
+
+.textQuestionTitle {
+  margin-bottom: var(--spacing-medium);
+}