-
Notifications
You must be signed in to change notification settings - Fork 42
/
article-paragraph.showcase.js
82 lines (79 loc) · 2.55 KB
/
article-paragraph.showcase.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* eslint-disable react/prop-types */
import React from "react";
import { ContextProviderWithDefaults } from "@times-components/context";
import coreRenderers from "@times-components/markup";
import { renderTree } from "@times-components/markup-forest";
import { sections } from "@times-components/storybook";
import { scales, themeFactory } from "@times-components/styleguide";
import paragraphData from "./fixtures/paragraph-showcase.json";
import dropCapData from "./fixtures/drop-cap-showcase.json";
import dropCapShortTextData from "./fixtures/drop-cap-short-text-showcase.json";
import ArticleParagraph from "./src";
import DropCapView from "./src/drop-cap";
const renderParagraphWithScale = ({ select, boolean }, ast) => {
const scale = select("Scale", scales, scales.medium);
const section = select("Section", sections, "The Times Magazine");
const theme = themeFactory(section, "magazinestandard");
const enableDropcap = boolean && boolean("Enable DropCap", true);
return (
<ContextProviderWithDefaults value={{ theme: { scale } }}>
{renderTree(ast, {
...coreRenderers,
dropCap(key, { value }) {
return (
enableDropcap && (
<DropCapView
{...{
colour: theme.sectionColour,
font: theme.dropCapFont,
key,
dropCap: value,
scale
}}
/>
)
);
},
paragraph(key, attributes, children, indx, node) {
return (
<ArticleParagraph
ast={node}
dropCapColour={theme.sectionColour}
dropCapFont={theme.dropCapFont}
key={indx}
uid={indx}
>
{children}
</ArticleParagraph>
);
}
})}
</ContextProviderWithDefaults>
);
};
export default {
children: [
{
component: ({ select }) =>
renderParagraphWithScale({ select }, paragraphData),
name: "Paragraph",
platform: "native",
type: "story"
},
{
component: ({ select, boolean }) =>
renderParagraphWithScale({ select, boolean }, dropCapData),
name: "Paragraph with dropcap",
platform: "native",
type: "story"
},
{
component: ({ select, boolean }) =>
renderParagraphWithScale({ select, boolean }, dropCapShortTextData),
name: "DropCap paragraph with short text",
platform: "native",
type: "story"
}
],
name: "Primitives/Article Paragraph|Dropcap"
};