@meduza/ui-kit-2 0.0.1 → 0.1.0

package/src/MaterialNote/MaterialNote.stories.module.css

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

package/src/MaterialNote/MaterialNote.stories.tsx

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

package/src/MaterialNote/MaterialNote.test.tsx

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

package/src/MaterialNote/MaterialNote.types.ts

@@ -0,0 +1,12 @@
+export interface MaterialNoteProps {
+  block: {
+    data: {
+      data: string
+      id: string
+      lenght: number
+      type: 'note_caption' | 'note_credit'
+    }[]
+    id: string
+  }
+  styleContext?: string | string[]
+}

package/src/MaterialNote/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { MaterialNoteProps } from './MaterialNote.types'
+import makeStyleContext from '../utils/makeStyleContext'
+import makeClassName from '../utils/makeClassName'
+
+import styles from './MaterialNote.module.css'
+
+export const MaterialNote: React.FC<MaterialNoteProps> = ({
+  block: { data },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [[styles.root, true]]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="material-note" className={makeClassName(classNames)}>
+      {data &&
+        data.map(item => (
+          <p
+            className={styles[item.type]}
+            key={item.id}
+            dangerouslySetInnerHTML={{ __html: item.data }}
+          />
+        ))}
+    </div>
+  )
+}

package/src/MaterialNote/mock.json

@@ -0,0 +1,18 @@
+{
+  "type": "material_note",
+  "data": [
+    {
+      "type": "note_caption",
+      "data": "Сделано в <a href=\"https://prodano.media/\" target=\"_blank\" rel=\"noopener\"><strong>продано!</strong></a>",
+      "length": 18,
+      "id": "52-0-d9684e08cf3e63a26677cc0749d47e104939d20f514b1b228b03bcdaa6af7a92"
+    },
+    {
+      "type": "note_credit",
+      "data": "Иллюстрации: Essl / Shutterstock",
+      "length": 32,
+      "id": "52-1-822d6bae27a29a214e1af63f6bcd8dd6aebe291d5b0b89c2a7cbab456c9e38b9"
+    }
+  ],
+  "id": "52-c0fd8cea8e599cc0a27ca0a1d1d5ccb4f021e8dc9843ff54457311e24dfdedf6"
+}

package/src/MaterialTitle/MaterialTitle.module.css

@@ -0,0 +1,33 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}
+
+.root {
+  margin: 0;
+
+  font-family: $secondaryFont;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 27px;
+
+  @media $portraitTablet {
+    font-size: 37px;
+    line-height: 38px;
+  }
+}
+
+.primary {
+  font-family: $primaryFont;
+  font-weight: normal;
+}
+
+.secondary {
+  font-size: 24px;
+  font-weight: 700;
+
+  @media $portraitTablet {
+    font-size: 36px;
+  }
+}

package/src/MaterialTitle/MaterialTitle.stories.module.css

@@ -0,0 +1,13 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}
+
+.block {
+  max-width: 980px;
+}
+
+.block + .block {
+  margin-top: 40px;
+}

package/src/MaterialTitle/MaterialTitle.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { MaterialTitle, Primary, Secondary } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './MaterialTitle.stories.module.css'
+
+export default {
+  title: 'Main / MaterialTitle',
+  component: MaterialTitle,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <div className={styles.block}>
+          <MaterialTitle>
+            <Primary>Протесты против пенсионной реформы. Хроника</Primary>
+          </MaterialTitle>
+        </div>
+        <div className={styles.block}>
+          <MaterialTitle>
+            <Secondary>Одинокий богатый заголовок</Secondary>
+          </MaterialTitle>
+        </div>
+        <div className={styles.block}>
+          <MaterialTitle>
+            <Secondary>Протесты против пенсионной реформы. Хроника</Secondary>{' '}
+            <Primary>
+              Как прошли митинги против повышения пенсионного возраста в разных
+              городах России
+            </Primary>
+          </MaterialTitle>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/MaterialTitle/MaterialTitle.test.tsx

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

package/src/MaterialTitle/MaterialTitle.types.ts

@@ -0,0 +1,3 @@
+export interface MaterialTitleProps {
+  children?: JSX.Element[] | JSX.Element
+}

package/src/MaterialTitle/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { MaterialTitleProps } from './MaterialTitle.types'
+
+import styles from './MaterialTitle.module.css'
+
+export const Primary: React.FC<MaterialTitleProps> = ({ children }) => {
+  return <span className={styles.primary}>{children}</span>
+}
+
+export const Secondary: React.FC<MaterialTitleProps> = ({ children }) => {
+  return <span className={styles.secondary}>{children}</span>
+}
+
+export const MaterialTitle: React.FC<MaterialTitleProps> = ({ children }) => {
+  return (
+    <h1 className={styles.root} data-testid="material-title">
+      {children}
+    </h1>
+  )
+}

package/src/MediaCaption/MediaCaption.module.css

@@ -0,0 +1,85 @@
+@import '../vars.css';
+
+.root {
+  font-family: $secondaryFont;
+}
+
+.root a {
+  text-decoration: underline;
+
+  color: inherit;
+  box-shadow: none;
+}
+
+.root a:hover {
+  color: #b88b58;
+}
+
+.caption {
+  max-width: 520px;
+  padding-top: 4px;
+
+  color: $jet;
+
+  font-size: 14px;
+  line-height: 18px;
+
+  @media $mobile {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
+.credit {
+  max-width: 520px;
+  padding-top: 1px;
+
+  color: #666;
+
+  font-size: 12px;
+  line-height: 16px;
+
+  @media $mobile {
+    padding-top: 3px;
+  }
+}
+
+.credit:first-child {
+  padding-top: 3px;
+}
+
+.dark .caption {
+  color: #fff;
+}
+
+.dark .credit {
+  color: #929292;
+}
+
+.video .caption,
+.picture .caption {
+  padding-top: 10px;
+
+  @media $mobile {
+    padding-top: 12px;
+  }
+}
+
+.video .credit:first-child,
+.picture .credit:first-child {
+  padding-top: 9px;
+
+  @media $mobile {
+    padding-top: 11px;
+  }
+}
+
+.picture .credit,
+.picture .caption,
+.video .credit,
+.video .caption,
+.desktop .credit,
+.desktop .caption {
+  max-width: 650px;
+}
+

package/src/MediaCaption/MediaCaption.stories.module.css

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

package/src/MediaCaption/MediaCaption.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { MediaCaption } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './MediaCaption.stories.module.css'
+
+export default {
+  title: 'Main / MediaCaption',
+  component: MediaCaption,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <MediaCaption
+          credit="The Insider, Bellingcat и Der Spiegel"
+          caption="Пресс-секретарь президента России Дмитрий Песков в разговоре с российскими журналистами не исключил, что между Путиным и Конте произошло недопонимание."
+        />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/MediaCaption/MediaCaption.test.tsx

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

package/src/MediaCaption/MediaCaption.types.ts

@@ -0,0 +1,5 @@
+export interface MediaCaptionProps {
+  credit?: string,
+  caption?: string,
+  styleContext?: string | string[]
+}

package/src/MediaCaption/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { MediaCaptionProps } from './MediaCaption.types'
+import makeStyleContext from '../utils/makeStyleContext'
+import makeClassName from '../utils/makeClassName'
+
+import styles from './MediaCaption.module.css'
+
+export const MediaCaption: React.FC<MediaCaptionProps> = ({
+  credit,
+  caption,
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [[styles.root, true]]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="media-caption" className={makeClassName(classNames)}>
+      {caption && (
+        <div
+          className={styles.caption}
+          dangerouslySetInnerHTML={{ __html: caption }}
+        />
+      )}
+      {credit && (
+        <div
+          className={styles.credit}
+          dangerouslySetInnerHTML={{ __html: credit }}
+        />
+      )}
+    </div>
+  )
+}

package/src/Meta/Meta.module.css

@@ -0,0 +1,106 @@
+@import '../vars.css';
+
+.root {
+  transform: translateZ(0);
+
+  font-family: $secondaryFont;
+  font-size: 12px;
+  line-height: 14px;
+
+  fill: inherit;
+}
+
+.rich,
+.podcast,
+.episode,
+.simple,
+.slide,
+.card,
+.game,
+.isInMaterial {
+  width: 100%;
+
+  color: $nikel;
+}
+
+.podcast {
+  fill: currentColor;
+}
+
+.isInSearchItem {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.center.half {
+  @media $landscapeTablet {
+    text-align: left;
+  }
+}
+
+.episode,
+.card,
+.slide,
+.game,
+.center {
+  @media $mobile {
+    text-align: center;
+  }
+}
+
+.light {
+  color: rgba(255, 255, 255, 0.6);
+
+  fill: currentColor;
+}
+
+.dark {
+  color: #757575;
+}
+
+.episode,
+.card,
+.slide,
+.podcast {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+
+  @media $portraitTablet {
+    display: block;
+  }
+}
+
+.hasSource {
+  @media $mobileMax {
+    display: flex;
+    flex-flow: row wrap;
+  }
+}
+
+.bookmark {
+  position: absolute;
+  z-index: 10;
+  right: -12px;
+  bottom: -4px;
+
+  @media $mobile {
+    display: none;
+  }
+}
+
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/Meta/Meta.stories.module.css

@@ -0,0 +1,7 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  font-family: $secondaryFont;
+}

package/src/Meta/Meta.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { Meta } from './'
+import { MetaItem } from '../MetaItem'
+import { MetaItemLive } from '../MetaItemLive'
+import { DocumentItemsCount } from '../DocumentItemsCount'
+import { Timestamp } from '../Timestamp'
+import { SvgSymbol } from '../SvgSymbol'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './Meta.stories.module.css'
+
+export default {
+  title: 'Main / Meta',
+  component: Meta,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <h3>В карточке</h3>
+        <Meta>
+          <MetaItem>
+            <MetaItemLive /> Онлайн
+          </MetaItem>
+          <MetaItem key={`status-${status}`}>
+            <Timestamp publishedAt={1526024185} type="fromNow" />
+          </MetaItem>
+          {['card', 'podcast'].map((type: 'card' | 'podcast') => (
+            <MetaItem key={type}>
+              <DocumentItemsCount type={type} items={4}>
+                <SvgSymbol icon={type} size="small" />
+              </DocumentItemsCount>
+            </MetaItem>
+          ))}
+        </Meta>
+      </div>
+      <div className={styles.root}>
+        <h3>В материале</h3>
+
+        <Meta styleContext="isInMaterial">
+          <MetaItem bullets>
+            <MetaItemLive /> Онлайн
+          </MetaItem>
+          <MetaItem bullets>
+            Источник: <a href="https://meduza.io">Meduza</a>
+          </MetaItem>
+          <MetaItem bullets>
+            <Timestamp publishedAt={1558353600} type="date" locale="en" />
+          </MetaItem>
+        </Meta>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Meta/Meta.test.tsx

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