Restructure layout components architecture
- Move layout components from layouts/ directory to components/layout/ - Reorganize divider component from data-display to layout category - Add comprehensive layout component collection including aspect-ratio, bento-grid, box, breakpoint-container, center, column, dashboard-shell, feed-layout, flex, grid-container, hstack, list-detail-layout, scroll-container, section, sidebar-layout, stack, supporting-pane-layout, tabs-container, and vstack - Update all demo components to match new layout structure - Refactor routing and index exports to reflect reorganized component architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -0,0 +1,79 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
h2 {
|
||||
font-family: map-get($semantic-typography-heading-h2, font-family);
|
||||
font-size: map-get($semantic-typography-heading-h2, font-size);
|
||||
font-weight: map-get($semantic-typography-heading-h2, font-weight);
|
||||
line-height: map-get($semantic-typography-heading-h2, line-height);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: map-get($semantic-typography-heading-h3, font-family);
|
||||
font-size: map-get($semantic-typography-heading-h3, font-size);
|
||||
font-weight: map-get($semantic-typography-heading-h3, font-weight);
|
||||
line-height: map-get($semantic-typography-heading-h3, line-height);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: map-get($semantic-typography-heading-h4, font-family);
|
||||
font-size: map-get($semantic-typography-heading-h4, font-size);
|
||||
font-weight: map-get($semantic-typography-heading-h4, font-weight);
|
||||
line-height: map-get($semantic-typography-heading-h4, line-height);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: map-get($semantic-typography-body-medium, font-family);
|
||||
font-size: map-get($semantic-typography-body-medium, font-size);
|
||||
font-weight: map-get($semantic-typography-body-medium, font-weight);
|
||||
line-height: map-get($semantic-typography-body-medium, line-height);
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $semantic-spacing-grid-gap-lg;
|
||||
margin-top: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
|
||||
.demo-variant {
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-surface-primary;
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $semantic-spacing-content-paragraph;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Override some demo-specific grid heights for better visualization
|
||||
.demo-section ui-bento-grid {
|
||||
min-height: 200px;
|
||||
|
||||
.demo-variant & {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BentoGridComponent, BentoGridItemComponent } from 'ui-essentials';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-bento-grid-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, BentoGridComponent, BentoGridItemComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Bento Grid Demo</h2>
|
||||
|
||||
<!-- Basic Grid -->
|
||||
<section class="demo-section">
|
||||
<h3>Basic Bento Grid</h3>
|
||||
<ui-bento-grid columns="auto-fit-md" gap="md">
|
||||
<ui-bento-grid-item header="Regular Item">
|
||||
Basic grid item with regular content.
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item featured="md" header="Featured Item" variant="primary">
|
||||
This is a featured item that spans 2 columns and 2 rows.
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>
|
||||
Another regular item without header.
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item [colSpan]="2" variant="elevated" header="Wide Item">
|
||||
This item spans 2 columns wide.
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item [rowSpan]="2" variant="secondary" header="Tall Item">
|
||||
This item spans 2 rows tall.
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>Regular item</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Regular item</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item featured="lg" header="Large Featured" variant="elevated">
|
||||
Large featured item spanning 3 columns and 2 rows.
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>Regular item</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Regular item</ui-bento-grid-item>
|
||||
</ui-bento-grid>
|
||||
</section>
|
||||
|
||||
<!-- Fixed Columns -->
|
||||
<section class="demo-section">
|
||||
<h3>Fixed Column Grids</h3>
|
||||
|
||||
<h4>4 Columns</h4>
|
||||
<ui-bento-grid [columns]="4" gap="sm">
|
||||
<ui-bento-grid-item>Item 1</ui-bento-grid-item>
|
||||
<ui-bento-grid-item [colSpan]="2">Item 2 (2 cols)</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Item 3</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Item 4</ui-bento-grid-item>
|
||||
<ui-bento-grid-item [colSpan]="3">Item 5 (3 cols)</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Item 6</ui-bento-grid-item>
|
||||
</ui-bento-grid>
|
||||
|
||||
<h4>6 Columns</h4>
|
||||
<ui-bento-grid [columns]="6" gap="xs">
|
||||
@for (item of sixColumnItems; track item.id) {
|
||||
<ui-bento-grid-item
|
||||
[colSpan]="item.colSpan"
|
||||
[rowSpan]="item.rowSpan"
|
||||
[variant]="item.variant"
|
||||
[header]="item.header">
|
||||
{{ item.content }}
|
||||
</ui-bento-grid-item>
|
||||
}
|
||||
</ui-bento-grid>
|
||||
</section>
|
||||
|
||||
<!-- Gap Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Gap Sizes</h3>
|
||||
<div class="demo-row">
|
||||
@for (gap of gaps; track gap) {
|
||||
<div class="demo-variant">
|
||||
<h4>Gap: {{ gap }}</h4>
|
||||
<ui-bento-grid [columns]="3" [gap]="gap">
|
||||
<ui-bento-grid-item>Item A</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Item B</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Item C</ui-bento-grid-item>
|
||||
<ui-bento-grid-item [colSpan]="2">Item D (2 cols)</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Item E</ui-bento-grid-item>
|
||||
</ui-bento-grid>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Sizes -->
|
||||
<section class="demo-section">
|
||||
<h3>Featured Item Sizes</h3>
|
||||
<ui-bento-grid columns="auto-fit-md" gap="md">
|
||||
<ui-bento-grid-item featured="sm" variant="primary" header="Small Featured">
|
||||
2×1 featured item
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item featured="md" variant="secondary" header="Medium Featured">
|
||||
2×2 featured item
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item featured="lg" variant="elevated" header="Large Featured">
|
||||
3×2 featured item
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Regular</ui-bento-grid-item>
|
||||
</ui-bento-grid>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Items -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Items</h3>
|
||||
<ui-bento-grid columns="auto-fit-md" gap="md">
|
||||
<ui-bento-grid-item
|
||||
[interactive]="true"
|
||||
variant="primary"
|
||||
header="Click Me!"
|
||||
(clicked)="handleItemClick('primary')">
|
||||
Interactive primary item
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item
|
||||
[interactive]="true"
|
||||
[colSpan]="2"
|
||||
variant="secondary"
|
||||
header="Wide Interactive"
|
||||
(clicked)="handleItemClick('secondary')">
|
||||
Wide interactive item
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item
|
||||
[interactive]="true"
|
||||
featured="md"
|
||||
variant="elevated"
|
||||
header="Featured Interactive"
|
||||
(clicked)="handleItemClick('featured')">
|
||||
Featured interactive item
|
||||
</ui-bento-grid-item>
|
||||
|
||||
<ui-bento-grid-item>Static item</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>Static item</ui-bento-grid-item>
|
||||
</ui-bento-grid>
|
||||
|
||||
@if (lastClicked) {
|
||||
<p>Last clicked: <strong>{{ lastClicked }}</strong></p>
|
||||
}
|
||||
</section>
|
||||
|
||||
<!-- Row Height Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Row Heights</h3>
|
||||
<div class="demo-row">
|
||||
@for (rowHeight of rowHeights; track rowHeight) {
|
||||
<div class="demo-variant">
|
||||
<h4>Rows: {{ rowHeight }}</h4>
|
||||
<ui-bento-grid [columns]="3" [rowHeight]="rowHeight" gap="sm">
|
||||
<ui-bento-grid-item>Small content</ui-bento-grid-item>
|
||||
<ui-bento-grid-item>
|
||||
Longer content that might need more space depending on the row height setting.
|
||||
</ui-bento-grid-item>
|
||||
<ui-bento-grid-item [rowSpan]="2">Tall item</ui-bento-grid-item>
|
||||
<ui-bento-grid-item [colSpan]="2">Wide item</ui-bento-grid-item>
|
||||
</ui-bento-grid>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './bento-grid-demo.component.scss'
|
||||
})
|
||||
export class BentoGridDemoComponent {
|
||||
gaps = ['xs', 'sm', 'md', 'lg'] as const;
|
||||
rowHeights = ['sm', 'md', 'lg'] as const;
|
||||
lastClicked = '';
|
||||
|
||||
sixColumnItems = [
|
||||
{ id: 1, colSpan: 2, rowSpan: 1, variant: 'primary', header: 'Wide', content: '2×1 item' },
|
||||
{ id: 2, colSpan: 1, rowSpan: 2, variant: 'secondary', header: 'Tall', content: '1×2 item' },
|
||||
{ id: 3, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
|
||||
{ id: 4, colSpan: 2, rowSpan: 1, variant: 'elevated', header: 'Featured', content: '2×1 item' },
|
||||
{ id: 5, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
|
||||
{ id: 6, colSpan: 3, rowSpan: 1, variant: 'primary', header: 'Extra Wide', content: '3×1 item' },
|
||||
{ id: 7, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
|
||||
{ id: 8, colSpan: 2, rowSpan: 2, variant: 'elevated', header: 'Large', content: '2×2 featured' },
|
||||
{ id: 9, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
|
||||
{ id: 10, colSpan: 1, rowSpan: 1, variant: 'default', header: '', content: 'Regular' },
|
||||
] as const;
|
||||
|
||||
handleItemClick(type: string): void {
|
||||
this.lastClicked = type;
|
||||
console.log('Bento grid item clicked:', type);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user