Merged in feature/matrix (pull request #55)

Feature/matrix

Approved-by: Christian Cueni

bitbucket-pipelines.yml

@@ -68,7 +68,7 @@ aliases:
   deployment: dev
   trigger: manual
   script:
-  - git push https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-dev.git HEAD:master
+  - git push --force https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-dev.git HEAD:master
 
 pipelines:
   default:

client/src/styles/_forms.scss

@@ -154,4 +154,13 @@ $icon-size: 20px;
       margin-top: 1px;
     }
   }
+
+  &--matrix {
+    margin: 0;
+
+    #{$base}__label-container {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
 }

client/src/styles/_survey.scss

@@ -2,6 +2,7 @@
   &__page-title {
     @include main-title;
     margin-bottom: $large-spacing*2;
+
     span {
       @include main-title;
     }
@@ -22,6 +23,7 @@
   &__question-title {
     @include heading-4;
     margin-bottom: $medium-spacing;
+
     > span > span { // weird survey.js html structure
       @include heading-4;
       line-height: $default-line-height;
@@ -57,6 +59,7 @@
   }
 
   $progress-margin-right: 140px;
+
   &__progress {
     background-color: $color-silver-light;
     height: 0.3em;
@@ -67,6 +70,10 @@
     margin-right: $progress-margin-right;
     box-sizing: border-box;
     display: flex;
+
+    > span {
+      display: none;
+    }
   }
 
   &__radiogroup-group, &__checkbox-group {
@@ -102,11 +109,51 @@
   &__completed-text {
     @include regular-text;
   }
+
+  &__matrix {
+    width: 100%;
+  }
+
+}
+
+.matrix {
+  margin-bottom: $large-spacing;
+
+  &__row {
+    display: table-row;
+    border-top: 1px solid $color-silver;
+  }
+
+  &__cell {
+    display: table-cell;
+    padding: $medium-spacing 0;
+    text-align: left;
+    vertical-align: middle;
+    @include small-text;
+  }
+
+  thead {
+    th {
+      text-align: left;
+      @include small-text;
+      vertical-align: bottom;
+      padding: $small-spacing/2 $small-spacing/2 $small-spacing/2 0;
+    }
+  }
+
+  &__radio {
+    margin: 0;
+  }
+
+  &__label {
+    display: flex;
+  }
 }
 
 .question {
 
   $question: &;
+
   &--error #{$question}__input {
     border-color: $color-error;
     box-shadow: none;

client/src/styles/_variables.scss

@@ -51,16 +51,8 @@ $serif-font-family: "ff-meta-serif-web-pro", serif;
 $base-font-size: 100%; // 16px in most browsers
 $base-font-size-pixels: 16px; // used to calculate rem
 
-
-//temporary, for room mock, todo: define with real types
-$red: #FA5F5F;
-$green: #6DD79A;
-$brown: #EB9E77;
-
 $list-height: 52px;
 
-
-
 $default-border-radius: 13px;
 $input-border-radius: 3px;
 
@@ -68,14 +60,12 @@ $input-border-radius: 3px;
 $modal-lateral-padding: 34px;
 $modal-input-width: 560px;
 
-
 $default-padding: 30px;
 
 $small-spacing: 10px;
 $medium-spacing: 20px;
 $large-spacing: 30px;
 
-
 $font-weight-bold: 700;
 $font-weight-semibold: 600;
 $font-weight-regular: 400;

client/src/survey.config.js

@@ -73,11 +73,16 @@ export const css = {
     'root': ''
   },
   'matrix': {
-    'root': 'table table-striped',
-    'label': 'sv_q_m_label',
-    'cellText': 'sv_q_m_cell_text',
-    'cellTextSelected': 'sv_q_m_cell_selected bg-primary',
-    'cellLabel': 'sv_q_m_cell_label'
+    'root': 'survey__matrix matrix',
+    'label': 'base-input-container__label-container matrix__label',
+    'item': 'survey__matrix-item',
+    'itemValue': 'survey__matrix-item matrix__item base-input-container__input',
+    'materialDecorator': 'base-input-container__radiobutton base-input-container__icon matrix__radio',
+    'row': 'survey__radiogroup-group matrix__row',
+    'cell': 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell',
+    'cellText': 'survey__matrix-cell-text',
+    'cellTextSelected': 'survey__matrix-cell-text--selected',
+    'cellLabel': 'survey__matrix-cell-label'
   },
   'matrixdropdown': {
     'root': 'table'