diff --git a/pages/expandable-section/header-secondary-content.page.tsx b/pages/expandable-section/header-secondary-content.page.tsx new file mode 100644 index 00000000000..787c286181d --- /dev/null +++ b/pages/expandable-section/header-secondary-content.page.tsx @@ -0,0 +1,234 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import Badge from '~components/badge'; +import Box from '~components/box'; +import Button from '~components/button'; +import ButtonGroup from '~components/button-group'; +import ExpandableSection from '~components/expandable-section'; +import Input from '~components/input'; +import Link from '~components/link'; +import Popover from '~components/popover'; +import Select, { SelectProps } from '~components/select'; +import SpaceBetween from '~components/space-between'; + +import { SimplePage } from '../app/templates'; + +const languageOptions: SelectProps.Options = [ + { label: 'SQL', value: 'sql' }, + { label: 'PPL', value: 'ppl' }, + { label: 'Logstash', value: 'logstash' }, +]; + +function StandardExample() { + return ( + + Content + + ); +} + +function CreateQueryExample() { + const [expanded, setExpanded] = useState(true); + const [language, setLanguage] = useState(languageOptions[0]); + return ( + setExpanded(detail.expanded)} + headerSecondaryContent={ + setLanguage(detail.selectedOption)} + options={languageOptions} + ariaLabel="Query language" + /> + + } + > + Configuration for {sectionName}. + + ); +} + +function HiddenHeaderTextSearchExample() { + const [value, setValue] = useState(''); + return ( + setValue(detail.value)} + placeholder="Search results" + ariaLabel="Search results" + /> + } + > + Results matching “{value || 'your query'}”. + + ); +} + +function AllHeaderSlotsExample() { + const [language, setLanguage] = useState(languageOptions[0]); + return ( + Info} + headerDescription="Saved queries for the production log group." + headerSecondaryContent={ +