fix(annotations): displaying annotation tooltips correctly (pattern-l…

…ab#1406)

* chore(docs): some typos

missed to replace mustache initially and incorrect handlebars two times (both in package name and URL)

* Revert "Merge pull request pattern-lab#2 from pattern-lab/dev"

This reverts commit 7812878, reversing
changes made to 26db979.

* Revert "Merge pull request pattern-lab#1 from pattern-lab/dev"

This reverts commit 26db979, reversing
changes made to fc90750.

* Revert "chore(docs): some typos"

This reverts commit 271dc8d.

* chore: some reformatting

* chore: formatting

* chore: formatting

This reverts commit 271dc8d.

* chore: formatting

* refactor: let's hide elements the modern way with the hidden attribute

* refactor: extracting annotations inside modal styles

* refactor: we won't need this as a generated CSS file

* Revert "Merge branch 'dev' into fix/annotations-tooltip-rendering"

This reverts commit 2c715ae, reversing
changes made to 5effb4f.

* refactor: adding some sample content for the annotations

and corrected the current approach to provide annotations JSON

* refactor: regenerated those files

Co-authored-by: Maximilian <mfr@nzke.net>

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -46,6 +46,7 @@
 @import '../scripts/components/pl-nav/pl-nav.scss';
 @import '../scripts/components/pl-search/pl-search.scss';
 @import 'scss/04-components/annotations';
+@import 'scss/04-components/annotations-inside-modal';
 @import 'scss/04-components/breadcrumbs';
 @import 'scss/04-components/pattern-category';
 @import 'scss/04-components/pattern-info';

packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss

@@ -0,0 +1,75 @@
+@charset "UTF-8";
+
+/*------------------------------------*\
+    #ANNOTATIONS INSIDE MODAL
+\*------------------------------------*/
+
+/**
+ * Annotations area
+ * 1) Appears inside of modal
+ */
+.pl-c-annotations {
+  margin: 1rem 0;
+}
+
+/**
+ * Annotations Title
+ * Says the word "Annotations"
+ */
+.pl-c-annotations__title {
+  font-size: 1.2rem !important;
+  margin: 0 0 0.5rem;
+}
+
+/**
+ * Annotations list
+ * 1) Ordered list of annotations
+ * 2) Presented with parent selector to force styles
+ *    over pl-c-text-passage
+ */
+.pl-c-annotations .pl-c-annotations__list {
+  counter-reset: the-count;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/**
+ * Annotations list item
+ * 1) Displays each item as a number
+ */
+.pl-c-annotations__item {
+  position: relative;
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+  border-radius: $pl-border-radius-med;
+  transition: background-color $pl-animate-quick ease;
+
+  &:before {
+    content: counter(the-count);
+    counter-increment: the-count;
+    font-size: 85%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    padding: 2px;
+    text-align: center;
+    background-color: $pl-color-gray-50;
+    color: $pl-color-white;
+    position: absolute;
+    top: 4px;
+    left: 0;
+  }
+
+  &.pl-is-active {
+    outline: 1px dotted $pl-color-gray-50;
+    outline-offset: -1px;
+  }
+}
+
+.pl-c-annotations .pl-c-annotations__item-title {
+  margin-bottom: 0;
+}

packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss

@@ -36,12 +36,10 @@
 /**
  * Annotation tooltip
  * 1) Appears inside the iframe over any element that has an
- *    anootation attached to it.
- * 2) Annotation tip gets dynamically set to `display: none` via
- *    JavaScript
+ *    annotation attached to it.
  */
 .pl-c-annotation-tip {
-  display: flex; /* 2 */
+  display: flex;
   align-items: center;
   justify-content: center;
   width: 24px !important;
@@ -55,77 +53,3 @@
   position: absolute;
   z-index: 100;
 }
-
-/*------------------------------------*\
-    #ANNOTATIONS INSIDE MODAL
-\*------------------------------------*/
-
-/**
- * Annotations area
- * 1) Appears inside of modal
- */
-.pl-c-annotations {
-  margin: 1rem 0;
-}
-
-/**
- * Annotations Title
- * Says the word "Annotations"
- */
-.pl-c-annotations__title {
-  font-size: 1.2rem !important;
-  margin: 0 0 0.5rem;
-}
-
-/**
- * Annotations list
- * 1) Ordered list of annotations
- * 2) Presented with parent selector to force styles
- *    over pl-c-text-passage
- */
-.pl-c-annotations .pl-c-annotations__list {
-  counter-reset: the-count;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-/**
- * Annotations list item
- * 1) Displays each item as a number
- */
-.pl-c-annotations__item {
-  position: relative;
-  padding-left: 1.5rem;
-  margin-bottom: 1rem;
-  border-radius: $pl-border-radius-med;
-  transition: background-color $pl-animate-quick ease;
-
-  &:before {
-    content: counter(the-count);
-    counter-increment: the-count;
-    font-size: 85%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    padding: 2px;
-    text-align: center;
-    background-color: $pl-color-gray-50;
-    color: $pl-color-white;
-    position: absolute;
-    top: 4px;
-    left: 0;
-  }
-
-  &.pl-is-active {
-    outline: 1px dotted $pl-color-gray-50;
-    outline-offset: -1px;
-  }
-}
-
-.pl-c-annotations .pl-c-annotations__item-title {
-  margin-bottom: 0;
-}

packages/uikit-workshop/src/scripts/components/modal-styleguide.js

@@ -168,7 +168,7 @@ export const modalStyleguide = {
       patternPartialSelector + '.pl-c-annotation-tip'
     );
     for (let i = 0; i < elsToHide.length; i++) {
-      elsToHide[i].style.display = 'none';
+      elsToHide[i].hidden = true;
     }
   },
 
@@ -242,7 +242,7 @@ export const modalStyleguide = {
                 .getComputedStyle(elsToHighlight[j], null)
                 .getPropertyValue('max-height') === '0px'
             ) {
-              span.style.display = 'none';
+              span.hidden = true;
             }
 
             const annotationTip = document.querySelector(
@@ -254,7 +254,7 @@ export const modalStyleguide = {
                 elsToHighlight[j].firstChild
               );
             } else {
-              annotationTip.style.display = 'inline-flex';
+              annotationTip.hidden = false;
             }
 
             elsToHighlight[j].onclick = (function (el) {