Merge pull request #21 from web-illinois/ils-input

Adding examples for ils-input
web-illinois · Nov 8, 2023 · 3825c74 · 3825c74
2 parents 918ad71 + 0b17450
commit 3825c74
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/ils-input/addcode.css b/ils-input/addcode.css
@@ -0,0 +1,13 @@
+pre {
+    font-family: 'Fira Code', monospace;
+    font-size: 1rem;
+    background: var(--alt-bg);
+    position: relative;
+    display: block;
+    margin: 2em 0 4em 0;
+    max-width: 100%;
+    overflow-x: auto;
+    background: var(--il-cloud);
+    border: 1px solid black;
+    padding: 10px 0;
+}
diff --git a/ils-input/addcode.js b/ils-input/addcode.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function (event) {
+    document.querySelectorAll('pre').forEach(item => {
+        var node = item.previousElementSibling;
+        var code = document.createElement('code');
+        code.textContent = '        ' + node.outerHTML;
+        item.appendChild(code);        
+    });
+});
diff --git a/ils-input/index.html b/ils-input/index.html
@@ -10,6 +10,9 @@
     <script src="https://cdn.toolkit.illinois.edu/2.14/toolkit.js"></script>
     <link rel="stylesheet" href="input.css" media="all">
     <script src="input.js"></script>
+    <script src="addcode.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&amp;display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="addcode.css"  media="all"></link>
     <title>Form Design Samples</title>
 </head>
 
@@ -21,41 +24,50 @@ <h1>Form Information</h1>
             <label for="textbox">Text Box </label>
             <input id="textbox" type="text">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textbox2">Text Box With a Really Long Label that extends to at least three lines </label>
             <input id="textbox2" type="text">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textbox-short">Short Text Box </label>
             <input id="textbox-short" type="text" class="ils-input-short">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textbox-long">Long Text Box </label>
             <input id="textbox-long" type="text" class="ils-input-long">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textbox-instructions">Text Box With Instructions</label>
             <input id="textbox-instructions" type="text">
             <p>Some explanatory text which might get long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque est turpis, quis facilisis sem bibendum quis. Vestibulum finibus rutrum leo at imperdiet. Proin porta odio ut laoreet pharetra. Aenean sit amet blandit nisl, nec scelerisque orci. Donec sagittis nisi aliquet quam molestie pharetra. Suspendisse tincidunt, eros sit amet aliquet malesuada, lectus elit ultricies mauris, in vehicula odio nisl quis massa. Morbi commodo est sit amet elit aliquet malesuada.</p>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textbox-long-instructions">Long Text Box With Instructions</label>
             <input id="textbox-long-instructions" type="text" class="ils-input-long">
             <p>Some explanatory text which might get long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque est turpis, quis facilisis sem bibendum quis. Vestibulum finibus rutrum leo at imperdiet. Proin porta odio ut laoreet pharetra. Aenean sit amet blandit nisl, nec scelerisque orci. Donec sagittis nisi aliquet quam molestie pharetra. Suspendisse tincidunt, eros sit amet aliquet malesuada, lectus elit ultricies mauris, in vehicula odio nisl quis massa. Morbi commodo est sit amet elit aliquet malesuada.</p>
         </div>
+        <pre></pre>
         <h2>Heading example</h2>
         <div class="ils-input-entry">
             <label for="textbox-required">Required Text Box </label>
             <input id="textbox-required" type="text" required>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textbox-required-long">Required Long Text Box </label>
             <input id="textbox-required-long" type="text" class="ils-input-long" required>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textarea">Text Area </label>
             <textarea id="textarea"></textarea>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="textarea-required">Required Text Area </label>
             <textarea id="textarea-required" required></textarea>
@@ -64,18 +76,22 @@ <h2>Heading example</h2>
             <label for="checkbox">Checkbox </label>
             <input id="checkbox" type="checkbox">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="datetime-local">Date/Time Picker </label>
             <input type="datetime-local" id="datetime-local" value="">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="datetime-local-step">Date/Time Picker, using step </label>
             <input type="datetime-local" id="datetime-local-step" value="" step="36000">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="date">Date Picker </label>
             <input type="date" id="date" value="">
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="datalist">Autocomplete</label>
             <input id="datalist" list="select" type="text" placeholder="Choose an Item">
@@ -86,6 +102,7 @@ <h2>Heading example</h2>
             </datalist>
             <p>The data list is used to give a user free-text options, but prompt them to choose a specific item. You can use JavaScript to enforce that what they choose is one of the options. <em>To start out, try typing "item"</em></p>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="dropdown">Dropdown </label>
             <select id="dropdown" name="dropdown">
@@ -95,6 +112,7 @@ <h2>Heading example</h2>
                 <option value="3">Third Item</option>
             </select>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label for="dropdown">Long Dropdown </label>
             <select id="dropdown" name="dropdown" class="ils-input-long">
@@ -104,9 +122,11 @@ <h2>Heading example</h2>
                 <option value="3">Third Item</option>
             </select>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <button class="il-button" disabled>Disabled button </button>
         </div>
+        <pre></pre>
         <div class="ils-input-entry-radio">
             <p>Radio Buttons Title </p>
             <input type="radio" id="radio1" name="radio" value="1">
@@ -116,6 +136,7 @@ <h2>Heading example</h2>
             <input type="radio" id="radio3" name="radio" value="3">
             <label for="radio3">Third Item</label>
         </div>
+        <pre></pre>
         <div class="ils-input-entry-radio-vertical">
             <p>Vertical Radio Buttons Title </p>
             <input type="radio" id="radio1-v" name="radio-v" value="1">
@@ -125,22 +146,26 @@ <h2>Heading example</h2>
             <input type="radio" id="radio3-v" name="radio-v" value="3">
             <label for="radio3-v">Third Item</label>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label>Toggle Button, starts disabled</label>
             <button id="toggle" class="il-button" aria-pressed="false" data-ils-input-on="Enabled" data-ils-input-off="Disabled"></button>
             <p>This should be used when the effect happens immediately.</p>
         </div>
+        <pre></pre>
         <div class="ils-input-entry">
             <label>Toggle Button, starts enabled</label>
             <button id="toggle-enabled" class="il-button" aria-pressed="true" data-ils-input-on="Enabled" data-ils-input-off="Disabled"></button>
         </div>
+        <pre></pre>
         <div class="ils-input-disclaimer">
             <label for="disclaimer">The opinions, resources, and referrals provided on this website are intended for
                 informational purposes only and are not intended to take the place of medical or legal advice, or of
                 other appropriate services. We encourage you to seek direct local assistance from a qualified
                 professional if necessary before taking action.</label>
             <input id="disclaimer" type="checkbox">
         </div>
+        <pre></pre>
         <fieldset>
             <legend>Field Set Title</legend>
             <div class="ils-input-entry">
@@ -159,6 +184,7 @@ <h2>Heading example</h2>
                 <input type="submit" value="Send Information" class="il-button ils-input-no-label">
             </div>
         </fieldset>
+        <pre></pre>
         <fieldset>
             <legend>Field Set Radio Buttons</legend>
             <div class="ils-input-entry">
@@ -174,8 +200,9 @@ <h2>Heading example</h2>
                 <input type="radio" id="radio3-fs" name="radio-fs" value="3">
             </div>
         </fieldset>
+        <pre></pre>
         <div class="ils-input-alert">Alert for forms</div>
+        <pre></pre>
     </il-section>
 </body>
-
-</html>
+</html>