feat: updating get-started, intro and additional learning pages

Signed-off-by: Bozhidar Dryanovski <[email protected]>

.gitignore

@@ -45,3 +45,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+.vscode/

src/app/app-routing.module.ts

@@ -45,8 +45,9 @@ import { TabPage } from './pages/tab.page';
 import { LandingPage } from './pages/landing.page';
 import { OverviewPage } from './pages/overview.page';
 import { ApproachesPage } from './pages/approaches.page';
-import { DifferencesPage } from './pages/differences.page';
-import { TemplateBuilderPage } from './pages/template-builder.page';
+// import { TemplateBuilderPage } from './pages/template-builder.page';
+import { AdditionalLearningPage } from './pages/additional-learning.page';
+
 export const componentRoutes = [
   { path: 'overview', component: OverviewPage },
   { path: 'accordion', component: AccordionPage },
@@ -86,9 +87,9 @@ export const componentRoutes = [
 export const getStartedRoutes = [
   { path: 'introduction', component: IntroPage },
   { path: 'get-started', component: GettingStartedPage },
-  { path: 'differences', component: DifferencesPage },
-  { path: 'approaches', component: ApproachesPage },
-  { path: 'builder', component: TemplateBuilderPage },
+  { path: 'additional-learning', component: AdditionalLearningPage },
+  { path: 'additional-strategies', component: ApproachesPage },
+  // { path: 'builder', component: TemplateBuilderPage },
 ];
 
 const routes: Routes = [

src/app/app.component.html

@@ -2,10 +2,19 @@
 <div class="main-container">
   <header class="header-6">
     <div class="branding">
-      <img
-        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMTc5YmQzIiBkPSJNMjQuNzAyIDQuNTgzbDExLjI3OCA2LjY3OS0uMDE5IDEzLjU2My0xMS4yNiA2LjY2LTYuNjg0LTMuOTcgMTEuNjUyLTYuNTQxdi01Ljg5OGwtNC43NDctMi42MDQtNi44OS0zLjkzOCIvPjxwYXRoIGZpbGw9IiNGMzhCMDAiIGQ9Ik0xMS4zMzEgNC41ODNMLjA1NCAxMS4yNjJsLjAxOCAxMy41NjMgMTEuMjYgNi42NiA2LjY4NS0zLjk3LTEwLjY2My02LjU0MXYtNS44OThsMTAuNjc4LTYuNTQyIi8+PHBhdGggZmlsbD0iIzAwNjQ4ZiIgZD0iTTE4LjAxNyAyNy41MTVMMTEuNSAyMy41MTZsNi41MjItMy44NDUgNi45MyAzLjk1MiIvPjxwYXRoIGZpbGw9IiM5ODQ0MUUiIGQ9Ik0xOC4wMzEgOC41MzNsLTYuNTA0IDMuOTg1IDYuNTE3IDMuODg0IDYuODYyLTMuOTQiLz48L2c+PC9zdmc+" cds-layout="m-t:md"
-      />
-      <a cds-layout="m-x:md" routerLink="/" class="nav-link" cds-text="title">Clarity Adoption Guide</a>
+      <a
+        cds-layout="horizontal gap:xs align:vertical-center"
+        routerLink="/"
+        class="nav-link logo-text"
+        cds-text="subsection"
+        >
+          <img
+            src="/assets/clarity-logo.svg"
+            alt="Clarity Adoption Guide"
+            cds-layout="display:none display@md:inline"
+          />
+          Clarity Adoption Guide
+      </a>
     </div>
     <div class="header-actions">
       <a
@@ -23,7 +32,7 @@
     </div>
   </header>
   <div class="content-container">
-    <clr-vertical-nav>      
+    <clr-vertical-nav>
 
       <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupExpanded]="true">
         <cds-icon clrVerticalNavIcon shape="help-info"></cds-icon>
@@ -98,20 +107,21 @@
         />
       </a>
     </clr-vertical-nav>
-    <div class="content-area">
-      <div  cds-layout="container:xl">
-      <router-outlet></router-outlet>
+    <div class="content-area" cds-layout="container:lg">
+      <div  cds-layout="p-l:md p-l@sm:xl container:md">
+
+        <router-outlet></router-outlet>
 
-      <footer cds-layout="grid p-x:md p-x@sm:xl m-t:xl p-t:lg" class="doc-footer">
-        <div cds-layout="col:12 col@sm:6">
-          <p cds-layout="m-t:none">Powered by VMware, Inc &copy;{{today | date:'YYYY'}}. All rights reserved.<br />Code licensed by <a href="https://opensource.org/licenses/MIT" target="_blank" cds-layout="m-r:sm">MIT License</a> <a href="https://www.vmware.com/help/privacy.html" target="_blank">Privacy Policy</a></p>
-        </div> 
-        <div cds-layout="col:12 col@sm:6" cds-text="right">
-          <a aria-label="Clarity on GitHub" href="https://github.com/vmware/clarity" target="_blank" class="sm-icon-link" cds-layout="m-r:md"><img src="/assets/github.svg" alt="Clarity Github"></a> 
-          <a aria-label="Clarity on twitter" href="https://twitter.com/VMwareClarity" target="_blank" class="sm-icon-link" cds-layout="m-r:md"><img src="/assets/twitter.svg" alt="Clarity Twitter"></a> 
-          <a aria-label="Clarity on Medium" href="https://medium.com/claritydesignsystem" target="_blank" class="sm-icon-link" cds-layout="m-r:md"><img src="/assets/medium.svg" alt="Clarity Medium"></a>
-        </div>
-      </footer>
+        <footer cds-layout="grid p-x:md p-x@sm:xl m-t:xl p-t:lg" class="doc-footer">
+          <div cds-layout="col:12 col@sm:6">
+            <p cds-layout="m-t:none">Powered by VMware, Inc &copy;{{today | date:'YYYY'}}. All rights reserved.<br />Code licensed by <a href="https://opensource.org/licenses/MIT" target="_blank" cds-layout="m-r:sm">MIT License</a> <a href="https://www.vmware.com/help/privacy.html" target="_blank">Privacy Policy</a></p>
+          </div>
+          <div cds-layout="col:12 col@sm:6" cds-text="right">
+            <a aria-label="Clarity on GitHub" href="https://github.com/vmware/clarity" target="_blank" class="sm-icon-link" cds-layout="m-r:md"><img src="/assets/github.svg" alt="Clarity Github"></a>
+            <a aria-label="Clarity on twitter" href="https://twitter.com/VMwareClarity" target="_blank" class="sm-icon-link" cds-layout="m-r:md"><img src="/assets/twitter.svg" alt="Clarity Twitter"></a>
+            <a aria-label="Clarity on Medium" href="https://medium.com/claritydesignsystem" target="_blank" class="sm-icon-link" cds-layout="m-r:md"><img src="/assets/medium.svg" alt="Clarity Medium"></a>
+          </div>
+        </footer>
       </div>
     </div>
   </div>

src/app/app.module.ts

@@ -57,9 +57,9 @@ import { IntroPage } from './pages/intro.page';
 import { ApproachesPage } from './pages/approaches.page';
 import { MenuTitlePipe } from './pipes/menu-title.pipe';
 import { OverviewPage } from './pages/overview.page';
-import { DifferencesPage } from './pages/differences.page';
 import { TemplateBuilderPage } from './pages/template-builder.page';
 import { FormsModule } from '@angular/forms';
+import { AdditionalLearningPage } from './pages/additional-learning.page';
 
 @NgModule({
   declarations: [
@@ -74,7 +74,7 @@ import { FormsModule } from '@angular/forms';
     ButtonPage,
     CardPage,
     CheckboxPage,
-    DifferencesPage,
+    AdditionalLearningPage,
     DatalistPage,
     FormPage,
     IconsPage,

src/app/components/demo.component.ts

@@ -30,7 +30,7 @@ export interface DemoTabData {
 @Component({
   selector: 'demo',
   template: `
-    <div cds-layout="m-b:md">
+    <div cds-layout="m-b:md m-t:lg">
       <ng-content></ng-content>
     </div>
 

src/app/components/status-block/status-block.component.html

@@ -1,4 +1,4 @@
-<div cds-layout="grid p:md m-y:md">
+<div cds-layout="grid  m-y:xl">
   <div cds-layout="col:12 col@sm:4 p-r:sm" cds-text="message">
     <ng-content></ng-content>
   </div>
@@ -13,7 +13,9 @@
       </dl>
       <dl cds-list cds-layout="col:6">
         <dt>Figma</dt>
-          <dd *ngIf="angularFigma || coreFigma"><a [href]="angularFigma" target="_blank" *ngIf="angularFigma">Angular figma</a> <a [href]="coreFigma" target="_blank" *ngIf="coreFigma">Core figma</a></dd>
+          <dd *ngIf="angularFigma || coreFigma">
+            <a [href]="angularFigma" target="_blank" *ngIf="angularFigma">Angular Figma</a> |
+            <a [href]="coreFigma" target="_blank" *ngIf="coreFigma"> Core Figma</a></dd>
           <dd *ngIf="!angularFigma">Not yet available</dd>
         <dt>ESLint Rule</dt>
           <dd *ngIf="eslint"><a routerLink="/adoption-tooling">Available, view documentation</a></dd>

src/app/pages/accordion.page.ts

@@ -10,7 +10,7 @@ import { DemoTabData } from '../components/demo.component';
 @Component({
   selector: 'app-accordion',
   template: `
-    <h1>Accordion</h1>
+    <h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Accordion</h1>
 
     <status-block
       coreVersion="v4"
@@ -26,7 +26,7 @@ import { DemoTabData } from '../components/demo.component';
     </status-block>
 
     <demo [tabs]="demo1">
-      <h3 cds-text="section">With expanded, disabled and expandable panels</h3>
+      <h3 cds-text="section" cds-layout="m-b:lg">With expanded, disabled and expandable panels</h3>
     </demo>
   `,
 })

src/app/pages/differences.page.ts → src/app/pages/additional-learning.page.ts

@@ -8,10 +8,17 @@ import { Component } from '@angular/core';
 
 @Component({
   template: `
-  <h2 cds-text="title" cds-layout="m-t:lg">Key Differences in Clarity Angular and Clarity Core</h2>
+  <h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Additional Learning</h1>
+
+  <h3 cds-text="title" cds-layout="m-t:lg">Key Differences in Clarity Angular and Clarity Core</h3>
 
   <p>
-    Clarity Angular was designed to try and leverage many of the capabilities of Angular and it was aimed at solving problems with a certain approach. We had the intention to make a design system that also provided guard rails for developers to avoid common pitfalls. What we learned was those same guard rails acted like brick walls for certain valid use cases and made it harder to maintain. With Clarity Core, we've taken the learnings from our Clarity Angular architecture, blended in modern web standards, and crafted a consistent architecture that avoids the previous pitfalls and makes things easier to work with.
+    We designed Clarity Angular to try and leverage many of the capabilities of Angular, and it was aimed at
+    solving problems by using guard rails for developers to avoid common pitfalls. Unfortunately, what we learned
+    was those same guard rails acted like brick walls for certain valid use cases. And it made it harder to
+    maintain. With Clarity Core, we've taken the learnings from our Clarity Angular architecture, blended in
+    modern web standards, and crafted a consistent architecture that avoids the previous pitfalls and makes
+    things easier to work with.
   </p>
 
   <table cds-table="border:all" cds-layout="m-t:lg">
@@ -56,13 +63,17 @@ import { Component } from '@angular/core';
     </tbody>
   </table>
 
-  <h3 cds-text="subtitle" cds-layout="m-t:lg">How to learn more</h3>
+  <a cds-layout="m-t:lg" href="https://clarity.design" target="_blank" class="btn btn-primary">Get started with Clarity Core</a>
+
+  <h3 cds-text="subtitle" cds-layout="m-t:lg">Additional reading</h3>
 
   <p>
-    We have written more content in our blog about the differences and architectural choices with Clarity Core. We encourage you to familiarize yourself with them, as they are useful also to learn from to apply to your own applications.
+    We have written more content in our blog about the differences and architectural choices with Clarity Core.
+    We encourage you to familiarize yourself with them, as they are useful also to learn from to apply to your
+    own applications.
   </p>
 
-  <ul>
+  <ul cds-layout="m-t:lg">
     <li><a href="https://medium.com/claritydesignsystem/clarity-core-72f6d3a029bc">Clarity Core - Our design system’s journey to framework independence.</a></li>
     <li><a href="https://medium.com/claritydesignsystem/claritys-future-user-focused-framework-independent-accessible-enterprise-ready-and-open-61a3f62eac93">Clarity’s future: user-focused, framework-independent, accessible, enterprise-ready, and open source.</a></li>
     <li><a href="https://medium.com/claritydesignsystem/level-up-your-application-by-adopting-clarity-core-8a5f3f863139">Level Up Your Application by Adopting Clarity Core</a></li>
@@ -74,4 +85,4 @@ import { Component } from '@angular/core';
 
   `,
 })
-export class DifferencesPage {}
+export class AdditionalLearningPage {}

src/app/pages/adoption-tooling.page.ts

@@ -13,7 +13,7 @@ ClarityIcons.addIcons(checkCircleIcon);
 
 @Component({
   template: `
-    <h1>Adoption tooling</h1>
+    <h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Adoption tooling</h1>
 
     <h3>Clarity Adoption ESLint plugin</h3>
     <p>

src/app/pages/alert.page.ts

@@ -10,7 +10,7 @@ import { DemoTabData } from '../components/demo.component';
 @Component({
   selector: 'app-alert',
   template: `
-    <h1>Alerts</h1>
+    <h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Alerts</h1>
 
     <app-eslint-intro-block rule="no-clr-alert"></app-eslint-intro-block>