diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js index 43d4a24493..a5699f4fb3 100644 --- a/build-tools/utils/pluralize.js +++ b/build-tools/utils/pluralize.js @@ -70,6 +70,7 @@ const pluralizationMap = { SegmentedControl: 'SegmentedControls', Select: 'Selects', SideNavigation: 'SideNavigations', + Skeleton: 'Skeletons', Slider: 'Sliders', SpaceBetween: 'SpaceBetweens', Spinner: 'Spinners', diff --git a/pages/skeleton/components-examples.page.tsx b/pages/skeleton/components-examples.page.tsx new file mode 100644 index 0000000000..4fe7c8ebd2 --- /dev/null +++ b/pages/skeleton/components-examples.page.tsx @@ -0,0 +1,325 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import Box from '~components/box'; +import Button from '~components/button'; +import Cards from '~components/cards'; +import Checkbox from '~components/checkbox'; +import ColumnLayout from '~components/column-layout'; +import Container from '~components/container'; +import Header from '~components/header'; +import KeyValuePairs from '~components/key-value-pairs'; +import Link from '~components/link'; +import List from '~components/list'; +import Skeleton from '~components/skeleton'; +import SpaceBetween from '~components/space-between'; + +interface DataItem { + id: string; + name: string; + description: string; + status: string; + date: string; +} + +const sampleData: DataItem[] = [ + { + id: 'item-1', + name: 'Production Database', + description: 'Primary production database instance with automated backups and high availability configuration', + status: 'Active', + date: '2026-04-15', + }, + { + id: 'item-2', + name: 'Development Environment', + description: 'Testing and development environment for new features', + status: 'Active', + date: '2026-04-14', + }, + { + id: 'item-3', + name: 'Analytics Pipeline', + description: 'Data processing pipeline for analytics and reporting', + status: 'Pending', + date: '2026-04-13', + }, + { + id: 'item-4', + name: 'Backup Server', + description: 'Secondary backup server for disaster recovery', + status: 'Active', + date: '2026-04-12', + }, +]; + +export default function SkeletonComponentsExamples() { + const [isLoading, setIsLoading] = useState(true); + + return ( + +
+ + +
+ Skeleton Component Examples +
+ setIsLoading(detail.checked)}> + Show loading state (Skeleton) + +
+
+
+ + {/* Cards Example */} + Cards with Skeleton}> + (isLoading ? : item.name), + sections: [ + { + id: 'description', + header: 'Description', + content: item => (isLoading ? : item.description), + }, + { + id: 'status', + header: 'Status', + content: item => (isLoading ? : item.status), + width: 50, + }, + { + id: 'date', + header: 'Date', + content: item => (isLoading ? : item.date), + width: 50, + }, + ], + }} + items={isLoading ? Array(4).fill({}) : sampleData} + cardsPerRow={[{ cards: 1 }, { minWidth: 768, cards: 2 }]} + /> + + + {/* Key-Value Pairs Example */} + Key-Value Pairs with Skeleton}> + , + }, + { + label: 'Name', + value: , + }, + { + label: 'Type', + value: , + }, + { + label: 'Created', + value: , + }, + ], + }, + { + type: 'group', + title: 'Configuration', + items: [ + { + label: 'Region', + value: , + }, + { + label: 'Availability Zone', + value: , + }, + { + label: 'Status', + value: , + }, + { + label: 'Endpoint', + value: , + }, + ], + }, + ] + : [ + { + type: 'group', + title: 'Resource Information', + items: [ + { + label: 'Resource ID', + value: 'res-abc123def456', + }, + { + label: 'Name', + value: 'Production Database', + }, + { + label: 'Type', + value: 'RDS Instance', + }, + { + label: 'Created', + value: 'April 15, 2026', + }, + ], + }, + { + type: 'group', + title: 'Configuration', + items: [ + { + label: 'Region', + value: 'us-east-1', + }, + { + label: 'Availability Zone', + value: 'us-east-1a', + }, + { + label: 'Status', + value: 'Available', + }, + { + label: 'Endpoint', + value: 'db.example.us-east-1.rds.amazonaws.com', + }, + ], + }, + ] + } + /> + + + {/* List Example */} + List with Skeleton}> + ({ id: `loading-${i + 1}` }) as DataItem) + : sampleData + } + renderItem={item => + isLoading + ? { + id: item.id, + content: , + secondaryContent: , + actions: , + } + : { + id: item.id, + content: {item.name}, + secondaryContent: {item.description}, + actions: ( + + {item.date} +