testio-tailwind 3.21.0 → 3.22.0

package/src/pages/tables/tables.haml

@@ -0,0 +1,16 @@
+---
+tags: tables
+title: Standard table
+---
+
+%p.mb-heading A standard table with basic styling and a cell with buttons.
+%table.table
+  %tr
+    %td Cell content
+    %td Cell content
+    %td Cell content
+  %tr
+    %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action

package/src/pages/tables/tables_alternating.haml

@@ -0,0 +1,27 @@
+---
+tags: tables
+title: Striped rows
+---
+
+%p.mb-heading Table with alternating background colors for rows
+%table.table.table-striped
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action

package/src/pages/tables/tables_borders.haml

@@ -0,0 +1,22 @@
+---
+tags: tables
+title: Borders
+---
+
+%p.mb-heading Table with borders
+%table.table.table-bordered
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action

package/src/pages/tables/tables_cells.haml

@@ -0,0 +1,50 @@
+---
+tags: tables
+title: Cell behavior
+---
+
+%p.mb-heading
+  Using the class 
+  %code.tag table-standard
+  will make the last cell in a row take up all the available space. All previous cells will be as wide as their content.
+
+%table.table-standard.table-cellstyle
+  %tbody
+    %tr
+      %td A cell with some lorem ipsum
+      %td Cell content
+      %td A small cell
+    %tr
+      %td This cell will take as much space as it's content
+      %td Cell content
+      %td The last cell will take up all the free space
+.py-sm
+%table.table-standard.table-cellstyle
+  %tbody
+    %tr
+      %td.cell-full-width
+        Add 
+        %code.tag.bg-gray-light .cell-full-width
+        to let a cell take all the available space.
+      %td.wrap.min-w-12
+        Add 
+        %code.tag.bg-gray-light .wrap
+        to allow line breaks within a cell. 
+      %td Another cell content
+      %td € 40.00
+    %tr
+      %td.cell-full-width.pre
+        %p Add 
+        %code.tag.bg-gray-light .pre
+        %br
+        to show preformatted white space.
+        | Multi 
+        | Line 
+        | textbox
+        | Cat and dog
+      %td.wrap.min-w-spacing-2xl
+        Wrapping cells need a 
+        %code.tag.bg-gray-light .min-w
+        rule to not be squished. 
+      %td Another cell content
+      %td € 999.00

package/src/pages/tables/tables_footer.haml

@@ -0,0 +1,27 @@
+---
+tags: tables
+title: Footer
+---
+
+%p.mb-heading Table with header and footer
+%table.table.table-bordered.table-striped
+  %thead
+    %th Table header
+    %th Table header
+    %th Table header
+  %tbody
+    %tr
+      %td Cell 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td Cell content
+      %td.cell-with-buttons
+        %button.btn.btn-primary action
+    %tr
+      %td Cell content
+      %td Cell 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td.cell-with-buttons
+        %button.btn.btn-primary action
+  %tfoot
+    %tr
+      %td Table footer
+      %td Table footer
+      %td Table footer

package/src/pages/tables/tables_formrow.haml

@@ -0,0 +1,31 @@
+---
+tags: tables
+title: Table within form
+---
+
+%p.mb-xs Tables cannot contain form elements, instead wrap the whole table with a form element.
+
+%form
+  %table.table.table-bordered.align-top
+    %tbody
+      %tr
+        %td
+          %select.tom-select.min-w-spacing-3xl{placeholder: "Please select"}
+            %option{value: ""}
+            %option{value:"Option 1"} Option 1
+            %option{value:"Option 2"} Option 2
+            %option{value:"Option 3"} Option 3
+            %option{value:"Option 4"} ABC
+            %option{value:"Option 5"} DEF
+            %option{value:"Option 6"} WHY
+            %option{value:"Option 7"} XYZ
+        %td
+          %input.form-control.min-w-spacing-3xl{type:'text', placeholder:"Add min-w to avoid squishing"}
+        %td
+          %textarea.form-control.min-w-spacing-3xl{rows:'1', placeholder:"Text area with min-w"}
+        %td.text-right
+          .btn-group.ml-auto
+            %button.btn.btn-success.btn-square
+              .icon.icon-check
+            %button.btn.btn-danger.btn-square
+              .icon.icon-cross

package/src/pages/tables/tables_header.haml

@@ -0,0 +1,22 @@
+---
+tags: tables
+title: Header
+---
+
+%p.mb-heading Table with header
+%table.table.table-bordered.table-striped
+  %thead
+    %th Table header
+    %th Table header
+    %th Table header
+  %tbody
+    %tr
+      %td Cell 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td Cell content
+      %td
+        %button.btn.btn-primary action
+    %tr
+      %td Cell content
+      %td Cell 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td
+        %button.btn.btn-primary action

package/src/pages/{components → tables}/tables_linked.haml

@@ -1,23 +1,24 @@
 ---
-tags: components
-title: Tables with linked content
+tags: tables
+title: Linked cells and rows
 ---
 
 %p.mb-heading
-  Individual cells can be linked with JS. Add the class .linked-cell to highlight it on hover.
-  %br
-  If you want to highlight a whole row, but still have action buttons, use the class .highlight-parent-row.
-%table.table.table-bordered.table-striped
-  %thead
-    %th Table header
-    %th Table header
-    %th Table header
+  %span Individual cells can be linked with Javascript. Add the class 
+  %code.tag .linked-cell 
+  %span to highlight it on hover.
+%table.table.table-bordered
   %tbody
     %tr
       %td.linked-cell{onclick: "location.href='https://test.io'"} Linked cell
       %td.linked-cell{onclick: "location.href='https://test.io'"} Linked cell
       %td.cell-with-buttons
         %a.btn.btn-primary{href:"#"} action
+%p.mb-heading
+  %span If you want to highlight a whole row, but still have action buttons, use the class 
+  %code.tag .highlight-parent-row.
+%table.table.table-bordered
+  %tbody
     %tr
       %td.highlight-parent-row{onclick: "location.href='https://test.io'"} Highlight parent
       %td.highlight-parent-row{onclick: "location.href='https://test.io'"} Highlight parent

package/src/pages/typography/link_with_icon.haml

@@ -3,10 +3,18 @@ tags: typography
 title: Link with icon
 ---
 
+%p.mb-heading This component provides a solution for the common usecase to have links with icons.
 %a.link-with-icon{href:""}
   .icon.icon-exclamation-circle
-  All approved testers must complete this course to achieve bronze level and above.
+  Link text
 .pt-xs
 %a.link-with-icon{href:""}
   .icon.icon-exclamation-circle
-  All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
+  A longer link text that might wrap onto multiple lines to demonstrate proper alignment of the icon with the text content.
+%p.my-heading As an alternative consider the use of ghost buttons.
+%a.btn.btn-ghost{href:""}
+  .icon.icon-exclamation-circle.mr-icon-spacing
+  Button
+%a.btn.btn-ghost.btn-sm{href:""}
+  .icon.icon-exclamation-circle.mr-icon-spacing
+  Button SM

package/src/pages/typography/linked_icon.haml

@@ -3,8 +3,14 @@ tags: typography
 title: Linked icon
 ---
 
+%p.mb-heading This component provides a solution for the common usecase to have linked icons.
 %a.linked-icon{href:""}
   .icon.icon-exclamation-circle
 .pt-xs
 %a.linked-icon{href:""}
   .icon.icon-exclamation-circle-filled
+%p.my-heading As an alternative consider the use of square ghost buttons. They offer a larger clickable area.
+%a.btn.btn-square.btn-ghost{href:""}
+  .icon.icon-exclamation-circle
+%a.btn.btn-square.btn-ghost.btn-sm{href:""}
+  .icon.icon-exclamation-circle

package/src/pages/typography/section_header.haml

@@ -3,6 +3,7 @@ tags: typography
 title: Section header
 ---
 
+%p.mb-heading This component is used to separate different sections of a page with a header and an optional label.
 %section
   .section-header
     %h1.section-title Section header with h1

package/src/pages/typography/section_header_actions.haml

@@ -3,6 +3,7 @@ tags: typography
 title: Section header with actions
 ---
 
+%p.mb-heading This component is used to separate different sections of a page with a header and action links or icons.
 %section
   .section-header
     %h1.section-title Section with action h1

package/src/pages/typography/text_with_icon.haml

@@ -3,10 +3,11 @@ tags: typography
 title: Text with icon
 ---
 
+%p.mb-heading This component provides a solution for the common usecase to have text with icons.
 .text-with-icon
   .icon.icon-exclamation-circle
-  All approved testers must complete this course to achieve bronze level and above.
+  Example text
 .pt-xs
 .text-with-icon
   .icon.icon-exclamation-circle
-  All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
+  A longer example text that might wrap onto multiple lines to demonstrate proper alignment of the icon with the text content.

package/utils/filters.js

@@ -1,11 +1,172 @@
 
 const { DateTime } = require('luxon')
 
+// HTML to HAML converter with proper indentation
+function htmlToHaml(html) {
+  let haml = '';
+  let currentIndent = 0;
+  
+  // Remove leading/trailing whitespace
+  html = html.trim();
+  
+  // Tokenize HTML
+  const tokens = tokenizeHtml(html);
+  
+  // Process tokens
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    
+    if (token.type === 'openTag') {
+      const hamlTag = tagToHaml(token.tag, token.attrs);
+      haml += getIndent(currentIndent) + hamlTag;
+      
+      // Check if this is a self-closing or void element
+      if (token.selfClosing || isVoidElement(token.tag)) {
+        haml += '\n';
+      } else {
+        haml += '\n';
+        currentIndent++;
+      }
+    } else if (token.type === 'closeTag') {
+      currentIndent = Math.max(0, currentIndent - 1);
+    } else if (token.type === 'text') {
+      const text = token.content.trim();
+      if (text) {
+        haml += getIndent(currentIndent) + text + '\n';
+      }
+    }
+  }
+  
+  return haml.trim();
+}
+
+// Tokenize HTML into an array of tokens
+function tokenizeHtml(html) {
+  const tokens = [];
+  let i = 0;
+  
+  while (i < html.length) {
+    if (html[i] === '<') {
+      const tagEnd = html.indexOf('>', i);
+      if (tagEnd === -1) break;
+      
+      const tagContent = html.substring(i + 1, tagEnd);
+      
+      if (tagContent.startsWith('/')) {
+        // Closing tag
+        const tagName = tagContent.substring(1).trim();
+        tokens.push({ type: 'closeTag', tag: tagName });
+      } else if (tagContent.startsWith('!')) {
+        // Comment or doctype - skip
+        i = tagEnd + 1;
+        continue;
+      } else {
+        // Opening tag
+        const selfClosing = tagContent.endsWith('/');
+        const cleanContent = selfClosing ? tagContent.slice(0, -1) : tagContent;
+        const parts = cleanContent.trim().split(/\s+/);
+        const tagName = parts[0];
+        const attrString = cleanContent.substring(tagName.length).trim();
+        
+        tokens.push({
+          type: 'openTag',
+          tag: tagName,
+          attrs: attrString,
+          selfClosing: selfClosing
+        });
+      }
+      
+      i = tagEnd + 1;
+    } else {
+      // Text content
+      const nextTag = html.indexOf('<', i);
+      const textEnd = nextTag === -1 ? html.length : nextTag;
+      const text = html.substring(i, textEnd);
+      
+      if (text.trim()) {
+        tokens.push({ type: 'text', content: text });
+      }
+      
+      i = textEnd;
+    }
+  }
+  
+  return tokens;
+}
+
+// Convert a tag and its attributes to HAML format
+function tagToHaml(tag, attrString) {
+  let result = '%' + tag;
+  
+  if (!attrString) {
+    return result;
+  }
+  
+  const classes = [];
+  const ids = [];
+  const attrs = {};
+  
+  // Parse attributes
+  const attrRegex = /(\w+(?:-\w+)*(?::\w+)*)\s*=\s*["']([^"']*)["']|(\w+(?:-\w+)*(?::\w+)*)/g;
+  let match;
+  
+  while ((match = attrRegex.exec(attrString)) !== null) {
+    if (match[1]) {
+      const name = match[1];
+      const value = match[2];
+      
+      if (name === 'class') {
+        classes.push(...value.split(/\s+/));
+      } else if (name === 'id') {
+        ids.push(value);
+      } else if (name !== 'type' || tag !== 'input') {
+        // Skip type attribute for input tags as they're implicit
+        attrs[name] = value;
+      }
+    }
+  }
+  
+  // Build HAML tag with classes and IDs
+  if (ids.length > 0) {
+    result += '#' + ids.join('.');
+  }
+  
+  if (classes.length > 0) {
+    result += '.' + classes.join('.');
+  }
+  
+  // Add other attributes
+  if (Object.keys(attrs).length > 0) {
+    const attrPairs = Object.entries(attrs)
+      .map(([k, v]) => `${k}:'${v}'`)
+      .join(', ');
+    result += `{${attrPairs}}`;
+  }
+  
+  return result;
+}
+
+// Check if tag is a void element (self-closing)
+function isVoidElement(tag) {
+  const voidElements = ['br', 'hr', 'img', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
+  return voidElements.includes(tag.toLowerCase());
+}
+
+// Get indentation string
+function getIndent(level) {
+  return '  '.repeat(level);
+}
+
 module.exports = {
     // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
     htmlDateString: (dateObj) => {
       return DateTime.fromJSDate(dateObj, {
         zone: 'utc'
       }).toFormat('yyyy-LL-dd');
+    },
+    
+    // Convert HTML to HAML format
+    convertToHaml: (html) => {
+      return htmlToHaml(html);
     }
 }