-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into sean/storefront
Showing
25 changed files
with
561 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import DropdownArrow from '@/public/assets/icons/dropdown-arrows.svg'; | ||
import { ReactNode, useEffect, useState } from 'react'; | ||
import styles from './style.module.scss'; | ||
|
||
interface Option { | ||
value: string; | ||
label: string; | ||
} | ||
|
||
interface DropdownProps { | ||
name: string; | ||
ariaLabel: string; | ||
options: (Option | '---')[]; | ||
value: string; | ||
// Justification for disabling rules: This seems to be a false positive. | ||
// https://stackoverflow.com/q/63767199/ | ||
// eslint-disable-next-line no-unused-vars | ||
onChange: (value: string) => void; | ||
} | ||
|
||
const Dropdown = ({ name, ariaLabel, options, value, onChange }: DropdownProps) => { | ||
const [open, setOpen] = useState(false); | ||
|
||
useEffect(() => { | ||
document.addEventListener('click', event => { | ||
if (event.target instanceof Element && event.target.closest(`.${styles.dropdownWrapper}`)) { | ||
return; | ||
} | ||
setOpen(false); | ||
}); | ||
}, [open]); | ||
|
||
const optionButtons: ReactNode[] = []; | ||
let dividers = 0; | ||
options.forEach(option => { | ||
if (option === '---') { | ||
optionButtons.push(<hr key={dividers} />); | ||
dividers += 1; | ||
} else { | ||
optionButtons.push( | ||
<button | ||
type="button" | ||
className={styles.option} | ||
onClick={event => { | ||
onChange(option.value); | ||
setOpen(false); | ||
event.stopPropagation(); | ||
}} | ||
key={option.value} | ||
> | ||
{option.label} | ||
</button> | ||
); | ||
} | ||
}); | ||
|
||
return ( | ||
// Justification for disabling rules: For accessibility reasons, the | ||
// original <select> should be available for keyboard and screen reader | ||
// users. Only the fancy, inaccessible dropdown should be available for | ||
// mouse/touch users. | ||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions | ||
<div | ||
className={styles.dropdownWrapper} | ||
onClick={e => { | ||
// Using the keyboard to select an option fires the click event on | ||
// <select>; prevent it from opening the fake dropdown. The <select> has | ||
// pointer-events: none so it shouldn't receive the click event any | ||
// other way. | ||
if (e.target instanceof HTMLElement && e.target.tagName === 'SELECT') { | ||
return; | ||
} | ||
setOpen(true); | ||
}} | ||
> | ||
<select | ||
name={name} | ||
id={name} | ||
value={value} | ||
onChange={e => onChange(e.currentTarget.value)} | ||
aria-label={ariaLabel} | ||
> | ||
{options.map(option => | ||
option !== '---' ? ( | ||
<option value={option.value} key={option.value}> | ||
{option.label} | ||
</option> | ||
) : null | ||
)} | ||
</select> | ||
<DropdownArrow className={styles.arrow} aria-hidden /> | ||
<div className={`${styles.contents} ${open ? '' : styles.closed}`}>{optionButtons}</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Dropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
@use 'src/styles/vars.scss' as vars; | ||
|
||
.dropdownWrapper { | ||
align-items: center; | ||
cursor: pointer; | ||
display: flex; | ||
gap: 9px; | ||
grid-area: 1 / 2; | ||
position: relative; | ||
|
||
select { | ||
appearance: none; | ||
background: none; | ||
border: 0; | ||
color: inherit; | ||
font: inherit; | ||
font-size: 1.5rem; | ||
font-weight: bold; | ||
pointer-events: none; | ||
width: 100%; | ||
|
||
option { | ||
background-color: var(--theme-background); | ||
} | ||
} | ||
|
||
.arrow { | ||
flex: none; | ||
} | ||
|
||
.contents { | ||
background-color: var(--theme-background); | ||
border-radius: 4px; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); | ||
cursor: default; | ||
left: 0; | ||
margin-top: 1rem; | ||
padding: 4px 0; | ||
position: absolute; | ||
right: 0; | ||
top: 100%; | ||
transition: all 0.2s; | ||
z-index: 5; | ||
|
||
&.closed { | ||
opacity: 0; | ||
transform: translateY(10px); | ||
visibility: hidden; | ||
} | ||
|
||
.option { | ||
background: none; | ||
font: inherit; | ||
padding: 5px 0.75rem; | ||
text-align: left; | ||
width: 100%; | ||
|
||
&:hover { | ||
background-color: var(--theme-surface-1); | ||
} | ||
} | ||
|
||
hr { | ||
border-top: 1px solid var(--theme-surface-1); | ||
margin: 4px 0; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
export type Styles = { | ||
arrow: string; | ||
closed: string; | ||
contents: string; | ||
dropdownWrapper: string; | ||
option: string; | ||
}; | ||
|
||
export type ClassNames = keyof Styles; | ||
|
||
declare const styles: Styles; | ||
|
||
export default styles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import LeftArrowIcon from '@/public/assets/icons/page-left-icon.svg'; | ||
import RightArrowIcon from '@/public/assets/icons/page-right-icon.svg'; | ||
import { useEffect, useState } from 'react'; | ||
import style from './style.module.scss'; | ||
|
||
interface PaginationControlsProps { | ||
page: number; | ||
// eslint-disable-next-line no-unused-vars | ||
onPage: (page: number) => void; | ||
pages: number; | ||
} | ||
|
||
const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) => { | ||
const [value, setValue] = useState(String(page + 1)); | ||
|
||
useEffect(() => { | ||
setValue(String(page + 1)); | ||
}, [page]); | ||
|
||
return ( | ||
<div className={style.paginationBtns}> | ||
<button | ||
type="button" | ||
className={style.paginationBtn} | ||
onClick={() => onPage(page - 1)} | ||
disabled={page <= 0} | ||
> | ||
<LeftArrowIcon /> | ||
</button> | ||
<div className={style.paginationText}> | ||
<input | ||
className={style.pageNumber} | ||
type="text" | ||
inputMode="numeric" | ||
pattern="[0-9]*" | ||
value={value} | ||
onChange={e => { | ||
setValue(e.currentTarget.value); | ||
const page = +e.currentTarget.value - 1; | ||
if (Number.isInteger(page) && page >= 0 && page < pages) { | ||
onPage(page); | ||
} | ||
}} | ||
onBlur={e => { | ||
// Clamp page number between 1 and pages | ||
const inputPage = Math.min( | ||
Math.max(Math.trunc(+e.currentTarget.value - 1), 0), | ||
pages - 1 | ||
); | ||
if (Number.isNaN(inputPage)) { | ||
setValue(String(page + 1)); | ||
} else { | ||
onPage(inputPage); | ||
setValue(String(inputPage + 1)); | ||
} | ||
}} | ||
/> | ||
<span>of</span> | ||
<span className={style.pageNumber}>{pages}</span> | ||
</div> | ||
<button | ||
type="button" | ||
className={style.paginationBtn} | ||
onClick={() => onPage(page + 1)} | ||
disabled={page >= pages - 1} | ||
> | ||
<RightArrowIcon /> | ||
</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default PaginationControls; |
37 changes: 37 additions & 0 deletions
37
src/components/common/PaginationControls/style.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
.paginationBtns { | ||
align-items: center; | ||
display: flex; | ||
gap: 20px; | ||
justify-content: center; | ||
|
||
.paginationBtn { | ||
background: none; | ||
font-size: 0; | ||
padding: 0; | ||
|
||
&:disabled { | ||
cursor: auto; | ||
opacity: 0.5; | ||
} | ||
} | ||
|
||
.paginationText { | ||
align-items: center; | ||
display: flex; | ||
font-weight: bold; | ||
gap: 1em; | ||
|
||
.pageNumber { | ||
width: 24px; | ||
|
||
&:is(input) { | ||
border: 1px solid var(--theme-text-on-background-1); | ||
border-radius: 2px; | ||
color: inherit; | ||
font: inherit; | ||
height: 24px; | ||
text-align: center; | ||
} | ||
} | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
src/components/common/PaginationControls/style.module.scss.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
export type Styles = { | ||
pageNumber: string; | ||
paginationBtn: string; | ||
paginationBtns: string; | ||
paginationText: string; | ||
}; | ||
|
||
export type ClassNames = keyof Styles; | ||
|
||
declare const styles: Styles; | ||
|
||
export default styles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
export { default as Button } from './Button'; | ||
export { default as Dropdown } from './Dropdown'; | ||
export { default as PaginationControls } from './PaginationControls'; | ||
export { default as SEO } from './SEO'; | ||
export { default as VerticalForm } from './VerticalForm'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
export type Styles = { | ||
flash: string; | ||
match: string; | ||
name: string; | ||
nameRank: string; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,2 @@ | ||
/* eslint-disable import/prefer-default-export */ | ||
export { default as LeaderboardRow } from './LeaderboardRow'; | ||
export { default as TopThreeCard } from './TopThreeCard'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,5 @@ | ||
export type Styles = { | ||
container: string; | ||
flash: string; | ||
header: string; | ||
heading: string; | ||
leaderboard: string; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters