@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
94 lines (93 loc) • 8.35 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Card, Elevator, IconButton, Menu, Modal, ResponsiveProvider, Skeleton, Stack, Textfield, Tooltip, } from '../..';
import { Popover } from './popover';
const story = {
title: 'Dialogs/Popover',
component: Popover,
args: {
placement: 'auto-start',
offset: 8,
closeOnOutsideClick: true,
closeOnInsideClick: false,
matchTriggerWidth: false,
trigger: _jsx(Button, { children: "Open Popover" }),
},
argTypes: {
placement: {
options: ['auto', 'auto-start', 'auto-end', 'top', 'bottom', 'right', 'left', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end'],
control: { type: 'select' },
},
},
};
export default story;
const DefaultTemplate = (args) => {
const [isChecked, setIsChecked] = useState(false);
return (_jsx(Popover, { ...args, children: _jsxs(Menu, { children: [_jsx(Menu.Item, { autoFocus: true, icon: "arrow-right", value: "1", description: _jsx(_Fragment, { children: "this is my description" }), children: "Sample long menu item" }), _jsx(Menu.ItemCheckbox, { onClick: () => setIsChecked(val => !val), checked: isChecked, icon: isChecked ? 'check' : undefined, value: "2", children: "Checkbox item" }), _jsx(Menu.Item, { value: "3", icon: "right-from-bracket", children: "Item option 3" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { value: "4", icon: "arrow-down-to-bracket", children: "Even shorter" }), _jsx(Menu.Item, { value: "5", disabled: true, children: "Really?" })] }) }));
};
export const Default = DefaultTemplate.bind({});
const CustomTemplate = args => (_jsxs(Stack, { direction: "row", columnGap: 8, children: [_jsx(Popover, { ...args, children: _jsx("div", { style: {
background: 'var(--global-vibrancy-background)', backdropFilter: 'blur(10px)', border: '2px solid black', padding: 24,
}, children: "Lorem." }) }), _jsx(Popover, { ...args, children: _jsx("div", { style: {
background: 'var(--global-vibrancy-background)', backdropFilter: 'blur(10px)', border: '2px solid black', padding: 24,
}, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni error unde sapiente beatae! Nostrum praesentium similique veniam non ut nulla, incidunt velit et, placeat cupiditate, aliquid saepe. Atque, provident perferendis?" }) })] }));
export const CustomElement = CustomTemplate.bind({});
CustomElement.args = {
matchTriggerWidth: true,
placement: 'bottom-start',
};
const WithFieldTemplate = args => (_jsx(_Fragment, { children: _jsx(Popover, { ...args, children: _jsx("div", { style: {
background: 'var(--global-vibrancy-background)', backdropFilter: 'blur(10px)', border: '2px solid black', padding: 24,
}, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni error unde sapiente beatae! Nostrum praesentium similique veniam non ut nulla, incidunt velit et, placeat cupiditate, aliquid saepe. Atque, provident perferendis?" }) }) }));
export const WithField = WithFieldTemplate.bind({});
WithField.args = {
trigger: _jsx(Textfield, { type: "search", icon: "magnifying-glass" }),
matchTriggerWidth: true,
placement: 'bottom-start',
};
const ControlledTemplate = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (_jsx(Popover, { ...args, trigger: (_jsx(Button, { onClick: () => setIsOpen(val => !val), children: `${isOpen ? 'Close' : 'Open'} Popover` })), onOpenChange: state => setIsOpen(state), open: isOpen, children: _jsxs("div", { style: {
background: 'var(--global-vibrancy-background)',
backdropFilter: 'blur(10px)',
border: '2px solid black',
padding: 24,
maxWidth: '300px',
}, children: ["Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni error unde sapiente beatae! Nostrum praesentium similique veniam non ut nulla, incidunt velit et, placeat cupiditate, aliquid saepe. Atque, provident perferendis?", _jsx("button", { type: "button", onClick: () => setIsOpen(val => !val), children: "Close popover" })] }) }));
};
export const Controlled = ControlledTemplate.bind({});
const WithElevatorTemplate = args => (_jsx(Popover, { ...args, children: _jsx(Elevator, { resting: 2, children: _jsxs(Card, { dimmed: 0, bordered: true, children: ["Lorem ipsum dolor sit.", ' ', _jsx("a", { href: "https://design.wonderflow.ai/get-started/components/dialogs/popover", target: "_blank", rel: "noreferrer", children: "More Popover info." })] }) }) }));
export const WithElevator = WithElevatorTemplate.bind({});
WithElevator.args = {
placement: 'auto-end',
trigger: _jsx(IconButton, { kind: "flat", icon: "circle-info", iconColor: "var(--cta-default)", dimension: "big", "aria-label": "Show property description" }),
};
const WithCodeTemplate = args => (_jsx(Popover, { ...args, children: _jsx(Elevator, { resting: 2, children: _jsx(Card, { bordered: true, style: { width: '60ch', color: 'var(--global-background)', background: 'var(--dimmed-8)' }, children: _jsx("pre", { style: { whiteSpace: 'pre-wrap' }, children: `{
productId: '67rJ!B^*S3@izdX*8s26O1y6R6P4iwskG',
scope: 'main.scope.',
pipelines: [
'Nb9bSzJqcG2%^M8JDWXyYB072%hzGOKA',
'Nb9bSzJqcG2%^M8JDWXyYB072%hzGOKA'
],
languages: [
'en',
],
}` }) }) }) }));
export const WithCode = WithCodeTemplate.bind({});
WithCode.args = {
placement: 'auto-end',
trigger: _jsx(IconButton, { kind: "secondary", icon: "circle-info", dimension: "big", "aria-label": "Show some formatted code" }),
};
const WithModalTemplate = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (_jsxs(ResponsiveProvider, { children: [_jsx(Popover, { ...args, closeOnInsideClick: true, trigger: _jsx(Button, { children: "Open Menu" }), children: _jsx(Menu, { children: _jsx(Menu.Item, { autoFocus: true, icon: "arrow-right", value: "1", onClick: () => setIsOpen(true), children: "Open Modal" }) }) }), _jsx(Modal, { title: "A Modal ", subtitle: "opened from a Popover Menu", overlayColor: "dark", hideCloseButton: false, hideHeaderBorder: false, hideFooterBorder: false, alignActionCenter: false, alignContentCenter: false, size: "medium", theme: "auto", isLoading: false, preventCloseOnClickOutside: false, content: (_jsx("div", { children: _jsxs("p", { children: ["When", ' ', _jsx("b", { children: "closeOnInsideClick" }), ' ', "is set to `true`, the Popover will automatically close clicking on it.", _jsx(Tooltip, { placement: "right-start", delay: 500, trigger: (_jsx(IconButton, { kind: "flat", icon: "circle-info", dimension: "small", "aria-label": "Show some formatted code" })), children: _jsx("p", { children: "some extra info in a Tooltip." }) })] }) })), primaryAction: _jsx(Button, { onClick: () => setIsOpen(false), children: "Confirm" }), secondaryAction: _jsx(Button, { onClick: () => setIsOpen(false), children: "Cancel" }), isVisible: isOpen, onCloseModal: () => setIsOpen(false) })] }));
};
export const closeOnInsideClick = WithModalTemplate.bind({});
const SkeletonTemplate = (args) => {
const [isChecked, setIsChecked] = useState(false);
const [isLoading, setIsLoading] = useState(true);
return (_jsx(Popover, { ...args, placement: "right-end", children: _jsxs(Menu, { style: { minWidth: '250px' }, children: [isLoading
? (_jsx(Stack, { hPadding: 8, children: _jsx(Skeleton, { count: 3, height: "36px" }) }))
: (_jsxs(_Fragment, { children: [_jsx(Menu.Item, { autoFocus: true, icon: "arrow-right", value: "1", children: "Sample long menu item" }), _jsx(Menu.ItemCheckbox, { onClick: () => setIsChecked(val => !val), checked: isChecked, icon: isChecked ? 'check' : undefined, value: "2", children: "Checkbox item" }), _jsx(Menu.Item, { value: "3", icon: "right-from-bracket", children: "Item option 3" })] })), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { icon: isLoading ? 'minus' : 'plus', value: "4", onClick: () => setIsLoading(val => !val), children: isLoading ? 'Switch Off Loader' : 'Switch On Loader' })] }) }));
};
export const withLoader = SkeletonTemplate.bind({});