+ {title} +
+ + ++ {description} +
+ {image && ( +
+
+ )}
+
- ;
-}
-
-function reducer(state: State, action: Action): State {
- switch(action.type) {
- case 'add years':
- return {
- ...state,
- festival: [...state.festival, action.festival]
- };
- case 'remove year':
- return {
- ...state,
- festival: state.festival.filter(
- ({ value }) => value !== action.festival.value
- )
- };
- case 'add programme':
- return {
- ...state,
- program: [...state.program, action.program]
- };
- case 'remove programme':
- return {
- ...state,
- program: state.program.filter(
- (el, index, arr) => index !== arr.indexOf(action.program)
- )
- };
- case 'reset':
- return {
- festival: [],
- program: []
- };
- default:
- return state;
- }
-}
-
-export default reducer;
diff --git a/src/components/library-filter/library-filter.module.css b/src/components/library-filter/library-filter.module.css
deleted file mode 100644
index 7dfcd52eb..000000000
--- a/src/components/library-filter/library-filter.module.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.container {
- width: 269px;
-}
-
-.title {
- @mixin headline;
- @mixin headline7;
-
- margin-bottom: 16px;
-}
-
-.years {
- margin-bottom: 38px;
-}
-
-.programmesList {
- display: grid;
- padding: 0;
- margin: 0 0 75px;
- list-style: none;
- row-gap: 13px;
-}
-
-.programme {
- &:hover {
- cursor: pointer;
- }
-}
-
-.buttonWrap {
- display: block;
-
- @media (max-width: $tablet-portrait) {
- display: none;
- }
-}
-
-.mobileButtons {
- display: none;
- max-width: 100%;
- margin-top: 80px;
-
- @media (max-width: $tablet-portrait) {
- display: flex;
- }
-}
-
-.button {
- @media (max-width: $tablet-portrait) {
- width: 183px;
- }
-}
diff --git a/src/components/library-filter/library-filter.stories.tsx b/src/components/library-filter/library-filter.stories.tsx
deleted file mode 100644
index f8f1211e6..000000000
--- a/src/components/library-filter/library-filter.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import LibraryFilter from './library-filter';
-
-export default {
- title: 'Components/LibraryFilter',
- component: LibraryFilter
-} as ComponentMeta;
-
-const Template: ComponentStory = (args) => ;
- filterDispatcher: Dispatch;
- onCheckResults?: () => void;
-}
-
-const LibraryFilter: FC = ({ years, programmes, filterDispatcher, onCheckResults }) => {
- const filterState = useContext(LibraryFiltersProviderContext);
-
- const handleTagClick = useCallback(
- (el: string): void => {
- if (!filterState.program.find((i) => i === el)) {
- filterDispatcher({ type: 'add programme', program: el });
- } else {
- filterDispatcher({ type: 'remove programme', program: el });
- }
- }, [filterState, filterDispatcher]);
-
- const handleResetClick = useCallback((): void => {
- filterDispatcher({ type: 'reset' });
- }, [filterDispatcher]);
-
- const handleYearsClick = useCallback((years: DroplistOption): void => {
- if (!filterState.festival.find((i) => i.value === years.value)) {
- filterDispatcher({ type: 'add years', festival: years });
- } else {
- filterDispatcher({ type: 'remove year', festival: years });
- }
- }, [filterDispatcher, filterState.festival]);
-
- return (
- ;
-
-const Template: ComponentStory = (args) => ('');
-
- const [urlQuery, setUrlQuery] = useState('');
-
- const handleChange = useCallback((e: ChangeEvent): void => {
- setSearchInput(e.target.value);
- setUrlQuery(encodeURI(`?q=${e.target.value}`));
- }, []);
-
- const handleSubmit = (e: FormEvent): void => {
- e.preventDefault();
- if(urlQuery) {
- router.push(`/library/search-result${urlQuery}`);
- }
- };
-
- return (
-
- );
-};
-
-export default LibraryForm;
diff --git a/src/components/library-layout/index.ts b/src/components/library-layout/index.ts
new file mode 100644
index 000000000..05a225fdc
--- /dev/null
+++ b/src/components/library-layout/index.ts
@@ -0,0 +1,10 @@
+import { LibraryLayout as Component } from './library-layout';
+import { LibraryLayoutFilterToggler } from './library-layout-filter-toggler';
+import { LibraryLayoutSlot } from './library-layout-slot';
+import { LibraryLayoutSpinner } from './library-layout-spinner';
+
+export const LibraryLayout = Object.assign(Component, {
+ Slot: LibraryLayoutSlot,
+ FilterToggler: LibraryLayoutFilterToggler,
+ Spinner: LibraryLayoutSpinner,
+});
diff --git a/src/components/library-layout/library-layout-filter-toggler.tsx b/src/components/library-layout/library-layout-filter-toggler.tsx
new file mode 100644
index 000000000..145aa6e5b
--- /dev/null
+++ b/src/components/library-layout/library-layout-filter-toggler.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames/bind';
+
+import { Icon } from 'components/ui/icon';
+
+import styles from './library-layout.module.css';
+
+interface LibraryLayoutFilterProps {
+ className?: string
+ onClick: () => void
+}
+
+const cx = classNames.bind(styles);
+
+export const LibraryLayoutFilterToggler: React.FC = (props) => {
+ const {
+ className,
+ onClick,
+ } = props;
+
+ return (
+ = (props) => {
+ const {
+ area,
+ className,
+ children,
+ } = props;
+
+ return (
+
+);
diff --git a/src/components/library-layout/library-layout.module.css b/src/components/library-layout/library-layout.module.css
new file mode 100644
index 000000000..9bc9bedc1
--- /dev/null
+++ b/src/components/library-layout/library-layout.module.css
@@ -0,0 +1,231 @@
+@value tablet-portrait from "shared/styles/media.module.css";
+
+.common {
+ position: relative;
+ display: grid;
+ column-gap: 30px;
+ grid-template-columns: 330px 1fr;
+ isolation: isolate;
+
+ --height-library-navigation-menu-tablet-portrait: 80px;
+
+ @media tablet-portrait {
+ grid-template-columns: 100%;
+ }
+
+ &::before {
+ position: sticky;
+ z-index: 2;
+ top: var(--height-navbar-tablet-portrait);
+ display: block;
+ height: var(--height-library-navigation-menu-tablet-portrait);
+ margin-bottom: calc(-1 * var(--height-library-navigation-menu-tablet-portrait));
+ background-color: var(--beige);
+ content: "";
+ grid-area: backdrop;
+ }
+}
+
+.heading {
+ padding: 60px 0 20px;
+ grid-area: heading;
+
+ @media tablet-portrait {
+ padding: 0 24px;
+ background-color: var(--white);
+ }
+}
+
+.title {
+ @mixin headline;
+ @mixin headline1;
+
+ position: relative;
+ z-index: 3;
+ margin: 0 0 16px;
+ text-align: center;
+
+ @media tablet-portrait {
+ @mixin headline4;
+
+ z-index: auto;
+ margin-bottom: 8px;
+ text-align: left;
+ }
+}
+
+.search {
+ position: sticky;
+ z-index: 3;
+ padding: 0 30px 0 0;
+ grid-area: search;
+
+ @media tablet-portrait {
+ position: static;
+ z-index: auto;
+ padding: 0 24px;
+ background-color: var(--white);
+ }
+}
+
+.navigation {
+ position: sticky;
+ z-index: 3;
+ top: var(--height-navbar-tablet-portrait);
+ display: flex;
+ height: var(--height-library-navigation-menu-tablet-portrait);
+ padding: 0 0 0 30px;
+ grid-area: navigation;
+
+ @media tablet-portrait {
+ z-index: 2;
+ top: 0;
+ box-sizing: border-box;
+ padding-top: 26px;
+ background-color: var(--white);
+ }
+}
+
+.content {
+ z-index: 1;
+ grid-area: content;
+
+ @media tablet-portrait {
+ z-index: auto;
+ }
+}
+
+.pagination {
+ position: sticky;
+ z-index: 1;
+ top: calc(var(--height-navbar-tablet-portrait) + var(--height-library-navigation-menu-tablet-portrait));
+ display: flex;
+ border-bottom: 1px solid var(--coal);
+ margin: 20px 0 52px;
+ background-color: var(--beige);
+ grid-area: pagination;
+ place-content: center;
+
+ @media tablet-portrait {
+ @mixin hide-scrollbars;
+
+ top: var(--height-library-navigation-menu-tablet-portrait);
+ display: block;
+ margin: 0;
+ background-color: var(--white);
+ overflow-x: auto;
+
+ nav {
+ border-top: 1px solid var(--coal);
+ margin-top: 16px;
+ }
+ }
+}
+
+.authors {
+ composes: common;
+ grid-template-areas:
+ "backdrop backdrop"
+ "navigation heading"
+ ". heading"
+ ". search"
+ "pagination pagination"
+ "content content";
+ grid-template-rows: repeat(5, auto) 1fr;
+
+ @media tablet-portrait {
+ grid-template-areas:
+ "heading"
+ "search"
+ "navigation"
+ "pagination"
+ "content";
+ }
+
+ .search {
+ top: calc(var(--height-navbar-tablet-portrait) + 24px);
+ max-width: 580px;
+ }
+
+ .content {
+ @media tablet-portrait {
+ padding-top: 56px;
+ }
+ }
+}
+
+.plays {
+ composes: common;
+ grid-template-areas:
+ "backdrop backdrop"
+ "navigation heading"
+ "filter heading"
+ "filter search"
+ "filter content";
+ grid-template-rows: repeat(4, auto) 1fr;
+
+ @media tablet-portrait {
+ grid-template-areas:
+ "heading"
+ "search"
+ "navigation"
+ "filter"
+ "content";
+ }
+
+ .search {
+ top: calc(var(--height-navbar-tablet-portrait) + 48px);
+ }
+
+ .navigation {
+ box-sizing: border-box;
+ border-bottom: 1px solid var(--coal);
+
+ @media tablet-portrait {
+ border: 0;
+ }
+ }
+
+ .filter {
+ @mixin hide-scrollbars;
+
+ position: sticky;
+ top: calc(var(--height-navbar-tablet-portrait) + var(--height-library-navigation-menu-tablet-portrait));
+ height: calc(100vh - var(--height-navbar-tablet-portrait) - var(--height-library-navigation-menu-tablet-portrait));
+ box-sizing: border-box;
+ align-self: flex-start;
+ padding: 30px 0 30px 30px;
+ grid-area: filter;
+ overflow-y: auto;
+
+ @media tablet-portrait {
+ z-index: 1;
+ top: 80px;
+ height: auto;
+ padding: 10px 24px 16px;
+ background-color: var(--white);
+ overflow-x: auto;
+ }
+ }
+
+ .content {
+ padding-right: 28px;
+ margin-top: 56px;
+
+ @media tablet-portrait {
+ padding: 0;
+ }
+ }
+}
+
+.filter-toggler {
+ position: fixed;
+ z-index: 2;
+ top: 32px;
+ right: 24px;
+ width: 44px;
+ height: 44px;
+ border: 0;
+ background-color: var(--light-green);
+ font-size: 0;
+}
diff --git a/src/components/library-layout/library-layout.tsx b/src/components/library-layout/library-layout.tsx
new file mode 100644
index 000000000..49f7ea4e3
--- /dev/null
+++ b/src/components/library-layout/library-layout.tsx
@@ -0,0 +1,60 @@
+import classNames from 'classnames/bind';
+import { useRouter } from 'next/router';
+
+import { LibrarySearchForm } from 'components/library-search-form';
+import { Menu } from 'components/ui/menu';
+
+import styles from './library-layout.module.css';
+
+interface LibraryLayoutProps {
+ variant: 'authors' | 'plays'
+}
+
+const libraryNavigationItems = [
+ {
+ text: 'Пьесы',
+ href: '/library',
+ },
+ {
+ text: 'Авторы',
+ href: '/library/authors',
+ }
+];
+
+const cx = classNames.bind(styles);
+
+export const LibraryLayout: React.FC = (props) => {
+ const {
+ variant,
+ children,
+ } = props;
+
+ const router = useRouter();
+
+ return (
+ ;
- className?: string;
- onChange: (letter: string) => void;
- isLoading: boolean;
- defaultLetter: string;
-}
-
-const defaultLetters = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ж', 'З', 'И', 'К', 'Л', 'М', 'Н',
- 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я'];
-
-const LibraryPagination: FC = ({ letters, authors, onChange, isLoading,defaultLetter }) => {
- const [letter, setLetter] = useState(defaultLetter);
- const [letterElement, setLetterElement] = useState(null);
-
- const changeLetter = (e: React.MouseEvent, el: string) => {
- setLetter(el);
- setLetterElement(e.target as HTMLInputElement);
- onChange(el);
- };
- const chosenAuthors = useMemo(() => letter ? authors.filter((el) =>
- el.name.startsWith(letter)) : [], [letter, authors]);
-
- useEffect(() => {
- letterElement?.parentElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
- }, [letterElement]);
-
- return (
- ;
- filterDispatcher: Dispatch;
-}
-
-const LibraryPage: FC = ({ isLoading, items, years, programmes, filterDispatcher }) => {
- const [isModalOpen, setIsModalOpen] = useState(false);
-
- function handleFiltersClick(): void {
- setIsModalOpen((prev) => !prev);
- }
-
- useEffect(() => {
- isModalOpen ? disableBodyScroll({ savePosition: true }) : enableBodyScroll();
-
- return () => enableBodyScroll();
- }, [isModalOpen]);
-
- return (
-
- = (props) => {
- const {
- primary,
- children,
- } = props;
-
- const Tag = primary ? 'nav' : 'div';
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/components/news-card/news-card.module.css b/src/components/news-card/news-card.module.css
index 8e9ce3625..794b87417 100644
--- a/src/components/news-card/news-card.module.css
+++ b/src/components/news-card/news-card.module.css
@@ -35,7 +35,7 @@
bottom: 0;
left: 0;
display: block;
- content: '';
+ content: "";
}
}
diff --git a/src/components/news-card/news-card.tsx b/src/components/news-card/news-card.tsx
index 39e743e97..6beafe874 100644
--- a/src/components/news-card/news-card.tsx
+++ b/src/components/news-card/news-card.tsx
@@ -1,6 +1,8 @@
-import { FC } from 'react';
-import Link, { LinkProps } from 'next/link';
import classNames from 'classnames/bind';
+import Link from 'next/link';
+
+import type { LinkProps } from 'next/link';
+import type { FC } from 'react';
import styles from './news-card.module.css';
diff --git a/src/components/news-layout/news-layout.tsx b/src/components/news-layout/news-layout.tsx
index 85bbb12b9..775991793 100644
--- a/src/components/news-layout/news-layout.tsx
+++ b/src/components/news-layout/news-layout.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './news-layout.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/news-list/item/news-list-item.tsx b/src/components/news-list/item/news-list-item.tsx
index 330b21781..267b74fea 100644
--- a/src/components/news-list/item/news-list-item.tsx
+++ b/src/components/news-list/item/news-list-item.tsx
@@ -1,5 +1,7 @@
-import { forwardRef, ReactNode } from 'react';
import classNames from 'classnames/bind';
+import { forwardRef } from 'react';
+
+import type { ReactNode } from 'react';
import styles from './news-list-item.module.css';
diff --git a/src/components/news-list/news-list.tsx b/src/components/news-list/news-list.tsx
index bdce01d79..321e2fb2e 100644
--- a/src/components/news-list/news-list.tsx
+++ b/src/components/news-list/news-list.tsx
@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
import classNames from 'classnames/bind';
import { NewsListItem } from './item';
@@ -6,16 +5,12 @@ import { NewsListItem } from './item';
import styles from './news-list.module.css';
interface NewsListProps {
- children: ReactNode | ReactNode[]
className?: string
- hasMoreEntries?: boolean
- pending?:boolean
- onShouldLoadEntries?: () => void
}
const cx = classNames.bind(styles);
-const Component = (props: NewsListProps) => {
+const Component: React.FC = (props) => {
const {
children,
className,
diff --git a/src/components/note/index.ts b/src/components/note/index.ts
new file mode 100644
index 000000000..1b3d51723
--- /dev/null
+++ b/src/components/note/index.ts
@@ -0,0 +1 @@
+export * from './note';
diff --git a/src/components/note/note.module.css b/src/components/note/note.module.css
new file mode 100644
index 000000000..5c629078f
--- /dev/null
+++ b/src/components/note/note.module.css
@@ -0,0 +1,11 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ padding-left: 26px;
+}
+
+.asterisk {
+ width: 24px;
+ height: 24px;
+ margin: 0 0 2px -26px;
+}
diff --git a/src/components/note/note.tsx b/src/components/note/note.tsx
new file mode 100644
index 000000000..b0f4c3036
--- /dev/null
+++ b/src/components/note/note.tsx
@@ -0,0 +1,21 @@
+import classNames from 'classnames/bind';
+
+import { Icon } from 'components/ui/icon';
+
+import styles from './note.module.css';
+
+const cx = classNames.bind(styles);
+
+export const Note: React.FC = (props) => {
+ const { children } = props;
+
+ return (
+ = (props) => {
const {
+ custom,
children,
} = props;
return (
-
+
{children}
);
diff --git a/src/components/page/overlay-menu/page-overlay-menu.tsx b/src/components/page/overlay-menu/page-overlay-menu.tsx
index f4bad4474..7a9b1b870 100644
--- a/src/components/page/overlay-menu/page-overlay-menu.tsx
+++ b/src/components/page/overlay-menu/page-overlay-menu.tsx
@@ -5,8 +5,8 @@ import styles from './page-overlay-menu.module.css';
const cx = classNames.bind(styles);
interface IPageOverlayMenuProps {
- isOpen: boolean;
- children: React.ReactNode;
+ isOpen: boolean
+ children: React.ReactNode
}
export const PageOverlayMenu = (props: IPageOverlayMenuProps): JSX.Element => {
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
index 72fd2576d..fbfc057d3 100644
--- a/src/components/page/page.tsx
+++ b/src/components/page/page.tsx
@@ -1,18 +1,15 @@
import classNames from 'classnames/bind';
import { PageBurgerButton } from './burger-button';
-import { PageNavbar } from './navbar';
import { PageFooter } from './footer';
+import { PageNavbar } from './navbar';
import { PageOverlayMenu } from './overlay-menu';
-import { PageHeadBanner } from './head-banner';
-
-import type { FC } from 'react';
import styles from './page.module.css';
const cx = classNames.bind(styles);
-const Component: FC = (props) => {
+const Component: React.FC = (props) => {
const { children } = props;
return (
@@ -29,5 +26,4 @@ export default Object.assign(Component, {
Navbar: PageNavbar,
Footer: PageFooter,
OverlayMenu: PageOverlayMenu,
- HeadBanner: PageHeadBanner,
});
diff --git a/src/components/pagination-sentinel/index.ts b/src/components/pagination-sentinel/index.ts
new file mode 100644
index 000000000..e36838108
--- /dev/null
+++ b/src/components/pagination-sentinel/index.ts
@@ -0,0 +1 @@
+export * from './pagination-sentinel';
diff --git a/src/components/pagination-sentinel/pagination-sentinel.module.css b/src/components/pagination-sentinel/pagination-sentinel.module.css
new file mode 100644
index 000000000..b87f60157
--- /dev/null
+++ b/src/components/pagination-sentinel/pagination-sentinel.module.css
@@ -0,0 +1,8 @@
+.sentinel {
+ display: block;
+}
+
+.spinner {
+ width: 64px;
+ margin: 0 auto;
+}
diff --git a/src/components/pagination-sentinel/pagination-sentinel.tsx b/src/components/pagination-sentinel/pagination-sentinel.tsx
new file mode 100644
index 000000000..5fe09a513
--- /dev/null
+++ b/src/components/pagination-sentinel/pagination-sentinel.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames/bind';
+import { useEffect } from 'react';
+
+import { Spinner } from 'components/spinner';
+import { useIntersection } from 'shared/hooks/use-intersection';
+
+import styles from './pagination-sentinel.module.css';
+
+const cx = classNames.bind(styles);
+
+interface PaginationSentinelProps {
+ pending?: boolean
+ loadMoreCallback: () => void
+}
+
+export const PaginationSentinel: React.VFC = (props) => {
+ const {
+ pending = false,
+ loadMoreCallback,
+ } = props;
+ const [sentinelRef, sentinelIsOnScreen] = useIntersection();
+
+ useEffect(() => {
+ if (sentinelIsOnScreen) {
+ loadMoreCallback();
+ }
+ }, [sentinelIsOnScreen, loadMoreCallback]);
+
+ if (pending) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/src/components/participation-form/index.ts b/src/components/participation-form/index.ts
deleted file mode 100644
index 712ba3e8d..000000000
--- a/src/components/participation-form/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './participation-form';
diff --git a/src/components/participation-form/participation-form.module.css b/src/components/participation-form/participation-form.module.css
deleted file mode 100644
index 803462357..000000000
--- a/src/components/participation-form/participation-form.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.note {
- @mixin text;
- @mixin textCaption;
-
- margin-top: 16px;
- margin-left: 30px;
-
- @media (max-width: $tablet-portrait) {
- margin-left: 32px;
- }
-}
diff --git a/src/components/participation-form/participation-form.tsx b/src/components/participation-form/participation-form.tsx
deleted file mode 100644
index 029b793d7..000000000
--- a/src/components/participation-form/participation-form.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import Link from 'next/link';
-import classNames from 'classnames/bind';
-
-import Form from 'components/ui/form';
-import { FormField } from 'components/form-field';
-import TextInput from 'components/ui/text-input';
-import { FileInput } from 'components/ui/file-input';
-import { Button } from 'components/ui/button2';
-import { Icon } from 'components/ui/icon';
-
-import type { FC } from 'react';
-import type { Nullable } from 'shared/types';
-
-import styles from './participation-form.module.css';
-
-interface IParticipationFormProps {
- firstName: string
- firstNameError?: string
- onFirstNameChange: (value: string) => void
- lastName: string
- lastNameError?: string
- onLastNameChange: (value: string) => void
- birthYear: string
- birthYearError?: string
- onBirthYearChange: (value: string) => void
- city: string
- cityError?: string
- onCityChange: (value: string) => void
- phoneNumberInputRef: React.RefObject
- phoneNumber: string
- phoneNumberError?: string
- email: string
- emailError?: string
- onEmailChange: (value: string) => void
- title: string
- titleError?: string
- onTitleChange: (value: string) => void
- year: string
- yearError?: string
- onYearChange: (value: string) => void
- fileName?: string
- fileError?: string
- onFileChange: (file: Nullable) => void
- genericError?: string
- canSubmit: boolean
- onSubmit: (e: React.FormEvent) => void
- privacyPolicyUrl?: string
-}
-
-const ACCEPTABLE_FILE_TYPES = '.doc, .docx, .txt, .odt, .pdf';
-
-const cx = classNames.bind(styles);
-
-export const ParticipationForm: FC = (props) => {
- const {
- firstName,
- firstNameError,
- onFirstNameChange,
- lastName,
- lastNameError,
- onLastNameChange,
- birthYear,
- birthYearError,
- onBirthYearChange,
- city,
- cityError,
- onCityChange,
- phoneNumberInputRef,
- phoneNumberError,
- email,
- emailError,
- onEmailChange,
- title,
- titleError,
- onTitleChange,
- year,
- yearError,
- onYearChange,
- fileName,
- fileError,
- onFileChange,
- genericError,
- canSubmit,
- onSubmit,
- privacyPolicyUrl = '#',
- } = props;
-
- return (
-
- );
-};
diff --git a/src/components/partner-card/partner-card.module.css b/src/components/partner-card/partner-card.module.css
index 539bdeeaa..57d8b684e 100644
--- a/src/components/partner-card/partner-card.module.css
+++ b/src/components/partner-card/partner-card.module.css
@@ -18,7 +18,7 @@
display: block;
width: 100%;
height: 100%;
- content: '';
+ content: "";
}
}
diff --git a/src/components/partner-card/partner-card.tsx b/src/components/partner-card/partner-card.tsx
index 8804be19f..6b1cd79c7 100644
--- a/src/components/partner-card/partner-card.tsx
+++ b/src/components/partner-card/partner-card.tsx
@@ -1,7 +1,6 @@
-import Image from 'next/image';
import classNames from 'classnames/bind';
+import Image from 'next/image';
-import type { Url } from 'shared/types';
import type { VFC } from 'react';
import styles from './partner-card.module.css';
diff --git a/src/components/performance-details/performance-details.module.css b/src/components/performance-details/performance-details.module.css
index d420a90e1..747d99545 100644
--- a/src/components/performance-details/performance-details.module.css
+++ b/src/components/performance-details/performance-details.module.css
@@ -19,5 +19,5 @@
width: 1px;
height: 32px;
background-color: var(--coal);
- content: '';
+ content: "";
}
diff --git a/src/components/performance-details/performance-details.tsx b/src/components/performance-details/performance-details.tsx
index c20a8d4ff..a924fd16f 100644
--- a/src/components/performance-details/performance-details.tsx
+++ b/src/components/performance-details/performance-details.tsx
@@ -29,7 +29,7 @@ export const PerformanceDetails = (props: PerformanceDetailsProps): JSX.Element
{duration}
)}
- {ageRestriction && (
+ {ageRestriction !== null && ageRestriction !== undefined && (
-
-
-
-
- );
-};
-
-export default AuthorsPage;
diff --git a/src/components/library-filter/index.ts b/src/components/library-filter/index.ts
deleted file mode 100644
index 8da64ed7e..000000000
--- a/src/components/library-filter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './library-filter';
diff --git a/src/components/library-filter/library-filter-reducer.ts b/src/components/library-filter/library-filter-reducer.ts
deleted file mode 100644
index 53ece1c16..000000000
--- a/src/components/library-filter/library-filter-reducer.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Dispatch } from 'react';
-
-import { DroplistOption } from '../ui/droplist';
-
-export type Action =
- { type: 'add years'; festival: DroplistOption } |
- { type: 'remove year'; festival: DroplistOption } |
- { type: 'add programme'; program: string } |
- { type: 'remove programme'; program: string } |
- { type: 'reset' }
-
-export type State = {
- festival: DroplistOption[],
- program: string[],
-}
-
-export interface ILibraryFilterReducer {
- filterState: State;
- filterDispatcher: Dispatch
-
-
- {/* TODO: убрать дублирование на страницах библиотеки */}
-
-
- - Библиотека -
-
-
-
-
-
-
- );
-};
-
-export default LibraryFilter;
diff --git a/src/components/library-form/index.ts b/src/components/library-form/index.ts
deleted file mode 100644
index a534b73b6..000000000
--- a/src/components/library-form/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './library-form';
diff --git a/src/components/library-form/library-form.module.css b/src/components/library-form/library-form.module.css
deleted file mode 100644
index bad9f2381..000000000
--- a/src/components/library-form/library-form.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.searchForm {
- display: flex;
- width: 100%;
- height: 32px;
- border-bottom: 1px solid var(--coal);
-}
-
-.searchInput {
- @mixin text;
- @mixin textMedium;
-
- width: 450px;
- height: 32px;
- box-sizing: border-box;
- padding: 1px 3px 8px;
- border: none;
- border-right: 1px solid var(--coal);
- background: none;
- outline: none;
-
- &::placeholder {
- opacity: .4;
- }
-
- &:-webkit-autofill,
- :-webkit-autofill:hover,
- :-webkit-autofill:focus,
- :-webkit-autofill:active {
- transition: background-color 5000s;
- }
-
- @media (max-width: $tablet-portrait) {
- @mixin textSmall;
-
- width: 256px;
- }
-}
-
-.button {
- width: 120px;
- column-gap: 3px !important;
-}
diff --git a/src/components/library-form/library-form.stories.tsx b/src/components/library-form/library-form.stories.tsx
deleted file mode 100644
index 8a7a4e3db..000000000
--- a/src/components/library-form/library-form.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import LibraryForm from './library-form';
-
-export default {
- title: 'Components/LibraryForm',
- component: LibraryForm
-} as ComponentMeta
-
-
- - Годы фестиваля -
-
-
- {(filterState.festival.length > 0 || filterState.program.length > 0) && (
- <>
- - Программа -
--
- {programmes.map(({ pk, name }) => (
-
- handleTagClick(String(pk))} className={style.programme} key={pk}>
-
-
- ))}
-
-
-
-
-
-
-
-
- )}
-
+
+
+ );
+};
diff --git a/src/components/library-layout/library-layout-slot.tsx b/src/components/library-layout/library-layout-slot.tsx
new file mode 100644
index 000000000..a71bb553c
--- /dev/null
+++ b/src/components/library-layout/library-layout-slot.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames/bind';
+
+import styles from './library-layout.module.css';
+
+interface LibraryLayoutFilterProps {
+ area: 'filter' | 'pagination' | 'content'
+ className?: string
+}
+
+const cx = classNames.bind(styles);
+
+export const LibraryLayoutSlot: React.FC
+ {children}
+
+ );
+};
diff --git a/src/components/library-layout/library-layout-spinner.tsx b/src/components/library-layout/library-layout-spinner.tsx
new file mode 100644
index 000000000..38fc6daab
--- /dev/null
+++ b/src/components/library-layout/library-layout-spinner.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames/bind';
+
+import { Spinner } from 'components/spinner';
+
+import styles from './library-layout.module.css';
+
+const cx = classNames.bind(styles);
+
+export const LibraryLayoutSpinner: React.VFC = () => (
+
+
+ );
+};
diff --git a/src/components/library-pagination/index.ts b/src/components/library-pagination/index.ts
deleted file mode 100644
index 3f321ec20..000000000
--- a/src/components/library-pagination/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './library-pagination';
diff --git a/src/components/library-pagination/library-pagination.module.css b/src/components/library-pagination/library-pagination.module.css
deleted file mode 100644
index 3d6eec0d8..000000000
--- a/src/components/library-pagination/library-pagination.module.css
+++ /dev/null
@@ -1,163 +0,0 @@
-.container {
- position: relative;
- max-width: 100%;
-}
-
-.letters {
- position: sticky;
- z-index: 1;
- top: 82px;
- display: grid;
- box-sizing: border-box;
- padding: 0 15px;
- border-bottom: 1px solid var(--coal);
- margin: 0;
- background-color: var(--beige);
- column-gap: 12px;
- grid-auto-flow: column;
- list-style: none;
- overflow-x: auto;
- overflow-y: hidden;
- scroll-behavior: smooth;
-
- &::-webkit-scrollbar {
- display: none;
- }
-
- @media (max-width: $tablet-portrait) {
- top: 100px;
- border-top: 1px solid var(--coal);
- background-color: var(--white);
- column-gap: 23px;
- }
-}
-
-.letter {
- @mixin headline;
- @mixin headline7;
-
- position: relative;
- width: 36px;
- height: 48px;
-}
-
-.letterActive {
- background: var(--coal);
- color: var(--white);
-}
-
-.label {
- position: absolute;
- z-index: 2;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
- &:hover {
- cursor: pointer;
- }
-}
-
-.inputRadio {
- position: absolute;
- top: 50%;
- left: 50%;
- height: 24px;
- margin: 0;
- transform: translate(-50%, -50%);
- visibility: hidden;
-}
-
-.authors {
- display: flex;
- max-width: 812px;
- box-sizing: border-box;
- align-items: flex-start;
- justify-content: space-between;
- padding: 0 36px;
- margin: 0 auto;
-
- @media (max-width: $tablet-portrait) {
- flex-direction: column-reverse;
- }
-}
-
-.authorsList {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- padding: 0;
- margin: 53px 0 0;
- list-style: none;
-
- @media (max-width: $tablet-portrait) {
- padding-left: 19px;
- margin: 16px 0 0;
- }
-}
-
-.author {
- margin-bottom: 12px;
-
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.link {
- @mixin text;
- @mixin textLarge;
-
- padding: 1px 8px 3px;
- color: var(--coal);
- text-decoration: none;
-
- &:active {
- background-color: var(--coal);
- color: var(--white);
- }
-}
-
-.chosenLetter {
- position: relative;
- margin: 309px 20px 0 0;
-
- @media (max-width: $tablet-portrait) {
- margin: 56px 0 0;
- }
-}
-
-.letterDisabled {
- cursor: default;
- opacity: .2;
- pointer-events: none;
-
- &:hover {
- color: var(--coal);
- }
-}
-
-.bigLetter {
- @mixin headline;
-
- font-size: 100px;
- line-height: 100px;
-
- @media (max-width: $tablet-portrait) {
- @mixin headline3;
- }
-}
-
-.authorsQuantity {
- @mixin text;
- @mixin textLarge;
-
- position: absolute;
- top: calc(8px * -1);
- right: calc(7px * -1);
-
- @media (max-width: $tablet-portrait) {
- right: calc(14px * -1);
- }
-}
diff --git a/src/components/library-pagination/library-pagination.tsx b/src/components/library-pagination/library-pagination.tsx
deleted file mode 100644
index e1b770254..000000000
--- a/src/components/library-pagination/library-pagination.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { FC, useState, useEffect, useMemo } from 'react';
-import cn from 'classnames';
-
-import { InfoLink } from '../ui/info-link';
-import { IAuthorInfo } from 'components/library-authors-page';
-
-import style from './library-pagination.module.css';
-import styles from '../library-pieces-page/index.module.css';
-import LibraryPreloader from '../library-pieces-page/library-preloader/library-preloader';
-
-interface LibraryPaginationProps {
- letters: string[];
- authors: Array
+
+
+
+
+ + Библиотека +
+
+
+ {children}
+
-
- );
-};
-
-export default LibraryPagination;
diff --git a/src/components/library-pieces-page/index.module.css b/src/components/library-pieces-page/index.module.css
deleted file mode 100644
index f24091b3d..000000000
--- a/src/components/library-pieces-page/index.module.css
+++ /dev/null
@@ -1,261 +0,0 @@
-@keyframes emergence {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-.wrap {
- position: relative;
-}
-
-.filtersButton {
- display: none;
-
- @media (max-width: $tablet-portrait) {
- position: fixed;
- z-index: 1;
- top: 32px;
- right: 24px;
- display: flex;
- width: 45px;
- height: 45px;
- align-items: center;
- justify-content: center;
- background-color: var(--light-green);
- }
-}
-
-.topWrap {
- position: absolute;
- z-index: -1;
- top: -91px;
- left: 0;
- width: 100%;
- height: 0;
-
- @media (max-width: $tablet-portrait) {
- height: 90%;
- }
-}
-
-.top {
- position: sticky;
- top: calc(50px * -1);
- width: 100%;
- height: 0;
- background-color: var(--white);
-
- @media (max-width: $tablet-portrait) {
- height: 140px;
- }
-}
-
-.content {
- position: relative;
- z-index: 0;
- display: flex;
- max-width: 100%;
- min-height: calc(100vh - 61px);
- align-items: flex-start;
- justify-content: space-between;
- margin: 0 auto;
-
- @media (max-width: $tablet-portrait) {
- display: block;
- }
-}
-
-.sidebar {
- @mixin hide-scrollbars;
-
- position: sticky;
- z-index: 1;
- top: 0;
- left: auto;
- max-height: 100vh;
- box-sizing: border-box;
- padding: 21px 0;
- overflow-y: scroll;
-
- @media (max-width: $tablet-portrait) {
- position: absolute;
- z-index: -1;
- top: 47px;
- left: 0;
- width: 100%;
- height: calc(100% - 166px);
- padding: 0;
- pointer-events: none;
- }
-}
-
-.sidebar * {
- @media (max-width: $tablet-portrait) {
- pointer-events: all;
- }
-}
-
-.menu {
- box-sizing: border-box;
- padding-bottom: 17px;
- padding-left: 30px;
- border-bottom: 1px solid var(--coal);
- margin: 0 0 30px;
-
- @media (max-width: $tablet-portrait) {
- position: sticky;
- top: calc(9px * -1);
- left: auto;
- height: 105px;
- padding: 48px 0 0 24px;
- border-bottom: none;
- margin: 0;
- background-color: var(--white);
- }
-}
-
-.filter {
- box-sizing: border-box;
- padding-left: 30px;
-
- @media (max-width: $tablet-portrait) {
- display: none;
- }
-}
-
-.section {
- position: relative;
- z-index: 0;
- display: flex;
- width: 1050px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin: 58px 29px 163px auto;
- justify-self: flex-end;
-
- @media (max-width: $tablet-portrait) {
- width: 100%;
- margin: 0;
- }
-}
-
-.title {
- @mixin headline;
- @mixin headline1;
-
- z-index: 4;
- width: 720px;
- box-sizing: border-box;
- align-self: flex-end;
- padding-right: 108px;
- margin: 0 0 16px;
-
- @media (max-width: $tablet-portrait) {
- @mixin headline4;
-
- width: 298px;
- align-self: flex-start;
- padding-right: 24px;
- margin: 0 0 8px 24px;
- }
-}
-
-.search {
- position: sticky;
- z-index: 3;
- top: 48px;
- width: 100%;
- box-sizing: border-box;
- background-color: var(--beige);
-
- &::before {
- position: absolute;
- z-index: 3;
- top: calc(48px * -1);
- left: 0;
- width: 100%;
- height: 48px;
- background-color: var(--beige);
- content: '';
- }
-
- @media (max-width: $tablet-portrait) {
- position: static;
- padding: 0 24px;
- background-color: var(--white);
-
- &::before {
- height: 0;
- }
- }
-}
-
-.loader {
- display: flex;
- width: 100%;
- min-height: 429px;
- align-items: center;
- justify-content: center;
-}
-
-.loaderMobile {
- display: none;
-
- @media (max-width: $tablet-portrait) {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-}
-
-.pieces {
- width: calc(100% + 48px);
- margin: 54px auto 0 calc(24px * -1);
-
- @media (max-width: $tablet-portrait) {
- display: none;
- }
-}
-
-.pieces article {
- animation: emergence 1s linear;
-}
-
-.piecesMobile {
- display: none;
-
- @media (max-width: $tablet-portrait) {
- position: relative;
- z-index: -2;
- display: grid;
- box-sizing: border-box;
- padding: 56px 85px 100px;
- margin-top: 124px;
- row-gap: 48px;
- }
-}
-
-.piecesMobile article {
- animation: emergence 1s linear;
-}
-
-.mobileTags {
- display: none;
- background-color: var(--white);
-
- @media (max-width: $tablet-portrait) {
- display: flex;
- }
-}
-
-.noResult {
- @mixin text;
- @mixin textLarge;
-
- text-align: center;
-}
diff --git a/src/components/library-pieces-page/index.tsx b/src/components/library-pieces-page/index.tsx
deleted file mode 100644
index e5a1b54fa..000000000
--- a/src/components/library-pieces-page/index.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { FC, useState, useEffect, Dispatch, } from 'react';
-import { disableBodyScroll, enableBodyScroll } from '@funboxteam/diamonds';
-
-import LibraryForm from 'components/library-form/library-form';
-import LibraryFilter from 'components/library-filter/library-filter';
-import { BasicPlayCard } from 'components/ui/basic-play-card';
-import { BasicPlayCardList } from 'components/ui/basic-play-card-list';
-import { Menu } from 'components/ui/menu';
-import { Icon } from 'components/ui/icon';
-import { DroplistOption } from 'components/ui/droplist';
-import LibraryFiltersModal from './library-filters-modal';
-import LibraryPreloader from './library-preloader/library-preloader';
-import LibraryTagsMobile from 'components/library-tags-mobile/library-tags-mobile';
-import { Play } from 'api-typings';
-import { Action } from 'components/library-filter/library-filter-reducer';
-import { IProgram } from 'pages/library';
-
-import styles from './index.module.css';
-
-interface ILibraryPageProps {
- isLoading: boolean;
- items: Play[];
- years: DroplistOption[];
- programmes: Array-
- {defaultLetters.map((el) => (
-
- - - changeLetter(e, el)} - type="radio" - name="letter" - id={el} - value={el} - className={style.inputRadio} - /> - - ))} -
- {isLoading ? (
-
-
-
- ) : (
- <>
- -
- {chosenAuthors.length > 0 && chosenAuthors.map((el) => (
-
-
-
- {el.name} - -
- ))}
-
-
-
- )
-
- }
- - {letter} -
-- {letter && String(chosenAuthors.length)} -
-
-
-
- = ({ children, isModalOpen }) => {
- return (
-
- {children}
-
- );
-};
-
-export default LibraryFiltersModal;
diff --git a/src/components/library-pieces-page/library-preloader/Thumbs.db b/src/components/library-pieces-page/library-preloader/Thumbs.db
deleted file mode 100644
index bb80d46f3..000000000
Binary files a/src/components/library-pieces-page/library-preloader/Thumbs.db and /dev/null differ
diff --git a/src/components/library-pieces-page/library-preloader/library-preloader.tsx b/src/components/library-pieces-page/library-preloader/library-preloader.tsx
deleted file mode 100644
index a8657769d..000000000
--- a/src/components/library-pieces-page/library-preloader/library-preloader.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import Image from 'next/dist/client/image';
-
-import Loader from './loader.gif';
-
-const LibraryPreloader: FC = () => {
- return (
- (null);
+
+ const handleQueryChange = useCallback((e: React.ChangeEvent) => {
+ setQuery(e.target.value);
+ }, []);
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ router.push(`/library/search/${query}`);
+ };
+
+ const canSubmit = query.length >= SEARCH_QUERY_MIN_LENGTH;
+
+ useEffect(() => inputElRef.current?.focus(), [router.asPath]);
+
+ return (
+
+ );
+};
diff --git a/src/components/library-tags-mobile/index.ts b/src/components/library-tags-mobile/index.ts
deleted file mode 100644
index b49b4685a..000000000
--- a/src/components/library-tags-mobile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './library-tags-mobile';
diff --git a/src/components/library-tags-mobile/library-tags-mobile.module.css b/src/components/library-tags-mobile/library-tags-mobile.module.css
deleted file mode 100644
index cd22517f5..000000000
--- a/src/components/library-tags-mobile/library-tags-mobile.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.programmesList {
- @mixin hide-scrollbars;
-
- --card-width: max-content;
-
- display: grid;
- max-width: 100vw;
- box-sizing: border-box;
- justify-content: start;
- padding: 0 0 16px;
- margin: 0 0 0 24px;
- background-color: var(--white);
- gap: 2px;
- grid-auto-flow: column;
- grid-template-columns: repeat(auto-fit, var(--card-width));
- list-style: none;
- overflow-x: auto;
- scroll-behavior: smooth;
- scroll-snap-type: x mandatory;
-}
-
-.programme {
- cursor: pointer;
- scroll-snap-align: start;
-}
diff --git a/src/components/library-tags-mobile/library-tags-mobile.tsx b/src/components/library-tags-mobile/library-tags-mobile.tsx
deleted file mode 100644
index 1d36610f3..000000000
--- a/src/components/library-tags-mobile/library-tags-mobile.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { FC, useCallback, Dispatch, useContext, useMemo } from 'react';
-
-import { Action } from 'components/library-filter/library-filter-reducer';
-import { LibraryFiltersProviderContext } from 'providers/library-filters-provider';
-import { IProgram } from 'pages/library';
-import { Tag } from 'components/ui/tag';
-import { DroplistOption } from 'components/ui/droplist';
-
-import styles from './library-tags-mobile.module.css';
-
-export interface LibraryTagsMobileProps {
- programmes: Array;
- filterDispatcher: Dispatch;
-}
-
-const LibraryTagsMobile: FC = ({ programmes, filterDispatcher }) => {
- const filterState = useContext(LibraryFiltersProviderContext);
-
- const selectedProgrammes = useMemo(()=> {
- return programmes.filter((tag) => filterState.program.includes(String(tag.pk)));
- }, [filterState.program, programmes]);
-
- const handleTagClick = useCallback(
- (el: string): void => {
- filterDispatcher({ type: 'remove programme', program: el });
- }, [filterDispatcher]);
-
- const handleYearClick = useCallback((year: DroplistOption): void => {
- filterDispatcher({ type: 'remove year', festival: year });
- }, [filterDispatcher]);
-
- return (
- ({
- loop: true,
- spacing: 15,
- initial: initialSlideIndex,
- });
-
- return (
- ;
-
-const Template: Story = () => {
- const [isOpen, setIsOpen] = useState(true);
-
- const toggleVisibility = () => setIsOpen(!isOpen);
-
- return (
- <>
-
-
- {fakeImages.map((image, index) => (
-
-
- );
-};
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/src/components/lightbox/lightbox.tsx b/src/components/lightbox/lightbox.tsx
deleted file mode 100644
index a663a65c9..000000000
--- a/src/components/lightbox/lightbox.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import classNames from 'classnames/bind';
-
-import { Modal } from 'components/ui/modal';
-import { LightboxImageSlider } from 'components/lightbox-image-slider';
-
-import styles from './lightbox.module.css';
-
-const cx = classNames.bind(styles);
-
-interface ILightboxProps {
- isOpen: boolean;
- initialSlideIndex: number;
- children: React.ReactNode;
- onClose: () => void;
-}
-export const Lightbox = (props: ILightboxProps): JSX.Element => {
- const {
- isOpen,
- initialSlideIndex,
- children,
- onClose
- } = props;
-
- return (
-
-
- {children}
-
-
- );
-};
diff --git a/src/components/logotype/logotype.tsx b/src/components/logotype/logotype.tsx
index 30d4ae9f8..1bc9a76f8 100644
--- a/src/components/logotype/logotype.tsx
+++ b/src/components/logotype/logotype.tsx
@@ -1,16 +1,19 @@
-import { FC } from 'react';
-import Link, { LinkProps } from 'next/link';
import classNames from 'classnames/bind';
+import Link from 'next/link';
import CompactLogo from 'shared/images/compact-logo.svg';
import FullLogo from 'shared/images/full-logo.svg';
+
+import type { LinkProps } from 'next/link';
+import type { FC } from 'react';
+
import styles from './logotype.module.css';
interface ILogotypeProps extends Pick {
- title?: string,
- className?: string,
- full?: boolean,
- onClick?: React.MouseEventHandler,
+ title?: string
+ className?: string
+ full?: boolean
+ onClick?: React.MouseEventHandler
}
const cx = classNames.bind(styles);
diff --git a/src/components/main-header/index.ts b/src/components/main-header/index.ts
new file mode 100644
index 000000000..3c0fdb1f3
--- /dev/null
+++ b/src/components/main-header/index.ts
@@ -0,0 +1 @@
+export * from './main-header';
diff --git a/src/components/main-header/main-header.module.css b/src/components/main-header/main-header.module.css
new file mode 100644
index 000000000..3f2d9582c
--- /dev/null
+++ b/src/components/main-header/main-header.module.css
@@ -0,0 +1,97 @@
+.root {
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+ scroll-snap-align: start;
+
+ @media (max-width: $tablet-portrait) {
+ min-height: 0;
+ }
+}
+
+.cover {
+ position: relative;
+ min-height: 280px;
+ flex: 2 1 40vh;
+
+ @media (max-width: $tablet-portrait) {
+ height: 360px;
+ }
+}
+
+.title {
+ @mixin headline;
+ @mixin headline1;
+
+ margin-bottom: 16px;
+ color: var(--coal);
+
+ @media (max-width: $tablet-portrait) {
+ @mixin headline4;
+
+ margin-bottom: 12px;
+ }
+}
+
+.content {
+ display: flex;
+ flex: 1 0;
+ flex-direction: column;
+ justify-content: center;
+ padding: 66px 80px 66px 460px;
+
+ @media (max-width: $tablet-portrait) {
+ padding: 32px 24px;
+ }
+}
+
+.actions {
+ margin-top: 16px;
+}
+
+.action {
+ min-width: 360px;
+
+ @media (max-width: $tablet-portrait) {
+ min-width: 244px;
+ }
+}
+
+.navbar {
+ flex: 0 0;
+
+ @media (max-width: $tablet-portrait) {
+ order: -1;
+ }
+
+ &.pinned {
+ position: fixed;
+ z-index: 2;
+ top: 0;
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid var(--coal);
+ animation: navbar .1s linear;
+ background-color: var(--beige);
+ will-change: transform;
+
+ @media (max-width: $tablet-portrait) {
+ position: static;
+ border: 0;
+ }
+ }
+
+ &.pinned + .content {
+ margin-top: var(--height-navbar-tablet-portrait);
+ }
+}
+
+@keyframes navbar {
+ from {
+ transform: translateY(-100%);
+ }
+
+ to {
+ transform: none;
+ }
+}
diff --git a/src/components/main-header/main-header.tsx b/src/components/main-header/main-header.tsx
new file mode 100644
index 000000000..a6daeac64
--- /dev/null
+++ b/src/components/main-header/main-header.tsx
@@ -0,0 +1,129 @@
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import { DonationLink } from 'components/donation-link';
+import { Logotype } from 'components/logotype';
+import { Navbar } from 'components/navbar';
+import { Button } from 'components/ui/button2';
+import { Icon } from 'components/ui/icon';
+import { Menu } from 'components/ui/menu';
+import { donationPath } from 'shared/constants/donation-path';
+import { mainNavigationItems } from 'shared/constants/main-navigation-items';
+import { socialLinkItems } from 'shared/constants/social-link-items';
+import { useIntersectionObserver } from 'shared/hooks/use-intersection-observer';
+
+import styles from './main-header.module.css';
+
+interface MainHeaderProps {
+ className?: string
+ cover: Url
+ title: string
+ actionText: string
+ actionUrl: string
+}
+
+const cx = classNames.bind(styles);
+
+export const MainHeader: React.VFC = (props) => {
+ const {
+ className,
+ cover,
+ title,
+ actionUrl,
+ actionText,
+ } = props;
+
+ const router = useRouter();
+ const [containerElRef, isContainerElInViewport] = useIntersectionObserver({ threshold: 0.1 });
+
+ return (
+ = (props) => {
{href && (
;
+ id: number
+ number: string
+ title: string
+ text: Array
}
export interface TextSectionData {
- id: number;
- number: string;
- title: string;
- image: string;
- content: Array;
+ id: number
+ number: string
+ title: string
+ image: string
+ content: Array
}
interface TextSectionProps {
diff --git a/src/components/mission-text-item/mission-text-item.tsx b/src/components/mission-text-item/mission-text-item.tsx
index c43dce98e..53f52b1bf 100644
--- a/src/components/mission-text-item/mission-text-item.tsx
+++ b/src/components/mission-text-item/mission-text-item.tsx
@@ -1,6 +1,7 @@
-import { FC, ReactNode } from 'react';
import cn from 'classnames';
+import type { FC, ReactNode } from 'react';
+
import style from './mission-text-item.module.css';
interface TextItemProps {
diff --git a/src/components/navbar/actions/index.ts b/src/components/navbar/actions/index.ts
deleted file mode 100644
index 43b4e756b..000000000
--- a/src/components/navbar/actions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navbar-actions';
diff --git a/src/components/navbar/actions/navbar-actions.module.css b/src/components/navbar/actions/navbar-actions.module.css
deleted file mode 100644
index 3dc58a690..000000000
--- a/src/components/navbar/actions/navbar-actions.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.actions {
- display: flex;
- height: 61px;
- flex-grow: 1;
- place-content: stretch;
-
- @media (max-width: $tablet-portrait) {
- display: none;
- }
-}
diff --git a/src/components/navbar/actions/navbar-actions.tsx b/src/components/navbar/actions/navbar-actions.tsx
deleted file mode 100644
index de3d25d10..000000000
--- a/src/components/navbar/actions/navbar-actions.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import classNames from 'classnames/bind';
-
-import style from './navbar-actions.module.css';
-
-const cx = classNames.bind(style);
-
-export const NavbarActions: FC = (props) => {
- const {
- children,
- } = props;
-
- return (
- = (props) => {
+ const {
+ type = 'regular',
+ as: Tag = 'div',
+ children,
+ } = props;
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/navbar/navbar-slot.tsx b/src/components/navbar/navbar-slot.tsx
new file mode 100644
index 000000000..b93979ccf
--- /dev/null
+++ b/src/components/navbar/navbar-slot.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames/bind';
+
+import style from './navbar.module.css';
+
+const cx = classNames.bind(style);
+
+enum Area {
+ Actions = 'actions',
+ Logotype = 'logotype',
+ Addon = 'addon',
+}
+
+interface NavbarSlotProps {
+ area: `${Area}`
+}
+
+export const NavbarSlot: React.FC = (props) => {
+ const {
+ area,
+ children,
+ } = props;
+
+ return (
+ ) => {
const {
- view = 'normal',
+ view = 'regular',
colors = 'default',
children,
} = props;
@@ -32,7 +26,3 @@ export const Navbar = (props: NavbarProps) => {
);
};
-
-Navbar.Section = NavbarSection;
-Navbar.Logotype = NavbarLogotype;
-Navbar.Actions = NavbarActions;
diff --git a/src/components/navbar/section/index.ts b/src/components/navbar/section/index.ts
deleted file mode 100644
index b615a9e2e..000000000
--- a/src/components/navbar/section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navbar-section';
diff --git a/src/components/navbar/section/navbar-section.module.css b/src/components/navbar/section/navbar-section.module.css
deleted file mode 100644
index c79f4b501..000000000
--- a/src/components/navbar/section/navbar-section.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.section {
- position: relative;
- display: flex;
- align-items: center;
- padding: 0 9px;
-
- &:not(:last-child)::after {
- position: absolute;
- right: 0;
- bottom: 0;
- display: block;
- width: 1px;
- height: 80%;
- background-color: var(--coal);
- content: '';
- }
-}
-
-.primary {
- flex-grow: 1;
- padding-right: 31px;
-}
diff --git a/src/components/navbar/section/navbar-section.tsx b/src/components/navbar/section/navbar-section.tsx
deleted file mode 100644
index c79c34704..000000000
--- a/src/components/navbar/section/navbar-section.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FC } from 'react';
-import classNames from 'classnames/bind';
-
-import style from './navbar-section.module.css';
-
-interface INavbarSectionProps {
- primary?: boolean;
-}
-
-const cx = classNames.bind(style);
-
-export const NavbarSection: FC
-
-
-
-
-
- {!items.length
- && (
-
-
-
-
-
- );
-};
-
-export default LibraryPage;
diff --git a/src/components/library-pieces-page/library-filters-modal/index.module.css b/src/components/library-pieces-page/library-filters-modal/index.module.css
deleted file mode 100644
index c522c7c6e..000000000
--- a/src/components/library-pieces-page/library-filters-modal/index.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.wrap {
- position: fixed;
- top: 0;
- left: 0;
- overflow: auto;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- flex-direction: column;
- padding: 103px 24px 56px;
- background-color: var(--beige);
- opacity: 0;
- transition: visibility .5s, opacity .5s linear;
- visibility: hidden;
-}
-
-.isOpen {
- z-index: 1;
- opacity: 1;
- transition: visibility .5s, opacity .5s linear;
- visibility: visible;
-}
diff --git a/src/components/library-pieces-page/library-filters-modal/index.tsx b/src/components/library-pieces-page/library-filters-modal/index.tsx
deleted file mode 100644
index 9c8f9b6b6..000000000
--- a/src/components/library-pieces-page/library-filters-modal/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import classNames from 'classnames/bind';
-import { FC, ReactNode } from 'react';
-
-import styles from './index.module.css';
-
-interface ILibraryFiltersModalProps {
- children: ReactNode;
- isModalOpen: boolean;
-}
-
-const cx = classNames.bind(styles);
-
-const LibraryFiltersModal: FC
-
-
-
-
-
-
-
-
-
- - Библиотека -
-
-
- {isLoading ? (
-
-
- ) : (
-
- {!items.length
- && (
-
- {items.map(({ id, name, city, year, url_download, url_reading, authors }) => (
-
-
- )}
- - Ничего не найдено. Попробуйте изменить параметры поиска. -
- ) - } -- Ничего не найдено. Попробуйте изменить параметры поиска. -
- ) - } - {isLoading ? ( -
-
- ) : (
- <>
- {items.map(({ id, name, city, year, url_download, url_reading, authors }) => (
- -
- {filterState.festival.map((year) => (
-
- handleYearClick(year)} className={styles.programme} key={year.value}>
-
-
- ))}
- {selectedProgrammes.map(({ pk, name }) => (
- - handleTagClick(String(pk))} className={styles.programme} key={pk}>
-
-
- ))}
-
- {slider && (
- <>
-
- );
-};
diff --git a/src/components/lightbox/index.ts b/src/components/lightbox/index.ts
deleted file mode 100644
index a29c50680..000000000
--- a/src/components/lightbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lightbox';
diff --git a/src/components/lightbox/lightbox.module.css b/src/components/lightbox/lightbox.module.css
deleted file mode 100644
index 3976487db..000000000
--- a/src/components/lightbox/lightbox.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.slider {
- width: min(135vh, 976px);
-}
diff --git a/src/components/lightbox/lightbox.stories.tsx b/src/components/lightbox/lightbox.stories.tsx
deleted file mode 100644
index 38617afea..000000000
--- a/src/components/lightbox/lightbox.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import { Story, ComponentMeta } from '@storybook/react';
-import Image from 'next/image';
-
-import { Lightbox } from './lightbox';
-
-const fakeImages = Array.from({ length: 8 }, () => ({
- image: 'https://source.unsplash.com/random',
-}));
-
-export default {
- title: 'Components/Lightbox',
- component: Lightbox,
-} as ComponentMeta
-
-
-
-
- )}
-
- {Children.map(children, (slide) => (
-
-
- {slide}
-
- ))}
- {slider && (
-
-
- )}
-
+
+ );
+};
diff --git a/src/components/main-layout/content/index.ts b/src/components/main-layout/content/index.ts
new file mode 100644
index 000000000..a4624dba4
--- /dev/null
+++ b/src/components/main-layout/content/index.ts
@@ -0,0 +1 @@
+export * from './main-layout-content';
diff --git a/src/components/homepage-layout/content/homepage-layout-content.module.css b/src/components/main-layout/content/main-layout-content.module.css
similarity index 100%
rename from src/components/homepage-layout/content/homepage-layout-content.module.css
rename to src/components/main-layout/content/main-layout-content.module.css
diff --git a/src/components/homepage-layout/events/homepage-layout-events.tsx b/src/components/main-layout/content/main-layout-content.tsx
similarity index 67%
rename from src/components/homepage-layout/events/homepage-layout-events.tsx
rename to src/components/main-layout/content/main-layout-content.tsx
index 835b8b854..9fe4144f7 100644
--- a/src/components/homepage-layout/events/homepage-layout-events.tsx
+++ b/src/components/main-layout/content/main-layout-content.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
import type { FC } from 'react';
-import styles from './homepage-layout-events.module.css';
+import styles from './main-layout-content.module.css';
const cx = classNames.bind(styles);
-export const HomepageLayoutEvents: FC = (props) => {
+export const MainLayoutContent: FC = (props) => {
const { children } = props;
return (
diff --git a/src/components/main-layout/events/index.ts b/src/components/main-layout/events/index.ts
new file mode 100644
index 000000000..49096bd73
--- /dev/null
+++ b/src/components/main-layout/events/index.ts
@@ -0,0 +1 @@
+export * from './main-layout-events';
diff --git a/src/components/homepage-layout/events/homepage-layout-events.module.css b/src/components/main-layout/events/main-layout-events.module.css
similarity index 100%
rename from src/components/homepage-layout/events/homepage-layout-events.module.css
rename to src/components/main-layout/events/main-layout-events.module.css
diff --git a/src/components/homepage-layout/content/homepage-layout-content.tsx b/src/components/main-layout/events/main-layout-events.tsx
similarity index 66%
rename from src/components/homepage-layout/content/homepage-layout-content.tsx
rename to src/components/main-layout/events/main-layout-events.tsx
index d437ab48e..7b1f441b7 100644
--- a/src/components/homepage-layout/content/homepage-layout-content.tsx
+++ b/src/components/main-layout/events/main-layout-events.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
import type { FC } from 'react';
-import styles from './homepage-layout-content.module.css';
+import styles from './main-layout-events.module.css';
const cx = classNames.bind(styles);
-export const HomepageLayoutContent: FC = (props) => {
+export const MainLayoutEvents: FC = (props) => {
const { children } = props;
return (
diff --git a/src/components/main-layout/feed/index.ts b/src/components/main-layout/feed/index.ts
new file mode 100644
index 000000000..dfcd406de
--- /dev/null
+++ b/src/components/main-layout/feed/index.ts
@@ -0,0 +1 @@
+export * from './main-layout-feed';
diff --git a/src/components/homepage-layout/feed/homepage-layout-feed.module.css b/src/components/main-layout/feed/main-layout-feed.module.css
similarity index 61%
rename from src/components/homepage-layout/feed/homepage-layout-feed.module.css
rename to src/components/main-layout/feed/main-layout-feed.module.css
index a6a760c88..d901c81bd 100644
--- a/src/components/homepage-layout/feed/homepage-layout-feed.module.css
+++ b/src/components/main-layout/feed/main-layout-feed.module.css
@@ -1,18 +1,27 @@
-@import '../homepage-layout.vars.module.css';
+@import url("../main-layout.vars.module.css");
+
+@value tablet-portrait from "shared/styles/media.module.css";
.root {
position: sticky;
z-index: 1;
- top: 0;
+ top: var(--height-navbar-tablet-portrait);
width: $aside-visible-width;
- height: 100vh;
+ height: calc(100vh - var(--height-navbar-tablet-portrait));
background-color: var(--light-green);
grid-area: feed;
-ms-overflow-style: none;
overflow-x: hidden;
scrollbar-width: none;
- transition: margin, width;
transition-duration: .2s;
+ transition-property: margin, width;
+ transition-timing-function: cubic-bezier(.6, 0, .5, 1);
+
+ @media tablet-portrait {
+ position: static;
+ width: initial;
+ height: initial;
+ }
@media (min-width: $tablet-portrait) {
&:hover {
@@ -21,12 +30,6 @@
}
}
- @media (max-width: $tablet-portrait) {
- position: static;
- width: initial;
- height: initial;
- }
-
&::-webkit-scrollbar {
display: none;
}
@@ -36,7 +39,7 @@
width: $aside-width;
overflow-y: auto;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
width: initial;
}
}
diff --git a/src/components/homepage-layout/feed/homepage-layout-feed.tsx b/src/components/main-layout/feed/main-layout-feed.tsx
similarity index 72%
rename from src/components/homepage-layout/feed/homepage-layout-feed.tsx
rename to src/components/main-layout/feed/main-layout-feed.tsx
index e4efe42f1..75f09ce5b 100644
--- a/src/components/homepage-layout/feed/homepage-layout-feed.tsx
+++ b/src/components/main-layout/feed/main-layout-feed.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
import type { FC } from 'react';
-import styles from './homepage-layout-feed.module.css';
+import styles from './main-layout-feed.module.css';
const cx = classNames.bind(styles);
-export const HomepageLayoutFeed: FC = (props) => {
+export const MainLayoutFeed: FC = (props) => {
const { children } = props;
return (
diff --git a/src/components/main-layout/index.ts b/src/components/main-layout/index.ts
new file mode 100644
index 000000000..7813c9d2b
--- /dev/null
+++ b/src/components/main-layout/index.ts
@@ -0,0 +1 @@
+export * from './main-layout';
diff --git a/src/components/main-layout/main-layout.module.css b/src/components/main-layout/main-layout.module.css
new file mode 100644
index 000000000..b16a18db3
--- /dev/null
+++ b/src/components/main-layout/main-layout.module.css
@@ -0,0 +1,12 @@
+@import url("./main-layout.vars.module.css");
+
+.root {
+ display: grid;
+ grid-template:
+ "events feed" auto
+ "content feed" 1fr / 1fr auto;
+
+ @media (max-width: $tablet-portrait) {
+ display: block;
+ }
+}
diff --git a/src/components/main-layout/main-layout.tsx b/src/components/main-layout/main-layout.tsx
new file mode 100644
index 000000000..d83b3ebc4
--- /dev/null
+++ b/src/components/main-layout/main-layout.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames/bind';
+
+import { MainLayoutContent } from './content';
+import { MainLayoutEvents } from './events';
+import { MainLayoutFeed } from './feed';
+
+import type { FC } from 'react';
+
+import styles from './main-layout.module.css';
+
+const cx = classNames.bind(styles);
+
+const Component: FC = (props) => {
+ const { children } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {title} +
+
+
+ )}
+ iconPosition="right"
+ href={actionUrl}
+ target="_blank"
+ >
+ {actionText}
+
+
+
+ {children}
+
+ );
+};
+
+Component.displayName = 'MainLayout';
+
+export const MainLayout = Object.assign(Component, {
+ Feed: MainLayoutFeed,
+ Content: MainLayoutContent,
+ Events: MainLayoutEvents,
+});
diff --git a/src/components/homepage-layout/homepage-layout.vars.module.css b/src/components/main-layout/main-layout.vars.module.css
similarity index 100%
rename from src/components/homepage-layout/homepage-layout.vars.module.css
rename to src/components/main-layout/main-layout.vars.module.css
diff --git a/src/components/media-review-card/media-review-card.tsx b/src/components/media-review-card/media-review-card.tsx
index 871533c9a..dc16f627d 100644
--- a/src/components/media-review-card/media-review-card.tsx
+++ b/src/components/media-review-card/media-review-card.tsx
@@ -1,16 +1,16 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
-import { InfoLink } from 'components/ui/info-link';
+import { Button } from 'components/ui/button2';
+import { Icon } from 'components/ui/icon';
-import type { Url } from 'shared/types';
+import type { FC } from 'react';
import styles from './media-review-card.module.css';
interface MediaReviewCardProps {
- logo?: Url,
- text: string,
- href?: Url,
+ logo?: Url
+ text: string
+ href?: Url
}
const cx = classNames.bind(styles);
@@ -36,17 +36,23 @@ export const MediaReviewCard: FC
-
)}
diff --git a/src/components/mission-section/mission-section.tsx b/src/components/mission-section/mission-section.tsx
index e4142fa1f..46387be37 100644
--- a/src/components/mission-section/mission-section.tsx
+++ b/src/components/mission-section/mission-section.tsx
@@ -1,23 +1,24 @@
-import { FC } from 'react';
import cn from 'classnames';
import TextItem from '../mission-text-item';
+import type { FC } from 'react';
+
import style from './mission-section.module.css';
interface ITextItemData {
- id: number;
- number: string;
- title: string;
- text: Array
- {children}
-
- );
-};
diff --git a/src/components/navbar/index.ts b/src/components/navbar/index.ts
index f5899d036..8f8d8294a 100644
--- a/src/components/navbar/index.ts
+++ b/src/components/navbar/index.ts
@@ -1 +1,10 @@
-export * from './navbar';
+import { Navbar as Component } from './navbar';
+import { NavbarActionsSlot } from './navbar-actions-slot';
+import { NavbarSlot } from './navbar-slot';
+
+export const Navbar = Object.assign(Component, {
+ Slot: NavbarSlot,
+ ActionsSlot: NavbarActionsSlot,
+});
+
+export type { NavbarProps } from './navbar';
diff --git a/src/components/navbar/logotype/index.ts b/src/components/navbar/logotype/index.ts
deleted file mode 100644
index fc3634e91..000000000
--- a/src/components/navbar/logotype/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navbar-logotype';
diff --git a/src/components/navbar/logotype/navbar-logotype.module.css b/src/components/navbar/logotype/navbar-logotype.module.css
deleted file mode 100644
index 186c4eb3e..000000000
--- a/src/components/navbar/logotype/navbar-logotype.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.logotype {
- display: flex;
- align-self: center;
- margin-right: 25px;
- place-content: center;
-
- @media (max-width: $tablet-portrait) {
- margin-right: 0;
- }
-}
diff --git a/src/components/navbar/logotype/navbar-logotype.tsx b/src/components/navbar/logotype/navbar-logotype.tsx
deleted file mode 100644
index b7de9223d..000000000
--- a/src/components/navbar/logotype/navbar-logotype.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FC } from 'react';
-import classNames from 'classnames/bind';
-
-import styles from './navbar-logotype.module.css';
-
-const cx = classNames.bind(styles);
-
-export const NavbarLogotype: FC = (props) => {
- const { children } = props;
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/components/navbar/navbar-actions-slot.tsx b/src/components/navbar/navbar-actions-slot.tsx
new file mode 100644
index 000000000..5c19bf069
--- /dev/null
+++ b/src/components/navbar/navbar-actions-slot.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames/bind';
+
+import style from './navbar.module.css';
+
+interface NavbarActionsSlotProps {
+ type?: 'regular' | 'main-navigation'
+ as?: React.ElementType
+}
+
+const cx = classNames.bind(style);
+
+export const NavbarActionsSlot: React.FC
+ {children}
+
+ );
+};
diff --git a/src/components/navbar/navbar.module.css b/src/components/navbar/navbar.module.css
index a6ac05e8c..68fd45900 100644
--- a/src/components/navbar/navbar.module.css
+++ b/src/components/navbar/navbar.module.css
@@ -1,21 +1,69 @@
-@value section, primary from 'section/navbar-section.module.css';
-@value logotype from 'logotype/navbar-logotype.module.css';
+@value tablet-portrait from "shared/styles/media.module.css";
.common {
display: flex;
align-items: flex-start;
- border-bottom: 1px solid var(--coal);
+}
+
+.logotype {
+ display: flex;
+ align-self: center;
+ margin-right: 25px;
+ place-content: center;
+
+ @media tablet-portrait {
+ margin-right: 18px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
+.actions {
+ display: flex;
+ height: 59px;
+ flex-grow: 1;
+ place-content: stretch;
+
+ @media tablet-portrait {
+ display: none;
+ }
+}
+
+.actions-slot {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 0 8px;
- @media (max-width: $tablet-portrait) {
- border: 0;
+ &:not(:last-child)::after {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ display: block;
+ width: 1px;
+ height: 80%;
+ background-color: var(--coal);
+ content: "";
}
}
-.normal {
+.action-slot-regular {
+ composes: actions-slot;
+}
+
+.action-slot-main-navigation {
+ composes: actions-slot;
+ flex-grow: 1;
+ padding-right: 30px;
+}
+
+.regular {
composes: common;
padding-left: 30px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 32px 24px 24px;
}
}
@@ -25,34 +73,34 @@
padding-left: 25px;
border: 0;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 24px;
}
- .section {
+ .actions-slot-regular {
&:not(:last-child)::after {
bottom: 10px;
- height: 65%;
+ height: 40px;
}
}
- .primary {
+ .action-slot-main-navigation {
padding-right: 16px;
}
.logotype {
- padding-top: 19px;
+ padding-top: 20px;
margin-right: 50px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding-top: 0;
margin-right: 0;
}
}
}
-.brand {
- @media (max-width: $tablet-portrait) {
+.common.brand {
+ @media tablet-portrait {
background-color: var(--light-green);
}
}
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 9834735e6..a1ed20b9d 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -1,23 +1,17 @@
-import { ReactNode } from 'react';
import classNames from 'classnames/bind';
-import { NavbarSection } from './section';
-import { NavbarLogotype } from './logotype';
-import { NavbarActions } from './actions';
-
import styles from './navbar.module.css';
export interface NavbarProps {
- view?: 'normal' | 'expanded',
- colors?: 'default' | 'brand',
- children?: ReactNode,
+ view?: 'regular' | 'expanded'
+ colors?: 'default' | 'brand'
}
const cx = classNames.bind(styles);
-export const Navbar = (props: NavbarProps) => {
+export const Navbar = (props: React.PropsWithChildren
+
+ );
+};
diff --git a/src/components/overlay-nav/actions/overlay-nav-actions.tsx b/src/components/overlay-nav/actions/overlay-nav-actions.tsx
index 95613a9b9..d19c5a3a8 100644
--- a/src/components/overlay-nav/actions/overlay-nav-actions.tsx
+++ b/src/components/overlay-nav/actions/overlay-nav-actions.tsx
@@ -5,7 +5,7 @@ import styles from './overlay-nav-actions.module.css';
const cx = classNames.bind(styles);
interface IOverlayNavActionsProps {
- children: React.ReactNode;
+ children: React.ReactNode
}
export const OverlayNavActions = (props: IOverlayNavActionsProps): JSX.Element => {
diff --git a/src/components/overlay-nav/copyright/overlay-nav-copyright.tsx b/src/components/overlay-nav/copyright/overlay-nav-copyright.tsx
index 747e24bd2..477e1b310 100644
--- a/src/components/overlay-nav/copyright/overlay-nav-copyright.tsx
+++ b/src/components/overlay-nav/copyright/overlay-nav-copyright.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
export const OverlayNavCopyright: FC = (props) => {
const { children } = props;
diff --git a/src/components/overlay-nav/logotype/overlay-nav-logotype.tsx b/src/components/overlay-nav/logotype/overlay-nav-logotype.tsx
index 77ec3c632..0b6f62c0a 100644
--- a/src/components/overlay-nav/logotype/overlay-nav-logotype.tsx
+++ b/src/components/overlay-nav/logotype/overlay-nav-logotype.tsx
@@ -5,7 +5,7 @@ import styles from './overlay-nav-logotype.module.css';
const cx = classNames.bind(styles);
interface IOverlayNavLogotypeProps {
- children: React.ReactNode;
+ children: React.ReactNode
}
export const OverlayNavLogotype = (props: IOverlayNavLogotypeProps): JSX.Element => {
diff --git a/src/components/overlay-nav/menu/overlay-nav-menu.tsx b/src/components/overlay-nav/menu/overlay-nav-menu.tsx
index 9395f479e..44941e543 100644
--- a/src/components/overlay-nav/menu/overlay-nav-menu.tsx
+++ b/src/components/overlay-nav/menu/overlay-nav-menu.tsx
@@ -5,7 +5,7 @@ import styles from './overlay-nav-menu.module.css';
const cx = classNames.bind(styles);
interface IOverlayNavMenuProps {
- children: React.ReactNode;
+ children: React.ReactNode
}
export const OverlayNavMenu = (props: IOverlayNavMenuProps): JSX.Element => {
diff --git a/src/components/overlay-nav/overlay-nav.tsx b/src/components/overlay-nav/overlay-nav.tsx
index 4ccbad3a3..1db90f887 100644
--- a/src/components/overlay-nav/overlay-nav.tsx
+++ b/src/components/overlay-nav/overlay-nav.tsx
@@ -1,17 +1,17 @@
import classNames from 'classnames/bind';
+import { OverlayNavActions } from './actions';
+import { OverlayNavCopyright } from './copyright';
import { OverlayNavLogotype } from './logotype';
import { OverlayNavMenu } from './menu';
-import { OverlayNavActions } from './actions';
import { OverlayNavSocials } from './socials';
-import { OverlayNavCopyright } from './copyright';
import styles from './overlay-nav.module.css';
const cx = classNames.bind(styles);
interface IOverlayNavProps {
- children: React.ReactNode;
+ children: React.ReactNode
}
export const OverlayNav = (props: IOverlayNavProps): JSX.Element => {
diff --git a/src/components/overlay-nav/socials/overlay-nav-socials.tsx b/src/components/overlay-nav/socials/overlay-nav-socials.tsx
index c1c621845..011f5dc64 100644
--- a/src/components/overlay-nav/socials/overlay-nav-socials.tsx
+++ b/src/components/overlay-nav/socials/overlay-nav-socials.tsx
@@ -5,7 +5,7 @@ import styles from './overlay-nav-socials.module.css';
const cx = classNames.bind(styles);
interface IOverlayNavSocialsProps {
- children: React.ReactNode;
+ children: React.ReactNode
}
export const OverlayNavSocials = (props: IOverlayNavSocialsProps): JSX.Element => {
diff --git a/src/components/page-title/page-title.tsx b/src/components/page-title/page-title.tsx
index 9aeb9ad26..101d71d51 100644
--- a/src/components/page-title/page-title.tsx
+++ b/src/components/page-title/page-title.tsx
@@ -1,6 +1,7 @@
-import { FC, HTMLAttributes } from 'react';
import classNames from 'classnames/bind';
+import type { FC, HTMLAttributes } from 'react';
+
import styles from './page-title.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/page-transition/page-transition.module.css b/src/components/page-transition/page-transition.module.css
index f7a702db4..163d39a46 100644
--- a/src/components/page-transition/page-transition.module.css
+++ b/src/components/page-transition/page-transition.module.css
@@ -9,16 +9,16 @@
.rightToLeft {
@media (max-width: $tablet-portrait) {
- animation: rightToLeft 500ms 1 linear;
+ animation: right-to-left 500ms 1 linear;
+ }
+}
- @keyframes rightToLeft {
- 0% {
- transform: translate(var(--page-content-min-width), 0);
- }
+@keyframes right-to-left {
+ 0% {
+ transform: translate(var(--page-content-min-width), 0);
+ }
- 100% {
- transform: translate(0, 0);
- }
- }
+ 100% {
+ transform: translate(0, 0);
}
}
diff --git a/src/components/page-transition/page-transition.tsx b/src/components/page-transition/page-transition.tsx
index b27169b5e..87005f414 100644
--- a/src/components/page-transition/page-transition.tsx
+++ b/src/components/page-transition/page-transition.tsx
@@ -5,8 +5,8 @@ import styles from './page-transition.module.css';
const cx = classNames.bind(styles);
interface IPageTransitionProps {
- children: React.ReactNode;
- type: string;
+ children: React.ReactNode
+ type: string
}
export const PageTransition = (props: IPageTransitionProps): JSX.Element => {
diff --git a/src/components/page/breadcrumbs/page-breadcrumbs.tsx b/src/components/page/breadcrumbs/page-breadcrumbs.tsx
index bb3cddcc1..cebf99337 100644
--- a/src/components/page/breadcrumbs/page-breadcrumbs.tsx
+++ b/src/components/page/breadcrumbs/page-breadcrumbs.tsx
@@ -1,10 +1,11 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './page-breadcrumbs.module.css';
interface IBreadcrumbsProps {
- className?: string,
+ className?: string
}
const cx = classNames.bind(styles);
diff --git a/src/components/page/burger-button/page-burger-button.tsx b/src/components/page/burger-button/page-burger-button.tsx
index e9f650d0f..1d7f99aaf 100644
--- a/src/components/page/burger-button/page-burger-button.tsx
+++ b/src/components/page/burger-button/page-burger-button.tsx
@@ -5,7 +5,7 @@ import styles from './page-burger-button.module.css';
const cx = classNames.bind(styles);
interface IPageBurgerButtonProps {
- children: React.ReactNode;
+ children: React.ReactNode
}
export const PageBurgerButton = (props: IPageBurgerButtonProps): JSX.Element => {
diff --git a/src/components/page/footer/page-footer.tsx b/src/components/page/footer/page-footer.tsx
index d2281d953..173982562 100644
--- a/src/components/page/footer/page-footer.tsx
+++ b/src/components/page/footer/page-footer.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './page-footer.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/page/head-banner/index.ts b/src/components/page/head-banner/index.ts
deleted file mode 100644
index f9f263920..000000000
--- a/src/components/page/head-banner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './page-head-banner';
diff --git a/src/components/page/head-banner/page-head-banner.module.css b/src/components/page/head-banner/page-head-banner.module.css
deleted file mode 100644
index 93b7ddd59..000000000
--- a/src/components/page/head-banner/page-head-banner.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
- height: var(--head-banner-height-tablet-portrait);
-
- @media (max-width: $tablet-portrait) {
- height: 360px;
- }
-}
diff --git a/src/components/page/head-banner/page-head-banner.tsx b/src/components/page/head-banner/page-head-banner.tsx
deleted file mode 100644
index c75609703..000000000
--- a/src/components/page/head-banner/page-head-banner.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import classNames from 'classnames/bind';
-
-import type { FC } from 'react';
-
-import styles from './page-head-banner.module.css';
-
-const cx = classNames.bind(styles);
-
-export const PageHeadBanner: FC = (props) => {
- const {
- children,
- } = props;
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/components/page/index.ts b/src/components/page/index.ts
index ef927159d..9c8336f1b 100644
--- a/src/components/page/index.ts
+++ b/src/components/page/index.ts
@@ -1,6 +1,2 @@
-export { default } from './page';
-export { PageNavbar } from './navbar';
-export { PageOverlayMenu } from './overlay-menu';
-export { PageBurgerButton } from './burger-button';
-export { PageFooter } from './footer';
export { PageBreadcrumbs } from './breadcrumbs';
+export { default } from './page';
diff --git a/src/components/page/navbar/page-navbar.module.css b/src/components/page/navbar/page-navbar.module.css
index 7e6a2455c..bc2f4525e 100644
--- a/src/components/page/navbar/page-navbar.module.css
+++ b/src/components/page/navbar/page-navbar.module.css
@@ -1,8 +1,16 @@
+@value tablet-portrait from "shared/styles/media.module.css";
+
.root {
- display: flex;
- flex-direction: column;
+ position: sticky;
+ z-index: 2;
+ top: 0;
+ border-bottom: 1px solid var(--coal);
+ background-color: var(--beige);
- @media (max-width: $tablet-portrait) {
- order: -1;
+ @media tablet-portrait {
+ position: static;
+ z-index: auto;
+ border: 0;
+ background-color: var(--white);
}
}
diff --git a/src/components/page/navbar/page-navbar.tsx b/src/components/page/navbar/page-navbar.tsx
index b7ab92cff..55c681f79 100644
--- a/src/components/page/navbar/page-navbar.tsx
+++ b/src/components/page/navbar/page-navbar.tsx
@@ -1,17 +1,25 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
import styles from './page-navbar.module.css';
+interface PageNavbarProps {
+ custom?: boolean
+}
+
const cx = classNames.bind(styles);
-export const PageNavbar: FC = (props) => {
+export const PageNavbar: React.FC
{ageRestriction}
diff --git a/src/components/performance-event-list/item/performance-event-list-item.tsx b/src/components/performance-event-list/item/performance-event-list-item.tsx
index fcce0ff35..dd22d6349 100644
--- a/src/components/performance-event-list/item/performance-event-list-item.tsx
+++ b/src/components/performance-event-list/item/performance-event-list-item.tsx
@@ -4,19 +4,23 @@ import { Button } from 'components/ui/button2';
import { Icon } from 'components/ui/icon';
import type { FC } from 'react';
-import type { Url } from 'shared/types';
import styles from './performance-event-list-item.module.css';
interface PerformanceEventListProps {
- date?: string
- ticketsUrl: Url
+ date: string
+ actionUrl?: Url
+ actionText?: string
}
const cx = classNames.bind(styles);
export const PerformanceEventListItem: FC = (props) => {
- const { date, ticketsUrl } = props;
+ const {
+ date,
+ actionText,
+ actionUrl,
+ } = props;
return (
@@ -25,26 +29,28 @@ export const PerformanceEventListItem: FC = (props) =
{date}
)}
-
);
};
diff --git a/src/components/performance-headline/performance-headline.module.css b/src/components/performance-headline/performance-headline.module.css
index 31cf3d384..547444322 100644
--- a/src/components/performance-headline/performance-headline.module.css
+++ b/src/components/performance-headline/performance-headline.module.css
@@ -1,20 +1,10 @@
-@import '../performance-layout/performance-layout.vars.module.css';
-
-.root {
- display: grid;
- grid-column-gap: $layout-column-gap-tablet-portrait;
- grid-template-columns: repeat(2, minmax(0, 1fr));
-
- @media (max-width: $tablet-portrait) {
- display: block;
- }
-}
+@import url("../performance-layout/performance-layout.vars.module.css");
.title {
@mixin headline;
@mixin headline2;
- margin: 62px 0 36px;
+ margin: 0 0 36px;
word-wrap: break-word;
@media (max-width: $tablet-portrait) {
@@ -28,32 +18,10 @@
@mixin headline;
@mixin headline7;
- min-height: 284px;
padding-left: 60px;
- margin-bottom: 24px;
@media (max-width: $tablet-portrait) {
min-height: initial;
- padding-left: 60px;
- margin-bottom: 30px;
- }
-}
-
-.actions {
- @media (max-width: $tablet-portrait) {
- padding-left: 60px;
- margin-bottom: 38px;
- }
-}
-
-.image {
- position: relative;
- height: 614px;
- margin-right: -$page-padding-tablet-portrait;
-
- @media (max-width: $tablet-portrait) {
- height: 450px;
- margin-right: 0;
}
}
diff --git a/src/components/performance-headline/performance-headline.tsx b/src/components/performance-headline/performance-headline.tsx
index 132a05d80..08c954ed4 100644
--- a/src/components/performance-headline/performance-headline.tsx
+++ b/src/components/performance-headline/performance-headline.tsx
@@ -1,8 +1,6 @@
import classNames from 'classnames/bind';
-import Image from 'next/image';
-import type { FC, ReactNode } from 'react';
-import type { Url } from 'shared/types';
+import type { FC } from 'react';
import styles from './performance-headline.module.css';
@@ -11,7 +9,6 @@ interface PerformanceHeadlineProps {
description?: string
text?: string
cover: Url
- actions: ReactNode | ReactNode[]
className?: string
}
@@ -21,18 +18,13 @@ export const PerformanceHeadline: FC = (props) => {
const {
title,
description,
- cover,
text,
- actions,
className,
} = props;
return (
@@ -43,25 +35,12 @@ export const PerformanceHeadline: FC
-
);
};
diff --git a/src/components/performance-layout/bottom-image/performance-layout-bottom-image.module.css b/src/components/performance-layout/bottom-image/performance-layout-bottom-image.module.css
index 08927e79f..06cb8dc47 100644
--- a/src/components/performance-layout/bottom-image/performance-layout-bottom-image.module.css
+++ b/src/components/performance-layout/bottom-image/performance-layout-bottom-image.module.css
@@ -2,9 +2,9 @@
position: relative;
height: 404px;
margin-bottom: 60px;
- grid-area: bottom-image;
@media (max-width: $tablet-portrait) {
height: 252px;
+ order: 11;
}
}
diff --git a/src/components/performance-layout/bottom-image/performance-layout-bottom-image.tsx b/src/components/performance-layout/bottom-image/performance-layout-bottom-image.tsx
index 2f26b0cc9..362472743 100644
--- a/src/components/performance-layout/bottom-image/performance-layout-bottom-image.tsx
+++ b/src/components/performance-layout/bottom-image/performance-layout-bottom-image.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './performance-layout-bottom-image.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/performance-layout/content/performance-layout-content.module.css b/src/components/performance-layout/content/performance-layout-content.module.css
index 3bf85d2ed..78d8a9fd6 100644
--- a/src/components/performance-layout/content/performance-layout-content.module.css
+++ b/src/components/performance-layout/content/performance-layout-content.module.css
@@ -1,5 +1,14 @@
-@import '../performance-layout.vars.module.css';
+@import url("../performance-layout.vars.module.css");
.root {
- grid-area: content;
+ display: inline-block;
+ width: $right-column-width-tablet-portrait;
+ margin-bottom: 144px;
+
+ @media (max-width: $tablet-portrait) {
+ display: block;
+ width: auto;
+ order: 6;
+ margin-bottom: 100px;
+ }
}
diff --git a/src/components/performance-layout/cover/index.ts b/src/components/performance-layout/cover/index.ts
new file mode 100644
index 000000000..982e67420
--- /dev/null
+++ b/src/components/performance-layout/cover/index.ts
@@ -0,0 +1 @@
+export * from './performance-layout-cover';
diff --git a/src/components/performance-layout/cover/performance-layout-cover.module.css b/src/components/performance-layout/cover/performance-layout-cover.module.css
new file mode 100644
index 000000000..8d91a0a24
--- /dev/null
+++ b/src/components/performance-layout/cover/performance-layout-cover.module.css
@@ -0,0 +1,24 @@
+@import url("../performance-layout.vars.module.css");
+
+.root {
+ display: inline-block;
+ width: $right-column-width-tablet-portrait;
+ margin-bottom: 48px;
+
+ @media (max-width: $tablet-portrait) {
+ display: block;
+ width: auto;
+ order: 3;
+ }
+}
+
+.inner {
+ position: relative;
+ height: 614px;
+ margin-right: -$page-padding-tablet-portrait;
+
+ @media (max-width: $tablet-portrait) {
+ height: 450px;
+ margin: 0 -$page-padding-smartphone 56px -$page-padding-smartphone;
+ }
+}
diff --git a/src/components/press-release-layout/content/press-release-layout-content.tsx b/src/components/performance-layout/cover/performance-layout-cover.tsx
similarity index 53%
rename from src/components/press-release-layout/content/press-release-layout-content.tsx
rename to src/components/performance-layout/cover/performance-layout-cover.tsx
index 9bc02ea58..bd5c91a6f 100644
--- a/src/components/press-release-layout/content/press-release-layout-content.tsx
+++ b/src/components/performance-layout/cover/performance-layout-cover.tsx
@@ -2,16 +2,18 @@ import classNames from 'classnames/bind';
import type { FC } from 'react';
-import styles from './press-release-layout-content.module.css';
+import styles from './performance-layout-cover.module.css';
const cx = classNames.bind(styles);
-export const PressReleaseLayoutContent: FC = (props) => {
+export const PerformanceLayoutCover: FC = (props) => {
const { children } = props;
return (
;
-
-const ListTemplate: Story = ({ items, ...args }) => (
-
- {(items as IPersonCardProps[]).map((item, idx) => (
-
-);
-
-export const Default = ListTemplate.bind({});
-Default.parameters = {
- layout: 'fullscreen'
-};
-Default.args = {
- items: Array.from(Array(7)).map(() => Participant.args),
- gapLarge: true,
-};
-
diff --git a/src/components/person-card-list/person-card-list.tsx b/src/components/person-card-list/person-card-list.tsx
index e9a5d2728..8a5d579bd 100644
--- a/src/components/person-card-list/person-card-list.tsx
+++ b/src/components/person-card-list/person-card-list.tsx
@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
import classNames from 'classnames/bind';
+import type { ReactNode } from 'react';
+
import styles from './person-card-list.module.css';
const cx = classNames.bind(styles);
interface IPersonCardListProps extends React.HTMLAttributes {
- expanded?: boolean;
- children: ReactNode;
+ expanded?: boolean
+ children: ReactNode
}
export const PersonCardList = (props: IPersonCardListProps): JSX.Element => {
diff --git a/src/components/person-card/index.ts b/src/components/person-card/index.ts
new file mode 100644
index 000000000..00fa1b016
--- /dev/null
+++ b/src/components/person-card/index.ts
@@ -0,0 +1 @@
+export * from './person-card';
diff --git a/src/components/person-card/person-card.module.css b/src/components/person-card/person-card.module.css
new file mode 100644
index 000000000..bec4c01c6
--- /dev/null
+++ b/src/components/person-card/person-card.module.css
@@ -0,0 +1,50 @@
+.tile {
+ position: relative;
+ margin: 0 0 16px;
+ background-color: var(--gray);
+}
+
+.action {
+ position: absolute;
+ bottom: 12px;
+ left: 12px;
+ display: flex;
+ width: 44px;
+ height: 44px;
+ align-items: center;
+ justify-content: center;
+ border: 0;
+ border-radius: 22px;
+ background: var(--beige);
+ font-size: 0;
+}
+
+.name {
+ @mixin headline;
+
+ margin: 0 0 16px;
+}
+
+.role {
+ margin-left: 32px;
+}
+
+.s {
+ .tile {
+ height: 228px;
+ }
+
+ .name {
+ @mixin headline7;
+ }
+}
+
+.m {
+ .tile {
+ height: 265px;
+ }
+
+ .name {
+ @mixin headline6;
+ }
+}
diff --git a/src/components/person-card/person-card.tsx b/src/components/person-card/person-card.tsx
new file mode 100644
index 000000000..f2c55ed13
--- /dev/null
+++ b/src/components/person-card/person-card.tsx
@@ -0,0 +1,65 @@
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import { Icon } from 'components/ui/icon';
+
+import type { Person } from 'core/person';
+
+import styles from './person-card.module.css';
+
+interface PersonCardProps extends Person {
+ size?: 's' | 'm'
+ titleTag?: React.ElementType
+ onClick?: () => void
+}
+
+const cx = classNames.bind(styles);
+
+export const PersonCard: React.VFC = (props) => {
+ const {
+ size = 'm',
+ titleTag: TitleTag = 'h3',
+ fullName,
+ photoUrl,
+ role,
+ onClick,
+ } = props;
+
+ return (
+
}
const getClass = (number:number) => {
- if(number < 4) {
+ if (number < 4) {
return 'linear';
}
- if(number === 5) {
+ if (number === 5) {
return 'five';
}
- if(number % 3 === 0 && number < 16) {
+ if (number % 3 === 0 && number < 16) {
return 'three';
}
+
return 'four';
};
-const PersonsList: FC = ({ persons }) => {
+const PersonsList: React.FC = ({ persons }) => {
return (
-
);
};
-
-Component.displayName = 'PressReleaseLayout';
-
-export const PressReleaseLayout = Object.assign(Component, {
- Title: PressReleaseLayoutTitle,
- Cover: PressReleaseLayoutCover,
- Content: PressReleaseLayoutContent,
- Actions: PressReleaseLayoutActions,
-});
-
diff --git a/src/components/press-release-layout/press-release-layout.vars.module.css b/src/components/press-release-layout/press-release-layout.vars.module.css
deleted file mode 100644
index e83028485..000000000
--- a/src/components/press-release-layout/press-release-layout.vars.module.css
+++ /dev/null
@@ -1,2 +0,0 @@
-$page-margin-tablet-portrait: 120px;
-$page-margin-smartphone: 24px;
diff --git a/src/components/press-release-layout/title/index.ts b/src/components/press-release-layout/title/index.ts
deleted file mode 100644
index 10c28db56..000000000
--- a/src/components/press-release-layout/title/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './press-release-layout-title';
diff --git a/src/components/press-release-layout/title/press-release-layout-title.module.css b/src/components/press-release-layout/title/press-release-layout-title.module.css
deleted file mode 100644
index 740b7ac14..000000000
--- a/src/components/press-release-layout/title/press-release-layout-title.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.root {
- align-self: flex-end;
- margin-bottom: 32px;
- grid-area: title;
-}
diff --git a/src/components/project-card-list/item/project-card-list-item.module.css b/src/components/project-card-list/item/project-card-list-item.module.css
index 40dc9bba5..dc05367d9 100644
--- a/src/components/project-card-list/item/project-card-list-item.module.css
+++ b/src/components/project-card-list/item/project-card-list-item.module.css
@@ -9,7 +9,7 @@
}
@media (max-width: $tablet-portrait) {
- width: unset;
+ width: 100%;
&:nth-child(3n) {
margin-right: unset;
diff --git a/src/components/project-card-list/item/project-card-list-item.tsx b/src/components/project-card-list/item/project-card-list-item.tsx
index c15410466..1657bbc2c 100644
--- a/src/components/project-card-list/item/project-card-list-item.tsx
+++ b/src/components/project-card-list/item/project-card-list-item.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import style from './project-card-list-item.module.css';
const cx = classNames.bind(style);
diff --git a/src/components/project-card-list/project-card-list.tsx b/src/components/project-card-list/project-card-list.tsx
index 635a92423..12c4495a6 100644
--- a/src/components/project-card-list/project-card-list.tsx
+++ b/src/components/project-card-list/project-card-list.tsx
@@ -1,8 +1,9 @@
-import { HTMLAttributes } from 'react';
import classNames from 'classnames/bind';
import { ProjectCardListItem } from './item';
+import type { HTMLAttributes } from 'react';
+
import styles from './project-card-list.module.css';
const cx = classNames.bind(styles);
@@ -14,7 +15,7 @@ export const ProjectCardList = (props: HTMLAttributes
-
- )}
- iconPosition="right"
- href={ticketsUrl}
- target="_blank"
- >
- Билеты
-
-
+ {actionText && actionUrl && (
+
+
+ )}
+ iconPosition="right"
+ href={actionUrl}
+ target="_blank"
+ >
+ {actionText}
+
+
+ )}
@@ -43,25 +35,12 @@ export const PerformanceHeadline: FC = (props) => {
{description}
)}
-
- {actions}
-
-
- {actions}
-
-
-
+ {text && (
+
-
- {text && (
- - {text} -
- )}+ {text} +
+ )}
- {children}
+
);
};
diff --git a/src/components/performance-layout/events/index.ts b/src/components/performance-layout/events/index.ts
new file mode 100644
index 000000000..341cd453c
--- /dev/null
+++ b/src/components/performance-layout/events/index.ts
@@ -0,0 +1 @@
+export * from './performance-layout-events';
diff --git a/src/components/performance-layout/events/performance-layout-events.module.css b/src/components/performance-layout/events/performance-layout-events.module.css
new file mode 100644
index 000000000..cead2daec
--- /dev/null
+++ b/src/components/performance-layout/events/performance-layout-events.module.css
@@ -0,0 +1,14 @@
+@import url("../performance-layout.vars.module.css");
+
+.root {
+ width: $left-column-width-tablet-portrait;
+ margin: 0 $column-gap-tablet-portrait 100px 0;
+ float: left;
+
+ @media (max-width: $tablet-portrait) {
+ width: auto;
+ order: 2;
+ margin: 0 0 38px 60px;
+ float: none;
+ }
+}
diff --git a/src/components/press-release-layout/cover/press-release-layout-cover.tsx b/src/components/performance-layout/events/performance-layout-events.tsx
similarity index 65%
rename from src/components/press-release-layout/cover/press-release-layout-cover.tsx
rename to src/components/performance-layout/events/performance-layout-events.tsx
index 0a04535f0..11e361386 100644
--- a/src/components/press-release-layout/cover/press-release-layout-cover.tsx
+++ b/src/components/performance-layout/events/performance-layout-events.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
import type { FC } from 'react';
-import styles from './press-release-layout-cover.module.css';
+import styles from './performance-layout-events.module.css';
const cx = classNames.bind(styles);
-export const PressReleaseLayoutCover: FC = (props) => {
+export const PerformanceLayoutEvents: FC = (props) => {
const { children } = props;
return (
diff --git a/src/components/performance-layout/gallery/performance-layout-gallery.module.css b/src/components/performance-layout/gallery/performance-layout-gallery.module.css
index baf12d0a5..eca3a4286 100644
--- a/src/components/performance-layout/gallery/performance-layout-gallery.module.css
+++ b/src/components/performance-layout/gallery/performance-layout-gallery.module.css
@@ -1,10 +1,11 @@
-@import '../performance-layout.vars.module.css';
+@import url("../performance-layout.vars.module.css");
.gallery {
margin: 0 -$page-padding-tablet-portrait 146px;
- grid-area: gallery;
+ clear: both;
@media (max-width: $tablet-portrait) {
+ order: 7;
margin: 0 -$page-padding-smartphone 105px;
}
}
diff --git a/src/components/performance-layout/gallery/performance-layout-gallery.tsx b/src/components/performance-layout/gallery/performance-layout-gallery.tsx
index cbef2a555..5e4794bf6 100644
--- a/src/components/performance-layout/gallery/performance-layout-gallery.tsx
+++ b/src/components/performance-layout/gallery/performance-layout-gallery.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './performance-layout-gallery.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/performance-layout/intro/index.ts b/src/components/performance-layout/intro/index.ts
new file mode 100644
index 000000000..a087eb3d3
--- /dev/null
+++ b/src/components/performance-layout/intro/index.ts
@@ -0,0 +1 @@
+export * from './performance-layout-intro';
diff --git a/src/components/performance-layout/intro/performance-layout-intro.module.css b/src/components/performance-layout/intro/performance-layout-intro.module.css
new file mode 100644
index 000000000..26f247367
--- /dev/null
+++ b/src/components/performance-layout/intro/performance-layout-intro.module.css
@@ -0,0 +1,20 @@
+@import url("../performance-layout.vars.module.css");
+
+.root {
+ @mixin text;
+
+ display: inline-block;
+ width: $right-column-width-tablet-portrait;
+ margin-bottom: 68px;
+ font-size: 28px;
+ line-height: 32px;
+
+ @media (max-width: $tablet-portrait) {
+ display: block;
+ width: auto;
+ order: 4;
+ margin-bottom: 100px;
+ font-size: 20px;
+ line-height: 24px;
+ }
+}
diff --git a/src/components/press-release-layout/title/press-release-layout-title.tsx b/src/components/performance-layout/intro/performance-layout-intro.tsx
similarity index 65%
rename from src/components/press-release-layout/title/press-release-layout-title.tsx
rename to src/components/performance-layout/intro/performance-layout-intro.tsx
index 5b953d485..8b833c876 100644
--- a/src/components/press-release-layout/title/press-release-layout-title.tsx
+++ b/src/components/performance-layout/intro/performance-layout-intro.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames/bind';
import type { FC } from 'react';
-import styles from './press-release-layout-title.module.css';
+import styles from './performance-layout-intro.module.css';
const cx = classNames.bind(styles);
-export const PressReleaseLayoutTitle: FC = (props) => {
+export const PerformanceLayoutIntro: FC = (props) => {
const { children } = props;
return (
diff --git a/src/components/performance-layout/media-reviews/performance-layout-media-reviews.module.css b/src/components/performance-layout/media-reviews/performance-layout-media-reviews.module.css
index e53ebf50d..cc66bf07d 100644
--- a/src/components/performance-layout/media-reviews/performance-layout-media-reviews.module.css
+++ b/src/components/performance-layout/media-reviews/performance-layout-media-reviews.module.css
@@ -1,11 +1,11 @@
-@import '../performance-layout.vars.module.css';
+@import url("../performance-layout.vars.module.css");
.root {
min-width: 0;
margin: 0 -$page-padding-tablet-portrait 112px;
- grid-area: media-reviews;
@media (max-width: $tablet-portrait) {
+ order: 8;
margin: 0 -$page-padding-smartphone 76px;
}
}
diff --git a/src/components/performance-layout/media-reviews/performance-layout-media-reviews.tsx b/src/components/performance-layout/media-reviews/performance-layout-media-reviews.tsx
index 164d6c3bf..517ccdc2b 100644
--- a/src/components/performance-layout/media-reviews/performance-layout-media-reviews.tsx
+++ b/src/components/performance-layout/media-reviews/performance-layout-media-reviews.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './performance-layout-media-reviews.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/performance-layout/performance-layout.module.css b/src/components/performance-layout/performance-layout.module.css
index 8853d6363..20bd4b688 100644
--- a/src/components/performance-layout/performance-layout.module.css
+++ b/src/components/performance-layout/performance-layout.module.css
@@ -1,29 +1,25 @@
-@import './performance-layout.vars.module.css';
+@import url("./performance-layout.vars.module.css");
.root {
- display: grid;
padding: 0 $page-padding-tablet-portrait;
- grid-template:
- "headline headline"
- "summary content"
- "gallery gallery"
- "media-reviews media-reviews"
- "reviews reviews"
- "bottom-image bottom-image"
- "share share";
@media (max-width: $tablet-portrait) {
- display: block;
+ display: flex;
+ flex-direction: column;
padding: 40px $page-padding-smartphone 0;
}
}
.headline {
- margin-bottom: 68px;
- grid-area: headline;
+ width: $left-column-width-tablet-portrait;
+ margin: 62px $column-gap-tablet-portrait 100px 0;
+ float: left;
@media (max-width: $tablet-portrait) {
- margin-bottom: 100px;
+ width: auto;
+ order: 1;
+ margin: 0 0 30px;
+ float: none;
}
}
@@ -41,6 +37,11 @@
margin-bottom: 80px;
}
-.play {
- margin-bottom: 144px;
+.card_in_performance {
+ max-width: 240px;
+
+ @media (max-width: $tablet-portrait) {
+ max-width: 244px;
+ margin: 0 auto;
+ }
}
diff --git a/src/components/performance-layout/performance-layout.tsx b/src/components/performance-layout/performance-layout.tsx
index abe862675..4d2c244f0 100644
--- a/src/components/performance-layout/performance-layout.tsx
+++ b/src/components/performance-layout/performance-layout.tsx
@@ -1,19 +1,22 @@
import classNames from 'classnames/bind';
+import { PerformanceLayoutBottomImage } from './bottom-image';
import { PerformanceLayoutContent } from './content';
-import { PerformanceLayoutSummary } from './summary';
+import { PerformanceLayoutCover } from './cover';
+import { PerformanceLayoutEvents } from './events';
import { PerformanceLayoutGallery } from './gallery';
+import { PerformanceLayoutIntro } from './intro';
import { PerformanceLayoutMediaReviews } from './media-reviews';
import { PerformanceLayoutReviews } from './reviews';
-import { PerformanceLayoutBottomImage } from './bottom-image';
import { PerformanceLayoutShare } from './share';
+import { PerformanceLayoutSummary } from './summary';
import type { ReactNode } from 'react';
import styles from './performance-layout.module.css';
interface IPerformanceLayoutProps {
- children: ReactNode;
+ children: ReactNode
}
const cx = classNames.bind(styles);
@@ -38,5 +41,8 @@ export const PerformanceLayout = Object.assign(Component, {
Reviews: PerformanceLayoutReviews,
BottomImage: PerformanceLayoutBottomImage,
Share: PerformanceLayoutShare,
+ Events: PerformanceLayoutEvents,
+ Intro: PerformanceLayoutIntro,
+ Cover: PerformanceLayoutCover,
});
diff --git a/src/components/performance-layout/performance-layout.vars.module.css b/src/components/performance-layout/performance-layout.vars.module.css
index 0a3d262cf..36b2cbb5b 100644
--- a/src/components/performance-layout/performance-layout.vars.module.css
+++ b/src/components/performance-layout/performance-layout.vars.module.css
@@ -1,3 +1,7 @@
$page-padding-smartphone: 24px;
$page-padding-tablet-portrait: 120px;
-$layout-column-gap-tablet-portrait: 80px;
+$column-gap-tablet-portrait: 80px;
+
+/* Устанавливаем ширину блоков левой колонки с float: left в 51%, чтобы они не размещались в строку */
+$left-column-width-tablet-portrait: calc(51% - $column-gap-tablet-portrait);
+$right-column-width-tablet-portrait: 49%;
diff --git a/src/components/performance-layout/reviews/performance-layout-reviews.module.css b/src/components/performance-layout/reviews/performance-layout-reviews.module.css
index 0bcca87ec..0aa7cf594 100644
--- a/src/components/performance-layout/reviews/performance-layout-reviews.module.css
+++ b/src/components/performance-layout/reviews/performance-layout-reviews.module.css
@@ -1,9 +1,9 @@
.root {
min-width: 0;
margin-bottom: 64px;
- grid-area: reviews;
@media (max-width: $tablet-portrait) {
+ order: 9;
margin-bottom: 0;
}
}
diff --git a/src/components/performance-layout/reviews/performance-layout-reviews.tsx b/src/components/performance-layout/reviews/performance-layout-reviews.tsx
index 4e9290a4b..c3ec8a9fd 100644
--- a/src/components/performance-layout/reviews/performance-layout-reviews.tsx
+++ b/src/components/performance-layout/reviews/performance-layout-reviews.tsx
@@ -1,9 +1,9 @@
import classNames from 'classnames/bind';
-import styles from './performance-layout-reviews.module.css';
-
import type { FC } from 'react';
+import styles from './performance-layout-reviews.module.css';
+
const cx = classNames.bind(styles);
export const PerformanceLayoutReviews: FC = (props) => {
diff --git a/src/components/performance-layout/share/performance-layout-share.module.css b/src/components/performance-layout/share/performance-layout-share.module.css
index 3ae56160b..2dd62e1b8 100644
--- a/src/components/performance-layout/share/performance-layout-share.module.css
+++ b/src/components/performance-layout/share/performance-layout-share.module.css
@@ -1,9 +1,9 @@
.share {
padding: 0 60px 0 362px;
margin: 23px 0 139px;
- grid-area: share;
@media (max-width: $tablet-portrait) {
+ order: 11;
padding: 0 24px 0 26px;
margin: 25px 0 100px;
}
diff --git a/src/components/performance-layout/share/performance-layout-share.tsx b/src/components/performance-layout/share/performance-layout-share.tsx
index 54b2a4420..a09e0cbc8 100644
--- a/src/components/performance-layout/share/performance-layout-share.tsx
+++ b/src/components/performance-layout/share/performance-layout-share.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './performance-layout-share.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/performance-layout/summary/performance-layout-summary.module.css b/src/components/performance-layout/summary/performance-layout-summary.module.css
index f3a17062b..b12315e0f 100644
--- a/src/components/performance-layout/summary/performance-layout-summary.module.css
+++ b/src/components/performance-layout/summary/performance-layout-summary.module.css
@@ -1,11 +1,16 @@
-@import '../performance-layout.vars.module.css';
+@import url("../performance-layout.vars.module.css");
.root {
- grid-area: summary;
+ width: $left-column-width-tablet-portrait;
+ margin: 0 $column-gap-tablet-portrait 144px 0;
+ float: left;
@media (max-width: $tablet-portrait) {
+ width: auto;
+ order: 5;
padding: 58px $page-padding-smartphone 72px;
margin: 0 -$page-padding-smartphone 24px;
background-color: var(--white);
+ float: none;
}
}
diff --git a/src/components/person-card-list/person-card-list.module.css b/src/components/person-card-list/person-card-list.module.css
index 6ebd77679..0f58752be 100644
--- a/src/components/person-card-list/person-card-list.module.css
+++ b/src/components/person-card-list/person-card-list.module.css
@@ -9,7 +9,7 @@
position: relative;
display: grid;
- max-width: calc((var(--card-width) * var(--columns-count)) + (var(--column-gap) * (var(--columns-count) - 1)) + (var(--padding) * 2));
+ max-width: calc((var(--card-width) * var(--columns-count)) + (var(--column-gap) * (var(--columns-count) - 1)) + (var(--padding) * 2)); /* stylelint-disable-line max-line-length */
box-sizing: border-box;
justify-content: center;
padding: 0 var(--padding);
diff --git a/src/components/person-card-list/person-card-list.stories.tsx b/src/components/person-card-list/person-card-list.stories.tsx
deleted file mode 100644
index daa5fdd42..000000000
--- a/src/components/person-card-list/person-card-list.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable react/prop-types */
-import { ComponentMeta, Story } from '@storybook/react';
-
-import { PersonCard, IPersonCardProps } from 'components/ui/person-card';
-import { Participant } from 'components/ui/person-card/person-card.stories';
-import { PersonCardList } from 'components/person-card-list';
-
-export default {
- title: 'ui/PersonCardList',
- component: PersonCardList,
- subcomponents: { PersonCard },
- decorators: [
- (Story) => (
-
+ {children}
+
-
- ),
- ],
-} as ComponentMeta
+
+ {fullName}
+
+ {role && (
+
+ );
+};
diff --git a/src/components/persons-list/persons-list.tsx b/src/components/persons-list/persons-list.tsx
index 9399bc0f8..6cf09cd1e 100644
--- a/src/components/persons-list/persons-list.tsx
+++ b/src/components/persons-list/persons-list.tsx
@@ -1,34 +1,34 @@
-import { FC } from 'react';
+import cn from 'classnames';
import { PersonCard } from '../ui/person-card/person-card';
-import 'keen-slider/keen-slider.min.css';
-import { Sponsor } from 'api-typings';
+
+import type { Sponsor } from '__generated__/api-typings';
import style from './persons-list.module.css';
-import cn from 'classnames';
interface PersonsListProps {
persons: Array
+ {photoUrl && (
+
+ + {role} +
+ )} +-
+
-
{ - photos: PhotoGalleryItem[], -} - -export const PhotoGallery: FC = (props) => { - const { - className, - photos, - } = props; - const [isLightboxOpen, setIsLightboxOpen] = useState(false); - const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0); - - const toggleLightbox = () => setIsLightboxOpen(!isLightboxOpen); - - const handleItemClick = (index: number) => () => { - setCurrentPhotoIndex(index); - toggleLightbox(); - }; - - return ( - -- ); -}; diff --git a/src/components/play-card/index.ts b/src/components/play-card/index.ts new file mode 100644 index 000000000..b9a58918f --- /dev/null +++ b/src/components/play-card/index.ts @@ -0,0 +1 @@ +export * from './play-card'; diff --git a/src/components/play-card/play-card.module.css b/src/components/play-card/play-card.module.css new file mode 100644 index 000000000..4f94b92c4 --- /dev/null +++ b/src/components/play-card/play-card.module.css @@ -0,0 +1,81 @@ +@value tablet-portrait from "shared/styles/media.module.css"; + +.tile { + display: flex; + min-height: 300px; + flex-direction: column; + margin: 0 0 16px; + background-color: var(--light-green); + + @media tablet-portrait { + min-height: 342px; + margin: 0 0 24px; + } +} + +.title { + @mixin headline; + @mixin headline7; + @mixin text-truncate-multiline 6; + + margin: 24px 30px auto 24px; + + @media tablet-portrait { + margin: 16px 46px auto 16px; + } +} + +.actions { + visibility: hidden; + + .tile:hover & { + visibility: visible; + } + + @media tablet-portrait { + visibility: visible; + } +} + +.action { + display: block; + border-top: 1px solid var(--coal); +} + +.author { + display: inline-block; + max-width: 100%; + padding: 0; + margin-inline-start: 0; + overflow-x: hidden; + + :first-child { + font-family: "PP Neue Machina", Arial, sans-serif; + font-weight: 400; + letter-spacing: -.01em; + line-height: 24px; + text-overflow: ellipsis; + } +} + +.city { + @mixin text; + @mixin textSmall; + + margin: 4px 0 0; + + @media tablet-portrait { + margin-top: 8px; + } +} + +.year { + @mixin text; + @mixin textSmall; + + margin: 0; +} + +.semantic-only-note { + @mixin visually-hidden; +} diff --git a/src/components/play-card/play-card.tsx b/src/components/play-card/play-card.tsx new file mode 100644 index 000000000..0f8a54379 --- /dev/null +++ b/src/components/play-card/play-card.tsx @@ -0,0 +1,123 @@ +import cn from 'classnames/bind'; + +import { Button } from 'components/ui/button2'; +import { Icon } from 'components/ui/icon'; + +import type { Play } from 'core/play'; + +import styles from './play-card.module.css'; + +const cx = cn.bind(styles); + +export interface PlayCardProps extends Omit-
- {photos.map(({ url, description = '' }, index) => (
-
-
-
- -
- ))}
-
- {photos.map(({ url, description = '' }) => ( - -- ))} - = (props) => { + const { + className, + title, + titleTag: TitleTag = 'h3', + authors, + city, + year, + readingUrl, + downloadUrl, + } = props; + + return ( + ++ ); +}; diff --git a/src/components/play-filter-dialog/index.ts b/src/components/play-filter-dialog/index.ts new file mode 100644 index 000000000..302da7931 --- /dev/null +++ b/src/components/play-filter-dialog/index.ts @@ -0,0 +1 @@ +export * from './plays-filter-dialog'; diff --git a/src/components/play-filter-dialog/plays-filter-dialog.tsx b/src/components/play-filter-dialog/plays-filter-dialog.tsx new file mode 100644 index 000000000..54d3cdb51 --- /dev/null +++ b/src/components/play-filter-dialog/plays-filter-dialog.tsx @@ -0,0 +1,30 @@ +import { DialogWindow } from 'components/dialog-window'; +import { Modal } from 'components/ui/modal'; + +interface PlayFilterDialogProps { + open?: boolean + onClose: () => void +} + +export const PlayFilterDialog: React.FC+++ {title} + ++ {readingUrl && ( + + + )} + iconPosition="right" + fullWidth + upperCase + > + Смотреть читку + + + )} + {downloadUrl && ( + + + )} + iconPosition="right" + fullWidth + upperCase + > + Скачать пьесу + + + )} ++-
+
- + {authors.length === 1 ? 'Автор' : 'Авторы'} + + {authors.map((author) => ( +
- + + + ) + )} + {city && ( + <> +
- + Город + +
- + {city} + + + )} + {year && ( + <> +
- + Год + +
- + {year} + + + )} +
= (props) => { + const { + children, + open = false, + onClose, + } = props; + + return ( + + + ); +}; diff --git a/src/components/play-list/index.ts b/src/components/play-list/index.ts index f4bee6a12..2fa5e6674 100644 --- a/src/components/play-list/index.ts +++ b/src/components/play-list/index.ts @@ -1 +1,6 @@ -export * from './play-list'; +import { PlayList as Component } from './play-list'; +import { PlayListItem } from './play-list-item'; + +export const PlayList = Object.assign(Component, { + Item: PlayListItem, +}); diff --git a/src/components/play-list/item/index.ts b/src/components/play-list/item/index.ts deleted file mode 100644 index 7f257284b..000000000 --- a/src/components/play-list/item/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './play-list-item'; diff --git a/src/components/play-list/item/play-list-item.module.css b/src/components/play-list/item/play-list-item.module.css deleted file mode 100644 index 627043849..000000000 --- a/src/components/play-list/item/play-list-item.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.root { - display: block; - - @media (max-width: $tablet-portrait) { - position: relative; - min-width: 240px; - } -} diff --git a/src/components/play-list/item/play-list-item.tsx b/src/components/play-list/play-list-item.tsx similarity index 75% rename from src/components/play-list/item/play-list-item.tsx rename to src/components/play-list/play-list-item.tsx index 1ab44100a..a06792454 100644 --- a/src/components/play-list/item/play-list-item.tsx +++ b/src/components/play-list/play-list-item.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames/bind'; import type { FC } from 'react'; -import style from './play-list-item.module.css'; +import style from './play-list.module.css'; const cx = classNames.bind(style); @@ -12,7 +12,7 @@ export const PlayListItem: FC = (props) => { } = props; return ( -+ {children} + +- +
- {children}
); diff --git a/src/components/play-list/play-list.module.css b/src/components/play-list/play-list.module.css index af2e11b69..3d5c5eee0 100644 --- a/src/components/play-list/play-list.module.css +++ b/src/components/play-list/play-list.module.css @@ -1,15 +1,37 @@ -.root { - @mixin hide-scrollbars; +@value tablet-portrait from "shared/styles/media.module.css"; +$item-width: 240px; + +.common { display: grid; padding: 0; margin: 0; - gap: 30px; - grid-template-columns: repeat(4, 1fr); - overflow-x: scroll; + gap: 24px; + grid-template-columns: repeat(auto-fill, $item-width); + place-content: center; +} + +.scrollable { + composes: common; + + @media tablet-portrait { + @mixin hide-scrollbars; - @media (max-width: $tablet-portrait) { grid-auto-flow: column; grid-template-columns: auto; + overflow-x: scroll; } } + +.regular { + composes: common; +} + +.item { + display: block; + width: $item-width; +} + +.common.processing { + opacity: .2; +} diff --git a/src/components/play-list/play-list.tsx b/src/components/play-list/play-list.tsx index 6ecc6eb2c..0df456302 100644 --- a/src/components/play-list/play-list.tsx +++ b/src/components/play-list/play-list.tsx @@ -1,31 +1,24 @@ import classNames from 'classnames/bind'; -import { PlayListItem } from './item'; - -import type { ReactNode } from 'react'; - import style from './play-list.module.css'; const cx = classNames.bind(style); interface PlayListProps { - children: ReactNode, + variant?: 'regular' | 'scrollable' + processing?: boolean } -const Component = (props: PlayListProps) => { +export const PlayList = (props: React.PropsWithChildren) => { const { + variant = 'regular', + processing, children, } = props; return ( - -
+
-
{children}
- {children} -- ); -}; - -export default PlayProposalLayoutImage; diff --git a/src/components/play-proposal-layout/index.ts b/src/components/play-proposal-layout/index.ts index 2944f00cd..8280b2023 100644 --- a/src/components/play-proposal-layout/index.ts +++ b/src/components/play-proposal-layout/index.ts @@ -1 +1,10 @@ -export { default } from './play-proposal-layout'; +import PlayProposalLayoutColumn from './column/play-proposal-layout-column'; +import PlayProposalForm from './form/play-proposal-layout-form'; +import { PlayProposalLayout as BaseComponent } from './play-proposal-layout'; + +const PlayProposalLayout = Object.assign(BaseComponent, { + Column: PlayProposalLayoutColumn, + Form: PlayProposalForm, +}); + +export default PlayProposalLayout; diff --git a/src/components/play-proposal-layout/play-proposal-layout.assets/artwork-mobile.jpg b/src/components/play-proposal-layout/play-proposal-layout.assets/artwork-mobile.jpg new file mode 100644 index 000000000..ad79c4237 Binary files /dev/null and b/src/components/play-proposal-layout/play-proposal-layout.assets/artwork-mobile.jpg differ diff --git a/public/images/form/play-script.jpg b/src/components/play-proposal-layout/play-proposal-layout.assets/artwork-tablet-portrait.jpg similarity index 100% rename from public/images/form/play-script.jpg rename to src/components/play-proposal-layout/play-proposal-layout.assets/artwork-tablet-portrait.jpg diff --git a/src/components/play-proposal-layout/play-proposal-layout.module.css b/src/components/play-proposal-layout/play-proposal-layout.module.css index 71666d37f..1679275d6 100644 --- a/src/components/play-proposal-layout/play-proposal-layout.module.css +++ b/src/components/play-proposal-layout/play-proposal-layout.module.css @@ -1,9 +1,30 @@ +@value tablet-portrait from "shared/styles/media.module.css"; + .layout { display: grid; grid-template-columns: repeat(2, 1fr); - @media (max-width: $tablet-portrait) { + @media tablet-portrait { padding: 0 24px; grid-template-columns: 100%; } + + &::before { + position: sticky; + top: var(--height-navbar-tablet-portrait); + display: block; + width: 660px; + height: calc(100vh - var(--height-navbar-tablet-portrait)); + background-image: url("./play-proposal-layout.assets/artwork-tablet-portrait.jpg"); + background-size: cover; + content: ""; + + @media tablet-portrait { + position: static; + width: calc(100% + 24px); + height: 152px; + margin-top: 10px; + background-image: url("./play-proposal-layout.assets/artwork-mobile.jpg"); + } + } } diff --git a/src/components/play-proposal-layout/play-proposal-layout.tsx b/src/components/play-proposal-layout/play-proposal-layout.tsx index b29db35d4..4bf8ee3f3 100644 --- a/src/components/play-proposal-layout/play-proposal-layout.tsx +++ b/src/components/play-proposal-layout/play-proposal-layout.tsx @@ -1,18 +1,10 @@ import classNames from 'classnames/bind'; -import PlayProposalLayoutImage from './image/play-proposal-layout-image'; -import PlayProposalLayoutColumn from './column/play-proposal-layout-column'; -import PlayProposalForm from './form/play-proposal-layout-form'; - import styles from './play-proposal-layout.module.css'; const cx = classNames.bind(styles); -interface IPlayProposalLayoutProps { - children: React.ReactNode; -} - -const PlayProposalLayout = (props: IPlayProposalLayoutProps): JSX.Element => { +export const PlayProposalLayout: React.FC = (props) => { const { children } = props; return ( @@ -21,9 +13,3 @@ const PlayProposalLayout = (props: IPlayProposalLayoutProps): JSX.Element => { ); }; - -PlayProposalLayout.Image = PlayProposalLayoutImage; -PlayProposalLayout.Column = PlayProposalLayoutColumn; -PlayProposalLayout.Form = PlayProposalForm; - -export default PlayProposalLayout; diff --git a/src/components/play-proposal-success-layout/play-proposal-success-layout.stories.tsx b/src/components/play-proposal-success-layout/play-proposal-success-layout.stories.tsx deleted file mode 100644 index 531861644..000000000 --- a/src/components/play-proposal-success-layout/play-proposal-success-layout.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import { PlayProposalSuccessLayout } from './play-proposal-success-layout'; - -export default { - title: 'Components/PlayProposalSuccess', - component: PlayProposalSuccessLayout, -} as ComponentMeta; - -const Template: ComponentStory = () => ; - -export const Default = Template.bind({}); diff --git a/src/components/play-proposal-success-layout/play-proposal-success-layout.tsx b/src/components/play-proposal-success-layout/play-proposal-success-layout.tsx index 25508342f..d7bfca20a 100644 --- a/src/components/play-proposal-success-layout/play-proposal-success-layout.tsx +++ b/src/components/play-proposal-success-layout/play-proposal-success-layout.tsx @@ -1,6 +1,7 @@ -import { FC } from 'react'; import classNames from 'classnames/bind'; +import type { FC } from 'react'; + import styles from './play-proposal-success-layout.module.css'; const cx = classNames.bind(styles); @@ -9,7 +10,7 @@ export const PlayProposalSuccessLayout: FC = () => { return ( - Спасибо, мы получили вашу пьесу, скоро начнется отбор. Следите за + Спасибо, мы получили вашу пьесу. Следите за новостями в наших соцсетях!
) => { - const { - children, - className, - } = props; - - return ( -
- {children} -- ); -}; diff --git a/src/components/press-release-layout/content/index.ts b/src/components/press-release-layout/content/index.ts deleted file mode 100644 index d4b218dfc..000000000 --- a/src/components/press-release-layout/content/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './press-release-layout-content'; diff --git a/src/components/press-release-layout/content/press-release-layout-content.module.css b/src/components/press-release-layout/content/press-release-layout-content.module.css deleted file mode 100644 index 14f4129b7..000000000 --- a/src/components/press-release-layout/content/press-release-layout-content.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.root { - max-width: 840px; - margin: 64px auto 0; - grid-area: content; -} diff --git a/src/components/press-release-layout/cover/index.ts b/src/components/press-release-layout/cover/index.ts deleted file mode 100644 index e3ef77a5b..000000000 --- a/src/components/press-release-layout/cover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './press-release-layout-cover'; diff --git a/src/components/press-release-layout/cover/press-release-layout-cover.module.css b/src/components/press-release-layout/cover/press-release-layout-cover.module.css deleted file mode 100644 index 8a0fc14df..000000000 --- a/src/components/press-release-layout/cover/press-release-layout-cover.module.css +++ /dev/null @@ -1,14 +0,0 @@ -@import "../press-release-layout.vars.module"; - -.root { - position: relative; - min-width: calc(720px - $page-margin-smartphone); - height: 268px; - margin-right: calc(-1 * $page-margin-tablet-portrait); - grid-area: cover; - - @media (max-width: $tablet-portrait) { - min-width: initial; - margin: 0 -$page-margin-smartphone; - } -} diff --git a/src/components/press-release-layout/index.ts b/src/components/press-release-layout/index.ts index 9eb5a6716..72f9c4c4a 100644 --- a/src/components/press-release-layout/index.ts +++ b/src/components/press-release-layout/index.ts @@ -1 +1,6 @@ -export * from './press-release-layout'; +import { PressReleaseLayout as Component } from './press-release-layout'; +import { PressReleaseLayoutSlot } from './press-release-layout-slot'; + +export const PressReleaseLayout = Object.assign(Component, { + Slot: PressReleaseLayoutSlot, +}); diff --git a/src/components/press-release-layout/press-release-layout-slot.tsx b/src/components/press-release-layout/press-release-layout-slot.tsx new file mode 100644 index 000000000..b3f69a9b0 --- /dev/null +++ b/src/components/press-release-layout/press-release-layout-slot.tsx @@ -0,0 +1,31 @@ +import classNames from 'classnames/bind'; + +import styles from './press-release-layout.module.css'; + +const cx = classNames.bind(styles); + +enum Area { + Actions = 'actions', + Content = 'content', + Image = 'image', + Title = 'title', +} + +interface PressReleaseLayoutSlotProps { + area: `${Area}` + className?: string +} + +export const PressReleaseLayoutSlot: React.FC= (props) => { + const { + area, + className, + children, + } = props; + + return ( + + {children} ++ ); +}; diff --git a/src/components/press-release-layout/press-release-layout.module.css b/src/components/press-release-layout/press-release-layout.module.css index f376db27a..5442577aa 100644 --- a/src/components/press-release-layout/press-release-layout.module.css +++ b/src/components/press-release-layout/press-release-layout.module.css @@ -1,4 +1,7 @@ -@import "./press-release-layout.vars.module"; +@value tablet-portrait from "shared/styles/media.module.css"; + +$page-margin-tablet-portrait: 120px; +$page-margin-smartphone: 24px; .root { display: grid; @@ -6,25 +9,22 @@ background-color: var(--white); grid-auto-columns: auto; grid-template-areas: - "title title cover" + "title title image" "filter actions ." "content content content"; + grid-template-columns: auto auto 1fr; - @media (max-width: $tablet-portrait) { + @media tablet-portrait { display: block; padding: 44px $page-margin-smartphone 150px; } } -.title { - grid-area: title; -} - .filter { margin: 32px 30px 0 0; grid-area: filter; - @media (max-width: $tablet-portrait) { + @media tablet-portrait { margin-right: 0; margin-bottom: 28px; } @@ -33,13 +33,43 @@ .year { max-width: 148px; - @media (max-width: $tablet-portrait) { + @media tablet-portrait { max-width: initial; } } .additional-note { - @media (max-width: $tablet-portrait) { + @media tablet-portrait { @mixin visually-hidden; } } + +.title { + align-self: flex-end; + padding: 32px 0; + grid-area: title; +} + +.image { + position: relative; + min-width: calc(720px - $page-margin-smartphone); + height: 268px; + margin-right: calc(-1 * $page-margin-tablet-portrait); + grid-area: image; + + @media tablet-portrait { + min-width: initial; + margin: 0 -$page-margin-smartphone; + } +} + +.content { + max-width: 840px; + margin: 64px auto 0; + grid-area: content; +} + +.actions { + align-self: flex-end; + grid-area: actions; +} diff --git a/src/components/press-release-layout/press-release-layout.tsx b/src/components/press-release-layout/press-release-layout.tsx index 7b1ca7b44..68c0bdd70 100644 --- a/src/components/press-release-layout/press-release-layout.tsx +++ b/src/components/press-release-layout/press-release-layout.tsx @@ -1,17 +1,12 @@ import classNames from 'classnames/bind'; -import { PressReleaseLayoutTitle } from './title'; -import { PressReleaseLayoutContent } from './content'; -import { PressReleaseLayoutCover } from './cover'; -import { PressReleaseLayoutActions } from './actions'; - import type { FC } from 'react'; import styles from './press-release-layout.module.css'; const cx = classNames.bind(styles); -const Component: FC = (props) => { +export const PressReleaseLayout: FC = (props) => { const { children } = props; return ( @@ -20,13 +15,3 @@ const Component: FC = (props) => { -
-
-
{persons.map((person) => (
- {
diff --git a/src/components/project-layout/storey/project-layout-storey.tsx b/src/components/project-layout/storey/project-layout-storey.tsx
index 6e7c4859c..d96388a2c 100644
--- a/src/components/project-layout/storey/project-layout-storey.tsx
+++ b/src/components/project-layout/storey/project-layout-storey.tsx
@@ -1,10 +1,11 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './project-layout-storey.module.css';
interface IProjectLayoutStoreyProps {
- type?: 'description' | 'videos' | 'photos' | 'plays' | 'performances' | 'persons' | 'text',
+ type?: 'description' | 'videos' | 'photos' | 'plays' | 'performances' | 'persons' | 'text'
}
const cx = classNames.bind(styles);
diff --git a/src/components/projects-layout/headline/projects-layout-headline.tsx b/src/components/projects-layout/headline/projects-layout-headline.tsx
index a71740195..c5cd54cfa 100644
--- a/src/components/projects-layout/headline/projects-layout-headline.tsx
+++ b/src/components/projects-layout/headline/projects-layout-headline.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './projects-layout-headline.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/projects-layout/list/projects-layout-list.tsx b/src/components/projects-layout/list/projects-layout-list.tsx
index d52a05813..b11f64625 100644
--- a/src/components/projects-layout/list/projects-layout-list.tsx
+++ b/src/components/projects-layout/list/projects-layout-list.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './projects-layout-list.module.css';
const cx = classNames.bind(styles);
diff --git a/src/components/projects-layout/projects-layout.tsx b/src/components/projects-layout/projects-layout.tsx
index cd5776ad1..a4b811766 100644
--- a/src/components/projects-layout/projects-layout.tsx
+++ b/src/components/projects-layout/projects-layout.tsx
@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
import classNames from 'classnames/bind';
import { ProjectsLayoutHeadline } from './headline';
import { ProjectsLayoutList } from './list';
+import type { ReactNode } from 'react';
+
import styles from './projects-layout.module.css';
interface IProjectsLayoutProps {
- children: ReactNode;
+ children: ReactNode
}
const cx = classNames.bind(styles);
diff --git a/src/components/review-card/review-card.stories.tsx b/src/components/review-card/review-card.stories.tsx
index 39c9852c8..a05ddd763 100644
--- a/src/components/review-card/review-card.stories.tsx
+++ b/src/components/review-card/review-card.stories.tsx
@@ -1,7 +1,7 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
import { ReviewCard } from './review-card';
+import type { ComponentMeta,ComponentStory } from '@storybook/react';
+
export default {
title: 'Components/ReviewCard',
component: ReviewCard,
diff --git a/src/components/review-card/review-card.tsx b/src/components/review-card/review-card.tsx
index ceeb97484..36b8eab03 100644
--- a/src/components/review-card/review-card.tsx
+++ b/src/components/review-card/review-card.tsx
@@ -1,11 +1,12 @@
-import { FC } from 'react';
import classNames from 'classnames/bind';
+import type { FC } from 'react';
+
import styles from './review-card.module.css';
interface IReviewCardProps {
- text: string,
- author: string,
+ text: string
+ author: string
}
const cx = classNames.bind(styles);
diff --git a/src/components/review-carousel/review-carousel.module.css b/src/components/review-carousel/review-carousel.module.css
index e17eecd8a..43bf47181 100644
--- a/src/components/review-carousel/review-carousel.module.css
+++ b/src/components/review-carousel/review-carousel.module.css
@@ -60,7 +60,7 @@
.arrows {
display: flex;
- margin-left: 21px;
+ margin-left: 20px;
@media (max-width: $tablet-portrait) {
margin-left: auto;
@@ -68,11 +68,7 @@
}
.arrow {
- position: relative;
- width: 48px;
- height: 48px;
-}
-
-.arrowRight {
- margin-left: 21px;
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
}
diff --git a/src/components/review-carousel/review-carousel.stories.tsx b/src/components/review-carousel/review-carousel.stories.tsx
index b16c9ba00..30068e5b3 100644
--- a/src/components/review-carousel/review-carousel.stories.tsx
+++ b/src/components/review-carousel/review-carousel.stories.tsx
@@ -1,9 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ReviewCarousel } from './review-carousel';
-import { ReviewCard } from 'components/review-card';
+import { ReviewCard } from '../review-card';
-const reviewCardArgs = [
+import type { ComponentMeta,ComponentStory } from '@storybook/react';
+
+const demoReviews = [
{
text: 'Что-то похожее на эффект от мультфильмов типа «Сауз Парк» или про коня Боджэка возникает — я думаю, и пьеса написана с этой интонацией американских взрослых мультсериалов. И как хорошо все это с куклой-носочком. Так все чисто сделано!',
author: 'Наталья Зайцева',
@@ -16,6 +17,10 @@ const reviewCardArgs = [
text: 'Мне данный формат дал возможность самой выбирать, как двигается персонаж, что на нем надето, какую машину он водит, и что за плакат висит в подвале церкви. Это было приятно, ведь я как будто сама поучаствовала в спектакле',
author: 'Дарья Морозова',
},
+ {
+ text: 'Мне данный формат дал возможность самой выбирать, как двигается персонаж, что на нем надето, какую машину он водит, и что за плакат висит в подвале церкви. Это было приятно, ведь я как будто сама поучаствовала в спектакле',
+ author: 'Дарья Морозова',
+ },
];
export default {
@@ -26,8 +31,8 @@ export default {
const Template: ComponentStory
-
-
- {authors.title}
-
-
-
- {authors.data.map((author) => (
-
-
-
- {authors.data} - -
- ))}
-
- );
-};
-
-export default SearchResultAuthors;
-
diff --git a/src/components/section/section.module.css b/src/components/section/section.module.css
index fa55e9354..ab9cb3eed 100644
--- a/src/components/section/section.module.css
+++ b/src/components/section/section.module.css
@@ -1,3 +1,5 @@
+@value tablet-portrait from "shared/styles/media.module.css";
+
.common {
box-sizing: border-box;
}
@@ -9,7 +11,7 @@
max-width: 716px;
margin: 0 auto 48px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
@mixin headline6;
max-width: 366px;
@@ -23,7 +25,7 @@
max-width: 450px;
margin: 0 auto 48px 300px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
max-width: 366px;
margin: 0 auto 22px 24px;
}
@@ -37,7 +39,7 @@
max-width: 450px;
margin: 0 auto 58px 300px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
max-width: 366px;
margin: 0 auto 24px 24px;
}
@@ -48,7 +50,7 @@
composes: common;
padding: 100px 60px 30px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 56px 24px;
}
@@ -59,7 +61,7 @@
max-width: 334px;
margin-bottom: 48px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
max-width: 255px;
}
}
@@ -71,7 +73,7 @@
.title {
@mixin visually-hidden;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
@mixin undo-visually-hidden;
max-width: 366px;
@@ -84,7 +86,7 @@
composes: common;
padding: 60px 56px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 36px 24px;
}
}
@@ -93,15 +95,15 @@
composes: common;
padding: 60px 32px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 36px 24px;
}
}
.places {
composes: common;
- padding: 65px 60px 105px 60px;
- background-color: white;
+ padding: 65px 60px 105px;
+ background-color: var(--white);
.title {
@mixin headline;
@@ -109,7 +111,7 @@
margin-bottom: 74px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
@mixin headline4;
margin-bottom: 40px;
@@ -118,10 +120,10 @@
}
.homepage-shortlist {
- padding: 90px 60px 102px 60px;
+ padding: 90px 60px 102px;
- @media (max-width: $tablet-portrait) {
- padding: 40px 30px 40px 30px;
+ @media tablet-portrait {
+ padding: 40px 30px;
}
.title {
@@ -131,7 +133,7 @@
max-width: 682px;
margin-bottom: 50px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
@mixin headline4;
margin-bottom: 24px;
@@ -143,7 +145,7 @@
padding: 90px 70px 114px 840px;
background-color: var(--beige);
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 80px 24px;
}
}
@@ -151,7 +153,7 @@
.blog-entries {
padding: 0 90px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 0 24px;
}
}
@@ -159,7 +161,34 @@
.news {
padding: 0 90px;
- @media (max-width: $tablet-portrait) {
+ @media tablet-portrait {
padding: 0 24px;
}
}
+
+.author-plays {
+ padding: 130px 30px;
+ background-color: var(--beige);
+
+ @media tablet-portrait {
+ @mixin hide-scrollbars;
+
+ overflow: scroll;
+ padding: 10px 0 80px 25px;
+ }
+}
+
+.volunteers {
+ padding: 124px 0 148px;
+ background-color: var(--light-green);
+
+ .title {
+ margin: 0 210px 0 720px;
+ }
+
+ .note {
+ max-width: 428px;
+ padding: 0 210px;
+ margin-top: 92px;
+ }
+}
diff --git a/src/components/section/section.stories.tsx b/src/components/section/section.stories.tsx
deleted file mode 100644
index bc1040d9a..000000000
--- a/src/components/section/section.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Section } from 'components/section';
-import { BasicPlayCardList } from 'components/ui/basic-play-card-list';
-import { Default as DefaultBasicPlayCardList } from 'components/ui/basic-play-card-list/basic-play-card-list.stories';
-import { Default as DefaultPersonCardList } from 'components/person-card-list/person-card-list.stories';
-
-export default {
- title: 'Components/Section',
- component: Section,
- subcomponents: { BasicPlayCardList },
- decorators: [
- (Story) => (
- -
-
- - {emptyOption.text} - - )} - {options.map((option, index) => ( -
- - {option.text} - - ))} -
@@ -76,27 +59,29 @@ export const ReviewCarousel: FC = (props) => {
= (props) => {
)}
{title}
- {carousel && ( + {loaded && instanceRef.current && ( <>
-
@@ -104,10 +89,10 @@ export const ReviewCarousel: FC
- {Children.map(children, (slide, index) => (
+ {React.Children.map(children, (slide, index) => (
= (props) => {
);
};
-
-function getSlidesGroups(carouselInstance: KeenSlider) {
- const { size, slidesPerView } = carouselInstance.details();
-
- return Array.from(Array(size).keys()).filter((x, index) => index % slidesPerView === 0);
-}
-
-function getSlideGroupIndex(carouselInstance: KeenSlider, slideIndex: number) {
- const { slidesPerView } = carouselInstance.details();
-
- return Math.ceil(slideIndex / slidesPerView);
-}
diff --git a/src/components/schedule-headline/index.ts b/src/components/schedule-headline/index.ts
new file mode 100644
index 000000000..8f2db9533
--- /dev/null
+++ b/src/components/schedule-headline/index.ts
@@ -0,0 +1 @@
+export * from './schedule-headline';
diff --git a/src/components/schedule-headline/schedule-headline.module.css b/src/components/schedule-headline/schedule-headline.module.css
new file mode 100644
index 000000000..7ecc62693
--- /dev/null
+++ b/src/components/schedule-headline/schedule-headline.module.css
@@ -0,0 +1,82 @@
+@value tablet-portrait from "shared/styles/media.module.css";
+
+.root {
+ display: grid;
+ grid-template:
+ ". title"
+ "note announce"
+ "note registration" / 1fr 1fr;
+ row-gap: 8px;
+
+ @media tablet-portrait {
+ padding: 0 24px 30px;
+ grid-template:
+ "title"
+ "announce"
+ "registration"
+ "note";
+ row-gap: 24px;
+ }
+}
+
+.title {
+ @mixin headline;
+ @mixin headline1;
+
+ grid-area: title;
+
+ @media tablet-portrait {
+ @mixin headline4;
+ }
+}
+
+.paragraph {
+ @mixin text;
+ @mixin textSmall;
+
+ margin: 0;
+
+ + .paragraph {
+ margin-top: 8px;
+
+ @media tablet-portrait {
+ margin-top: 0;
+ }
+ }
+}
+
+.schedule-note {
+ display: flex;
+ flex-direction: column;
+ grid-area: note;
+
+ @media tablet-portrait {
+ padding-left: 0;
+ }
+}
+
+.schedule-note-text {
+ composes: paragraph;
+ max-width: 320px;
+ margin-left: 24px;
+
+ @media tablet-portrait {
+ padding-left: 20px;
+ }
+}
+
+.registration-announce {
+ composes: paragraph;
+ padding: 0 0 0 64px;
+ grid-area: registration;
+}
+
+.schedule-announce {
+ composes: paragraph;
+ padding: 24px 0 0 64px;
+ grid-area: announce;
+
+ @media tablet-portrait {
+ padding-left: 120px;
+ }
+}
diff --git a/src/components/schedule-headline/schedule-headline.tsx b/src/components/schedule-headline/schedule-headline.tsx
new file mode 100644
index 000000000..17060097e
--- /dev/null
+++ b/src/components/schedule-headline/schedule-headline.tsx
@@ -0,0 +1,46 @@
+import classNames from 'classnames/bind';
+
+import { Icon } from 'components/ui/icon';
+
+import type { ScheduleMeta } from 'core/schedule';
+
+import styles from './schedule-headline.module.css';
+
+interface ScheduleHeadlineProps extends Omit
{slide}
@@ -116,15 +101,3 @@ export const ReviewCarousel: FC
+
+ );
+};
diff --git a/src/components/schedule-layout/index.ts b/src/components/schedule-layout/index.ts
new file mode 100644
index 000000000..c6df3047d
--- /dev/null
+++ b/src/components/schedule-layout/index.ts
@@ -0,0 +1,6 @@
+import { ScheduleLayout as Component } from './schedule-layout';
+import { ScheduleLayoutSlot } from './schedule-layout-slot';
+
+export const ScheduleLayout = Object.assign(Component, {
+ Slot: ScheduleLayoutSlot,
+});
diff --git a/src/components/schedule-layout/schedule-layout-slot.tsx b/src/components/schedule-layout/schedule-layout-slot.tsx
new file mode 100644
index 000000000..b23d6968f
--- /dev/null
+++ b/src/components/schedule-layout/schedule-layout-slot.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames/bind';
+
+import styles from './schedule-layout.module.css';
+
+const cx = classNames.bind(styles);
+
+enum Area {
+ Headline = 'headline'
+}
+
+interface ScheduleLayoutSlotProps {
+ area: `${Area}`
+ className?: string
+}
+
+export const ScheduleLayoutSlot: React.FC+ {title} +
++ {scheduleAnnounce} +
+ {registrationAnnounce && ( ++ {registrationAnnounce} +
+ )} + {scheduleNote && ( +
+
+ )}
+ + {scheduleNote} +
+
+ {children}
+
+ );
+};
diff --git a/src/components/schedule-layout/schedule-layout.module.css b/src/components/schedule-layout/schedule-layout.module.css
new file mode 100644
index 000000000..96b728e68
--- /dev/null
+++ b/src/components/schedule-layout/schedule-layout.module.css
@@ -0,0 +1,19 @@
+@value tablet-portrait from "shared/styles/media.module.css";
+
+.root {
+ display: grid;
+ padding: 60px 32px;
+
+ @media tablet-portrait {
+ padding: 0;
+ }
+}
+
+.headline {
+ margin: 0 144px 112px 92px;
+
+ @media tablet-portrait {
+ border-bottom: 1px solid var(--coal);
+ margin: 0 0 56px;
+ }
+}
diff --git a/src/components/schedule-layout/schedule-layout.tsx b/src/components/schedule-layout/schedule-layout.tsx
new file mode 100644
index 000000000..cd240b54f
--- /dev/null
+++ b/src/components/schedule-layout/schedule-layout.tsx
@@ -0,0 +1,17 @@
+import classNames from 'classnames/bind';
+
+import type { FC } from 'react';
+
+import styles from './schedule-layout.module.css';
+
+const cx = classNames.bind(styles);
+
+export const ScheduleLayout: FC = (props) => {
+ const { children } = props;
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/search-layout/index.ts b/src/components/search-layout/index.ts
new file mode 100644
index 000000000..7ac497075
--- /dev/null
+++ b/src/components/search-layout/index.ts
@@ -0,0 +1,6 @@
+import { SearchLayout as Component } from './search-layout';
+import { SearchLayoutSlot } from './search-layout-slot';
+
+export const SearchLayout = Object.assign(Component, {
+ Slot: SearchLayoutSlot,
+});
diff --git a/src/components/search-layout/search-layout-slot.tsx b/src/components/search-layout/search-layout-slot.tsx
new file mode 100644
index 000000000..5d1daa2c5
--- /dev/null
+++ b/src/components/search-layout/search-layout-slot.tsx
@@ -0,0 +1,33 @@
+import classNames from 'classnames/bind';
+
+import styles from './search-layout.module.css';
+
+const cx = classNames.bind(styles);
+
+enum Area {
+ Breadcrumb = 'breadcrumb',
+ Message = 'message',
+ Search = 'search',
+ Content = 'content',
+ NotFoundNote = 'not-found-note',
+}
+
+interface SearchLayoutProps {
+ area: `${Area}`
+}
+
+export const SearchLayoutSlot: React.FC
+ {children}
+
+ );
+};
diff --git a/src/components/search-result-authors/index.ts b/src/components/search-result-authors/index.ts
deleted file mode 100644
index 591362300..000000000
--- a/src/components/search-result-authors/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './search-result-authors';
diff --git a/src/components/search-result-authors/search-result-authors.module.css b/src/components/search-result-authors/search-result-authors.module.css
deleted file mode 100644
index 41deccbaf..000000000
--- a/src/components/search-result-authors/search-result-authors.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.authors {
- padding: 0;
- margin: 0;
- margin-bottom: 60px;
-
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.alphabetLetter {
- @mixin headline;
- @mixin headline4;
-}
-
-.authorsList {
- padding: 0;
- margin: 0;
- margin-top: 14px;
- list-style: none;
-}
-
-.authorsItem {
- padding: 0;
- margin: 0;
- margin-bottom: 12px;
-
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.authorsLink {
- @mixin text;
- @mixin textLarge;
-
- padding: 1px 8px 3px;
- color: var(--coal);
- text-decoration: none;
-
- &:hover {
- background-color: var(--coal);
- color: var(--white);
- }
-}
diff --git a/src/components/search-result-authors/search-result-authors.tsx b/src/components/search-result-authors/search-result-authors.tsx
deleted file mode 100644
index 17caa516b..000000000
--- a/src/components/search-result-authors/search-result-authors.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FC } from 'react';
-
-import { InfoLink } from '../ui/info-link';
-
-import style from './search-result-authors.module.css';
-
-interface ISearchResultAuthorsProps {
- authors: {
- title: string,
- data: Author[],
- }
-}
-
-interface Author {
- slug: string,
- name: string,
-}
-
-const SearchResultAuthors: FC
-
- ),
- ],
-} as ComponentMeta
+ {note}
+
+ )}
);
};
diff --git a/src/components/select/select.module.css b/src/components/select/select.module.css
deleted file mode 100644
index 50c64782a..000000000
--- a/src/components/select/select.module.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.common {
- @mixin text;
-
- position: relative;
- font-size: 20px;
- line-height: 28px;
- user-select: none;
-}
-
-.closed {
- composes: common;
-}
-
-.handle {
- @mixin limitText;
-
- position: relative;
- display: block;
- width: 100%;
- padding: 8px 42px 8px 16px;
- border: 1px solid var(--coal);
- border-top: 0;
- background: 0;
- font: inherit;
- text-align: left;
-
- &:hover {
- background-color: var(--coal);
- color: var(--white);
- }
-
- &::after {
- position: absolute;
- top: 50%;
- right: 8px;
- display: block;
- width: 20px;
- height: 20px;
- background-color: var(--coal);
- background-color: currentColor;
- content: '';
- mask: url('../../shared/icons/arrow-down.svg') 100% 100%;
- mask-size: cover;
- transform: translateY(-50%);
- }
-}
-
-.dropdown {
- top: 100%;
- display: none;
- width: 100%;
- max-height: 260px;
- box-sizing: border-box;
- padding: 0;
- border: 1px solid var(--coal);
- border-top: 0;
- margin: 0;
- background-color: var(--beige);
- overflow-y: auto;
-
- &::-webkit-scrollbar {
- width: 4px;
- }
-
- &::-webkit-scrollbar-thumb {
- background: var(--coal);
- }
-
- &::-webkit-scrollbar-track {
- background: 0;
- }
-}
-
-.opened {
- composes: common;
-
- .dropdown {
- position: absolute;
- z-index: 1;
- display: block;
- }
-
- .handle {
- background-color: var(--coal);
- color: var(--white);
- }
-}
-
-.option-common {
- display: block;
- padding: 12px 30px;
-}
-
-.option-regular {
- composes: option-common;
-}
-
-.option-selected {
- composes: option-common;
- position: relative;
-
- &::before {
- position: absolute;
- top: 50%;
- left: 10px;
- display: block;
- width: 10px;
- height: 10px;
- background-color: var(--coal);
- border-radius: 5px;
- content: '';
- transform: translateY(-50%);
- }
-}
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
deleted file mode 100644
index f392da9ac..000000000
--- a/src/components/select/select.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import classNames from 'classnames/bind';
-
-import styles from './select.module.css';
-
-export type SelectOption
-
-
- );
-};
diff --git a/src/components/seo/seo.tsx b/src/components/seo/seo.tsx
index fadce341d..151b58859 100644
--- a/src/components/seo/seo.tsx
+++ b/src/components/seo/seo.tsx
@@ -1,9 +1,6 @@
import Head from 'next/head';
-import settings from 'settings';
-
-import type { FC } from 'react';
-import type { Url } from 'shared/types';
+import settings from 'core/settings/constants';
interface SEOProps {
title: string
@@ -11,7 +8,7 @@ interface SEOProps {
image?: Url
}
-export const SEO: FC-
- {clearable && selectedOption && (
-
{callToEmail}
-