Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit fac6b63

Browse files
brooketopcoderbrooketopcoder
committed
PROD-1551_header #comment replace profile panel #time 3h
1 parent c0b4c69 commit fac6b63

40 files changed

+1277
-14
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"webpack-merge": "^4.2.2"
6060
},
6161
"dependencies": {
62+
"@heroicons/react": "^1.0.6",
6263
"@reach/router": "^1.3.4",
6364
"axios": "^0.21.1",
6465
"browser-cookies": "^1.2.0",

‎src-ts/declarations.d.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
declare module '*.html' {
2+
const htmlFile: string
3+
export = htmlFile
4+
}
5+
6+
declare module '*.scss' {
7+
const scssFile: { [style: string]: any }
8+
export = scssFile
9+
}
10+
11+
declare module '@reach/router'

‎src-ts/lib/avatar/Avatar.module.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import '../../lib/styles';
2+
3+
$avatar-size-sm: 36px;
4+
$border-size-sm: $border;
5+
$avatar-size-xl: 120px;
6+
$border-size-xl: $pad-xs;
7+
8+
.avatar-container {
9+
overflow: hidden;
10+
background-color: $tc-white;
11+
border-radius: 50%;
12+
13+
&.sm {
14+
height: $avatar-size-sm;
15+
width: $avatar-size-sm;
16+
}
17+
18+
&.xl {
19+
height: 128px;
20+
width: 128px;
21+
}
22+
23+
.avatar {
24+
background-color: $tc-white;
25+
border-radius: 50%;
26+
border: solid $tc-white;
27+
28+
&.sm {
29+
border-width: $border-size-sm;
30+
height: $avatar-size-sm;
31+
width: $avatar-size-sm;
32+
}
33+
34+
&.xl {
35+
border-width: $border-size-xl;
36+
height: $avatar-size-xl;
37+
width: $avatar-size-xl;
38+
}
39+
}
40+
41+
.avatar-letters {
42+
display: flex;
43+
justify-content: center;
44+
text-transform: uppercase;
45+
align-items: center;
46+
color: $tc-white;
47+
background-color: $blue-100;
48+
@include font-weight-medium;
49+
50+
&.sm {
51+
@extend .medium-subtitle;
52+
}
53+
54+
&.xl {
55+
@include font-barlow-condensed;
56+
text-transform: uppercase;
57+
margin: 0;
58+
letter-spacing: 0;
59+
padding: 24px 0;
60+
@include font-weight-semi-bold;
61+
font-size: 34px;
62+
line-height: 32px;
63+
padding: 0;
64+
}
65+
}
66+
}

‎src-ts/lib/avatar/Avatar.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import classNames from 'classnames'
2+
import { FC } from 'react'
3+
4+
import styles from './Avatar.module.scss'
5+
6+
interface AvatarProps {
7+
containerClass?: string
8+
firstName?: string
9+
handle?: string
10+
lastName?: string
11+
photoUrl?: string
12+
size: 'sm' | 'xl'
13+
}
14+
15+
const Avatar: FC<AvatarProps> = (props: AvatarProps) => {
16+
17+
// if we don't have a profile and either a photo or an initial, just return an empty element
18+
if (!props.photoUrl && !props.firstName && !props.lastName) {
19+
return <></>
20+
}
21+
22+
const avatarElement: JSX.Element = !!props.photoUrl
23+
? (
24+
<img
25+
alt={`${props.handle} avatar`}
26+
className={classNames(styles.avatar, styles[props.size])}
27+
src={props.photoUrl}
28+
/>
29+
)
30+
: (
31+
<span className={classNames(styles.avatar, styles['avatar-letters'], styles[props.size])}>
32+
{props.firstName?.charAt(0)}
33+
{props.lastName?.charAt(0)}
34+
</span>
35+
)
36+
37+
return (
38+
<div className={classNames(styles['avatar-container'], styles[props.size], props.containerClass)}>
39+
{avatarElement}
40+
</div>
41+
)
42+
}
43+
44+
export default Avatar

‎src-ts/lib/avatar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Avatar } from './Avatar'

‎src-ts/lib/button/Button.module.scss

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
@import '../styles';
2+
3+
.button {
4+
color: $tc-white;
5+
text-transform: uppercase;
6+
border-radius: 25px;
7+
border: solid $border;
8+
white-space: nowrap;
9+
cursor: pointer;
10+
margin: $pad-md;
11+
// extend body ultra small medium and override it
12+
@extend .body-ultra-small-medium;
13+
line-height: 24px;
14+
15+
&:focus {
16+
outline: $border solid $turq-140;
17+
}
18+
19+
&.button-sm {
20+
padding: 0 $pad-lg;
21+
font-size: 12px;
22+
}
23+
24+
&.button-md {
25+
padding: $pad-xs $pad-xl;
26+
font-size: 13px;
27+
}
28+
29+
&.button-lg {
30+
padding: $pad-sm $pad-xxl;
31+
font-size: 14px;
32+
}
33+
34+
&.button-xl {
35+
padding: $pad-md $pad-xxl;
36+
font-size: 16px;
37+
}
38+
39+
&.primary {
40+
color: $tc-white;
41+
background-color: $turq-160;
42+
border-color: $turq-160;
43+
44+
&:hover {
45+
background-color: $turq-140;
46+
border-color: $turq-140;
47+
}
48+
49+
&:active {
50+
background-color: $turq-180;
51+
border-color: $turq-180;
52+
}
53+
54+
&.disabled {
55+
color: $black-60;
56+
background-color: $black-5;
57+
border-color: $black-5;
58+
}
59+
}
60+
61+
&.secondary {
62+
color: $turq-160;
63+
background-color: $tc-white;
64+
border-color: $turq-160;
65+
66+
&:hover {
67+
border-color: $turq-140;
68+
}
69+
70+
&:active {
71+
border-color: $turq-180;
72+
}
73+
74+
&.disabled {
75+
color: $black-60;
76+
background-color: $black-5;
77+
border-color: $black-5;
78+
}
79+
}
80+
81+
&.tertiary {
82+
color: $turq-160;
83+
background-color: $tc-white;
84+
border-color: $tc-white;
85+
86+
&:hover {
87+
color: $turq-140;
88+
}
89+
90+
&:active {
91+
color: $turq-180;
92+
}
93+
94+
&.disabled {
95+
color: $black-60;
96+
background-color: $tc-white;
97+
border-color: $black-5;
98+
}
99+
}
100+
101+
&.link {
102+
margin: 0;
103+
padding: 0;
104+
display: flex;
105+
align-items: center;
106+
font-size: 16px;
107+
color: $turq-160;
108+
background-color: $tc-white;
109+
border: none;
110+
outline: none;
111+
border-radius: 0;
112+
113+
&:focus {
114+
outline: $border solid $turq-140;
115+
}
116+
117+
&:hover {
118+
color: $turq-120;
119+
}
120+
121+
&:active {
122+
color: $turq-180;
123+
}
124+
125+
&.disabled {
126+
color: $black-60;
127+
background-color: $tc-white;
128+
border-color: $black-5;
129+
}
130+
131+
svg {
132+
margin-left: $pad-xs;
133+
height: $pad-lg;
134+
width: $pad-lg;
135+
}
136+
}
137+
138+
&.text {
139+
border-color: transparent;
140+
}
141+
}

‎src-ts/lib/button/Button.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Link } from '@reach/router'
2+
import classNames from 'classnames'
3+
import { FC } from 'react'
4+
5+
import { IconOutline } from '../svgs'
6+
7+
import styles from './Button.module.scss'
8+
9+
export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
10+
export type ButtonStyle = 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
11+
export type ButtonType = 'button' | 'submit'
12+
13+
export interface ButtonProps {
14+
readonly buttonStyle?: ButtonStyle
15+
readonly className?: string
16+
readonly disable?: boolean
17+
readonly label: string
18+
readonly onClick?: (event?: any) => void
19+
readonly route?: string
20+
readonly size?: ButtonSize
21+
readonly tabIndex: number
22+
readonly type?: ButtonType
23+
readonly url?: string
24+
}
25+
26+
const Button: FC<ButtonProps> = (props: ButtonProps) => {
27+
28+
const classes: string = getButtonClasses(props)
29+
const clickHandler: (event?: any) => void = getClickHandler(props)
30+
31+
// if there is a url, this is a link button
32+
if (!!props.url) {
33+
return (
34+
<a
35+
className={classes}
36+
href={props.url}
37+
onClick={clickHandler}
38+
tabIndex={props.tabIndex}
39+
>
40+
{props.label}
41+
</a>
42+
)
43+
}
44+
45+
if (!!props.route) {
46+
return (
47+
<Link
48+
className={classes}
49+
onClick={clickHandler}
50+
tabIndex={props.tabIndex}
51+
to={props.route}
52+
>
53+
{props.label}
54+
</Link>
55+
)
56+
}
57+
58+
return (
59+
<button
60+
className={classes}
61+
onClick={clickHandler}
62+
tabIndex={props.tabIndex}
63+
type={props.type || 'button'}
64+
>
65+
{props.label}
66+
{props.buttonStyle === 'link' && <IconOutline.ArrowRightIcon />}
67+
</button>
68+
)
69+
}
70+
71+
function getButtonClasses(props: ButtonProps): string {
72+
const classes: string = classNames(
73+
styles.button,
74+
props.className,
75+
!!props.buttonStyle ? styles[props.buttonStyle] : styles.primary,
76+
styles[`button-${props.size || 'md'}`],
77+
!!props.disable ? styles.disabled : undefined
78+
)
79+
return classes
80+
}
81+
82+
function getClickHandler(props: ButtonProps): (event?: any) => void {
83+
return props.onClick || (() => undefined)
84+
}
85+
86+
export default Button

‎src-ts/lib/button/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export { default as Button } from './Button'
2+
export
3+
// tslint:disable-next-line: no-unused-expression
4+
type { ButtonSize } from './Button'
5+
export
6+
// tslint:disable-next-line: no-unused-expression
7+
type { ButtonStyle } from './Button'
8+
export
9+
// tslint:disable-next-line: no-unused-expression
10+
type { ButtonType } from './Button'

0 commit comments

Comments
 (0)