@wix/design-system
Version:
@wix/design-system
82 lines • 6.47 kB
JavaScript
import React from 'react';
import TopBanner from './TopBanner';
import Page from '../Page';
import Button from '../Button';
import { More } from '@wix/wix-ui-icons-common';
import { Breadcrumbs, Card, CloseButton, IconButton, Modal, Text } from '..';
const meta = {
title: 'TopBanner',
component: TopBanner,
};
export default meta;
const commonProps = {
dismissible: true,
dismissLabel: 'dismiss-label',
position: 'sticky',
dataHook: 'top-banner',
action: React.createElement(TopBanner.ActionButton, null, "Upgrade"),
children: 'Upgrade your site to start accepting payments.',
};
export const Basic = () => React.createElement(TopBanner, { ...commonProps });
export const InPage = () => (React.createElement("div", { style: { height: '800px', overflow: 'scroll', position: 'relative' } },
React.createElement(TopBanner, { ...commonProps }),
React.createElement(Page, { height: "1600px" },
React.createElement(Page.Header, { title: "Page Title", breadcrumbs: React.createElement(Breadcrumbs, { items: [
{ id: 0, value: 'Page Name' },
{ id: 1, value: 'Page title' },
] }), subtitle: "I\u2019m a relatively long subtitle to fill this space in.", actionsBar: React.createElement("div", { style: { display: 'flex', gap: 6 } },
React.createElement(IconButton, { style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
} },
React.createElement(More, null)),
React.createElement(Button, { skin: "light" }, "Button"),
React.createElement(Button, { skin: "standard" }, "Button")) }),
React.createElement(Page.Content, null,
React.createElement(Text, null, "This is text")))));
export const InModal = () => {
return (React.createElement(Modal, { isOpen: true },
React.createElement(Card, { stretchVertically: true },
React.createElement(Card.Header, { suffix: React.createElement(CloseButton, null), title: "Title", subtitle: "I\u2019m a relatively long subtitle to fill this space in." }),
React.createElement(Card.Content, null,
React.createElement("div", { style: { overflow: 'scroll', height: '400px' } },
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(TopBanner, { ...commonProps }),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"),
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"))))));
};
export const WithCustomContent = () => {
return (React.createElement("div", { style: {
display: 'flex',
flexDirection: 'column',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
} },
React.createElement(TopBanner, { ...commonProps },
React.createElement("div", { style: { display: 'flex', gap: '6px', width: '100%' } },
React.createElement("div", { style: {
backgroundColor: 'purple',
width: '70%',
padding: '3px',
borderRadius: '3px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
} }, "Lorem ipsum dolor, sit amet consectetur adipisicing elit."),
React.createElement("div", { style: {
backgroundColor: 'pink',
width: '30%',
padding: '3px',
borderRadius: '3px',
} }, "Lorem ipsum dolor, sit amet consectetur adipisicing elit.")))));
};
//# sourceMappingURL=TopBanner.story.js.map