From 542f669a94d83cf271e92d3e05021b1880350a90 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 16 Aug 2023 16:11:58 +0300
Subject: [PATCH] Publish Settings show field name (#180)

Publish Settings show field name
---
 public/locales/en/translation.json                 |  2 +-
 public/locales/ru/translation.json                 |  2 +-
 .../Article/AudioPlayer/PlayerPlaylist.tsx         |  2 +-
 .../Views/PublishSettings/PublishSettings.tsx      |  3 +++
 .../GrowingTextarea/GrowingTextarea.module.scss    | 14 ++++++++++++++
 .../_shared/GrowingTextarea/GrowingTextarea.tsx    | 11 ++++++++++-
 src/styles/app.scss                                |  6 ++++--
 7 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index c3e06da6..d2750426 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -82,7 +82,7 @@
   "Decline": "Decline",
   "Delete": "Delete",
   "Delete cover": "Delete cover",
-  "Description": "Description...",
+  "Description": "Description",
   "Discours": "Discours",
   "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects",
   "Discours is created with our common effort": "Discours exists because of our common effort",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index b3e49787..5eaf3602 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -86,7 +86,7 @@
   "Decline": "Отмена",
   "Delete": "Удалить",
   "Delete cover": "Удалить обложку",
-  "Description": "Описание...",
+  "Description": "Описание",
   "Discours": "Дискурс",
   "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Дискурс — это интеллектуальная среда, веб-пространство и инструменты, которые позволяют авторам сотрудничать с читателями и объединяться для совместного создания публикаций и медиапроектов",
   "Discours is created with our common effort": "Дискурс существует благодаря нашему общему вкладу",
diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index ac9d5434..9e4c3e5f 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -160,7 +160,7 @@ export const PlayerPlaylist = (props: Props) => {
                 <div class={styles.descriptionBlock}>
                   <SimplifiedEditor
                     initialContent={mi.body}
-                    placeholder={t('Description')}
+                    placeholder={`${t('Description')}...`}
                     smallHeight={true}
                     onAutoSave={(value) => handleMediaItemFieldChange('body', value)}
                   />
diff --git a/src/components/Views/PublishSettings/PublishSettings.tsx b/src/components/Views/PublishSettings/PublishSettings.tsx
index fae8ce9f..050f0ff5 100644
--- a/src/components/Views/PublishSettings/PublishSettings.tsx
+++ b/src/components/Views/PublishSettings/PublishSettings.tsx
@@ -167,6 +167,7 @@ export const PublishSettings = (props: Props) => {
               <GrowingTextarea
                 class={styles.settingInput}
                 variant="bordered"
+                fieldName={t('Header')}
                 placeholder={t('Come up with a title for your story')}
                 initialValue={settingsForm.title}
                 value={(value) => setSettingsForm('title', value)}
@@ -176,6 +177,7 @@ export const PublishSettings = (props: Props) => {
               <GrowingTextarea
                 class={styles.settingInput}
                 variant="bordered"
+                fieldName={t('Subheader')}
                 placeholder={t('Come up with a subtitle for your story')}
                 initialValue={settingsForm.subtitle}
                 value={(value) => setSettingsForm('subtitle', value)}
@@ -185,6 +187,7 @@ export const PublishSettings = (props: Props) => {
               <GrowingTextarea
                 class={styles.settingInput}
                 variant="bordered"
+                fieldName={t('Description')}
                 placeholder={t('Write a short introduction')}
                 initialValue={`${settingsForm.lead}`}
                 value={(value) => setSettingsForm('lead', value)}
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss b/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
index 81b706eb..967f3d1d 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
@@ -2,6 +2,7 @@
   display: block;
   width: 100%;
   position: relative;
+  transition: 0.3s ease-in-out;
 
   &.bordered {
     box-sizing: border-box;
@@ -11,6 +12,19 @@
     background: var(--white-500, #fff);
   }
 
+  &.hasFieldName {
+    padding-top: 24px;
+  }
+
+  .fieldName {
+    @include font-size(1.2rem);
+
+    position: absolute;
+    top: 6px;
+    left: 12px;
+    color: var(--black-400);
+  }
+
   .growWrap {
     display: grid;
     width: 100%;
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
index 452cb032..654ea5e4 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
@@ -10,6 +10,7 @@ type Props = {
   maxLength?: number
   allowEnterKey: boolean
   variant?: 'bordered'
+  fieldName?: string
 }
 
 export const GrowingTextarea = (props: Props) => {
@@ -30,7 +31,15 @@ export const GrowingTextarea = (props: Props) => {
   }
 
   return (
-    <div class={clsx(styles.GrowingTextarea, { [styles.bordered]: props.variant === 'bordered' })}>
+    <div
+      class={clsx(styles.GrowingTextarea, {
+        [styles.bordered]: props.variant === 'bordered',
+        [styles.hasFieldName]: props.fieldName && value().length > 0
+      })}
+    >
+      <Show when={props.fieldName && value().length > 0}>
+        <div class={styles.fieldName}>{props.fieldName}</div>
+      </Show>
       <div class={clsx(styles.growWrap, props.class)} data-replicated-value={value()}>
         <textarea
           rows={1}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d57069fb..0ee1c7b3 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -458,8 +458,10 @@ form {
     &:-webkit-autofill,
     &:not(:placeholder-shown) {
       & ~ label {
-        font-size: 80%;
-        transform: translateY(-1.7em) !important;
+        @include font-size(1.2rem);
+
+        color: var(--black-400);
+        transform: translateY(-1.8em) !important;
       }
     }
   }