testio-tailwind 0.8.6 → 1.0.0

package/README.md

@@ -47,6 +47,41 @@ npm run build
 
 ### Integration of the design system into your app
 
-* If possible import `app.css` to get all relevant modules and files. 
-* Be sure to use `tailwind.config.js` from the package to have all relevant variables ready to use. Otherwise you might get errors due to missing variables.
-
+1. Import `app.css` to get all relevant modules and files.
+2. Use the following PostCss configuration in your code `postcss.config.js` file:
+   
+    ```
+    const tailwindConfig = require('./PATHTO/tailwind.config');
+    
+    module.exports = {
+      plugins: [
+        require('postcss-import'),
+        require('tailwindcss/nesting'),
+        require('tailwindcss')({
+          content: [
+            './YOUR_LAYOUTS/**/*.{html,js,haml,pug,njk}',
+          ],
+          theme: tailwindConfig.theme,
+          plugins: tailwindConfig.plugins,
+        }),
+        require('postcss-simple-vars')(
+          {
+              variables: {
+                  package_path: '../../..',
+                  fonts_path: 'fonts'
+              }
+          }
+        ),
+        require('autoprefixer')
+      ]
+    }
+4. Change the path to the `tailwind.config.js` file from the package.
+   
+   ```
+     const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
+6. Add all paths to your layouts and components in the content block. Otherwise TailWind will not generate your required classes.
+   
+    ```
+      content: [
+        './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
+      ],

package/index.html

@@ -172,38 +172,38 @@
                 Form layout with sidebar, metasidebar and actionbar
               </a>
             
+              <a href="/pages/examples/layout-manager/" class="dropdown-link">
+                Layout Team Leader UI
+              </a>
+            
               <a href="/pages/examples/layout-metasidebar/" class="dropdown-link">
                 Layout with metasidebar
               </a>
             
-              <a href="/pages/examples/layout-sidebar/" class="dropdown-link">
-                Layout with sidebar
+              <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/" class="dropdown-link">
+                Layout with sidebar, metasidebar and actionbar
               </a>
             
               <a href="/pages/examples/layout-sidebar-actionbar/" class="dropdown-link">
                 Layout with sidebar and actionbar
               </a>
             
-              <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/" class="dropdown-link">
-                Layout with sidebar, metasidebar and actionbar
-              </a>
-            
-              <a href="/pages/examples/layout-manager/" class="dropdown-link">
-                Layout Team Leader UI
+              <a href="/pages/examples/layout-sidebar/" class="dropdown-link">
+                Layout with sidebar
               </a>
             
               <a href="/pages/examples/layout-tester/" class="dropdown-link">
                 Layout Tester UI
               </a>
             
-              <a href="/pages/examples/splitview/" class="dropdown-link">
-                Splitview Layout
-              </a>
-            
               <a href="/pages/examples/splitview-testcases/" class="dropdown-link">
                 Splitview Test Case Executions
               </a>
             
+              <a href="/pages/examples/splitview/" class="dropdown-link">
+                Splitview Layout
+              </a>
+            
           </div>
         </details>
 
@@ -291,38 +291,38 @@
                     Form layout with sidebar, metasidebar and actionbar
                   </a>
                 
+                  <a href="/pages/examples/layout-manager/" class="navlink">
+                    Layout Team Leader UI
+                  </a>
+                
                   <a href="/pages/examples/layout-metasidebar/" class="navlink">
                     Layout with metasidebar
                   </a>
                 
-                  <a href="/pages/examples/layout-sidebar/" class="navlink">
-                    Layout with sidebar
+                  <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/" class="navlink">
+                    Layout with sidebar, metasidebar and actionbar
                   </a>
                 
                   <a href="/pages/examples/layout-sidebar-actionbar/" class="navlink">
                     Layout with sidebar and actionbar
                   </a>
                 
-                  <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/" class="navlink">
-                    Layout with sidebar, metasidebar and actionbar
-                  </a>
-                
-                  <a href="/pages/examples/layout-manager/" class="navlink">
-                    Layout Team Leader UI
+                  <a href="/pages/examples/layout-sidebar/" class="navlink">
+                    Layout with sidebar
                   </a>
                 
                   <a href="/pages/examples/layout-tester/" class="navlink">
                     Layout Tester UI
                   </a>
                 
-                  <a href="/pages/examples/splitview/" class="navlink">
-                    Splitview Layout
-                  </a>
-                
                   <a href="/pages/examples/splitview-testcases/" class="navlink">
                     Splitview Test Case Executions
                   </a>
                 
+                  <a href="/pages/examples/splitview/" class="navlink">
+                    Splitview Layout
+                  </a>
+                
               </details>
             </div>
         </details>
@@ -331,8 +331,24 @@
     </header>
 
   
-    <main class="main-content main-content-padding flex flex-col justify-start items-center"><div class="w-spacing-8xl flex flex-col justify-center items-center"><img class="w-spacing-3xl h-spacing-3xl mb-8 mt-5" src="/assets/images/logo-testio/testio_vertical_purpleteal_black.svg"><p class="max-w-paragraph mb-8">This design system provides Test IO themed components based on TailWindCSS. It helps designers and developers build products and services more easily. Component classes, and HTML snippets offer a starting point for development.</p><a class="mb-8" href="https://badge.fury.io/js/testio-tailwind"><img src="https://badge.fury.io/js/testio-tailwind.svg" alt="npm version" height="40"></a></div><div class="w-spacing-8xl"><div class="section-header"><h3 class="section-title">Technology</h3></div><div class="trix-content"><ul class="max-w-paragraph mb-8"><li>TailWindCSS V3</li><li>PostCSS</li></ul></div><div class="section-header"><h3 class="section-title">Integration</h3></div><div class="trix-content"><p class="max-w-paragraph">Import <code>app.css</code>to get all relevant modules and files.
-Be sure to use <code>tailwind.config.js</code>from the package to have all relevant variables ready to use. Otherwise you might get errors due to missing variables.</p></div><div class="section-header"><h3 class="section-title">Simple start</h3></div><p class="max-w-paragraph mb-heading">To get started without any customization just download the current compiled CSS below and implement your components with the provided code.</p><a class="btn btn-block btn-primary max-w-paragraph mb-8" href="/static/app.compiled.css" target="_blank"><div class="icon icon-cloud-download mr-icon-spacing"></div>Download compiled CSS</a></div></main>
+    <main class="main-content main-content-padding flex flex-col justify-start items-center"><div class="w-spacing-8xl flex flex-col justify-center items-center"><img class="w-spacing-3xl h-spacing-3xl mb-8 mt-5" src="/assets/images/logo-testio/testio_vertical_purpleteal_black.svg"><p class="max-w-paragraph mb-8">This design system provides Test IO themed components based on TailWindCSS. It helps designers and developers build products and services more easily. Component classes, and HTML snippets offer a starting point for development.</p><a class="mb-8" href="https://badge.fury.io/js/testio-tailwind"><img src="https://badge.fury.io/js/testio-tailwind.svg" alt="npm version" height="40"></a></div><div class="w-spacing-8xl"><div class="section-header"><h3 class="section-title">Technology</h3></div><div class="trix-content"><ul class="max-w-paragraph mb-8"><li>TailWindCSS V3</li><li>PostCSS</li></ul></div><div class="section-header"><h3 class="section-title">Integration</h3></div><div class="trix-content max-w-paragraph"><ol><li>Import <code>app.css</code>to get all relevant modules and files.</li><li>Use the following PostCss configuration in your <code>postcss.config.js </code>file:<pre class="mt-xs"><code class="language-js">const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
+ 
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss')({
+      content: [
+        './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
+      ],
+      theme: tailwindConfig.theme,
+      plugins: tailwindConfig.plugins,
+    }),
+    require('autoprefixer')
+  ]
+}</code></pre></li><li>Change the path to the tailwind.config.js file from the package.<pre class="mt-xs"><code class="language-js">const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');</code></pre></li><li>Add all paths to your layouts and components in the content block. Otherwise TailWind will not generate your required classes.<pre class="mt-xs"><code class="language-js"> content: [
+   './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
+ ],</code></pre></li></ol></div><div class="section-header"><h3 class="section-title">Simple start</h3></div><p class="max-w-paragraph mb-heading">To get started without any customization just download the current compiled CSS below and implement your components with the provided code.</p><a class="btn btn-block btn-primary max-w-paragraph mb-8" href="/static/app.compiled.css" target="_blank"><div class="icon icon-cloud-download mr-icon-spacing"></div>Download compiled CSS</a></div></main>
   
   
   <script src="/static/app.bundled.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "0.8.6",
+	"version": "1.0.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist",
@@ -20,7 +20,6 @@
 	"devDependencies": {
 		"@11ty/eleventy": "^2.0.1",
 		"@babel/core": "^7.17.10",
-		"@babel/plugin-proposal-class-properties": "^7.12.1",
 		"@babel/preset-env": "^7.17.10",
 		"autoprefixer": "^10.4.21",
 		"babel-loader": "^8.2.5",
@@ -57,6 +56,7 @@
 	},
 	"peerDependencies": {
 		"@tailwindcss/postcss": "^4.1.10",
+		"@tailwindcss/typography": "^0.5.16",
 		"autoprefixer": "^10.0.0",
 		"postcss": "^8.1.0",
 		"postcss-cli": "^9.0.1",

package/src/assets/stylesheets/app.css

@@ -2,7 +2,6 @@
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
 
 @import "tom-select/dist/css/tom-select.css";
 @import "select2/dist/css/select2.css";
@@ -75,4 +74,6 @@
 @import "components/manager/manager_header";
 @import "components/manager/manager_sidebar";
 
-@import "designsystem-styles";
+@import "components/designsystem/designsystem-styles";
+
+@import "tailwindcss/utilities";

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

@@ -152,6 +152,7 @@ input[type="submit"].btn-dashed {
 
 .btn:disabled,
 .btn[disabled],
+.btn-inverted[disabled],
 button:disabled,
 button[disabled],
 .btn.disabled,
@@ -174,7 +175,8 @@ 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 {
+  &:focus .icon,
+  .icon {
     @apply text-disabled;
   }
 

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

@@ -20,7 +20,7 @@
 }
 
 .device.outline {
-  @apply p-sm border border-bordercolor rounded;
+  @apply p-sm border border-bordercolor rounded outline-none;
 }
 
 .device-icon {

package/src/assets/stylesheets/components/fonts/testio.svg

@@ -1035,4 +1035,6 @@
 <glyph unicode="&#xecf1;" glyph-name="banking" horiz-adv-x="717" d="M716.749 98.944v-23.245h-614.4v51.2h614.4v256c0 56.525-45.875 102.4-102.4 102.4h-512c-56.525 0-102.4-45.875-102.4-102.4v-307.2c0-56.499 45.875-102.4 102.4-102.4h512c56.525 0 102.4 45.901 102.4 102.4v23.245zM230.425 357.299v-128.025h-128.025v128.025h128.025zM614.349 229.299h-307.2v51.2h307.2v-51.2zM409.549 306.099h-102.4v51.2h102.4v-51.2zM614.349 306.099h-179.2v51.2h179.2v-51.2z" />
 <glyph unicode="&#xecf2;" glyph-name="wallet-lg" horiz-adv-x="640" d="M640 256c0 14.131-11.469 25.6-25.6 25.6h-166.4c-14.131 0-25.6-11.469-25.6-25.6v-76.8c0-14.131 11.469-25.6 25.6-25.6h166.4c14.131 0 25.6 11.469 25.6 25.6v76.8zM486.669 243.2c14.285 0 25.881-11.597 25.881-25.869 0-14.285-11.597-25.882-25.882-25.882-14.272 0-25.869 11.597-25.869 25.882 0 14.272 11.597 25.869 25.869 25.869zM614.4 128c0 0 0-45.978 0-89.6 0-42.419-34.381-76.8-76.8-76.8-118.041 0-342.759 0-460.8 0-42.419 0-76.8 34.381-76.8 76.8 0 96.666 0 261.734 0 358.4 0 42.419 34.381 76.8 76.8 76.8 118.041 0 342.759 0 460.8 0 20.378 0 39.923-8.102 54.323-22.515s22.49-33.959 22.477-54.336c0-43.61 0-89.549 0-89.549h-179.2c-21.197 0-38.4-17.203-38.4-38.4v-102.4c0-21.197 17.203-38.4 38.4-38.4 0 0 179.2 0 179.2 0zM563.2 25.050h-512v-25.6h512v25.6z" />
 <glyph unicode="&#xecf3;" glyph-name="banking-lg" horiz-adv-x="717" d="M716.774 50.65l-614.375 0.55v50.649h614.375v268.8c0 56.525-45.888 102.4-102.4 102.4h-512c-56.512 0-102.4-45.875-102.4-102.4v-307.2c0-56.512 45.888-102.4 102.4-102.4h512c52.365 0 96.333 38.848 102.4 89.6zM332.774 140.25h-89.6v25.6h89.6v-25.6zM473.575 140.25h-89.6v25.6h89.6v-25.6zM614.375 140.25h-89.6v25.6h89.6v-25.6zM191.975 140.25h-89.6v25.6h89.6v-25.6zM230.579 345.049v-128.102h-128.102v128.102h128.102zM614.375 217.050h-294.4v51.2h294.4v-51.2zM614.375 293.85h-179.2v51.2h179.2v-51.2zM409.575 293.85h-89.6v51.2h89.6v-51.2z" />
+<glyph unicode="&#xecf4;" glyph-name="cross-thick-centered" d="M256 284.16l-73.139 73.139-54.861-54.861 73.139-73.139-73.139-73.139 54.861-54.861 73.139 73.139 73.139-73.139 54.861 54.861-73.139 73.139 73.139 73.139-54.861 54.861-73.139-73.139z" />
+<glyph unicode="&#xecf5;" glyph-name="check-thick-centered" d="M115.072 198.041l104.73-95.642 177.126 206.643-57.575 49.357-126.208-147.226c0 0-46.925 42.855-46.925 42.855l-51.149-55.987z" />
 </font></defs></svg>