♻️(frontend) replace Grommet Text with custom Text component

We replace the Grommet Text component with our own Text component based on the Cunnigham design system.
openfun · Sep 26, 2023 · f951fae · f951fae
1 parent 0116821
commit f951fae
Show file tree

Hide file tree

Showing 124 changed files with 581 additions and 896 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Replace grommet Heading (#2410)
+- Replace grommet Text (#2427)
 - Upgrade to python 3.11
 - Upgrade channels and channels-redis to version 4
 

diff --git a/...tend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx b/...tend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx
@@ -1,12 +1,7 @@
 import { Box, Button, Grid } from 'grommet';
 import { AddCircle } from 'grommet-icons';
 import { Nullable } from 'lib-common';
-import {
-  Classroom,
-  ClassroomSVG,
-  ContentCard,
-  TextTruncated,
-} from 'lib-components';
+import { Classroom, ClassroomSVG, ContentCard, Text } from 'lib-components';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -55,9 +50,14 @@ const SelectContentCard = ({
       title={content.title || ''}
     >
       {content.description && (
-        <TextTruncated size="0.688rem" color="grey" title={content.description}>
+        <Text
+          size="small"
+          truncate={5}
+          color="grey"
+          title={content.description}
+        >
           {content.description}
-        </TextTruncated>
+        </Text>
       )}
     </ContentCard>
   );

diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx
@@ -1,7 +1,7 @@
 import { Select } from '@openfun/cunningham-react';
-import { Box, Pagination, Paragraph, Text } from 'grommet';
+import { Box, Pagination, Paragraph } from 'grommet';
 import { Maybe } from 'lib-common';
-import { FileDepository, Heading, Loader } from 'lib-components';
+import { FileDepository, Heading, Loader, Text } from 'lib-components';
 import React, { FocusEvent, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 

diff --git a/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx b/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx
@@ -1,6 +1,7 @@
-import { Box, Button, Paragraph, Text } from 'grommet';
+import { Box, Button, Paragraph } from 'grommet';
 import {
   PlusSVG,
+  Text,
   UploadManagerStatus,
   UploadableObjectProgress,
   formatSizeErrorScale,
@@ -161,7 +162,9 @@ export const UploadFiles = () => {
                 <UploadableObjectProgress
                   progress={uploadManagerState[state.objectId].progress}
                 />
-                {intl.formatMessage(messages.uploadingFile)}
+                <Text size="small">
+                  {intl.formatMessage(messages.uploadingFile)}
+                </Text>
               </Box>
             ))}
           </Box>
@@ -182,10 +185,10 @@ export const UploadFiles = () => {
                 </Box>
                 <Box direction="row">
                   <Box justify="start" flex="shrink">
-                    <Text alignSelf="center">{bytesToSize(file.size)}</Text>
+                    <Text textAlign="center">{bytesToSize(file.size)}</Text>
                   </Box>
                   <Box justify="end" flex>
-                    <Text alignSelf="end">
+                    <Text textAlign="end">
                       {DateTime.now().toFormat('dd/MM/yyyy')}
                     </Text>
                   </Box>

diff --git a/...rontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx b/...rontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx
@@ -1,6 +1,11 @@
-import { Anchor, Box, Text } from 'grommet';
+import { Anchor, Box } from 'grommet';
 import { Breakpoints } from 'lib-common';
-import { DepositedFile, truncateFilename, useResponsive } from 'lib-components';
+import {
+  DepositedFile,
+  Text,
+  truncateFilename,
+  useResponsive,
+} from 'lib-components';
 import { DateTime } from 'luxon';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -62,17 +67,13 @@ export const DepositedFileRow = ({ file }: DepositedFileProps) => {
       pad="medium"
       round="small"
     >
-      <Box direction="row" fill>
+      <Box direction="row" fill align="center">
         <Box justify="start" gap="small" flex>
-          <Text size="medium">{file.author_name}</Text>
+          <Text weight="medium">{file.author_name}</Text>
         </Box>
         {uploadedOn && (
           <Box justify="start" flex="shrink">
-            <Text
-              size="small"
-              wordBreak="keep-all"
-              margin={{ right: 'xxsmall' }}
-            >
+            <Text size="small" className="mr-t">
               {uploadedOnDate}&nbsp;{uploadedOnTime}
             </Text>
           </Box>
@@ -105,7 +106,7 @@ export const DepositedFileRow = ({ file }: DepositedFileProps) => {
 
       <Box direction="row" fill>
         <Box justify="start" flex>
-          <Text title={file.filename} weight={file.read ? 'normal' : 'bolder'}>
+          <Text title={file.filename} weight={file.read ? 'regular' : 'bold'}>
             {isSmallerBreakpoint(breakpoint, Breakpoints.large)
               ? truncateFilename(file.filename, 40)
               : breakpoint === 'large'

diff --git a/...ontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx b/...ontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Grid } from 'grommet';
 import { AddCircle, DocumentStore } from 'grommet-icons';
 import { Nullable } from 'lib-common';
-import { ContentCard, FileDepository, TextTruncated } from 'lib-components';
+import { ContentCard, FileDepository, Text } from 'lib-components';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -52,9 +52,14 @@ const SelectContentCard = ({
       title={content.title || ''}
     >
       {content.description && (
-        <TextTruncated size="0.688rem" color="grey" title={content.description}>
+        <Text
+          size="small"
+          truncate={5}
+          color="grey"
+          title={content.description}
+        >
           {content.description}
-        </TextTruncated>
+        </Text>
       )}
     </ContentCard>
   );

diff --git a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx
@@ -1,7 +1,7 @@
 import { Input } from '@openfun/cunningham-react';
-import { Box, Button, Text } from 'grommet';
+import { Box, Button } from 'grommet';
 import { Breakpoints } from 'lib-common';
-import { WhiteCard, WizardLayout, useResponsive } from 'lib-components';
+import { Text, WhiteCard, WizardLayout, useResponsive } from 'lib-components';
 import {
   LanguageSelector,
   MARKDOWN_EDITOR_ROUTE,
@@ -84,12 +84,7 @@ export const MarkdownWizard = ({ markdownDocumentId }: MarkdownWizardProps) => {
               : 'xlarge',
           }}
         >
-          <Text
-            color="blue-active"
-            margin={{ bottom: 'small' }}
-            size="1rem"
-            textAlign="center"
-          >
+          <Text className="mb-t" textAlign="center">
             {intl.formatMessage(messages.descriptionText)}
           </Text>
 

diff --git a/src/frontend/apps/lti_site/components/DashboardDocument/DashboardDocumentTitleForm/index.tsx b/src/frontend/apps/lti_site/components/DashboardDocument/DashboardDocumentTitleForm/index.tsx
@@ -1,8 +1,9 @@
 import { Input } from '@openfun/cunningham-react';
-import { Button, Form, Text } from 'grommet';
+import { Button, Form } from 'grommet';
 import { Maybe } from 'lib-common';
 import {
   Document,
+  Text,
   modelName,
   updateResource,
   useDocument,
@@ -89,7 +90,11 @@ export const DashboardDocumentTitleForm = ({
           margin={{ top: 'small' }}
         />
         {udpated && (
-          <Text margin="small" color="status-ok">
+          <Text
+            color="var(--c--theme--colors--success-500)"
+            className="ml-s"
+            weight="bold"
+          >
             {intl.formatMessage(messages.updateSuccessful)}
           </Text>
         )}

diff --git a/src/frontend/apps/lti_site/components/MutationFieldError/index.tsx b/src/frontend/apps/lti_site/components/MutationFieldError/index.tsx
@@ -1,5 +1,4 @@
-import { Text } from 'grommet';
-import { IFetchResponseError } from 'lib-components';
+import { IFetchResponseError, Text } from 'lib-components';
 import React from 'react';
 
 interface MutationFieldErrorProps<T> {
@@ -18,7 +17,7 @@ export const MutationFieldError = <T,>({
         .map((errorObject, index) => (
           <React.Fragment key={index}>
             {errorObject[fieldName]?.map((message) => (
-              <Text color="status-error" key={message}>
+              <Text color="clr-danger-300" key={message}>
                 {message}
               </Text>
             ))}

diff --git a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx
@@ -1,5 +1,5 @@
 import { Input } from '@openfun/cunningham-react';
-import { Box, Button, Spinner, Text } from 'grommet';
+import { Box, Button, Spinner } from 'grommet';
 import { AddCircle, Trash } from 'grommet-icons';
 import {
   CopyClipboard,
@@ -8,6 +8,7 @@ import {
   ErrorMessage,
   List,
   Playlist,
+  Text,
   Video,
 } from 'lib-components';
 import React, { Fragment, useState } from 'react';
@@ -130,9 +131,10 @@ export const PlaylistPortabilityList = ({
               direction="row-responsive"
               gap="medium"
               align="center"
+              pad="small"
             >
               <Text weight="bold">{reachableFromPlaylist.title}</Text>
-              <Text size="small" color="dark-4">
+              <Text size="small" color="clr-primary-800">
                 {reachableFromPlaylist.id}
               </Text>
             </Box>
@@ -193,7 +195,7 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => {
     content = (
       <React.Fragment>
         <Box align="center" direction="row" pad={{ top: 'small' }}>
-          <Text role="heading" margin="small">
+          <Text role="heading" className="m-s">
             <CopyClipboard
               copyId={`playlist-${playlist?.id}`}
               text={
@@ -252,7 +254,7 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => {
             background="status-warning"
             width="large"
           >
-            <Text>
+            <Text color="clr-primary-800" size="large">
               <FormattedMessage {...messages.shareWithPlaylistDetails} />
             </Text>
           </Box>

diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx
@@ -5,7 +5,7 @@ import {
   ContentCard,
   Document,
   PlaySVG,
-  TextTruncated,
+  Text,
   Video,
   WebinarSVG,
   videoSize,
@@ -106,9 +106,14 @@ const SelectContentCard = ({
       title={content.title || ''}
     >
       {content.description && (
-        <TextTruncated size="0.688rem" color="grey" title={content.description}>
+        <Text
+          size="small"
+          truncate={5}
+          color="grey"
+          title={content.description}
+        >
           {content.description}
-        </TextTruncated>
+        </Text>
       )}
     </ContentCard>
   );

diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Grommet, Tab, Tabs, Text } from 'grommet';
+import { Box, Grommet, Tab, Tabs } from 'grommet';
 import { deepMerge } from 'grommet/utils';
 import { Document as DocumentIcon } from 'grommet-icons';
 import { theme as baseTheme } from 'lib-common';
@@ -9,6 +9,7 @@ import {
   Loader,
   PlaySVG,
   Playlist,
+  Text,
   Video,
   WebinarSVG,
   appNames,
@@ -57,12 +58,7 @@ export interface RichTabTitleProps {
 export const RichTabTitle = ({ icon, label }: RichTabTitleProps) => (
   <Box direction="row" align="center">
     {icon}
-    <Text
-      size="0.938rem"
-      color="blue-active"
-      margin={{ left: 'xsmall' }}
-      weight="bold"
-    >
+    <Text className="ml-t" weight="bold">
       {label}
     </Text>
   </Box>

diff --git a/src/frontend/apps/lti_site/components/VideoWizard/index.tsx b/src/frontend/apps/lti_site/components/VideoWizard/index.tsx
@@ -1,7 +1,8 @@
-import { Box, Button, Text } from 'grommet';
+import { Box, Button } from 'grommet';
 import { Breakpoints } from 'lib-common';
 import {
   ErrorComponents,
+  Text,
   WhiteCard,
   WizardLayout,
   builderDashboardRoute,
@@ -91,7 +92,7 @@ const VideoWizard = () => {
                     : 'xlarge',
                 }}
               >
-                <Text color="blue-active" size="1rem" textAlign="center">
+                <Text textAlign="center">
                   {intl.formatMessage(messages.descriptionText)}
                 </Text>
 

diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/LoginForm.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/LoginForm.tsx
@@ -1,7 +1,7 @@
 import { Field, Input } from '@openfun/cunningham-react';
-import { Box, Text } from 'grommet';
+import { Box } from 'grommet';
 import { Alert } from 'grommet-icons';
-import { ButtonLoader } from 'lib-components';
+import { ButtonLoader, Text } from 'lib-components';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -110,15 +110,11 @@ export const LoginForm = () => {
           text={error?.password?.join(' ')}
         />
       </Field>
-      <Link to={routes.PASSWORD_RESET.path}>
-        <Text
-          color="blue-active"
-          weight="normal"
-          style={{ textDecoration: 'underline' }}
-          size="xsmall"
-        >
-          {intl.formatMessage(messages.passwordLost)}
-        </Text>
+      <Link
+        to={routes.PASSWORD_RESET.path}
+        style={{ color: 'var(--c--theme--colors--primary-500)' }}
+      >
+        <Text size="small">{intl.formatMessage(messages.passwordLost)}</Text>
       </Link>
       {error?.detail && (
         <Box
@@ -129,9 +125,7 @@ export const LoginForm = () => {
           gap="small"
         >
           <Alert size="medium" color="#df8c00" />
-          <Text weight="bold" size="small">
-            {error?.detail}
-          </Text>
+          <Text weight="bold">{error?.detail}</Text>
         </Box>
       )}
       <Box flex={false} margin={{ top: 'medium' }}>