Merge pull request #106 from RoundingWell/bugfix/program-sidebar-styles

Move program sidebar view

src/js/apps/admin/sidebar/program-sidebar_app.js

@@ -2,7 +2,7 @@ import Radio from 'backbone.radio';
 
 import App from 'js/base/app';
 
-import { LayoutView } from 'js/views/admin/programs/sidebar/programs-sidebar_views';
+import { LayoutView } from 'js/views/admin/sidebar/program/programs-sidebar_views';
 
 export default App.extend({
   onBeforeStart({ program }) {

src/js/i18n/en-US.yml

@@ -21,24 +21,23 @@ careOptsFrontend:
       workflows: Workflows
       addActionBtn: Action
     sidebar:
-      disabledSaveView:
-        saveBtn: Save
-      layoutView:
-        menuOptions:
-          headingText: Program Menu
-          delete: Delete Program
-      programDetailsTemplate:
-        placeholder: Add Details
-      programNameTemplate:
-        placeholder: New Program
-      programSidebarTemplate:
-        headingText: Program
-      programSidebarViews:
-        disabledSaveView:
-          saveBtn: Save
-        saveView:
-          cancelBtn: Cancel
-          saveBtn: Save
+      program:
+        programDetailsTemplate:
+          placeholder: Add Details
+        programNameTemplate:
+          placeholder: New Program
+        programSidebarTemplate:
+          headingText: Program
+        programSidebarViews:
+          disabledSaveView:
+            saveBtn: Save
+          layoutView:
+            menuOptions:
+              headingText: Program Menu
+              delete: Delete Program
+          saveView:
+            cancelBtn: Cancel
+            saveBtn: Save
   components:
     datepicker:
       clear: Clear

src/js/views/admin/sidebar/program/program-details.hbs

@@ -0,0 +1,2 @@
+<textarea class="input-secondary textarea-flex__input js-input" placeholder="{{ @intl.admin.sidebar.program.programDetailsTemplate.placeholder }}">{{ details }}</textarea>
+<div class="textarea-flex__container input-secondary programs-sidebar__details js-spacer">{{ details }} </div>

src/js/views/admin/programs/sidebar/program-name.hbs → src/js/views/admin/sidebar/program/program-name.hbs

@@ -1,5 +1,5 @@
 <div class="pos--relative">
-  <textarea class="input-primary textarea-flex__input js-input{{#if error}} has-error{{/if}}"{{#if isNew}} placeholder="{{ @intl.admin.sidebar.programNameTemplate.placeholder }}"{{/if}}>{{ name }}</textarea>
+  <textarea class="input-primary textarea-flex__input js-input{{#if error}} has-error{{/if}}"{{#if isNew}} placeholder="{{ @intl.admin.sidebar.program.programNameTemplate.placeholder }}"{{/if}}>{{ name }}</textarea>
   <div class="textarea-flex__container input-primary js-spacer">{{ name }} </div>
 </div>
 {{#if error}}<div class="form-error u-margin--b-4">{{ error }}</div>{{/if}}

src/js/views/admin/programs/sidebar/program-sidebar.hbs → src/js/views/admin/sidebar/program/program-sidebar.hbs

@@ -1,7 +1,7 @@
 <div class="flex-grow">
   <div class="flex">
     <div class="flex-grow">
-      <h3 class="program-sidebar__heading">{{ @intl.admin.sidebar.programSidebarTemplate.headingText }}</h3>
+      <h3 class="programs-sidebar__heading">{{ @intl.admin.sidebar.program.programSidebarTemplate.headingText }}</h3>
     </div>
     <div>
       <button class="button--icon u-margin--r-8 js-menu">{{far "ellipsis-h"}}</button>

src/js/views/admin/programs/sidebar/programs-sidebar.scss → src/js/views/admin/sidebar/program/programs-sidebar.scss

@@ -1,21 +1,21 @@
-.program-sidebar {
+.programs-sidebar {
   border-left: 1px solid $black-90;
   overflow-y: auto;
   padding: 16px 24px;
 }
 
-.program-sidebar__details {
+.programs-sidebar__details {
   min-height: 58px;
 }
 
-.program-sidebar__heading {
+.programs-sidebar__heading {
   font-weight: 600;
 }
 
-.program-sidebar__delete-icon {
+.programs-sidebar__delete-icon {
   color: $error-color;
 }
 
-.is-highlighted .program-sidebar__delete-icon {
+.is-highlighted .programs-sidebar__delete-icon {
   color: $white;
 }

src/js/views/admin/programs/sidebar/programs-sidebar_views.js → src/js/views/admin/sidebar/program/programs-sidebar_views.js

@@ -18,14 +18,14 @@ import './programs-sidebar.scss';
 
 const DisabledSaveView = View.extend({
   className: 'u-margin--t-8 u-text-align--right',
-  template: hbs`<button class="button--green" disabled>{{ @intl.admin.sidebar.programSidebarViews.disabledSaveView.saveBtn }}</button>`,
+  template: hbs`<button class="button--green" disabled>{{ @intl.admin.sidebar.program.programSidebarViews.disabledSaveView.saveBtn }}</button>`,
 });
 
 const SaveView = View.extend({
   className: 'u-margin--t-8 u-text-align--right',
   template: hbs`
-    <button class="button--text u-margin--r-4 js-cancel">{{ @intl.admin.sidebar.programSidebarViews.saveView.cancelBtn }}</button>
-    <button class="button--green js-save">{{ @intl.admin.sidebar.programSidebarViews.saveView.saveBtn }}</button>
+    <button class="button--text u-margin--r-4 js-cancel">{{ @intl.admin.sidebar.program.programSidebarViews.saveView.cancelBtn }}</button>
+    <button class="button--green js-save">{{ @intl.admin.sidebar.program.programSidebarViews.saveView.saveBtn }}</button>
   `,
   triggers: {
     'click .js-cancel': 'cancel',
@@ -87,7 +87,7 @@ const LayoutView = View.extend({
     'save': 'save',
     'cancel': 'cancel',
   },
-  className: 'program-sidebar flex-region',
+  className: 'programs-sidebar flex-region',
   template: ProgramSidebarTemplate,
   regions: {
     name: '[data-name-region]',
@@ -111,8 +111,8 @@ const LayoutView = View.extend({
     const optionlist = new Optionlist({
       ui: this.ui.menu,
       uiView: this,
-      headingText: intl.admin.sidebar.layoutView.menuOptions.headingText,
-      itemTemplate: hbs`<span class="program-sidebar__delete-icon">{{far "trash-alt"}}</span>{{ @intl.admin.sidebar.layoutView.menuOptions.delete }}`,
+      headingText: intl.admin.sidebar.program.programSidebarViews.layoutView.menuOptions.headingText,
+      itemTemplate: hbs`<span class="programs-sidebar__delete-icon">{{far "trash-alt"}}</span>{{ @intl.admin.sidebar.program.programSidebarViews.layoutView.menuOptions.delete }}`,
       lists: [{ collection: menuOptions }],
     });
 

test/integration/admin/programs/sidebar/program-sidebar.js

@@ -23,30 +23,30 @@ context('program sidebar', function() {
       .click();
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-name-region] .js-input')
       .should('be.focused')
       .should('have.attr', 'placeholder', 'New Program');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-save-region]')
       .contains('Save')
       .should('be.disabled');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-name-region] .js-input')
       .type('Test Program');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-save-region]')
       .contains('Cancel')
       .click();
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .should('not.exist');
 
     cy
@@ -66,34 +66,34 @@ context('program sidebar', function() {
       }).as('routePostProgramError');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-name-region] .js-input')
       .should('be.empty')
       .type('a{backspace}')
       .type('Test{enter} Program Name');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-save-region]')
       .contains('Save')
       .click()
       .wait('@routePostProgramError');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-name-region]')
       .should('contain', 'name error')
       .find('.js-input')
       .should('have.css', 'border-color', stateColors.error);
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-save-region]')
       .contains('Save')
       .should('be.disabled');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-details-region] .js-input')
       .type('a{backspace}')
       .type('Test{enter} Details');
@@ -118,7 +118,7 @@ context('program sidebar', function() {
       .as('routePostProgram');
 
     cy
-      .get('.program-sidebar')
+      .get('.programs-sidebar')
       .find('[data-save-region]')
       .contains('Save')
       .click();
@@ -133,7 +133,7 @@ context('program sidebar', function() {
       });
 
     cy
-      .get('program-sidebar')
+      .get('.programs-sidebar')
       .should('not.exist');
 
     cy
@@ -157,7 +157,7 @@ context('program sidebar', function() {
       .click();
 
     cy
-      .get('program-sidebar')
+      .get('.programs-sidebar')
       .should('not.exist');
   });
 });