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

Commit 1be6169

Browse files
bbogdanovbbogdanov
committed
fix(adoption): aligning example headers and spacing between examples
Signed-off-by: Bogdan Bogdanov <[email protected]>
1 parent 124c466 commit 1be6169

17 files changed

+91
-90
lines changed

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

+10-7
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,21 @@ let PreviewID = 0;
3939
@Component({
4040
selector: 'demo',
4141
template: `
42-
<ng-content></ng-content>
42+
<div cds-layout="m-b:md">
43+
<ng-content></ng-content>
44+
</div>
4345
44-
<div cds-layout="grid gap:md">
46+
<div cds-layout="grid gap:lg m-b:xl">
4547
<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>
48+
<p cds-text="message">
49+
{{ tab.name }}
50+
<button (click)="openStackblitz(tab)" class="btn btn-sm btn-link">
51+
<cds-icon shape="bolt"></cds-icon> View in StackBlitz
52+
</button>
53+
</p>
4954
<div *ngFor="let file of tab.files | keyvalue">
5055
<sourcecode [src]="file.value" [language]="tab.language || 'ts'"></sourcecode>
5156
</div>
52-
53-
5457
</div>
5558
</div>
5659
`,

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,13 @@ import { DemoTabData } from '../components/demo.component';
2020
angularLink="https://angular.clarity.design/documentation/accordion"
2121
[eslint]="true"
2222
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.
23+
coreFigma="https://www.figma.com/file/cjen2ts5Vz0W37NacV1eBE/Clarity-Core-Library-BETA?node-id=1169%3A3267"
24+
>
25+
An accordion allows generic content to be collapsed and allows users to expand to show more detail.
2526
</status-block>
2627
2728
<demo [tabs]="demo1">
28-
<h2>Basic</h2>
29+
<h3 cds-text="section">With expanded, disabled and exapandable panels</h3>
2930
</demo>
3031
`,
3132
})

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@ import { DemoTabData } from '../components/demo.component';
1212
template: `
1313
<h1>Badges</h1>
1414
15-
<app-eslint-intro-block rule="no-clr-badge"></app-eslint-intro-block>
15+
<app-eslint-intro-block rule="no-clr-badge"></app-eslint-intro-block>
1616
1717
<demo [tabs]="demo1">
18-
<h2>Basic</h2>
18+
<h3 cds-text="section">Badge colours</h3>
19+
<p>Badge in different colours</p>
1920
</demo>
2021
<demo [tabs]="demo2">
21-
<h2>Status</h2>
22+
<h3 cds-text="section">Badge status</h3>
23+
<p>Badges with all available statuses</p>
2224
</demo>
2325
`,
2426
})

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

+10-8
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,33 @@ import { DemoTabData } from '../components/demo.component';
1212
template: `
1313
<h1>Button</h1>
1414
15-
<app-eslint-intro-block rule="no-clr-button"></app-eslint-intro-block>
16-
15+
<app-eslint-intro-block rule="no-clr-button"></app-eslint-intro-block>
1716
1817
<demo [tabs]="demo1">
19-
<h3>Basic</h3>
18+
<h3 cds-text="section">Primary button</h3>
19+
<p>Basic primary button</p>
2020
</demo>
2121
2222
<demo [tabs]="demo2">
23-
<h3>All solid buttons</h3>
23+
<h3 cds-text="section">Solid buttons</h3>
24+
<p>All solid buttons</p>
2425
</demo>
2526
2627
<demo [tabs]="demo3">
27-
<h3>All outline buttons</h3>
28+
<h3 cds-text="section">Outline buttons</h3>
29+
<p>All outline buttons</p>
2830
</demo>
2931
3032
<demo [tabs]="demo4">
31-
<h3>Inverse</h3>
33+
<h3 cds-text="section">Inverse buttons</h3>
3234
</demo>
3335
3436
<demo [tabs]="demo5">
35-
<h3>Icon buttons</h3>
37+
<h3 cds-text="section">Icon buttons</h3>
3638
</demo>
3739
3840
<demo [tabs]="demo6">
39-
<h3>Loading buttons</h3>
41+
<h3 cds-text="section">Loading buttons</h3>
4042
</demo>
4143
`,
4244
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { DemoTabData } from '../components/demo.component';
99
<app-eslint-intro-block rule="no-clr-card"></app-eslint-intro-block>
1010
1111
<demo [tabs]="demo1">
12-
<h2>Basic</h2>
12+
<h3 cds-text="section">Card with title and body</h3>
1313
</demo>
1414
<demo [tabs]="demo2">
15-
<h2>Card media block</h2>
15+
<h3 cds-text="section">Card media block</h3>
1616
</demo>
1717
`,
1818
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import { DemoTabData } from '../components/demo.component';
1515
<app-eslint-intro-block rule="no-clr-checkbox"></app-eslint-intro-block>
1616
1717
<demo [tabs]="demo1">
18-
<p>Basic checkbox</p>
18+
<h3 cds-text="section">Basic checkbox</h3>
1919
</demo>
2020
<demo [tabs]="demo2">
21-
<p>Example of more complex form structure</p>
21+
<h3 cds-text="section">Example of more complex form structure</h3>
2222
</demo>
2323
`,
2424
})

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ import { DemoTabData } from '../components/demo.component';
1313
<h1>Datalist</h1>
1414
1515
<demo [tabs]="demo">
16-
<h3>Basic</h3>
16+
<h3 cds-text="section">Datalist with text items</h3>
1717
</demo>
1818
1919
<demo [tabs]="demo2">
20-
<h3>Reactive forms</h3>
20+
<h3 cds-text="section">Reactive forms</h3>
21+
<p>Using Angular forms inside datalist</p>
2122
</demo>
2223
`,
2324
})

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

+15-12
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,34 @@ import { DemoTabData } from '../components/demo.component';
1414
<app-eslint-intro-block rule="no-clr-form"></app-eslint-intro-block>
1515
1616
<demo [tabs]="demo1">
17-
<h2>Horizontal</h2>
17+
<h3 cds-text="section">Horizontal</h3>
1818
</demo>
1919
2020
<demo [tabs]="demo2">
21-
<h2>Vertical</h2>
21+
<h3 cds-text="section">Vertical</h3>
2222
</demo>
2323
2424
<demo [tabs]="demo3">
25-
<h2>Compact</h2>
25+
<h3 cds-text="section">Compact</h3>
2626
</demo>
2727
2828
<demo [tabs]="demo4">
29-
<h2>Display helpers, errors and success messages</h2>
29+
<h3 cds-text="section">Display helpers, errors and success messages</h3>
3030
<p>
31-
Clarity Core don't handle display of messages as <code>error</code> or <code>success</code>
32-
the same way as Clarity Angular does. This is left up to the developer to control when a given message is visible or not
33-
and how to display it. But we provide some examples to show how to do this with Angular Forms. You could check <a href="/textarea">Textarea</a>,
34-
<a href="/datalist">Datalist</a> or some other of the Form components for more examples.
31+
Clarity Core don't handle display of messages as <code>error</code> or <code>success</code> the same way as
32+
Clarity Angular does. This is left up to the developer to control when a given message is visible or not and how
33+
to display it. But we provide some examples to show how to do this with Angular Forms. You could check
34+
<a href="/textarea">Textarea</a>, <a href="/datalist">Datalist</a> or some other of the Form components for more
35+
examples.
3536
</p>
3637
3738
<p>
38-
Bellow is a simple form with two form controls (input and textarea) that show and hide control-messages based on the status of
39-
the form or the type of the error.
40-
<p>
41-
</demo>
39+
Bellow is a simple form with two form controls (input and textarea) that show and hide control-messages based on
40+
the status of the form or the type of the error.
41+
</p>
42+
43+
<p></p
44+
></demo>
4245
`,
4346
})
4447
export class FormPage {

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { DemoTabData } from '../components/demo.component';
1212
template: `
1313
<h1>Icons</h1>
1414
15-
<app-eslint-intro-block rule="no-clr-icon"></app-eslint-intro-block>
15+
<app-eslint-intro-block rule="no-clr-icon"></app-eslint-intro-block>
1616
1717
<p>
1818
There is replacement for Clarity Angular icons with
@@ -21,16 +21,16 @@ import { DemoTabData } from '../components/demo.component';
2121
</p>
2222
2323
<demo [tabs]="demo1">
24-
<h3>Basic</h3>
24+
<h3 cds-text="section">All available icon variants</h3>
2525
</demo>
2626
<demo [tabs]="demo2">
27-
<h3>Color states</h3>
27+
<h3 cds-text="section">Color states</h3>
2828
</demo>
2929
<demo [tabs]="demo3">
30-
<h3>Rotation</h3>
30+
<h3 cds-text="section">Rotation</h3>
3131
</demo>
3232
<demo [tabs]="demo4">
33-
<h3>Badges</h3>
33+
<h3 cds-text="section">Badges</h3>
3434
</demo>
3535
`,
3636
})

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

+4-26
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,16 @@ import { DemoTabData } from '../components/demo.component';
1313
<h1>Input</h1>
1414
1515
<demo [tabs]="demo1">
16-
<h3>Basic</h3>
16+
<h3 cds-text="section">Input with placeholder</h3>
1717
</demo>
1818
1919
<demo [tabs]="demo2">
20-
<h3>Input with label</h3>
20+
<h3 cds-text="section">Input with label and placeholder</h3>
2121
</demo>
2222
2323
<demo [tabs]="demo3">
24-
<h3>Input with label</h3>
25-
</demo>
26-
27-
<demo [tabs]="demo4">
28-
<h3>All type of inputs</h3>
24+
<h3 cds-text="section">Error and Info</h3>
25+
<p>Input demos with info message and error message</p>
2926
</demo>
3027
`,
3128
})
@@ -69,25 +66,6 @@ export class InputPage {
6966
];
7067

7168
demo3: DemoTabData[] = [
72-
{
73-
name: 'Angular',
74-
files: {
75-
'src/app/app.component.ts': 'input/input.3.angular.txt',
76-
},
77-
language: 'ts',
78-
template: 'angular',
79-
},
80-
{
81-
name: 'Core',
82-
files: {
83-
'src/app/app.component.ts': 'input/input.3.core.txt',
84-
},
85-
language: 'ts',
86-
template: 'core',
87-
},
88-
];
89-
90-
demo4: DemoTabData[] = [
9169
{
9270
name: 'Angular',
9371
files: {

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

+17-6
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,24 @@ import { DemoTabData } from '../components/demo.component';
1212
template: `
1313
<h1>Labels</h1>
1414
15-
<app-eslint-intro-block rule="no-clr-label"></app-eslint-intro-block>
15+
<app-eslint-intro-block rule="no-clr-label"></app-eslint-intro-block>
1616
17-
<demo [tabs]="demo0"></demo>
18-
<demo [tabs]="demo1"></demo>
19-
<demo [tabs]="demo2"></demo>
20-
<demo [tabs]="demo3"></demo>
21-
<demo [tabs]="demo4"></demo>
17+
<demo [tabs]="demo0">
18+
<h3 cds-text="section">Simple label with text</h3>
19+
</demo>
20+
<demo [tabs]="demo1">
21+
<h3 cds-text="section">Outline labels with badge</h3>
22+
</demo>
23+
<demo [tabs]="demo2">
24+
<h3 cds-text="section">Clickable outline labels</h3>
25+
</demo>
26+
<demo [tabs]="demo3">
27+
<h3 cds-text="section">Outline labels without badge</h3>
28+
</demo>
29+
<demo [tabs]="demo4">
30+
<h3 cds-text="section">Labels with status</h3>
31+
<p>Labels with colour background fill</p>
32+
</demo>
2233
`,
2334
})
2435
export class LabelPage {

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ import { DemoTabData } from '../components/demo.component';
2020
</p>
2121
2222
<demo [tabs]="demo1">
23-
<h3>Basic</h3>
23+
<h3 cds-text="section">With title, body and footer</h3>
2424
</demo>
2525
2626
<demo [tabs]="demo2">
27-
<h3>Closable</h3>
27+
<h3 cds-text="section">Closable</h3>
2828
2929
<p>
30-
In some cases there is a need to prevent the user from closing the modal. To achieve this there is an option for removing the closable action button
31-
on the top right corner of the dialog.
30+
In some cases there is a need to prevent the user from closing the modal. To achieve this there is an option for
31+
removing the closable action button on the top right corner of the dialog.
3232
</p>
3333
</demo>
3434
`,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import { DemoTabData } from '../components/demo.component';
1212
template: `
1313
<h1>Password</h1>
1414
<demo [tabs]="demo1">
15-
<h3>Basic</h3>
15+
<h3 cds-text="section">With label</h3>
1616
</demo>
1717
1818
<demo [tabs]="demo2">
19-
<h3>Password with Reactive form</h3>
19+
<h3 cds-text="section">Password with Reactive form</h3>
2020
</demo>
2121
`,
2222
})

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { DemoTabData } from '../components/demo.component';
1515
<app-eslint-intro-block rule="no-clr-range"></app-eslint-intro-block>
1616
1717
<demo [tabs]="demo1">
18-
<h3>Basic</h3>
18+
<h3 cds-text="section">With label and info message</h3>
1919
</demo>
2020
`,
2121
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ import { DemoTabData } from '../components/demo.component';
1515
<app-eslint-intro-block rule="no-clr-select"></app-eslint-intro-block>
1616
1717
<demo [tabs]="demo1">
18-
<h3>Basic</h3>
18+
<h3 cds-text="section">With 3 elements and label</h3>
1919
</demo>
2020
2121
<demo [tabs]="demo2">
22-
<h3>Reactive form</h3>
22+
<h3 cds-text="section">Reactive form</h3>
2323
</demo>
2424
`,
2525
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ import { DemoTabData } from '../components/demo.component';
1515
<app-eslint-intro-block rule="no-clr-textarea"></app-eslint-intro-block>
1616
1717
<demo [tabs]="demo1">
18-
<h3>Basic</h3>
18+
<h3 cds-text="section">With label and info message</h3>
1919
</demo>
2020
2121
<demo [tabs]="demo2">
22-
<h3>Reactive forms</h3>
22+
<h3 cds-text="section">Reactive forms</h3>
2323
</demo>
2424
`,
2525
})

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ import { DemoTabData } from '../components/demo.component';
1313
<h1>Toggle</h1>
1414
1515
<demo [tabs]="demo1">
16-
<h3>Basic</h3>
16+
<h3 cds-text="section">With label</h3>
1717
</demo>
1818
1919
<demo [tabs]="demo2">
20-
<h3>With subtext and forms</h3>
20+
<h3 cds-text="section">With subtext and forms</h3>
2121
</demo>
2222
2323
<demo [tabs]="demo3">
24-
<h3>Disabled</h3>
24+
<h3 cds-text="section">Disabled</h3>
2525
</demo>
2626
`,
2727
})

0 commit comments

Comments
 (0)