💄(frontend) components more multi theme friendly

We adapt a bit the tokens of some components to be more multi theme friendly. When we will add another theme, it will be easier to adapt to the new theme.
2024-10-11 13:29:07 +02:00
parent 6e64bad1e2
commit 6c3f3f6a77
20 changed files with 101 additions and 68 deletions
--- a/src/frontend/apps/e2e/tests/app-impress/header.spec.ts
+++ b/src/frontend/apps/e2e/tests/app-impress/header.spec.ts
@@ -26,7 +26,7 @@ test.describe('Header', () => {
      }),
    ).toBeVisible();

-    await expect(header.getByAltText('Language Icon')).toBeVisible();
+    await expect(header.getByText('English')).toBeVisible();

    await expect(
      header.getByRole('button', {
@@ -87,7 +87,7 @@ test.describe('Header mobile', () => {
      }),
    ).toBeHidden();

-    await expect(page.getByAltText('Language Icon')).toBeHidden();
+    await expect(page.getByText('English')).toBeHidden();

    await header.getByLabel('Open the header menu').click();

@@ -97,7 +97,7 @@ test.describe('Header mobile', () => {
      }),
    ).toBeVisible();

-    await expect(page.getByAltText('Language Icon')).toBeVisible();
+    await expect(page.getByText('English')).toBeVisible();
  });
 });

--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -189,6 +189,9 @@ const config = {
            },
          },
        },
+        'la-gauffre': {
+          activated: false,
+        },
      },
    },
    dsfr: {
@@ -321,6 +324,7 @@ const config = {
              'color-hover': 'var(--c--theme--colors--primary-100)',
            },
            'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-600)',
          },
        },
        datagrid: {
@@ -335,6 +339,7 @@ const config = {
          pagination: {
            'background-color': 'transparent',
            'background-color-active': 'var(--c--theme--colors--primary-300)',
+            'border-color': 'var(--c--theme--colors--primary-400)',
          },
        },
        'forms-checkbox': {
@@ -384,6 +389,9 @@ const config = {
        'forms-textarea': {
          'border-radius': '0',
        },
+        'la-gauffre': {
+          activated: true,
+        },
      },
    },
  },
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -13,6 +13,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
      $isMaterialIcon
      $size="36px"
      $theme="primary"
+      $variation="600"
      $background={colorsTokens()['primary-bg']}
      $css={`
        border: 1px solid ${colorsTokens()['primary-200']}; 
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -255,6 +255,7 @@ input:-webkit-autofill:focus {
  gap: 3px;
  border-radius: 4px;
  background: var(--c--components--datagrid--pagination--background-color);
+  border-color: var(--c--components--datagrid--pagination--border-color);
 }

 .c__pagination__list .c__button--tertiary-text.c__button--active {
@@ -452,6 +453,7 @@ input:-webkit-autofill:focus {

 .c__button--tertiary-text {
  border: none;
+  color: var(--c--components--button--tertiary-text--color);
 }

 .c__button--tertiary-text:hover,
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -283,6 +283,7 @@
  );
  --c--components--button--disabled--color: white;
  --c--components--button--disabled--background--color: #b3cef0;
+  --c--components--la-gauffre--activated: false;
 }

 .cunningham-theme--dark {
@@ -451,6 +452,9 @@
  --c--components--button--tertiary-text--color-hover: var(
    --c--theme--colors--primary-text
  );
+  --c--components--button--tertiary-text--color: var(
+    --c--theme--colors--primary-600
+  );
  --c--components--datagrid--header--color: var(
    --c--theme--colors--primary-text
  );
@@ -461,6 +465,9 @@
  --c--components--datagrid--pagination--background-color-active: var(
    --c--theme--colors--primary-300
  );
+  --c--components--datagrid--pagination--border-color: var(
+    --c--theme--colors--primary-400
+  );
  --c--components--forms-checkbox--border-radius: 0;
  --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
  --c--components--forms-checkbox--text--color: var(
@@ -504,6 +511,7 @@
    --c--theme--colors--primary-text
  );
  --c--components--forms-textarea--border-radius: 0;
+  --c--components--la-gauffre--activated: true;
 }

 .clr-secondary-text {
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -276,6 +276,7 @@ export const tokens = {
          },
          disabled: { color: 'white', background: { color: '#b3cef0' } },
        },
+        'la-gauffre': { activated: false },
      },
    },
    dark: {
@@ -450,6 +451,7 @@ export const tokens = {
              'color-hover': 'var(--c--theme--colors--primary-100)',
            },
            'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-600)',
          },
        },
        datagrid: {
@@ -464,6 +466,7 @@ export const tokens = {
          pagination: {
            'background-color': 'transparent',
            'background-color-active': 'var(--c--theme--colors--primary-300)',
+            'border-color': 'var(--c--theme--colors--primary-400)',
          },
        },
        'forms-checkbox': {
@@ -503,6 +506,7 @@ export const tokens = {
          'accent-color': 'var(--c--theme--colors--primary-text)',
        },
        'forms-textarea': { 'border-radius': '0' },
+        'la-gauffre': { activated: true },
      },
    },
  },
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
@@ -102,6 +102,7 @@ export const PanelEditor = ({
              $weight="bold"
              $size="m"
              $theme="primary"
+              $variation="600"
              $padding={{ vertical: 'small', horizontal: 'small' }}
            >
              {t('Table of content')}
@@ -118,6 +119,7 @@ export const PanelEditor = ({
                $weight="bold"
                $size="m"
                $theme="primary"
+                $variation="600"
                $padding={{ vertical: 'small', horizontal: 'small' }}
              >
                {t('Versions')}
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -44,6 +44,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
            <Text
              $isMaterialIcon
              $theme="primary"
+              $variation="600"
              $size="2rem"
              $css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
              $hasTransition
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import { Box, DropButton, IconOptions, Text } from '@/components';
+import { Box, DropButton, IconOptions } from '@/components';
 import { useAuthStore } from '@/core';
 import { usePanelEditorStore } from '@/features/docs/doc-editor/';
 import {
@@ -86,7 +86,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                icon={<span className="material-icons">history</span>}
                size="small"
              >
-                <Text $theme="primary">{t('Version history')}</Text>
+                {t('Version history')}
              </Button>
            )}
            <Button
@@ -99,7 +99,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
              icon={<span className="material-icons">summarize</span>}
              size="small"
            >
-              <Text $theme="primary">{t('Table of contents')}</Text>
+              {t('Table of contents')}
            </Button>
            <Button
              onClick={() => {
@@ -110,7 +110,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
              icon={<span className="material-icons">file_download</span>}
              size="small"
            >
-              <Text $theme="primary">{t('Export')}</Text>
+              {t('Export')}
            </Button>
            {doc.abilities.destroy && (
              <Button
@@ -122,7 +122,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                icon={<span className="material-icons">delete</span>}
                size="small"
              >
-                <Text $theme="primary">{t('Delete document')}</Text>
+                {t('Delete document')}
              </Button>
            )}
          </Box>
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
@@ -152,7 +152,12 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
      size={ModalSize.MEDIUM}
      title={
        <Box $align="center" $gap="1rem">
-          <Text className="material-icons" $size="3.5rem" $theme="primary">
+          <Text
+            className="material-icons"
+            $size="3.5rem"
+            $theme="primary"
+            $variation="600"
+          >
            picture_as_pdf
          </Text>
          <Text as="h2" $size="h3" $margin="none" $theme="primary">
--- a/src/frontend/apps/impress/src/features/docs/doc-management/assets/icon-trash.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/assets/icon-trash.svg
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12 38C12 40.2 13.8 42 16 42H32C34.2 42 36 40.2 36 38V14H12V38ZM18.34 25.18C17.56 24.4 17.56 23.14 18.34 22.36C19.12 21.58 20.38 21.58 21.16 22.36L24 25.18L26.82 22.36C27.6 21.58 28.86 21.58 29.64 22.36C30.42 23.14 30.42 24.4 29.64 25.18L26.82 28L29.64 30.82C30.42 31.6 30.42 32.86 29.64 33.64C28.86 34.42 27.6 34.42 26.82 33.64L24 30.82L21.18 33.64C20.4 34.42 19.14 34.42 18.36 33.64C17.58 32.86 17.58 31.6 18.36 30.82L21.18 28L18.34 25.18ZM36 8H31L29.58 6.58C29.22 6.22 28.7 6 28.18 6H19.82C19.3 6 18.78 6.22 18.42 6.58L17 8H12C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12H36C37.1 12 38 11.1 38 10C38 8.9 37.1 8 36 8Z"
-    fill="currentColor"
-  />
-</svg>
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -14,7 +14,6 @@ import useCunninghamTheme from '@/cunningham/useCunninghamTheme';

 import { useRemoveDoc } from '../api/useRemoveDoc';
 import IconDoc from '../assets/icon-doc.svg';
-import IconRemove from '../assets/icon-trash.svg';
 import { Doc } from '../types';

 interface ModalRemoveDocProps {
@@ -73,7 +72,9 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
      size={ModalSize.MEDIUM}
      title={
        <Box $align="center" $gap="1rem">
-          <IconRemove width={48} color={colorsTokens()['primary-text']} />
+          <Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
+            delete_forever
+          </Text>
          <Text as="h2" $size="h3" $margin="none">
            {t('Deleting the document "{{title}}"', { title: doc.title })}
          </Text>
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
@@ -1,7 +1,7 @@
 import { t } from 'i18next';
 import { createGlobalStyle } from 'styled-components';

-import { Box, Card, SideModal, Text } from '@/components';
+import { Box, Card, IconBG, SideModal, Text } from '@/components';
 import { InvitationList } from '@/features/docs/members/invitation-list';
 import { AddMembers } from '@/features/docs/members/members-add';
 import { MemberList } from '@/features/docs/members/members-list';
@@ -62,9 +62,12 @@ export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
              $padding="tiny"
              $gap="1rem"
            >
-              <Text $isMaterialIcon $size="48px" $theme="primary">
-                share
-              </Text>
+              <IconBG
+                $isMaterialIcon
+                $size="48px"
+                iconName="share"
+                $margin="none"
+              />
              <Box $align="flex-start">
                <Text as="h3" $size="26px" $margin="none">
                  {t('Share')}
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
@@ -35,13 +35,13 @@ export const VersionItem = ({
        as="li"
        $background={isActive ? colorsTokens()['primary-300'] : 'transparent'}
        $css={`
-        border-left: 4px solid transparent;
-        border-bottom: 1px solid ${colorsTokens()['primary-100']};
-        &:hover{
-          border-left: 4px solid ${colorsTokens()['primary-400']};
-          background: ${colorsTokens()['primary-300']};
-        }
-      `}
+          border-left: 4px solid transparent;
+          border-bottom: 1px solid ${colorsTokens()['primary-100']};
+          &:hover{
+            border-left: 4px solid ${colorsTokens()['primary-400']};
+            background: ${colorsTokens()['primary-300']};
+          }
+        `}
        $hasTransition
        $minWidth="13rem"
      >
@@ -54,10 +54,15 @@ export const VersionItem = ({
            $width="100%"
          >
            <Box $direction="row" $gap="0.5rem" $align="center">
-              <Text $isMaterialIcon $size="24px" $theme="primary">
+              <Text
+                $isMaterialIcon
+                $size="24px"
+                $theme="primary"
+                $variation="600"
+              >
                description
              </Text>
-              <Text $weight="bold" $theme="primary" $size="m">
+              <Text $weight="bold" $theme="primary" $size="m" $variation="600">
                {text}
              </Text>
            </Box>
@@ -81,7 +86,7 @@ export const VersionItem = ({
                    icon={<span className="material-icons">save</span>}
                    size="small"
                  >
-                    <Text $theme="primary">{t('Restore the version')}</Text>
+                    {t('Restore the version')}
                  </Button>
                </Box>
              </DropButton>
--- a/src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx
@@ -116,11 +116,7 @@ export const MemberItem = ({
                <Button
                  color="tertiary-text"
                  icon={
-                    <Text
-                      $isMaterialIcon
-                      $theme={isNotAllowed ? 'greyscale' : 'primary'}
-                      $variation={isNotAllowed ? '500' : 'text'}
-                    >
+                    <Text $isMaterialIcon $color="inherit">
                      delete
                    </Text>
                  }
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -62,9 +62,10 @@ export const Header = () => {
              <Text
                $margin="none"
                as="h2"
-                $theme="primary"
+                $color="#000091"
                $zIndex={1}
                $size="1.30rem"
+                $css="font-family: 'Marianne'"
              >
                {t('Docs')}
              </Text>
--- a/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
@@ -4,20 +4,30 @@ import Script from 'next/script';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';

+import { useCunninghamTheme } from '@/cunningham';
+
 const GaufreStyle = createGlobalStyle`
  .lasuite-gaufre-btn{
    box-shadow: inset 0 0 0 0 !important;
  }
 `;

-export const LaGaufre = () => (
-  <>
-    <Script
-      src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"
-      strategy="lazyOnload"
-      id="lasuite-gaufre-script"
-    />
-    <GaufreStyle />
-    <Gaufre variant="small" />
-  </>
-);
+export const LaGaufre = () => {
+  const { componentTokens } = useCunninghamTheme();
+
+  if (!componentTokens()['la-gauffre'].activated) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"
+        strategy="lazyOnload"
+        id="lasuite-gaufre-script"
+      />
+      <GaufreStyle />
+      <Gaufre variant="small" />
+    </>
+  );
+};
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -1,5 +1,4 @@
 import { Select } from '@openfun/cunningham-react';
-import Image from 'next/image';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -7,8 +6,6 @@ import styled from 'styled-components';
 import { Box, Text } from '@/components/';
 import { LANGUAGES_ALLOWED } from '@/i18n/conf';

-import IconLanguage from './assets/icon-language.svg?url';
-
 const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
  flex-shrink: 0;
  width: auto;
@@ -49,12 +46,16 @@ export const LanguagePicker = () => {
          $gap="0.7rem"
          $align="center"
        >
-          <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text $theme="primary">{LANGUAGES_ALLOWED[lang]}</Text>
+          <Text $isMaterialIcon $size="1rem" $theme="primary" $variation="600">
+            translate
+          </Text>
+          <Text $theme="primary" $variation="600">
+            {LANGUAGES_ALLOWED[lang]}
+          </Text>
        </Box>
      ),
    }));
-  }, [languages, t]);
+  }, [languages]);

  return (
    <SelectStyled
--- a/src/frontend/apps/impress/src/features/language/assets/icon-language.svg
+++ b/src/frontend/apps/impress/src/features/language/assets/icon-language.svg
@@ -1,14 +0,0 @@
-<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M12.334 6.66683L15.2673 14.0002H13.8307L13.03 12.0002H10.3033L9.50398 14.0002H8.06798L11.0007 6.66683H12.334ZM6.66732 1.3335V2.66683H10.6673V4.00016H9.35532C8.84106 5.54821 8.0203 6.97684 6.94198 8.20083C7.42285 8.6299 7.94444 9.01104 8.49932 9.33883L7.99865 10.5908C7.28233 10.1846 6.61238 9.70149 6.00065 9.15016C4.80971 10.228 3.39934 11.035 1.86665 11.5155L1.50932 10.2295C2.82254 9.81077 4.03266 9.11972 5.06065 8.2015C4.29978 7.34012 3.66603 6.37434 3.17865 5.3335H4.67198C5.04355 6.0194 5.4891 6.66257 6.00065 7.2515C6.83406 6.2909 7.49085 5.19037 7.94065 4.00083L1.33398 4.00016V2.66683H5.33398V1.3335H6.66732ZM11.6673 8.59016L10.836 10.6668H12.4973L11.6673 8.59016Z"
-    fill="#000091"
-  />
-</svg>