Publish Settings show field name (#180)

Publish Settings show field name

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",

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": "Дискурс существует благодаря нашему общему вкладу",

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)}
                   />

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)}

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%;

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}

src/styles/app.scss

@@ -458,8 +458,10 @@ form {
     &:-webkit-autofill,
     &:not(:placeholder-shown) {
       & ~ label {
-        font-size: 80%;
+        @include font-size(1.2rem);
-        transform: translateY(-1.7em) !important;
+
+        color: var(--black-400);
+        transform: translateY(-1.8em) !important;
       }
     }
   }