Skip to content

Commit 27730e2

Browse files
author
Catherine Ligad
authored
Matches example repo to designs (#14)
* move navbar to side, fix some header styles * yarn add lodash * yarn add --dev @types/lodash * style source write key, track * style identify * delete putting it all together section * style all the other components, remoce description * finish up fixing large styles * finish up header styles * fix sticky * change page title * break out var
1 parent 1479d64 commit 27730e2

29 files changed

+690
-551
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@types/jest": "^27.0.1",
1313
"@types/node": "^16.7.13",
1414
"evergreen-ui": "^6.9.3",
15+
"lodash": "^4.17.21",
1516
"react": "^17.0.2",
1617
"react-dom": "^17.0.2",
1718
"react-scripts": "5.0.0",
@@ -43,6 +44,7 @@
4344
]
4445
},
4546
"devDependencies": {
47+
"@types/lodash": "^4.14.182",
4648
"@types/react": "^17.0.40",
4749
"@types/react-dom": "^17.0.13",
4850
"@types/react-router-dom": "^5.3.3",

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
work correctly both with client-side routing and a non-root public URL.
3434
Learn how to configure a non-root public URL by running `npm run build`.
3535
-->
36-
<title>React App</title>
36+
<title>Segment Example</title>
3737
</head>
3838
<body>
3939
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/examples/shared/BaseApp.tsx

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react"
22
import Navbar from "./NavBar"
33
import { Pane, majorScale } from "evergreen-ui"
4-
import Header from "./Header"
54
import AnalyticsEventSection from "./ExampleSection"
65
import analyticsEventSections from "./example-sections/constants"
76
import TableOfContents from "./TableOfContents"
@@ -23,24 +22,30 @@ const App: React.FC = () => {
2322
return (
2423
<Pane paddingBottom={majorScale(20)}>
2524
<Navbar />
26-
<Pane paddingX={majorScale(30)}>
27-
<Header />
28-
<TableOfContents onContentClick={scrollIntoRefView} />
29-
{analyticsEventSections.map((section, i) => {
30-
const { title, description, example: Example, type } = section
25+
<Pane display="flex" justifyContent="center" marginTop={majorScale(4)}>
26+
<Pane
27+
width={majorScale(93)}
28+
display="flex"
29+
flexDirection="column"
30+
alignItems="center"
31+
>
32+
{analyticsEventSections.map((section, i) => {
33+
const { title, example: Example, type, specLink } = section
3134

32-
return (
33-
<AnalyticsEventSection
34-
key={i}
35-
innerRef={getSectionRef(i)}
36-
title={title}
37-
description={description}
38-
type={type}
39-
>
40-
{Example && <Example />}
41-
</AnalyticsEventSection>
42-
)
43-
})}
35+
return (
36+
<AnalyticsEventSection
37+
key={i}
38+
innerRef={getSectionRef(i)}
39+
title={title}
40+
type={type}
41+
specLink={specLink}
42+
>
43+
{Example && <Example />}
44+
</AnalyticsEventSection>
45+
)
46+
})}
47+
</Pane>
48+
<TableOfContents onContentClick={scrollIntoRefView} />
4449
</Pane>
4550
</Pane>
4651
)

‎src/examples/shared/ExampleSection.tsx

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,56 @@
11
import React from "react"
2-
import { Pane, Heading, majorScale, Text } from "evergreen-ui"
2+
import { Pane, Heading, majorScale, Button, ShareIcon } from "evergreen-ui"
33
import { Ref } from "react"
44
import { AnalyticsEventSection } from "./example-sections/constants"
55

66
interface ExampleSectionProps extends AnalyticsEventSection {
77
innerRef: Ref<HTMLDivElement>
88
children: React.ReactNode
9+
specLink?: string
910
}
1011

1112
const ExampleSection: React.FC<ExampleSectionProps> = ({
1213
title,
13-
description,
1414
children,
1515
innerRef,
1616
type,
17+
specLink,
1718
}) => {
1819
const isHeader = type === "header"
20+
const isPageHeader = type === "page header"
21+
22+
let textSize = 700
23+
if (isPageHeader) {
24+
textSize = 900
25+
} else if (isHeader) {
26+
textSize = 800
27+
}
28+
29+
const handleClickSpec = () => {
30+
window.open(specLink, "_blank")
31+
}
1932
return (
2033
<Pane
2134
ref={innerRef}
2235
display="flex"
2336
flexDirection="column"
24-
borderTop={isHeader ? "1px solid black" : true}
25-
paddingY={majorScale(4)}
37+
marginBottom={majorScale(5)}
38+
width="100%"
2639
>
27-
<Heading size={isHeader ? 800 : 600}>{title}</Heading>
28-
<Text
29-
marginTop={majorScale(1)}
30-
marginBottom={description ? majorScale(3) : majorScale(1)}
31-
>
32-
{description}
33-
</Text>
34-
{children}
40+
<Pane display="flex">
41+
<Heading size={textSize}>{title}</Heading>
42+
{specLink && (
43+
<Button
44+
onClick={handleClickSpec}
45+
iconAfter={ShareIcon}
46+
appearance="minimal"
47+
marginLeft={majorScale(1)}
48+
>
49+
View full spec
50+
</Button>
51+
)}
52+
</Pane>
53+
<Pane>{children}</Pane>
3554
</Pane>
3655
)
3756
}

‎src/examples/shared/FormField.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@ interface Props {
66
onFormSubmit: (value: string) => void
77
buttonText?: string
88
formLabel?: string
9+
placeholder?: string
10+
isCompact?: boolean
911
}
1012

1113
const FormField: React.FC<Props> = ({
1214
onFormSubmit,
1315
onInputChange = () => null,
1416
buttonText = "Submit",
1517
formLabel = "Name",
18+
placeholder,
19+
isCompact,
1620
}) => {
1721
const [formValue, setFormValue] = useState<string>("")
1822
const [isFormInvalid, setIsFormInvalid] = useState<boolean>(false)
@@ -30,19 +34,25 @@ const FormField: React.FC<Props> = ({
3034
onFormSubmit(formValue)
3135
}
3236
return (
33-
<Pane display="flex" alignItems="center">
37+
<Pane
38+
display="flex"
39+
flexDirection={isCompact ? "row" : "column"}
40+
alignItems={isCompact ? "center" : undefined}
41+
>
3442
<TextInputField
3543
width={majorScale(30)}
3644
isInvalid={isFormInvalid}
3745
required
3846
label={formLabel}
3947
value={formValue}
4048
onChange={handleInputChange}
49+
placeholder={placeholder}
4150
/>
4251
<Button
4352
appearance="primary"
4453
onClick={handleFormSubmit}
45-
marginLeft={majorScale(1)}
54+
width={majorScale(15)}
55+
marginLeft={isCompact ? majorScale(1) : undefined}
4656
>
4757
{buttonText}
4858
</Button>

‎src/examples/shared/Header.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React from "react"
2-
import { Pane, Heading, majorScale, Text } from "evergreen-ui"
2+
import { Pane, majorScale, Text, Link } from "evergreen-ui"
33

44
const Header: React.FC = () => (
5-
<Pane
6-
display="flex"
7-
flexDirection="column"
8-
paddingY={majorScale(4)}
9-
borderBottom
10-
>
11-
<Heading size={800}>Getting Started</Heading>
12-
<Text marginTop={majorScale(1)}>
13-
This page has examples implementing Segment’s Page, Track, Identify, and
14-
Group calls.
5+
<Pane display="flex" flexDirection="column">
6+
<Text marginTop={majorScale(4)}>
7+
We’ve implemented dummy data on this site so that when you click different
8+
buttons on the page, you’ll be able to see each test event flow through
9+
your Segment debugger. In order to make this happen, you’ll need to
10+
<Link
11+
href="https://github.com/segmentio/react-example#using-this-repository-as-a-segment-source"
12+
target="_blank"
13+
>
14+
{" "}
15+
fork the repository{" "}
16+
</Link>
17+
and add it as a Source in the Segment app.
1518
</Text>
1619
</Pane>
1720
)

‎src/examples/shared/NavBar.tsx

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,5 @@
11
import React from "react"
2-
import {
3-
Pane,
4-
Button,
5-
GlobeIcon,
6-
GitRepoIcon,
7-
BookIcon,
8-
majorScale,
9-
IconButton,
10-
} from "evergreen-ui"
11-
12-
const NavButton: React.FC<{
13-
icon: typeof GlobeIcon | typeof GitRepoIcon
14-
href: string
15-
}> = ({ icon, href }) => (
16-
<IconButton
17-
icon={icon}
18-
outline="none"
19-
appearance="minimal"
20-
is="a"
21-
marginRight={majorScale(1)}
22-
href={href}
23-
target="blank_"
24-
/>
25-
)
2+
import { Pane, Button, GlobeIcon, majorScale } from "evergreen-ui"
263

274
const Navbar: React.FC = () => (
285
<Pane
@@ -50,13 +27,6 @@ const Navbar: React.FC = () => (
5027
Segment
5128
</Button>
5229
</Pane>
53-
<Pane>
54-
<NavButton
55-
icon={GitRepoIcon}
56-
href="https://github.com/segmentio/react-example"
57-
/>
58-
<NavButton icon={BookIcon} href="https://segment.com/docs/" />
59-
</Pane>
6030
</Pane>
6131
)
6232

‎src/examples/shared/TableOfContents.tsx

Lines changed: 81 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,93 @@
11
import React from "react"
2-
import { Pane, majorScale, Link } from "evergreen-ui"
2+
import {
3+
Pane,
4+
majorScale,
5+
Link,
6+
Heading,
7+
GitRepoIcon,
8+
ManualIcon,
9+
Text,
10+
minorScale,
11+
} from "evergreen-ui"
312
import analyticsEventSections from "./example-sections/constants"
413

514
const TableOfContents: React.FC<{
615
onContentClick: (index: number) => void
716
}> = ({ onContentClick }) => {
17+
const handleClickExternalLink = (link: string) => {
18+
window.open(link, "_blank")
19+
}
820
return (
9-
<Pane
10-
display="flex"
11-
flexDirection="column"
12-
paddingY={majorScale(4)}
13-
borderBottom
14-
>
15-
{analyticsEventSections.map((eventSection, i) => {
16-
const { title, type } = eventSection
17-
return (
18-
<Link
19-
key={i}
21+
<Pane>
22+
<Pane
23+
width={majorScale(24)}
24+
marginLeft={majorScale(8)}
25+
position="sticky"
26+
top={majorScale(4)}
27+
>
28+
<Pane
29+
display="flex"
30+
flexDirection="column"
31+
alignItems="flex-start"
32+
justifyContent="center"
33+
paddingBottom={majorScale(5)}
34+
>
35+
<Pane
36+
marginBottom={minorScale(3)}
37+
display="flex"
38+
alignItems="center"
2039
cursor="pointer"
21-
onClick={() => {
22-
onContentClick(i)
23-
}}
24-
marginTop={i === 0 ? undefined : majorScale(1)}
25-
marginLeft={type === "header" ? undefined : majorScale(2)}
40+
onClick={() =>
41+
handleClickExternalLink(
42+
"https://github.com/segmentio/react-example"
43+
)
44+
}
2645
>
27-
{title}
28-
</Link>
29-
)
30-
})}
46+
<GitRepoIcon marginRight={minorScale(1)} color="muted" />
47+
<Text color="muted">Github Repository</Text>
48+
</Pane>
49+
<Pane
50+
display="flex"
51+
alignItems="center"
52+
cursor="pointer"
53+
onClick={() => handleClickExternalLink("https://segment.com/docs/")}
54+
>
55+
<ManualIcon marginRight={minorScale(1)} color="muted" />
56+
<Text color="muted">Segment Documentation</Text>
57+
</Pane>
58+
</Pane>
59+
<Pane
60+
display="flex"
61+
flexDirection="column"
62+
paddingTop={majorScale(5)}
63+
borderTop
64+
>
65+
<Heading size={400} marginBottom={majorScale(1)}>
66+
On this site
67+
</Heading>
68+
{analyticsEventSections.map((eventSection, i) => {
69+
const { title, type } = eventSection
70+
return (
71+
<Link
72+
key={i}
73+
cursor="pointer"
74+
onClick={() => {
75+
onContentClick(i)
76+
}}
77+
marginTop={i === 0 ? undefined : majorScale(1)}
78+
marginLeft={
79+
type === "header" || type === "page header"
80+
? undefined
81+
: majorScale(2)
82+
}
83+
color="neutral"
84+
>
85+
{title}
86+
</Link>
87+
)
88+
})}
89+
</Pane>
90+
</Pane>
3191
</Pane>
3292
)
3393
}

0 commit comments

Comments
 (0)