Merge pull request #11598 from strapi/typography-i18n-settings

[DS] Typography i18n settings

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js

@@ -53,7 +53,6 @@ const ListView = () => {
     reducer,
     initialState
   );
-  console.log(webhooks);
   const { notifyStatus } = useNotifyAT();
 
   useFocusWhenNavigate();

packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewCopyLocale/index.js

@@ -7,7 +7,6 @@ import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Select, Option } from '@strapi/design-system/Select';
 import { Button } from '@strapi/design-system/Button';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
@@ -28,6 +27,10 @@ const StyledTypography = styled(Typography)`
   }
 `;
 
+const CenteredTypography = styled(Typography)`
+  text-align: center;
+`;
+
 const CMEditViewCopyLocale = props => {
   if (!props.localizations.length) {
     return null;
@@ -118,13 +121,13 @@ const Content = ({ appLocales, currentLocale, localizations, readPermissions })
           <DialogBody icon={<ExclamationMarkCircle />}>
             <Stack size={2}>
               <Flex justifyContent="center">
-                <Text id="confirm-description" style={{ textAlign: 'center' }}>
+                <CenteredTypography id="confirm-description">
                   {formatMessage({
                     id: getTrad('CMEditViewCopyLocale.ModalConfirm.content'),
                     defaultMessage:
                       'Your current content will be erased and filled by the content of the selected locale:',
                   })}
-                </Text>
+                </CenteredTypography>
               </Flex>
               <Box>
                 <Select

packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/index.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { Box } from '@strapi/design-system/Box';
 import { Divider } from '@strapi/design-system/Divider';
 import { Select, Option } from '@strapi/design-system/Select';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -92,9 +92,9 @@ const CMEditViewLocalePicker = ({
 
   return (
     <Box paddingTop={6}>
-      <TableLabel textColor="neutral600">
+      <Typography variant="sigma" textColor="neutral600">
         {formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Internationalization' })}
-      </TableLabel>
+      </Typography>
       <Box paddingTop={2} paddingBottom={6}>
         <Divider />
       </Box>

packages/plugins/i18n/admin/src/components/CMListViewInjectedComponents/DeleteModalAdditionalInfos/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../utils';
 import useHasI18n from '../../../hooks/useHasI18n';
 
@@ -13,7 +13,7 @@ const DeleteModalAdditionalInfos = () => {
   }
 
   return (
-    <Text textColor="danger500">
+    <Typography textColor="danger500">
       {formatMessage(
         {
           id: getTrad('Settings.list.actions.deleteAdditionalInfos'),
@@ -22,13 +22,13 @@ const DeleteModalAdditionalInfos = () => {
         },
         {
           em: chunks => (
-            <Text textColor="danger500" bold>
+            <Typography fontWeight="semiBold" textColor="danger500">
               {chunks}
-            </Text>
+            </Typography>
           ),
         }
       )}
-    </Text>
+    </Typography>
   );
 };
 

packages/plugins/i18n/admin/src/components/CheckboxConfirmation/index.js

@@ -1,15 +1,20 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import { getTrad } from '../../utils';
 
+const TextAlignTypography = styled(Typography)`
+  text-align: center;
+`;
+
 const CheckboxConfirmation = ({ description, isCreating, intlLabel, name, onChange, value }) => {
   const { formatMessage } = useIntl();
   const [isOpen, setIsOpen] = useState(false);
@@ -63,22 +68,22 @@ const CheckboxConfirmation = ({ description, isCreating, intlLabel, name, onChan
         <Dialog onClose={handleToggle} title="Confirmation" isOpen={isOpen}>
           <DialogBody icon={<ExclamationMarkCircle />}>
             <Stack size={2}>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Text id="confirm-description">
+              <Flex justifyContent="center">
+                <TextAlignTypography id="confirm-description">
                   {formatMessage({
                     id: getTrad('CheckboxConfirmation.Modal.content'),
                     defaultMessage:
                       'Disabling localization will engender the deletion of all your content but the one associated to your default locale (if existing).',
                   })}
-                </Text>
+                </TextAlignTypography>
               </Flex>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Text id="confirm-description" bold>
+              <Flex justifyContent="center">
+                <Typography fontWeight="semiBold" id="confirm-description">
                   {formatMessage({
                     id: getTrad('CheckboxConfirmation.Modal.body'),
                     defaultMessage: 'Do you want to disable it?',
                   })}
-                </Text>
+                </Typography>
               </Flex>
             </Stack>
           </DialogBody>

packages/plugins/i18n/admin/src/components/LocaleList/LocaleTable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TableLabel, Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Stack } from '@strapi/design-system/Stack';
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
@@ -20,19 +20,19 @@ const LocaleTable = ({ locales, onDeleteLocale, onEditLocale }) => {
       <Thead>
         <Tr>
           <Th>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({ id: getTrad('Settings.locales.row.id') })}
-            </TableLabel>
+            </Typography>
           </Th>
           <Th>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({ id: getTrad('Settings.locales.row.displayName') })}
-            </TableLabel>
+            </Typography>
           </Th>
           <Th>
-            <TableLabel textColor="neutral600">
+            <Typography variant="sigma" textColor="neutral600">
               {formatMessage({ id: getTrad('Settings.locales.row.default-locale') })}
-            </TableLabel>
+            </Typography>
           </Th>
           <Th>
             <VisuallyHidden>Actions</VisuallyHidden>
@@ -49,17 +49,17 @@ const LocaleTable = ({ locales, onDeleteLocale, onEditLocale }) => {
             })}
           >
             <Td>
-              <Text textColor="neutral800">{locale.id}</Text>
+              <Typography textColor="neutral800">{locale.id}</Typography>
             </Td>
             <Td>
-              <Text textColor="neutral800">{locale.name}</Text>
+              <Typography textColor="neutral800">{locale.name}</Typography>
             </Td>
             <Td>
-              <Text textColor="neutral800">
+              <Typography textColor="neutral800">
                 {locale.isDefault
                   ? formatMessage({ id: getTrad('Settings.locales.row.default-locale') })
                   : null}
-              </Text>
+              </Typography>
             </Td>
             <Td>
               <Stack

packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { Flex } from '@strapi/design-system/Flex';
 import { Box } from '@strapi/design-system/Box';
 import { Tooltip } from '@strapi/design-system/Tooltip';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Popover } from '@strapi/design-system/Popover';
 import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
 import get from 'lodash/get';
@@ -102,7 +102,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
       >
         <Button type="button" onClick={handleTogglePopover} ref={buttonRef}>
           <Flex>
-            <Text
+            <Typography
               style={{ maxWidth: '252px', cursor: 'pointer' }}
               data-for={elId}
               data-tip={localesNames}
@@ -110,7 +110,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
               ellipsis
             >
               {localesNames}
-            </Text>
+            </Typography>
             <ActionWrapper>
               <SortIcon />
 
@@ -119,7 +119,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
                   <ul>
                     {localesArray.map(name => (
                       <Box key={name} padding={3} as="li">
-                        <Text>{name}</Text>
+                        <Typography>{name}</Typography>
                       </Box>
                     ))}
                   </ul>

packages/plugins/i18n/admin/src/components/ModalCreate/index.js

@@ -9,7 +9,7 @@ import {
 } from '@strapi/design-system/ModalLayout';
 import { TabGroup, Tabs, Tab, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
 import { Button } from '@strapi/design-system/Button';
-import { ButtonText, H2 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Divider } from '@strapi/design-system/Divider';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
@@ -58,9 +58,12 @@ const ModalCreate = ({ onClose }) => {
       >
         <Form>
           <ModalHeader>
-            <ButtonText textColor="neutral800" as="h2" id="add-locale-title">
-              {formatMessage({ id: getTrad('Settings.list.actions.add') })}
-            </ButtonText>
+            <Typography fontWeight="bold" textColor="neutral800" as="h2" id="add-locale-title">
+              {formatMessage({
+                id: getTrad('Settings.list.actions.add'),
+                defaultMessage: 'Add a locale',
+              })}
+            </Typography>
           </ModalHeader>
           <ModalBody>
             <TabGroup
@@ -72,12 +75,12 @@ const ModalCreate = ({ onClose }) => {
               variant="simple"
             >
               <Flex justifyContent="space-between">
-                <H2>
+                <Typography as="h2" variant="beta">
                   {formatMessage({
                     id: getTrad('Settings.locales.modal.title'),
                     defaultMessage: 'Configurations',
                   })}
-                </H2>
+                </Typography>
                 <Tabs>
                   <Tab>
                     {formatMessage({

packages/plugins/i18n/admin/src/components/ModalEdit/index.js

@@ -15,7 +15,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
-import { ButtonText, H2 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import localeFormSchema from '../../schemas';
 import useEditLocale from '../../hooks/useEditLocale';
 import { getTrad } from '../../utils';
@@ -45,12 +45,12 @@ const ModalEdit = ({ locale, onClose }) => {
       >
         <Form>
           <ModalHeader>
-            <ButtonText textColor="neutral800" as="h2" id="edit-locale-title">
+            <Typography fontWeight="bold" textColor="neutral800" as="h2" id="edit-locale-title">
               {formatMessage({
                 id: getTrad('Settings.list.actions.edit'),
                 defaultMessage: 'Edit a locale',
               })}
-            </ButtonText>
+            </Typography>
           </ModalHeader>
           <ModalBody>
             <TabGroup
@@ -62,12 +62,12 @@ const ModalEdit = ({ locale, onClose }) => {
               variant="simple"
             >
               <Flex justifyContent="space-between">
-                <H2>
+                <Typography as="h2">
                   {formatMessage({
                     id: getTrad('Settings.locales.modal.title'),
                     defaultMessage: 'Configurations',
                   })}
-                </H2>
+                </Typography>
                 <Tabs>
                   <Tab>
                     {formatMessage({