desy-html 5.3.0 → 6.0.0

package/docs/index.html

@@ -38,6 +38,45 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.6.0.0</h3>
+  <ul class="text-sm">
+    <li>Compilation
+      <ul>
+        <li>Updated to TailwindCSS v3.0.24</li>
+        <li>Improved file compilation with TailwindCSS v.3 just-in-time mode by default. Now it's simpler and compiles all in any file changes. Removed cleancss. Now compiles css in Nunjucks, html or js changes.</li>
+        <li>Improved headings styles in prose with the tailwind typography plugin.</li>
+      </ul>
+    </li>
+    <li>Components
+      <ul>
+        <li>Added new component Menu navigation</li>
+        <li>Table advanced: Added selects in table head for filtering in columns</li>
+        <li>Modal: Added button loaders in items if param isButtonLoader is provided</li>
+        <li>Header: Added 2 zones to nest HTML content (customLogoHtml, customNavigationHtml). One after the logo and the other after the navigation. Added a param to hide the default GA logo (noLogo). Added target param to navigation items</li>
+        <li>Added new component Accordion history.</li>
+        <li>Footer: Added custom description, noLogo params. Improvements in logo position and navigation items position in mobile.</li>
+        <li>Toggle: now uses aria-expanded instead of aria-pressed by default.</li>
+      </ul>
+    </li>
+    <li>Improvements
+      <ul>
+        <li>Searchbar: improvements and example for visible label.</li>
+        <li>File upload: added button styles.</li>
+        <li>Tree: fixed acc. Improved examples.</li>
+        <li>Toggle examples: accesibility fixes.</li>
+        <li>Button: Added new modifier class for has selection as Dropdown. Improved dropdown has selection class.</li>
+        <li>Item: improved icons and text for screenreaders.</li>
+        <li>Button loader: fixed a bug that makes an error when no loader.text is provided</li>
+         <li>improved the check icon for Button loader, Listbox and Menubar: now it's the same in all browsers.</li>
+        <li>Accordion: Added disabled param to items. Now the show/hide info can be customized. Fixed item.classes not applied. Added cursor not allowed in disabled items.</li>
+        <li>Menu horizontal: Added new styles for tabs in mobile.</li>
+        <li>Header: Improvements in header active items and menu navigation active items.</li>
+        <li>Strong tag in base styles is font-semibold instead of font-bold.</li>
+      </ul>
+    </li>
+    <li>Fixed validation errors in Footer examples, Spinner, Button loader and Button.</li>
+    <li>Docs: Improved grid example. Added font-bold example for headings style, font-semibold for strong example, and em example.</li>
+  </ul>
   <h3>v.5.3.0</h3>
   <ul class="text-sm">
     <li>Added missing params in input-group for inputs.</li>

package/gulpfile.js

@@ -10,13 +10,11 @@ const postcss = require('gulp-postcss');
 const atimport = require('postcss-import');
 const tailwindnesting = require('tailwindcss/nesting');
 const stripCssComments = require('gulp-strip-css-comments');
-const cleanCSS = require('gulp-clean-css');
 const footer = require('gulp-footer');
 const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 
 const TAILWIND_CONFIG = './config/tailwind.config.js';
-const CLEANCSS_CONFIG = './config/clean-css.js';
 const SOURCE_HTML_DIR = './docs/**.html';
 const SOURCE_NUNJUCKS_PATHS = ['./src/templates/','./docs/'];
 const SOURCE_NUNJUCKS_FILES = ['./src/templates/**/*','./docs/**/*'];
@@ -36,9 +34,12 @@ function bs(cb) {
     }
   });
 
-  gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, ], gulp.series(css, reload));
-  gulp.watch([SOURCE_HTML_DIR, SOURCE_JS_DIR, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, reload));
+  cb();
+}
+
 
+function watchFiles(cb) {
+  gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, SOURCE_HTML_DIR, SOURCE_JS_DIR, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, css, reload));
   cb();
 }
 
@@ -60,7 +61,6 @@ function css() {
       ])
     )
     .pipe(stripCssComments({preserve: false}))
-    .pipe(cleanCSS(require(CLEANCSS_CONFIG)))
     .pipe(footer('\n'))
     .pipe(gulp.dest(DESTINATION_STYLESHEET));
 }
@@ -111,4 +111,5 @@ function cleanFolder() {
 }
 
 
-exports.default = series(cleanFolder, css, nunjucks, js, license, version, bs);
+exports.default = series(cleanFolder, html, nunjucks, js, css, license, version, bs, watchFiles);
+exports.prod = series(cleanFolder, html, nunjucks, js, css, license, version, bs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "5.3.0",
+  "version": "6.0.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",
@@ -26,20 +26,19 @@
   "main": "src/js/index.js",
   "scripts": {
     "dev": "gulp",
-    "prod": "NODE_ENV=production gulp"
+    "prod": "NODE_ENV=production gulp prod"
   },
   "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.2.1",
-    "@tailwindcss/forms": "^0.3.3",
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.0",
+    "@tailwindcss/typography": "^0.5.2",
     "autoprefixer": "^10.0.2",
-    "cssnano": "^4.1.10",
     "hex-rgb": "^4.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.15",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2",
-    "tailwindcss": "^2.2.7"
+    "tailwindcss": "^3.0.24"
   },
   "devDependencies": {
     "browser-sync": "^2.26.13",

package/src/css/base.css

@@ -35,4 +35,8 @@
       @apply font-normal;
     }
   }
+
+  strong {
+    @apply font-semibold;
+  }
 }

package/src/css/styles.css

@@ -26,6 +26,7 @@
 @import "../templates/components/input/_styles.input.css";
 @import "../templates/components/listbox/_styles.listbox.css";
 @import "../templates/components/menubar/_styles.menubar.css";
+@import "../templates/components/menu-navigation/_styles.menu-navigation.css";
 @import "../templates/components/menu-horizontal/_styles.menu-horizontal.css";
 @import "../templates/components/notification/_styles.notification.css";
 @import "../templates/components/pill/_styles.pill.css";

package/src/js/aria/accordion.js

@@ -32,7 +32,9 @@ export function accordion(aria) {
         if (!allowMultiple && active && active !== target) {
           // Set the expanded state on the triggering element
           active.setAttribute('aria-expanded', 'false');
-          active.querySelector('span').innerText = 'Mostrar';
+          //active.querySelector('span').innerText = 'Mostrar';
+          active.querySelector('.Accordion-show').classList.remove('hidden');
+          active.querySelector('.Accordion-hide').classList.add('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
 
@@ -45,20 +47,27 @@ export function accordion(aria) {
         if (!isExpanded) {
           // Set the expanded state on the triggering element
           target.setAttribute('aria-expanded', 'true');
-          target.querySelector('span').innerText = 'Ocultar';
+          //target.querySelector('span').innerText = 'Ocultar';
+          target.querySelector('.Accordion-show').classList.add('hidden');
+          target.querySelector('.Accordion-hide').classList.remove('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
 
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
             target.setAttribute('aria-disabled', 'true');
-            target.querySelector('span').innerText = '';
+            //target.querySelector('span').innerText = '';
+            target.querySelector('.Accordion-show').classList.add('hidden');
+            target.querySelector('.Accordion-hide').classList.add('hidden');
           }
         }
         else if (allowToggle && isExpanded) {
           // Set the expanded state on the triggering element
           target.setAttribute('aria-expanded', 'false');
-          target.querySelector('span').innerText = 'Mostrar';
+          // target.querySelector('span').innerText = 'Mostrar';
+          active.querySelector('.Accordion-show').classList.remove('hidden');
+          active.querySelector('.Accordion-hide').classList.add('hidden');
+
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
         }
@@ -133,7 +142,9 @@ export function accordion(aria) {
       // If an expanded/ active accordion is found, disable
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
-        expanded.querySelector('span').innerText = '';
+        //expanded.querySelector('span').innerText = '';
+        expanded.querySelector('.Accordion-show').classList.add('hidden');
+        expanded.querySelector('.Accordion-hide').classList.add('hidden');
       }
     }
 

package/src/js/aria/disclosureMenu.js

@@ -0,0 +1,153 @@
+export function DisclosureNav(aria) {
+  /*
+  *   This content is licensed according to the W3C Software License at
+  *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+  *
+  *   Supplemental JS for the disclosure menu keyboard behavior
+  */
+
+
+  aria.DisclosureNav = function (domNode) {
+    this.rootNode = domNode;
+    this.triggerNodes = [];
+    this.controlledNodes = [];
+    this.openIndex = null;
+    this.useArrowKeys = true;
+  };
+
+  aria.DisclosureNav.prototype.init = function () {
+    var buttons = this.rootNode.querySelectorAll('button[aria-expanded][aria-controls]');
+    for (var i = 0; i < buttons.length; i++) {
+      var button = buttons[i];
+      var menu = button.parentNode.querySelector('ul');
+      if (menu) {
+        // save ref to button and controlled menu
+        this.triggerNodes.push(button);
+        this.controlledNodes.push(menu);
+
+        // collapse menus
+        button.setAttribute('aria-expanded', 'false');
+        this.toggleMenu(menu, false);
+
+        // attach event listeners
+        menu.addEventListener('keydown', this.handleMenuKeyDown.bind(this));
+        button.addEventListener('click', this.handleButtonClick.bind(this));
+        button.addEventListener('keydown', this.handleButtonKeyDown.bind(this));
+      }
+    }
+
+    this.rootNode.addEventListener('focusout', this.handleBlur.bind(this));
+  };
+
+  aria.DisclosureNav.prototype.toggleMenu = function (domNode, show) {
+    if (domNode) {
+      domNode.style.display = show ? 'block' : 'none';
+    }
+  };
+
+  aria.DisclosureNav.prototype.toggleExpand = function (index, expanded) {
+    // close open menu, if applicable
+    if (this.openIndex !== index) {
+      this.toggleExpand(this.openIndex, false);
+    }
+
+    // handle menu at called index
+    if (this.triggerNodes[index]) {
+      this.openIndex = expanded ? index : null;
+      this.triggerNodes[index].setAttribute('aria-expanded', expanded);
+      this.toggleMenu(this.controlledNodes[index], expanded);
+    }
+  };
+
+  aria.DisclosureNav.prototype.controlFocusByKey = function (keyboardEvent, nodeList, currentIndex) {
+    switch (keyboardEvent.key) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        keyboardEvent.preventDefault();
+        if (currentIndex > -1) {
+          var prevIndex = Math.max(0, currentIndex - 1);
+          nodeList[prevIndex].focus();
+        }
+        break;
+      case 'ArrowDown':
+      case 'ArrowRight':
+        keyboardEvent.preventDefault();
+        if (currentIndex > -1) {
+          var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
+          nodeList[nextIndex].focus();
+        }
+        break;
+      case 'Home':
+        keyboardEvent.preventDefault();
+        nodeList[0].focus();
+        break;
+      case 'End':
+        keyboardEvent.preventDefault();
+        nodeList[nodeList.length - 1].focus();
+        break;
+    }
+  };
+
+  /* Event Handlers */
+  aria.DisclosureNav.prototype.handleBlur = function (event) {
+    var menuContainsFocus = this.rootNode.contains(event.relatedTarget);
+    if (!menuContainsFocus && this.openIndex !== null) {
+      this.toggleExpand(this.openIndex, false);
+    }
+  };
+
+  aria.DisclosureNav.prototype.handleButtonKeyDown = function (event) {
+    var targetButtonIndex = this.triggerNodes.indexOf(document.activeElement);
+
+    // close on escape
+    if (event.key === 'Escape') {
+      this.toggleExpand(this.openIndex, false);
+    }
+
+    // move focus into the open menu if the current menu is open
+    else if (this.useArrowKeys && this.openIndex === targetButtonIndex && event.key === 'ArrowDown') {
+      event.preventDefault();
+      this.controlledNodes[this.openIndex].querySelector('a').focus();
+    }
+
+    // handle arrow key navigation between top-level buttons, if set
+    else if (this.useArrowKeys) {
+      this.controlFocusByKey(event, this.triggerNodes, targetButtonIndex);
+    }
+  };
+
+  aria.DisclosureNav.prototype.handleButtonClick = function (event) {
+    var button = event.target;
+    console.log(button);
+    var buttonIndex = this.triggerNodes.indexOf(button);
+    var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
+    this.toggleExpand(buttonIndex, !buttonExpanded);
+  };
+
+  aria.DisclosureNav.prototype.handleMenuKeyDown = function (event) {
+    if (this.openIndex === null) {
+      return;
+    }
+
+    var menuLinks = Array.prototype.slice.call(this.controlledNodes[this.openIndex].querySelectorAll('a'));
+    var currentIndex = menuLinks.indexOf(document.activeElement);
+
+    // close on escape
+    if (event.key === 'Escape') {
+      this.triggerNodes[this.openIndex].focus();
+      this.toggleExpand(this.openIndex, false);
+    }
+
+    // handle arrow key navigation within menu links, if set
+    else if (this.useArrowKeys) {
+      this.controlFocusByKey(event, menuLinks, currentIndex);
+    }
+  };
+
+  // switch on/off arrow key navigation
+  aria.DisclosureNav.prototype.updateKeyControls = function (useArrowKeys) {
+    this.useArrowKeys = useArrowKeys;
+  };
+
+
+}

package/src/js/desy-html.js

@@ -7,6 +7,7 @@ import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
 import { PopupMenuAction } from './aria/PopupMenuAction.js';
 import { MenubarItemAction } from './aria/MenubarItemAction.js';
 import { MenubarAction } from './aria/MenubarAction.js';
+import { DisclosureNav } from './aria/disclosureMenu.js';
 import { listbox } from './aria/listbox.js';
 import { alert } from './aria/alert.js';
 import { Treeitem } from './aria/treeitem.js';
@@ -215,6 +216,20 @@ export function menubarComponent(aria) {
   }
 }
 
+export function menuNavigationComponent(aria) {
+  DisclosureNav(aria);
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-menu-navigation'){
+      console.log(modules[item]);
+      const menuNavigation = new aria.DisclosureNav(modules[item]);
+      menuNavigation.init();
+    }
+  }
+}
+
 export function tableAdvancedComponent(aria) {
   utils(aria);
   dataGrid(aria);

package/src/js/index.js

@@ -10,6 +10,7 @@ import {
   dropdownComponent,
   listboxComponent,
   menubarComponent,
+  menuNavigationComponent,
   tableAdvancedComponent,
   tabsComponent,
   tooltipComponent,
@@ -24,6 +25,7 @@ dialogComponent(aria);
 dropdownComponent(aria);
 listboxComponent(aria);
 menubarComponent(aria);
+menuNavigationComponent(aria);
 tableAdvancedComponent(aria);
 tabsComponent(aria);
 tooltipComponent(aria);

package/src/templates/components/accordion/_examples.accordion.njk

@@ -115,6 +115,33 @@
       ]
     }
   },
+  {
+    "name": "disabled and allowToggle and allowMultiple",
+    "description": "will hide the show/hide info and disable click in items",
+    "data": {
+      "idPrefix": "accordion-disabled",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item not disabled",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item disabled",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "disabled": true
+        },
+        {
+          "headerText": "Accordion Item disabled and open",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "disabled": true,
+          "open": true
+        }
+      ]
+    }
+  },
   {
     "name": "With heading",
     "data": {
@@ -191,13 +218,54 @@
       ]
     }
   },
+  {
+    "name": "with custom show/hide info",
+    "description": "The last item has empty strings to don't show any info",
+    "data": {
+      "idPrefix": "accordion-show-hide",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "show": {
+            "text": "Expandir detalles"
+          },
+          "hide": {
+            "text": "Contraer"
+          }
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "show": {
+            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
+          },
+          "hide": {
+            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
+          }
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "show": {
+            "text": ""
+          },
+          "hide": {
+            "text": ""
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "With classes applied",
     "description": "Show code to display the classes applied in html",
     "data": {
       "idPrefix": "classes-example",
       "headingLevel": 3,
-      "classes": "p-base bg-warning-light",
+      "classes": "px-lg pt-base border-t border-b border-neutral-base",
       "heading": {
         "text": "Accordion example",
         "classes": "c-h2 mb-lg uppercase"
@@ -210,7 +278,7 @@
         {
           "headerText": "Accordion Item 2",
           "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
-          "classes": "py-sm bg-white rounded-lg",
+          "classes": "py-sm bg-neutral-light border border-neutral-base rounded-lg",
           "open": true
         },
         {

package/src/templates/components/accordion/_template.accordion.njk

@@ -97,22 +97,32 @@ x-data="{
         {% set insideContent %}
           <button
           id="{{ id }}-title"
-          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
+          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
           aria-controls="{{ id }}"
           {% if item.open %}
             aria-expanded = "true"
           {% else %}
             aria-expanded = "false"
           {% endif %}
+          {% if item.disabled %} disabled{% endif %}
           >
             {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
             <span
-              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
-                {% if item.open %}
-                  Ocultar
-                {% else %}
-                  Mostrar
-                {% endif %}
+              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
+                <span class="Accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                  {% if item.show %}
+                    {{ item.show.html | safe if item.show.html else item.show.text }}
+                  {% else %}
+                    Mostrar
+                  {% endif %}
+                </span>
+                <span class="Accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                  {% if item.hide %}
+                    {{ item.hide.html | safe if item.hide.html else item.hide.text }}
+                  {% else %}
+                    Ocultar
+                  {% endif %}
+                </span>
               </span>
           </button>
         {% endset %}
@@ -137,7 +147,7 @@ x-data="{
         {%- if id %}
           id="{{ id }}"
         {% endif %}
-        class="Accordion-panel"
+        class="Accordion-panel {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.html | safe if item.html else item.text }}
         </div>

package/src/templates/components/accordion/params.accordion.yaml

@@ -65,6 +65,44 @@ params:
     type: boolean
     required: false
     description: If true, accordion item will be expanded.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, accordion item will be disabled and will not show the show/hide control.
+  - name: show
+    type: object
+    required: false
+    description: Options to customize the show info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in show info. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within the show info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the show info.
+  - name: hide
+    type: object
+    required: false
+    description: Options to customize the hide info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in hide info. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within the hide info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the hide info.
   - name: classes
     type: string
     required: false