Skip to content

chore: split prompt-input permutations page into separate files #4552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
amanabiy wants to merge 1 commit into
base: main
Choose a base branch
from
+248 −178
Draft

chore: split prompt-input permutations page into separate files #4552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 0 additions & 178 deletions pages/prompt-input/permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0
import React from 'react';

import { Button, FileTokenGroup } from '~components';
import PromptInput, { PromptInputProps } from '~components/prompt-input';

import img from '../icon/custom-icon.png';
Expand Down Expand Up @@ -59,183 +58,6 @@ const permutations = createPermutations<PromptInputProps>([
actionButtonIconUrl: [img],
actionButtonIconAlt: ['Letter A'],
},
{
value: ['Short value 5'],
actionButtonIconName: [undefined, 'send'],
secondaryActions: [undefined, 'secondary actions 1'],
secondaryContent: [undefined, 'secondary content 1'],
invalid: [false, true],
},
{
value: ['Short value 6'],
actionButtonIconName: ['send'],
secondaryActions: ['secondary actions 2'],
secondaryContent: ['secondary content 2'],
disableSecondaryActionsPaddings: [false, true],
disableSecondaryContentPaddings: [false, true],
},
{
value: ['Short value for custom primary actions'],
actionButtonIconName: [undefined, 'send'],
customPrimaryAction: [
undefined,
<Button variant="icon" iconName="add-plus" ariaLabel="Custom action" key="button" />,
],
secondaryActions: [undefined, 'secondary actions'],
disableSecondaryActionsPaddings: [false, true],
},
{
value: ['Short value for secondary action responsiveness'],
actionButtonIconName: [undefined, 'send'],
secondaryActions: [
'short',
'longer but breakable secondary action content',
'longerbutunbreakablesecondaryactioncontent',
<FileTokenGroup
key="file-token"
items={[
{
file: new File([new Blob(['Test content'])], 'test-for-venue-use-case.pdf', {
type: 'application/pdf',
lastModified: 1590962400000,
}),
},
]}
onDismiss={() => {}}
showFileSize={true}
showFileLastModified={true}
showFileThumbnail={true}
i18nStrings={{
removeFileAriaLabel: () => 'Remove file',
limitShowFewer: 'Show fewer files',
limitShowMore: 'Show more files',
errorIconAriaLabel: 'Error',
warningIconAriaLabel: 'Warning',
}}
/>,
],
},
// Token mode: Basic text and references
{
tokens: [
[{ type: 'text', value: 'Simple text' }],
[
{ type: 'text', value: 'Text with ' },
{ type: 'reference', id: 'ref-1', label: 'Reference', value: 'ref1', menuId: 'mentions' },
],
[
{ type: 'reference', id: 'ref-1', label: 'Ref1', value: 'ref1', menuId: 'mentions' },
{ type: 'text', value: ' ' },
{ type: 'reference', id: 'ref-2', label: 'Ref2', value: 'ref2', menuId: 'mentions' },
],
],
},
// Token mode: Multiline content
{
tokens: [
[
{ type: 'text', value: 'Line 1' },
{ type: 'break', value: '\n' },
{ type: 'text', value: 'Line 2' },
],
[
{ type: 'text', value: 'A' },
{ type: 'break', value: '\n' },
{ type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
{ type: 'break', value: '\n' },
{ type: 'text', value: 'B' },
],
],
},
// Token mode: Triggers (menus required for trigger rendering)
{
tokens: [
[{ type: 'trigger', triggerChar: '@', value: '', id: 'trig-1' }],
[{ type: 'trigger', triggerChar: '@', value: 'user', id: 'trig-1' }],
[
{ type: 'text', value: 'Text ' },
{ type: 'trigger', triggerChar: '@', value: 'User', id: 'trig-1' },
],
],
menus: [
[
{
id: 'mentions',
trigger: '@',
options: [
{ value: 'user1', label: 'User 1' },
{ value: 'user2', label: 'User 2' },
],
},
],
],
},
// Token mode: Pinned references
{
tokens: [
[
{ type: 'reference', id: 'pin-1', label: 'Pinned', value: 'pin1', menuId: 'mentions', pinned: true },
{ type: 'text', value: 'Content' },
],
[
{ type: 'reference', id: 'pin-1', label: 'Pin1', value: 'pin1', menuId: 'mentions', pinned: true },
{ type: 'reference', id: 'pin-2', label: 'Pin2', value: 'pin2', menuId: 'mentions', pinned: true },
{ type: 'text', value: 'Text' },
],
],
},
// Token mode: Complex mixed (menus required for trigger)
{
tokens: [
[
{ type: 'reference', id: 'pin-1', label: 'P1', value: 'p1', menuId: 'mentions', pinned: true },
{ type: 'text', value: 'Start ' },
{ type: 'trigger', triggerChar: '@', value: 'trig', id: 'trig-1' },
{ type: 'text', value: ' ' },
{ type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
{ type: 'break', value: '\n' },
{ type: 'text', value: 'Line 2' },
],
],
menus: [
[
{
id: 'mentions',
trigger: '@',
options: [
{ value: 'user1', label: 'User 1' },
{ value: 'user2', label: 'User 2' },
],
},
],
],
},
// Token mode: State variations
{
tokens: [
[
{ type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
{ type: 'text', value: 'Tell me about ' },
{ type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
],
],
disabled: [false, true],
readOnly: [false, true],
invalid: [false, true],
},
// Token mode: Warning state
{
tokens: [
[
{ type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
{ type: 'text', value: 'Tell me about ' },
{ type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
],
],
disabled: [false, true],
readOnly: [false, true],
warning: [true],
},
]);

export default function PromptInputPermutations() {
Expand Down
92 changes: 92 additions & 0 deletions pages/prompt-input/secondary-content-permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';

import { Button, FileTokenGroup } from '~components';
import PromptInput, { PromptInputProps } from '~components/prompt-input';

import createPermutations from '../utils/permutations';
import PermutationsView from '../utils/permutations-view';
import ScreenshotArea from '../utils/screenshot-area';

const permutations = createPermutations<PromptInputProps>([
{
value: ['Short value 5'],
actionButtonIconName: [undefined, 'send'],
secondaryActions: [undefined, 'secondary actions 1'],
secondaryContent: [undefined, 'secondary content 1'],
invalid: [false, true],
},
{
value: ['Short value 6'],
actionButtonIconName: ['send'],
secondaryActions: ['secondary actions 2'],
secondaryContent: ['secondary content 2'],
disableSecondaryActionsPaddings: [false, true],
disableSecondaryContentPaddings: [false, true],
},
{
value: ['Short value for custom primary actions'],
actionButtonIconName: [undefined, 'send'],
customPrimaryAction: [
undefined,
<Button variant="icon" iconName="add-plus" ariaLabel="Custom action" key="button" />,
],
secondaryActions: [undefined, 'secondary actions'],
disableSecondaryActionsPaddings: [false, true],
},
{
value: ['Short value for secondary action responsiveness'],
actionButtonIconName: [undefined, 'send'],
secondaryActions: [
'short',
'longer but breakable secondary action content',
'longerbutunbreakablesecondaryactioncontent',
<FileTokenGroup
key="file-token"
items={[
{
file: new File([new Blob(['Test content'])], 'test-for-venue-use-case.pdf', {
type: 'application/pdf',
lastModified: 1590962400000,
}),
},
]}
onDismiss={() => {}}
showFileSize={true}
showFileLastModified={true}
showFileThumbnail={true}
i18nStrings={{
removeFileAriaLabel: () => 'Remove file',
limitShowFewer: 'Show fewer files',
limitShowMore: 'Show more files',
errorIconAriaLabel: 'Error',
warningIconAriaLabel: 'Warning',
}}
/>,
],
},
]);

export default function SecondaryContentPermutations() {
return (
<>
<h1>PromptInput secondary content permutations</h1>
<ScreenshotArea>
<PermutationsView
permutations={permutations}
render={(permutation, index) => (
<PromptInput
ariaLabel={`Prompt input secondary content test ${index}`}
actionButtonAriaLabel="Action button aria label"
onChange={() => {
/*empty handler to suppress react controlled property warning*/
}}
{...permutation}
/>
)}
/>
</ScreenshotArea>
</>
);
}
Loading
Loading