testio-tailwind 1.0.0 → 1.1.1

package/package.json

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

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

@@ -16,8 +16,7 @@
   }
 }
 
-.form-group .form-label,
-.form-group .field_with_errors {
+.form-group .form-label {
   @apply pb-xxs md:pt-sm;
 }
 
@@ -46,6 +45,10 @@
   @apply text-danger;
 }
 
+.field_with_errors .form-label {
+  @apply inline-block;
+}
+
 .form-hint {
   @apply flex items-center text-sm mt-xs mb-xs;
 

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

@@ -4,7 +4,7 @@
 
   th,
   td {
-    @apply p-xs align-middle border-t border-bordercolor;
+    @apply py-xs px-sm align-middle border-t border-bordercolor;
   }
 
   thead th {
@@ -106,4 +106,282 @@
 
 .table tr:has(.highlight-parent-row:hover) {
   @apply text-white bg-link-hover cursor-pointer;
-}
+}
+
+
+.table-standard {
+  @apply w-full;
+}
+
+.table-standard th, .table-standard td {
+  @apply text-left w-0 md:whitespace-nowrap last:w-auto align-top;
+}
+
+.table-standard th.cell-full-width, .table-standard td.cell-full-width {
+  @apply w-full;
+}
+
+.table-standard th {
+  @apply pb-2.5 pr-spacing last:pr-0;
+}
+
+.table-standard tr {
+  @apply border-t first:border-0;
+}
+
+.table-standard tfoot {
+  @apply border-t;
+}
+
+.table-standard tfoot.sum {
+  @apply border-t-4 border-double;
+}
+
+.table-standard td {
+  @apply py-2.5 pr-spacing last:pr-0;
+}
+
+.table-standard th.wrap, 
+.table-standard td.wrap {
+  @apply whitespace-normal break-words;
+  word-break: break-word;
+}
+
+.table-standard th.pre, 
+.table-standard td.pre {
+  @apply whitespace-pre-line break-words;
+  word-break: break-word;
+}
+
+td.action-cell,
+.table-cellstyle td.action-cell {
+  @apply text-right min-w-auto space-x-1.5 whitespace-nowrap;
+}
+
+.table-cellstyle {
+  border-spacing: 2px;
+  border-collapse: separate;
+}
+
+.table-cellstyle th {
+  @apply relative align-middle pl-2.5 pr-0.5 py-1 text-sm font-normal;
+}
+
+.table-cellstyle th.missing,
+.table-cellstyle th.inprogress,
+.table-cellstyle th.completed {
+  @apply pr-14;
+}
+
+.table-cellstyle th label {
+  @apply text-sm;
+}
+
+.table-cellstyle th.missing::after, 
+.table-cellstyle th.inprogress::after, 
+.table-cellstyle th.complete::after, 
+.table-cellstyle .cell-editable::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.table-cellstyle th.missing::after {
+  @apply right-0 bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/exclamation.svg");
+  mask-image: url("$package_path/images/exclamation.svg");
+}
+
+.table-cellstyle th.inprogress::after {
+  @apply bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/clock.svg");
+  mask-image: url("$package_path/images/clock.svg");
+}
+
+.table-cellstyle th.completed::after {
+  @apply h-2.5 top-2.5 right-1.5 bg-success;
+  -webkit-mask-image: url("$package_path/images/check-thick.svg");
+  mask-image: url("$package_path/images/check-thick.svg");
+}
+
+.table-cellstyle td {
+  @apply relative px-2.5 py-1.5 last:pr-3 min-w-cell min-h-11 align-top text-sm bg-gray-100;
+}
+
+.table-cellstyle td label {
+  @apply text-sm;
+}
+
+.table-cellstyle td::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.table-cellstyle td.missing {
+  @apply italic bg-transparent text-disabled;
+}
+
+.table-cellstyle td.inprogress {
+  @apply pr-9 italic bg-gray-200;
+}
+
+.table-cellstyle td.inprogress::after {
+  @apply bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/clock.svg");
+  mask-image: url("$package_path/images/clock.svg");
+}
+
+.table-cellstyle td.completed {
+  @apply pr-8;
+}
+
+.table-cellstyle .completed::after {
+  @apply h-2.5 top-2.5 right-1.5 bg-success;
+  -webkit-mask-image: url("$package_path/images/check-thick.svg");
+  mask-image: url("$package_path/images/check-thick.svg");
+}
+
+.table-cellstyle td.cell-editable, 
+.table-cellstyle td.cell-editable.missing, 
+.table-cellstyle td.cell-editable.inprogress, 
+.table-cellstyle td.cell-editable.completed {
+  @apply w-full h-full p-0;
+  word-break: break-all;
+
+  &::after {
+    content: none;
+  }
+}
+
+.cell-editable .btn {
+  @apply w-btn-sm items-start justify-center px-xxs py-xs text-white;
+}
+
+.cell-content-editable, a.cell-content-editable {
+  @apply flex justify-between w-full h-full pl-2.5 pr-9 py-1.5 text-black no-underline font-normal hover:bg-link-hover hover:text-white cursor-pointer;
+  word-break: break-word;
+  
+  &::after {
+    @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2 bg-primary;
+    content: "";
+    mask-repeat: round;
+    -webkit-mask-image: url("$package_path/images/edit.svg");
+    mask-image: url("$package_path/images/edit.svg");
+  }
+}
+
+.cell-content-editable:hover::after, a.cell-content-editable.cell-content-editable:hover::after  {
+  @apply bg-white;
+}
+
+.cell-edit-state {
+  @apply flex justify-between items-stretch w-full h-full p-0 border-2 border-bordercolor;
+}
+
+.cell-edit-state .edit-form {
+  @apply flex justify-between items-stretch h-full w-full;
+}
+
+.cell-edit-state textarea {
+  @apply min-h-full w-full text-sm rounded-none border-none;
+}
+
+.cell-actions {
+  @apply flex flex-col;
+}
+
+.cell-actions .btn {
+  @apply flex-1 w-btn-sm items-center border-0 first:border-b-1 border-white rounded-none;
+}
+
+/*////// Grid Tables //////*/
+
+.table-grid {
+  @apply grid grid-flow-col min-w-full place-items-stretch gap-0.5;
+  grid-auto-flow: row;
+}
+
+.table-grid thead,
+.table-grid tbody,
+.table-grid tr {
+  display: contents;
+}
+
+.table-grid th, 
+.table-grid td {
+  @apply w-full h-full whitespace-normal;
+}
+
+.table-grid th {
+  @apply flex justify-start items-center min-h-8;
+}
+
+.table-grid .cell-edit-state textarea {
+  @apply flex-1;
+}
+
+/*////// Selectable cells //////*/
+
+.table-cellstyle .cell-selectable {
+  @apply w-full h-full p-0;
+}
+
+.table-cellstyle .cell-selectable input {
+  @apply absolute left-2.5 top-1.5 h-5 w-5 border-black border rounded bg-transparent;
+}
+
+.table-cellstyle .cell-selectable label {
+  @apply block w-full h-full pl-10 py-1.5 pr-10 hover:bg-link-hover hover:text-white cursor-pointer;
+}
+
+.table-cellstyle .cell-selectable input[type=checkbox]:checked {
+  @apply text-white border-black bg-black;
+  background-image: none;
+
+  &::after {
+    @apply block w-full h-full bg-white;
+    content: "";
+    mask-image: url("$package_path/images/checkbox-background.svg");
+    -webkit-mask-image: url("$package_path/images/checkbox-background.svg");
+    mask-repeat: no-repeat;
+  }
+}
+
+.table-cellstyle .cell-selectable input:checked + label {
+  @apply bg-primary text-white hover:bg-link-hover;
+}
+
+.table-cellstyle td.cell-selectable.inprogress,
+.table-cellstyle td.cell-selectable.completed {
+  @apply pr-0;
+  &::after {
+    content: none;
+  }
+}
+
+.table-cellstyle td.cell-selectable label::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.table-cellstyle td.cell-selectable.inprogress label::after {
+  @apply bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/clock.svg");
+  mask-image: url("$package_path/images/clock.svg");
+}
+
+.table-cellstyle .cell-selectable.completed label::after {
+  @apply h-2.5 top-2.5 right-1.5 bg-success;
+  -webkit-mask-image: url("$package_path/images/check-thick.svg");
+  mask-image: url("$package_path/images/check-thick.svg");
+}
+
+
+.table-cellstyle td.cell-selectable.inprogress label:hover::after,
+.table-cellstyle td.cell-selectable.completed label:hover::after,
+.table-cellstyle .cell-selectable.inprogress input:checked + label::after,
+.table-cellstyle .cell-selectable.completed input:checked + label::after {
+  @apply bg-white;
+}

package/src/assets/stylesheets/tailwind.config.js

@@ -172,6 +172,7 @@ module.exports = {
         'lg': '50px',
         'xl': '60px',
         'xxl': '90px',
+        'spacing-2xl': '120px',
         'spacing-3xl': '180px',
         'spacing-4xl': '240px',
         'spacing-5xl': '300px',
@@ -233,6 +234,20 @@ module.exports = {
         '36': '9rem',
         '56': '14rem',
         'spacing': '30px',
+        'xxs': '5px',
+        'xs': '10px',
+        'sm': '15px',
+        'md': '20px',
+        'lg': '50px',
+        'xl': '60px',
+        'xxl': '90px',
+        'spacing-2xl': '150px',
+        'spacing-3xl': '180px',
+        'spacing-4xl': '240px',
+        'spacing-5xl': '300px',
+        'spacing-6xl': '360px',
+        'spacing-7xl': '420px',
+        'spacing-8xl': '480px'
       },
       minHeight: {
         'auto': 'auto',

package/src/pages/components/tables-cellstyle.pug

@@ -0,0 +1,285 @@
+---
+tags: ['components']
+title: Tables - Cell style
+---
+
+.space-y-5
+
+  .overflow-x-auto
+    table.table-standard.table-cellstyle
+      thead
+        tr
+          th Key
+          th
+            .language-code.sm.mr-icon-spacing.text-language-source CD-SM
+            span Source
+          th.missing
+            .language-code.sm.mr-icon-spacing.text-language-target DE
+            span German
+          th.inprogress
+            .language-code.sm.mr-icon-spacing.text-language-target FR
+            span French
+          th.completed
+            .language-code.sm.mr-icon-spacing.text-language-target UK
+            span Ukrainian
+          th 
+            .inline-block.icon.icon-cloud-upload.mr-icon-spacing
+            span Export to
+
+      tbody
+        tr
+          td Key
+          td Text to translate
+          td Text zur Übersetzung
+          td Texte à traduire
+          td.completed текст для перекладу
+          td my-file.yaml
+        tr
+          td Key
+          td.wrap
+            | Add 
+            code.bg-gray-200 .wrap
+            | to allow line breaks within a cell.
+            | 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.
+          td.missing Missing
+          td.inprogress In progress
+          td.completed Completed
+          td my-file.yaml
+        tr
+          td Key
+          td Text to translate
+          td.missing Missing
+          td.inprogress In progress
+          td.completed Completed
+          td my-file.yaml
+
+
+  h2.pt-5 Table cellstyle with checkboxes
+
+  .overflow-x-auto
+    table.table-standard.table-cellstyle
+      thead
+        tr
+          th Key
+          th
+            .language-code.sm.mr-icon-spacing.text-language-source CD-SM
+            span Source
+          th.missing
+            .form-check.sm
+              input#checkde1(type='checkbox')
+              label(for='checkde1') 
+                .language-code.sm.mr-icon-spacing.text-language-target DE
+                span German
+          th.inprogress
+            .form-check.sm
+              input#checkfr1(type='checkbox')
+              label(for='checkfr1') 
+                .language-code.sm.mr-icon-spacing.text-language-target FR
+                span French
+          th.completed
+            .form-check.sm
+              input#checkuk1(type='checkbox')
+              label(for='checkuk1') 
+                .language-code.sm.mr-icon-spacing.text-language-target UK
+                span Ukrainian
+          th 
+            .inline-block.icon.icon-cloud-upload.mr-icon-spacing
+            span Export to
+
+      tbody
+        tr
+          td Key
+          td Text to translate
+          td
+            .form-check.sm
+              input#checkde2(type='checkbox')
+              label(for='checkde2') Text zur Übersetzung
+          td
+            .form-check.sm
+              input#checkfr2(type='checkbox')
+              label(for='checkfr2') Texte à traduire
+          td.completed
+            .form-check.sm
+              input#checkuk2(type='checkbox')
+              label(for='checkuk2') текст для перекладу
+          td my-file.yaml
+        tr
+          td Key
+          td Text to translate
+          td.missing
+            .form-check.sm
+              input#checkde3(type='checkbox')
+              label(for='checkde3') Missing
+          td.inprogress
+            .form-check.sm
+              input#checkfr3(type='checkbox')
+              label(for='checkfr3') In progress
+          td.completed
+            .form-check.sm
+              input#checkuk3(type='checkbox')
+              label(for='checkuk3') Completed
+          td my-file.yaml
+        tr
+          td Key
+          td Text to translate
+          td.missing
+            .form-check.sm
+              input#checkde4(type='checkbox')
+              label(for='checkde4') Missing
+          td.inprogress
+            .form-check.sm
+              input#checkfr4(type='checkbox')
+              label(for='checkfr4') In progress
+          td.completed
+            .form-check.sm
+              input#checkuk4(type='checkbox')
+              label(for='checkuk4') Completed
+          td my-file.yaml
+        tr
+          td Key
+          td Text to translate
+          td
+            .form-check.sm
+              input#checkde5(type='checkbox', checked='')
+              label(for='checkde5') Text zur Übersetzung
+          td
+            .form-check.sm
+              input#checkfr5(type='checkbox', checked='')
+              label(for='checkfr5') Texte à traduire
+          td.completed
+            .form-check.sm
+              input#checkuk5(type='checkbox', checked='')
+              label(for='checkuk5') текст для перекладу
+          td my-file.yaml
+        tr
+          td Key
+          td Text to translate
+          td.missing
+            .form-check.sm
+              input#checkde6(type='checkbox', checked='')
+              label(for='checkde6') Missing
+          td.inprogress
+            .form-check.sm
+              input#checkfr6(type='checkbox', checked='')
+              label(for='checkfr6') In progress
+          td.completed
+            .form-check.sm
+              input#checkuk6(type='checkbox', checked='')
+              label(for='checkuk6') Completed
+          td my-file.yaml
+
+  h2.pt-5 Table cellstyle with editable cells
+
+  .overflow-x-auto
+    table.table-standard.table-cellstyle
+      thead
+        tr
+          th Key
+          th
+            .language-code.sm.mr-icon-spacing.text-language-source CD-SM
+            span Source
+          th.missing
+            .language-code.sm.mr-icon-spacing.text-language-target DE
+            span German
+          th.inprogress
+            .language-code.sm.mr-icon-spacing.text-language-target FR
+            span French
+
+      tbody
+        tr
+          td Key
+          td.cell-editable
+            .cell-content-editable Text to translate
+          td.cell-editable
+            .cell-content-editable Text zur Übersetzung
+          td.cell-editable
+            .cell-edit-state
+              form.edit-form
+                textarea(rows="1")
+                  | The height of this textarea grows with its content
+                .cell-actions
+                  button.btn.btn-success.white(name='button', type='submit')
+                    .icon.icon-sm.icon-check-circle-filled
+                  a.btn.btn-danger(href='#')
+                    .icon.icon-sm.icon-cross-circle-filled
+        tr
+          td Key
+          td.wrap.cell-editable
+            .cell-content-editable
+              p
+                | Add 
+                code.bg-gray-200 .wrap
+                |  to allow line breaks within a cell.
+                | 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.
+          td.missing.cell-editable.wrap
+            a.cell-content-editable ## En-tête ## **Bold** *italic* > quelques citations 1. Élément de la liste 2. Élément de la liste ![entrer la description de l'image ici][1] [1] : https://eu-images.contentstack.com/v3/assets/bltd7ba2d79b5449a0e/blt14d22b920d2f1fb2/63d1080ea8a9cb64655f0a65/cslogo.png?branch=test
+          td.inprogress.cell-editable
+            .cell-edit-state
+              form.edit-form
+                textarea(rows="1")
+                  | The height of this textarea grows with its content
+                .cell-actions
+                  button.btn.btn-success.white(name='button', type='submit')
+                    .icon.icon-sm.icon-check-circle-filled
+                  a.btn.btn-danger(href='#')
+                    .icon.icon-sm.icon-cross-circle-filled
+        tr
+          td Key
+          td.cell-editable
+            .cell-content-editable Text to translate
+          td.missing.cell-editable
+            .cell-content-editable Missing
+          td.inprogress.cell-editable
+            .cell-content-editable In progress
+
+
+  h2.pt-5 With action column at the end
+  .overflow-x-auto
+    table.table-standard.table-cellstyle
+      thead
+        tr
+          th ID
+          th Name
+          th Roles
+          th Language
+          th Status
+          th 
+
+      tbody
+        tr
+          td #123321
+          td.cell-full-width Master Translator
+          td.tags
+            span.tag Candidate
+          td Check
+          td Check
+          td.action-cell
+            .btn.btn-sm.btn-primary 
+              .icon.icon-review.mr-icon-spacing
+              | Review
+            .btn.btn-sm.btn-primary 
+              .icon.icon-pencil.mr-icon-spacing
+              | Edit
+        tr
+          td #123321
+          td.cell-full-width Master Translator
+          td.tags
+            span.tag Candidate
+          td Check
+          td Check
+          td.action-cell
+            .btn.btn-sm.btn-primary 
+              .icon.icon-pencil.mr-icon-spacing
+              | Edit
+        tr
+          td #123321
+          td.cell-full-width Master Translator
+          td.tags
+            span.tag Candidate
+            span.tag Another tag
+          td Check
+          td Check
+          td.action-cell
+            .btn.btn-sm.btn-primary 
+              .icon.icon-pencil.mr-icon-spacing
+              | Edit