Skip to content

Commit 85fd805

Browse files
immohammadjavedimmohammadjaved
authored
Merge pull request #3 from angularcafe/dev
docs(card): update card docs
2 parents 7046cd2 + b9c4790 commit 85fd805

File tree

2 files changed

+78
-23
lines changed

2 files changed

+78
-23
lines changed

‎projects/docs/public/manifest.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"start_url": "/",
66
"display": "standalone",
77
"background_color": "#ffffff",
8-
"theme_color": "#3b82f6",
98
"orientation": "portrait-primary",
109
"scope": "/",
1110
"lang": "en",

‎projects/docs/src/app/pages/docs/components/card/card.variants.ts‎

Lines changed: 78 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,69 @@
11
import { Component } from '@angular/core';
2-
import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from 'ui';
2+
import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle, UiFormField } from 'ui';
33
import { UiButton } from 'ui';
4+
import { UiInput, UiLabel } from 'ui';
45
import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';
56

67
@Component({
78
selector: 'card-default-example',
89
template: `
9-
<div uiCard>
10+
<div uiCard class="w-full max-w-sm">
1011
<div uiCardHeader>
11-
<div uiCardTitle>Card title</div>
12-
<div uiCardDescription>Card description</div>
12+
<div uiCardTitle>Login to your account</div>
13+
<div uiCardDescription>
14+
Enter your email below to login to your account
15+
</div>
1316
<div uiCardAction>
14-
<button uiButton size="sm">Action</button>
17+
<button uiButton variant="link">Sign Up</button>
1518
</div>
1619
</div>
1720
<div uiCardContent>
18-
This is the card content area.
21+
<form>
22+
<div class="flex flex-col gap-6">
23+
<div class="grid gap-2" uiFormField>
24+
<label uiLabel>Email</label>
25+
<input uiInput type="email" placeholder="[email protected]" required />
26+
</div>
27+
<div class="grid gap-2" uiFormField>
28+
<div class="flex items-center">
29+
<label uiLabel>Password</label>
30+
<a href="#" uiButton variant="link" class="ml-auto" >
31+
Forgot your password?
32+
</a>
33+
</div>
34+
<input uiInput type="password" required />
35+
</div>
36+
</div>
37+
</form>
1938
</div>
20-
<div uiCardFooter>
21-
<button uiButton variant="secondary" size="sm">Cancel</button>
22-
<button uiButton size="sm">Save</button>
39+
<div uiCardFooter class="flex-col gap-2">
40+
<button uiButton type="submit" class="w-full">
41+
Login
42+
</button>
43+
<button uiButton variant="outline" class="w-full">
44+
Login with Google
45+
</button>
2346
</div>
2447
</div>
2548
`,
26-
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiButton]
49+
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiLabel, UiInput, UiButton, UiFormField],
50+
host: {
51+
class: 'w-2/3 mx-auto'
52+
}
2753
})
2854
export class CardDefaultExample {}
2955

3056
export const cardMeta: IComponentMeta = {
3157
title: 'Card',
32-
description: 'Displays content within a container with header, content and footer slots.',
58+
description: 'Displays a card with header, content, and footer.',
3359
installation: {
3460
package: 'card',
3561
import: `import { UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter } from '@workspace/ui/directives/card';`,
3662
usage: `<div uiCard>
3763
<div uiCardHeader>
3864
<div uiCardTitle>Title</div>
3965
<div uiCardDescription>Description</div>
66+
<div uiCardAction>Action</div>
4067
</div>
4168
<div uiCardContent>Content</div>
4269
<div uiCardFooter>Footer</div>
@@ -52,31 +79,60 @@ export const cardMeta: IComponentMeta = {
5279
export const cardVariants: IVariant[] = [
5380
{
5481
title: 'Default',
55-
description: 'Card with header, content and footer.',
56-
code: `import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from '@workspace/ui/directives/card';
82+
description: 'Login to your account',
83+
code: `import { Component } from '@angular/core';
84+
import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from '@workspace/ui/directives/card';
85+
import { UiInput } from '@workspace/ui/directives/input';
86+
import { UiLabel } from '@workspace/ui/directives/label';
5787
import { UiButton } from '@workspace/ui/directives/button';
88+
import { UiFormField } from '@workspace/ui/directives/form-field';
5889
5990
@Component({
6091
selector: 'card-default-example',
6192
template: \`
62-
<div uiCard>
93+
<div uiCard class="w-full max-w-sm">
6394
<div uiCardHeader>
64-
<div uiCardTitle>Card title</div>
65-
<div uiCardDescription>Card description</div>
95+
<div uiCardTitle>Login to your account</div>
96+
<div uiCardDescription>
97+
Enter your email below to login to your account
98+
</div>
6699
<div uiCardAction>
67-
<button uiButton size=\"sm\">Action</button>
100+
<button uiButton variant="link">Sign Up</button>
68101
</div>
69102
</div>
70103
<div uiCardContent>
71-
This is the card content area.
104+
<form>
105+
<div class="flex flex-col gap-6">
106+
<div class="grid gap-2" uiFormField>
107+
<label uiLabel>Email</label>
108+
<input uiInput type="email" placeholder="[email protected]" required />
109+
</div>
110+
<div class="grid gap-2" uiFormField>
111+
<div class="flex items-center">
112+
<label uiLabel>Password</label>
113+
<a href="#" uiButton variant="link" class="ml-auto" >
114+
Forgot your password?
115+
</a>
116+
</div>
117+
<input uiInput type="password" required />
118+
</div>
119+
</div>
120+
</form>
72121
</div>
73-
<div uiCardFooter>
74-
<button uiButton variant=\"secondary\" size=\"sm\">Cancel</button>
75-
<button uiButton size=\"sm\">Save</button>
122+
<div uiCardFooter class="flex-col gap-2">
123+
<button uiButton type="submit" class="w-full">
124+
Login
125+
</button>
126+
<button uiButton variant="outline" class="w-full">
127+
Login with Google
128+
</button>
76129
</div>
77130
</div>
78131
\`,
79-
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiButton]
132+
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiLabel, UiInput, UiButton, UiFormField],
133+
host: {
134+
class: 'w-2/3 mx-auto'
135+
}
80136
})
81137
export class CardDefaultExample {}`,
82138
component: CardDefaultExample

0 commit comments

Comments
 (0)