@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/Cover/index.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import { CoverProps } from './Cover.types'
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+import generateGradient from '../utils/generateGradient'
+
+import styles from './Cover.module.css'
+
+import { RenderBlocks } from '../RenderBlocks'
+import { MediaCaption } from '../MediaCaption'
+import { Image } from '../Image'
+import { Popover } from '../Popover'
+
+export const Cover: React.FC<CoverProps> = ({
+  block: {
+    only_on: onlyOn,
+    data: {
+      blocks,
+      cover: { credit, caption, urls, mobile_ratio: mobileRatio, gradients, cc }
+    }
+  },
+  styleContext
+}) => {
+  const [isPopoverShown, setIsPopoverShown] = useState(false)
+
+  const style: React.CSSProperties = {}
+  let theme
+
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[theme], true],
+    [styles[onlyOn], !!onlyOn && !!styles[onlyOn]]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  if (gradients) {
+    theme = gradients.text_rgb === '0,0,0' ? 'dark' : 'light'
+
+    style.backgroundImage = generateGradient(gradients.bg_rgb)
+  }
+
+  const renderCC = (context?: string): JSX.Element => (
+    <MediaCaption
+      credit={credit}
+      caption={caption}
+      styleContext={context || styleContext}
+    />
+  )
+
+  return (
+    <div data-testid="cover" className={makeClassName(classNames)}>
+      <div className={styles.image}>
+        <Image optimized={urls} ratio={mobileRatio} display="narrow" />
+      </div>
+      <div className={styles.body} style={style}>
+        {blocks.map(item => (
+          <RenderBlocks
+            key={item.id}
+            block={item}
+            styleContext={styleContext}
+          />
+        ))}
+      </div>
+      {cc === 'button' && (
+        <button
+          className={styles.control}
+          type="button"
+          aria-label="Open"
+          onClick={(): void => {
+            setIsPopoverShown(!isPopoverShown)
+          }}
+        />
+      )}
+
+      {cc === 'button' && isPopoverShown && (
+        <Popover
+          onClose={(): void => {
+            setIsPopoverShown(false)
+          }}
+        >
+          {renderCC('isInPopover')}
+        </Popover>
+      )}
+    </div>
+  )
+}

package/src/DocumentItemsCount/DocumentItemsCount.module.css

@@ -0,0 +1,18 @@
+/* stylelint-disable declaration-empty-line-before */
+@import '../vars';
+
+.root {
+  display: inline;
+
+  line-height: inherit;
+}
+
+.root svg {
+  vertical-align: top;
+}
+
+.items {
+  margin-left: 1px;
+
+  vertical-align: top;
+}

package/src/DocumentItemsCount/DocumentItemsCount.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/DocumentItemsCount/DocumentItemsCount.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { DocumentItemsCount } from './'
+import { PreviewWrapper } from '_storybook/PreviewWrapper'
+import styles from './DocumentItemsCount.stories.module.css'
+
+export default {
+  title: 'Main / DocumentItemsCount',
+  component: DocumentItemsCount,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <DocumentItemsCount />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/DocumentItemsCount/DocumentItemsCount.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { DocumentItemsCount } from './'
+import { DocumentItemsCountProps } from './DocumentItemsCount.types'
+import styles from './DocumentItemsCount.module.css'
+
+describe('Document Items Count', () => {
+  let props: DocumentItemsCountProps
+
+  const renderComponent = () => render(<DocumentItemsCount {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const documentItemsCount = getByTestId('document-items-count')
+
+    expect(documentItemsCount).toHaveClass(styles.root)
+  })
+})

package/src/DocumentItemsCount/DocumentItemsCount.types.ts

@@ -0,0 +1,6 @@
+export interface DocumentItemsCountProps {
+  type: string
+  lang?: string
+  items: number
+  children: JSX.Element[] | JSX.Element
+}

package/src/DocumentItemsCount/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { DocumentItemsCountProps } from './DocumentItemsCount.types'
+
+import pluralize from '../utils/pluralize'
+
+import styles from './DocumentItemsCount.module.css'
+
+export const DocumentItemsCount: React.FC<DocumentItemsCountProps> = ({
+  type,
+  lang = 'ru',
+  items,
+  children
+}) => {
+  const i18n = {
+    ru: {
+      card: {
+        one: 'карточка',
+        two: 'карточки',
+        five: 'карточек'
+      },
+      podcast: {
+        one: 'эпизод',
+        two: 'эпизода',
+        five: 'эпизодов'
+      }
+    },
+    en: {
+      card: {
+        one: 'card',
+        two: 'cards',
+        five: 'cards'
+      },
+      podcast: {
+        one: 'episode',
+        two: 'episodes',
+        five: 'episodes'
+      }
+    }
+  }
+
+  const itemsCount = `${items} ${pluralize(
+    items,
+    i18n[lang][type].one,
+    i18n[lang][type].two,
+    i18n[lang][type].five
+  )}`
+
+  return (
+    <div data-testid="document-items-count" className={styles.root}>
+      {children}
+      <span className={styles.items}>{itemsCount}</span>
+    </div>
+  )
+}

package/src/DotsOnImage/DotsOnImage.module.css

@@ -0,0 +1,56 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  display: block;
+}
+
+.dot {
+  position: absolute;
+  z-index: 10;
+
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  text-align: center;
+
+  color: #fff;
+  border-width: 0;
+  border-radius: 30px;
+  outline-width: 0;
+  background-color: #000;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
+
+  font-family: $secondaryFont;
+  font-weight: 600;
+  line-height: 28px;
+
+  appearance: none;
+}
+
+.popover {
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  left: 50%;
+
+  width: 340px;
+  padding: 25px;
+
+  transform: translate(-50%, -50%);
+
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
+
+  font-family: $secondaryFont;
+}
+
+.popoverTitle {
+  font-weight: 600;
+}

package/src/DotsOnImage/DotsOnImage.stories.module.css

@@ -0,0 +1,9 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  max-width: 1280px;
+  margin-right: auto;
+  margin-left: auto;
+}

package/src/DotsOnImage/DotsOnImage.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { DotsOnImage } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './DotsOnImage.stories.module.css'
+
+import mock from './mock.json'
+
+export default {
+  title: 'Main / DotsOnImage',
+  component: DotsOnImage,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const { data } = mock
+  return (
+    <>
+      <div className={styles.root}>
+        <DotsOnImage block={data} />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/DotsOnImage/DotsOnImage.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import mock from './mock.json'
+import { DotsOnImage } from './'
+import styles from './DotsOnImage.module.css'
+
+describe('Dots On Image', () => {
+  const { data } = mock
+
+  const renderComponent = () => render(<DotsOnImage block={data} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const dotsOnImage = getByTestId('dots-on-image')
+
+    expect(dotsOnImage).toHaveClass(styles.root)
+  })
+})

package/src/DotsOnImage/DotsOnImage.types.ts

@@ -0,0 +1,46 @@
+import { OptimizedImageItem } from '../Image/Image.types'
+
+export interface PopoverData {
+  title: string
+  body: string
+  id: string
+  show: boolean
+}
+
+export interface SingleDot {
+  title: string
+  body: string
+  id: string
+  position: {
+    x: number
+    y: number
+  }
+  icon: {
+    type: string
+    number?: string
+    svg_string?: string
+    color: string
+  }
+}
+
+export interface DotsOnImageProps {
+  block: {
+    credit?: string
+    caption?: string
+    cc?: string
+    display?: string
+    optimized?: {
+      original: string
+      w325: OptimizedImageItem
+      w520: OptimizedImageItem
+      w650: OptimizedImageItem
+      w980: OptimizedImageItem
+      w1335: OptimizedImageItem
+    }
+    width?: number
+    height?: number
+    lazy?: boolean
+
+    dots: SingleDot[]
+  }
+}

package/src/DotsOnImage/index.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import { PopoverData, DotsOnImageProps, SingleDot } from './DotsOnImage.types'
+import makeClassName from '../utils/makeClassName'
+
+import { Image } from '../Image'
+
+import styles from './DotsOnImage.module.css'
+
+export const DotsOnImage: React.FC<DotsOnImageProps> = ({ block }) => {
+  const { optimized, width, height, credit, display, dots } = block
+
+  const [popover, setPopover] = useState<PopoverData>({
+    title: null,
+    body: null,
+    show: false,
+    id: null
+  })
+
+  const handleDotClick = (dot: SingleDot): void => {
+    const shouldShow = dot.id !== popover.id
+
+    setPopover({
+      title: dot.title,
+      body: dot.body,
+      show: shouldShow,
+      id: shouldShow ? dot.id : null
+    })
+  }
+
+  return (
+    <div
+      data-testid="dots-on-image"
+      className={makeClassName([[styles.root, true]])}
+    >
+      <div className={styles.dots}>
+        {dots.map(dot => (
+          <button
+            className={styles.dot}
+            type="button"
+            key={dot.id}
+            style={{
+              top: `${dot.position.y}%`,
+              left: `${dot.position.x}%`,
+              backgroundColor: dot.icon.color
+            }}
+            onClick={(): void => handleDotClick(dot)}
+          >
+            {dot.icon.type === 'svg' && (
+              <div
+                className={styles.icon}
+                dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }}
+              />
+            )}
+            {dot.icon.type === 'number' && dot.icon.number}
+          </button>
+        ))}
+      </div>
+      <div className={styles.image}>
+        <Image
+          optimized={optimized}
+          width={width}
+          height={height}
+          alt={credit}
+          display={display}
+        />
+      </div>
+
+      {popover.show && (
+        <div className={styles.popover}>
+          <div className={styles.popoverTitle}>{popover.title}</div>
+          <div
+            className={styles.popoverBody}
+            dangerouslySetInnerHTML={{ __html: popover.body }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/DotsOnImage/mock.json

@@ -0,0 +1,75 @@
+{
+  "type": "dots_on_image",
+  "data": {
+    "dots": [
+      {
+        "title": "заг 1ой точки",
+        "body": "<p>тест на <strong>точке</strong></p>",
+        "position": {
+          "x": 43.86,
+          "y": 31.03
+        },
+        "icon": {
+          "type": "svg",
+          "color": "#000000",
+          "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
+        },
+        "id": "0-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
+      },
+      {
+        "title": "2222",
+        "body": "<p>sdsd</p>",
+        "position": {
+          "x": 16.05,
+          "y": 18.83
+        },
+        "icon": {
+          "type": "svg",
+          "color": "#006000",
+          "svg_string": "<svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M13.5733 19.192C14.1173 19.192 15.1093 18.632 16.1493 17.464C16.0693 17.352 15.9733 17.256 15.8773 17.144C15.4133 17.48 15.0133 17.752 14.5493 18.04C15.2533 14.712 15.5093 13.24 15.5093 12.824C15.5093 12.2 15.1733 11.784 14.3573 11.784C13.6213 11.784 12.7573 12.472 11.7653 13.592L12.0693 13.928C12.5653 13.544 13.0133 13.208 13.4613 12.904L12.7093 16.776C12.6293 17.224 12.5173 17.72 12.5173 18.136C12.5173 18.936 12.9013 19.192 13.5733 19.192ZM13.8133 9.288C13.8453 9.896 14.3093 10.376 14.9173 10.376C15.6213 10.376 16.2773 9.768 16.2773 9.032C16.2773 8.408 15.8133 7.912 15.1573 7.912C14.4213 7.912 13.8133 8.568 13.8133 9.288Z\" fill=\"white\"/>\n</svg>\n"
+        },
+        "id": "1-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
+      }
+    ],
+    "display": "full",
+    "width": 972,
+    "height": 720,
+    "caption": "кепшн поста точекк",
+    "credit": "кредит поста точек",
+    "cc": "default",
+    "optimized": {
+      "original": "https://meduza.io/impro/5HoUrYuAikdITPXt3u93mFkOq7VYYY_eAhi-xNZeP8A/fill/2670/0/ce/0/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+      "w325": {
+        "1x": "https://meduza.io/impro/crVixfG_hOQ09CxCCOAPDdrjNVJRbqK6iWQDs4xED0c/fill/325/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "2x": "https://meduza.io/impro/x0Ow7e1QWjYDUVIsPS4TM8XzIQZZYvonDTS1NyZrfkk/fill/650/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "1x_webp": "https://meduza.io/impro/HQIwfF9isLBtluJCUA5xaQXWrN2TdXnnJOw-9hdKo3I/fill/325/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp",
+        "2x_webp": "https://meduza.io/impro/1HrNg1I3XBi9ha6dZsWeBCzq6JQ8JcJHYO9k3k07YFw/fill/650/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp"
+      },
+      "w520": {
+        "1x": "https://meduza.io/impro/N1qNFnnYi5YGRe99OBCN7VCr2t3_MpfQR-z0wGRkUnU/fill/520/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "2x": "https://meduza.io/impro/vR-PZG6QukHhvYZQigdpoYOkyK209h_u6FV3Rk_ENL8/fill/1040/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "1x_webp": "https://meduza.io/impro/bSgSTUyy40-81CyD8hfFwv3C25ZrFGHmXHn_JWurXAo/fill/520/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp",
+        "2x_webp": "https://meduza.io/impro/oeE8R5DqXvawF3QTNzHD8jwRhxBaLYYiSUuTvCcmeJs/fill/1040/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp"
+      },
+      "w650": {
+        "1x": "https://meduza.io/impro/x0Ow7e1QWjYDUVIsPS4TM8XzIQZZYvonDTS1NyZrfkk/fill/650/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "2x": "https://meduza.io/impro/EKoXEP0_lui5CUq_FOLuxkW3I5b0BmJA6dKAVSgrboA/fill/1300/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "1x_webp": "https://meduza.io/impro/1HrNg1I3XBi9ha6dZsWeBCzq6JQ8JcJHYO9k3k07YFw/fill/650/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp",
+        "2x_webp": "https://meduza.io/impro/f4SqHLfAXaZlX1YwcSRO0Yh97FDoVVDA3E-UW3Q198w/fill/1300/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp"
+      },
+      "w980": {
+        "1x": "https://meduza.io/impro/6LqwufA0GMvyqKG3ekl7Kkfw7sot_8RMmXctWrdV6FE/fill/980/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "2x": "https://meduza.io/impro/JL87WbaEGFFy2oN1VcODP1XaPQFKt9bEMz1L0UBv5pQ/fill/1960/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "1x_webp": "https://meduza.io/impro/ubDgYiJx845zBqksPNb42u7UH5gQESPqkAypH0EZgDk/fill/980/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp",
+        "2x_webp": "https://meduza.io/impro/5RN8WBzW4pCCGR0aa7vZBJPrquAjJ9v_fU8oOtaEtXg/fill/1960/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp"
+      },
+      "w1335": {
+        "1x": "https://meduza.io/impro/FsMy3tfWHttQ8XYj62I_mVyhcrgUvYHsux8O6lHbVhw/fill/1335/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "2x": "https://meduza.io/impro/4xZJ5pfChwJ-VOOi4gSLekdPWVnsNLum-6RD-i_JyeI/fill/2670/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.jpg",
+        "1x_webp": "https://meduza.io/impro/96XnI-WDRZHqauwONv3cAWm8epeB-mCIsk60cWvmcrA/fill/1335/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp",
+        "2x_webp": "https://meduza.io/impro/IOhdUnt7cqSgx-n_YsAJt_dOCvfrYxeoGHkgG4RouVg/fill/2670/0/ce/1/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNDk2LzQ1/Ny9vcmlnaW5hbC9Q/cUJXZm1HMm82c281/cDdaWGpEcmVRLmpw/Zw.webp"
+      }
+    }
+  },
+  "id": "1-8d971188fa182754158cfa976f784856e82731f04263483dcbcfbc0c2224c1d9"
+}

package/src/Dropdown/Dropdown.module.css

@@ -0,0 +1,82 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+  z-index: $zIndex-1;
+
+  display: inline-block;
+
+  font-family: $secondaryFont;
+}
+
+.root.active .menu,
+.root:hover .menu {
+  visibility: visible;
+
+  opacity: 1;
+}
+
+.root ul {
+  overflow: hidden;
+
+  width: 162px;
+  margin: 0;
+  padding: 3px 0;
+
+  border-radius: 5px;
+  background: #fff;
+  box-shadow: 0 0 0 1px $silver, 0 5px 20px 0 rgba(0, 0, 0, 0.2);
+
+  font-family: $secondaryFont;
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.root a {
+  display: block;
+
+  padding: 2px 15px;
+
+  text-decoration: none;
+
+  color: #000;
+  box-shadow: none;
+}
+
+.root a:hover {
+  color: #000;
+  background-color: #f7f7f7;
+}
+
+.isInAudioPanel .menu {
+  right: 0;
+  left: auto;
+
+  @media $landscapeTablet {
+    right: auto;
+    left: 0;
+  }
+}
+
+.menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  visibility: hidden;
+
+  padding-top: 6px;
+
+  opacity: 0;
+}
+
+.menu::after {
+  position: absolute;
+  z-index: -1;
+  top: -10px;
+  right: -10px;
+  bottom: -10px;
+  left: -10px;
+
+  content: '';
+}

package/src/Dropdown/Dropdown.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}