testio-tailwind 0.1.0

package/.eleventy.js

@@ -0,0 +1,57 @@
+const filters = require('./utils/filters.js')
+const transforms = require('./utils/transforms.js')
+const collections = require('./utils/collections.js')
+const markdownIt = require('./utils/markdown.js');
+const appConfigs = {
+  cirro: { output: "dist/" }
+}
+
+module.exports = function (eleventyConfig) {
+    // Folders to copy to build dir (See. 1.1)
+    eleventyConfig.addPassthroughCopy({
+        "src/static/site.webmanifest": "", 
+        "src/static/*": "static", 
+        "src/assets/fonts/*": "assets/fonts",
+        "src/static/downloads/*": "downloads",
+        "src/assets/images/*": "assets/images"
+    })
+
+    // Filters 
+    Object.keys(filters).forEach((filterName) => {
+        eleventyConfig.addFilter(filterName, filters[filterName])
+    })
+
+    // Transforms
+    Object.keys(transforms).forEach((transformName) => {
+        eleventyConfig.addTransform(transformName, transforms[transformName])
+    })
+
+    // Collections
+    Object.keys(collections).forEach((collectionName) => {
+        eleventyConfig.addCollection(collectionName, collections[collectionName])
+    })
+
+    // This allows Eleventy to watch for file changes during local development.
+    eleventyConfig.setUseGitIgnore(false);
+
+    eleventyConfig.addShortcode('tag', (arg) => `<div>${arg}</div>`);
+    eleventyConfig.addPairedShortcode('tag', (children) => `<div class="markdown">${children}</div>`);
+
+    let haml = require("hamljs");
+	eleventyConfig.setLibrary("haml", haml);
+    eleventyConfig.setLibrary('md', markdownIt);
+
+    return {
+        dir: {
+            input: "src",
+            output: appConfigs[process.env.APP].output,
+            includes: "_includes",
+            layouts: "_layouts"
+        },
+        templateFormats: ["html", "md", "njk", "pug", "haml", "png", "svg", "eot", "ttf", "woff", "woff2", "jpg", "otf"],
+        htmlTemplateEngine: "njk",
+
+        // 1.1 Enable eleventy to pass dirs specified above
+        passthroughFileCopy: true
+    };
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Chris Collins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# Translation Space Designsystem
+
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/test-IO/translation-space-designsystem/tree/main.svg?style=svg&circle-token=60adcec1eb4c2df56fede063ffe512971f103889)](https://dl.circleci.com/status-badge/redirect/gh/test-IO/translation-space-designsystem/tree/main)
+
+--- (Live deployment)
+
+
+## Development
+
+### Requirements
+
+1. Node.js
+2. NPM (comes with Node.js)
+
+### Install dependencies
+
+```sh
+npm i
+```
+
+### Working locally
+
+Starts watch tasks to compile when changes detected
+
+```sh
+npm start
+```
+
+### Creating a production build
+
+Minify HTML, compress JS, inline and minify CSS.
+
+```sh
+npm run build
+```
+
+---
+
+### Publishing to registry
+
+* Make sure to update the version number in package.json file for every pull request
+* CircleCI will take care of publishing to npm and also adding a tag when the commits are merged to master
+* CircleCI will publish it only if the package version has been increased

package/icon-classes-extractor.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const readline = require('readline');
+
+async function extractIconClasses(app) {
+  const fileStream = fs.createReadStream('src/assets/stylesheets/components/iconfont.css');
+
+  const rl = readline.createInterface({
+    input: fileStream,
+    crlfDelay: Infinity
+  });
+
+  const iconClasses = [];
+
+  for await (const line of rl) {
+    if (line.startsWith('.icon-'))
+      iconClasses.push(line.split(':')[0].replace('.', ''));
+  }
+
+  fs.writeFile('src/static/icons-' + app + '.json', JSON.stringify(iconClasses), err => {
+    if (err) {
+        console.log('Error writing file', err)
+    } else {
+        console.log('Successfully extracted icon classes')
+    }
+  });
+}
+
+extractIconClasses('cirro');
+

package/index.html

@@ -0,0 +1,478 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!--
+  Maintained with the excellent knowledge from https://htmlhead.dev
+  These comments will be removed in production
+
+  ========================
+
+  The following 2 meta tags *must* come first in the <head>
+  to consistently ensure proper document rendering.
+  Any other head element should come *after* these tags.
+-->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- Set the base URL for all relative URLs within the document -->
+<base href="/">
+
+<!-- 
+  Short description of the document (limit to 150 characters)
+  This content *may* be used as a part of search engine results. 
+-->
+<meta name="description" content="Fortissimo Design System">
+
+<!-- Control the behavior of search engine crawling and indexing -->
+<meta name="robots" content="index,follow"><!-- All Search Engines -->
+<meta name="googlebot" content="index,follow"><!-- Google Specific -->
+
+<!-- Tells Google not to show the sitelinks search box -->
+<meta name="google" content="nositelinkssearchbox">
+<!-- Tells Google not to provide a translation for this document -->
+<meta name="google" content="notranslate">
+
+<!-- Identify the software used to build the document, Eleventy ftw! -->
+<meta name="generator" content="eleventy">
+
+<!-- Disable automatic detection and formatting of possible phone numbers -->
+<meta name="format-detection" content="telephone=no">
+
+<!-- Helps prevent duplicate content issues -->
+<link rel="canonical" href="https://test.io/">
+
+<title>Translation space - Design System - Fortissimo Design system</title>
+
+<!-- Links to information about the author(s) of the document -->
+<link rel="author" href="humans.txt">
+
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/site.webmanifest">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#000000">
+<meta name="theme-color" content="#ffffff">
+
+<!-- Facebook Open Graph meta -->
+<meta property="og:url" content="https://test.io/">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Translation space - Design System">
+
+<meta property="og:description" content="Fortissimo Design System" />
+<meta property="og:site_name" content="Fortissimo Design system">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="test IO">
+
+<!-- Twitter Open Graph meta -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="">
+<meta name="twitter:creator" content="">
+
+<!-- disallow Twitter from using your site's info for personalization purposes -->
+<meta name="twitter:dnt" content="on">
+
+    
+    <link rel="stylesheet" href="/static/app.compiled.css" id="cirro-space-stylesheet" title="Cirro Space Design System">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.js"></script>
+    <script>
+      window.onload = () => {
+        const previews = document.getElementsByClassName("html-preview");
+        for (i = 0; i < previews.length; i++) {
+          previews[i].innerText = html_beautify(previews[i].textContent)
+        }
+      }
+    </script>
+
+  <script type="module" integrity="sha512-7Y25+FX/kRUbZEHtQBOSLffzofBxz8ABQErLAVpGkfzactkpJU5wtTmhIfIZeTw7VHg1JeTIC5kHkzPq7LqR1w==" src="/.11ty/reload-client.js"></script></head>
+  
+  <body class="app-body">
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    <header class="header"><a class="navlink header-logo" href="/"></a>
+      <div class="navlinks">
+        
+          <a href="/buttons/"
+              
+              class="navlink
+              ">
+            Buttons
+          </a>
+        
+          <a href="/ci/"
+              
+              class="navlink
+              ">
+            CI
+          </a>
+        
+          <a href="/colors/"
+              
+              class="navlink
+              ">
+            Colors
+          </a>
+        
+          <a href="/components/"
+              
+              class="navlink
+              ">
+            Components
+          </a>
+        
+          <a href="/forms/"
+              
+              class="navlink
+              ">
+            Forms
+          </a>
+        
+          <a href="/icons/"
+              
+              class="navlink
+              ">
+            Icons
+          </a>
+        
+          <a href="/layout/"
+              
+              class="navlink
+              ">
+            Layout
+          </a>
+        
+          <a href="/navigation/"
+              
+              class="navlink
+              ">
+            Navigation
+          </a>
+        
+          <a href="/typography/"
+              
+              class="navlink
+              ">
+            Typography
+          </a>
+        
+        <details class="header-dropdown">
+          <summary class="navlink">Examples</summary>
+          <div class="dropdown-menu">
+            
+              <a href="/pages/examples/clientui-collaborators/"
+                  class="dropdown-link">
+                Client UI - Collaborators
+              </a>
+            
+              <a href="/pages/examples/clientui-request-details/"
+                  class="dropdown-link">
+                Client UI - Request details
+              </a>
+            
+              <a href="/pages/examples/clientui-request-form/"
+                  class="dropdown-link">
+                Client UI - Request form
+              </a>
+            
+              <a href="/pages/examples/dashboard/"
+                  class="dropdown-link">
+                Dashboard
+              </a>
+            
+              <a href="/pages/examples/layout-actionbar/"
+                  class="dropdown-link">
+                Layout with actionbar
+              </a>
+            
+              <a href="/pages/examples/layout-basic/"
+                  class="dropdown-link">
+                Basic layout
+              </a>
+            
+              <a href="/pages/examples/layout-infosidebar/"
+                  class="dropdown-link">
+                Layout with info sidebar
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar-actionbar/"
+                  class="dropdown-link">
+                Layout with sidebar and actionbar
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar-contentactionbar/"
+                  class="dropdown-link">
+                Layout with sidebar and content actionbar
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar-form-actionbar-aside/"
+                  class="dropdown-link">
+                Form layout: sidebar, actionbar, aside
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar-form-actionbar/"
+                  class="dropdown-link">
+                Form layout with sidebar and actionbar
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar-form-contentactionbar-aside/"
+                  class="dropdown-link">
+                Form layout: sidebar, content actionbar, aside
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar-form-contentactionbar/"
+                  class="dropdown-link">
+                Form layout with sidebar and content actionbar
+              </a>
+            
+              <a href="/pages/examples/layout-sidebar/"
+                  class="dropdown-link">
+                Layout with sidebar navigation
+              </a>
+            
+              <a href="/pages/examples/settings/"
+                  class="dropdown-link">
+                Settings
+              </a>
+            
+              <a href="/pages/examples/task-accepted/"
+                  class="dropdown-link">
+                Task accepted
+              </a>
+            
+              <a href="/pages/examples/task-preview/"
+                  class="dropdown-link">
+                Task preview
+              </a>
+            
+              <a href="/pages/examples/signin/"
+                  class="dropdown-link">
+                Sign in
+              </a>
+            
+              <a href="/pages/examples/signup-languages/"
+                  class="dropdown-link">
+                Sign up - Add Language
+              </a>
+            
+              <a href="/pages/examples/signup-preferences/"
+                  class="dropdown-link">
+                Sign up - Add Preferences 
+              </a>
+            
+          </div>
+        </details>
+
+        <details class="header-dropdown">
+          <summary class="navlink">E-Mail Templates</summary>
+          <div class="dropdown-menu">
+            
+              <a href="/pages/email-templates/email-generic/"
+                  class="dropdown-link">
+                Email Generic
+              </a>
+            
+          </div>
+        </details>
+
+      </div>
+
+
+      <!-- Mobile menu button-->
+      <div class="mobile-links">
+        <details>
+            <summary class="mobile-menu-btn"><div class="navlink"><span class="sr-only">Open main menu</span><!-- Icon when menu is closed.--><span class="text-xl icon icon-menu" aria-hidden="true"></span></div></summary>
+            <div class="mobile-menu sidebar">
+            
+              
+                <a href="/buttons/"
+                    
+                    class="navlink
+                    ">
+                  Buttons
+                </a>
+              
+                <a href="/ci/"
+                    
+                    class="navlink
+                    ">
+                  CI
+                </a>
+              
+                <a href="/colors/"
+                    
+                    class="navlink
+                    ">
+                  Colors
+                </a>
+              
+                <a href="/components/"
+                    
+                    class="navlink
+                    ">
+                  Components
+                </a>
+              
+                <a href="/forms/"
+                    
+                    class="navlink
+                    ">
+                  Forms
+                </a>
+              
+                <a href="/icons/"
+                    
+                    class="navlink
+                    ">
+                  Icons
+                </a>
+              
+                <a href="/layout/"
+                    
+                    class="navlink
+                    ">
+                  Layout
+                </a>
+              
+                <a href="/navigation/"
+                    
+                    class="navlink
+                    ">
+                  Navigation
+                </a>
+              
+                <a href="/typography/"
+                    
+                    class="navlink
+                    ">
+                  Typography
+                </a>
+              
+
+              <details>
+                <summary class="navlink-container"><div class="navlink">Examples</div></summary>
+                
+                  <a href="/pages/examples/clientui-collaborators/"
+                      class="navlink">
+                    Client UI - Collaborators
+                  </a>
+                
+                  <a href="/pages/examples/clientui-request-details/"
+                      class="navlink">
+                    Client UI - Request details
+                  </a>
+                
+                  <a href="/pages/examples/clientui-request-form/"
+                      class="navlink">
+                    Client UI - Request form
+                  </a>
+                
+                  <a href="/pages/examples/dashboard/"
+                      class="navlink">
+                    Dashboard
+                  </a>
+                
+                  <a href="/pages/examples/layout-actionbar/"
+                      class="navlink">
+                    Layout with actionbar
+                  </a>
+                
+                  <a href="/pages/examples/layout-basic/"
+                      class="navlink">
+                    Basic layout
+                  </a>
+                
+                  <a href="/pages/examples/layout-infosidebar/"
+                      class="navlink">
+                    Layout with info sidebar
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar-actionbar/"
+                      class="navlink">
+                    Layout with sidebar and actionbar
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar-contentactionbar/"
+                      class="navlink">
+                    Layout with sidebar and content actionbar
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar-form-actionbar-aside/"
+                      class="navlink">
+                    Form layout: sidebar, actionbar, aside
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar-form-actionbar/"
+                      class="navlink">
+                    Form layout with sidebar and actionbar
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar-form-contentactionbar-aside/"
+                      class="navlink">
+                    Form layout: sidebar, content actionbar, aside
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar-form-contentactionbar/"
+                      class="navlink">
+                    Form layout with sidebar and content actionbar
+                  </a>
+                
+                  <a href="/pages/examples/layout-sidebar/"
+                      class="navlink">
+                    Layout with sidebar navigation
+                  </a>
+                
+                  <a href="/pages/examples/settings/"
+                      class="navlink">
+                    Settings
+                  </a>
+                
+                  <a href="/pages/examples/task-accepted/"
+                      class="navlink">
+                    Task accepted
+                  </a>
+                
+                  <a href="/pages/examples/task-preview/"
+                      class="navlink">
+                    Task preview
+                  </a>
+                
+                  <a href="/pages/examples/signin/"
+                      class="navlink">
+                    Sign in
+                  </a>
+                
+                  <a href="/pages/examples/signup-languages/"
+                      class="navlink">
+                    Sign up - Add Language
+                  </a>
+                
+                  <a href="/pages/examples/signup-preferences/"
+                      class="navlink">
+                    Sign up - Add Preferences 
+                  </a>
+                
+              </details>
+
+              <details>
+                <summary class="navlink-container"><div class="navlink">E-Mail</div></summary>
+                
+                  <a href="/pages/email-templates/email-generic/"
+                      class="navlink">
+                    Email Generic
+                  </a>
+                
+              </details>
+
+            </div>
+        </details>
+
+      </div>
+    </header>
+
+  
+    <main class="main-content main-content-padding"><div class="centered-column"><div class="centered-column-content"><img class="mt-10 mb-5" src="/assets/images/logo-fortissimo/fortissimo-logo-horizontal-black.svg"/><p class="max-w-md mx-auto md:mt-5 md:max-w-3xl">The Translation Space Design System provides a set of tools to help designers and developers build products and services more easily. Our custom TailwindCSS config file, component classes, and HTML snippets offer a starting point for development.</p><div class="flex justify-center pt-10"><a href="https://badge.fury.io/js/translation-space-designsystem"><img src="https://badge.fury.io/js/translation-space-designsystem.svg" alt="npm version" height="18"/></a></div></div></div></main>
+  
+  </body>
+  <script src="/static/app.bundled.js"></script>
+</html>