diff --git a/apps/client/src/__tests__/__snapshots__/publier.test.tsx.snap b/apps/client/src/__tests__/__snapshots__/publier.test.tsx.snap index b5c964be10..8956743a32 100644 --- a/apps/client/src/__tests__/__snapshots__/publier.test.tsx.snap +++ b/apps/client/src/__tests__/__snapshots__/publier.test.tsx.snap @@ -688,411 +688,310 @@ exports[`publier renders publier 1`] = ` id="steps" />

Publish.stepsTitle

- - - - - - - - - - - - - - -

- Publish.stepsWarningMobile -

-
-
- + 1

Publish.stepsSubtitle1

Publish.stepsText1

- - Publish.stepsCTA1 - - - - - - - - - - - - - + Publish.stepsCTA1
- +
- + 2

Publish.stepsSubtitle2

Publish.stepsText2a

Publish.stepsText2b

- - Publish.stepsCTA2 - - - - - - - - - - - - - + Publish.stepsCTA2
- +
- + 3

Publish.stepsSubtitle3

Publish.stepsText3

- +
- + 4

Publish.stepsSubtitle4

Publish.stepsText4a

Publish.stepsText4b

Publish.stepsButton
- + 5

Publish.stepsSubtitle5

Publish.stepsText5a

Publish.stepsText5b

- + 6

Publish.stepsSubtitle6

Publish.stepsText6a

Publish.stepsText6b

+
+
@@ -1779,7 +1678,7 @@ exports[`publier renders publier 1`] = `

diff --git a/apps/client/src/__tests__/__snapshots__/traduire.test.tsx.snap b/apps/client/src/__tests__/__snapshots__/traduire.test.tsx.snap index 9cd18ba1c8..bd7f86630b 100644 --- a/apps/client/src/__tests__/__snapshots__/traduire.test.tsx.snap +++ b/apps/client/src/__tests__/__snapshots__/traduire.test.tsx.snap @@ -487,74 +487,40 @@ exports[`traduire renders traduire 1`] = `

- + 1

Translate.stepsSubtitle1

Translate.stepsText1

- - Translate.stepsCTA1 - - - - - - - - - - - - - + Translate.stepsCTA1
- + 2

Translate.stepsSubtitle2

Translate.stepsText2

- + 3

Translate.stepsSubtitle3

Translate.stepsText3

@@ -653,7 +623,7 @@ exports[`traduire renders traduire 1`] = `
- + 4

Translate.stepsSubtitle4

Translate.stepsText4a

Translate.stepsText4b

Translate.stepsButton
diff --git a/apps/client/src/assets/staticPages/publier/step-image-1.png b/apps/client/src/assets/staticPages/publier/step-image-1.png new file mode 100644 index 0000000000..c525ce7bc3 Binary files /dev/null and b/apps/client/src/assets/staticPages/publier/step-image-1.png differ diff --git a/apps/client/src/assets/staticPages/publier/step-image-2.png b/apps/client/src/assets/staticPages/publier/step-image-2.png new file mode 100644 index 0000000000..9e42e8aa59 Binary files /dev/null and b/apps/client/src/assets/staticPages/publier/step-image-2.png differ diff --git a/apps/client/src/assets/staticPages/publier/step-image-3.png b/apps/client/src/assets/staticPages/publier/step-image-3.png new file mode 100644 index 0000000000..5033682e7e Binary files /dev/null and b/apps/client/src/assets/staticPages/publier/step-image-3.png differ diff --git a/apps/client/src/assets/staticPages/publier/step-image-4.png b/apps/client/src/assets/staticPages/publier/step-image-4.png new file mode 100644 index 0000000000..5c25282864 Binary files /dev/null and b/apps/client/src/assets/staticPages/publier/step-image-4.png differ diff --git a/apps/client/src/assets/staticPages/publier/step-image-4.svg b/apps/client/src/assets/staticPages/publier/step-image-4.svg deleted file mode 100644 index e54715f313..0000000000 --- a/apps/client/src/assets/staticPages/publier/step-image-4.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/client/src/assets/staticPages/publier/step-image-5.png b/apps/client/src/assets/staticPages/publier/step-image-5.png index 2b1cb6c64a..6ad88128f0 100644 Binary files a/apps/client/src/assets/staticPages/publier/step-image-5.png and b/apps/client/src/assets/staticPages/publier/step-image-5.png differ diff --git a/apps/client/src/assets/staticPages/publier/step-image-6.png b/apps/client/src/assets/staticPages/publier/step-image-6.png new file mode 100644 index 0000000000..0878f02ecc Binary files /dev/null and b/apps/client/src/assets/staticPages/publier/step-image-6.png differ diff --git a/apps/client/src/assets/staticPages/publier/step-image-6.svg b/apps/client/src/assets/staticPages/publier/step-image-6.svg deleted file mode 100644 index 989f2fafb9..0000000000 --- a/apps/client/src/assets/staticPages/publier/step-image-6.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss b/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss deleted file mode 100644 index 0dc8ed1f40..0000000000 --- a/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss +++ /dev/null @@ -1,280 +0,0 @@ -@import "~/scss/colors"; -@import "~/scss/mixins/responsive"; -@import "~/scss/mixins/unit"; -@import "~/scss/mixins/text"; -@import "~/scss/mixins/rtl"; -@import "~/scss/variables"; - -$orange: #cd5605; -$purple: #3d2884; - -@mixin fadeBorder() { - &::after { - content: ""; - width: $borderWidth; - position: absolute; - height: 200px; - bottom: 0; - left: -$borderWidth; - background: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 100%)); - - @include rtl { - left: inherit; - right: -$borderWidth; - } - } -} - -// layout -.row { - display: flex; - align-items: stretch; - justify-content: space-between; - min-height: 420px; - - @include isTablet { - position: relative; - flex-direction: column-reverse; - - @include pl-ltr(u(4)); - } -} - -$borderWidth: 4px; - -.content { - @include pl-ltr(60px); - - max-width: 480px; - order: 2; - padding-bottom: 100px; - border-left: $borderWidth solid $dark; - position: relative; - - @include rtl { - border-left: none; - border-right: $borderWidth solid $dark; - } - - .orange & { - border-color: $orange; - } - - .purple & { - border-color: $purple; - } - - .has_btn_step & { - padding-bottom: 250px; - - @include isTablet { - padding-bottom: 0; - } - } - - @include isTablet { - max-width: none; - padding-left: u(8); - padding-bottom: u(9); - - @include rtl { - padding-left: 0; - padding-right: u(8); - } - } - - .dotted & { - border-left-style: dashed; - - @include rtl { - border-left-style: none; - border-right-style: dashed; - } - - @include media-min("lg-limit") { - @include fadeBorder; - } - } -} - -.media { - position: relative; - order: 1; - flex-grow: 0; - width: 480px; - display: flex; - align-items: flex-start; - justify-content: center; - - :global(.autoplay-video) { - max-width: 100%; - height: auto; - } - - @include isTablet { - border-left: $borderWidth solid $dark; - padding-left: u(8); - padding-bottom: 60px; - width: auto; - - @include rtl { - border-left: none; - padding-left: 0; - border-right: $borderWidth solid $dark; - padding-right: u(8); - } - - .orange & { - border-color: $orange; - } - - .purple & { - border-color: $purple; - } - - .dotted & { - border-left-style: dashed; - - @include fadeBorder; - - @include rtl { - border-left-style: none; - border-right-style: dashed; - } - } - } - - .has_btn_step & { - @include isTablet { - padding-bottom: 150px; - } - } -} - -// text -.title { - @include text("h4"); - - font-weight: normal; - margin-bottom: u(8); - - @include isTablet { - @include text("large"); - - margin-bottom: u(4); - } -} - -.text { - @include text("large"); - - color: $gray80; - margin-bottom: u(8); - - @include isTablet { - @include text("normal"); - - margin-bottom: u(4); - } -} - -.step { - @include text("h5"); - - width: 40px; - height: 40px; - font-weight: bold; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: white; - border: 1.3px solid $white; - position: absolute; - top: 0; - left: -22px; - box-shadow: 1.3px 1.3px 11px 0 #2121213d; - - // fix vertical align - span { - height: 22px; - line-height: 20px; - - @include isTablet { - height: 16px; - line-height: 15px; - } - } - - @include rtl { - left: inherit; - right: -22px; - } - - .orange & { - background: $orange; - } - - .purple & { - background: $purple; - } - - @include isTablet { - @include text("normal"); - - width: 24px; - height: 24px; - left: -14px; - top: -1px; - - @include rtl { - left: inherit; - right: -14px; - } - } -} - -.btn_step { - @include text("large"); - - padding: u(4); - border-radius: $radius; - color: $white; - font-weight: bold; - text-align: center; - position: absolute; - left: 0; - bottom: 120px; - transform: translateX(-50%); - - @include rtl { - left: inherit; - right: 0; - transform: translateX(50%); - } - - .orange & { - background: $orange; - } - - .purple & { - background: $purple; - } - - &.last { - bottom: 0; - } - - @include isTablet { - transform: none; - left: 0; - bottom: 60px; - width: 100%; - - @include rtl { - transform: none; - left: inherit; - right: 0; - } - } -} diff --git a/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.tsx b/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.tsx index 80eed7597e..2b4c789b10 100644 --- a/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.tsx +++ b/apps/client/src/components/Pages/staticPages/common/StepContent/StepContent.tsx @@ -1,11 +1,10 @@ +import Button from "@codegouvfr/react-dsfr/Button"; import { ReactElement, useMemo } from "react"; import Image from "~/components/UI/Image"; import { useSanitizedContent } from "~/hooks"; import useWindowSize from "~/hooks/useWindowSize"; import { cls } from "~/lib/classname"; import AutoplayVideo from "../AutoplayVideo"; -import InlineLink from "../InlineLink"; -import styles from "./StepContent.module.scss"; interface Props { step: number; @@ -30,8 +29,19 @@ const StepContent = (props: Props) => { const { isTablet } = useWindowSize(); const buttonStep = useMemo( - () =>
{props.buttonStep}
, - [props.buttonStep, props.buttonStepEnd], + () => ( +
+ {props.buttonStep} +
+ ), + [props.buttonStep, props.buttonStepEnd, props.color], ); const safeTitle = useSanitizedContent(props.title); @@ -39,33 +49,72 @@ const StepContent = (props: Props) => { return (
-
-
- {props.step} +
+
+ {props.step}

{props.texts.map((text, i) => ( -

+

{text}

))} - {props.cta && } + {props.cta && ( + + )} {props.footer} {!isTablet && props.buttonStep && buttonStep} + + {/* fade border */} + {props.dottedLine && ( + + )}
-
+
{props.image && ( { /> )} {props.video && } + {/* fade border */} + {props.dottedLine && ( + + )}
{isTablet && props.buttonStep && buttonStep}
diff --git a/apps/client/src/locales/fa/common.json b/apps/client/src/locales/fa/common.json index b4a5bb1cc2..cc55de9b0a 100644 --- a/apps/client/src/locales/fa/common.json +++ b/apps/client/src/locales/fa/common.json @@ -227,7 +227,10 @@ "check_mail": "املا خود را بررسی کنید.", "invalid_phone_number": "این یک شماره تلفن معتبر نیست ، ورودی خود را بررسی کنید." }, - "UnauthorizedAccess": { "access_denied": "دسترسی رد شد", "back_home": "بازگشت به صفحه اصلی" }, + "UnauthorizedAccess": { + "access_denied": "دسترسی رد شد", + "back_home": "بازگشت به صفحه اصلی" + }, "Dispositif": { "share": "اشتراک گذاری برگه", "updated": "به روز شده", @@ -404,7 +407,11 @@ "information_types": "سه نوع اطلاعات", "help_translate": "کمک به ترجمه" }, - "Roles": { "admin": "مدیر", "redactor": "ویرایشگر", "translator": "مترجم" }, + "Roles": { + "admin": "مدیر", + "redactor": "ویرایشگر", + "translator": "مترجم" + }, "topLink": "بالای صفحه", "close": "بستن", "showBreadcrumb": "راهنمای سایت را ببینید", @@ -563,7 +570,6 @@ "requiredTextExample3Ok": "آموزش با درس های فرانسوی", "requiredCTA": "منشور سرمقاله کامل را بخوانید", "stepsTitle": "مراحل انتشار ورق چیست؟", - "stepsWarningMobile": "لطفا توجه داشته باشید ، نوشتن یک برگه فقط در رایانه امکان پذیر است.", "stepsSubtitle1": " حساب خود را ایجاد کنید پناهندگان. info", "stepsText1": "هر حساب شخصی است. همکاران شما همچنین می توانند حساب خود را برای تغییر پرونده های ساختار شما ایجاد کنند.", "stepsCTA1": "ایجاد حساب کاربری من", diff --git a/apps/client/src/locales/fr/common.json b/apps/client/src/locales/fr/common.json index 2de857cbd7..3d78aefbcd 100644 --- a/apps/client/src/locales/fr/common.json +++ b/apps/client/src/locales/fr/common.json @@ -618,7 +618,6 @@ "requiredTextExample3Ok": "Une formation avec cours de français", "requiredCTA": "Lire la charte éditoriale complète", "stepsTitle": "Quelles sont les étapes pour publier une fiche ?", - "stepsWarningMobile": "Attention, la rédaction d’une fiche est possible uniquement sur ordinateur.", "stepsSubtitle1": "Créez votre compte Réfugiés.info", "stepsText1": "Chaque compte est personnel. Vos collègues pourront aussi créer leur propre compte pour modifier les fiches de votre structure.", "stepsCTA1": "Créer mon compte", diff --git a/apps/client/src/locales/ru/common.json b/apps/client/src/locales/ru/common.json index e8e01dfb0f..69049745fe 100644 --- a/apps/client/src/locales/ru/common.json +++ b/apps/client/src/locales/ru/common.json @@ -221,7 +221,10 @@ "not_an_email": "Неверный email,", "check_mail": "проверьте написание." }, - "UnauthorizedAccess": { "access_denied": "Доступ запрещен", "back_home": "Вернуться на главную" }, + "UnauthorizedAccess": { + "access_denied": "Доступ запрещен", + "back_home": "Вернуться на главную" + }, "Dispositif": { "share": "поделиться страницей", "updated": "информация обновлена", @@ -398,7 +401,11 @@ "information_types": "Три типа информации", "help_translate": "Помочь перевести" }, - "Roles": { "admin": "Админ", "redactor": "Редактор", "translator": "Переводчик" }, + "Roles": { + "admin": "Админ", + "redactor": "Редактор", + "translator": "Переводчик" + }, "topLink": "Верх страницы", "close": "Закрыть", "showBreadcrumb": "Посмотреть цепочку навигации", @@ -557,7 +564,6 @@ "requiredTextExample3Ok": "Учебная программа с курсами французского", "requiredCTA": "Прочитать правила размещения информации на портале", "stepsTitle": "Каковы этапы добавления станицы?", - "stepsWarningMobile": "Внимание, создание страницы доступно только с компютера", "stepsSubtitle1": "Создайте вашу учетную запись Réfugiés.info", "stepsText1": "Каждая учетная запись является персональной. Ваши коллеги также смогут создать свою собственную учетную запись, чтобы редактировать учетные записи вашей структуры.", "stepsCTA1": "Создать мою учетную запись", diff --git a/apps/client/src/locales/ti/common.json b/apps/client/src/locales/ti/common.json index a23899dad9..6033d5e38b 100644 --- a/apps/client/src/locales/ti/common.json +++ b/apps/client/src/locales/ti/common.json @@ -214,7 +214,10 @@ "not_an_email": "እዚ ኢመይል ኣይኮነን", "check_mail": "ኣብ ፊደል ኣረጋግጽ\\ጺ" }, - "UnauthorizedAccess": { "access_denied": "ኣብ  ምንጻግ በጺሑ", "back_home": "ናብ መቀበሊ ምምጻእ" }, + "UnauthorizedAccess": { + "access_denied": "ኣብ  ምንጻግ በጺሑ", + "back_home": "ናብ መቀበሊ ምምጻእ" + }, "Dispositif": { "share": "ኣብጽሑ ሼር ግበሩ", "updated": "ኣቐድዲሙ ዝነበረ", @@ -391,7 +394,11 @@ "information_types": "ሰለስተ ዓይነት ሓበሬታታት", "help_translate": "ን ምትርጓም ሓግዝ" }, - "Roles": { "admin": "ምምሕዳር", "redactor": "ኢዝዲተር ወይ ኣርታዒ", "translator": "ተርጓሚ/ሚት" }, + "Roles": { + "admin": "ምምሕዳር", + "redactor": "ኢዝዲተር ወይ ኣርታዒ", + "translator": "ተርጓሚ/ሚት" + }, "topLink": "ኣብ ላዕሊ ገጽ", "close": "ዕጸዉ", "showBreadcrumb": "ኣብ ዝርዝራት ተዐዘቡ", @@ -550,7 +557,6 @@ "requiredTextExample3Ok": "ናይ ቋንቋ ፈረንሳ ስልጠና", "requiredCTA": "እቲ ቻርተር ናይ ቅዋምና ኣንብቡ", "stepsTitle": "ን ሓበሬታይብኸመይ መስርሕ እየ ከም ዝዝርግሓለይ ዝገብር?", - "stepsWarningMobile": "ንጠንቀቕ! ን ኽዝርግሓልኩም እትደልይዎ ሓበሬታ ብ ኮምፑተር ጥራይ ኢኹም እትሰድዎ", "stepsSubtitle1": "ብ ቐዳምነት ድማ ኣብ ፍረንችህ ኢንፎ ኣካውንት ይሃልኹምኣብቲ ናይ ዝብል ይሃልኹም", "stepsText1": "ነፍሲ ወከፍ ሰብ ነናቱ ሕሳብ ክገብር ይግባእ፣ መሳርሕትኹም እውን ዝገብዎ ምስትኽኻል ከእእሎም ምእንቲ", "stepsCTA1": "ኣካውን ወይ ሕሳብ ክፈቱ", diff --git a/apps/client/src/locales/uk/common.json b/apps/client/src/locales/uk/common.json index 71ecc53645..8b290e7a42 100644 --- a/apps/client/src/locales/uk/common.json +++ b/apps/client/src/locales/uk/common.json @@ -227,7 +227,10 @@ "check_mail": "перевірте написання.", "invalid_phone_number": "Це недійсний номер телефону, перевірте введені дані." }, - "UnauthorizedAccess": { "access_denied": "У доступі відмовлено.", "back_home": "Повернутися на головну сторінку" }, + "UnauthorizedAccess": { + "access_denied": "У доступі відмовлено.", + "back_home": "Повернутися на головну сторінку" + }, "Dispositif": { "share": "Поділитися записом", "updated": "Оновлено", @@ -404,7 +407,11 @@ "information_types": "Три типи інформації", "help_translate": "Допомогти з перекладом" }, - "Roles": { "admin": "Адмін", "redactor": "Редактор", "translator": "Перекладач" }, + "Roles": { + "admin": "Адмін", + "redactor": "Редактор", + "translator": "Перекладач" + }, "topLink": "Вгору сторінки", "close": "Закрити", "showBreadcrumb": "Побачити нитку Аріадни", @@ -563,7 +570,6 @@ "requiredTextExample3Ok": "Навчання з курсами французької мови", "requiredCTA": "Прочитайте редакційні правила", "stepsTitle": "Які кроки потрібно виконати, щоб опублікувати запис?", - "stepsWarningMobile": "Зверніть увагу, що створення запису можливо тільки на комп’ютері.", "stepsSubtitle1": "Створіть ваш обліковий запис Réfugiés.info", "stepsText1": "Кожний обліковий запис є особистим. Ваші колеги також зможуть створити власний обліковий запис, щоб змінювати записи вашої структури.", "stepsCTA1": "Створити мій обліковий запис", diff --git a/apps/client/src/pages/publier.tsx b/apps/client/src/pages/publier.tsx index bfc9441407..9f8b4dac21 100644 --- a/apps/client/src/pages/publier.tsx +++ b/apps/client/src/pages/publier.tsx @@ -12,9 +12,12 @@ import RequiredIcon1 from "~/assets/staticPages/publier/icon-calendar.svg"; import RequiredIcon3 from "~/assets/staticPages/publier/icon-hands.svg"; import RequiredIcon2 from "~/assets/staticPages/publier/icon-money.svg"; import MockupsRI from "~/assets/staticPages/publier/mockups-ri.png"; -import StepImage4 from "~/assets/staticPages/publier/step-image-4.svg"; +import StepImage1 from "~/assets/staticPages/publier/step-image-1.png"; +import StepImage2 from "~/assets/staticPages/publier/step-image-2.png"; +import StepImage3 from "~/assets/staticPages/publier/step-image-3.png"; +import StepImage4 from "~/assets/staticPages/publier/step-image-4.png"; import StepImage5 from "~/assets/staticPages/publier/step-image-5.png"; -import StepImage6 from "~/assets/staticPages/publier/step-image-6.svg"; +import StepImage6 from "~/assets/staticPages/publier/step-image-6.png"; import WhyImage1 from "~/assets/staticPages/publier/why-image-1.png"; import WhyImage4 from "~/assets/staticPages/publier/why-image-4.png"; import WriteContentModal from "~/components/Modals/WriteContentModal/WriteContentModal"; @@ -31,7 +34,6 @@ import { } from "~/components/Pages/staticPages/common"; import { CardExample, TestimonySlider } from "~/components/Pages/staticPages/publier"; import SEO from "~/components/Seo"; -import EVAIcon from "~/components/UI/EVAIcon/EVAIcon"; import Image from "~/components/UI/Image"; import useWindowSize from "~/hooks/useWindowSize"; import { cls } from "~/lib/classname"; @@ -254,67 +256,66 @@ const RecensezVotreAction = (props: Props) => {
{/* STEPS */} -
- -

{t("Publish.stepsTitle")}

-
- -

{t("Publish.stepsWarningMobile")}

-
+
+
+ {t("Publish.stepsTitle")} - -
+
+
diff --git a/apps/client/src/scss/index.css b/apps/client/src/scss/index.css index c135f9cfdd..dbcc1d6b27 100644 --- a/apps/client/src/scss/index.css +++ b/apps/client/src/scss/index.css @@ -1,5 +1,7 @@ /* stylelint-disable custom-property-pattern */ @import "tailwindcss"; +/* stylelint-disable-next-line scss/at-rule-no-unknown */ +@source "./tailwind-safelist.txt"; @theme { /* custom config goes here */ @@ -19,6 +21,9 @@ --color-border: #ddd; --color-success: #18753c; --color-error: #ce0500; + --color-beige: #f9f6f2; + --color-purple-france: #6a6af4; + --color-orange-france: #cd5605; /* Fonts */ --font-sans: "Marianne", "Arial", "sans-serif"; diff --git a/apps/client/src/scss/tailwind-safelist.txt b/apps/client/src/scss/tailwind-safelist.txt new file mode 100644 index 0000000000..363065b329 --- /dev/null +++ b/apps/client/src/scss/tailwind-safelist.txt @@ -0,0 +1,4 @@ +bg-purple-france +bg-orange-france +border-purple-france +border-orange-france