@gravity-ui/page-constructor 8.1.2-alpha.1 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/blocks/CardLayout/schema.d.ts +156 -0
- package/build/cjs/blocks/ContentLayout/schema.d.ts +78 -0
- package/build/cjs/blocks/ExtendedFeatures/schema.d.ts +78 -0
- package/build/cjs/blocks/FilterBlock/schema.d.ts +156 -0
- package/build/cjs/blocks/FoldableList/schema.d.ts +78 -0
- package/build/cjs/blocks/Form/schema.d.ts +78 -0
- package/build/cjs/blocks/Info/schema.d.ts +156 -0
- package/build/cjs/blocks/Map/schema.d.ts +78 -0
- package/build/cjs/blocks/Media/schema.d.ts +156 -0
- package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +78 -0
- package/build/cjs/blocks/Questions/schema.d.ts +78 -0
- package/build/cjs/blocks/Slider/Slider.d.ts +1 -1
- package/build/cjs/blocks/Slider/Slider.js +2 -2
- package/build/cjs/blocks/Slider/Slider.js.map +1 -1
- package/build/cjs/blocks/Slider/schema.d.ts +78 -0
- package/build/cjs/blocks/SliderOld/schema.d.ts +78 -0
- package/build/cjs/blocks/Tabs/schema.d.ts +156 -0
- package/build/cjs/components/Title/TitleItem.d.ts +2 -2
- package/build/cjs/components/Title/TitleItem.js +13 -3
- package/build/cjs/components/Title/TitleItem.js.map +1 -1
- package/build/cjs/constructor-items.d.ts +1 -1
- package/build/cjs/demo/ComponentsControls.stories.d.ts +4 -0
- package/build/cjs/demo/ComponentsControls.stories.js +34 -0
- package/build/cjs/demo/ComponentsControls.stories.js.map +1 -0
- package/build/cjs/demo/ComponentsLayout.stories.css +13 -0
- package/build/cjs/demo/ComponentsLayout.stories.d.ts +4 -0
- package/build/cjs/demo/ComponentsLayout.stories.js +28 -0
- package/build/cjs/demo/ComponentsLayout.stories.js.map +1 -0
- package/build/cjs/demo/ComponentsText.stories.d.ts +4 -0
- package/build/cjs/demo/ComponentsText.stories.js +26 -0
- package/build/cjs/demo/ComponentsText.stories.js.map +1 -0
- package/build/cjs/demo/ContentAndData.stories.d.ts +8 -0
- package/build/cjs/demo/ContentAndData.stories.js +73 -0
- package/build/cjs/demo/ContentAndData.stories.js.map +1 -0
- package/build/cjs/demo/FeaturesAndCards.stories.d.ts +8 -0
- package/build/cjs/demo/FeaturesAndCards.stories.js +112 -0
- package/build/cjs/demo/FeaturesAndCards.stories.js.map +1 -0
- package/build/cjs/demo/HeroAndMedia.stories.d.ts +8 -0
- package/build/cjs/demo/HeroAndMedia.stories.js +58 -0
- package/build/cjs/demo/HeroAndMedia.stories.js.map +1 -0
- package/build/cjs/demo/InteractiveAndForms.stories.d.ts +8 -0
- package/build/cjs/demo/InteractiveAndForms.stories.js +83 -0
- package/build/cjs/demo/InteractiveAndForms.stories.js.map +1 -0
- package/build/cjs/models/constructor-items/blocks.d.ts +0 -1
- package/build/cjs/models/constructor-items/blocks.js.map +1 -1
- package/build/cjs/models/constructor-items/common.d.ts +1 -1
- package/build/cjs/models/constructor-items/common.js.map +1 -1
- package/build/cjs/schema/constants.d.ts +234 -0
- package/build/cjs/schema/validators/common.d.ts +156 -0
- package/build/cjs/schema/validators/common.js +3 -0
- package/build/cjs/schema/validators/common.js.map +1 -1
- package/build/cjs/sub-blocks/BackgroundCard/schema.d.ts +78 -0
- package/build/cjs/sub-blocks/BasicCard/schema.d.ts +78 -0
- package/build/cjs/sub-blocks/Content/schema.d.ts +156 -0
- package/build/cjs/sub-blocks/ImageCard/schema.d.ts +78 -0
- package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +78 -0
- package/build/cjs/text-transform/config.d.ts +1 -0
- package/build/esm/blocks/CardLayout/schema.d.ts +156 -0
- package/build/esm/blocks/ContentLayout/schema.d.ts +78 -0
- package/build/esm/blocks/ExtendedFeatures/schema.d.ts +78 -0
- package/build/esm/blocks/FilterBlock/schema.d.ts +156 -0
- package/build/esm/blocks/FoldableList/schema.d.ts +78 -0
- package/build/esm/blocks/Form/schema.d.ts +78 -0
- package/build/esm/blocks/Info/schema.d.ts +156 -0
- package/build/esm/blocks/Map/schema.d.ts +78 -0
- package/build/esm/blocks/Media/schema.d.ts +156 -0
- package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +78 -0
- package/build/esm/blocks/Questions/schema.d.ts +78 -0
- package/build/esm/blocks/Slider/Slider.d.ts +1 -1
- package/build/esm/blocks/Slider/Slider.js +2 -2
- package/build/esm/blocks/Slider/Slider.js.map +1 -1
- package/build/esm/blocks/Slider/schema.d.ts +78 -0
- package/build/esm/blocks/SliderOld/schema.d.ts +78 -0
- package/build/esm/blocks/Tabs/schema.d.ts +156 -0
- package/build/esm/components/Title/TitleItem.d.ts +2 -2
- package/build/esm/components/Title/TitleItem.js +13 -3
- package/build/esm/components/Title/TitleItem.js.map +1 -1
- package/build/esm/constructor-items.d.ts +1 -1
- package/build/esm/demo/ComponentsControls.stories.d.ts +4 -0
- package/build/esm/demo/ComponentsControls.stories.js +29 -0
- package/build/esm/demo/ComponentsControls.stories.js.map +1 -0
- package/build/esm/demo/ComponentsLayout.stories.css +13 -0
- package/build/esm/demo/ComponentsLayout.stories.d.ts +5 -0
- package/build/esm/demo/ComponentsLayout.stories.js +24 -0
- package/build/esm/demo/ComponentsLayout.stories.js.map +1 -0
- package/build/esm/demo/ComponentsText.stories.d.ts +4 -0
- package/build/esm/demo/ComponentsText.stories.js +21 -0
- package/build/esm/demo/ComponentsText.stories.js.map +1 -0
- package/build/esm/demo/ContentAndData.stories.d.ts +8 -0
- package/build/esm/demo/ContentAndData.stories.js +69 -0
- package/build/esm/demo/ContentAndData.stories.js.map +1 -0
- package/build/esm/demo/FeaturesAndCards.stories.d.ts +8 -0
- package/build/esm/demo/FeaturesAndCards.stories.js +108 -0
- package/build/esm/demo/FeaturesAndCards.stories.js.map +1 -0
- package/build/esm/demo/HeroAndMedia.stories.d.ts +8 -0
- package/build/esm/demo/HeroAndMedia.stories.js +54 -0
- package/build/esm/demo/HeroAndMedia.stories.js.map +1 -0
- package/build/esm/demo/InteractiveAndForms.stories.d.ts +8 -0
- package/build/esm/demo/InteractiveAndForms.stories.js +79 -0
- package/build/esm/demo/InteractiveAndForms.stories.js.map +1 -0
- package/build/esm/models/constructor-items/blocks.d.ts +0 -1
- package/build/esm/models/constructor-items/blocks.js.map +1 -1
- package/build/esm/models/constructor-items/common.d.ts +1 -1
- package/build/esm/models/constructor-items/common.js.map +1 -1
- package/build/esm/schema/constants.d.ts +234 -0
- package/build/esm/schema/validators/common.d.ts +156 -0
- package/build/esm/schema/validators/common.js +3 -0
- package/build/esm/schema/validators/common.js.map +1 -1
- package/build/esm/sub-blocks/BackgroundCard/schema.d.ts +78 -0
- package/build/esm/sub-blocks/BasicCard/schema.d.ts +78 -0
- package/build/esm/sub-blocks/Content/schema.d.ts +156 -0
- package/build/esm/sub-blocks/ImageCard/schema.d.ts +78 -0
- package/build/esm/sub-blocks/LayoutItem/schema.d.ts +78 -0
- package/build/esm/text-transform/config.d.ts +1 -0
- package/package.json +1 -1
- package/schema/index.js +1 -1
- package/server/models/constructor-items/blocks.d.ts +0 -1
- package/server/models/constructor-items/common.d.ts +1 -1
- package/server/text-transform/config.d.ts +1 -0
- package/widget/index.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAE,UAAU,EAAC,oBAAY;AAC5C,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAC9D,OAAO,EAAC,aAAa,EAAC,6CAAoC;
|
|
1
|
+
{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {ToggleArrow, YFMWrapper} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {AnalyticsEventsBase, QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n switch (size) {\n case 'xs':\n return 13;\n case 's':\n return 16;\n case 'sm':\n case 'm':\n return isMobile ? 22 : 24;\n case 'l':\n return isMobile ? 26 : 38;\n default:\n return 20;\n }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps, AnalyticsEventsBase {\n className?: string;\n onClick?: () => void;\n resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n const isMobile = React.useContext(MobileContext);\n\n const {\n textSize = 'm',\n text,\n anchor,\n justify,\n url,\n onClick,\n custom,\n className,\n qa,\n resetMargin = true,\n urlTitle,\n analyticsEvents,\n } = props;\n\n const handleAnalytics = useAnalytics();\n\n const {hostname} = React.useContext(LocationContext);\n const textMarkup = (\n <React.Fragment>\n <YFMWrapper\n className={b('text')}\n contentClassName={b('text')}\n content={text}\n modifiers={{\n constructor: true,\n }}\n />\n {custom && (\n <React.Fragment>\n \n <span className={b('custom')}>{custom}</span>\n </React.Fragment>\n )}\n </React.Fragment>\n );\n let content: React.ReactNode;\n\n const insideClickableContent = (\n <span className={b('wrapper')}>\n {textMarkup}\n \n <ToggleArrow\n className={b('arrow', {size: textSize})}\n size={getArrowSize(textSize, isMobile)}\n type={'horizontal'}\n iconType=\"navigation\"\n open={false}\n />\n </span>\n );\n\n const handleClick = React.useCallback(() => {\n if (analyticsEvents) {\n handleAnalytics(analyticsEvents);\n }\n\n if (onClick) {\n onClick();\n }\n }, [analyticsEvents, handleAnalytics, onClick]);\n\n if (!url && !onClick) {\n content = textMarkup;\n } else if (url) {\n content = (\n <a\n className={b('link')}\n href={url}\n {...getLinkProps(url, hostname)}\n onClick={handleClick}\n title={urlTitle}\n >\n {insideClickableContent}\n </a>\n );\n } else if (onClick) {\n content = (\n <button className={b('link')} onClick={handleClick} title={urlTitle}>\n {insideClickableContent}\n </button>\n );\n }\n\n return (\n <React.Fragment>\n {anchor && <Anchor id={anchor} className={b('anchor')} />}\n {React.createElement(\n getHeaderTag(textSize),\n {\n className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n 'data-qa': `${qa}-header`,\n },\n content,\n )}\n </React.Fragment>\n );\n};\n\nexport default TitleItem;\n"]}
|
|
@@ -19,7 +19,7 @@ export declare const blockMap: {
|
|
|
19
19
|
"map-block": ({ map, border, disableShadow, ...props }: import("./models/index.js").MapBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
"filter-block": ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }: import("./models/index.js").FilterBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
"form-block": (props: import("./models/index.js").FormBlockProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
-
"slider-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow,
|
|
22
|
+
"slider-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: React.PropsWithChildren<import("./blocks/Slider/Slider.js").SliderProps>) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
};
|
|
24
24
|
export declare const subBlockMap: {
|
|
25
25
|
divider: ({ size, border }: import("./models/index.js").DividerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import BackLink from "../components/BackLink/BackLink.js";
|
|
4
|
+
import Button from "../components/Button/Button.js";
|
|
5
|
+
import Control from "../components/Control/Control.js";
|
|
6
|
+
import FileLink from "../components/FileLink/FileLink.js";
|
|
7
|
+
import HeaderBreadcrumbs from "../components/HeaderBreadcrumbs/HeaderBreadcrumbs.js";
|
|
8
|
+
import Link from "../components/Link/Link.js";
|
|
9
|
+
import ToggleArrow from "../components/ToggleArrow/ToggleArrow.js";
|
|
10
|
+
import backLinkData from "../components/BackLink/__stories__/data.json";
|
|
11
|
+
import buttonData from "../components/Button/__stories__/data.json";
|
|
12
|
+
import controlData from "../components/Control/__stories__/data.json";
|
|
13
|
+
import fileLinkData from "../components/FileLink/__stories__/data.json";
|
|
14
|
+
import headerBreadcrumbsData from "../components/HeaderBreadcrumbs/__stories__/data.json";
|
|
15
|
+
import linkData from "../components/Link/__stories__/data.json";
|
|
16
|
+
import toggleArrowData from "../components/ToggleArrow/__stories__/data.json";
|
|
17
|
+
export default { title: 'Lab/Tokenization/Components/Controls' };
|
|
18
|
+
const LINK_THEMES = ['normal', 'underline', 'back', 'file-link'];
|
|
19
|
+
const CONTROL_THEMES = ['primary', 'secondary', 'link', 'accent'];
|
|
20
|
+
const CONTROL_SIZES = ['xs', 's', 'm', 'l'];
|
|
21
|
+
const FILE_EXTENSIONS = ['example.pdf', 'example.doc', 'example.xls', 'example.ppt', 'example.zip'];
|
|
22
|
+
export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "Button \u2014 default" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(Button, { ...buttonData.default }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Button \u2014 width (max / auto)" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: buttonData.width.map((item, index) => (_jsx(Button, { ...item }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Link \u2014 themes" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', gap: '24px', flexWrap: 'wrap' }, children: LINK_THEMES.map((theme) => (_jsx(Link, { text: `${theme}`, url: "#", theme: theme }, theme))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Link \u2014 with arrow (s / m / l)" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: linkData.normalArrows.map((item, index) => (_jsx(Link, { ...item }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "BackLink" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(BackLink, { ...backLinkData.default.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "FileLink \u2014 default" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(FileLink, { ...fileLinkData.default.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "FileLink \u2014 horizontal / vertical" }), _jsxs("div", { style: { marginTop: '8px', display: 'flex', gap: '24px' }, children: [_jsx(FileLink, { ...fileLinkData.typesThemes.content, type: "horizontal" }), _jsx(FileLink, { ...fileLinkData.typesThemes.content, type: "vertical" })] })] }), _jsxs("section", { children: [_jsx("strong", { children: "FileLink \u2014 extensions" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', gap: '16px', flexWrap: 'wrap' }, children: FILE_EXTENSIONS.map((href) => (_jsx(FileLink, { href: href, text: "Link to file" }, href))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Control \u2014 themes \u00D7 sizes" }), _jsxs("div", { style: {
|
|
23
|
+
marginTop: '8px',
|
|
24
|
+
display: 'grid',
|
|
25
|
+
gridTemplateColumns: 'auto repeat(4, 40px)',
|
|
26
|
+
gap: '8px',
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
}, children: [_jsx("span", {}), CONTROL_SIZES.map((size) => (_jsx("span", { style: { fontSize: '12px', textAlign: 'center' }, children: size }, size))), CONTROL_THEMES.map((theme) => (_jsxs(React.Fragment, { children: [_jsx("span", { style: { fontSize: '12px' }, children: theme }), CONTROL_SIZES.map((size) => (_jsx(Control, { ...controlData.sizesThemes.content, theme: theme, size: size }, `${theme}-${size}`)))] }, theme)))] })] }), _jsxs("section", { children: [_jsx("strong", { children: "ToggleArrow \u2014 closed / open" }), _jsxs("div", { style: { marginTop: '8px', display: 'flex', gap: '24px', alignItems: 'center' }, children: [_jsx(ToggleArrow, { ...toggleArrowData.vertical.content }), _jsx(ToggleArrow, { ...toggleArrowData.vertical.content, open: true }), _jsx(ToggleArrow, { ...toggleArrowData.horizontal.content }), _jsx(ToggleArrow, { ...toggleArrowData.horizontal.content, open: true })] })] }), _jsxs("section", { children: [_jsx("strong", { children: "HeaderBreadcrumbs" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(HeaderBreadcrumbs, { ...headerBreadcrumbsData.default.content }) })] })] }));
|
|
29
|
+
//# sourceMappingURL=ComponentsControls.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComponentsControls.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsControls.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Meta, StoryFn} from '@storybook/react';\n\nimport BackLink, {BackLinkProps} from '../components/BackLink/BackLink';\nimport Button, {ButtonProps} from '../components/Button/Button';\nimport Control, {ControlProps} from '../components/Control/Control';\nimport FileLink from '../components/FileLink/FileLink';\nimport HeaderBreadcrumbs from '../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport Link, {LinkFullProps} from '../components/Link/Link';\nimport ToggleArrow, {ToggleArrowProps} from '../components/ToggleArrow/ToggleArrow';\nimport {FileLinkProps, HeaderBreadCrumbsProps} from '../models';\n\nimport backLinkData from '../components/BackLink/__stories__/data.json';\nimport buttonData from '../components/Button/__stories__/data.json';\nimport controlData from '../components/Control/__stories__/data.json';\nimport fileLinkData from '../components/FileLink/__stories__/data.json';\nimport headerBreadcrumbsData from '../components/HeaderBreadcrumbs/__stories__/data.json';\nimport linkData from '../components/Link/__stories__/data.json';\nimport toggleArrowData from '../components/ToggleArrow/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Controls'} as Meta;\n\nconst LINK_THEMES: LinkFullProps['theme'][] = ['normal', 'underline', 'back', 'file-link'];\nconst CONTROL_THEMES: ControlProps['theme'][] = ['primary', 'secondary', 'link', 'accent'];\nconst CONTROL_SIZES: ControlProps['size'][] = ['xs', 's', 'm', 'l'];\nconst FILE_EXTENSIONS = ['example.pdf', 'example.doc', 'example.xls', 'example.ppt', 'example.zip'];\n\nexport const Default: StoryFn = () => (\n <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n <section>\n <strong>Button — default</strong>\n <div style={{marginTop: '8px'}}>\n <Button {...buttonData.default} />\n </div>\n </section>\n <section>\n <strong>Button — width (max / auto)</strong>\n <div style={{marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px'}}>\n {(buttonData.width as ButtonProps[]).map((item, index) => (\n <Button key={index} {...item} />\n ))}\n </div>\n </section>\n <section>\n <strong>Link — themes</strong>\n <div style={{marginTop: '8px', display: 'flex', gap: '24px', flexWrap: 'wrap'}}>\n {LINK_THEMES.map((theme) => (\n <Link key={theme} text={`${theme}`} url=\"#\" theme={theme} />\n ))}\n </div>\n </section>\n <section>\n <strong>Link — with arrow (s / m / l)</strong>\n <div style={{marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px'}}>\n {(linkData.normalArrows as LinkFullProps[]).map((item, index) => (\n <Link key={index} {...item} />\n ))}\n </div>\n </section>\n <section>\n <strong>BackLink</strong>\n <div style={{marginTop: '8px'}}>\n <BackLink {...(backLinkData.default.content as BackLinkProps)} />\n </div>\n </section>\n <section>\n <strong>FileLink — default</strong>\n <div style={{marginTop: '8px'}}>\n <FileLink {...fileLinkData.default.content} />\n </div>\n </section>\n <section>\n <strong>FileLink — horizontal / vertical</strong>\n <div style={{marginTop: '8px', display: 'flex', gap: '24px'}}>\n <FileLink\n {...(fileLinkData.typesThemes.content as FileLinkProps)}\n type=\"horizontal\"\n />\n <FileLink\n {...(fileLinkData.typesThemes.content as FileLinkProps)}\n type=\"vertical\"\n />\n </div>\n </section>\n <section>\n <strong>FileLink — extensions</strong>\n <div style={{marginTop: '8px', display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n {FILE_EXTENSIONS.map((href) => (\n <FileLink key={href} href={href} text=\"Link to file\" />\n ))}\n </div>\n </section>\n <section>\n <strong>Control — themes × sizes</strong>\n <div\n style={{\n marginTop: '8px',\n display: 'grid',\n gridTemplateColumns: 'auto repeat(4, 40px)',\n gap: '8px',\n alignItems: 'center',\n }}\n >\n <span />\n {CONTROL_SIZES.map((size) => (\n <span key={size} style={{fontSize: '12px', textAlign: 'center'}}>\n {size}\n </span>\n ))}\n {CONTROL_THEMES.map((theme) => (\n <React.Fragment key={theme}>\n <span style={{fontSize: '12px'}}>{theme}</span>\n {CONTROL_SIZES.map((size) => (\n <Control\n key={`${theme}-${size}`}\n {...(controlData.sizesThemes.content as ControlProps)}\n theme={theme}\n size={size}\n />\n ))}\n </React.Fragment>\n ))}\n </div>\n </section>\n <section>\n <strong>ToggleArrow — closed / open</strong>\n <div style={{marginTop: '8px', display: 'flex', gap: '24px', alignItems: 'center'}}>\n <ToggleArrow {...(toggleArrowData.vertical.content as ToggleArrowProps)} />\n <ToggleArrow {...(toggleArrowData.vertical.content as ToggleArrowProps)} open />\n <ToggleArrow {...(toggleArrowData.horizontal.content as ToggleArrowProps)} />\n <ToggleArrow {...(toggleArrowData.horizontal.content as ToggleArrowProps)} open />\n </div>\n </section>\n <section>\n <strong>HeaderBreadcrumbs</strong>\n <div style={{marginTop: '8px'}}>\n <HeaderBreadcrumbs\n {...(headerBreadcrumbsData.default.content as HeaderBreadCrumbsProps)}\n />\n </div>\n </section>\n </div>\n);\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import BalancedMasonry from "../components/BalancedMasonry/BalancedMasonry.js";
|
|
3
|
+
import CardBase from "../components/CardBase/CardBase.js";
|
|
4
|
+
import ErrorWrapper from "../components/ErrorWrapper/ErrorWrapper.js";
|
|
5
|
+
import FullWidthBackground from "../components/FullWidthBackground/FullWidthBackground.js";
|
|
6
|
+
import Table from "../components/Table/Table.js";
|
|
7
|
+
import UnpublishedLabel from "../components/UnpublishedLabel/UnpublishedLabel.js";
|
|
8
|
+
import { BREAKPOINTS } from "../constants.js";
|
|
9
|
+
import balancedMasonryData from "../components/BalancedMasonry/__stories__/data.json";
|
|
10
|
+
import errorWrapperData from "../components/ErrorWrapper/__stories__/data.json";
|
|
11
|
+
import fullWidthBackgroundData from "../components/FullWidthBackground/__stories__/data.json";
|
|
12
|
+
import tableData from "../components/Table/__stories__/data.json";
|
|
13
|
+
import unpublishedLabelData from "../components/UnpublishedLabel/__stories__/data.json";
|
|
14
|
+
import './ComponentsLayout.stories.css';
|
|
15
|
+
const masonryBreakpointCols = {
|
|
16
|
+
[BREAKPOINTS.xs]: 1,
|
|
17
|
+
[BREAKPOINTS.sm]: 2,
|
|
18
|
+
[BREAKPOINTS.md]: 2,
|
|
19
|
+
[BREAKPOINTS.lg]: 3,
|
|
20
|
+
[BREAKPOINTS.xl]: 3,
|
|
21
|
+
};
|
|
22
|
+
export default { title: 'Lab/Tokenization/Components/Layout' };
|
|
23
|
+
export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "FullWidthBackground \u2014 default" }), _jsx("div", { style: { marginTop: '8px', height: '100px' }, children: _jsx(FullWidthBackground, { ...fullWidthBackgroundData.default, children: _jsx("div", { style: { padding: '40px', color: 'white' }, children: "Content" }) }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "FullWidthBackground \u2014 rounded" }), _jsx("div", { style: { marginTop: '8px', height: '100px' }, children: _jsx(FullWidthBackground, { ...fullWidthBackgroundData.rounded, children: _jsx("div", { style: { padding: '40px', color: 'white' }, children: "Content" }) }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "BalancedMasonry" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(BalancedMasonry, { className: "demo-balanced-masonry", columnClassName: "demo-balanced-masonry-column", breakpointCols: masonryBreakpointCols, children: balancedMasonryData.default.content.children.map((text, index) => (_jsx(CardBase, { className: "demo-balanced-masonry-card", children: _jsx(CardBase.Content, { children: text }) }, index))) }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Table \u2014 default" }), _jsx(Table, { ...tableData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Table \u2014 tick markers" }), _jsx(Table, { ...tableData.tick.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "UnpublishedLabel (label)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(UnpublishedLabel, { ...unpublishedLabelData.label.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "UnpublishedLabel (line)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(UnpublishedLabel, { ...unpublishedLabelData.line.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ErrorWrapper (error state)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(ErrorWrapper, { ...errorWrapperData.default.content, handler: () => { }, children: errorWrapperData.default.content.children }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ErrorWrapper (no error)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(ErrorWrapper, { ...errorWrapperData.noError.content, handler: () => { }, children: errorWrapperData.noError.content.children }) })] })] }));
|
|
24
|
+
//# sourceMappingURL=ComponentsLayout.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComponentsLayout.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsLayout.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport BalancedMasonry, {BalancedMasonryProps} from '../components/BalancedMasonry/BalancedMasonry';\nimport CardBase from '../components/CardBase/CardBase';\nimport ErrorWrapper from '../components/ErrorWrapper/ErrorWrapper';\nimport FullWidthBackground, {\n FullWidthBackgroundProps,\n} from '../components/FullWidthBackground/FullWidthBackground';\nimport Table from '../components/Table/Table';\nimport UnpublishedLabel, {\n UnpublishedLabelProps,\n} from '../components/UnpublishedLabel/UnpublishedLabel';\nimport {BREAKPOINTS} from '../constants';\nimport {TableProps} from '../models';\n\nimport balancedMasonryData from '../components/BalancedMasonry/__stories__/data.json';\nimport errorWrapperData from '../components/ErrorWrapper/__stories__/data.json';\nimport fullWidthBackgroundData from '../components/FullWidthBackground/__stories__/data.json';\nimport tableData from '../components/Table/__stories__/data.json';\nimport unpublishedLabelData from '../components/UnpublishedLabel/__stories__/data.json';\n\nimport './ComponentsLayout.stories.scss';\n\nconst masonryBreakpointCols: BalancedMasonryProps['breakpointCols'] = {\n [BREAKPOINTS.xs]: 1,\n [BREAKPOINTS.sm]: 2,\n [BREAKPOINTS.md]: 2,\n [BREAKPOINTS.lg]: 3,\n [BREAKPOINTS.xl]: 3,\n};\n\nexport default {title: 'Lab/Tokenization/Components/Layout'} as Meta;\n\nexport const Default: StoryFn = () => (\n <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n <section>\n <strong>FullWidthBackground — default</strong>\n <div style={{marginTop: '8px', height: '100px'}}>\n <FullWidthBackground\n {...(fullWidthBackgroundData.default as FullWidthBackgroundProps)}\n >\n <div style={{padding: '40px', color: 'white'}}>Content</div>\n </FullWidthBackground>\n </div>\n </section>\n <section>\n <strong>FullWidthBackground — rounded</strong>\n <div style={{marginTop: '8px', height: '100px'}}>\n <FullWidthBackground\n {...(fullWidthBackgroundData.rounded as FullWidthBackgroundProps)}\n >\n <div style={{padding: '40px', color: 'white'}}>Content</div>\n </FullWidthBackground>\n </div>\n </section>\n <section>\n <strong>BalancedMasonry</strong>\n <div style={{marginTop: '8px'}}>\n <BalancedMasonry\n className=\"demo-balanced-masonry\"\n columnClassName=\"demo-balanced-masonry-column\"\n breakpointCols={masonryBreakpointCols}\n >\n {balancedMasonryData.default.content.children.map((text, index) => (\n <CardBase key={index} className=\"demo-balanced-masonry-card\">\n <CardBase.Content>{text}</CardBase.Content>\n </CardBase>\n ))}\n </BalancedMasonry>\n </div>\n </section>\n <section>\n <strong>Table — default</strong>\n <Table {...(tableData.default.content as TableProps)} />\n </section>\n <section>\n <strong>Table — tick markers</strong>\n <Table {...(tableData.tick.content as TableProps)} />\n </section>\n <section>\n <strong>UnpublishedLabel (label)</strong>\n <div style={{marginTop: '8px'}}>\n <UnpublishedLabel\n {...(unpublishedLabelData.label.content as UnpublishedLabelProps)}\n />\n </div>\n </section>\n <section>\n <strong>UnpublishedLabel (line)</strong>\n <div style={{marginTop: '8px'}}>\n <UnpublishedLabel\n {...(unpublishedLabelData.line.content as UnpublishedLabelProps)}\n />\n </div>\n </section>\n <section>\n <strong>ErrorWrapper (error state)</strong>\n <div style={{marginTop: '8px'}}>\n <ErrorWrapper {...errorWrapperData.default.content} handler={() => {}}>\n {errorWrapperData.default.content.children}\n </ErrorWrapper>\n </div>\n </section>\n <section>\n <strong>ErrorWrapper (no error)</strong>\n <div style={{marginTop: '8px'}}>\n <ErrorWrapper {...errorWrapperData.noError.content} handler={() => {}}>\n {errorWrapperData.noError.content.children}\n </ErrorWrapper>\n </div>\n </section>\n </div>\n);\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { blockTransform, yfmTransform } from "../../.storybook/utils.js";
|
|
3
|
+
import Author from "../components/Author/Author.js";
|
|
4
|
+
import ContentList from "../components/ContentList/ContentList.js";
|
|
5
|
+
import MetaInfo from "../components/MetaInfo/MetaInfo.js";
|
|
6
|
+
import Title from "../components/Title/Title.js";
|
|
7
|
+
import YFMWrapper from "../components/YFMWrapper/YFMWrapper.js";
|
|
8
|
+
import { AuthorType } from "../models/index.js";
|
|
9
|
+
import authorData from "../components/Author/__stories__/data.json";
|
|
10
|
+
import contentListData from "../components/ContentList/__stories__/data.json";
|
|
11
|
+
import metaInfoData from "../components/MetaInfo/__stories__/data.json";
|
|
12
|
+
import titleData from "../components/Title/__stories__/data.json";
|
|
13
|
+
import yfmWrapperData from "../components/YFMWrapper/__stories__/data.json";
|
|
14
|
+
export default { title: 'Lab/Tokenization/Components/Text' };
|
|
15
|
+
const defaultTitleArgs = {
|
|
16
|
+
...titleData.default.content,
|
|
17
|
+
subtitle: yfmTransform(titleData.default.content.subtitle),
|
|
18
|
+
};
|
|
19
|
+
const transformContentList = (item) => blockTransform(item);
|
|
20
|
+
export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 default" }), _jsx(Title, { ...defaultTitleArgs })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), _jsx("div", { children: Object.entries(titleData.sizes).map(([size, props]) => (_jsx("div", { style: { paddingBottom: '32px' }, children: _jsx(Title, { ...defaultTitleArgs, title: props }) }, size))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 with link" }), _jsx(Title, { ...defaultTitleArgs, title: titleData.titleLink.content.title })] }), _jsxs("section", { children: [_jsx("strong", { children: "YFMWrapper" }), _jsx(YFMWrapper, { ...yfmWrapperData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 column" }), _jsx(Author, { ...authorData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 line" }), _jsx(Author, { ...authorData.default.content, type: AuthorType.Line })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 default" }), _jsx(ContentList, { ...transformContentList(contentListData.default) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 without icon" }), _jsx(ContentList, { ...transformContentList(contentListData.withoutIcon) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 sizes (s / m / l)" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: contentListData.sizes.map((item, index) => (_jsx(ContentList, { ...transformContentList(item) }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "MetaInfo" }), _jsx(MetaInfo, { ...metaInfoData.default.content })] })] }));
|
|
21
|
+
//# sourceMappingURL=ComponentsText.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,kCAA+B;AACpE,OAAO,MAAM,uCAAoC;AACjD,OAAO,WAAW,iDAA8C;AAChE,OAAO,QAAQ,2CAAwC;AACvD,OAAO,KAAK,qCAAkC;AAC9C,OAAO,UAAU,+CAA4C;AAC7D,OAAO,EAAC,UAAU,EAAgD,2BAAkB;AAEpF,OAAO,UAAU,mDAAmD;AACpE,OAAO,eAAe,wDAAwD;AAC9E,OAAO,YAAY,qDAAqD;AACxE,OAAO,SAAS,kDAAkD;AAClE,OAAO,cAAc,uDAAuD;AAE5E,eAAe,EAAC,KAAK,EAAE,kCAAkC,EAAS,CAAC;AAEnE,MAAM,gBAAgB,GAAG;IACrB,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO;IAC5B,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;CAC7D,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAa,EAAE,EAAE,CAC3C,cAAc,CAAC,IAA8B,CAAqB,CAAC;AAEvE,MAAM,CAAC,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,aAChF,8BACI,oDAAgC,EAChC,KAAC,KAAK,OAAK,gBAAgB,GAAI,IACzB,EACV,8BACI,gEAAuC,EACvC,wBACK,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACpD,cAAgB,KAAK,EAAE,EAAC,aAAa,EAAE,MAAM,EAAC,YAC1C,KAAC,KAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,KAAuB,GAAI,IADzD,IAAI,CAER,CACT,CAAC,GACA,IACA,EACV,8BACI,sDAAkC,EAClC,KAAC,KAAK,OACE,gBAAgB,EACpB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAuB,GAC5D,IACI,EACV,8BACI,0CAA2B,EAC3B,KAAC,UAAU,OAAK,cAAc,CAAC,OAAO,CAAC,OAAO,GAAI,IAC5C,EACV,8BACI,oDAAgC,EAChC,KAAC,MAAM,OAAK,UAAU,CAAC,OAAO,CAAC,OAAO,GAAI,IACpC,EACV,8BACI,kDAA8B,EAC9B,KAAC,MAAM,OAAK,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,GAAI,IAC3D,EACV,8BACI,0DAAsC,EACtC,KAAC,WAAW,OAAK,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,GAAI,IAC5D,EACV,8BACI,+DAA2C,EAC3C,KAAC,WAAW,OAAK,oBAAoB,CAAC,eAAe,CAAC,WAAW,CAAC,GAAI,IAChE,EACV,8BACI,oEAAgD,EAChD,cAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,YAC9D,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,KAAC,WAAW,OAAiB,oBAAoB,CAAC,IAAI,CAAC,IAArC,KAAK,CAAoC,CAC9D,CAAC,GACA,IACA,EACV,8BACI,wCAAyB,EACzB,KAAC,QAAQ,OAAK,YAAY,CAAC,OAAO,CAAC,OAAO,GAAI,IACxC,IACR,CACT,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform, yfmTransform} from '../../.storybook/utils';\nimport Author from '../components/Author/Author';\nimport ContentList from '../components/ContentList/ContentList';\nimport MetaInfo from '../components/MetaInfo/MetaInfo';\nimport Title from '../components/Title/Title';\nimport YFMWrapper from '../components/YFMWrapper/YFMWrapper';\nimport {AuthorType, ContentListProps, CustomBlock, TitleItemProps} from '../models';\n\nimport authorData from '../components/Author/__stories__/data.json';\nimport contentListData from '../components/ContentList/__stories__/data.json';\nimport metaInfoData from '../components/MetaInfo/__stories__/data.json';\nimport titleData from '../components/Title/__stories__/data.json';\nimport yfmWrapperData from '../components/YFMWrapper/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Text'} as Meta;\n\nconst defaultTitleArgs = {\n ...titleData.default.content,\n subtitle: yfmTransform(titleData.default.content.subtitle),\n};\n\nconst transformContentList = (item: unknown) =>\n blockTransform(item as unknown as CustomBlock) as ContentListProps;\n\nexport const Default: StoryFn = () => (\n <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n <section>\n <strong>Title — default</strong>\n <Title {...defaultTitleArgs} />\n </section>\n <section>\n <strong>Title — sizes (l → xs)</strong>\n <div>\n {Object.entries(titleData.sizes).map(([size, props]) => (\n <div key={size} style={{paddingBottom: '32px'}}>\n <Title {...defaultTitleArgs} title={props as TitleItemProps} />\n </div>\n ))}\n </div>\n </section>\n <section>\n <strong>Title — with link</strong>\n <Title\n {...defaultTitleArgs}\n title={titleData.titleLink.content.title as TitleItemProps}\n />\n </section>\n <section>\n <strong>YFMWrapper</strong>\n <YFMWrapper {...yfmWrapperData.default.content} />\n </section>\n <section>\n <strong>Author — column</strong>\n <Author {...authorData.default.content} />\n </section>\n <section>\n <strong>Author — line</strong>\n <Author {...authorData.default.content} type={AuthorType.Line} />\n </section>\n <section>\n <strong>ContentList — default</strong>\n <ContentList {...transformContentList(contentListData.default)} />\n </section>\n <section>\n <strong>ContentList — without icon</strong>\n <ContentList {...transformContentList(contentListData.withoutIcon)} />\n </section>\n <section>\n <strong>ContentList — sizes (s / m / l)</strong>\n <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>\n {contentListData.sizes.map((item, index) => (\n <ContentList key={index} {...transformContentList(item)} />\n ))}\n </div>\n </section>\n <section>\n <strong>MetaInfo</strong>\n <MetaInfo {...metaInfoData.default.content} />\n </section>\n </div>\n);\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CustomConfig, NavigationData } from "../models/index.js";
|
|
3
|
+
declare const _default: Meta;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
|
|
6
|
+
navigation: NavigationData;
|
|
7
|
+
custom?: CustomConfig;
|
|
8
|
+
}>;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { blockTransform } from "../../.storybook/utils.js";
|
|
3
|
+
import { PageConstructor } from "../containers/PageConstructor/index.js";
|
|
4
|
+
import { CustomComponent } from "../navigation/__stories__/CustomComponent/CustomComponent.js";
|
|
5
|
+
import contentLayoutData from "../blocks/ContentLayout/__stories__/data.json";
|
|
6
|
+
import foldableListData from "../blocks/FoldableList/__stories__/data.json";
|
|
7
|
+
import questionsData from "../blocks/Questions/__stories__/data.json";
|
|
8
|
+
import tableData from "../blocks/Table/__stories__/data.json";
|
|
9
|
+
import tabsData from "../blocks/Tabs/__stories__/data.json";
|
|
10
|
+
import navData from "../navigation/__stories__/data.json";
|
|
11
|
+
export default {
|
|
12
|
+
title: 'Lab/Tokenization/Blocks/ContentAndData',
|
|
13
|
+
component: PageConstructor,
|
|
14
|
+
};
|
|
15
|
+
const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
|
|
16
|
+
blocks: [
|
|
17
|
+
// content-layout-block: default text only
|
|
18
|
+
blockTransform(contentLayoutData.default),
|
|
19
|
+
// content-layout-block: centered
|
|
20
|
+
blockTransform(contentLayoutData.textAlignCenter),
|
|
21
|
+
// content-layout-block: with background color
|
|
22
|
+
blockTransform(contentLayoutData.withBackgroundColor),
|
|
23
|
+
// content-layout-block: with background image + color
|
|
24
|
+
blockTransform(contentLayoutData.withImageAndBackgroundColor),
|
|
25
|
+
// content-layout-block: dark monochrome theme
|
|
26
|
+
blockTransform(contentLayoutData.theme[0]),
|
|
27
|
+
// content-layout-block: light monochrome theme
|
|
28
|
+
blockTransform(contentLayoutData.theme[1]),
|
|
29
|
+
// content-layout-block variants with list/links/buttons
|
|
30
|
+
...contentLayoutData.contentVariables.map(blockTransform),
|
|
31
|
+
// tabs-block: default (all tab types: image, video, youtube)
|
|
32
|
+
blockTransform(tabsData.default.content),
|
|
33
|
+
// questions-block: default with links
|
|
34
|
+
blockTransform(questionsData.default.content),
|
|
35
|
+
// questions-block: with bullet list items
|
|
36
|
+
blockTransform(questionsData.textWithListBullet.content),
|
|
37
|
+
// foldable-list-block: default
|
|
38
|
+
blockTransform(foldableListData.default),
|
|
39
|
+
// foldable-list-block: with bullet list items
|
|
40
|
+
blockTransform(foldableListData.textWithListBullet),
|
|
41
|
+
// foldable-list-block: with dash list items
|
|
42
|
+
blockTransform(foldableListData.textWithListDash),
|
|
43
|
+
// table-block: numeric values (0/1)
|
|
44
|
+
blockTransform(tableData.default.content),
|
|
45
|
+
// table-block: tick markers
|
|
46
|
+
blockTransform(tableData.tick.content),
|
|
47
|
+
],
|
|
48
|
+
} }));
|
|
49
|
+
export const Default = Template.bind({});
|
|
50
|
+
Default.args = {
|
|
51
|
+
custom: {
|
|
52
|
+
navigation: {
|
|
53
|
+
'custom-item': CustomComponent,
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
navigation: {
|
|
57
|
+
...navData.navigation,
|
|
58
|
+
header: {
|
|
59
|
+
...navData.navigation.header,
|
|
60
|
+
rightItems: [
|
|
61
|
+
...navData.navigation.header.rightItems,
|
|
62
|
+
{
|
|
63
|
+
type: 'custom-item',
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
//# sourceMappingURL=ContentAndData.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContentAndData.stories.js","sourceRoot":"../../../src","sources":["demo/ContentAndData.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAE9D,OAAO,EAAC,eAAe,EAAC,qEAAkE;AAE1F,OAAO,iBAAiB,sDAAsD;AAC9E,OAAO,gBAAgB,qDAAqD;AAC5E,OAAO,aAAa,kDAAkD;AACtE,OAAO,SAAS,8CAA8C;AAC9D,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,OAAO,4CAA4C;AAE1D,eAAe;IACX,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,0CAA0C;YAC1C,cAAc,CAAC,iBAAiB,CAAC,OAAO,CAAC;YACzC,iCAAiC;YACjC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC;YACjD,8CAA8C;YAC9C,cAAc,CAAC,iBAAiB,CAAC,mBAAmB,CAAC;YACrD,sDAAsD;YACtD,cAAc,CAAC,iBAAiB,CAAC,2BAA2B,CAAC;YAC7D,8CAA8C;YAC9C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,+CAA+C;YAC/C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,wDAAwD;YACxD,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,CAAC,cAAc,CAAC;YAEzD,6DAA6D;YAC7D,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;YAExC,sCAAsC;YACtC,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,0CAA0C;YAC1C,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC;YAExD,+BAA+B;YAC/B,cAAc,CAAC,gBAAgB,CAAC,OAAO,CAAC;YACxC,8CAA8C;YAC9C,cAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;YACnD,4CAA4C;YAC5C,cAAc,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;YAEjD,oCAAoC;YACpC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;YACzC,4BAA4B;YAC5B,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;SACzC;KACW,GAEtB,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,MAAM,EAAE;QACJ,UAAU,EAAE;YACR,aAAa,EAAE,eAAe;SACjC;KACJ;IACD,UAAU,EAAE;QACR,GAAG,OAAO,CAAC,UAAU;QACrB,MAAM,EAAE;YACJ,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM;YAC5B,UAAU,EAAE;gBACR,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU;gBACvC;oBACI,IAAI,EAAE,aAAa;iBACtB;aACJ;SACJ;KACc;CACtB,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\nimport {CustomComponent} from '../navigation/__stories__/CustomComponent/CustomComponent';\n\nimport contentLayoutData from '../blocks/ContentLayout/__stories__/data.json';\nimport foldableListData from '../blocks/FoldableList/__stories__/data.json';\nimport questionsData from '../blocks/Questions/__stories__/data.json';\nimport tableData from '../blocks/Table/__stories__/data.json';\nimport tabsData from '../blocks/Tabs/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n title: 'Lab/Tokenization/Blocks/ContentAndData',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n navigation,\n custom = {},\n}) => (\n <PageConstructor\n navigation={navigation}\n custom={custom}\n content={\n {\n blocks: [\n // content-layout-block: default text only\n blockTransform(contentLayoutData.default),\n // content-layout-block: centered\n blockTransform(contentLayoutData.textAlignCenter),\n // content-layout-block: with background color\n blockTransform(contentLayoutData.withBackgroundColor),\n // content-layout-block: with background image + color\n blockTransform(contentLayoutData.withImageAndBackgroundColor),\n // content-layout-block: dark monochrome theme\n blockTransform(contentLayoutData.theme[0]),\n // content-layout-block: light monochrome theme\n blockTransform(contentLayoutData.theme[1]),\n // content-layout-block variants with list/links/buttons\n ...contentLayoutData.contentVariables.map(blockTransform),\n\n // tabs-block: default (all tab types: image, video, youtube)\n blockTransform(tabsData.default.content),\n\n // questions-block: default with links\n blockTransform(questionsData.default.content),\n // questions-block: with bullet list items\n blockTransform(questionsData.textWithListBullet.content),\n\n // foldable-list-block: default\n blockTransform(foldableListData.default),\n // foldable-list-block: with bullet list items\n blockTransform(foldableListData.textWithListBullet),\n // foldable-list-block: with dash list items\n blockTransform(foldableListData.textWithListDash),\n\n // table-block: numeric values (0/1)\n blockTransform(tableData.default.content),\n // table-block: tick markers\n blockTransform(tableData.tick.content),\n ],\n } as PageContent\n }\n />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n custom: {\n navigation: {\n 'custom-item': CustomComponent,\n },\n },\n navigation: {\n ...navData.navigation,\n header: {\n ...navData.navigation.header,\n rightItems: [\n ...navData.navigation.header.rightItems,\n {\n type: 'custom-item',\n },\n ],\n },\n } as NavigationData,\n};\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CustomConfig, NavigationData } from "../models/index.js";
|
|
3
|
+
declare const _default: Meta;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
|
|
6
|
+
navigation: NavigationData;
|
|
7
|
+
custom?: CustomConfig;
|
|
8
|
+
}>;
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { blockTransform } from "../../.storybook/utils.js";
|
|
3
|
+
import { PageConstructor } from "../containers/PageConstructor/index.js";
|
|
4
|
+
import cardLayoutData from "../blocks/CardLayout/__stories__/data.json";
|
|
5
|
+
import extendedFeaturesData from "../blocks/ExtendedFeatures/__stories__/data.json";
|
|
6
|
+
import headerSliderData from "../blocks/HeaderSlider/__stories__/data.json";
|
|
7
|
+
import promoFeaturesData from "../blocks/PromoFeaturesBlock/__stories__/data.json";
|
|
8
|
+
import sliderData from "../blocks/Slider/__stories__/data.json";
|
|
9
|
+
import navData from "../navigation/__stories__/data.json";
|
|
10
|
+
export default {
|
|
11
|
+
title: 'Lab/Tokenization/Blocks/FeaturesAndCards',
|
|
12
|
+
component: PageConstructor,
|
|
13
|
+
};
|
|
14
|
+
const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
|
|
15
|
+
blocks: [
|
|
16
|
+
// promo-features-block: default theme
|
|
17
|
+
blockTransform({
|
|
18
|
+
...promoFeaturesData.common,
|
|
19
|
+
...promoFeaturesData.defaultTheme.content,
|
|
20
|
+
}),
|
|
21
|
+
// promo-features-block: grey theme
|
|
22
|
+
blockTransform({
|
|
23
|
+
...promoFeaturesData.common,
|
|
24
|
+
...promoFeaturesData.greyTheme.content,
|
|
25
|
+
}),
|
|
26
|
+
// extended-features-block: default (3 cols)
|
|
27
|
+
blockTransform(extendedFeaturesData.default.content),
|
|
28
|
+
// extended-features-block: with labels
|
|
29
|
+
blockTransform({
|
|
30
|
+
type: 'extended-features-block',
|
|
31
|
+
...extendedFeaturesData.withLabel.content,
|
|
32
|
+
}),
|
|
33
|
+
// extended-features-block: 2 per row
|
|
34
|
+
blockTransform({
|
|
35
|
+
type: 'extended-features-block',
|
|
36
|
+
...extendedFeaturesData.colSizes.two,
|
|
37
|
+
}),
|
|
38
|
+
// extended-features-block: 4 per row
|
|
39
|
+
blockTransform({
|
|
40
|
+
type: 'extended-features-block',
|
|
41
|
+
...extendedFeaturesData.colSizes.four,
|
|
42
|
+
}),
|
|
43
|
+
// card-layout-block: basic cards
|
|
44
|
+
{
|
|
45
|
+
...cardLayoutData.default.content,
|
|
46
|
+
children: [
|
|
47
|
+
blockTransform(cardLayoutData.cards.basicCard),
|
|
48
|
+
blockTransform(cardLayoutData.cards.basicCard),
|
|
49
|
+
blockTransform(cardLayoutData.cards.basicCard),
|
|
50
|
+
],
|
|
51
|
+
},
|
|
52
|
+
// card-layout-block: layout items with images
|
|
53
|
+
{
|
|
54
|
+
type: 'card-layout-block',
|
|
55
|
+
title: 'Card layout with layout items',
|
|
56
|
+
children: [
|
|
57
|
+
blockTransform(cardLayoutData.cards.layoutItem),
|
|
58
|
+
blockTransform(cardLayoutData.cards.layoutItem),
|
|
59
|
+
blockTransform(cardLayoutData.cards.layoutItem),
|
|
60
|
+
],
|
|
61
|
+
},
|
|
62
|
+
// card-layout-block: background cards
|
|
63
|
+
{
|
|
64
|
+
type: 'card-layout-block',
|
|
65
|
+
title: 'Card layout with background cards',
|
|
66
|
+
children: [
|
|
67
|
+
blockTransform(cardLayoutData.cards.backgroundCard),
|
|
68
|
+
blockTransform(cardLayoutData.cards.backgroundCard),
|
|
69
|
+
blockTransform(cardLayoutData.cards.backgroundCard),
|
|
70
|
+
],
|
|
71
|
+
},
|
|
72
|
+
// card-layout-block: price cards
|
|
73
|
+
{
|
|
74
|
+
type: 'card-layout-block',
|
|
75
|
+
title: 'Card layout with price cards',
|
|
76
|
+
children: [
|
|
77
|
+
blockTransform(cardLayoutData.cards.priceCard),
|
|
78
|
+
blockTransform(cardLayoutData.cards.priceCard),
|
|
79
|
+
blockTransform(cardLayoutData.cards.priceCard),
|
|
80
|
+
],
|
|
81
|
+
},
|
|
82
|
+
// slider-block: basic cards
|
|
83
|
+
blockTransform(sliderData.default.content),
|
|
84
|
+
// slider-block: quote cards
|
|
85
|
+
blockTransform(sliderData.quoteCards.content),
|
|
86
|
+
// slider-block: banner cards (subtitle already HTML — no blockTransform)
|
|
87
|
+
sliderData.banners.content,
|
|
88
|
+
// header-slider-block: default
|
|
89
|
+
blockTransform({ type: 'header-slider-block', ...headerSliderData.default }),
|
|
90
|
+
// header-slider-block: with different slide themes
|
|
91
|
+
blockTransform({
|
|
92
|
+
type: 'header-slider-block',
|
|
93
|
+
...headerSliderData.withDifferentSlidesTheme,
|
|
94
|
+
}),
|
|
95
|
+
],
|
|
96
|
+
} }));
|
|
97
|
+
export const Default = Template.bind({});
|
|
98
|
+
Default.args = {
|
|
99
|
+
navigation: {
|
|
100
|
+
...navData.navigation,
|
|
101
|
+
header: {
|
|
102
|
+
...navData.navigation.header,
|
|
103
|
+
withBorder: true,
|
|
104
|
+
withBorderOnScroll: true,
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
};
|
|
108
|
+
//# sourceMappingURL=FeaturesAndCards.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FeaturesAndCards.stories.js","sourceRoot":"../../../src","sources":["demo/FeaturesAndCards.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport cardLayoutData from '../blocks/CardLayout/__stories__/data.json';\nimport extendedFeaturesData from '../blocks/ExtendedFeatures/__stories__/data.json';\nimport headerSliderData from '../blocks/HeaderSlider/__stories__/data.json';\nimport promoFeaturesData from '../blocks/PromoFeaturesBlock/__stories__/data.json';\nimport sliderData from '../blocks/Slider/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n title: 'Lab/Tokenization/Blocks/FeaturesAndCards',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n navigation,\n custom = {},\n}) => (\n <PageConstructor\n navigation={navigation}\n custom={custom}\n content={\n {\n blocks: [\n // promo-features-block: default theme\n blockTransform({\n ...promoFeaturesData.common,\n ...promoFeaturesData.defaultTheme.content,\n }),\n // promo-features-block: grey theme\n blockTransform({\n ...promoFeaturesData.common,\n ...promoFeaturesData.greyTheme.content,\n }),\n\n // extended-features-block: default (3 cols)\n blockTransform(extendedFeaturesData.default.content),\n // extended-features-block: with labels\n blockTransform({\n type: 'extended-features-block',\n ...extendedFeaturesData.withLabel.content,\n }),\n // extended-features-block: 2 per row\n blockTransform({\n type: 'extended-features-block',\n ...extendedFeaturesData.colSizes.two,\n }),\n // extended-features-block: 4 per row\n blockTransform({\n type: 'extended-features-block',\n ...extendedFeaturesData.colSizes.four,\n }),\n\n // card-layout-block: basic cards\n {\n ...cardLayoutData.default.content,\n children: [\n blockTransform(cardLayoutData.cards.basicCard),\n blockTransform(cardLayoutData.cards.basicCard),\n blockTransform(cardLayoutData.cards.basicCard),\n ],\n },\n // card-layout-block: layout items with images\n {\n type: 'card-layout-block',\n title: 'Card layout with layout items',\n children: [\n blockTransform(cardLayoutData.cards.layoutItem),\n blockTransform(cardLayoutData.cards.layoutItem),\n blockTransform(cardLayoutData.cards.layoutItem),\n ],\n },\n // card-layout-block: background cards\n {\n type: 'card-layout-block',\n title: 'Card layout with background cards',\n children: [\n blockTransform(cardLayoutData.cards.backgroundCard),\n blockTransform(cardLayoutData.cards.backgroundCard),\n blockTransform(cardLayoutData.cards.backgroundCard),\n ],\n },\n // card-layout-block: price cards\n {\n type: 'card-layout-block',\n title: 'Card layout with price cards',\n children: [\n blockTransform(cardLayoutData.cards.priceCard),\n blockTransform(cardLayoutData.cards.priceCard),\n blockTransform(cardLayoutData.cards.priceCard),\n ],\n },\n\n // slider-block: basic cards\n blockTransform(sliderData.default.content),\n // slider-block: quote cards\n blockTransform(sliderData.quoteCards.content),\n // slider-block: banner cards (subtitle already HTML — no blockTransform)\n sliderData.banners.content,\n\n // header-slider-block: default\n blockTransform({type: 'header-slider-block', ...headerSliderData.default}),\n // header-slider-block: with different slide themes\n blockTransform({\n type: 'header-slider-block',\n ...headerSliderData.withDifferentSlidesTheme,\n }),\n ],\n } as PageContent\n }\n />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n navigation: {\n ...navData.navigation,\n header: {\n ...navData.navigation.header,\n withBorder: true,\n withBorderOnScroll: true,\n },\n } as NavigationData,\n};\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CustomConfig, NavigationData } from "../models/index.js";
|
|
3
|
+
declare const _default: Meta;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
|
|
6
|
+
navigation: NavigationData;
|
|
7
|
+
custom?: CustomConfig;
|
|
8
|
+
}>;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { blockTransform } from "../../.storybook/utils.js";
|
|
3
|
+
import { PageConstructor } from "../containers/PageConstructor/index.js";
|
|
4
|
+
import bannerData from "../blocks/Banner/__stories__/data.json";
|
|
5
|
+
import companiesData from "../blocks/Companies/__stories__/data.json";
|
|
6
|
+
import headerData from "../blocks/Header/__stories__/data.json";
|
|
7
|
+
import infoData from "../blocks/Info/__stories__/data.json";
|
|
8
|
+
import mediaData from "../blocks/Media/__stories__/data.json";
|
|
9
|
+
import navData from "../navigation/__stories__/data.json";
|
|
10
|
+
export default {
|
|
11
|
+
title: 'Lab/Tokenization/Blocks/HeroAndMedia',
|
|
12
|
+
component: PageConstructor,
|
|
13
|
+
};
|
|
14
|
+
const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
|
|
15
|
+
blocks: [
|
|
16
|
+
// header-block: default with action buttons
|
|
17
|
+
blockTransform(headerData.default),
|
|
18
|
+
// header-block: with breadcrumbs + light background
|
|
19
|
+
blockTransform(headerData.breadcrumbs[0]),
|
|
20
|
+
// header-block: with breadcrumbs + dark theme
|
|
21
|
+
blockTransform(headerData.breadcrumbs[1]),
|
|
22
|
+
// header-block: with image
|
|
23
|
+
blockTransform(headerData.image),
|
|
24
|
+
// header-block: with background image and color (media variant)
|
|
25
|
+
blockTransform({ type: 'header-block', ...headerData.media.image }),
|
|
26
|
+
// banner-block: light theme with themed image
|
|
27
|
+
blockTransform(bannerData.default.content),
|
|
28
|
+
// banner-block: forced dark theme
|
|
29
|
+
blockTransform(bannerData.darkTheme.content),
|
|
30
|
+
// media-block: default with image
|
|
31
|
+
blockTransform(mediaData.default),
|
|
32
|
+
// media-block: image slider
|
|
33
|
+
blockTransform(mediaData.imageSlider),
|
|
34
|
+
// media-block: youtube embed
|
|
35
|
+
blockTransform({ type: 'media-block', ...mediaData.video.youtube }),
|
|
36
|
+
// media-block: video with controls
|
|
37
|
+
blockTransform({ type: 'media-block', ...mediaData.video.staticWithControls }),
|
|
38
|
+
// media-block: video with preview
|
|
39
|
+
blockTransform({ type: 'media-block', ...mediaData.video.videoWithPreview }),
|
|
40
|
+
// companies-block: title only
|
|
41
|
+
blockTransform(companiesData.default.content),
|
|
42
|
+
// companies-block: with description
|
|
43
|
+
blockTransform(companiesData.withDescription.content),
|
|
44
|
+
// info-block: dark theme (default)
|
|
45
|
+
blockTransform(infoData.default),
|
|
46
|
+
// info-block: light theme with background color
|
|
47
|
+
blockTransform({ type: 'info-block', ...infoData.light }),
|
|
48
|
+
],
|
|
49
|
+
} }));
|
|
50
|
+
export const Default = Template.bind({});
|
|
51
|
+
Default.args = {
|
|
52
|
+
navigation: navData.navigation,
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=HeroAndMedia.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAG9D,OAAO,UAAU,+CAA+C;AAChE,OAAO,aAAa,kDAAkD;AACtE,OAAO,UAAU,+CAA+C;AAChE,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,SAAS,8CAA8C;AAC9D,OAAO,OAAO,4CAA4C;AAE1D,eAAe;IACX,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,4CAA4C;YAC5C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC;YAClC,oDAAoD;YACpD,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,2BAA2B;YAC3B,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;YAChC,gEAAgE;YAChE,cAAc,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAC,CAAC;YAEjE,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,cAAc,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,OAAO,CAAC,UAA4B;CACnD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport headerData from '../blocks/Header/__stories__/data.json';\nimport infoData from '../blocks/Info/__stories__/data.json';\nimport mediaData from '../blocks/Media/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n title: 'Lab/Tokenization/Blocks/HeroAndMedia',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n navigation,\n custom = {},\n}) => (\n <PageConstructor\n navigation={navigation}\n custom={custom}\n content={\n {\n blocks: [\n // header-block: default with action buttons\n blockTransform(headerData.default),\n // header-block: with breadcrumbs + light background\n blockTransform(headerData.breadcrumbs[0]),\n // header-block: with breadcrumbs + dark theme\n blockTransform(headerData.breadcrumbs[1]),\n // header-block: with image\n blockTransform(headerData.image),\n // header-block: with background image and color (media variant)\n blockTransform({type: 'header-block', ...headerData.media.image}),\n\n // banner-block: light theme with themed image\n blockTransform(bannerData.default.content),\n // banner-block: forced dark theme\n blockTransform(bannerData.darkTheme.content),\n\n // media-block: default with image\n blockTransform(mediaData.default),\n // media-block: image slider\n blockTransform(mediaData.imageSlider),\n // media-block: youtube embed\n blockTransform({type: 'media-block', ...mediaData.video.youtube}),\n // media-block: video with controls\n blockTransform({type: 'media-block', ...mediaData.video.staticWithControls}),\n // media-block: video with preview\n blockTransform({type: 'media-block', ...mediaData.video.videoWithPreview}),\n\n // companies-block: title only\n blockTransform(companiesData.default.content),\n // companies-block: with description\n blockTransform(companiesData.withDescription.content),\n\n // info-block: dark theme (default)\n blockTransform(infoData.default),\n // info-block: light theme with background color\n blockTransform({type: 'info-block', ...infoData.light}),\n ],\n } as PageContent\n }\n />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n navigation: navData.navigation as NavigationData,\n};\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CustomConfig, NavigationData } from "../models/index.js";
|
|
3
|
+
declare const _default: Meta;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
|
|
6
|
+
navigation: NavigationData;
|
|
7
|
+
custom?: CustomConfig;
|
|
8
|
+
}>;
|