Update components and CSS

Author: jonatansteller

Resources/Private/Components/Atom/Button/Current/Current.html

@@ -5,15 +5,17 @@
     <f:argument name="pageType" type="int" optional="{true}" default="0" description="Integer of the serialisation (typeNum) to link to" />
     <f:argument name="contentType" type="string" optional="{true}" default="" description="Content type of the linked serialisation" />
     <f:argument name="language" type="string" optional="{true}" default="current" description="ID of the language version to link to" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="rel" type="string" optional="{true}" default="" description="The link's relationship attribute" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
     <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button to produce (tiny, mini, icon, tinyicon, miniicon, texticon, round, light, overlay, transparent, unobtrusive, unobserved, embedded, sidelined, tacit, tacit-above-900, tacit-below-900, tacit-above-600, tacit-below-600)" />
     <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (copy)" />
-    <f:argument name="aria" type="string[]" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
-    <f:argument name="data" type="string[]" optional="{true}" default="{}" description="Array of additional data attributes" />
+    <f:argument name="aria" type="array" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
+    <f:argument name="data" type="array" optional="{true}" default="{}" description="Array of additional data attributes" />
 
     <f:variable name="class">mdlr-button</f:variable>
     <f:for each="{variants}" as="variant">
@@ -29,7 +31,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/Button/Disabled/Disabled.html

@@ -2,7 +2,9 @@
     <f:comment>Button in an inactive state.</f:comment>
 
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
@@ -19,7 +21,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/Button/Email/Email.html

@@ -7,15 +7,17 @@
     <f:argument name="bcc" type="string" optional="{true}" default="" description="Email address to send a shadow copy to" />
     <f:argument name="subject" type="string" optional="{true}" default="" description="Email subject to use" />
     <f:argument name="body" type="string" optional="{true}" default="" description="Email body to use" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="rel" type="string" optional="{true}" default="" description="The link's relationship attribute" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
     <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button to produce (tiny, mini, icon, tinyicon, miniicon, texticon, round, light, overlay, transparent, unobtrusive, unobserved, embedded, sidelined, tacit, tacit-above-900, tacit-below-900, tacit-above-600, tacit-below-600)" />
     <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (copy)" />
-    <f:argument name="aria" type="string[]" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
-    <f:argument name="data" type="string[]" optional="{true}" default="{}" description="Array of additional data attributes" />
+    <f:argument name="aria" type="array" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
+    <f:argument name="data" type="array" optional="{true}" default="{}" description="Array of additional data attributes" />
 
     <f:variable name="class">mdlr-button</f:variable>
     <f:for each="{variants}" as="variant">
@@ -31,7 +33,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/Button/External/External.html

@@ -3,15 +3,17 @@
 
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button" />
     <f:argument name="uri" type="string" optional="{false}" description="External URL to link to" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="rel" type="string" optional="{true}" default="" description="The link's relationship attribute" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
     <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button to produce (tiny, mini, icon, tinyicon, miniicon, texticon, round, light, overlay, transparent, unobtrusive, unobserved, embedded, sidelined, tacit, tacit-above-900, tacit-below-900, tacit-above-600, tacit-below-600)" />
     <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (copy)" />
-    <f:argument name="aria" type="string[]" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
-    <f:argument name="data" type="string[]" optional="{true}" default="{}" description="Array of additional data attributes" />
+    <f:argument name="aria" type="array" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
+    <f:argument name="data" type="array" optional="{true}" default="{}" description="Array of additional data attributes" />
 
     <f:variable name="class">mdlr-button</f:variable>
     <f:for each="{variants}" as="variant">
@@ -27,7 +29,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/Button/Function/Function.html

@@ -2,15 +2,17 @@
     <f:comment>Button to set off a JavaScript function.</f:comment>
 
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="popoverTarget" type="string" optional="{true}" default="" description="ID of the popover to toggle via this button" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
     <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button to produce (tiny, mini, icon, tinyicon, miniicon, texticon, round, light, overlay, transparent, unobtrusive, unobserved, embedded, sidelined, tacit, tacit-above-900, tacit-below-900, tacit-above-600, tacit-below-600)" />
     <f:argument name="function" type="string" optional="{false}" description="JavaScript function to apply (storage, theme, back, pdf, fullscreen, modal, modal-close, toast-close, copy, share, mastodon, watchlist-list, watchlist-add, watchlist-csv, watchlist-json, watchlist-clear, watchlist-empty, watchlist-serialisations)" />
-    <f:argument name="aria" type="string[]" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
-    <f:argument name="data" type="string[]" optional="{true}" default="{}" description="Array of additional data attributes" />
+    <f:argument name="aria" type="array" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
+    <f:argument name="data" type="array" optional="{true}" default="{}" description="Array of additional data attributes" />
 
     <f:variable name="class"></f:variable>
     <f:for each="{variants}" as="variant">
@@ -26,7 +28,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/Button/Page/Page.html

@@ -3,15 +3,17 @@
 
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button" />
     <f:argument name="pageUid" type="int" optional="{false}" description="Page UID to link to" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="rel" type="string" optional="{true}" default="" description="The link's relationship attribute" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
     <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button to produce (tiny, mini, icon, tinyicon, miniicon, texticon, round, light, overlay, transparent, unobtrusive, unobserved, embedded, sidelined, tacit, tacit-above-900, tacit-below-900, tacit-above-600, tacit-below-600)" />
     <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (select-form)" />
-    <f:argument name="aria" type="string[]" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
-    <f:argument name="data" type="string[]" optional="{true}" default="{}" description="Array of additional data attributes" />
+    <f:argument name="aria" type="array" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
+    <f:argument name="data" type="array" optional="{true}" default="{}" description="Array of additional data attributes" />
 
     <f:variable name="class">mdlr-button</f:variable>
     <f:for each="{variants}" as="variant">
@@ -27,7 +29,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/Button/Section/Section.html

@@ -3,15 +3,17 @@
 
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button" />
     <f:argument name="section" type="string" optional="{false}" description="Page section to link to" />
+    <f:argument name="textCode" type="string" optional="{true}" default="" description="Short, bold text to show on the button before its title" />
     <f:argument name="text" type="string" optional="{false}" description="Text to show on the button and as its title" />
+    <f:argument name="textCount" type="int" optional="{true}" default="0" description="Count to show on the button after its title" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Button title if different from the text" />
     <f:argument name="rel" type="string" optional="{true}" default="" description="The link's relationship attribute" />
     <f:argument name="icon" type="string" optional="{true}" default="" description="The icon to display (cf. available icon assets)" />
     <f:argument name="iconAfter" type="string" optional="{true}" default="" description="The icon to display after the text (cf. available icon assets)" />
     <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button to produce (tiny, mini, icon, tinyicon, miniicon, texticon, round, light, overlay, transparent, unobtrusive, unobserved, embedded, sidelined, tacit, tacit-above-900, tacit-below-900, tacit-above-600, tacit-below-600)" />
     <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (up)" />
-    <f:argument name="aria" type="string[]" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
-    <f:argument name="data" type="string[]" optional="{true}" default="{}" description="Array of additional data attributes" />
+    <f:argument name="aria" type="array" optional="{true}" default="{}" description="Array of additional ARIA attributes" />
+    <f:argument name="data" type="array" optional="{true}" default="{}" description="Array of additional data attributes" />
 
     <f:variable name="class">mdlr-button</f:variable>
     <f:for each="{variants}" as="variant">
@@ -27,7 +29,7 @@
                 <use href="#icon-{icon}" />
             </svg>
         </f:if>
-        <span><f:format.raw>{text}</f:format.raw></span>
+        <span><f:if condition="{textCode}"><strong><f:format.raw>{textCode}</f:format.raw></strong> </f:if><f:format.raw>{text}</f:format.raw><f:if condition="{textCount}"> <span class="mdlr-button-count">{textCount}</span></f:if></span>
         <f:if condition="{iconAfter}">
             <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <use href="#icon-{iconAfter}" />

Resources/Private/Components/Atom/List/Item/Item.html

@@ -0,0 +1,7 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:comment>Component to produce a simple list item.</f:comment>
+
+    <li>
+        <f:slot />
+    </li>
+</html>

Resources/Private/Components/Atom/List/Wrap/Wrap.html

@@ -0,0 +1,7 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:comment>Component to produce a simple list.</f:comment>
+
+    <ul>
+        <f:slot />
+    </ul>
+</html>