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

Commit 29fede2

Browse files
gnomeontherungnomeontherun
committed
chore: add get started content and tighten up design
* Created landing page with overview * Created an introduction to the guide page * Created an overview of different approaches to adoption * Created a page with differences between Core/Angular * Created overview page for showing list of components * Added a new status block component * Addressed some small styling issues like favicon and spacing Signed-off-by: Jeremy Wilken <[email protected]>
1 parent a1137eb commit 29fede2

Some content is hidden

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

65 files changed

+1225
-61
lines changed

‎.github/workflows/build.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,4 @@ jobs:
2222

2323
env:
2424
CI: true
25-
NETLIFY_SITE_ID: 03fce0dd-9568-4ab2-a3ea-211d856989db
25+
NETLIFY_SITE_ID: d25e4ae9-02f7-4ac3-9747-c28ca1066655

‎angular.json

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
"styles": [
3030
"node_modules/@cds/city/css/bundles/default.min.css",
3131
"node_modules/@cds/core/styles/module.shims.min.css",
32+
"node_modules/@cds/core/list/list.min.css",
33+
"node_modules/@cds/core/table/table.min.css",
3234
"node_modules/@cds/core/global.min.css",
3335
"node_modules/normalize.css/normalize.css",
3436
"node_modules/@clr/ui/clr-ui.min.css",

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

+19-5
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { ButtonPage } from './pages/button.page';
1919
import { DatalistPage } from './pages/datalist.page';
2020
import { FormPage } from './pages/form.page';
2121
import { InputPage } from './pages/input.page';
22+
import { IntroPage } from './pages/intro.page';
2223
import { ListPage } from './pages/list.page';
2324
import { ModalPage } from './pages/modal.page';
2425
import { PasswordPage } from './pages/password.page';
@@ -41,8 +42,13 @@ import { SpinnerPage } from './pages/spinner.page';
4142
import { TooltipPage } from './pages/tooltip.page';
4243
import { HeaderPage } from './pages/header.page';
4344
import { TabPage } from './pages/tab.page';
45+
import { LandingPage } from './pages/landing.page';
46+
import { OverviewPage } from './pages/overview.page';
47+
import { ApproachesPage } from './pages/approaches.page';
48+
import { DifferencesPage } from './pages/differences.page';
4449

4550
export const componentRoutes = [
51+
{ path: 'overview', component: OverviewPage },
4652
{ path: 'accordion', component: AccordionPage },
4753
{ path: 'alert', component: AlertPage },
4854
{ path: 'badge', component: BadgePage },
@@ -60,30 +66,38 @@ export const componentRoutes = [
6066
{ path: 'list', component: ListPage },
6167
{ path: 'modal', component: ModalPage },
6268
{ path: 'password', component: PasswordPage },
63-
{ path: 'progressbar', component: ProgressbarPage },
69+
{ path: 'progress-bar', component: ProgressbarPage },
6470
{ path: 'radio', component: RadioPage },
6571
{ path: 'range', component: RangePage },
6672
{ path: 'select', component: SelectPage },
6773
{ path: 'signpost', component: SignpostPage },
6874
{ path: 'spinner', component: SpinnerPage },
6975
{ path: 'stepper', component: StepperPage },
7076
{ path: 'tab', component: TabPage },
77+
{ path: 'table', component: TablePage },
7178
{ path: 'textarea', component: TextareaPage },
7279
{ path: 'timeline', component: TimelinePage },
7380
{ path: 'toggle', component: TogglePage },
7481
{ path: 'tooltip', component: TooltipPage },
75-
{ path: 'treeview', component: TreeviewPage },
82+
{ path: 'tree-view', component: TreeviewPage },
7683
{ path: 'wizard', component: WizardPage },
7784
];
7885

86+
export const getStartedRoutes = [
87+
{ path: 'introduction', component: IntroPage },
88+
{ path: 'get-started', component: GettingStartedPage },
89+
{ path: 'differences', component: DifferencesPage },
90+
{ path: 'approaches', component: ApproachesPage },
91+
];
92+
7993
const routes: Routes = [
80-
{ path: '', redirectTo: '/getting-started', pathMatch: 'full' },
81-
{ path: 'getting-started', component: GettingStartedPage },
8294
{ path: 'adoption-tooling', component: AdoptionToolingPage },
95+
{ path: '', component: LandingPage },
96+
{ path: '*', redirectTo: '/getting-started', pathMatch: 'full' },
8397
];
8498

8599
@NgModule({
86-
imports: [RouterModule.forRoot([...routes, ...componentRoutes])],
100+
imports: [RouterModule.forRoot([...routes, ...componentRoutes, ...getStartedRoutes])],
87101
exports: [RouterModule],
88102
})
89103
export class AppRoutingModule {}

‎src/app/app.component.html

+38-18
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,34 @@
33
<header class="header-6">
44
<div class="branding">
55
<img
6-
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMTc5YmQzIiBkPSJNMjQuNzAyIDQuNTgzbDExLjI3OCA2LjY3OS0uMDE5IDEzLjU2My0xMS4yNiA2LjY2LTYuNjg0LTMuOTcgMTEuNjUyLTYuNTQxdi01Ljg5OGwtNC43NDctMi42MDQtNi44OS0zLjkzOCIvPjxwYXRoIGZpbGw9IiNGMzhCMDAiIGQ9Ik0xMS4zMzEgNC41ODNMLjA1NCAxMS4yNjJsLjAxOCAxMy41NjMgMTEuMjYgNi42NiA2LjY4NS0zLjk3LTEwLjY2My02LjU0MXYtNS44OThsMTAuNjc4LTYuNTQyIi8+PHBhdGggZmlsbD0iIzAwNjQ4ZiIgZD0iTTE4LjAxNyAyNy41MTVMMTEuNSAyMy41MTZsNi41MjItMy44NDUgNi45MyAzLjk1MiIvPjxwYXRoIGZpbGw9IiM5ODQ0MUUiIGQ9Ik0xOC4wMzEgOC41MzNsLTYuNTA0IDMuOTg1IDYuNTE3IDMuODg0IDYuODYyLTMuOTQiLz48L2c+PC9zdmc+"
6+
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMTc5YmQzIiBkPSJNMjQuNzAyIDQuNTgzbDExLjI3OCA2LjY3OS0uMDE5IDEzLjU2My0xMS4yNiA2LjY2LTYuNjg0LTMuOTcgMTEuNjUyLTYuNTQxdi01Ljg5OGwtNC43NDctMi42MDQtNi44OS0zLjkzOCIvPjxwYXRoIGZpbGw9IiNGMzhCMDAiIGQ9Ik0xMS4zMzEgNC41ODNMLjA1NCAxMS4yNjJsLjAxOCAxMy41NjMgMTEuMjYgNi42NiA2LjY4NS0zLjk3LTEwLjY2My02LjU0MXYtNS44OThsMTAuNjc4LTYuNTQyIi8+PHBhdGggZmlsbD0iIzAwNjQ4ZiIgZD0iTTE4LjAxNyAyNy41MTVMMTEuNSAyMy41MTZsNi41MjItMy44NDUgNi45MyAzLjk1MiIvPjxwYXRoIGZpbGw9IiM5ODQ0MUUiIGQ9Ik0xOC4wMzEgOC41MzNsLTYuNTA0IDMuOTg1IDYuNTE3IDMuODg0IDYuODYyLTMuOTQiLz48L2c+PC9zdmc+" cds-layout="m-t:md"
77
/>
8-
<a cds-layout="m-x:md" routerLink="/" class="nav-link"><span class="title">Clarity Adoption</span></a>
8+
<a cds-layout="m-x:md" routerLink="/" class="nav-link" cds-text="title">Clarity Adoption Guide</a>
99
</div>
1010
<div class="header-actions">
1111
<a
1212
href="https://clarity.design/"
1313
class="docs-changer btn btn-outline btn-inverse"
14-
aria-label="Clarity Documentation"
1514
>
16-
Clarity Documentation
15+
Clarity Core Documentation
1716
</a>
18-
</div>
19-
</header>
20-
<div class="content-container">
21-
<clr-vertical-nav>
2217
<a
23-
clrVerticalNavLink
24-
routerLink="/getting-started"
25-
routerLinkActive="active"
26-
[routerLinkActiveOptions]="{ exact: true }"
18+
href="https://angular.clarity.design/"
19+
class="docs-changer btn btn-outline btn-inverse"
2720
>
28-
<clr-icon shape="help-info" clrVerticalNavIcon></clr-icon> Getting started
21+
Clarity Angular Documentation
2922
</a>
23+
</div>
24+
</header>
25+
<div class="content-container">
26+
<clr-vertical-nav>
3027

3128
<clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupExpanded]="true">
32-
<clr-icon clrVerticalNavIcon shape="cog"></clr-icon>
33-
Components
29+
<cds-icon clrVerticalNavIcon shape="help-info"></cds-icon>
30+
About This Guide
3431
<clr-vertical-nav-group-children>
35-
<a *ngFor="let route of routes" [routerLink]="route.path" routerLinkActive="active" clrVerticalNavLink>{{
36-
route.path | titlecase
32+
<a *ngFor="let route of getStartedRoutes" [routerLink]="route.path" routerLinkActive="active" clrVerticalNavLink>{{
33+
route.path | menuTitle
3734
}}</a>
3835
</clr-vertical-nav-group-children>
3936
</clr-vertical-nav-group>
@@ -44,9 +41,19 @@
4441
routerLinkActive="active"
4542
[routerLinkActiveOptions]="{ exact: true }"
4643
>
47-
<clr-icon shape="wrench" clrVerticalNavIcon></clr-icon> Adoption tooling
44+
<cds-icon shape="wrench" clrVerticalNavIcon></cds-icon> Adoption tooling
4845
</a>
4946

47+
<clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupExpanded]="true">
48+
<cds-icon clrVerticalNavIcon shape="cog"></cds-icon>
49+
Components
50+
<clr-vertical-nav-group-children>
51+
<a *ngFor="let route of componentRoutes" [routerLink]="route.path" routerLinkActive="active" clrVerticalNavLink>{{
52+
route.path | menuTitle
53+
}}</a>
54+
</clr-vertical-nav-group-children>
55+
</clr-vertical-nav-group>
56+
5057
<cds-divider cds-layout="m-y:md"></cds-divider>
5158

5259
<a class="npm-reference" href="https://www.npmjs.com/package/@clr/angular" target="_blank">
@@ -92,7 +99,20 @@
9299
</a>
93100
</clr-vertical-nav>
94101
<div class="content-area">
102+
<div cds-layout="container:xl">
95103
<router-outlet></router-outlet>
104+
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+
</div>
96116
</div>
97117
</div>
98118
</div>

‎src/app/app.component.ts

+8-10
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,18 @@
55
*/
66

77
import { Component } from '@angular/core';
8-
import { componentRoutes as routes } from './app-routing.module';
8+
import { componentRoutes, getStartedRoutes } from './app-routing.module';
9+
10+
import { ClarityIcons, cogIcon, helpInfoIcon, wrenchIcon } from '@cds/core/icon';
11+
12+
ClarityIcons.addIcons(cogIcon, helpInfoIcon, wrenchIcon);
913

1014
@Component({
1115
selector: 'app-root',
1216
templateUrl: './app.component.html',
13-
styles: [
14-
`
15-
:host header img {
16-
height: 3rem;
17-
width: 3rem;
18-
}
19-
`,
20-
],
2117
})
2218
export class AppComponent {
23-
routes = routes;
19+
componentRoutes = componentRoutes;
20+
getStartedRoutes = getStartedRoutes;
21+
today = new Date();
2422
}

‎src/app/app.module.ts

+15
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@ import { HeaderPage } from './pages/header.page';
5151
import { ProgressbarPage } from './pages/progressbar.page';
5252
import { ComboboxPage } from './pages/combobox.page';
5353
import { DropdownPage } from './pages/dropdown.page';
54+
import { StatusBlockComponent } from './components/status-block/status-block.component';
55+
import { LandingPage } from './pages/landing.page';
56+
import { IntroPage } from './pages/intro.page';
57+
import { ApproachesPage } from './pages/approaches.page';
58+
import { MenuTitlePipe } from './pipes/menu-title.pipe';
59+
import { OverviewPage } from './pages/overview.page';
60+
import { DifferencesPage } from './pages/differences.page';
5461

5562
@NgModule({
5663
declarations: [
@@ -60,17 +67,22 @@ import { DropdownPage } from './pages/dropdown.page';
6067
GettingStartedPage,
6168
AccordionPage,
6269
AlertPage,
70+
ApproachesPage,
6371
BadgePage,
6472
ButtonPage,
6573
CardPage,
6674
CheckboxPage,
75+
DifferencesPage,
6776
DatalistPage,
6877
FormPage,
6978
IconsPage,
7079
InputPage,
80+
IntroPage,
7181
LabelPage,
82+
LandingPage,
7283
ListPage,
7384
ModalPage,
85+
OverviewPage,
7486
PasswordPage,
7587
RadioPage,
7688
RangePage,
@@ -97,7 +109,10 @@ import { DropdownPage } from './pages/dropdown.page';
97109
EslintIntroBlockComponent,
98110
SourceCodeComponent,
99111
NotReadyComponent,
112+
StatusBlockComponent,
100113
Demo,
114+
115+
MenuTitlePipe,
101116
],
102117
imports: [BrowserModule, BrowserAnimationsModule, CdsModule, AppRoutingModule, ClarityModule],
103118
providers: [],

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

+7-14
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,16 @@ let PreviewID = 0;
4141
template: `
4242
<ng-content></ng-content>
4343
44-
<div style="display:flex; align-items: flex-start; justify-content: space-between;">
45-
<div *ngFor="let tab of tabs" style="{{ tabs.length > 1 ? 'width: 49.5%' : 'width: 100%' }}">
46-
<h5>{{ tab.name }}</h5>
44+
<div cds-layout="grid gap:md">
45+
<div *ngFor="let tab of tabs" [attr.cds-layout]="'col:12 col@sm:' + (tabs.length === 1 ? '12' : '6')">
46+
<p cds-text="message">{{ tab.name }} <button (click)="openStackblitz(tab)" class="btn btn-sm btn-link">
47+
<cds-icon shape="bolt"></cds-icon> View in StackBlitz
48+
</button></p>
4749
<div *ngFor="let file of tab.files | keyvalue">
4850
<sourcecode [src]="file.value" [language]="tab.language || 'ts'"></sourcecode>
4951
</div>
50-
<div id="{{ tab.id }}"></div>
51-
<button (click)="embedStackblitz(tab, tab.id)" class="btn btn-sm btn-link">
52-
<cds-icon shape="terminal"></cds-icon> Run
53-
</button>
54-
<button (click)="openStackblitz(tab)" class="btn btn-sm btn-link">
55-
<cds-icon shape="bolt"></cds-icon> StackBlitz
56-
</button>
52+
53+
5754
</div>
5855
</div>
5956
`,
@@ -85,10 +82,6 @@ export class Demo {
8582
return PreviewID++ + '';
8683
}
8784

88-
public async embedStackblitz(tab: DemoTabData, container: string | undefined): Promise<void> {
89-
await this.stackblitz.embed(tab.template, tab.files, container);
90-
}
91-
9285
public async openStackblitz(tab: DemoTabData): Promise<void> {
9386
await this.stackblitz.open(tab.template, tab.files);
9487
}

‎src/app/components/eslint-intro-block/eslint-intro-block.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div cds-layout="horizontal p:md m-y:md">
22
<div cds-layout="align:stretch">
3-
<h3 cds-layout="horizontal gap:sm align:vertical-center">
3+
<h2 cds-layout="horizontal gap:sm align:vertical-center" cds-text="message">
44
<img src="/assets/eslint-logo.svg" alt="Eslint logo" />
55

66
ESLint support for
@@ -20,7 +20,7 @@ <h3 cds-layout="horizontal gap:sm align:vertical-center">
2020
<cds-icon size="md" status="success" shape="check-circle" solid *ngIf="rule?.fixer"></cds-icon>
2121
<span class="tooltip-content">The rule contains an auto fixer</span>
2222
</span>
23-
</h3>
23+
</h2>
2424

2525
<p>To enable the rule use your eslint configuration file and add the following:</p>
2626

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div cds-layout="grid p:md m-y:md">
2+
<div cds-layout="col:12 col@sm:4 p-r:sm" cds-text="message">
3+
<ng-content></ng-content>
4+
</div>
5+
<div cds-layout="col:12 col@sm:8 align:stretch p-l:md" style="border-left: solid 0.25rem var(--cds-alias-object-border-color)">
6+
<div cds-layout="grid">
7+
<dl cds-list cds-layout="col:6">
8+
<dt>Clarity Core</dt>
9+
<dd *ngIf="coreVersion">Available since {{coreVersion}}, <a *ngIf="coreLink" [href]="coreLink" target="_blank">view documentation</a> <a *ngIf="coreStorybookLink" [href]="coreStorybookLink" target="_blank">view storybook</a></dd>
10+
<dd *ngIf="!coreVersion">Not yet available</dd>
11+
<dt>Clarity Angular</dt>
12+
<dd>Available since {{angularVersion}}, <a [href]="angularLink">view documentation</a></dd>
13+
</dl>
14+
<dl cds-list cds-layout="col:6">
15+
<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>
17+
<dd *ngIf="!angularFigma">Not yet available</dd>
18+
<dt>ESLint Rule</dt>
19+
<dd *ngIf="eslint"><a routerLink="/adoption-tooling">Available, view documentation</a></dd>
20+
<dd *ngIf="!eslint">Not yet available</dd>
21+
</dl>
22+
</div>
23+
</div>

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

Whitespace-only changes.

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'status-block',
5+
templateUrl: './status-block.component.html',
6+
styleUrls: ['./status-block.component.scss'],
7+
})
8+
export class StatusBlockComponent {
9+
@Input() eslint: boolean = true;
10+
@Input() angularFigma: string = '';
11+
@Input() coreFigma: string = '';
12+
@Input() coreVersion: string = '';
13+
@Input() angularVersion: string = 'v1';
14+
@Input() coreLink: string = '';
15+
@Input() coreStorybookLink: string = '';
16+
@Input() angularLink: string = '';
17+
18+
}

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

+11-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,17 @@ import { DemoTabData } from '../components/demo.component';
1212
template: `
1313
<h1>Accordion</h1>
1414
15-
<app-eslint-intro-block rule="no-clr-accordion"></app-eslint-intro-block>
15+
<status-block
16+
coreVersion="v4"
17+
angularVersion="v1"
18+
coreLink=""
19+
coreStorybookLink="https://clarity.design/storybook/core/?path=/story/components-accordion--page"
20+
angularLink="https://angular.clarity.design/documentation/accordion"
21+
[eslint]="true"
22+
angularFigma="https://www.figma.com/file/ZvaQGGktjGoW6gz9DqwvrLtz/?node-id=1007%3A0"
23+
coreFigma="https://www.figma.com/file/cjen2ts5Vz0W37NacV1eBE/Clarity-Core-Library-BETA?node-id=1169%3A3267">
24+
An accordion allows generic content to be collapsed and allows users to expand to show more detail.
25+
</status-block>
1626
1727
<demo [tabs]="demo1">
1828
<h2>Basic</h2>

0 commit comments

Comments
 (0)