testio-tailwind 0.2.0 → 0.2.1

package/package.json

@@ -1,66 +1,66 @@
-{
-	"name": "testio-tailwind",
-	"version": "0.2.0",
-	"description": "Tailwind based design system for Test IO",
-	"scripts": {
-		"clean": "del dist",
-		"dev:cirro-postcss": "postcss src/assets/stylesheets/*.css -o src/static/app.compiled.css --watch --verbose --config src/assets/stylesheets/",
-		"dev:scripts": "webpack --watch --config webpack.config.js",
-		"dev:11ty": "eleventy --serve --watch",
-		"build:cirro-11ty": "ELEVENTY_ENV=production APP=cirro eleventy",
-		"build:cirro-postcss": "NODE_ENV=production postcss src/assets/stylesheets/app.css -o dist/static/app.compiled.css --config src/assets/stylesheets/",
-		"build:scripts": "NODE_ENV=production webpack --mode production --config webpack.config.js",
-		"build:icon-page": "node icon-classes-extractor.js; cp src/static/icons-cirro.json dist/static/icons-cirro.json;",
-		"build:copy_entry_file": "cp index.html dist",
-		"start": "cross-env APP=cirro run-p dev:* --print-label",
-		"build": "cross-env APP=cirro run-s clean build:* --print-label"
-	},
-	"author": "test IO",
-	"license": "",
-	"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.15",
-		"babel-loader": "^8.2.5",
-		"cross-env": "^7.0.3",
-		"css-loader": "^5.0.1",
-		"del-cli": "^3.0.1",
-		"html-minifier": "^4.0.0",
-		"luxon": "^1.25.0",
-		"npm-run-all": "^4.1.5",
-		"postcss": "^8.1.0",
-		"postcss-cli": "^8.0.0",
-		"postcss-import": "^12.0.1",
-		"postcss-loader": "^4.0.4",
-		"postcss-nesting": "^7.0.1",
-		"pug-frontmatter-html-loader": "^0.1.2",
-		"tailwindcss": "^2.2.16",
-		"webpack": "^5.x",
-		"webpack-cli": ">=4.x"
-	},
-	"dependencies": {
-		"@tailwindcss/forms": "^0.1.4",
-		"@tailwindcss/line-clamp": "^0.1.0",
-		"@tailwindcss/typography": "^0.4.0",
-		"autosize": "^5.0.1",
-		"dropzone": "^6.0.0-beta.2",
-		"echarts": "^5.6.0",
-		"hamljs": "^0.6.2",
-		"jquery": "^3.6.0",
-		"markdown-it": "^14.1.0",
-		"postcss-simple-vars": "^5.0.2",
-		"select2": "^4.1.0-rc.0",
-		"tailwindcss": "^2.2.16",
-		"tom-select": "^2.3.1",
-		"trix": "^2.0.7"
-	},
-	"peerDependencies": {
-		"autoprefixer": "^10.0.0",
-		"postcss": "^8.1.0",
-		"postcss-cli": "^9.0.1",
-		"tailwindcss": "^2.2.16",
-		"tom-select": "^2.3.1"
-	}
-}
+{
+	"name": "testio-tailwind",
+	"version": "0.2.1",
+	"description": "Tailwind based design system for Test IO",
+	"scripts": {
+		"clean": "del dist",
+		"dev:cirro-postcss": "postcss src/assets/stylesheets/*.css -o src/static/app.compiled.css --watch --verbose --config src/assets/stylesheets/",
+		"dev:scripts": "webpack --watch --config webpack.config.js",
+		"dev:11ty": "eleventy --serve --watch",
+		"build:cirro-11ty": "ELEVENTY_ENV=production APP=cirro eleventy",
+		"build:cirro-postcss": "NODE_ENV=production postcss src/assets/stylesheets/app.css -o dist/static/app.compiled.css --config src/assets/stylesheets/",
+		"build:scripts": "NODE_ENV=production webpack --mode production --config webpack.config.js",
+		"build:icon-page": "node icon-classes-extractor.js; cp src/static/icons-cirro.json dist/static/icons-cirro.json;",
+		"build:copy_entry_file": "cp index.html dist",
+		"start": "cross-env APP=cirro run-p dev:* --print-label",
+		"build": "cross-env APP=cirro run-s clean build:* --print-label"
+	},
+	"author": "test IO",
+	"license": "",
+	"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.15",
+		"babel-loader": "^8.2.5",
+		"cross-env": "^7.0.3",
+		"css-loader": "^5.0.1",
+		"del-cli": "^3.0.1",
+		"html-minifier": "^4.0.0",
+		"luxon": "^1.25.0",
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.1.0",
+		"postcss-cli": "^8.0.0",
+		"postcss-import": "^12.0.1",
+		"postcss-loader": "^4.0.4",
+		"postcss-nesting": "^7.0.1",
+		"pug-frontmatter-html-loader": "^0.1.2",
+		"tailwindcss": "^2.2.16",
+		"webpack": "^5.x",
+		"webpack-cli": ">=4.x"
+	},
+	"dependencies": {
+		"@tailwindcss/forms": "^0.1.4",
+		"@tailwindcss/line-clamp": "^0.1.0",
+		"@tailwindcss/typography": "^0.4.0",
+		"autosize": "^5.0.1",
+		"dropzone": "^6.0.0-beta.2",
+		"echarts": "^5.6.0",
+		"hamljs": "^0.6.2",
+		"jquery": "^3.6.0",
+		"markdown-it": "^14.1.0",
+		"postcss-simple-vars": "^5.0.2",
+		"select2": "^4.1.0-rc.0",
+		"tailwindcss": "^2.2.16",
+		"tom-select": "^2.3.1",
+		"trix": "^2.0.7"
+	},
+	"peerDependencies": {
+		"autoprefixer": "^10.0.0",
+		"postcss": "^8.1.0",
+		"postcss-cli": "^9.0.1",
+		"tailwindcss": "^2.2.16",
+		"tom-select": "^2.3.1"
+	}
+}

package/src/_data/navigation.json

@@ -1,44 +1,44 @@
-{
-  "items": [
-    {
-      "text": "CI",
-      "url": "/ci/"
-    },
-    {
-      "text": "Colors",
-      "url": "/colors/"
-    },
-    {
-      "text": "Buttons",
-      "url": "/buttons/"
-    },
-    {
-      "text": "Components",
-      "url": "/components/"
-    },
-    {
-      "text": "Forms",
-      "url": "/forms/"
-    },
-    {
-      "text": "Charts",
-      "url": "/charts/"
-    },
-    {
-      "text": "Icons",
-      "url": "/icons/"
-    },
-    {
-      "text": "Layout",
-      "url": "/layout/"
-    },
-    {
-      "text": "Navigation",
-      "url": "/navigation/"
-    },
-    {
-      "text": "Typography",
-      "url": "/typography/"
-    }
-  ]
-}
+{
+  "items": [
+    {
+      "text": "CI",
+      "url": "/ci/"
+    },
+    {
+      "text": "Colors",
+      "url": "/colors/"
+    },
+    {
+      "text": "Buttons",
+      "url": "/buttons/"
+    },
+    {
+      "text": "Components",
+      "url": "/components/"
+    },
+    {
+      "text": "Forms",
+      "url": "/forms/"
+    },
+    {
+      "text": "Charts",
+      "url": "/charts/"
+    },
+    {
+      "text": "Icons",
+      "url": "/icons/"
+    },
+    {
+      "text": "Layout",
+      "url": "/layout/"
+    },
+    {
+      "text": "Navigation",
+      "url": "/navigation/"
+    },
+    {
+      "text": "Typography",
+      "url": "/typography/"
+    }
+  ]
+}

package/src/_data/site.js

@@ -1,12 +1,12 @@
-module.exports = {
-  "title": "Test IO TailWind",
-  "description": "Tailwind based design system for Test IO",
-  "url": "https://test.io",
-  "author": "test IO",
-  "meta_data": {
-    "twitter": "",
-    "default_social_image": ""
-  },
-  "app": process.env.APP,
-  "env": process.env.ELEVENTY_ENV === 'production'
-}
+module.exports = {
+  "title": "Test IO TailWind",
+  "description": "Tailwind based design system for Test IO",
+  "url": "https://test.io",
+  "author": "test IO",
+  "meta_data": {
+    "twitter": "",
+    "default_social_image": ""
+  },
+  "app": process.env.APP,
+  "env": process.env.ELEVENTY_ENV === 'production'
+}

package/src/_includes/card_popover.haml

@@ -1,7 +1,7 @@
-%details.popover-wrapper.dropright.card-info-popover
-  %summary
-  .btn.btn-sm.btn-square
-    .icon.icon-info
-  .popover-menu.info
-  .popover-title Popover title
-  .popover-content Popover 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.
+%details.popover-wrapper.dropright.card-info-popover
+  %summary
+  .btn.btn-sm.btn-square
+    .icon.icon-info
+  .popover-menu.info
+  .popover-title Popover title
+  .popover-content Popover 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/_includes/example-header-customer.pug

@@ -1,99 +1,99 @@
-<header class="header customer">
-    <div class="navlinks logo-wrapper">
-        <a href="#" class="navlink header-logo"></a>
-    </div>
-    <div class="navlinks left">
-        <a href="#" class="navlink active responsive-label">
-            <span class="icon icon-user-profile"></span>Your profile</a>
-        <a href="#" class="navlink responsive-label">
-            <span class="icon icon-activity"></span>Activity</a>
-        <a href="#" class="navlink responsive-label">
-            <span class="icon icon-devices"></span>Devices</a>
-        <a href="#" class="navlink responsive-label">
-            <span class="icon icon-billing"></span>Billing</a>
-    </div>
-    <details class="mobile-links">
-        <summary class="mobile-menu-btn">
-            <div class="navlink">
-                <span class="sr-only">Open main menu</span>
-                <span ariahidden="true" class="icon icon-menu"></span>
-            </div>
-        </summary>
-        <div class="mobile-menu sidebar">
-            <div class="profilepicture-wrapper">
-                <details class="profilepicture-actions">
-                    <summary>
-                        <img src="/assets/images/testerlevel-medals/medal_testerlevel_1_md.png" class="testerlevel-medal" />
-                        <img src="/assets/images/placeholders/profile_supergirl.png" class="profilepicture" />
-                    </summary>
-                    <div class="popover-menu">
-                        <a href="#" class="popover-action">
-                            <span class="icon text-icon-default icon-cloud-upload mr-icon-spacing"></span>Upload picture</a>
-                        <a href="#" class="popover-action">
-                            <span class="icon text-icon-default icon-remove mr-icon-spacing"></span>Remove picture</a>
-                    </div>
-                </details>
-            </div>
-            <div class="sidebar-title">Anja Berger</div>
-            <div class="navlinks">
-                <a href="#" class="navlink">
-                    <span class="icon icon-home"></span>Dashboard</a>
-                <a href="#" class="navlink"><span class="icon icon-ranking"></span>Ranking</a>
-                <a href="#" class="navlink">
-                    <div class="icon-wrapper"><span class="icon icon-test"></span>
-                        <span class="icon icon-circle-sm-filled recording-icon"></span></div>
-                        <div class="text-wrapper">
-                            <div class="div">#123321 Customer</div>
-                            <div class="label-sm">Test Session active 00:15</div>
-                        </div>
-                </a>
-                <div class="sidebar-divider"></div>
-                <a href="#" class="navlink">
-                    <span class="icon icon-user-profile"></span>Your profile</a>
-                <a href="#" class="navlink">
-                    <span class="icon icon-activity"></span>Activity</a>
-                <a href="#" class="navlink">
-                    <span class="icon icon-devices"></span>Devices</a>
-                <a href="#" class="navlink">
-                    <span class="icon icon-billing"></span>Billing</a>
-            </div>
-
-        </div>
-    </details>
-    <div class="navlinks right">
-        <a href="#" class="navlink hidden-xs-down">
-            <span class="icon icon-user-outline-plus mr-0"></span></a>
-        <a href="#" class="navlink hidden-xs-down">
-            <span class="icon icon-academy"></span>99</a>
-        <a href="#" class="navlink hidden-xs-down">
-            <span class="icon icon-chat"></span>99</a>
-        <a href="#" class="navlink">
-            <span class="icon icon-bell"></span>99</a>
-        <a href="#" class="navlink hidden-xs-down">
-            <span class="icon icon-search mr-0"></span></a>
-        <details class="header-dropdown user-menu">
-            <summary class="btn-profile navlink">
-                <span class="sr-only">Open user menu</span>
-                <img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile" />
-                <div class="user-details">
-                    <div class="profile-role">Tester</div>
-                    <div class="profile-name">Anja Berger</div>
-                </div>
-            </summary>
-            <div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
-                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
-                    <span class="icon icon-user-outline-plus"></span>Refer a tester</a>
-                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
-                    <span class="icon icon-chat"></span>Chat 99</a>
-                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
-                    <span class="icon icon-academy"></span>Onboarding 99</a>
-                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
-                    <span class="icon icon-search"></span>Search</a>
-                <a href="#" role="menuitem" class="dropdown-link">
-                    <span class="icon icon-cog"></span>Settings</a>
-                <a href="#" role="menuitem" class="dropdown-link">
-                    <span class="icon icon-shutdown"></span>Sign out</a>
-            </div>
-        </details>
-    </div>
-</header>
+<header class="header customer">
+    <div class="navlinks logo-wrapper">
+        <a href="#" class="navlink header-logo"></a>
+    </div>
+    <div class="navlinks left">
+        <a href="#" class="navlink active responsive-label">
+            <span class="icon icon-user-profile"></span>Your profile</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-activity"></span>Activity</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-devices"></span>Devices</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-billing"></span>Billing</a>
+    </div>
+    <details class="mobile-links">
+        <summary class="mobile-menu-btn">
+            <div class="navlink">
+                <span class="sr-only">Open main menu</span>
+                <span ariahidden="true" class="icon icon-menu"></span>
+            </div>
+        </summary>
+        <div class="mobile-menu sidebar">
+            <div class="profilepicture-wrapper">
+                <details class="profilepicture-actions">
+                    <summary>
+                        <img src="/assets/images/testerlevel-medals/medal_testerlevel_1_md.png" class="testerlevel-medal" />
+                        <img src="/assets/images/placeholders/profile_supergirl.png" class="profilepicture" />
+                    </summary>
+                    <div class="popover-menu">
+                        <a href="#" class="popover-action">
+                            <span class="icon text-icon-default icon-cloud-upload mr-icon-spacing"></span>Upload picture</a>
+                        <a href="#" class="popover-action">
+                            <span class="icon text-icon-default icon-remove mr-icon-spacing"></span>Remove picture</a>
+                    </div>
+                </details>
+            </div>
+            <div class="sidebar-title">Anja Berger</div>
+            <div class="navlinks">
+                <a href="#" class="navlink">
+                    <span class="icon icon-home"></span>Dashboard</a>
+                <a href="#" class="navlink"><span class="icon icon-ranking"></span>Ranking</a>
+                <a href="#" class="navlink">
+                    <div class="icon-wrapper"><span class="icon icon-test"></span>
+                        <span class="icon icon-circle-sm-filled recording-icon"></span></div>
+                        <div class="text-wrapper">
+                            <div class="div">#123321 Customer</div>
+                            <div class="label-sm">Test Session active 00:15</div>
+                        </div>
+                </a>
+                <div class="sidebar-divider"></div>
+                <a href="#" class="navlink">
+                    <span class="icon icon-user-profile"></span>Your profile</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-activity"></span>Activity</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-devices"></span>Devices</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-billing"></span>Billing</a>
+            </div>
+
+        </div>
+    </details>
+    <div class="navlinks right">
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-user-outline-plus mr-0"></span></a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-academy"></span>99</a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-chat"></span>99</a>
+        <a href="#" class="navlink">
+            <span class="icon icon-bell"></span>99</a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-search mr-0"></span></a>
+        <details class="header-dropdown user-menu">
+            <summary class="btn-profile navlink">
+                <span class="sr-only">Open user menu</span>
+                <img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile" />
+                <div class="user-details">
+                    <div class="profile-role">Tester</div>
+                    <div class="profile-name">Anja Berger</div>
+                </div>
+            </summary>
+            <div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-user-outline-plus"></span>Refer a tester</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-chat"></span>Chat 99</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-academy"></span>Onboarding 99</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-search"></span>Search</a>
+                <a href="#" role="menuitem" class="dropdown-link">
+                    <span class="icon icon-cog"></span>Settings</a>
+                <a href="#" role="menuitem" class="dropdown-link">
+                    <span class="icon icon-shutdown"></span>Sign out</a>
+            </div>
+        </details>
+    </div>
+</header>

package/src/_includes/example-header-manager.njk

@@ -1,54 +1,54 @@
-<nav class="header teamleader">
-<div class="navlinks logo-wrapper">
-<a href="#" class="navlink header-logo"></a></div>
-<div class="navlinks left">
-<a href="#" class="navlink active">
-<span class="navlink-badge icon icon-home"></span>Navlink active</a>
-<a href="#" class="navlink">Navlink</a>
-<a href="#" class="navlink">
-<span class="icon icon-check-circle-filled"></span>Navlink</a>
-<details class="header-dropdown">
-<summary class="navlink">Collapsable</summary>
-<div class="dropdown-menu">
-<a href="#" role="menuitem" class="navlink">
-<span class="icon icon-user"></span>Dropdown-item</a>
-<a href="#" role="menuitem" class="navlink">
-<span class="icon icon-cog"></span>Dropdown-item</a>
-<a href="#" role="menuitem" class="navlink">
-<span class="icon icon-shutdown"></span>Dropdown-item with a longer text to see how things break and behave</a></div></details></div>
-<details class="mobile-links">
-<summary class="mobile-menu-btn">
-<div class="navlink">
-<span class="sr-only">Open main menu</span>
-<span ariahidden="true" class="icon icon-menu"></span></div></summary>
-<div class="mobile-menu sidebar">
-<a href="#" class="navlink active">
-<span class="navlink-badge icon icon-home"></span>Navlink active</a>
-<a href="#" class="navlink">
-<span class="navlink-badge icon icon-plus"></span>Add project</a>
-<details>
-<summary class="navlink">
-<span class="icon icon-product"></span>Collapsable</summary>
-<a href="#" class="navlink">
-<span class="icon icon-test"></span>Navlink child</a>
-<a href="#" class="navlink">
-<span class="icon icon-test"></span>Navlink child</a>
-<a href="#" class="navlink">
-<span class="icon icon-test"></span>Navlink child</a>
-<a href="#" class="navlink active">
-<span class="icon icon-test"></span>Active child</a></details></div></details>
-<div class="navlinks right">
-<details class="header-dropdown user-menu">
-<summary class="btn-profile navlink">
-<span class="sr-only">Open user menu</span>
-<img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile">
-<div class="user-details">
-<div class="profile-role">Admin</div>
-<div class="profile-name">Anja Berger</div></div></summary>
-<div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
-<a href="#" role="menuitem" class="navlink">
-<span class="icon icon-user"></span>Your Profile</a>
-<a href="#" role="menuitem" class="navlink">
-<span class="icon icon-cog"></span>Settings</a>
-<a href="#" role="menuitem" class="navlink">
+<nav class="header teamleader">
+<div class="navlinks logo-wrapper">
+<a href="#" class="navlink header-logo"></a></div>
+<div class="navlinks left">
+<a href="#" class="navlink active">
+<span class="navlink-badge icon icon-home"></span>Navlink active</a>
+<a href="#" class="navlink">Navlink</a>
+<a href="#" class="navlink">
+<span class="icon icon-check-circle-filled"></span>Navlink</a>
+<details class="header-dropdown">
+<summary class="navlink">Collapsable</summary>
+<div class="dropdown-menu">
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-user"></span>Dropdown-item</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-cog"></span>Dropdown-item</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-shutdown"></span>Dropdown-item with a longer text to see how things break and behave</a></div></details></div>
+<details class="mobile-links">
+<summary class="mobile-menu-btn">
+<div class="navlink">
+<span class="sr-only">Open main menu</span>
+<span ariahidden="true" class="icon icon-menu"></span></div></summary>
+<div class="mobile-menu sidebar">
+<a href="#" class="navlink active">
+<span class="navlink-badge icon icon-home"></span>Navlink active</a>
+<a href="#" class="navlink">
+<span class="navlink-badge icon icon-plus"></span>Add project</a>
+<details>
+<summary class="navlink">
+<span class="icon icon-product"></span>Collapsable</summary>
+<a href="#" class="navlink">
+<span class="icon icon-test"></span>Navlink child</a>
+<a href="#" class="navlink">
+<span class="icon icon-test"></span>Navlink child</a>
+<a href="#" class="navlink">
+<span class="icon icon-test"></span>Navlink child</a>
+<a href="#" class="navlink active">
+<span class="icon icon-test"></span>Active child</a></details></div></details>
+<div class="navlinks right">
+<details class="header-dropdown user-menu">
+<summary class="btn-profile navlink">
+<span class="sr-only">Open user menu</span>
+<img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile">
+<div class="user-details">
+<div class="profile-role">Admin</div>
+<div class="profile-name">Anja Berger</div></div></summary>
+<div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-user"></span>Your Profile</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-cog"></span>Settings</a>
+<a href="#" role="menuitem" class="navlink">
 <span class="icon icon-shutdown"></span>Sign out</a></div></details></div></nav>