testio-tailwind 0.5.0 → 0.6.0

package/package.json

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

package/src/assets/stylesheets/app.css

@@ -60,6 +60,7 @@
 @import "components/select2";
 @import "components/select";
 @import "components/test_header";
+@import "components/ratingscale";
 
 @import "components/customer/customer_header";
 @import "components/customer/customer_sidebar";

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

@@ -45,11 +45,15 @@
   @apply relative flex flex-col bg-card rounded;
 }
 
+.card-title {
+  @apply block overflow-ellipsis text-heading-5 leading-5;
+}
+
 .card.card-sm {
   @apply w-full sm:w-card-sm;
 
   .card-title {
-    @apply block overflow-ellipsis text-heading-5 text-center;
+    @apply block overflow-ellipsis text-heading-5 leading-5 text-center;
   }
 }
 
@@ -62,7 +66,7 @@
 }
 
 .card-header {
-  @apply relative px-md pt-md;
+  @apply relative px-md py-md;
 }
 
 .card-header .popover_info_icon {
@@ -93,6 +97,10 @@
   flex: 1 1 1;
 }
 
+.card-header ~ .card-body {
+  @apply pt-0;
+}
+
 .card.highlight {
   @apply text-white bg-info border-0;
 
@@ -146,4 +154,61 @@
 .card .card-info-popover {
   @apply absolute right-xxs top-xxs;
   z-index: 1;
+}
+
+/*/// Card badges ///*/
+
+.card .card-badge {
+  @apply absolute top-0 right-0 overflow-hidden;
+  width: 65px;
+  height: 65px;
+}
+
+.card .card-badge::before {
+  @apply absolute block bg-gray-darker;
+  content: "";
+  transform: rotate(45deg);
+  width: 100px;
+  height: 25px;
+  right: -25px;
+  top: 10px;
+}
+
+.card .card-badge::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs bg-white;
+  content: "";
+  right: 14px;
+  top: 17px;
+  mask-image: url("/assets/images/exclamation-circle-filled.svg");
+  mask-repeat: no-repeat;
+}
+
+.card .card-badge.success {
+  &::before {
+    @apply bg-success;
+  }
+  &::after {
+    mask-image: url("/assets/images/check-thick.svg");
+    right: 16px;
+  }
+}
+
+.card .card-badge.danger,
+.card .card-badge.high-priority {
+  &::before {
+    @apply bg-danger;
+  }
+  &::after {
+    mask-image: url("/assets/images/exclamation-circle-filled.svg");
+  }
+}
+
+.card .card-badge.info, 
+.card .card-badge.opportunity {
+  &::before {
+    @apply bg-info;
+  }
+  &::after {
+    mask-image: url("/assets/images/exclamation-circle-filled.svg");
+  }
 }

package/src/assets/stylesheets/components/customer/customer_productcards.css

@@ -16,7 +16,7 @@
 }
 
 .product-card .card-header {
-  @apply flex flex-row pl-0 pt-0 bg-card border-0;
+  @apply flex flex-row pl-0 py-0 bg-card border-0;
 }
 
 .product-card .card-icon {

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

@@ -8,29 +8,13 @@
 }
 
 .modal-wrapper[open] .modal-trigger::before {
+  @apply fixed w-screen h-screen top-0 left-0 z-10;
   content: "";
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 1;
   background-color: rgba(0,0,0,.75);
 }
 
 .modal-wrapper[open] .modal-container {
-  @apply p-lg;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: start;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow-y: scroll;
-  z-index: 1;
-  pointer-events: none;
+  @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;
 }
 
 .modal-wrapper[open] .modal {
@@ -103,3 +87,10 @@
   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/ratingscale.css

@@ -0,0 +1,24 @@
+
+.rating-wrapper {
+  @apply flex flex-col min-w-0;
+}
+
+.rating-scale {
+  @apply grid grid-flow-col gap-xxs md:gap-xs;
+}
+
+.rating-scale .selectable-token {
+  @apply w-full;
+}
+
+.rating-scale .selectable-token label {
+  @apply justify-center w-full px-xxs;
+}
+
+.rating-labels {
+  @apply flex justify-between mt-xxs text-label text-label-color leading-tight;
+}
+
+.rating-labels .label-max {
+  @apply text-right;
+}

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

@@ -195,29 +195,3 @@
     @apply block text-icon-xl h-icon-xl my-xs;
   }
 }
-
-/*/ Rating scale /*/
-
-.rating-wrapper {
-  @apply flex flex-col min-w-0;
-}
-
-.rating-scale {
-  @apply grid grid-flow-col gap-xs;
-}
-
-.rating-scale .selectable-token {
-  @apply w-full;
-}
-
-.rating-scale .selectable-token label {
-  @apply justify-center w-full;
-}
-
-.rating-labels {
-  @apply flex justify-between mt-xxs text-label text-label-color leading-tight;
-}
-
-.rating-labels .label-max {
-  @apply text-right;
-}

package/src/assets/stylesheets/components/tester/tester_cards.css

@@ -37,47 +37,6 @@
   @apply inline-block w-xxl h-xxl rounded overflow-hidden shadow;
 }
 
-.tester-card .card-badge {
-  @apply absolute top-0 right-0;
-}
-
-.tester-card .card-badge::before {
-  @apply absolute block bg-gray-darker;
-  content: "";
-  transform: rotate(45deg);
-  width: 100px;
-  height: 25px;
-  right: -25px;
-  top: 10px;
-}
-
-.tester-card .card-badge::after {
-  @apply absolute inline-block w-icon-xs h-icon-xs bg-white;
-  content: "";
-  right: 14px;
-  top: 17px;
-  mask-image: url("/assets/images/exclamation-circle-filled.svg");
-  mask-repeat: no-repeat;
-}
-
-.tester-card .card-badge.high-priority {
-  &::before {
-    @apply bg-danger;
-  }
-  &::after {
-    mask-image: url("/assets/images/exclamation-circle-filled.svg");
-  }
-}
-
-.tester-card .card-badge.opportunity {
-  &::before {
-    @apply bg-info;
-  }
-  &::after {
-    mask-image: url("/assets/images/verify-exclamation.svg");
-  }
-}
-
 .tester-card .card-label {
   @apply text-xs;
 }

package/src/pages/components/card_badges.haml

@@ -0,0 +1,30 @@
+---
+tags: components
+title: Card badges
+---
+
+.grid-cards
+  .card
+    .card-header
+      .card-badge
+      %h3.card-title Card with badge
+    .card-body
+      %p Card-body with some example content 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.
+  .card
+    .card-header
+      .card-badge.success
+      %h3.card-title Card with success badge
+    .card-body
+      %p Card-body with some example content 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.
+  .card
+    .card-header
+      .card-badge.danger
+      %h3.card-title Card with danger badge
+    .card-body
+      %p Card-body with some example content 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.
+  .card
+    .card-header
+      .card-badge.info
+      %h3.card-title Card with info badge
+    .card-body
+      %p Card-body with some example content 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.

package/src/pages/components/modal_details.haml

@@ -3,7 +3,10 @@ tags: components
 title: Modal - based on details tag
 ---
 
-%p.mb-heading Add the class .modal-close-btn to an element to make it close it's parent modal.
+%p.mb-heading
+  Add the class 
+  %code.bg-gray-lighter.rounded.mx-xxs .modal-close-btn
+  to an element to make it close it's parent modal.
 
 %details.modal-wrapper.mb-md
   %summary.modal-trigger
@@ -64,5 +67,28 @@ title: Modal - based on details tag
         %a.btn.btn-success{href:''} Success
         %a.btn.btn-danger{href:''} Danger
         %a.btn.btn-secondary.close-btn{href:''} Close
-
-
+%p.mb-heading.mt-md
+  If you want a modal that doesn't close automatically when clicking on the fade background, then add the class  
+  %code.bg-gray-lighter.rounded.mx-xxs .fade-close-disabled
+  to the
+  %code.bg-gray-lighter.rounded.mx-xxs .modal-wrapper
+  . This might be the case when you want to force the user to click a button to close the modal.
+%details.modal-wrapper.fade-close-disabled
+  %summary.modal-trigger
+    .btn.btn-primary Open modal with auto closing disabled.
+  .modal-container
+    .modal
+      .modal-header
+        %h2.modal-title Modal
+        .btn.btn-square.close-btn
+          .icon.icon-cross
+      .modal-content
+        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        .form-grid
+          .form-group
+            %label.form-label Input
+            %input.form-control{type:'text', placeholder:''}
+      .modal-footer
+        %a.btn.btn-primary{href:''} Primary
+        %a.btn.btn-secondary{href:''} Secondary
+        %a.btn.btn-secondary.close-btn{href:''} Close

package/src/pages/forms/form-card.haml

@@ -25,7 +25,7 @@ title: Form card
       %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
     .form-group.form-select
       %label.form-label Select
-      %select{placeholder: "Please select"}
+      %select.tom-select{placeholder: "Please select"}
         %option{value: ""}
         %option{value:"Option 1"} Option 1
         %option{value:"Option 2"} Option 2