diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx
index 3bbbe6e5..9639ab88 100644
--- a/src/config/lexics/indexLexics.tsx
+++ b/src/config/lexics/indexLexics.tsx
@@ -2,6 +2,8 @@ import { proceduresLexics } from './procedures'
export const indexLexics = {
basketball: 6960,
+ broadcast: 13049,
+ features: 13051,
football: 6958,
full_game: 13028,
game_finished: 13026,
@@ -20,6 +22,8 @@ export const indexLexics = {
match_video: 13025,
player: 630,
players_video: 13032,
+ round_highilights: 13050,
+ select_language: 1005,
sport: 12993,
team: 658,
tournament: 1009,
diff --git a/src/features/HeaderFilters/components/DateFilter/index.tsx b/src/features/HeaderFilters/components/DateFilter/index.tsx
index 67837afd..7dc681c7 100644
--- a/src/features/HeaderFilters/components/DateFilter/index.tsx
+++ b/src/features/HeaderFilters/components/DateFilter/index.tsx
@@ -29,7 +29,11 @@ export const DateFilter = () => {
} = useDateFilter()
return (
-
diff --git a/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx b/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
index b680bf90..59cd429f 100644
--- a/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
@@ -1,6 +1,8 @@
import styled from 'styled-components/macro'
-export const RadioButtonGroup = styled.div`
+export const RadioButtonGroup = styled.div.attrs({
+ role: 'group',
+})`
height: 100%;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 2px;
@@ -12,7 +14,9 @@ type RadioButtonProps = {
selected?: boolean,
}
-export const RadioButton = styled.button`
+export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps) => ({
+ 'aria-pressed': selected,
+}))`
border: none;
outline: none;
height: 100%;
diff --git a/src/features/HeaderFilters/components/SportTypeFilter/index.tsx b/src/features/HeaderFilters/components/SportTypeFilter/index.tsx
index 8411dc68..9c527d73 100644
--- a/src/features/HeaderFilters/components/SportTypeFilter/index.tsx
+++ b/src/features/HeaderFilters/components/SportTypeFilter/index.tsx
@@ -29,7 +29,12 @@ export const SportTypeFilter = () => {
return (
-
+
@@ -39,7 +44,7 @@ export const SportTypeFilter = () => {
{
isOpen && (
-
+
{
map(sportList, ({
id,
@@ -48,10 +53,12 @@ export const SportTypeFilter = () => {
}) => (
onSelect(id)}
- />
+ role='option'
+ >
+
+
))
}
diff --git a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
index 102e59ac..d54149c6 100644
--- a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
@@ -1,7 +1,5 @@
import styled from 'styled-components/macro'
-import { T9n } from 'features/T9n'
-
import { DropdownButton } from '../TournamentFilter/styled'
export const Wrapper = styled.div`
@@ -27,7 +25,7 @@ export const SportList = styled.ul`
z-index: 1;
`
-export const CustomOption = styled(T9n)<{ image: string }>`
+export const CustomOption = styled.li<{ image: string }>`
width: 100%;
height: 48px;
display: flex;
diff --git a/src/features/HeaderFilters/components/TournamentFilter/index.tsx b/src/features/HeaderFilters/components/TournamentFilter/index.tsx
index 1ff1a31f..caf23e69 100644
--- a/src/features/HeaderFilters/components/TournamentFilter/index.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/index.tsx
@@ -24,7 +24,12 @@ export const TournamentFilter = () => {
} = useTournamentFilter()
return (
-
+
{
selectedTournament
@@ -37,7 +42,7 @@ export const TournamentFilter = () => {
{
isOpen && (
-
+
+
{map(tournaments, ({
color,
country,
@@ -47,7 +47,11 @@ export const TournamentList = ({ onSelect, tournaments }: TournamentListProps) =
name,
sportLexic,
}) => (
- onSelect(id)}>
+ onSelect(id)}
+ role='option'
+ >
{
broadcast: [],
features: [],
highlights: [],
+ isVideoSections: false,
})
// временно здесь запрашиваются матчи при изменении фильтров,
@@ -119,6 +120,7 @@ export const useFilters = () => {
broadcast: prepareMatches(matches.broadcast),
features: prepareMatches(matches.features),
highlights: prepareMatches(matches.highlights),
+ isVideoSections: matches.isVideoSections,
}
const store = useMemo(() => ({
diff --git a/src/features/HomePage/components/Matches/hooks.tsx b/src/features/HomePage/components/Matches/hooks.tsx
deleted file mode 100644
index 7d3fd7c8..00000000
--- a/src/features/HomePage/components/Matches/hooks.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import size from 'lodash/size'
-import slice from 'lodash/slice'
-import chunk from 'lodash/chunk'
-
-import type { Match } from 'features/HeaderFilters'
-import { useHeaderFiltersStore } from 'features/HeaderFilters'
-
-const MATCHES_PER_ROW = 6
-
-const ROWS_COUNT = 3
-
-export const useMatches = () => {
- const {
- matches: {
- broadcast: matchesList,
- },
- } = useHeaderFiltersStore()
- const matchesCount = size(matchesList)
-
- let groupedMatches: Array> = []
-
- /**
- * Распределяем матчи в ROWS_COUNT рядов
- * Если общее количество матчей не больше количества
- * ячеек в сетке размера ROWS_COUNT x MATCHES_PER_ROW,
- * заполняем по максимуму каждый ряд с MATCHES_PER_ROW
- * матчей в каждом, иначе распределяем поровну
- */
- if (matchesCount <= MATCHES_PER_ROW * ROWS_COUNT) {
- for (let i = 0; i < ROWS_COUNT; i++) {
- const matches = slice(
- matchesList,
- i * MATCHES_PER_ROW,
- i * MATCHES_PER_ROW + MATCHES_PER_ROW,
- )
- groupedMatches.push(matches)
- }
- } else {
- groupedMatches = chunk(matchesList, Math.ceil(matchesCount / ROWS_COUNT))
- }
-
- return {
- groupedMatches,
- }
-}
diff --git a/src/features/HomePage/components/Matches/index.tsx b/src/features/HomePage/components/Matches/index.tsx
deleted file mode 100644
index 5309f433..00000000
--- a/src/features/HomePage/components/Matches/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Fragment } from 'react'
-
-import map from 'lodash/map'
-
-import { MatchesSlider } from 'features/MatchesSlider'
-
-import { useMatches } from './hooks'
-
-export const Matches = () => {
- const { groupedMatches } = useMatches()
-
- return (
-
- {map(groupedMatches, (matches, i) => (
-
- ))}
-
- )
-}
diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx
index 0c8833f6..fa7bddbb 100644
--- a/src/features/HomePage/index.tsx
+++ b/src/features/HomePage/index.tsx
@@ -13,14 +13,9 @@ import {
HeaderFiltersStore,
} from 'features/HeaderFilters'
import { UserFavorites } from 'features/UserFavorites'
-import { T9n } from 'features/T9n'
+import { Matches } from 'features/Matches'
-import { Matches } from './components/Matches'
-import {
- FilterWrapper,
- Title,
- Content,
-} from './styled'
+import { FilterWrapper, Content } from './styled'
export const HomePage = () => {
useLexicsConfig(homeLexics)
@@ -48,7 +43,6 @@ export const HomePage = () => {
-
diff --git a/src/features/HomePage/styled.tsx b/src/features/HomePage/styled.tsx
index b086e528..0c029bc6 100644
--- a/src/features/HomePage/styled.tsx
+++ b/src/features/HomePage/styled.tsx
@@ -11,12 +11,3 @@ export const Content = styled.main`
margin-top: 75px;
padding: 0 16px;
`
-
-export const Title = styled.h1`
- margin-bottom: 17px;
- font-weight: bold;
- font-size: 36px;
- line-height: 24px;
- letter-spacing: -0.02em;
- color: #fff;
-`
diff --git a/src/features/LanguageSelect/index.tsx b/src/features/LanguageSelect/index.tsx
index 31aa1111..3bbcf194 100644
--- a/src/features/LanguageSelect/index.tsx
+++ b/src/features/LanguageSelect/index.tsx
@@ -37,9 +37,11 @@ export const LanguageSelect = () => {
onClick={open}
active={isOpen}
title={translate('select_language')}
+ aria-expanded={isOpen}
+ aria-controls='langsList'
/>
{isOpen && (
-
+
{
map(
langsList,
diff --git a/src/features/LanguageSelect/styled.tsx b/src/features/LanguageSelect/styled.tsx
index 6357258e..eaa685c6 100644
--- a/src/features/LanguageSelect/styled.tsx
+++ b/src/features/LanguageSelect/styled.tsx
@@ -10,10 +10,12 @@ type WorldIconProps = {
active?: boolean,
}
-export const WorldIcon = styled.span`
+export const WorldIcon = styled.button`
display: block;
width: 18px;
height: 18px;
+ border: none;
+ background: none;
background-image: url(/images/worldIcon.svg);
background-position-x: -1px;
cursor: pointer;
diff --git a/src/features/MatchesSlider/components/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx
similarity index 88%
rename from src/features/MatchesSlider/components/CardFinished/index.tsx
rename to src/features/MatchCard/CardFinished/index.tsx
index 6f5790cf..221a0ad7 100644
--- a/src/features/MatchesSlider/components/CardFinished/index.tsx
+++ b/src/features/MatchCard/CardFinished/index.tsx
@@ -68,14 +68,14 @@ export const CardFinished = ({
- {tournamentName}
+ {tournamentName}
- {team1Name}
+ {team1Name}
{team1Score}
- {team2Name}
+ {team2Name}
{team2Score}
diff --git a/src/features/MatchesSlider/components/CardFinishedHover/index.tsx b/src/features/MatchCard/CardFinishedHover/index.tsx
similarity index 100%
rename from src/features/MatchesSlider/components/CardFinishedHover/index.tsx
rename to src/features/MatchCard/CardFinishedHover/index.tsx
diff --git a/src/features/MatchesSlider/components/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx
similarity index 91%
rename from src/features/MatchesSlider/components/CardLive/index.tsx
rename to src/features/MatchCard/CardLive/index.tsx
index c3c0daaa..a3f64ecd 100644
--- a/src/features/MatchesSlider/components/CardLive/index.tsx
+++ b/src/features/MatchCard/CardLive/index.tsx
@@ -92,14 +92,14 @@ export const CardLive = ({
- {tournamentName}
+ {tournamentName}
- {team1Name}
+ {team1Name}
{team1Score}
- {team2Name}
+ {team2Name}
{team2Score}
diff --git a/src/features/MatchesSlider/components/CardLiveHover/index.tsx b/src/features/MatchCard/CardLiveHover/index.tsx
similarity index 100%
rename from src/features/MatchesSlider/components/CardLiveHover/index.tsx
rename to src/features/MatchCard/CardLiveHover/index.tsx
diff --git a/src/features/MatchesSlider/components/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx
similarity index 90%
rename from src/features/MatchesSlider/components/CardSoon/index.tsx
rename to src/features/MatchCard/CardSoon/index.tsx
index 8304c9b8..2c69c930 100644
--- a/src/features/MatchesSlider/components/CardSoon/index.tsx
+++ b/src/features/MatchCard/CardSoon/index.tsx
@@ -87,13 +87,13 @@ export const CardSoon = ({
- {tournamentName}
+ {tournamentName}
- {team1Name}
+ {team1Name}
- {team2Name}
+ {team2Name}
diff --git a/src/features/MatchesSlider/config/index.tsx b/src/features/MatchCard/config/index.tsx
similarity index 100%
rename from src/features/MatchesSlider/config/index.tsx
rename to src/features/MatchCard/config/index.tsx
diff --git a/src/features/MatchesSlider/components/MatchCard/index.tsx b/src/features/MatchCard/index.tsx
similarity index 79%
rename from src/features/MatchesSlider/components/MatchCard/index.tsx
rename to src/features/MatchCard/index.tsx
index 99b1e567..684be766 100644
--- a/src/features/MatchesSlider/components/MatchCard/index.tsx
+++ b/src/features/MatchCard/index.tsx
@@ -3,9 +3,9 @@ import React from 'react'
import type { Match } from 'features/HeaderFilters'
import { MatchStatuses } from 'features/HeaderFilters'
-import { CardLive } from '../CardLive'
-import { CardFinished } from '../CardFinished'
-import { CardSoon } from '../CardSoon'
+import { CardLive } from './CardLive'
+import { CardFinished } from './CardFinished'
+import { CardSoon } from './CardSoon'
type MatchCardProps = {
match: Match,
diff --git a/src/features/MatchesSlider/components/styled.tsx b/src/features/MatchCard/styled.tsx
similarity index 96%
rename from src/features/MatchesSlider/components/styled.tsx
rename to src/features/MatchCard/styled.tsx
index 51284ce5..efd95d77 100644
--- a/src/features/MatchesSlider/components/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components/macro'
import { T9n } from 'features/T9n'
-import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from '../config'
+import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from './config'
export const CardWrapper = styled.li.attrs({
tabIndex: 0,
@@ -42,6 +42,7 @@ export const MatchStatus = styled.div`
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
+ white-space: nowrap;
`
export const Info = styled.div`
diff --git a/src/features/Matches/index.tsx b/src/features/Matches/index.tsx
new file mode 100644
index 00000000..d5298625
--- /dev/null
+++ b/src/features/Matches/index.tsx
@@ -0,0 +1,59 @@
+import React, { Fragment } from 'react'
+
+import isEmpty from 'lodash/isEmpty'
+
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
+import { MatchesSlider } from 'features/MatchesSlider'
+import { MatchesGrid } from 'features/MatchesGrid'
+import { T9n } from 'features/T9n'
+
+import { Title, Section } from './styled'
+
+export const Matches = () => {
+ const {
+ matches: {
+ broadcast,
+ features,
+ highlights,
+ isVideoSections,
+ },
+ } = useHeaderFiltersStore()
+
+ if (isVideoSections) {
+ return (
+
+ {!isEmpty(broadcast) && (
+
+ )}
+
+ {!isEmpty(highlights) && (
+
+ )}
+
+ {!isEmpty(features) && (
+
+ )}
+
+ )
+ }
+
+ return (
+
+ {!isEmpty(broadcast) && (
+
+ )}
+
+ )
+}
diff --git a/src/features/Matches/styled.tsx b/src/features/Matches/styled.tsx
new file mode 100644
index 00000000..2f1fe420
--- /dev/null
+++ b/src/features/Matches/styled.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components/macro'
+
+export const Section = styled.section`
+ margin-bottom: 30px;
+`
+
+export const Title = styled.h2`
+ margin-bottom: 17px;
+ font-weight: bold;
+ font-size: 36px;
+ line-height: 24px;
+ letter-spacing: -0.02em;
+ color: #fff;
+`
diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx
new file mode 100644
index 00000000..eb82b4bf
--- /dev/null
+++ b/src/features/MatchesGrid/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+import map from 'lodash/map'
+
+import type { Match } from 'features/HeaderFilters'
+import { MatchCard } from 'features/MatchCard'
+
+import { Wrapper } from './styled'
+
+type MatchesGridProps = {
+ matches: Array,
+}
+
+export const MatchesGrid = ({ matches }: MatchesGridProps) => (
+
+ {map(matches, (match) => )}
+
+)
diff --git a/src/features/MatchesGrid/styled.tsx b/src/features/MatchesGrid/styled.tsx
new file mode 100644
index 00000000..1e1b0420
--- /dev/null
+++ b/src/features/MatchesGrid/styled.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components/macro'
+
+import { MATCH_CARD_WIDTH } from 'features/MatchCard/config'
+
+export const Wrapper = styled.ul`
+ display: grid;
+ grid-template-columns: repeat(6, ${MATCH_CARD_WIDTH}px);
+ grid-gap: 13px;
+`
diff --git a/src/features/MatchesSlider/hooks.tsx b/src/features/MatchesSlider/hooks.tsx
index bda5298e..ff130b72 100644
--- a/src/features/MatchesSlider/hooks.tsx
+++ b/src/features/MatchesSlider/hooks.tsx
@@ -7,10 +7,9 @@ import {
} from 'react'
import type { Match } from 'features/HeaderFilters'
+import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from 'features/MatchCard/config'
import { useToggle } from 'hooks'
-import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from './config'
-
export const useCard = () => {
const {
close,
diff --git a/src/features/MatchesSlider/index.tsx b/src/features/MatchesSlider/index.tsx
index 9ac322e0..b0b5208d 100644
--- a/src/features/MatchesSlider/index.tsx
+++ b/src/features/MatchesSlider/index.tsx
@@ -4,9 +4,9 @@ import map from 'lodash/map'
import isEmpty from 'lodash/isEmpty'
import type { Match } from 'features/HeaderFilters'
+import { MatchCard } from 'features/MatchCard'
import { useMatchesSlider } from './hooks'
-import { MatchCard } from './components/MatchCard'
import {
Wrapper,
Arrow,
diff --git a/src/features/Menu/index.tsx b/src/features/Menu/index.tsx
index c40cf03f..ab93a73d 100644
--- a/src/features/Menu/index.tsx
+++ b/src/features/Menu/index.tsx
@@ -27,9 +27,13 @@ export const Menu = () => {
return (
-
+
{isOpen && (
-
+