diff --git a/pages/app/index.tsx b/pages/app/index.tsx index 10dcf497e5..12bf01dabe 100644 --- a/pages/app/index.tsx +++ b/pages/app/index.tsx @@ -54,6 +54,7 @@ function isAppLayoutPage(pageId?: string) { 'error-boundary/demo-async-load', 'error-boundary/demo-components', 'feature-notifications', + 'theming/icon-scale-provider', ]; return pageId !== undefined && appLayoutPages.some(match => pageId.includes(match)); } diff --git a/pages/theming/icon-scale-provider.page.tsx b/pages/theming/icon-scale-provider.page.tsx new file mode 100644 index 0000000000..e9a2488760 --- /dev/null +++ b/pages/theming/icon-scale-provider.page.tsx @@ -0,0 +1,1015 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useLayoutEffect, useState } from 'react'; + +import { useCollection } from '@cloudscape-design/collection-hooks'; + +import { PromptInput } from '~components'; +import Alert from '~components/alert'; +import AppLayoutToolbar from '~components/app-layout-toolbar'; +import Badge from '~components/badge'; +import Box from '~components/box'; +import BreadcrumbGroup from '~components/breadcrumb-group'; +import Button from '~components/button'; +import ButtonDropdown from '~components/button-dropdown'; +import ButtonGroup from '~components/button-group'; +import ColumnLayout from '~components/column-layout'; +import Container from '~components/container'; +import CopyToClipboard from '~components/copy-to-clipboard'; +import DatePicker from '~components/date-picker'; +import Flashbar, { FlashbarProps } from '~components/flashbar'; +import Form from '~components/form'; +import FormField from '~components/form-field'; +import Header from '~components/header'; +import Icon from '~components/icon'; +import IconProvider from '~components/icon-provider'; +import Input, { InputProps } from '~components/input'; +import { NonCancelableCustomEvent } from '~components/internal/events'; +import Link from '~components/link'; +import Multiselect, { MultiselectProps } from '~components/multiselect'; +import PropertyFilter, { PropertyFilterProps } from '~components/property-filter'; +import SegmentedControl from '~components/segmented-control'; +import Select from '~components/select'; +import SideNavigation from '~components/side-navigation'; +import SpaceBetween from '~components/space-between'; +import SplitPanel from '~components/split-panel'; +import StatusIndicator from '~components/status-indicator'; +import Table from '~components/table'; +import Tabs from '~components/tabs'; +import TextContent from '~components/text-content'; +import TextFilter from '~components/text-filter'; +import { applyTheme, Theme } from '~components/theming'; +import Tiles from '~components/tiles'; +import Toggle from '~components/toggle'; +import ToggleButton from '~components/toggle-button'; + +const createNumericHandler = (setter: (value: string) => void, min?: number, max?: number) => { + return (evt: NonCancelableCustomEvent) => { + const val = evt.detail.value; + if (val === '') { + setter(val); + return; + } + const numValue = parseFloat(val); + if (!isNaN(numValue)) { + if (min !== undefined && numValue < min) { + return; + } + if (max !== undefined && numValue > max) { + return; + } + setter(val); + } + }; +}; + +// ─── Typography ─────────────────────────────────────────────────────────────── +function Typography() { + return ( + Typography & Iconography}> + + {/* +

+ Heading 1 +

+

+ Heading 2 +

+

+ Heading 3 +

+

+ Heading 4 +

+
+ Heading 5 +
+

+ Paragraph +

+ + Small + + */} + +

+ Heading 1 +

+

+ Heading 2 +

+

+ Heading 3 +

+

+ Heading 4 +

+
+ Heading 5 +
+

+ Paragraph +

+ + Small + + + + + Paragraph –{' '} + + Amazon EC2 + {' '} + provides each instance with a consistent and predictable amount of CPU capacity, regardless of its{' '} + + underlying hardware + + . + + + Paragraph –{' '} + + Amazon EC2 + {' '} + provides each instance with a consistent and predictable amount of CPU capacity, regardless of its{' '} + + underlying hardware + + . + + + Icons – Normal size + + + + + + + + + + + + + + + + + + + + + + ); +} + +// ─── Buttons, Inputs, Dropdowns ─────────────────────────────────────────────── +function ButtonsInputsDropdowns() { + const [selectedSegment, setSelectedSegment] = useState('seg-1'); + const [toggle1, setToggle1] = useState(true); + const [toggle2, setToggle2] = useState(false); + const [dateValue, setDateValue] = useState('2024-01-15'); + const [filteringText, setFilteringText] = useState('instance'); + const multiSelectOptions: MultiselectProps.Options = [ + { + label: 'Option 1', + value: '1', + description: 'This is a description', + }, + { + label: 'Option 2', + value: '2', + iconName: 'unlocked', + labelTag: 'This is a label tag', + }, + { + label: 'Option 3 (disabled)', + value: '3', + iconName: 'share', + tags: ['Tags go here', 'Tag1', 'Tag2'], + }, + { + label: 'Option 4', + value: '4', + filteringTags: ['filtering', 'tags', 'these are filtering tags'], + }, + { label: 'Option 5', value: '5' }, + ]; + const [selectedItems, setSelectedItems] = useState([ + multiSelectOptions[1], + multiSelectOptions[3], + ]); + + const [query, setQuery] = React.useState({ + tokens: [ + { propertyKey: 'state', operator: '=', value: 'Running' }, + { propertyKey: 'instancetype', operator: '=', value: 't3.small' }, + ], + operation: 'and', + }); + const [value, setValue] = React.useState(''); + + return ( + Buttons, inputs, and dropdowns}> + + + + + + + Actions + + + +