fix: correct comments to for styleguide generation

privacybydesign · Oct 9, 2023 · a536014 · a536014
1 parent c4f5224
commit a536014
Show file tree

Hide file tree

Showing 32 changed files with 1,089 additions and 1,049 deletions.
diff --git a/yivi-css/package-lock.json b/yivi-css/package-lock.json
diff --git a/yivi-css/package.json b/yivi-css/package.json
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "concurrently": "^5.3.0",
-    "kss": "^3.0.1",
+    "kss": "^3.1.0",
     "michelangelo": "^0.8.0",
     "onchange": "^7.1.0",
     "sass": "^1.32.4",

diff --git a/yivi-css/src/animations/checkmark.scss b/yivi-css/src/animations/checkmark.scss
@@ -1,12 +1,13 @@
-/* Checkmark
- *
- * A checkmark to indicate success
- *
- * Markup:
- * <div class="yivi-web-checkmark-animation"></div>
- *
- * Styleguide Animations.Checkmark
- */
+/*
+Checkmark
+
+A checkmark to indicate success
+
+Markup:
+<div class="yivi-web-checkmark-animation"></div>
+
+Styleguide Animations.Checkmark
+*/
 @import '../mixins/reset', '../mixins/animation', '../variables/colours';
 
 .yivi-web-checkmark-animation {

diff --git a/yivi-css/src/animations/clock.scss b/yivi-css/src/animations/clock.scss
@@ -1,12 +1,13 @@
-/* Clock
- *
- * A clock to show timeouts
- *
- * Markup:
- * <div class="yivi-web-clock-animation"></div>
- *
- * Styleguide Animations.Clock
- */
+/*
+Clock
+
+A clock to show timeouts
+
+Markup:
+<div class="yivi-web-clock-animation"></div>
+
+Styleguide Animations.Clock
+*/
 
 @use 'sass:math';
 

diff --git a/yivi-css/src/animations/forbidden.scss b/yivi-css/src/animations/forbidden.scss
@@ -1,12 +1,13 @@
-/* Forbidden
- *
- * A forbidden sign to show issues
- *
- * Markup:
- * <div class="yivi-web-forbidden-animation" onclick="var elm = this; elm.className = ''; setTimeout(function() { elm.className = 'yivi-web-forbidden-animation'; }, 100)"></div>
- *
- * Styleguide Animations.Forbidden
- */
+/*
+Forbidden
+
+A forbidden sign to show issues
+
+Markup:
+<div class="yivi-web-forbidden-animation" onclick="var elm = this; elm.className = ''; setTimeout(function() { elm.className = 'yivi-web-forbidden-animation'; }, 100)"></div>
+
+Styleguide Animations.Forbidden
+*/
 
 @use 'sass:math';
 

diff --git a/yivi-css/src/animations/index.scss b/yivi-css/src/animations/index.scss
@@ -1,8 +1,9 @@
-/* Animations
- *
- * Weight: 5
- *
- * Styleguide Animations
- */
+/*
+Animations
+
+Weight: 5
+
+Styleguide Animations
+*/
 
 @import 'loading', 'waiting-for-user', 'checkmark', 'forbidden', 'clock';
diff --git a/yivi-css/src/animations/loading.scss b/yivi-css/src/animations/loading.scss
@@ -1,14 +1,15 @@
-/* Loading
- *
- * A loading animation that precedes the QR code
- *
- * Markup:
- * <div class="yivi-web-loading-animation">
- *   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
- * </div>
- *
- * Styleguide Animations.Loading
- */
+/*
+Loading
+
+A loading animation that precedes the QR code
+
+Markup:
+<div class="yivi-web-loading-animation">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+</div>
+
+Styleguide Animations.Loading
+*/
 
 @import '../mixins/reset', '../mixins/animation', '../variables/colours';
 

diff --git a/yivi-css/src/animations/waiting-for-user.scss b/yivi-css/src/animations/waiting-for-user.scss
@@ -1,13 +1,14 @@
-/* Waiting for user
- *
- * An animation to show while we wait for the user to disclose credentials from
- * their mobile phone
- *
- * Markup:
- * <div class="yivi-web-waiting-for-user-animation"></div>
- *
- * Styleguide Animations.Waiting for user
- */
+/*
+Waiting for user
+
+An animation to show while we wait for the user to disclose credentials from
+their mobile phone
+
+Markup:
+<div class="yivi-web-waiting-for-user-animation"></div>
+
+Styleguide Animations.Waiting for user
+*/
 
 @import '../mixins/reset', '../mixins/animation', '../variables/colours';
 

diff --git a/yivi-css/src/components/index.scss b/yivi-css/src/components/index.scss
@@ -1,8 +1,9 @@
-/* Components
- *
- * Weight: 4
- *
- * Styleguide Components
- */
+/*
+Components
+
+Weight: 4
+
+Styleguide Components
+*/
 
 @import 'yivi-form', 'yivi-button', 'yivi-logo', 'yivi-pairing-form', 'qr-code';
diff --git a/yivi-css/src/components/qr-code.scss b/yivi-css/src/components/qr-code.scss
@@ -1,12 +1,13 @@
-/* QR code
- *
- * Styling to apply to the QR code image
- *
- * Markup:
- * <img class="yivi-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
- *
- * Styleguide Components.QR code
- */
+/*
+QR code
+
+Styling to apply to the QR code image
+
+Markup:
+<img class="yivi-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
+
+Styleguide Components.QR code
+*/
 @import '../mixins/reset', '../variables/sizes';
 
 .yivi-web-qr-code {

diff --git a/yivi-css/src/components/yivi-button.scss b/yivi-css/src/components/yivi-button.scss
@@ -1,18 +1,19 @@
-/* Yivi button
- *
- * A button to press to launch the disclosure flow in the Yivi app (locally on a
- * mobile device)
- *
- * Markup:
- * <button class="yivi-web-button">
- *   Open Yivi-app
- * </button>
- * <a href="#" class="yivi-web-button">
- *   Open Yivi-app
- * </a>
- *
- * Styleguide Components.Yivi button
- */
+/*
+Yivi button
+
+A button to press to launch the disclosure flow in the Yivi app (locally on a
+mobile device)
+
+Markup:
+<button class="yivi-web-button">
+  Open Yivi-app
+</button>
+<a href="#" class="yivi-web-button">
+  Open Yivi-app
+</a>
+
+Styleguide Components.Yivi button
+*/
 
 @import '../mixins/reset', '../mixins/fonts', '../variables/colours',
   '../variables/sizes', '../mixins/svg-url', '../variables/svg-images';

diff --git a/yivi-css/src/components/yivi-form.scss b/yivi-css/src/components/yivi-form.scss
@@ -1,51 +1,52 @@
-/* Yivi 'login form'
- *
- * A place to nicely show the different states of the Yivi disclosure flow.
- *
- * <script type="text/javascript">
- *   // Poor man's forEach that works in IE11 too ;)
- *   function eachDo(l, f) { for(var i=0; i < l.length; i++) { f(l[i]); } }
- * </script>
- *
- * Trigger helper:
- * <ul>
- *   <li><a href="javascript:eachDo(document.querySelectorAll('.yivi-web-header'), function(h) {h.classList.add('yivi-web-show-helper')})">Show helpers</a></li>
- *   <li><a href="javascript:eachDo(document.querySelectorAll('.yivi-web-header'), function(h) {h.classList.remove('yivi-web-show-helper')})">Hide helpers</a></li>
- * </ul>
- *
- * Markup:
- * <section class="yivi-web-form">
- *   <div class="yivi-web-header">
- *     <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
- *     <div class="yivi-web-helper">
- *       <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
- *     </div>
- *   </div>
- *   <div class="yivi-web-content">
- *     <div class="yivi-web-centered">
- *       <button>Some action here</button>
- *       <p>With some text <a href="#">and stuff</a></p>
- *     </div>
- *   </div>
- * </section>
- * <section class="yivi-web-form">
- *   <div class="yivi-web-header">
- *     <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
- *     <div class="yivi-web-helper">
- *       <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
- *     </div>
- *     <button class="yivi-web-close"></button>
- *   </div>
- *   <div class="yivi-web-content">
- *     <div class="yivi-web-centered">
- *       <button>Some action here</button>
- *       <p>With some text <a href="#">and stuff</a></p>
- *     </div>
- *   </div>
- * </section>
- *
- * Styleguide Components.Yivi login
- */
+/*
+Yivi 'login form'
+
+A place to nicely show the different states of the Yivi disclosure flow.
+
+<script type="text/javascript">
+  // Poor man's forEach that works in IE11 too ;)
+  function eachDo(l, f) { for(var i=0; i < l.length; i++) { f(l[i]); } }
+</script>
+
+Trigger helper:
+<ul>
+  <li><a href="javascript:eachDo(document.querySelectorAll('.yivi-web-header'), function(h) {h.classList.add('yivi-web-show-helper')})">Show helpers</a></li>
+  <li><a href="javascript:eachDo(document.querySelectorAll('.yivi-web-header'), function(h) {h.classList.remove('yivi-web-show-helper')})">Hide helpers</a></li>
+</ul>
+
+Markup:
+<section class="yivi-web-form">
+  <div class="yivi-web-header">
+    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
+    <div class="yivi-web-helper">
+      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
+    </div>
+  </div>
+  <div class="yivi-web-content">
+    <div class="yivi-web-centered">
+      <button>Some action here</button>
+      <p>With some text <a href="#">and stuff</a></p>
+    </div>
+  </div>
+</section>
+<section class="yivi-web-form">
+  <div class="yivi-web-header">
+    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
+    <div class="yivi-web-helper">
+      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
+    </div>
+    <button class="yivi-web-close"></button>
+  </div>
+  <div class="yivi-web-content">
+    <div class="yivi-web-centered">
+      <button>Some action here</button>
+      <p>With some text <a href="#">and stuff</a></p>
+    </div>
+  </div>
+</section>
+
+Styleguide Components.Yivi login
+*/
 
 @import '../mixins/reset', '../mixins/fonts', '../mixins/responsiveness',
   '../mixins/center', '../mixins/animation', '../variables/colours',