-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): set toolbar components to a fixed width #389
- Loading branch information
1 parent
1286031
commit c7b1b3b
Showing
30 changed files
with
352 additions
and
48 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
115 changes: 115 additions & 0 deletions
115
components/src/preact/components/mutation-type-selector.stories.tsx
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,115 @@ | ||
import { type Meta, type StoryObj } from '@storybook/preact'; | ||
import { expect, within } from '@storybook/test'; | ||
import { type FunctionComponent } from 'preact'; | ||
import { useState } from 'preact/hooks'; | ||
|
||
import { | ||
type DisplayedMutationType, | ||
MutationTypeSelector, | ||
type MutationTypeSelectorProps, | ||
} from './mutation-type-selector'; | ||
|
||
const meta: Meta<MutationTypeSelectorProps> = { | ||
title: 'Component/Mutation type selector', | ||
component: MutationTypeSelector, | ||
parameters: { fetchMock: {} }, | ||
}; | ||
|
||
export default meta; | ||
|
||
const WrapperWithState: FunctionComponent<{ | ||
displayedMutationTypes: DisplayedMutationType[]; | ||
}> = ({ displayedMutationTypes: initialMutationTypes }) => { | ||
const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>(initialMutationTypes); | ||
|
||
return ( | ||
<MutationTypeSelector | ||
displayedMutationTypes={displayedMutationTypes} | ||
setDisplayedMutationTypes={(mutationTypes: DisplayedMutationType[]) => { | ||
setDisplayedMutationTypes(mutationTypes); | ||
}} | ||
/> | ||
); | ||
}; | ||
|
||
const MutationTypeSelectorStory: StoryObj<MutationTypeSelectorProps> = { | ||
render: (args) => { | ||
return <WrapperWithState {...args} />; | ||
}, | ||
}; | ||
|
||
export const AllMutationTypesSelected: StoryObj<MutationTypeSelectorProps> = { | ||
...MutationTypeSelectorStory, | ||
args: { | ||
displayedMutationTypes: [ | ||
{ | ||
label: 'Substitution', | ||
type: 'substitution', | ||
checked: true, | ||
}, | ||
{ | ||
label: 'Deletion', | ||
type: 'deletion', | ||
checked: true, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step('Show short form of types as label', async () => { | ||
await expect(canvas.getByText('Subst., Del.')).toBeInTheDocument(); | ||
}); | ||
}, | ||
}; | ||
|
||
export const NoMutationTypesSelected: StoryObj<MutationTypeSelectorProps> = { | ||
...MutationTypeSelectorStory, | ||
args: { | ||
displayedMutationTypes: [ | ||
{ | ||
label: 'Substitution', | ||
type: 'substitution', | ||
checked: false, | ||
}, | ||
{ | ||
label: 'Deletion', | ||
type: 'deletion', | ||
checked: false, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step("Show 'No types' as label", async () => { | ||
await expect(canvas.getByText('No types')).toBeInTheDocument(); | ||
}); | ||
}, | ||
}; | ||
|
||
export const OneTypesSelected: StoryObj<MutationTypeSelectorProps> = { | ||
...MutationTypeSelectorStory, | ||
args: { | ||
displayedMutationTypes: [ | ||
{ | ||
label: 'Substitution', | ||
type: 'substitution', | ||
checked: true, | ||
}, | ||
{ | ||
label: 'Deletion', | ||
type: 'deletion', | ||
checked: false, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step('Show the selected type as label', async () => { | ||
const substitutionElements = await canvas.getAllByText('Substitution'); | ||
await expect(substitutionElements.length).toBe(2); | ||
}); | ||
}, | ||
}; |
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
151 changes: 151 additions & 0 deletions
151
components/src/preact/components/segment-selector.stories.tsx
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,151 @@ | ||
import { type Meta, type StoryObj } from '@storybook/preact'; | ||
import { expect, within } from '@storybook/test'; | ||
import { type FunctionComponent } from 'preact'; | ||
import { useState } from 'preact/hooks'; | ||
|
||
import { type DisplayedSegment, SegmentSelector, type SegmentSelectorProps } from './segment-selector'; | ||
|
||
const meta: Meta<SegmentSelectorProps> = { | ||
title: 'Component/Segment selector', | ||
component: SegmentSelector, | ||
parameters: { fetchMock: {} }, | ||
}; | ||
|
||
export default meta; | ||
|
||
const WrapperWithState: FunctionComponent<{ | ||
displayedSegments: DisplayedSegment[]; | ||
}> = ({ displayedSegments: initialDisplayedSegments }) => { | ||
const [displayedSegments, setDisplayedSegments] = useState<DisplayedSegment[]>(initialDisplayedSegments); | ||
|
||
return ( | ||
<SegmentSelector | ||
displayedSegments={displayedSegments} | ||
setDisplayedSegments={(items: DisplayedSegment[]) => { | ||
setDisplayedSegments(items); | ||
}} | ||
/> | ||
); | ||
}; | ||
|
||
export const AllSegmentsSelected: StoryObj<SegmentSelectorProps> = { | ||
render: (args) => { | ||
return <WrapperWithState {...args} />; | ||
}, | ||
args: { | ||
displayedSegments: [ | ||
{ | ||
segment: 'ORF1a', | ||
label: 'ORF1a', | ||
checked: true, | ||
}, | ||
{ | ||
segment: 'S', | ||
label: 'S', | ||
checked: true, | ||
}, | ||
{ | ||
segment: 'VeryLongSegmentName', | ||
label: 'VeryLongSegmentName', | ||
checked: true, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step("Show 'All segments' as label", async () => { | ||
await expect(canvas.getByText('All segments')).toBeInTheDocument(); | ||
}); | ||
}, | ||
}; | ||
|
||
export const NoSegmentsSelected: StoryObj<SegmentSelectorProps> = { | ||
...AllSegmentsSelected, | ||
args: { | ||
displayedSegments: [ | ||
{ | ||
segment: 'ORF1a', | ||
label: 'ORF1a', | ||
checked: false, | ||
}, | ||
{ | ||
segment: 'S', | ||
label: 'S', | ||
checked: false, | ||
}, | ||
{ | ||
segment: 'VeryLongSegmentName', | ||
label: 'VeryLongSegmentName', | ||
checked: false, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step("Show 'No segments' as label", async () => { | ||
await expect(canvas.getByText('No segments')).toBeInTheDocument(); | ||
}); | ||
}, | ||
}; | ||
|
||
export const LongSegmentsSelected: StoryObj<SegmentSelectorProps> = { | ||
...AllSegmentsSelected, | ||
args: { | ||
displayedSegments: [ | ||
{ | ||
segment: 'ORF1a', | ||
label: 'ORF1a', | ||
checked: true, | ||
}, | ||
{ | ||
segment: 'S', | ||
label: 'S', | ||
checked: false, | ||
}, | ||
{ | ||
segment: 'VeryLongSegmentName', | ||
label: 'VeryLongSegmentName', | ||
checked: true, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step('Show number of active segments as label', async () => { | ||
await expect(canvas.getByText('2 segments')).toBeInTheDocument(); | ||
}); | ||
}, | ||
}; | ||
|
||
export const ShortSegmentsSelected: StoryObj<SegmentSelectorProps> = { | ||
...AllSegmentsSelected, | ||
args: { | ||
displayedSegments: [ | ||
{ | ||
segment: 'ORF1a', | ||
label: 'ORF1a', | ||
checked: true, | ||
}, | ||
{ | ||
segment: 'S', | ||
label: 'S', | ||
checked: true, | ||
}, | ||
{ | ||
segment: 'VeryLongSegmentName', | ||
label: 'VeryLongSegmentName', | ||
checked: false, | ||
}, | ||
], | ||
}, | ||
play: async ({ canvasElement, step }) => { | ||
const canvas = within(canvasElement); | ||
|
||
await step('Show active segments as label', async () => { | ||
await expect(canvas.getByText('ORF1a, S')).toBeInTheDocument(); | ||
}); | ||
}, | ||
}; |
Oops, something went wrong.