-
Notifications
You must be signed in to change notification settings - Fork 163
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Francesco Longo
committed
Sep 2, 2024
1 parent
68647dc
commit 93a32ff
Showing
17 changed files
with
525 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import React from 'react'; | ||
|
|
||
| import Box from '~components/box'; | ||
| import BreadcrumbGroup from '~components/breadcrumb-group'; | ||
| import SpaceBetween from '~components/space-between'; | ||
|
|
||
| export default function ResponsiveBreadcrumbsPage() { | ||
| return ( | ||
| <article> | ||
| <Box padding="xl"> | ||
| <SpaceBetween size="xxl"> | ||
| <h1>Responsive breadcrumbs</h1> | ||
| <ResponsiveBreadcrumbs | ||
| widths={[900, 800, 700, 600, 500, 400, 300, 200]} | ||
| items={[ | ||
| 'A', | ||
| 'Longer breadrcumb', | ||
| 'ABC', | ||
| 'Another even longer breadcrumb', | ||
| 'ABCDEF', | ||
| 'ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd', | ||
| ]} | ||
| /> | ||
| <ResponsiveBreadcrumbs widths={[150]} items={['Small', 'Small', 'Small', 'Small', 'Small']} /> | ||
| <ResponsiveBreadcrumbs | ||
| widths={[150]} | ||
| items={['Large breadcrumb', 'Large breadcrumb', 'Large breadcrumb', 'Large breadcrumb', 'Large breadcrumb']} | ||
| /> | ||
| <ResponsiveBreadcrumbs widths={[100]} items={['Small', 'Small']} /> | ||
| <ResponsiveBreadcrumbs widths={[100]} items={['Large breadcrumb', 'Large breadcrumb']} /> | ||
| <ResponsiveBreadcrumbs widths={[100]} items={['Large breadcrumb', 'Small']} /> | ||
| <ResponsiveBreadcrumbs widths={[30]} items={['Small']} /> | ||
| <ResponsiveBreadcrumbs widths={[30]} items={['Large breadcrumb']} /> | ||
| </SpaceBetween> | ||
| </Box> | ||
| </article> | ||
| ); | ||
| } | ||
|
|
||
| interface ResponsiveBreadcrumbsProps { | ||
| items: Array<string>; | ||
| widths: Array<number>; | ||
| } | ||
|
|
||
| const ResponsiveBreadcrumbs = ({ items, widths }: ResponsiveBreadcrumbsProps) => { | ||
| const breadcrumbs = items.map(text => ({ text, href: `#` })); | ||
| return ( | ||
| <SpaceBetween size="xxl"> | ||
| {widths.map((width, key) => ( | ||
| <div key={key} style={{ width, borderInlineEnd: '2px solid blue' }}> | ||
| <BreadcrumbGroup | ||
| key={key} | ||
| ariaLabel="Navigation long text" | ||
| expandAriaLabel="Show path for long text" | ||
| items={breadcrumbs} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </SpaceBetween> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { Button, FormField, SpaceBetween, Textarea } from '~components'; | ||
| import BreadcrumbGroup from '~components/breadcrumb-group'; | ||
| import Input from '~components/input'; | ||
|
|
||
| export default function ResponsiveBreadcrumbsPage() { | ||
| const [itemsLists, setItemsLists] = useState([ | ||
| ['A', 'AB', 'ABC', 'ABCD', 'ABCDEF', 'ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd'], | ||
| ['EC2', 'Instances', 'i-03abdc1839101a53f'], | ||
| [ | ||
| 'Amazon S3', | ||
| 'Buckets', | ||
| '164981592106-us-east-1-athena-results-bucket-n8qxkwo99y', | ||
| '5d04ca725b8547220d019af4d3g0ae11', | ||
| ], | ||
| ]); | ||
| const [minBreadcrumbWidth, setMinBreadcrumbWidth] = useState<string | undefined>('120'); | ||
| const [newBreadcrumb, setNewBreadcrumb] = useState<string>('["A", "AB", "ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd"]'); | ||
| return ( | ||
| <article> | ||
| <SpaceBetween size="xxl"> | ||
| <h1>Responsive breadcrumbs</h1> | ||
| <FormField label="Enter minimum width"> | ||
| <Input | ||
| type="number" | ||
| value={minBreadcrumbWidth || ''} | ||
| onChange={evt => { | ||
| setMinBreadcrumbWidth(evt.detail.value || undefined); | ||
| }} | ||
| /> | ||
| </FormField> | ||
| <FormField | ||
| label="Add breadcrumb" | ||
| secondaryControl={ | ||
| <Button onClick={() => setItemsLists([...itemsLists, JSON.parse(newBreadcrumb)])}>Add</Button> | ||
| } | ||
| > | ||
| <Textarea | ||
| value={newBreadcrumb} | ||
| onChange={evt => { | ||
| setNewBreadcrumb(evt.detail.value); | ||
| }} | ||
| /> | ||
| </FormField> | ||
| <hr /> | ||
| {itemsLists.map((items, key) => ( | ||
| <BreadcrumbGroup | ||
| key={key} | ||
| ariaLabel="Navigation long text" | ||
| expandAriaLabel="Show path for long text" | ||
| items={items.map(text => ({ text, href: `#` }))} | ||
| /> | ||
| ))} | ||
| </SpaceBetween> | ||
| </article> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.