move to ekb-kit

components/Card/Card.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { AnimatedLogo } from 'ekb';
 import { ContentConfig, MapItemType } from 'types/Content.types';
-import { Loader } from 'shared/UI/Loader/Loader';
 
 interface Props {
     contentConfig: ContentConfig;
@@ -45,7 +45,7 @@ export function Card({ contentConfig, popupId, popupType }: Props) {
 
     return loading ? (
         <CardLoaderContainer>
-            <Loader radius={180} />
+            <AnimatedLogo color="rgba(0, 0, 0, 0)" radius="180px" />;
         </CardLoaderContainer>
     ) : (
         <CardContent placemark={popupData} />

components/Card/MobileCard.tsx

@@ -1,5 +1,4 @@
-import Sheet from 'react-modal-sheet';
-import * as React from 'react';
+import { SheetModal } from 'ekb';
 import { Card } from 'components/Card/Card';
 import { ContentConfig, MapItemType } from 'types/Content.types';
 
@@ -12,19 +11,8 @@ interface Props {
 
 export function MobileCard({ contentConfig, popupId, popupType, closePopup }: Props) {
     return (
-        <Sheet isOpen={Boolean(popupId)} onClose={closePopup} snapPoints={[0.5]}>
-            <Sheet.Container>
-                <Sheet.Header />
-                <Sheet.Content>
-                    <Sheet.Scroller>
-                        <Card
-                            popupId={popupId}
-                            popupType={popupType}
-                            contentConfig={contentConfig}
-                        />
-                    </Sheet.Scroller>
-                </Sheet.Content>
-            </Sheet.Container>
-        </Sheet>
+        <SheetModal isOpen={Boolean(popupId)} onClose={closePopup} snapPoints={[0.7]}>
+            <Card popupId={popupId} popupType={popupType} contentConfig={contentConfig} />
+        </SheetModal>
     );
 }

components/Card/components/Header/Header.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
+import { Button, ButtonSize, ButtonType } from 'ekb';
+import { Icon } from 'shared/UI/Icons';
 import { IconType } from 'shared/UI/Icons/Icons.types';
 import { useCopyHref } from 'shared/helpers/useCopyHref';
-import { Label } from 'shared/UI/Label/Label';
 import styles from './Header.module.css';
 
 export type HeaderProps = {
@@ -36,23 +37,23 @@ export function Header({ coordinates, title, description }: HeaderProps) {
         <>
             <div className={styles.header}>
                 {coordsString && (
-                    <Label
-                        color="#9baac3"
-                        backgroundColor="rgba(85, 100, 125, 0.24)"
+                    <Button
+                        type={ButtonType.DEFAULT}
+                        size={ButtonSize.SMALL}
                         onClick={onCopyCoords}
-                        icon={IconType.Copy}
+                        postfix={<Icon color="currentColor" type={IconType.Copy} />}
                     >
                         {isCoordsCopied ? 'Скопировано' : coordsString}
-                    </Label>
+                    </Button>
                 )}
-                <Label
-                    color="#9baac3"
-                    backgroundColor="rgba(85, 100, 125, 0.24)"
+                <Button
+                    type={ButtonType.DEFAULT}
+                    size={ButtonSize.SMALL}
                     onClick={onCopyLink}
-                    icon={IconType.Link}
+                    postfix={<Icon color="currentColor" type={IconType.Link} />}
                 >
                     {isLinkCopied ? 'Скопировано' : 'Ссылка на объект'}
-                </Label>
+                </Button>
             </div>
             <h2 className={styles.header__title}>{title}</h2>
             {description && <p className={styles.header__description}>{description}</p>}

components/Card/components/Sources/Sources.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'shared/UI/Link/Link';
+import { Link, LinkSize } from 'ekb';
 import { SourceInfo } from 'types/Sources.types';
 import styles from './Sources.module.css';
 
@@ -11,7 +11,9 @@ export function Sources({ sources }: { sources: SourceInfo[] }) {
                 {sources.map(({ link, name, data }) => {
                     return (
                         <li key={link} className={styles.sources__listItem}>
-                            <Link href={data || link} text={name} />
+                            <Link href={data || link} size={LinkSize.SMALL}>
+                                {name}
+                            </Link>
                         </li>
                     );
                 })}

shared/UI/Loader/FilterLoader.tsx → components/Filters/FilterLoader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Loader } from 'shared/UI/Loader/Loader';
+import { AnimatedLogo } from 'ekb';
 
 const FilterLoaderContainer = styled.div`
     position: relative;
@@ -10,7 +10,7 @@ const FilterLoaderContainer = styled.div`
 export function FilterLoader() {
     return (
         <FilterLoaderContainer>
-            <Loader />
+            <AnimatedLogo color="rgba(0, 0, 0, 0)" radius="100px" />
         </FilterLoaderContainer>
     );
 }

components/Filters/Filters.tsx

@@ -1,51 +1,63 @@
 import React from 'react';
+import styled from 'styled-components';
+import { Accordion, AccordionItem, Link, LinkSize } from 'ekb';
 import { FilterConfigItem, FilterType } from 'types/Filters.types';
-import { Toggle } from 'components/Filters/components/Toggle/Toggle';
-import { Filter } from 'components/Filters/components/Filter/Filter';
-import styles from './Filters.module.css';
 
 interface Props {
     filters: Record<FilterType, FilterConfigItem>;
     activeFilter: FilterType;
     onToggleClick: (type: FilterType) => void;
 }
 
+const Notice = styled.div`
+    margin-top: 12px;
+    padding: 12px 16px;
+    background: #3a4155;
+    color: #9c9ea8;
+    font-size: 14px;
+    border-radius: 4px;
+`;
+
 export function Filters({ filters, activeFilter, onToggleClick }: Props) {
     return (
-        <div className={styles.filters__body}>
+        <Accordion>
             {(Object.entries(filters) as [FilterType, FilterConfigItem][]).map(
                 ([type, { component, title, isVerified }], idx) => {
                     const id = `id:${type}-${idx}`;
                     const isActive = type === activeFilter;
+                    const toggle = () => onToggleClick(type);
 
                     return (
-                        <div key={id} className={styles.filters__item}>
-                            <Toggle
-                                id={id}
-                                isActive={isActive}
-                                onClick={onToggleClick}
-                                type={type}
-                                label={title}
-                            />
+                        <AccordionItem
+                            key={id}
+                            title={title}
+                            isSelected={isActive}
+                            toggle={toggle}
+                            horizontalGap={16}
+                            verticalGap={16}
+                        >
                             {component && (
-                                <Filter isActive={isActive}>
+                                <>
                                     {isActive ? component : null}
                                     {!isVerified && (
-                                        <div className={styles.filters__notice}>
+                                        <Notice>
                                             Данные берутся из&nbsp;публичных источников
                                             и&nbsp;содержат неточности.{' '}
-                                            <a href="https://tally.so#tally-open=wLzxEG&tally-width=650&tally-overlay=1&tally-emoji-animation=none">
+                                            <Link
+                                                size={LinkSize.SMALL}
+                                                href="https://tally.so#tally-open=wLzxEG&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
+                                            >
                                                 Оставьте&nbsp;фидбек
-                                            </a>
+                                            </Link>
                                             &nbsp;— помогите улучшить карту.
-                                        </div>
+                                        </Notice>
                                     )}
-                                </Filter>
+                                </>
                             )}
-                        </div>
+                        </AccordionItem>
                     );
                 },
             )}
-        </div>
+        </Accordion>
     );
 }