Fix stories again
This commit is contained in:
@ -161,12 +161,15 @@ export const Disabled: Story = {
|
|||||||
play: async ({ canvasElement, args }) => {
|
play: async ({ canvasElement, args }) => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
|
const editor = await waitFor(() => {
|
||||||
|
const editor = canvasElement.querySelector('.ProseMirror > p');
|
||||||
|
expect(editor).toBeVisible();
|
||||||
|
return editor;
|
||||||
|
});
|
||||||
|
|
||||||
const variablePicker = canvas.queryByText('VariablePicker');
|
const variablePicker = canvas.queryByText('VariablePicker');
|
||||||
expect(variablePicker).not.toBeInTheDocument();
|
expect(variablePicker).not.toBeInTheDocument();
|
||||||
|
|
||||||
const editor = canvasElement.querySelector('.ProseMirror > p');
|
|
||||||
expect(editor).toBeVisible();
|
|
||||||
|
|
||||||
const defaultValue = await canvas.findByText('Text field');
|
const defaultValue = await canvas.findByText('Text field');
|
||||||
expect(defaultValue).toBeVisible();
|
expect(defaultValue).toBeVisible();
|
||||||
|
|
||||||
@ -224,8 +227,11 @@ export const HasHistory: Story = {
|
|||||||
|
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
const editor = canvasElement.querySelector('.ProseMirror > p');
|
const editor = await waitFor(() => {
|
||||||
expect(editor).toBeVisible();
|
const editor = canvasElement.querySelector('.ProseMirror > p');
|
||||||
|
expect(editor).toBeVisible();
|
||||||
|
return editor;
|
||||||
|
});
|
||||||
|
|
||||||
const addVariableButton = await canvas.findByRole('button', {
|
const addVariableButton = await canvas.findByRole('button', {
|
||||||
name: 'Add variable',
|
name: 'Add variable',
|
||||||
|
|||||||
@ -44,7 +44,6 @@ const StyledUnShrinkableContainer = styled.div`
|
|||||||
|
|
||||||
export type ExpandableListProps = {
|
export type ExpandableListProps = {
|
||||||
isChipCountDisplayed?: boolean;
|
isChipCountDisplayed?: boolean;
|
||||||
withExpandedListBorder?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ChildrenProperty = {
|
export type ChildrenProperty = {
|
||||||
@ -55,7 +54,6 @@ export type ChildrenProperty = {
|
|||||||
export const ExpandableList = ({
|
export const ExpandableList = ({
|
||||||
children,
|
children,
|
||||||
isChipCountDisplayed: isChipCountDisplayedFromProps,
|
isChipCountDisplayed: isChipCountDisplayedFromProps,
|
||||||
withExpandedListBorder = false,
|
|
||||||
}: {
|
}: {
|
||||||
children: ReactElement[];
|
children: ReactElement[];
|
||||||
} & ExpandableListProps) => {
|
} & ExpandableListProps) => {
|
||||||
@ -166,7 +164,6 @@ export const ExpandableList = ({
|
|||||||
<ExpandedListDropdown
|
<ExpandedListDropdown
|
||||||
anchorElement={containerRef.current ?? undefined}
|
anchorElement={containerRef.current ?? undefined}
|
||||||
onClickOutside={handleClickOutside}
|
onClickOutside={handleClickOutside}
|
||||||
withBorder={withExpandedListBorder}
|
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</ExpandedListDropdown>
|
</ExpandedListDropdown>
|
||||||
|
|||||||
@ -1,33 +1,23 @@
|
|||||||
import { css } from '@emotion/react';
|
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
|
import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
|
|
||||||
import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/DropdownContent';
|
import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/DropdownContent';
|
||||||
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
|
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
|
||||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
|
||||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||||
|
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||||
|
|
||||||
type ExpandedListDropdownProps = {
|
type ExpandedListDropdownProps = {
|
||||||
anchorElement?: HTMLElement;
|
anchorElement?: HTMLElement;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
onClickOutside?: () => void;
|
onClickOutside?: () => void;
|
||||||
withBorder?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const StyledExpandedListContainer = styled.div<{
|
const StyledExpandedListContainer = styled.div`
|
||||||
withBorder?: boolean;
|
|
||||||
}>`
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: ${({ theme }) => theme.spacing(1)};
|
gap: ${({ theme }) => theme.spacing(1)};
|
||||||
padding: ${({ theme }) => theme.spacing(2)};
|
padding: ${({ theme }) => theme.spacing(2)};
|
||||||
|
|
||||||
${({ theme, withBorder }) =>
|
|
||||||
withBorder &&
|
|
||||||
css`
|
|
||||||
outline: 1px solid ${theme.font.color.extraLight};
|
|
||||||
`};
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// TODO: unify this and use Dropdown component instead
|
// TODO: unify this and use Dropdown component instead
|
||||||
@ -35,7 +25,6 @@ export const ExpandedListDropdown = ({
|
|||||||
anchorElement,
|
anchorElement,
|
||||||
children,
|
children,
|
||||||
onClickOutside,
|
onClickOutside,
|
||||||
withBorder,
|
|
||||||
}: ExpandedListDropdownProps) => {
|
}: ExpandedListDropdownProps) => {
|
||||||
const { refs, floatingStyles } = useFloating({
|
const { refs, floatingStyles } = useFloating({
|
||||||
placement: 'bottom-start',
|
placement: 'bottom-start',
|
||||||
@ -65,7 +54,7 @@ export const ExpandedListDropdown = ({
|
|||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<StyledExpandedListContainer withBorder={withBorder}>
|
<StyledExpandedListContainer>
|
||||||
{children}
|
{children}
|
||||||
</StyledExpandedListContainer>
|
</StyledExpandedListContainer>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|||||||
@ -65,8 +65,3 @@ export const WithExpandedList: Story = {
|
|||||||
expect(await rootCanvas.findByText('Option 7')).toBeDefined();
|
expect(await rootCanvas.findByText('Option 7')).toBeDefined();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const WithExpandedListBorder: Story = {
|
|
||||||
...WithExpandedList,
|
|
||||||
args: { ...WithExpandedList.args, withExpandedListBorder: true },
|
|
||||||
};
|
|
||||||
|
|||||||
Reference in New Issue
Block a user