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,116 @@
|
||||
@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-layout-section-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-md;
|
||||
|
||||
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-secondary;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-grid-gap-lg;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
background: $semantic-color-surface-secondary;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
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);
|
||||
}
|
||||
|
||||
.margin-demo-container {
|
||||
background: $semantic-color-surface-elevated;
|
||||
padding: $semantic-spacing-component-xl;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
|
||||
.margin-box {
|
||||
background: $semantic-color-success;
|
||||
color: $semantic-color-on-success;
|
||||
padding: $semantic-spacing-component-md;
|
||||
text-align: center;
|
||||
font-weight: $semantic-typography-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-demo {
|
||||
gap: $semantic-spacing-component-md;
|
||||
|
||||
.flex-item {
|
||||
background: $semantic-color-secondary;
|
||||
color: $semantic-color-on-secondary;
|
||||
padding: $semantic-spacing-component-md;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-demo {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: $semantic-spacing-component-md;
|
||||
|
||||
.grid-item {
|
||||
background: $semantic-color-warning;
|
||||
color: $semantic-color-on-warning;
|
||||
padding: $semantic-spacing-component-md;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
text-align: center;
|
||||
font-weight: $semantic-typography-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-demo {
|
||||
background: $semantic-color-info;
|
||||
color: $semantic-color-on-info;
|
||||
margin-right: $semantic-spacing-component-sm;
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BoxComponent } from '../../../../../ui-essentials/src/lib/components/layout/box';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-box-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, BoxComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Box Component Demo</h2>
|
||||
|
||||
<!-- Padding Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Padding Utilities</h3>
|
||||
<div class="demo-row">
|
||||
@for (spacing of spacings; track spacing) {
|
||||
<div class="demo-column">
|
||||
<h4>p="{{ spacing }}"</h4>
|
||||
<ui-box [p]="spacing" [border]="true" class="content-box">
|
||||
<div class="inner-content">Content with {{ spacing }} padding</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Directional Padding -->
|
||||
<section class="demo-section">
|
||||
<h3>Directional Padding</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-column">
|
||||
<h4>px="lg" (horizontal)</h4>
|
||||
<ui-box px="lg" [border]="true" class="content-box">
|
||||
<div class="inner-content">Horizontal padding</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>py="lg" (vertical)</h4>
|
||||
<ui-box py="lg" [border]="true" class="content-box">
|
||||
<div class="inner-content">Vertical padding</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>pt="xl" pb="sm"</h4>
|
||||
<ui-box pt="xl" pb="sm" [border]="true" class="content-box">
|
||||
<div class="inner-content">Mixed padding</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Margin Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Margin Utilities</h3>
|
||||
<div class="margin-demo-container">
|
||||
@for (spacing of marginSpacings; track spacing) {
|
||||
<ui-box [m]="spacing" [border]="true" [rounded]="true" class="margin-box">
|
||||
m="{{ spacing }}"
|
||||
</ui-box>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Display Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Display Options</h3>
|
||||
<div class="demo-column">
|
||||
<h4>display="flex"</h4>
|
||||
<ui-box display="flex" p="md" [border]="true" class="flex-demo">
|
||||
<div class="flex-item">Item 1</div>
|
||||
<div class="flex-item">Item 2</div>
|
||||
<div class="flex-item">Item 3</div>
|
||||
</ui-box>
|
||||
|
||||
<h4>display="grid"</h4>
|
||||
<ui-box display="grid" p="md" [border]="true" class="grid-demo">
|
||||
<div class="grid-item">A</div>
|
||||
<div class="grid-item">B</div>
|
||||
<div class="grid-item">C</div>
|
||||
<div class="grid-item">D</div>
|
||||
</ui-box>
|
||||
|
||||
<h4>display="inline-block"</h4>
|
||||
<div>
|
||||
<ui-box display="inline-block" p="sm" [border]="true" class="inline-demo">Box 1</ui-box>
|
||||
<ui-box display="inline-block" p="sm" [border]="true" class="inline-demo">Box 2</ui-box>
|
||||
<ui-box display="inline-block" p="sm" [border]="true" class="inline-demo">Box 3</ui-box>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Visual Styles -->
|
||||
<section class="demo-section">
|
||||
<h3>Visual Styles</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-column">
|
||||
<h4>Basic</h4>
|
||||
<ui-box p="md">
|
||||
<div class="inner-content">Basic box</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>With Border</h4>
|
||||
<ui-box p="md" [border]="true">
|
||||
<div class="inner-content">Bordered box</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>Rounded</h4>
|
||||
<ui-box p="md" [border]="true" [rounded]="true">
|
||||
<div class="inner-content">Rounded box</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>With Shadow</h4>
|
||||
<ui-box p="md" [shadow]="true">
|
||||
<div class="inner-content">Shadow box</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>All Styles</h4>
|
||||
<ui-box p="lg" [border]="true" [rounded]="true" [shadow]="true">
|
||||
<div class="inner-content">Full styled</div>
|
||||
</ui-box>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Complex Layout Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Complex Layout Example</h3>
|
||||
<ui-box p="lg" [border]="true" [rounded]="true" [shadow]="true">
|
||||
<ui-box mb="md">
|
||||
<h4 style="margin: 0;">Card Header</h4>
|
||||
</ui-box>
|
||||
|
||||
<ui-box display="flex" mb="md">
|
||||
<ui-box pr="md" style="flex: 1;">
|
||||
<div class="inner-content">Left column content with some text that wraps nicely.</div>
|
||||
</ui-box>
|
||||
|
||||
<ui-box pl="md" [border]="true" style="flex: 1;">
|
||||
<div class="inner-content">Right column with border and padding.</div>
|
||||
</ui-box>
|
||||
</ui-box>
|
||||
|
||||
<ui-box pt="md" [border]="true" style="border-left: none; border-right: none; border-bottom: none;">
|
||||
<div class="inner-content">Footer with top border only</div>
|
||||
</ui-box>
|
||||
</ui-box>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './box-demo.component.scss'
|
||||
})
|
||||
export class BoxDemoComponent {
|
||||
spacings = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
|
||||
marginSpacings = ['xs', 'sm', 'md', 'lg'] as const;
|
||||
}
|
||||
Reference in New Issue
Block a user