Skip to content

docs(card): update card docs #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
immohammadjaved merged 1 commit into from
Sep 5, 2025
Merged

docs(card): update card docs #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion projects/docs/public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"orientation": "portrait-primary",
"scope": "/",
"lang": "en",
Expand Down
100 changes: 78 additions & 22 deletions projects/docs/src/app/pages/docs/components/card/card.variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,69 @@
import { Component } from '@angular/core';
import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from 'ui';
import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle, UiFormField } from 'ui';
import { UiButton } from 'ui';
import { UiInput, UiLabel } from 'ui';
import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';

@Component({
selector: 'card-default-example',
template: `
<div uiCard>
<div uiCard class="w-full max-w-sm">
<div uiCardHeader>
<div uiCardTitle>Card title</div>
<div uiCardDescription>Card description</div>
<div uiCardTitle>Login to your account</div>
<div uiCardDescription>
Enter your email below to login to your account
</div>
<div uiCardAction>
<button uiButton size="sm">Action</button>
<button uiButton variant="link">Sign Up</button>
</div>
</div>
<div uiCardContent>
This is the card content area.
<form>
<div class="flex flex-col gap-6">
<div class="grid gap-2" uiFormField>
<label uiLabel>Email</label>
<input uiInput type="email" placeholder="m@example.com" required />
</div>
<div class="grid gap-2" uiFormField>
<div class="flex items-center">
<label uiLabel>Password</label>
<a href="#" uiButton variant="link" class="ml-auto" >
Forgot your password?
</a>
</div>
<input uiInput type="password" required />
</div>
</div>
</form>
</div>
<div uiCardFooter>
<button uiButton variant="secondary" size="sm">Cancel</button>
<button uiButton size="sm">Save</button>
<div uiCardFooter class="flex-col gap-2">
<button uiButton type="submit" class="w-full">
Login
</button>
<button uiButton variant="outline" class="w-full">
Login with Google
</button>
</div>
</div>
`,
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiButton]
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiLabel, UiInput, UiButton, UiFormField],
host: {
class: 'w-2/3 mx-auto'
}
})
export class CardDefaultExample {}

export const cardMeta: IComponentMeta = {
title: 'Card',
description: 'Displays content within a container with header, content and footer slots.',
description: 'Displays a card with header, content, and footer.',
installation: {
package: 'card',
import: `import { UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter } from '@workspace/ui/directives/card';`,
usage: `<div uiCard>
<div uiCardHeader>
<div uiCardTitle>Title</div>
<div uiCardDescription>Description</div>
<div uiCardAction>Action</div>
</div>
<div uiCardContent>Content</div>
<div uiCardFooter>Footer</div>
Expand All @@ -52,31 +79,60 @@ export const cardMeta: IComponentMeta = {
export const cardVariants: IVariant[] = [
{
title: 'Default',
description: 'Card with header, content and footer.',
code: `import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from '@workspace/ui/directives/card';
description: 'Login to your account',
code: `import { Component } from '@angular/core';
import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from '@workspace/ui/directives/card';
import { UiInput } from '@workspace/ui/directives/input';
import { UiLabel } from '@workspace/ui/directives/label';
import { UiButton } from '@workspace/ui/directives/button';
import { UiFormField } from '@workspace/ui/directives/form-field';

@Component({
selector: 'card-default-example',
template: \`
<div uiCard>
<div uiCard class="w-full max-w-sm">
<div uiCardHeader>
<div uiCardTitle>Card title</div>
<div uiCardDescription>Card description</div>
<div uiCardTitle>Login to your account</div>
<div uiCardDescription>
Enter your email below to login to your account
</div>
<div uiCardAction>
<button uiButton size=\"sm\">Action</button>
<button uiButton variant="link">Sign Up</button>
</div>
</div>
<div uiCardContent>
This is the card content area.
<form>
<div class="flex flex-col gap-6">
<div class="grid gap-2" uiFormField>
<label uiLabel>Email</label>
<input uiInput type="email" placeholder="m@example.com" required />
</div>
<div class="grid gap-2" uiFormField>
<div class="flex items-center">
<label uiLabel>Password</label>
<a href="#" uiButton variant="link" class="ml-auto" >
Forgot your password?
</a>
</div>
<input uiInput type="password" required />
</div>
</div>
</form>
</div>
<div uiCardFooter>
<button uiButton variant=\"secondary\" size=\"sm\">Cancel</button>
<button uiButton size=\"sm\">Save</button>
<div uiCardFooter class="flex-col gap-2">
<button uiButton type="submit" class="w-full">
Login
</button>
<button uiButton variant="outline" class="w-full">
Login with Google
</button>
</div>
</div>
\`,
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiButton]
imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiLabel, UiInput, UiButton, UiFormField],
host: {
class: 'w-2/3 mx-auto'
}
})
export class CardDefaultExample {}`,
component: CardDefaultExample
Expand Down