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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import React from "react";
import ReactDOM from "react-dom";
import Header from "../components/Header/Header";
import ArticleList from "../components/ArticleList/ArticleList";
import Button from "../components/Button/Button";
import PopularTopics from "../components/PopularTopics/PopularTopics";
import TagPicker from "../components/TagPicker/TagPicker";
var StyleGuideOverlay = function(options) {};
StyleGuideOverlay.prototype = {
create() {
// TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
ReactDOM.render(
<div>
<h3>JSX Components:</h3>
<h4 className="stp_styleguide_h4">Buttons</h4>
<h5 className="stp_styleguide_h5">text</h5>
<Button style="text" url="https://example.org" source="styleguide">
Text Button
</Button>
<h5 className="stp_styleguide_h5">primary</h5>
<Button style="primary" url="https://example.org" source="styleguide">
Primary Button
</Button>
<h5 className="stp_styleguide_h5">secondary</h5>
<Button style="secondary" url="https://example.org" source="styleguide">
Secondary Button
</Button>
<h5 className="stp_styleguide_h5">primary wide</h5>
<span className="stp_button_wide">
<Button style="primary" url="https://example.org" source="styleguide">
Primary Wide Button
</Button>
</span>
<h5 className="stp_styleguide_h5">secondary wide</h5>
<span className="stp_button_wide">
<Button
style="secondary"
url="https://example.org"
source="styleguide"
>
Secondary Wide Button
</Button>
</span>
<h4 className="stp_styleguide_h4">Header</h4>
<Header>
<Button style="primary" url="https://example.org" source="styleguide">
View My List
</Button>
</Header>
<h4 className="stp_styleguide_h4">PopularTopics</h4>
<PopularTopics
pockethost={`getpocket.com`}
source={`styleguide`}
utmParams={`utm_source=styleguide`}
topics={[
{ title: "Self Improvement", topic: "self-improvement" },
{ title: "Food", topic: "food" },
{ title: "Entertainment", topic: "entertainment" },
{ title: "Science", topic: "science" },
]}
/>
<h4 className="stp_styleguide_h4">ArticleList</h4>
<ArticleList
source={`styleguide`}
articles={[
{
title: "Article Title",
publisher: "Publisher",
thumbnail:
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text",
},
{
title: "Article Title (No Publisher)",
thumbnail:
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text",
},
{
title: "Article Title (No Thumbnail)",
publisher: "Publisher",
url: "https://example.org",
alt: "Alt Text",
},
]}
/>
<h4 className="stp_styleguide_h4">TagPicker</h4>
<TagPicker tags={[`futurism`, `politics`, `mozilla`]} />
<h3>Typography:</h3>
<h2 className="header_large">.header_large</h2>
<h3 className="header_medium">.header_medium</h3>
<p>paragraph</p>
<h3>Native Elements:</h3>
<h4 className="stp_styleguide_h4">Horizontal Rule</h4>
<hr />
</div>,
document.querySelector(`#stp_style_guide_components`)
);
},
};
export default StyleGuideOverlay;
|
