@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { Dropdown, Menu } from './'
+import { Button } from '../Button'
+import { SvgSymbol } from '../SvgSymbol'
+
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './Dropdown.stories.module.css'
+
+export default {
+  title: 'Main / Dropdown',
+  component: Dropdown,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <Dropdown>
+          <Button size="auto" theme="ghost" styleContext="isInDropdown">
+            <u>Открыть меню</u>
+            <span>
+              <SvgSymbol icon="arrow" />
+            </span>
+          </Button>
+
+          <Menu>
+            <ul>
+              <li>
+                <a href="#target">Первый элемент</a>
+              </li>
+              <li>
+                <a href="#target">Второй элемент</a>
+              </li>
+            </ul>
+          </Menu>
+        </Dropdown>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Dropdown } from './'
+import { DropdownProps } from './Dropdown.types'
+import styles from './Dropdown.module.css'
+
+describe('Dropdown', () => {
+  let props: DropdownProps
+
+  const renderComponent = () => render(<Dropdown {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const dropdown = getByTestId('dropdown')
+
+    expect(dropdown).toHaveClass(styles.root)
+  })
+})

package/src/Dropdown/Dropdown.types.ts

@@ -0,0 +1,5 @@
+export interface DropdownProps {
+  children: JSX.Element[] | JSX.Element
+  active?: boolean
+  styleContext?: string | string[]
+}

package/src/Dropdown/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { DropdownProps } from './Dropdown.types'
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import styles from './Dropdown.module.css'
+
+export const Menu: React.FC<DropdownProps> = ({ children }) => {
+  return (
+    <div data-testid="dropdown" className={styles.menu}>
+      {children}
+    </div>
+  )
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({
+  children,
+  active,
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles.active, !!active && !!styles.active]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="dropdown" className={makeClassName(classNames)}>
+      {children}
+    </div>
+  )
+}

package/src/EmbedBlock/EmbedBlock.module.css

@@ -0,0 +1,351 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  margin: 15px 0;
+
+  @media $mobile {
+    margin: 25px 0 20px;
+  }
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root figcaption {
+  width: 100%;
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+
+  font-family: $secondaryFont;
+}
+
+.object {
+  position: relative;
+}
+
+.objectWrap {
+  position: relative;
+
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.objectWrap iframe {
+  display: block;
+
+  width: 100px;
+  min-width: 100%;
+
+  border-width: 0;
+}
+
+.proportional iframe,
+.proportional video {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  height: 100%;
+}
+
+.objectWrap img,
+.objectWrap video {
+  width: 100%;
+  height: auto;
+}
+
+.attachment {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.attachment figcaption {
+  padding-left: 12px;
+}
+
+.default,
+.xs {
+  max-width: 650px;
+
+  @media $mobile {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.full {
+  max-width: 980px;
+
+  @media $mobile {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.full .object {
+  margin-right: -20px;
+  margin-left: -20px;
+
+  @media $mobile {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.super_full {
+  max-width: 100%;
+}
+
+.super_full .figure {
+  @media $mobile {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+.dark iframe {
+  background-color: transparent;
+}
+
+.isInGroupedBlock {
+  max-width: none;
+
+  @media $mobile {
+    margin: 0;
+  }
+}
+
+.isInGroupedBlock .figure {
+  @media $mobile {
+    margin: 0;
+  }
+}
+
+.isInGroupedBlock figcaption {
+  max-width: none;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+[data-frozen='true'] {
+  position: relative;
+
+  cursor: pointer;
+}
+
+[data-frozen='true']::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  content: '';
+  pointer-events: none;
+
+  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill-opacity='.5' fill='%23000' cx='35' cy='35' r='35'/%3E%3Cpath d='M35 66.75c2.816 0 5.585-.367 8.256-1.084.667-.18 1.062-.865.883-1.532-.18-.666-.866-1.062-1.533-.883-2.46.662-5.01 1-7.607 1-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25zm15.946-4.29c2.41-1.4 4.624-3.114 6.587-5.092.487-.49.484-1.282-.006-1.768s-1.282-.484-1.768.006c-1.81 1.823-3.852 3.403-6.07 4.694-.598.347-.8 1.113-.453 1.71.347.596 1.112.798 1.71.45zm11.632-11.716c1.382-2.417 2.442-5.007 3.147-7.713.174-.667-.226-1.35-.894-1.524-.667-.174-1.35.227-1.524.895-.65 2.492-1.625 4.877-2.898 7.102-.343.6-.135 1.363.464 1.706.6.343 1.363.135 1.706-.464zm4.172-15.912c-.015-2.816-.397-5.583-1.128-8.25-.183-.666-.87-1.058-1.537-.875-.665.183-1.057.87-.874 1.536.675 2.457 1.026 5.006 1.04 7.602.003.69.566 1.247 1.256 1.243.69-.003 1.247-.566 1.244-1.256zM62.376 18.91c-1.414-2.402-3.14-4.608-5.128-6.56-.492-.485-1.283-.478-1.767.015-.483.492-.476 1.284.016 1.767 1.833 1.8 3.423 3.834 4.726 6.046.35.595 1.117.793 1.712.443.594-.35.793-1.116.442-1.71zM50.598 7.34c-2.424-1.37-5.02-2.416-7.73-3.107-.668-.17-1.35.233-1.52.902-.17.67.234 1.35.903 1.52 2.496.637 4.886 1.6 7.118 2.86.6.34 1.363.13 1.703-.472.34-.602.13-1.364-.472-1.704zM34.665 3.25c-2.815.03-5.58.425-8.244 1.17-.664.187-1.052.877-.865 1.542.186.664.875 1.052 1.54.866 2.454-.687 5-1.052 7.596-1.078.69-.008 1.245-.573 1.238-1.263-.007-.692-.573-1.245-1.263-1.238zm-15.903 4.46c-2.393 1.426-4.59 3.163-6.533 5.162-.482.495-.47 1.287.024 1.768.496.48 1.287.47 1.768-.026 1.79-1.842 3.815-3.443 6.02-4.758.594-.354.788-1.12.434-1.714-.353-.593-1.12-.787-1.714-.433zM7.256 19.55c-1.357 2.43-2.39 5.032-3.065 7.745-.166.67.242 1.348.912 1.515.67.167 1.348-.24 1.515-.91.623-2.5 1.573-4.894 2.822-7.133.335-.603.12-1.365-.484-1.7-.603-.338-1.364-.122-1.7.48zM3.254 35.5c.043 2.813.454 5.577 1.214 8.237.19.663.882 1.047 1.545.857.664-.19 1.05-.88.86-1.545-.7-2.45-1.08-4.995-1.12-7.59-.01-.69-.578-1.24-1.27-1.23-.69.01-1.24.58-1.23 1.27zm4.543 15.88c1.44 2.385 3.188 4.573 5.197 6.505.497.478 1.29.463 1.767-.035.48-.497.464-1.29-.033-1.767-1.85-1.78-3.463-3.797-4.79-5.995-.356-.59-1.125-.78-1.716-.425-.59.357-.78 1.125-.423 1.716zm11.9 11.444c2.44 1.343 5.046 2.36 7.763 3.023.67.162 1.347-.25 1.51-.92.164-.67-.247-1.347-.918-1.51-2.502-.61-4.902-1.547-7.147-2.784-.605-.333-1.365-.113-1.698.492-.334.604-.114 1.365.49 1.698z' fill='%23FFF' fill-rule='nonzero'/%3E%3Cpath d='M19.838 34.99c0 4.39 3.297 7.265 7.35 7.265 2.437 0 4.39-1.008 5.776-2.54v-5.25h-6.636v2.162h4.178v2.184c-.63.59-1.89 1.26-3.317 1.26-2.774.002-4.832-2.14-4.832-5.08s2.058-5.062 4.83-5.062c1.576 0 2.9.82 3.634 1.87l2.015-1.134c-1.134-1.617-2.92-2.92-5.65-2.92-4.052 0-7.35 2.857-7.35 7.245zm15.487 6.992h2.457V27.977h-2.456v14.007zm5.24 0h2.457v-6.047h6.992v-2.163h-6.992V30.14l7.14-.002v-2.163h-9.597v14.008z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 70px 70px;
+}
+
+.gameEmbed {
+  width: 100%;
+  max-width: 650px;
+  margin: 0 auto;
+
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.gameEmbed iframe {
+  display: block;
+
+  width: 100%;
+
+  border-width: 0;
+}
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.mobile .figure {
+  overflow: hidden;
+
+  border-radius: 8px 8px 0 0;
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}
+
+.control {
+  position: absolute;
+  z-index: 10;
+  right: -8px;
+  bottom: 12px;
+
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+
+  color: #fff;
+  border-width: 0;
+  border-radius: 14px;
+  background-color: rgba(0, 0, 0, 0.7);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill='%23FEFEFE' fill-rule='evenodd' opacity='.7'%3E %3Cpath d='M12.726 16H3.275A3.276 3.276 0 0 1 0 12.725v-9.45A3.276 3.276 0 0 1 3.275 0h9.45A3.275 3.275 0 0 1 16 3.275v9.45A3.275 3.275 0 0 1 12.726 16zm0-2c.703 0 1.274-.571 1.274-1.275v-9.45C14 2.571 13.429 2 12.726 2H3.275C2.57 2 2 2.571 2 3.275v9.45C2 13.429 2.57 14 3.275 14h9.45z' fill-rule='nonzero'/%3E %3Cpath d='M4.97 8.307l7.046 7.046a.5.5 0 0 0 .708-.707l-7.4-7.4a.5.5 0 0 0-.708 0l-3.97 3.97a.5.5 0 0 0 .708.707L4.97 8.307z' fill-rule='nonzero'/%3E %3Cpath d='M10.875 5.832l3.771 3.771a.5.5 0 0 0 .707-.707l-4.125-4.125a.5.5 0 0 0-.707 0l-4.19 4.19a.5.5 0 1 0 .707.707l3.837-3.836z' fill-rule='nonzero'/%3E %3Cpath d='M5.865 4.269a.894.894 0 1 1-1.787 0 .894.894 0 0 1 1.787 0'/%3E %3C/g%3E %3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
+}
+
+.raw_html {
+  margin: 0 auto;
+}
+
+.youtube .object,
+.vimeo .object,
+.onetv .object,
+.coub .object,
+.facebook_video .object,
+.figure {
+  margin-right: -20px;
+  margin-left: -20px;
+
+  @media $mobile {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.card.youtube .object,
+.card.vimeo .object,
+.card.onetv .object,
+.card.coub .object,
+.card.facebook_video .object,
+.card .figure,
+.slide.youtube .object,
+.slide.vimeo .object,
+.slide.onetv .object,
+.slide.coub .object,
+.slide.facebook_video .object,
+.slide .figure {
+  margin-right: -11px;
+  margin-left: -11px;
+
+  @media $landscapeTablet {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.card:not(.cc):last-child,
+.slide:not(.cc):last-child {
+  overflow: hidden;
+
+  margin-bottom: -16px;
+
+  border-radius: 0 0 8px 8px;
+
+  @media $landscapeTablet {
+    margin-bottom: -24px;
+  }
+}
+
+.isInAnswer {
+  margin-top: 12px;
+  margin-bottom: 12px;
+
+  @media $landscapeTablet {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.isInAnswer .figure {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.picture.default .figure {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.picture.default img {
+  border-radius: 2px;
+}
+
+.wrapper {
+  position: relative;
+}
+
+.wrapper .objectWrap {
+  position: static;
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}
+
+/* XS */
+.xs {
+  @media $contentWidth {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+  }
+}
+
+.xs .figure {
+  flex-shrink: 0;
+
+  max-width: 33.3333333%;
+  margin-right: 0;
+  margin-left: 0;
+
+  @media $contentWidth {
+    width: 216px;
+    margin-right: 15px;
+  }
+}
+
+.xs .figure figcaption {
+  padding-top: 12px;
+}
+
+.xs + h3,
+.xs + h4 {
+  margin-top: 0;
+}

package/src/EmbedBlock/EmbedBlock.stories.module.css

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

package/src/EmbedBlock/EmbedBlock.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { EmbedBlockContainer } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './EmbedBlock.stories.module.css'
+
+import mock from './mock.json'
+
+export default {
+  title: 'Main / EmbedBlock',
+  component: EmbedBlockContainer,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        {mock.blocks.map(block => (
+          <EmbedBlockContainer block={block} lang="ru" key={block.id} />
+          // <span>{block.id}</span>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/EmbedBlock/EmbedBlock.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { EmbedBlockContainer } from './'
+import { EmbedBlockProps } from './EmbedBlock.types'
+import styles from './EmbedBlock.module.css'
+
+describe('Embed Block', () => {
+  let props: EmbedBlockProps
+
+  const renderComponent = () => render(<EmbedBlockContainer {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const embedBlock = getByTestId('embed-block')
+
+    expect(embedBlock).toHaveClass(styles.root)
+  })
+})