diff --git a/pages/common/heroshot.tsx b/pages/common/heroshot.tsx new file mode 100644 index 0000000000..97c0e1c37e --- /dev/null +++ b/pages/common/heroshot.tsx @@ -0,0 +1,102 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { + colorBackgroundLayoutMain, + colorBorderDividerDefault, + colorTextBodySecondary, + fontSizeBodyS, +} from '~design-tokens'; + +// Thumbnail size used by the components overview pages of the documentation website. +export const HEROSHOT_WIDTH = 346; +export const HEROSHOT_HEIGHT = 170; + +interface HeroshotProps { + /** Caption rendered above the frame, outside of the captured area. */ + label?: string; + /** + * Vertical placement of the content inside the frame. Content is centered by default; use `start` + * only when it is taller than the frame, so the crop keeps the top instead of cutting both ends. + */ + align?: 'center' | 'start'; + /** Inset between the frame edges and the content. Set to 0 for compositions that bleed to the edges. */ + padding?: number; + /** Stretches the content to the full frame width. Use for block components such as alert or container. */ + stretch?: boolean; + /** + * Lays the content out at this pixel size and scales it down to fit the frame. Use for page-level + * layouts (app layout, wizard) that only read as themselves at a full viewport width. Pick a size + * with the same 346:170 aspect ratio to avoid letterboxing. + */ + contentSize?: { width: number; height: number }; + children: React.ReactNode; +} + +/** + * Renders its children inside a frame that matches the documentation website thumbnail size exactly. + * The dashed guide is drawn with an outline so it sits outside of the 346x170 box and is not captured + * when the frame is cropped to its bounding box. + * + * Animations are stopped by the `disableAnimations` screenshot area the page renders, so the frames + * capture the same pixels every time. + */ +export function Heroshot({ + label, + align = 'center', + padding = 16, + stretch = false, + contentSize, + children, +}: HeroshotProps) { + // Scaled content is laid out at its own size and shrunk to fit, so it ignores the flex alignment below. + const scaled = contentSize ? ( +
+
+ {children} +
+
+ ) : null; + + return ( +
+ {label ? ( +
{label}
+ ) : null} +
+ {scaled ?? children} +
+
+ ); +} diff --git a/pages/heroshot/overview.page.tsx b/pages/heroshot/overview.page.tsx new file mode 100644 index 0000000000..c482c4bfe9 --- /dev/null +++ b/pages/heroshot/overview.page.tsx @@ -0,0 +1,953 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { + ActionCard, + Alert, + AnchorNavigation, + AppLayout, + AppLayoutToolbar, + AreaChart, + AttributeEditor, + Autosuggest, + Badge, + BarChart, + Box, + BreadcrumbGroup, + Button, + ButtonDropdown, + ButtonGroup, + Calendar, + Cards, + Checkbox, + ColumnLayout, + Container, + ContentLayout, + CopyToClipboard, + DateInput, + DatePicker, + DateRangePicker, + Dialog, + Divider, + ExpandableSection, + FileDropzone, + FileInput, + FileTokenGroup, + FileUpload, + Flashbar, + Form, + FormField, + Grid, + Header, + HelpPanel, + Icon, + Input, + ItemCard, + KeyValuePairs, + LineChart, + Link, + List, + MixedLineBarChart, + Multiselect, + Pagination, + PieChart, + ProgressBar, + PromptInput, + PropertyFilter, + RadioButton, + RadioGroup, + SegmentedControl, + Select, + SideNavigation, + Skeleton, + Slider, + SpaceBetween, + Spinner, + StatusIndicator, + Steps, + Table, + Tabs, + TagEditor, + Textarea, + TextContent, + TextFilter, + Tiles, + TimeInput, + Toggle, + ToggleButton, + Token, + TokenGroup, + TopNavigation, + TreeView, +} from '~components'; +import Dropdown from '~components/dropdown/internal'; +import Option from '~components/internal/components/option'; +import OptionsList from '~components/internal/components/options-list'; +import SelectableItem from '~components/internal/components/selectable-item'; + +import { SimplePage } from '../app/templates'; +import { Heroshot } from '../common/heroshot'; +import { IframeWrapper } from '../utils/iframe-wrapper'; + +export default function HeroshotOverviewPage() { + return ( + + {/* The frames have a fixed size, so the gallery wraps them instead of stacking 70+ rows. */} +
+ + } + href="#" + /> + + + + + The change applies after the next restart. Learn more + + + + + + + + + + + + + + + + + + + + + }, + { label: 'Value', control: item => }, + ]} + /> + + + + + + + + + Default + Blue + Green + Red + + + + + + + + + + Instance details + + Review the configuration before you launch the instance. + + + + + + + + + + + + + + + + + + Actions + + + + + + + + + + + + + item.id }} + cardDefinition={{ + header: item => item.id, + sections: [{ id: 'type', header: 'Type', content: item => item.type }], + }} + /> + + + + + + Enable monitoring + + + Enable termination protection + + + + + + + + Instance type +
t3.medium
+ + + Region +
us-east-1
+ + + + + + Instance details}> + + + + + + Instances}> + Content + + + + + + + + + + + + + + + + + + + + + + ({ valid: true })} + onChange={noop} + /> + + + + + + + + + } + > + This action cannot be undone. + + + + + + Instance settings + + Network settings + + + + + + + + + + + Drop files to upload + + + + + Choose file + + + + + `Remove file ${index + 1}` }} + /> + + + + + + + + + + + + + +
Create instance} + actions={ + + + + + } + > + + + + + +
+ + + + + + + + + + + Main + Side + + + + +
Launch instance} + > + Instances +
+ + + + Instances}> +

An instance is a virtual server in the cloud.

+ + + + + + + + + + + + + + + + + + Compare types} + /> + + + + Running }, + { label: 'Launched', value: 'Oct 6, 2026' }, + ]} + /> + + + + + + + + + Secondary link + + Primary link + + + External link + + + + + + ({ id: item.id, content: item.id, secondaryContent: item.type })} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +