testio-tailwind 0.8.0 → 0.8.2

package/package.json

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

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

@@ -1,10 +1,19 @@
-
 .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 {
@@ -15,15 +24,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;
@@ -38,7 +47,7 @@
 
 .form-hint {
   @apply flex items-start text-sm mt-xs;
-  
+
   &::before {
     @apply inline-block h-icon w-icon mr-xs bg-gray;
     content: "";
@@ -73,14 +82,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 +110,3 @@ textarea.form-control {
 .form-date .form-control {
   @apply pr-lg;
 }
-

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/static/app.compiled.css

@@ -1985,10 +1985,6 @@ select{
   padding-left: 20px;
 }
 
-.pt-6{
-  padding-top: 1.5rem;
-}
-
 .pt-xs{
   padding-top: 10px;
 }
@@ -12822,6 +12818,18 @@ a.listitem:hover .icon{
   line-height: 1.25;
 }
 
+.form-label.optional::after {
+    content: "(optional)";
+    margin-left: 0.25rem;
+    display: inline-block;
+  }
+
+.form-label.optional-non-en::after {
+    content: attr(data-optional-non-en);
+    margin-left: 0.25rem;
+    display: inline-block;
+  }
+
 .form-group .form-label{
   padding-bottom: 5px;
 }
@@ -12838,7 +12846,7 @@ a.listitem:hover .icon{
   color: rgb(191 193 197 / var(--tw-text-opacity, 1));
 }
 
-.form-control, 
+.form-control,
 .form-control-static{
   height: 40px;
   width: 100%;
@@ -12849,10 +12857,10 @@ a.listitem:hover .icon{
   line-height: 18px;
 }
 
-.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{
   --tw-border-opacity: 1;
@@ -12934,8 +12942,8 @@ textarea.form-control{
   color: rgb(191 193 197 / var(--tw-text-opacity, 1));
 }
 
-.form-control:disabled, 
-.form-control.disabled, 
+.form-control:disabled,
+.form-control.disabled,
 .form-control[readonly]{
   --tw-bg-opacity: 1;
   background-color: rgb(191 193 197 / var(--tw-bg-opacity, 1));
@@ -13488,13 +13496,13 @@ textarea.form-control{
 }
    }
 
-.trix-content{
+.trix-editor .trix-content{
   margin-top: -20px;
 }
 
 @media (min-width: 768px) {
 
-.trix-content {
+.trix-editor .trix-content {
     grid-area: trix-editor
 }
    }