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,142 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: map-get($semantic-typography-heading-h5, font-family);
|
||||
font-size: map-get($semantic-typography-heading-h5, font-size);
|
||||
font-weight: map-get($semantic-typography-heading-h5, font-weight);
|
||||
line-height: map-get($semantic-typography-heading-h5, line-height);
|
||||
color: $semantic-color-text-tertiary;
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
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;
|
||||
margin-bottom: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-example {
|
||||
margin-bottom: $semantic-spacing-layout-section-sm;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-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: 250px;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-primary;
|
||||
color: $semantic-color-on-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
text-align: center;
|
||||
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);
|
||||
|
||||
&.small {
|
||||
background: $semantic-color-success;
|
||||
color: $semantic-color-on-success;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: $semantic-color-warning;
|
||||
color: $semantic-color-on-warning;
|
||||
}
|
||||
|
||||
&.large {
|
||||
background: $semantic-color-danger;
|
||||
color: $semantic-color-on-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section-header,
|
||||
.demo-section-footer {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
text-align: center;
|
||||
font-weight: $semantic-typography-font-weight-semibold;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
|
||||
.alignment-demo {
|
||||
border: $semantic-border-width-2 dashed $semantic-color-border-secondary;
|
||||
|
||||
.alignment-container {
|
||||
background: $semantic-color-surface;
|
||||
min-height: 120px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.alignment-container-horizontal {
|
||||
background: $semantic-color-surface;
|
||||
min-height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.justify-container {
|
||||
background: $semantic-color-surface;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-secondary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
min-height: 60px;
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HStackComponent, StackComponent, VStackComponent } from '../../../../../ui-essentials/src/lib/components/layout';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-stack-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StackComponent, VStackComponent, HStackComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Stack Components Demo</h2>
|
||||
|
||||
<!-- Basic Stack (column) -->
|
||||
<section class="demo-section">
|
||||
<h3>Basic Stack (Column)</h3>
|
||||
<div class="demo-example">
|
||||
<ui-stack spacing="md">
|
||||
<div class="demo-item">Item 1</div>
|
||||
<div class="demo-item">Item 2</div>
|
||||
<div class="demo-item">Item 3</div>
|
||||
</ui-stack>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stack Row -->
|
||||
<section class="demo-section">
|
||||
<h3>Stack (Row)</h3>
|
||||
<div class="demo-example">
|
||||
<ui-stack direction="row" spacing="md">
|
||||
<div class="demo-item">Item 1</div>
|
||||
<div class="demo-item">Item 2</div>
|
||||
<div class="demo-item">Item 3</div>
|
||||
</ui-stack>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VStack Variations -->
|
||||
<section class="demo-section">
|
||||
<h3>VStack (Vertical Stack)</h3>
|
||||
<div class="demo-row">
|
||||
@for (spacing of spacings; track spacing) {
|
||||
<div class="demo-column">
|
||||
<h4>{{ spacing }} spacing</h4>
|
||||
<ui-vstack [spacing]="spacing">
|
||||
<div class="demo-item">Item A</div>
|
||||
<div class="demo-item">Item B</div>
|
||||
<div class="demo-item">Item C</div>
|
||||
</ui-vstack>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HStack Variations -->
|
||||
<section class="demo-section">
|
||||
<h3>HStack (Horizontal Stack)</h3>
|
||||
<div class="demo-column">
|
||||
@for (spacing of spacings; track spacing) {
|
||||
<div class="demo-example">
|
||||
<h4>{{ spacing }} spacing</h4>
|
||||
<ui-hstack [spacing]="spacing">
|
||||
<div class="demo-item">Item A</div>
|
||||
<div class="demo-item">Item B</div>
|
||||
<div class="demo-item">Item C</div>
|
||||
</ui-hstack>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Alignment Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Alignment Options</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-column">
|
||||
<h4>VStack Alignment</h4>
|
||||
@for (align of alignments; track align) {
|
||||
<div class="demo-example alignment-demo">
|
||||
<h5>align="{{ align }}"</h5>
|
||||
<ui-vstack [align]="align" spacing="sm" class="alignment-container">
|
||||
<div class="demo-item small">Small</div>
|
||||
<div class="demo-item medium">Medium Item</div>
|
||||
<div class="demo-item large">Large Item Here</div>
|
||||
</ui-vstack>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>HStack Alignment</h4>
|
||||
@for (align of alignments; track align) {
|
||||
<div class="demo-example alignment-demo">
|
||||
<h5>align="{{ align }}"</h5>
|
||||
<ui-hstack [align]="align" spacing="sm" class="alignment-container-horizontal">
|
||||
<div class="demo-item small">Small</div>
|
||||
<div class="demo-item medium">Medium<br>Two lines</div>
|
||||
<div class="demo-item large">Large<br>Item<br>Three lines</div>
|
||||
</ui-hstack>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Justify Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Justify Options</h3>
|
||||
<div class="demo-column">
|
||||
<h4>HStack Justify (full width)</h4>
|
||||
@for (justify of justifyOptions; track justify) {
|
||||
<div class="demo-example">
|
||||
<h5>justify="{{ justify }}"</h5>
|
||||
<ui-hstack [justify]="justify" spacing="sm" [fullWidth]="true" class="justify-container">
|
||||
<div class="demo-item">A</div>
|
||||
<div class="demo-item">B</div>
|
||||
<div class="demo-item">C</div>
|
||||
</ui-hstack>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Divider Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>With Dividers</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-column">
|
||||
<h4>VStack with Dividers</h4>
|
||||
<ui-vstack [divider]="true">
|
||||
<div class="demo-item">Section One</div>
|
||||
<div class="demo-item">Section Two</div>
|
||||
<div class="demo-item">Section Three</div>
|
||||
</ui-vstack>
|
||||
</div>
|
||||
|
||||
<div class="demo-column">
|
||||
<h4>HStack with Dividers</h4>
|
||||
<ui-hstack [divider]="true">
|
||||
<div class="demo-item">Left</div>
|
||||
<div class="demo-item">Center</div>
|
||||
<div class="demo-item">Right</div>
|
||||
</ui-hstack>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Responsive Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Responsive Behavior</h3>
|
||||
<p>The HStack below converts to a VStack on small screens:</p>
|
||||
<ui-hstack spacing="lg" [responsive]="true" align="center">
|
||||
<div class="demo-item">Item 1</div>
|
||||
<div class="demo-item">Item 2</div>
|
||||
<div class="demo-item">Item 3</div>
|
||||
<div class="demo-item">Item 4</div>
|
||||
</ui-hstack>
|
||||
</section>
|
||||
|
||||
<!-- Nested Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Nested Stacks</h3>
|
||||
<ui-vstack spacing="lg">
|
||||
<div class="demo-section-header">Header Section</div>
|
||||
<ui-hstack spacing="md" align="start">
|
||||
<ui-vstack spacing="sm">
|
||||
<div class="demo-item">Left Column</div>
|
||||
<div class="demo-item">Item 2</div>
|
||||
<div class="demo-item">Item 3</div>
|
||||
</ui-vstack>
|
||||
<ui-vstack spacing="sm">
|
||||
<div class="demo-item">Right Column</div>
|
||||
<div class="demo-item">Item B</div>
|
||||
<div class="demo-item">Item C</div>
|
||||
</ui-vstack>
|
||||
</ui-hstack>
|
||||
<div class="demo-section-footer">Footer Section</div>
|
||||
</ui-vstack>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './stack-demo.component.scss'
|
||||
})
|
||||
export class StackDemoComponent {
|
||||
spacings = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
|
||||
alignments = ['start', 'center', 'end', 'stretch'] as const;
|
||||
justifyOptions = ['start', 'center', 'end', 'between', 'around', 'evenly'] as const;
|
||||
}
|
||||
Reference in New Issue
Block a user