testio-tailwind 0.8.0 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "0.8.0",
+	"version": "0.8.6",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist",

package/src/assets/stylesheets/components/buttons.css

@@ -1,10 +1,11 @@
-
 .btn,
-input.btn, 
+input.btn,
 input[type="submit"].btn {
   @apply inline-flex justify-start items-center h-btn px-md text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
 
-  &:hover, &:focus, &:active {
+  &:hover,
+  &:focus,
+  &:active {
     @apply text-white bg-link-hover border-link-hover;
     .icon {
       @apply text-white;
@@ -12,8 +13,8 @@ input[type="submit"].btn {
   }
 }
 
-.btn-primary, 
-input.btn-primary, 
+.btn-primary,
+input.btn-primary,
 input[type="submit"].btn-primary {
   @apply text-white bg-primary;
 }
@@ -67,13 +68,13 @@ input[type="submit"].btn-ghost-inverted {
 }
 
 .btn-danger,
-input[type="submit"].btn-danger, 
+input[type="submit"].btn-danger,
 .btn-warning,
 input[type="submit"].btn-warning {
   @apply text-white bg-danger;
 }
 
-.btn-success, 
+.btn-success,
 input[type="submit"].btn-success {
   @apply text-white bg-success;
 }
@@ -107,7 +108,7 @@ input[type="submit"].btn-white-secondary {
   @apply h-btn-lg w-btn-lg p-0;
 
   .icon {
-    @apply m-0; 
+    @apply m-0;
   }
 }
 
@@ -120,7 +121,6 @@ input[type="submit"].btn-white-secondary {
   line-height: 1.2;
 }
 
-
 .btn-dashed,
 input[type="submit"].btn-dashed {
   @apply border-primary border-dashed border-1 bg-transparent;
@@ -143,38 +143,38 @@ input[type="submit"].btn-dashed {
 
 .btn-intercom {
   @apply flex items-center justify-center w-btn h-btn rounded-full bg-info hover:bg-link-hover focus:bg-link-hover;
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 
   .icon-intercom::before {
     @apply text-white;
   }
 }
 
-
-.btn:disabled, 
-.btn[disabled], 
-button:disabled, 
-button[disabled], 
-.btn.disabled, 
-.btn-sm:disabled, 
-.btn-sm[disabled], 
-.btn-sm.disabled,  
-.btn-lg-wrapper:disabled .btn-lg, 
-.btn-lg-wrapper[disabled] .btn-lg, 
-.btn-lg-wrapper.disabled .btn-lg, 
-.btn-lg:disabled, 
-.btn-lg[disabled], 
-.btn-lg.disabled, 
-.btn-xl:disabled, 
-.btn-xl[disabled], 
-.btn-xl.disabled, 
-input[type="submit"].btn[disabled], 
-input.btn[disabled], 
-input.btn-sm[disabled], 
+.btn:disabled,
+.btn[disabled],
+button:disabled,
+button[disabled],
+.btn.disabled,
+.btn-sm:disabled,
+.btn-sm[disabled],
+.btn-sm.disabled,
+.btn-lg-wrapper:disabled .btn-lg,
+.btn-lg-wrapper[disabled] .btn-lg,
+.btn-lg-wrapper.disabled .btn-lg,
+.btn-lg:disabled,
+.btn-lg[disabled],
+.btn-lg.disabled,
+.btn-xl:disabled,
+.btn-xl[disabled],
+.btn-xl.disabled,
+input[type="submit"].btn[disabled],
+input.btn[disabled],
+input.btn-sm[disabled],
 input.btn-lg[disabled] {
   @apply text-disabled border border-disabled bg-pattern-disabled-bright hover:bg-pattern-disabled-bright bg-transparent hover:bg-transparent hover:text-disabled shadow-none cursor-not-allowed;
 
-  &:hover .icon, &:focus .icon {
+  &:hover .icon,
+  &:focus .icon {
     @apply text-disabled;
   }
 
@@ -187,7 +187,10 @@ input.btn-lg[disabled] {
   }
 }
 
+button {
+  @apply font-semibold;
+}
 
 .btn-gray {
   @apply bg-gray-lighter text-black;
-}
+}

package/src/assets/stylesheets/components/forms.css

@@ -1,13 +1,23 @@
-
 .form-group {
   @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-grid-gutter;
 }
 
 .form-label {
   @apply text-label text-label leading-tight;
+
+  &.optional::after {
+    content: "(optional)";
+    @apply ml-1 inline-block;
+  }
+
+  &.optional-non-en::after {
+    content: attr(data-optional-non-en);
+    @apply ml-1 inline-block;
+  }
 }
 
-.form-group .form-label {
+.form-group .form-label,
+.form-group .field_with_errors {
   @apply pb-xxs md:pt-sm;
 }
 
@@ -15,15 +25,15 @@
   @apply text-label-inverted-color;
 }
 
-.form-control, 
+.form-control,
 .form-control-static {
   @apply h-btn w-full text-base border border-bordercolor;
 }
 
-.form-check .field_with_errors input[type=checkbox],
-.form-check .field_with_errors input[type=checkbox]:checked,
-.form-radio .field_with_errors input[type=radio],
-.form-radio .field_with_errors input[type=radio]:checked,
+.form-check .field_with_errors input[type="checkbox"],
+.form-check .field_with_errors input[type="checkbox"]:checked,
+.form-radio .field_with_errors input[type="radio"],
+.form-radio .field_with_errors input[type="radio"]:checked,
 .field_with_errors.dropzone,
 .field_with_errors .form-control {
   @apply border-danger;
@@ -37,8 +47,8 @@
 }
 
 .form-hint {
-  @apply flex items-start text-sm mt-xs;
-  
+  @apply flex items-center text-sm mt-xs mb-xs;
+
   &::before {
     @apply inline-block h-icon w-icon mr-xs bg-gray;
     content: "";
@@ -73,14 +83,12 @@ textarea.form-control {
   line-height: 1.2;
 }
 
-
 .form-control::placeholder {
   @apply text-disabled italic;
 }
 
-
-.form-control:disabled, 
-.form-control.disabled, 
+.form-control:disabled,
+.form-control.disabled,
 .form-control[readonly] {
   @apply bg-disabled;
 }
@@ -103,4 +111,3 @@ textarea.form-control {
 .form-date .form-control {
   @apply pr-lg;
 }
-

package/src/assets/stylesheets/components/modals.css

@@ -1,4 +1,3 @@
-
 .modal-wrapper {
   position: relative;
 }
@@ -8,13 +7,14 @@
 }
 
 .modal-wrapper[open] .modal-trigger::before {
-  @apply fixed w-screen h-screen top-0 left-0 z-10;
+  @apply fixed w-screen h-screen top-0 left-0 z-50;
   content: "";
-  background-color: rgba(0,0,0,.75);
+  background-color: rgba(0, 0, 0, 0.75);
 }
 
 .modal-wrapper[open] .modal-container {
-  @apply fixed flex justify-center items-start top-0 left-0 w-screen h-screen p-lg z-20 overflow-y-scroll pointer-events-none;
+  @apply fixed flex justify-center items-start top-0 left-0 w-screen h-screen p-lg overflow-y-scroll pointer-events-none;
+  z-index: 51;
 }
 
 .modal-wrapper[open] .modal {
@@ -25,16 +25,15 @@
   height: auto;
   max-width: 100vw;
   pointer-events: all;
-  z-index: 11;
+  z-index: 52;
 
   &.modal-sm {
     @apply w-modal-sm;
   }
-  
+
   &.modal-lg {
     @apply w-modal-lg;
   }
-  
 }
 
 .modal-wrapper[open] .modal-header {
@@ -82,15 +81,15 @@
   opacity: 0.25;
 }
 
-.btn.disabled, :disabled.btn {
+.btn.disabled,
+:disabled.btn {
   @apply bg-transparent text-disabled;
   background-image: url("/assets/images/btn-disabled-petrol.png");
   background-repeat: repeat;
 }
 
-
 /* prevent autoclosing when clicking on fade bg */
 
 .modal-wrapper[open].fade-close-disabled .modal-trigger::before {
   @apply pointer-events-none;
-}
+}

package/src/assets/stylesheets/components/select.css

@@ -1,4 +1,3 @@
-
 .form-select {
   @apply w-full;
 }
@@ -45,7 +44,14 @@ select {
 
 .form-select-native option {
   @apply appearance-none py-xxs;
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     @apply bg-link-hover;
   }
-}
+}
+
+/*///// Validation errors /////*/
+
+.form-select-native .field_with_errors select {
+  @apply bg-danger border-danger;
+}

package/src/assets/stylesheets/components/select2.css

@@ -1,4 +1,3 @@
-
 select.select2 {
   display: none !important;
 }
@@ -29,7 +28,6 @@ select.select2 {
 }
 
 .select2-container {
-
   .select2-selection,
   .select2-dropdown,
   .select2-search__field {
@@ -67,7 +65,6 @@ select.select2 {
   /*/ Dropdown open */
 
   &.select2-container--open {
-
     .select2-selection {
       @apply border-link-hover;
     }
@@ -92,7 +89,6 @@ select.select2 {
 }
 
 .select2-container {
-
   .select2-selection,
   .select2-search__field {
     @apply bg-primary border-primary text-white;
@@ -119,7 +115,6 @@ select.select2 {
   }
 
   &.select2-container--open {
-
     &.select2-container--below .select2-selection {
       @apply border-primary;
     }
@@ -142,10 +137,8 @@ select.select2 {
   @apply py-xs px-sm;
 }
 
-
 /*///// Multi select /////*/
 
-
 .select2-selection.select2-selection--multiple {
   @apply min-h-btn p-xs;
 }
@@ -167,7 +160,6 @@ select.select2 {
   width: 100% !important;
 }
 
-
 /*/ multi select items */
 
 .select2-container--testio li.select2-selection__choice {
@@ -200,7 +192,6 @@ select.select2 {
   }
 }
 
-
 /*///// Optgroups /////*/
 
 .select2-results__group {
@@ -215,14 +206,13 @@ select.select2 {
   overflow: visible;
 }
 
-
 /*///// Disabled /////*/
 
 .select2-container--disabled .select2-selection {
   @apply border border-bordercolor text-disabled cursor-not-allowed bg-transparent;
   background-image: url("/assets/images/pattern-striped-bright.png");
   background-repeat: repeat;
-  &:hover{
+  &:hover {
     @apply text-disabled;
   }
   &::before {
@@ -250,3 +240,12 @@ select.select2 {
 .multi-select-inputs .select2-container {
   @apply m-xs mr-0;
 }
+
+/*///// Validation errors /////*/
+
+.form-select .field_with_errors .select2-container {
+  .select2-selection,
+  .select2-search__field {
+    @apply bg-danger border-danger;
+  }
+}

package/src/assets/stylesheets/components/trix_editor.css

@@ -1,18 +1,18 @@
-
 .form-group.trix-editor {
   @apply gap-grid-gutter grid-rows-auto;
   grid-template-rows: auto;
   @screen md {
-    grid-template-areas: "label trix-toolbar"
-                         "label trix-editor";
-   }
+    grid-template-areas:
+      "label trix-toolbar"
+      "label trix-editor";
+  }
 }
 
 .trix-editor .trix-content {
   @apply -mt-grid-gutter;
   @screen md {
     grid-area: trix-editor;
-   }
+  }
 }
 
 .trix-editor .form-control {
@@ -23,7 +23,7 @@ trix-toolbar {
   @apply border border-bordercolor rounded-t;
   @screen md {
     grid-area: trix-toolbar;
-   }
+  }
 }
 
 trix-toolbar .trix-button-group {
@@ -36,8 +36,8 @@ trix-toolbar .trix-button-row {
 
 .trix-button-row::-webkit-scrollbar {
   display: none;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .trix-button-group.trix-button-group--history-tools {
@@ -47,7 +47,8 @@ trix-toolbar .trix-button-row {
 trix-toolbar .trix-button {
   @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded bg-transparent;
   font-size: 0; /* Fix for safari bug, we don't need to show any text in those buttons */
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     @apply text-white bg-link-hover;
   }
   &::before {
@@ -124,7 +125,6 @@ trix-toolbar .trix-button--icon-attach::before {
   mask-image: url("/assets/images/redo.svg");
 }
 
-
 /*//// Add link/URL popover ////*/
 
 trix-toolbar .trix-dialog {
@@ -147,7 +147,6 @@ trix-toolbar .trix-input--dialog {
   @apply w-full h-btn-sm px-xs border border-bordercolor rounded;
 }
 
-
 /*//// Attachments ////*/
 
 trix-editor .attachment-gallery .attachment,
@@ -172,3 +171,16 @@ trix-editor .attachment__progress {
     @apply h-progress-bar-thin-height bg-info;
   }
 }
+
+/*///// Validation errors /////*/
+
+.field_with_errors {
+  trix-toolbar {
+    @apply mb-5;
+  }
+
+  .trix-content,
+  select {
+    @apply border-red-500 border-1;
+  }
+}

package/src/pages/forms/forms.haml

@@ -7,6 +7,14 @@ title: Forms
   .form-group
     %label.form-label Input
     %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group
+    %label.form-label.optional Not required input
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group
+    %label.form-label.optional-non-en{"data-optional-non-en": "(freiwillig)"} Not required input
+    %div
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      .form-hint For most cases you can use the english optional label, but we also added support for any translation you might need. Just add the data-optional-non-en => t(optional)
   .form-group
     %label.form-label Input disabled
     %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
@@ -20,4 +28,4 @@ title: Forms
       %label.form-label Input with errors
     .field_with_errors
       %input.form-control{type:'text', value:""}
-      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

package/src/pages/forms/select_native.haml

@@ -33,7 +33,7 @@ title: Select native
           %option{value:"Option 6"} WHY
           %option{value:"Option 7"} XYZ
       .form-hint.error
-        You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        You made a mistake
   %p.mt-3 Use opt-groups to display hints inside the select
   .form-group.form-select-native
     %label.form-label Optgroup select

package/src/pages/forms/trix_editor.pug

@@ -8,3 +8,14 @@ title: Trix Editor
   input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
   trix-editor#space_branding_full_description.form-control.trix-content
 
+
+p.mt-3 If you have some errors on the field
+
+.form-group.trix-editor
+  .field_with_errors
+    label.form-label(for='space_branding_full_description') Full description
+  .field_with_errors
+    input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
+    trix-editor#space_branding_full_description.form-control.trix-content
+    .form-hint.error can't be blank
+