(ui) Editorial block rwd

app/frontend/src/javascript/components/editorial-block/editorial-block.tsx

@@ -6,19 +6,30 @@ import { FabButton } from '../base/fab-button';
 
 declare const Application: IApplication;
 
+interface EditorialBlockProps {
+  text: string,
+  cta?: string,
+  url?: string
+}
+
 /**
  * Display a editorial text block with an optional cta button
  */
-export const EditorialBlock: React.FC = () => {
+export const EditorialBlock: React.FC<EditorialBlockProps> = ({ text, cta, url }) => {
+  /** Link to url from props */
+  const linkTo = (): void => {
+    window.location.href = url;
+  };
+
   return (
-    <div className='editorial-block'>
-      <div dangerouslySetInnerHTML={{ __html: '<h3>Lorem ipsum</h3><p>sit amet consectetur adipisicing elit. Voluptates, possimus excepturi deleniti sed pariatur sint.</p>' }}></div>
-      <FabButton className='is-main'>CTA label</FabButton>
+    <div className={`editorial-block ${cta?.length > 25 ? 'long-cta' : ''}`}>
+      <div dangerouslySetInnerHTML={{ __html: text }}></div>
+      {cta && <FabButton className='is-main' onClick={linkTo}>{cta}</FabButton>}
     </div>
   );
 };
 
-const EditorialBlockWrapper: React.FC = (props) => {
+const EditorialBlockWrapper: React.FC<EditorialBlockProps> = ({ ...props }) => {
   return (
     <Loader>
       <EditorialBlock {...props} />
@@ -26,4 +37,4 @@ const EditorialBlockWrapper: React.FC = (props) => {
   );
 };
 
-Application.Components.component('editorialBlock', react2angular(EditorialBlockWrapper, []));
+Application.Components.component('editorialBlock', react2angular(EditorialBlockWrapper, ['text', 'cta', 'url']));

app/frontend/src/javascript/components/machines/machines-list.tsx

@@ -98,7 +98,10 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
     <div className="machines-list">
       {/*  TODO: Condition to display editorial block */}
       {false &&
-        <EditorialBlock />
+        <EditorialBlock
+          text={'<h3>Lorem ipsum dolor sit amet</h3><p>Consectetur adipiscing elit. In eget eros sed odio tristique cursus. Quisque pretium tortor vel lorem tempor, eu egestas lorem laoreet. Pellentesque arcu lectus, rutrum eu volutpat nec, luctus eget sapien. Sed ligula tortor, blandit eget purus sit sed.</p>'}
+          cta={'Pif paf pouf'}
+          url={'https://www.plop.io'} />
       }
       <MachinesFilters onFilterChangedBy={handleFilterChangedBy} machineCategories={machineCategories}/>
       <div className="all-machines">

app/frontend/src/javascript/components/trainings/trainings-settings.tsx

@@ -119,7 +119,7 @@ export const TrainingsSettings: React.FC<TrainingsSettingsProps> = () => {
                       rules={{ required: isActiveAuthorizationValidity, min: 1 }}
                       step={1}
                       formState={formState}
-                      label={t('app.admin.trainings_settings.authorization_validity_duration')} />
+                      label={t('app.admin.trainings_settings.authorization_validity_period')} />
             </>}
           </div>
         </div>

app/frontend/src/stylesheets/modules/base/editorial-block.scss

@@ -8,11 +8,18 @@
   border: 1px solid var(--gray-soft-dark);
   border-radius: var(--border-radius);
   @include editor;
+  button { white-space: normal; }
 
   @media (min-width: 540px) {
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-end;
+    button { white-space: nowrap; }
+    &.long-cta {
+      flex-direction: column;
+      align-items: flex-start;
+      button { margin-left: auto; }
+    }
   }
   @media (min-width: 1200px) {
     width: 50%;

app/frontend/src/stylesheets/modules/base/fab-button.scss

@@ -1,5 +1,5 @@
 .fab-button {
-  height: 38px;
+  min-height: 38px;
   margin-bottom: 0;
   padding: 6px 12px;
   display: inline-flex;

app/frontend/templates/admin/machines/index.html

@@ -11,9 +11,9 @@
 <section class="m-lg admin-machines-manage">
   <uib-tabset justified="true" active="tabs.active">
 
-    <!--<uib-tab heading="{{ 'app.admin.machines.machines_settings' | translate }}" index="1" select="selectTab()">
+    <uib-tab heading="{{ 'app.admin.machines.machines_settings' | translate }}" index="1" select="selectTab()">
       <machines-settings on-error="onError" on-success="on-success"></machines-settings>
-    </uib-tab>-->
+    </uib-tab>
 
     <uib-tab heading="{{ 'app.admin.machines.all_machines' | translate }}" index="0" select="selectTab()">
       <div class="machines-list-container">