Skip to content
This repository was archived by the owner on Mar 27, 2023. It is now read-only.

Commit ae58d6e

Browse files
bdryanovskibdryanovski
committed
feat: updating get-started, intro and additional learning pages
Signed-off-by: Bozhidar Dryanovski <[email protected]>
1 parent dbeede0 commit ae58d6e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+736
-767
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ testem.log
4545
# System Files
4646
.DS_Store
4747
Thumbs.db
48+
.vscode/

‎src/app/app-routing.module.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ import { TabPage } from './pages/tab.page';
4545
import { LandingPage } from './pages/landing.page';
4646
import { OverviewPage } from './pages/overview.page';
4747
import { ApproachesPage } from './pages/approaches.page';
48-
import { DifferencesPage } from './pages/differences.page';
49-
import { TemplateBuilderPage } from './pages/template-builder.page';
48+
// import { TemplateBuilderPage } from './pages/template-builder.page';
49+
import { AdditionalLearningPage } from './pages/additional-learning.page';
50+
5051
export const componentRoutes = [
5152
{ path: 'overview', component: OverviewPage },
5253
{ path: 'accordion', component: AccordionPage },
@@ -86,9 +87,9 @@ export const componentRoutes = [
8687
export const getStartedRoutes = [
8788
{ path: 'introduction', component: IntroPage },
8889
{ path: 'get-started', component: GettingStartedPage },
89-
{ path: 'differences', component: DifferencesPage },
90-
{ path: 'approaches', component: ApproachesPage },
91-
{ path: 'builder', component: TemplateBuilderPage },
90+
{ path: 'additional-learning', component: AdditionalLearningPage },
91+
{ path: 'additional-strategies', component: ApproachesPage },
92+
// { path: 'builder', component: TemplateBuilderPage },
9293
];
9394

9495
const routes: Routes = [

‎src/app/app.component.html

+28-18
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,19 @@
22
<div class="main-container">
33
<header class="header-6">
44
<div class="branding">
5-
<img
6-
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMTc5YmQzIiBkPSJNMjQuNzAyIDQuNTgzbDExLjI3OCA2LjY3OS0uMDE5IDEzLjU2My0xMS4yNiA2LjY2LTYuNjg0LTMuOTcgMTEuNjUyLTYuNTQxdi01Ljg5OGwtNC43NDctMi42MDQtNi44OS0zLjkzOCIvPjxwYXRoIGZpbGw9IiNGMzhCMDAiIGQ9Ik0xMS4zMzEgNC41ODNMLjA1NCAxMS4yNjJsLjAxOCAxMy41NjMgMTEuMjYgNi42NiA2LjY4NS0zLjk3LTEwLjY2My02LjU0MXYtNS44OThsMTAuNjc4LTYuNTQyIi8+PHBhdGggZmlsbD0iIzAwNjQ4ZiIgZD0iTTE4LjAxNyAyNy41MTVMMTEuNSAyMy41MTZsNi41MjItMy44NDUgNi45MyAzLjk1MiIvPjxwYXRoIGZpbGw9IiM5ODQ0MUUiIGQ9Ik0xOC4wMzEgOC41MzNsLTYuNTA0IDMuOTg1IDYuNTE3IDMuODg0IDYuODYyLTMuOTQiLz48L2c+PC9zdmc+" cds-layout="m-t:md"
7-
/>
8-
<a cds-layout="m-x:md" routerLink="/" class="nav-link" cds-text="title">Clarity Adoption Guide</a>
5+
<a
6+
cds-layout="horizontal gap:xs align:vertical-center"
7+
routerLink="/"
8+
class="nav-link logo-text"
9+
cds-text="subsection"
10+
>
11+
<img
12+
src="/assets/clarity-logo.svg"
13+
alt="Clarity Adoption Guide"
14+
cds-layout="display:none display@md:inline"
15+
/>
16+
Clarity Adoption Guide
17+
</a>
918
</div>
1019
<div class="header-actions">
1120
<a
@@ -23,7 +32,7 @@
2332
</div>
2433
</header>
2534
<div class="content-container">
26-
<clr-vertical-nav>
35+
<clr-vertical-nav>
2736

2837
<clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupExpanded]="true">
2938
<cds-icon clrVerticalNavIcon shape="help-info"></cds-icon>
@@ -98,20 +107,21 @@
98107
/>
99108
</a>
100109
</clr-vertical-nav>
101-
<div class="content-area">
102-
<div cds-layout="container:xl">
103-
<router-outlet></router-outlet>
110+
<div class="content-area" cds-layout="container:lg">
111+
<div cds-layout="p-l:md p-l@sm:xl container:md">
112+
113+
<router-outlet></router-outlet>
104114

105-
<footer cds-layout="grid p-x:md p-x@sm:xl m-t:xl p-t:lg" class="doc-footer">
106-
<div cds-layout="col:12 col@sm:6">
107-
<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>
108-
</div>
109-
<div cds-layout="col:12 col@sm:6" cds-text="right">
110-
<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>
111-
<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>
112-
<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>
113-
</div>
114-
</footer>
115+
<footer cds-layout="grid p-x:md p-x@sm:xl m-t:xl p-t:lg" class="doc-footer">
116+
<div cds-layout="col:12 col@sm:6">
117+
<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>
118+
</div>
119+
<div cds-layout="col:12 col@sm:6" cds-text="right">
120+
<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>
121+
<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>
122+
<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>
123+
</div>
124+
</footer>
115125
</div>
116126
</div>
117127
</div>

‎src/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ import { IntroPage } from './pages/intro.page';
5757
import { ApproachesPage } from './pages/approaches.page';
5858
import { MenuTitlePipe } from './pipes/menu-title.pipe';
5959
import { OverviewPage } from './pages/overview.page';
60-
import { DifferencesPage } from './pages/differences.page';
6160
import { TemplateBuilderPage } from './pages/template-builder.page';
6261
import { FormsModule } from '@angular/forms';
62+
import { AdditionalLearningPage } from './pages/additional-learning.page';
6363

6464
@NgModule({
6565
declarations: [
@@ -74,7 +74,7 @@ import { FormsModule } from '@angular/forms';
7474
ButtonPage,
7575
CardPage,
7676
CheckboxPage,
77-
DifferencesPage,
77+
AdditionalLearningPage,
7878
DatalistPage,
7979
FormPage,
8080
IconsPage,

‎src/app/components/demo.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface DemoTabData {
3030
@Component({
3131
selector: 'demo',
3232
template: `
33-
<div cds-layout="m-b:md">
33+
<div cds-layout="m-b:md m-t:lg">
3434
<ng-content></ng-content>
3535
</div>
3636

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div cds-layout="grid p:md m-y:md">
1+
<div cds-layout="grid m-y:xl">
22
<div cds-layout="col:12 col@sm:4 p-r:sm" cds-text="message">
33
<ng-content></ng-content>
44
</div>
@@ -13,7 +13,9 @@
1313
</dl>
1414
<dl cds-list cds-layout="col:6">
1515
<dt>Figma</dt>
16-
<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>
16+
<dd *ngIf="angularFigma || coreFigma">
17+
<a [href]="angularFigma" target="_blank" *ngIf="angularFigma">Angular Figma</a> |
18+
<a [href]="coreFigma" target="_blank" *ngIf="coreFigma"> Core Figma</a></dd>
1719
<dd *ngIf="!angularFigma">Not yet available</dd>
1820
<dt>ESLint Rule</dt>
1921
<dd *ngIf="eslint"><a routerLink="/adoption-tooling">Available, view documentation</a></dd>

‎src/app/pages/accordion.page.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { DemoTabData } from '../components/demo.component';
1010
@Component({
1111
selector: 'app-accordion',
1212
template: `
13-
<h1>Accordion</h1>
13+
<h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Accordion</h1>
1414
1515
<status-block
1616
coreVersion="v4"
@@ -26,7 +26,7 @@ import { DemoTabData } from '../components/demo.component';
2626
</status-block>
2727
2828
<demo [tabs]="demo1">
29-
<h3 cds-text="section">With expanded, disabled and expandable panels</h3>
29+
<h3 cds-text="section" cds-layout="m-b:lg">With expanded, disabled and expandable panels</h3>
3030
</demo>
3131
`,
3232
})

‎src/app/pages/differences.page.ts renamed to ‎src/app/pages/additional-learning.page.ts

+17-6
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,17 @@ import { Component } from '@angular/core';
88

99
@Component({
1010
template: `
11-
<h2 cds-text="title" cds-layout="m-t:lg">Key Differences in Clarity Angular and Clarity Core</h2>
11+
<h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Additional Learning</h1>
12+
13+
<h3 cds-text="title" cds-layout="m-t:lg">Key Differences in Clarity Angular and Clarity Core</h3>
1214
1315
<p>
14-
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.
16+
We designed Clarity Angular to try and leverage many of the capabilities of Angular, and it was aimed at
17+
solving problems by using guard rails for developers to avoid common pitfalls. Unfortunately, what we learned
18+
was those same guard rails acted like brick walls for certain valid use cases. And it made it harder to
19+
maintain. With Clarity Core, we've taken the learnings from our Clarity Angular architecture, blended in
20+
modern web standards, and crafted a consistent architecture that avoids the previous pitfalls and makes
21+
things easier to work with.
1522
</p>
1623
1724
<table cds-table="border:all" cds-layout="m-t:lg">
@@ -56,13 +63,17 @@ import { Component } from '@angular/core';
5663
</tbody>
5764
</table>
5865
59-
<h3 cds-text="subtitle" cds-layout="m-t:lg">How to learn more</h3>
66+
<a cds-layout="m-t:lg" href="https://clarity.design" target="_blank" class="btn btn-primary">Get started with Clarity Core</a>
67+
68+
<h3 cds-text="subtitle" cds-layout="m-t:lg">Additional reading</h3>
6069
6170
<p>
62-
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.
71+
We have written more content in our blog about the differences and architectural choices with Clarity Core.
72+
We encourage you to familiarize yourself with them, as they are useful also to learn from to apply to your
73+
own applications.
6374
</p>
6475
65-
<ul>
76+
<ul cds-layout="m-t:lg">
6677
<li><a href="https://medium.com/claritydesignsystem/clarity-core-72f6d3a029bc">Clarity Core - Our design system’s journey to framework independence.</a></li>
6778
<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>
6879
<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';
7485
7586
`,
7687
})
77-
export class DifferencesPage {}
88+
export class AdditionalLearningPage {}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ ClarityIcons.addIcons(checkCircleIcon);
1313

1414
@Component({
1515
template: `
16-
<h1>Adoption tooling</h1>
16+
<h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Adoption tooling</h1>
1717
1818
<h3>Clarity Adoption ESLint plugin</h3>
1919
<p>

‎src/app/pages/alert.page.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { DemoTabData } from '../components/demo.component';
1010
@Component({
1111
selector: 'app-alert',
1212
template: `
13-
<h1>Alerts</h1>
13+
<h1 cds-text="heading" cds-layout="m-b:lg m-t:lg">Alerts</h1>
1414
1515
<app-eslint-intro-block rule="no-clr-alert"></app-eslint-intro-block>
1616

0 commit comments

Comments
 (0)