6f0ab0cf5f
- Replace incorrect semantic token names with correct ones: • $semantic-border-width-thin → $semantic-border-width-1 • $semantic-color-border-default → $semantic-color-border-primary • $semantic-spacing-content-* → $semantic-spacing-component-* • $semantic-typography-body-* → $semantic-typography-font-size-* • $semantic-typography-caption-* → $semantic-typography-font-size-* • $semantic-motion-easing-standard → $semantic-easing-standard • $semantic-color-surface-tertiary → $semantic-color-surface-secondary • Various hover color tokens → base color tokens - Fix typography map usage errors: • Replace heading map tokens with individual size tokens • $semantic-typography-heading-h* → $semantic-typography-heading-h*-size - Update affected components: • tooltip, divider, progress-circle, range-slider components • Related demo components and SCSS files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
258 lines
10 KiB
TypeScript
258 lines
10 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { ContainerComponent } from '../../../../../ui-essentials/src/lib/components/layout/container/container.component';
|
|
import { GridSystemComponent } from '../../../../../ui-essentials/src/lib/components/layout/grid-system/grid-system.component';
|
|
|
|
@Component({
|
|
selector: 'ui-container-demo',
|
|
standalone: true,
|
|
imports: [CommonModule, ContainerComponent, GridSystemComponent],
|
|
template: `
|
|
<div class="demo-wrapper">
|
|
<h2>Container Demo</h2>
|
|
|
|
<!-- Size Variants -->
|
|
<section class="demo-section">
|
|
<h3>Size Variants</h3>
|
|
<div class="demo-containers-showcase">
|
|
@for (size of sizes; track size) {
|
|
<div class="demo-container-wrapper">
|
|
<div class="demo-label">{{ size }} (max-width: {{ getMaxWidth(size) }})</div>
|
|
<ui-container [size]="size" class="demo-container-outline">
|
|
<div class="demo-content">{{ size }} container content</div>
|
|
</ui-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Variant Types -->
|
|
<section class="demo-section">
|
|
<h3>Container Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Default Container</h4>
|
|
<ui-container size="md" class="demo-container-outline">
|
|
<div class="demo-content">Basic container with standard padding and centering</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Card Container</h4>
|
|
<ui-container size="md" variant="card">
|
|
<div class="demo-content">Card-style container with background, border, and shadow</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Section Container</h4>
|
|
<ui-container size="lg" variant="section" background="surface">
|
|
<div class="demo-content">Section container with larger vertical padding for page sections</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Hero Container</h4>
|
|
<ui-container size="xl" variant="hero" background="surface-elevated">
|
|
<div class="demo-content hero-content">
|
|
<h2>Hero Section</h2>
|
|
<p>Large padding and centered content for hero sections</p>
|
|
</div>
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Flex Containers -->
|
|
<section class="demo-section">
|
|
<h3>Flex Container Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Column (Default)</h4>
|
|
<ui-container size="sm" variant="flex" class="demo-container-outline">
|
|
<div class="demo-flex-item">Item 1</div>
|
|
<div class="demo-flex-item">Item 2</div>
|
|
<div class="demo-flex-item">Item 3</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Row</h4>
|
|
<ui-container size="sm" variant="flex" flexDirection="row" class="demo-container-outline">
|
|
<div class="demo-flex-item">Item 1</div>
|
|
<div class="demo-flex-item">Item 2</div>
|
|
<div class="demo-flex-item">Item 3</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Center</h4>
|
|
<ui-container size="sm" variant="flex" flexJustify="center" class="demo-container-outline demo-container-tall">
|
|
<div class="demo-flex-item">Centered</div>
|
|
<div class="demo-flex-item">Content</div>
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Flex Space Between</h4>
|
|
<ui-container size="sm" variant="flex" flexDirection="row" flexJustify="between" class="demo-container-outline">
|
|
<div class="demo-flex-item">Start</div>
|
|
<div class="demo-flex-item">End</div>
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Grid Containers -->
|
|
<section class="demo-section">
|
|
<h3>Grid Container Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Grid Auto</h4>
|
|
<ui-container size="lg" variant="grid" gridColumns="auto" class="demo-container-outline">
|
|
@for (item of getGridItems(6); track $index) {
|
|
<div class="demo-grid-item">{{ item }}</div>
|
|
}
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Grid 3 Columns</h4>
|
|
<ui-container size="lg" variant="grid" [gridColumns]="3" class="demo-container-outline">
|
|
@for (item of getGridItems(6); track $index) {
|
|
<div class="demo-grid-item">{{ item }}</div>
|
|
}
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Padding Variants -->
|
|
<section class="demo-section">
|
|
<h3>Padding Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
@for (padding of paddingSizes; track padding) {
|
|
<div class="demo-variant-item">
|
|
<h4>Padding: {{ padding }}</h4>
|
|
<ui-container size="sm" [padding]="padding" class="demo-container-outline">
|
|
<div class="demo-content">{{ padding }} padding content</div>
|
|
</ui-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Background Variants -->
|
|
<section class="demo-section">
|
|
<h3>Background Variants</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
@for (bg of backgrounds; track bg) {
|
|
<div class="demo-variant-item">
|
|
<h4>Background: {{ bg }}</h4>
|
|
<ui-container size="sm" [background]="bg" padding="md" class="demo-container-outline">
|
|
<div class="demo-content">{{ bg }} background</div>
|
|
</ui-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scrollable Container -->
|
|
<section class="demo-section">
|
|
<h3>Scrollable Containers</h3>
|
|
|
|
<div class="demo-variant-grid">
|
|
<div class="demo-variant-item">
|
|
<h4>Vertical Scroll</h4>
|
|
<ui-container size="sm" scrollable="y" customMaxHeight="200px" variant="card">
|
|
@for (item of getLongContent(); track $index) {
|
|
<p class="demo-paragraph">{{ item }}</p>
|
|
}
|
|
</ui-container>
|
|
</div>
|
|
|
|
<div class="demo-variant-item">
|
|
<h4>Horizontal Scroll</h4>
|
|
<ui-container size="sm" scrollable="x" variant="card">
|
|
<div class="demo-wide-content">
|
|
This is a very long line of content that will cause horizontal scrolling when it exceeds the container width. Keep reading to see the scroll behavior in action.
|
|
</div>
|
|
</ui-container>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Real World Example -->
|
|
<section class="demo-section">
|
|
<h3>Real World Example</h3>
|
|
<ui-container size="lg" variant="section" background="surface">
|
|
<ui-container size="md" variant="centered">
|
|
<h2>Product Features</h2>
|
|
<p>Discover what makes our product special</p>
|
|
|
|
<ui-container variant="grid" [gridColumns]="3" customMaxWidth="800px">
|
|
@for (feature of features; track feature.title) {
|
|
<ui-container variant="card" padding="md">
|
|
<h3>{{ feature.title }}</h3>
|
|
<p>{{ feature.description }}</p>
|
|
</ui-container>
|
|
}
|
|
</ui-container>
|
|
</ui-container>
|
|
</ui-container>
|
|
</section>
|
|
</div>
|
|
`,
|
|
styleUrl: './container-demo.component.scss'
|
|
})
|
|
export class ContainerDemoComponent {
|
|
sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full')[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'];
|
|
paddingSizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none')[] = ['xs', 'sm', 'md', 'lg', 'xl', 'none'];
|
|
backgrounds: ('transparent' | 'surface' | 'surface-secondary' | 'surface-elevated')[] = [
|
|
'transparent', 'surface', 'surface-secondary', 'surface-elevated'
|
|
];
|
|
|
|
features = [
|
|
{ title: 'Fast', description: 'Lightning-fast performance optimized for speed' },
|
|
{ title: 'Secure', description: 'Enterprise-grade security built from the ground up' },
|
|
{ title: 'Scalable', description: 'Grows with your business needs seamlessly' },
|
|
{ title: 'Reliable', description: '99.9% uptime guaranteed with redundant systems' },
|
|
{ title: 'Easy to Use', description: 'Intuitive interface designed for productivity' },
|
|
{ title: 'Supported', description: '24/7 customer support when you need it' }
|
|
];
|
|
|
|
getMaxWidth(size: string): string {
|
|
const sizes: Record<string, string> = {
|
|
'xs': '475px',
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
'2xl': '1536px',
|
|
'full': 'none'
|
|
};
|
|
return sizes[size] || 'auto';
|
|
}
|
|
|
|
getGridItems(count: number): string[] {
|
|
return Array.from({ length: count }, (_, i) => `Item ${i + 1}`);
|
|
}
|
|
|
|
getLongContent(): string[] {
|
|
return [
|
|
'This is paragraph 1 with some content to demonstrate vertical scrolling.',
|
|
'This is paragraph 2 with more content to show how the container handles overflow.',
|
|
'This is paragraph 3 continuing the demonstration of scrollable content.',
|
|
'This is paragraph 4 adding even more content to ensure scrolling is needed.',
|
|
'This is paragraph 5 with the final bit of content to complete the demo.',
|
|
'This is paragraph 6 making sure we have enough content for scroll.',
|
|
'This is paragraph 7 - almost done with our scrollable content demo.',
|
|
'This is paragraph 8 - the last paragraph in our scrollable demo.'
|
|
];
|
|
}
|
|
} |