testio-tailwind 0.1.0

package/src/assets/stylesheets/tailwind.config.js

@@ -0,0 +1,331 @@
+module.exports = {
+  future: {},
+  purge: [],
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+
+      black: '#1d1d1d',
+      white: '#fff',
+
+      gray: {
+        100: '#f2f2f2',
+        200: '#e6e6e6',
+        300: '#bfc1c5',
+        400: '#9fa2a8',
+        500: '#7c8188',
+        600: '#5f656d',
+        700: '#343A40',
+        800: '#262626',
+        900: '#222222',
+        'lightest': '#f2f2f2',
+        'lighter': '#e6e6e6',
+        'light': '#bfc1c5',
+        DEFAULT: '#9fa2a8',
+        'dark': '#7c8188',
+        'darker': '#5f656d',
+        'darkest': '#262626',
+      },
+      red: {
+        200: '#FF3131',
+        500: '#ec0404'
+      },
+      orange: {
+        500: '#f48d21'
+      },
+      green: {
+        500: '#8cbd24',
+      },
+      yellow: {
+        500: '#d8ce0d'
+      },
+      blue: {
+        200: '#21bef4',
+        500: '#326dd1'
+      },
+      petrol: {
+        500: '#236a84',
+        DEFAULT: '#236a84',
+        800: '#263340',
+        'dark': '#263340',
+      },
+      teal: {
+        300: '#78eac1',
+        400: '#6ddeba',
+        500: '#33ba9e'
+      },
+      pink: {
+        500: '#e83e8c'
+      },
+      purple: {
+        200: '#8988eb',
+        500: '#7954ff'
+      },
+    },
+    fontFamily: {
+      'sans': ['Source Sans Pro', 'sans-serif'],
+      'serif': ['Source Sans Pro', 'sans-serif'],
+      'mono': ['Source Code Pro', 'monospace'],
+      'display': ['Source Sans Pro', 'sans-serif'],
+      'body': ['Source Sans Pro', 'sans-serif']
+    },
+    borderWidth: {
+      DEFAULT: '1px',
+      '0': '0px',
+      '1': '1px',
+      '2': '2px',
+      '4': '4px',
+      '6': '6px',
+      '10': '10px',
+    },
+    extend: {
+      colors: {
+        'appbody': '#FFFFFF',
+        'black': '#1d1d1d',
+        'primary': '#236a84',
+        'link': '#236a84',
+        'link-hover': '#21bef4',
+        'header': '#1d1d1d',
+        'actionbar': '#236a84',
+        'bordercolor': '#e6e6e6',
+        'bordercolor-dark': '#D4D6DC',
+        'success': '#8cbd24',
+        'danger': '#ec0404',
+        'disabled': '#bfc1c5',
+        'disabled-dark': '#5f656d',
+        'placeholder': '#bfc1c5',
+        'info': '#326dd1',
+        'label-color': '#5f656d',
+        'label-inverted-color': '#bfc1c5',
+        'dark': '#222222',
+        'card': '#e6e6e6',
+        'critical': '#ec0404',
+        'high': '#d8ce0d',
+        'low': '#9fa2a8',
+        'visual': '#f48d21',
+        'content': '#326dd1',
+        'usability': '#263340',
+        'color-product-website': '#236a84',
+        'color-product-apple': '#326dd1',
+        'color-product-android': '#8cbd24',
+        'color-product-streaming': '#FF3131',
+        'color-product-gaming': '#f48d21',
+        'color-product-windows': '#d8ce0d',
+        'navigation-customer-color': '#262626',
+        'navlink-customer-hover-color': '#78eac1',
+        'navlink-customer-hover-bg': '#343A40',
+        'navlink-customer-active-bg': '#78eac1',
+        'navigation-tester-color': '#1d1d1d',
+        'navlink-tester-hover-color': '#7954ff',
+        'navlink-tester-hover-bg': '#343A40',
+        'navlink-tester-active-bg': '#7954ff',
+        'navigation-manager-color': '#ffffff',
+        'navlink-manager-hover-color': '#222222',
+        'navlink-manager-hover-bg': '#e6e6e6',
+        'navlink-manager-active-bg': '#6ddeba'
+      },
+      fontSize: {
+        'heading-1': ['2.25rem', '2.25rem'],
+        'heading-2': ['1.875rem', '1.875rem'],
+        'heading-3': ['1.563rem', '1.563rem'],
+        'heading-4': ['1.375rem', '1.375rem'],
+        'heading-5': ['1.125rem', '1.125rem'],
+        'heading-6': ['1rem', '1rem'],
+        'navlinks': ['14px', '16px'],
+        'base': ['14px', '18px'],
+        'buttons': ['14px', '16px'],
+        'label': ['13px', '13px'],
+        'label-sm': ['12px', '12px'],
+        'icon': '20px',
+        'icon-lg': '40px',
+        'icon-xl': '60px',
+        'icon-sm': '18px',
+        'icon-xs': '16px',
+        'icon-xxs': '14px',
+        'icon-xxxs': '10px',
+        'xl': ['4.25rem', '4.25rem'],
+        'lg': ['1.25rem', '1.25rem'],
+        'sm': ['0.813rem', '0.813rem'],
+        'xs': ['11px', '11px'],
+        'xxs': ['10px', '10px'],
+        'display-1': ['3.25rem','3.25rem'],
+        'display-2': ['3rem','3rem'],
+        'display-3': ['2.75rem','2.75rem'],
+        'display-4': ['2.5rem','2.5rem'],
+        'hidden': ['0rem','0rem'],
+      },
+      fontWeight: {
+        'headings': ['300'],
+        'navlinks': ['600'],
+        'display': ['300']
+      },
+      borderRadius: {
+        DEFAULT: '5px',
+        'default': '0.3rem'
+      },
+      spacing: {
+        'spacing': '30px',
+        'xxs': '5px',
+        'xs': '10px',
+        'sm': '15px',
+        'md': '20px',
+        'lg': '50px',
+        'xl': '60px',
+        'xxl': '90px',
+        'spacing-3xl': '180px',
+        'spacing-4xl': '240px',
+        'spacing-5xl': '300px',
+        'spacing-6xl': '360px',
+        'spacing-7xl': '420px',
+        'spacing-8xl': '480px',
+        'btn': '40px',
+        'btn-xs': '20px',
+        'btn-sm': '30px',
+        'btn-lg': '90px',
+        'btn-xl': '150px',
+        'header' : '50px',
+        'icon' : '20px',
+        'icon-lg' : '40px',
+        'icon-xl' : '60px',
+        'icon-sm' : '18px',
+        'icon-xs' : '16px',
+        'icon-xxs' : '14px',
+        'icon-spacing' : '8px',
+        'heading' : '1rem',
+        'heading-lg' : '2rem',
+        'section-margin' : '30px',
+        'actionbar' : '70px',
+        'aside' : '20rem',
+        'sidebar' : '200px',
+        'grid-gutter' : '20px',
+        '13': '3.25rem',
+        '30': '7.25rem',
+        '144': '36rem',
+        '192': '48rem',
+        '240': '60rem',
+        'body-padding-mobile': '15px',
+        'body-padding-tablet': '30px',
+        'body-padding-desktop': '50px',
+        'card-lg': '380px',
+        'card-md': '280px',
+        'card-sm': '180px',
+        'card-xs': '80px',
+        '1px': '1px',
+        'modal-lg': '1200px',
+        'modal-md': '700px',
+        'modal-sm': '400px',
+        'progress-bar-thin-height': '2px',
+        'progress-bar-thick-height': '10px',
+        'meta-sidebar-width': '350px',
+        'popover-width': '15rem'
+      },
+      minWidth: {
+        'auto': 'auto',
+        'btn': '40px',
+        'btn-sm': '30px',
+        'cell': '10rem',
+        '6': '1.5rem',
+        '9': '2.25rem',
+        '11': '2.75rem',
+        '12': '3rem',
+        '24': '6rem',
+        '30': '7.25rem',
+        '36': '9rem',
+        '56': '14rem',
+        'spacing': '30px',
+      },
+      minHeight: {
+        'auto': 'auto',
+        'btn': '40px',
+        'btn-sm': '30px',
+        '8': '2rem',
+        '11': '2.75rem',
+        '12': '3rem',
+        '16': '4rem',
+        '22': '5.5rem',
+        '24': '6rem',
+        '30': '7.25rem',
+        '32': '8rem',
+        '48': '12rem',
+        '96': '24rem',
+        '144': '36rem',
+        'spacing': '30px',
+        'xxs': '5px',
+        'xs': '10px',
+        'sm': '15px',
+        'md': '20px',
+        'lg': '50px',
+        'xl': '60px',
+        'xxl': '90px',
+      },
+      maxWidth: {
+        '1/2': '50%',
+        '2/3': '66%',
+        '8': '2rem',
+        '32': '8rem',
+        '44': '11rem',
+        '48': '12rem',
+        '96': '24rem',
+        '144': '36rem',
+        '192': '48rem',
+        'xxl': '90px',
+        'card-lg': '380px',
+        'card-md': '280px',
+        'card-sm': '180px',
+        'card-xs': '80px',
+        'capped': '700px',
+      },
+      boxShadow: {
+        DEFAULT: '0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05)',
+      }, 
+      backgroundImage: theme => ({
+        'pattern-disabled-bright': "url('/assets/images/pattern-striped-bright.png')",
+        'pattern-disabled-dark': "url('/assets/images/pattern-striped-dark.png')"
+       }),
+       gridTemplateColumns: {
+        '3-1': '3fr 1fr',
+        '1-3': '1fr 3fr',
+        'max-auto': 'max-content auto',
+        '4-auto': 'auto auto auto auto',
+        '3-auto': 'auto auto auto',
+        '2-auto': 'auto auto',
+        'auto-fr-auto': 'auto 1fr auto',
+        'auto-fr-2-auto': 'auto 1fr auto auto',
+        'auto-fr': 'auto 1fr',
+        'auto': 'auto',
+        '14': 'repeat(14, minmax(0, 1fr))',
+       },
+       gridTemplateRows: {
+        'auto': 'auto',
+        'auto-auto': 'auto auto',
+       },
+       screens: {
+        '3xl': '1930px',
+      },
+      lineHeight: {
+        'ultratight': '0.5',
+      },
+      outline: {
+        'link-hover': '2px solid #21bef4',
+      }
+    }
+  },
+  variants: {
+    extend: {
+      margin: ['first', 'last'],
+      padding: ['first', 'last'],
+      borderRadius: ['first', 'last', 'focus'],
+      borderWidth: ['first', 'last', 'focus'],
+      backgroundColor: ['active'],
+      backgroundImage: ['hover', 'focus'],
+      width: ['first', 'last'],
+      textColor: ['group-hover', 'active']
+    }
+  },
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ]
+}

package/src/humans.txt.njk

@@ -0,0 +1,11 @@
+---
+permalink: /humans.txt
+---
+
+/* TEAM */
+	Name: {{ site.author }}
+	Site: {{ site.url }}
+	{% if site.meta_data.twitter %}Twitter: {{ site.meta_data.twitter }}{% endif %}
+		
+/* SITE */
+	Doctype: HTML5

package/src/index.pug

@@ -0,0 +1,16 @@
+---
+layout: base.njk
+title: "Test IO - TailWind"
+---
+
+main.main-content.main-content-padding
+  .flex.flex-col.justify-center.items-center
+    img.w-spacing-3xl.h-spacing-3xl.mb-3.mt-5(src="/assets/images/logo-testio/testio_vertical_purpleteal_black.svg")
+    p.max-w-paragraph 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.
+    a.pt-6(href='https://badge.fury.io/js/testio-designsystem')
+      img(src='https://badge.fury.io/js/testio-designsystem.svg', alt='npm version', height='18')
+    p.max-w-paragraph.mt-3.mb-heading To get started with using the styles provided by the design system, just download the current compiled CSS below and implement your components with the provided code. 
+    a.btn.btn-block.btn-primary.max-w-paragraph(href="/static/app.compiled.css", target="_blank")
+      .icon.icon-cloud-download.mr-icon-spacing
+      | Download compiled CSS
+

package/src/pages/buttons/block.haml

@@ -0,0 +1,39 @@
+---
+title: Block Buttons
+tags: button
+---
+
+.row
+  .col-sm-6
+    %ul.list-vertical.mb-2
+      %li
+        %button.btn.btn-block.btn-primary Primary
+      %li
+        %button.btn.btn-block.btn-secondary Secondary
+      %li
+        %button.btn.btn-block.btn-success Success
+      %li
+        %button.btn.btn-block.btn-danger Danger
+      %li
+        %button.btn.btn-block.btn-warning Warning
+      %li
+        %button.btn.btn-block.btn-info Info
+      %li
+        %button.btn.btn-block.btn-dashed Dashed
+      %li
+        %button.btn.btn-block.btn-link Link
+      %li
+        %button.btn.btn-block.btn-ghost Ghost
+      %li
+        %button.btn.btn-block{disabled: "disabled"} Disabled
+
+  .col-sm-6
+    .bg-dark.p-2
+      %ul.list-vertical
+        %li
+          %button.btn.btn-block.btn-primary-inverted primary-inverted
+        %li
+          %button.btn.btn-block.btn-secondary-inverted Secondary
+        %li
+          %button.btn.btn-block.btn-outline-primary-inverted outline-primary-inverted
+

package/src/pages/buttons/buttons-lg.haml

@@ -0,0 +1,20 @@
+---
+title: LG Buttons
+tags: button
+---
+
+%ul.list-inline
+  %li.btn-lg-wrapper
+    %a.btn.btn-lg.btn-square.btn-primary
+      %span.icon.icon-computer-lg.icon-lg
+    .btn-label Primary
+  %li.btn-lg-wrapper
+    %a.btn.btn-lg.btn-square.btn-secondary
+      %span.icon.icon-computer-lg.icon-lg
+    .btn-label Secondary label with a much longer text
+  %li.btn-lg-wrapper.disabled
+    %a.btn.btn-lg.btn-square.btn-primary
+      %span.icon.icon-computer-lg.icon-lg
+    .btn-label Button label
+
+

package/src/pages/buttons/buttons-sm.haml

@@ -0,0 +1,42 @@
+---
+title: Buttons SM
+tags: button
+---
+
+%ul.list-inline
+  %li
+    %button.btn.btn-sm.btn-primary Primary
+  %li
+    %button.btn.btn-sm.btn-primary
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+  %li
+    %button.btn.btn-sm.btn-primary.btn-square
+      .icon.icon-check-circle-filled
+  %li
+    %button.btn.btn-sm.btn-secondary Secondary
+  %li
+    %button.btn.btn-sm.btn-success Success
+  %li
+    %button.btn.btn-sm.btn-danger Danger
+  %li
+    %button.btn.btn-sm.btn-warning Warning
+  %li
+    %button.btn.btn-sm.btn-info Info
+  %li
+    %button.btn.btn-sm.btn-dashed Dashed
+  %li
+    %button.btn.btn-sm.btn-link Link
+  %li
+    %button.btn.btn-sm.btn-link{disabled: "disabled"} Link
+
+.bg-dark.p-2
+  %ul.list-inline
+    %li
+      %button.btn.btn-sm.btn-primary-inverted primary-inverted
+    %li
+      %button.btn.btn-sm.btn-secondary-inverted Secondary
+    %li
+      %button.btn.btn-sm.btn-outline-primary-inverted outline-primary-inverted
+    %li
+      %button.btn.btn-sm.btn-primary-inverted{disabled: "disabled"} disabled

package/src/pages/buttons/buttons-xl.haml

@@ -0,0 +1,23 @@
+---
+title: XL Buttons
+tags: button
+---
+
+%ul.list-inline
+  %li
+    %a.btn.btn-xl.btn-primary
+      .icon.icon-computer-xl.icon-xl
+      Primary
+  %li
+    %a.btn.btn-xl.btn-secondary
+      .icon.icon-computer-xl.icon-xl
+      Secondary
+  %li
+    %a.btn.btn-xl.btn-dashed
+      .icon.icon-computer-xl.icon-xl
+      Dashed
+  %li
+    %a.btn.btn-xl.btn-dashed.disabled
+      .icon.icon-computer-xl.icon-xl
+      Disabled
+

package/src/pages/buttons/buttons.haml

@@ -0,0 +1,58 @@
+---
+title: Buttons
+tags: button
+---
+
+%ul.list-inline
+  %li
+    %button.btn.btn-primary Primary
+  %li
+    %button.btn.btn-primary
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+  %li
+    %button.btn.btn-secondary Secondary
+  %li
+    %button.btn.btn-secondary
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+  %li
+    %button.btn.btn-success Success
+  %li
+    %button.btn.btn-success
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Success
+  %li
+    %button.btn.btn-danger Danger
+  %li
+    %button.btn.btn-danger
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Danger
+  %li
+    %button.btn.btn-warning Warning
+  %li
+    %button.btn.btn-info Info
+  %li
+    %button.btn.btn-dashed Dashed
+  %li
+    %button.btn.btn-link Link
+  %li
+    %button.btn.btn-ghost Ghost
+  %li
+    %button.btn{disabled: "disabled"} Disabled
+
+.bg-dark.p-2
+  %ul.list-inline
+    %li
+      %button.btn.btn-primary-inverted primary-inverted
+    %li
+      %button.btn.btn-inverted inverted
+    %li
+      %button.btn.btn-secondary-inverted secondary-inverted
+    %li
+      %button.btn.btn-outline-primary-inverted outline-primary-inverted
+    %li
+      %button.btn.btn-ghost-inverted Ghost inverted
+    %li
+      %button.btn.btn-primary-inverted{disabled: "disabled"} disabled
+

package/src/pages/buttons/buttons_input.haml

@@ -0,0 +1,39 @@
+---
+title: Input buttons
+tags: button
+---
+
+%ul.list-inline
+  %li
+    %input.btn.btn-primary{type:'submit', value:'Input btn'}
+  %li
+    %input.btn.btn-secondary{type:'submit', value:'Secondary'}
+  %li
+    %input.btn.btn-success{type:'submit', value:'Success'}
+  %li
+    %input.btn.btn-danger{type:'submit', value:'Danger'}
+  %li
+    %input.btn.btn-warning{type:'submit', value:'Warning'}
+  %li
+    %input.btn.btn-info{type:'submit', value:'Info'}
+  %li
+    %input.btn.btn-dashed{type:'submit', value:'Dashed'}
+  %li
+    %input.btn.btn-link{type:'submit', value:'Link'}
+  %li
+    %input.btn.btn-ghost{type:'submit', value:'Ghost'}
+  %li
+    %input.btn{type:'submit', value:'Disabled', disabled:"true"}
+
+.bg-dark.p-2
+  %ul.list-inline
+    %li
+      %input.btn.btn-primary-inverted{type:'submit', value:'primary-inverted'}
+    %li
+      %input.btn.btn-inverted{type:'submit', value:'Inverted'}
+    %li
+      %input.btn.btn-secondary-inverted{type:'submit', value:'Secondary-inverted'}
+    %li
+      %input.btn.btn-ghost-inverted{type:'submit', value:'Ghost inverted'}
+    %li
+      %input.btn.btn-primary-inverted{type:'submit', value:'Disabled', disabled: "disabled"}

package/src/pages/buttons/dropdown-menu.haml

@@ -0,0 +1,73 @@
+---
+tags: button
+title: Action popover
+---
+
+.flex.justify-between
+  .popover-menu
+    %a.popover-action{href:'#'}
+      %span.icon.text-icon-default.icon-pencil
+      Edit
+    %a.popover-action{href:'#'}
+      %span.icon.text-icon-default.icon-duplicate
+      Duplicate
+    %a.popover-action{href:'#'}
+      %span.icon.text-icon-default.icon-remove
+      Delete
+  .px-1
+    %details.dropdown-actions.dropright
+      %summary
+        .btn.btn-square.btn-primary
+          %span.icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+  .px-1
+    %details.dropdown-actions
+      %summary
+        .btn.btn-primary.btn-default Dropdown
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+  .px-1
+    %details.dropdown-actions.dropright
+      %summary
+        .btn.btn-primary.btn-default Dropright
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+  .px-1
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-primary.btn-default Dropup
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete

package/src/pages/buttons/index.njk

@@ -0,0 +1,7 @@
+---
+layout: base
+permalink: /buttons/
+---
+
+{% set collection = collections.button %}
+{% include "page-with-sidebar.njk" %}