Merge pull request #23 from CreamLib/dev

improved nav + fixes in doc
CreamLib · Feb 18, 2023 · d94b475 · d94b475
2 parents 3208809 + f3f13d1
commit d94b475
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 72 deletions.
diff --git a/projects/ngx-cream-lib/assets/css/main.css b/projects/ngx-cream-lib/assets/css/main.css
@@ -322,7 +322,6 @@ button.as-submit,
 input[type='reset'],
 button[type='reset'],
 button.as-reset {
-  font-size: 120%;
   line-height: 1;
   font-family: var(--stack-b);
   color: var(--text-inv);
@@ -560,6 +559,10 @@ div.explain p {
   top: auto;
   width: 1px;
   height: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
 /* Skip navigation */

diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css
@@ -13,7 +13,7 @@ header h1 {
 }
 
 h1 img {
-  max-width: 175px;
+  max-width: 155px;
 }
 h1 a {
   position: relative;
@@ -48,7 +48,7 @@ button.nav-control svg {
     height: 100%;
     top: 0;
     left: 0;
-    padding: 1.5rem 0 0;
+    padding: 2rem 0 0;
     z-index: 2;
   }
   header .logo {

diff --git a/src/app/components/main-navigation/main-navigation.component.css b/src/app/components/main-navigation/main-navigation.component.css
@@ -30,14 +30,16 @@ nav :focus-visible {
   outline-offset: -2px;
 }
 
+nav h2 {
+  position: relative;
+  font: 1em var(--stack);
+  margin: 0 2rem 1rem;
+}
+
 nav ul {
   display: none;
   list-style-type: none;
-  margin: 1rem;
-}
-nav > ul {
-  height: 80vh;
-  overflow-y: auto;
+  margin: 0.7rem 2rem 2rem;
 }
 
 nav > ul::-webkit-scrollbar {
@@ -51,8 +53,8 @@ nav > ul::-webkit-scrollbar-thumb {
 }
 
 nav ul li + li {
-  padding-top: 1rem;
-  margin-top: 1rem;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
   border-top: 1px dotted currentColor;
 }
 
@@ -158,10 +160,10 @@ nav.opened + div.overlay {
     box-shadow: none;
     z-index: 110;
   }
-  nav > ul {
+  nav.opened {
     display: block;
     overflow-y: auto;
-    height: calc(100vh - 250px);
+    height: calc(100vh - 250px - 2rem);
     scroll-behavior: smooth;
     scrollbar-width: thin;
   }

diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html
@@ -2,6 +2,8 @@
   <p class="skip-link">
     <a [href]="routeSkipLink('page-body')">Skip navigation</a>
   </p>
+
+  <h2>Components</h2>
   <ul>
     <li *ngFor="let section of navData">
       <button
@@ -32,5 +34,37 @@
       </ul>
     </li>
   </ul>
+
+  <h2>Documentation</h2>
+  <ul>
+    <li *ngFor="let section of navDataGuide">
+      <button
+        class="level1"
+        #levelOne
+        (click)="openSection($event)"
+        aria-expanded="false"
+        [attr.aria-controls]="navSectionID">
+        <svg role="img" width="24" height="24" aria-hidden="true">
+          <use href="./assets/img/sprite.svg#accordion-down"></use>
+        </svg>
+        {{ section.label }}
+      </button>
+
+      <ul class="level2" [id]="navSectionID">
+        <li *ngFor="let subSection of getSubDataGuide(section.label)">
+          <a
+            #navLink
+            [routerLink]="subSection.url"
+            routerLinkActive="active"
+            #ariaRouterLink="routerLinkActive"
+            [attr.aria-current]="ariaRouterLink.isActive ? 'page' : null"
+            (click)="closeNavCondition()"
+            (blur)="isLast($event)">
+            {{ subSection.label }}
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
 </nav>
 <div class="overlay" (click)="toggleOpen()"></div>
diff --git a/src/app/components/main-navigation/main-navigation.component.ts b/src/app/components/main-navigation/main-navigation.component.ts
@@ -112,6 +112,9 @@ export class MainNavigationComponent implements OnInit, AfterViewInit {
         },
       ],
     },
+  ];
+
+  navDataGuide = [
     {
       label: 'CreamNg UX/ UI',
       subs: [
@@ -203,6 +206,11 @@ export class MainNavigationComponent implements OnInit, AfterViewInit {
     const navData = Object.values(this.navData).filter(data => data.label === levelOne);
     return navData[0].subs;
   }
+  // Return sub array
+  getSubDataGuide(levelOne: string) {
+    const navData = Object.values(this.navDataGuide).filter(data => data.label === levelOne);
+    return navData[0].subs;
+  }
 
   closeNav() {
     this.renderer.removeClass(this.nav.nativeElement, 'opened');

diff --git a/src/app/pages/config-page/config-page.component.html b/src/app/pages/config-page/config-page.component.html
@@ -54,65 +54,43 @@ <h3>Adding CreamNg Assets</h3>
   </c3m-message-block>
 </section>
 
-<section id="config" class="editorial">
+<section id="internationalisation" class="editorial">
   <h3>Internationalisation</h3>
 
   <p>
     <strong>CreamNg</strong>
-    components use the i18n system for internationalisation. If your application is not in English,
-    you may follow the steps hereafter to translate the library components:
+    components use the i18n system for internationalisation. Projects that need other languages
+    other than en-US can do the following to translate CreamNg components:
   </p>
 
-  <ol>
+  <ul>
+    <li>
+      <a href="https://angular.io/guide/i18n-common-add-package" target="blank_">
+        Add the localize package
+      </a>
+    </li>
     <li>
-      Get CreamNg internationalisation file on Github:
       <a
-        href="https://github.com/CreamLib/ngx-cream-lib/blob/main/src/locale/messages.xlf"
-        target="_blank">
-        messages.xlf
+        href="https://angular.io/guide/i18n-common-translation-files#extract-the-source-language-file">
+        Extract the source language file
       </a>
     </li>
-    <li>Place the file in the "src/locale" directory</li>
     <li>
-      Copy the file and change the name for you local language, for example
-      <em>
-        "messages.
-        <strong>fr</strong>
-        .xlf"
-      </em>
+      <a
+        href="https://angular.io/guide/i18n-common-translation-files#create-a-translation-file-for-each-language">
+        Create a translation file for each language
+      </a>
     </li>
     <li>
-      Edit this new file with the wanted translation using the &lt;target&gt; element:
-      <div class="command">
-        <pre>
-        ...
-&lt;trans-unit id=&#34;7022070615528435141&#34; datatype=&#34;html&#34;&gt;
-  &lt;source&gt;Delete&lt;/source&gt;</pre
-        >
-        <pre class="highlight">
-  &lt;target&gt;Supprimer&lt;/target&gt;
-  </pre
-        >
-        <pre>
-  &lt;context-group purpose=&#34;location&#34;&gt;
-    &lt;context context-type=&#34;sourcefile&#34;&gt;projects/ngx-cream-lib/src/lib/chip/chip.component.html&lt;/context&gt;
-    &lt;context context-type=&#34;linenumber&#34;&gt;19&lt;/context&gt;
-  &lt;/context-group&gt;
-&lt;/trans-unit&gt;
-        ...
-  </pre
-        >
-      </div>
+      <a
+        href="https://angular.io/guide/i18n-common-translation-files#translate-each-translation-file">
+        Translate each translation file
+      </a>
     </li>
-  </ol>
-
-  <c3m-message-block>
-    <p>
-      For more information on how to merge translations into your application, consult
-      <a href="https://angular.io/guide/i18n-common-merge" target="_blank">
+    <li>
+      <a href="https://angular.io/guide/i18n-common-merge">
         Merge translations into the application
       </a>
-      of the Angular documentation.
-    </p>
-  </c3m-message-block>
+    </li>
+  </ul>
 </section>
diff --git a/src/app/pages/design-basics-page/design-basics-page.component.css b/src/app/pages/design-basics-page/design-basics-page.component.css
@@ -7,10 +7,12 @@ dl.palette {
 }
   dl.palette div {
     flex: 0 1 21%;
+    min-width: 120px;
   }
   dl.palette dt {
     position: relative;
-    font-variation-settings: var(--fvs-bold);
+    font-size: 0.8em;
+    font-family: var(--stack-b);
   }
   dl.palette dt::before {
     content: "";
@@ -34,10 +36,10 @@ dl.palette {
   dl.palette dt.contrast::before {
     border: 1px solid var(--n-medium);
   }
+  dl.palette dd {font-size: 0.8em;}
 
   dl.palette code {
     display: block;
-    font-size: 80%;
     margin: 0.25rem 0;
   }
 

diff --git a/src/app/pages/design-basics-page/design-basics-page.component.html b/src/app/pages/design-basics-page/design-basics-page.component.html
@@ -181,8 +181,8 @@ <h4>Neutral Colors</h4>
   </dl>
 </section>
 
-<section class="style">
-  <h3 id="sec-typo">Typography</h3>
+<section id="sec-typo" class="style">
+  <h3>Typography</h3>
 
   <div class="intro-text editorial">
     <p>
@@ -201,7 +201,7 @@ <h3 id="sec-typo">Typography</h3>
   </div>
 
   <dl class="typeface type1">
-    <dt>Inter Regular</dt>
+    <dt>Regular</dt>
     <dd><code>var(--stack)</code></dd>
     <dd aria-hidden="true">
       A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
@@ -212,7 +212,7 @@ <h3 id="sec-typo">Typography</h3>
     </dd>
   </dl>
   <dl class="typeface type2">
-    <dt>Inter Bold</dt>
+    <dt>Bold</dt>
     <dd><code>var(--stack-b)</code></dd>
     <dd aria-hidden="true">
       A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
@@ -223,7 +223,7 @@ <h3 id="sec-typo">Typography</h3>
     </dd>
   </dl>
   <dl class="typeface type3">
-    <dt>Inter Italic</dt>
+    <dt>Italic</dt>
     <dd><code>var(--stack-i)</code></dd>
     <dd aria-hidden="true">
       A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

diff --git a/src/app/pages/form-design-page/form-design-page.component.html b/src/app/pages/form-design-page/form-design-page.component.html
@@ -1,4 +1,4 @@
-<section id="buttons">
+<section id="form-buttons">
   <h3>Form Buttons</h3>
 
   <c3m-tabs class="block-style" label="Demo and information about the component">
@@ -81,8 +81,8 @@ <h4 class="separate">Disabled Actions</h4>
   </c3m-tabs>
 </section>
 
-<section class="demo-block">
-  <h3 id="sec-inputs">Inputs</h3>
+<section id="form-inputs" class="demo-block">
+  <h3>Inputs</h3>
 
   <div class="introduction editorial">
     <c3m-message-block>

diff --git a/src/app/pages/iconography-page/iconography-page.component.html b/src/app/pages/iconography-page/iconography-page.component.html
@@ -1,4 +1,4 @@
-<section class="editorial">
+<section id="sec-introduction" class="editorial">
   <h3>Introduction</h3>
   <p>
     This library uses exclusively
@@ -41,7 +41,8 @@ <h3>Introduction</h3>
     " page to know how to modify CreamNg icons or how to add your own svg sprite.
   </p>
 </c3m-message-block>
-<section class="editorial">
+
+<section id="sec-decorative-images" class="editorial">
   <h3>Decorative Images</h3>
 
   <p>
@@ -78,7 +79,7 @@ <h3>Decorative Images</h3>
   </c3m-message-block>
 </section>
 
-<section class="editorial">
+<section id="sec-non-decorative-images" class="editorial">
   <h3>Non-decorative images</h3>
 
   <p>Images that carry information, i.e. they are not purely decorative, must appear as:</p>
@@ -130,7 +131,7 @@ <h3>Non-decorative images</h3>
   </c3m-message-block>
 </section>
 
-<section class="editorial">
+<section id="sec-svgsprite" class="editorial">
   <h3>Sprite SVG</h3>
 
   <p>