@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/Table/mock.json

@@ -0,0 +1,301 @@
+{
+  "type": "table",
+  "table_credit": "кредит в таблице",
+  "rows": [
+    {
+      "key": "9ef452430882269f180f",
+      "cells": [
+        {
+          "val": "первая строка _1",
+          "key": "ptijzw",
+          "color": "#f4f0f8"
+        },
+        {
+          "val": "первая строка _2",
+          "key": "kdns0e",
+          "color": "#f5f5f5"
+        },
+        {
+          "val": "первая строка опять и снова",
+          "color": "#ffffff",
+          "key": "3xhcl4"
+        },
+        {
+          "val": "первая строка опять и снова",
+          "color": "#ffffff",
+          "key": "3xshdcl4"
+        },
+        {
+          "val": "первая строка опять и снова",
+          "color": "#ffffff",
+          "key": "3xhdcl4"
+        }
+      ]
+    },
+    {
+      "key": "8d41ad87004eaa2efcba",
+      "cells": [
+        {
+          "val": "вторая <strong>строка</strong> _1",
+          "key": "uu2q3s",
+          "color": "#f4f0f8"
+        },
+        {
+          "val": "<a href=\"https://meduza.io/paragraph/2019/10/30/kak-margarita-simonyan-prishla-na-intervyu-k-ksenii-sobchak-uslyshala-neudobnye-voprosy-i-ushla-v-odnom-abzatse\" target=\"_blank\">вторая строка _3</a>",
+          "key": "qfy9e43",
+          "color": "#e6f3ff"
+        },
+        {
+          "val": "ывывыв",
+          "color": "#ffffff",
+          "key": "flh2yh"
+        },
+        {
+          "val": "<a href=\"https://meduza.io/paragraph/2019/10/30/kak-margarita-simonyan-prishla-na-intervyu-k-ksenii-sobchak-uslyshala-neudobnye-voprosy-i-ushla-v-odnom-abzatse\" target=\"_blank\">вторая строка _3</a>",
+          "key": "qfy943",
+          "color": "#e6df3ff"
+        },
+        {
+          "val": "ывывыв",
+          "color": "#ffffff",
+          "key": "flh2dyh"
+        }
+      ]
+    },
+    {
+      "key": "1c4b6ce381f928aa2b57",
+      "cells": [
+        {
+          "val": "а тут <strong>болд</strong> с<em> италиком</em> и <a href=\"https://second.meduza.io/feature/2019/10/30/test-tablits-v-ficherah\" target=\"_blank\">ссылкой</a>",
+          "key": "cfnbc3",
+          "color": "#f4f0f8"
+        },
+        {
+          "val": "llllllll",
+          "key": "25yr97",
+          "color": "#FFFFFF"
+        },
+        {
+          "val": "2",
+          "color": "#ffffff",
+          "key": "q5ssyu"
+        },
+        {
+          "val": "llllllll",
+          "key": "25yrd97",
+          "color": "#FFFFFF"
+        },
+        {
+          "val": "2",
+          "color": "#ffffff",
+          "key": "q5ssdyu"
+        }
+      ]
+    },
+    {
+      "key": "2f7722300e13ba0d37b1",
+      "cells": [
+        {
+          "key": "swrdin",
+          "color": "#f4f0f8"
+        },
+        {
+          "val": "ии",
+          "key": "h9jg6z",
+          "color": "#ffffff"
+        },
+        {
+          "val": "3",
+          "color": "#ffffff",
+          "key": "ag23oa"
+        },
+        {
+          "val": "ии",
+          "key": "h9jdg6z",
+          "color": "#ffffff"
+        },
+        {
+          "val": "3",
+          "color": "#ffffff",
+          "key": "ag23doa"
+        }
+      ]
+    },
+    {
+      "key": "dbb5a2c10886fea7ee41",
+      "cells": [
+        {
+          "val": "цццццц",
+          "color": "#ffffff",
+          "key": "3sd3uv"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjkssg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjnbr"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjksdsg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjdnbr"
+        }
+      ]
+    },
+    {
+      "key": "dbb5a2c108f6f3a7ee41",
+      "cells": [
+        {
+          "val": "цццццц",
+          "color": "#ffffff",
+          "key": "3sd3uv"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjkssg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjnbr"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjksdsg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjdnbr"
+        }
+      ]
+    },
+    {
+      "key": "dbb5a2c10886sea7ee41",
+      "cells": [
+        {
+          "val": "цццццц",
+          "color": "#ffffff",
+          "key": "3sd3uv"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjkssg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjnbr"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjksdsg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjdnbr"
+        }
+      ]
+    },
+    {
+      "key": "dbb5s2cf0886fea7ee41",
+      "cells": [
+        {
+          "val": "цццццц",
+          "color": "#ffffff",
+          "key": "3sd3uv"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjkssg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjnbr"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjksdsg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjdnbr"
+        }
+      ]
+    },
+    {
+      "key": "dcb5a2d108f6f3a7ee41",
+      "cells": [
+        {
+          "val": "цццццц",
+          "color": "#ffffff",
+          "key": "3sd3uv"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjkssg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjnbr"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjksdsg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjdnbr"
+        }
+      ]
+    },
+    {
+      "key": "dbb5a2c1088ssea7ee41",
+      "cells": [
+        {
+          "val": "цццццц",
+          "color": "#ffffff",
+          "key": "3sd3uv"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjkssg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjnbr"
+        },
+        {
+          "val": "пустая ячейка дальше",
+          "color": "#fffde6",
+          "key": "pjksdsg"
+        },
+        {
+          "color": "#ffffff",
+          "key": "gtjdnbr"
+        }
+      ]
+    }
+  ],
+  "columns_widths": [200, 405, 300, 200, 200],
+  "options": {
+    "num_fixed_rows": 2,
+    "num_fixed_columns": 1,
+    "header": false
+  },
+  "display": "full",
+  "id": "2-84f2dfff359c2d021666431d5a565e0cf7954ede74cd1fa340771d4c229f6fbd"
+}

package/src/Tag/Tag.module.css

@@ -0,0 +1,115 @@
+@import '../vars.css';
+
+.root {
+  display: inline-block;
+
+  cursor: default;
+  user-select: none;
+  vertical-align: middle;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+
+  font-family: $secondaryFont;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 12px;
+}
+
+.small {
+  font-size: 12px;
+  line-height: 12px;
+
+  @media $landscapeTablet {
+    line-height: 14px;
+  }
+}
+
+.large {
+  @media $landscapeTablet {
+    letter-spacing: 1px;
+
+    font-size: 14px;
+    line-height: 16px;
+  }
+}
+
+.dark {
+  color: #000;
+}
+
+.light {
+  color: #fff;
+}
+
+.gold {
+  color: $gold;
+}
+
+.gray {
+  color: #757575;
+}
+
+.inherit {
+  color: inherit;
+}
+
+.is1to1,
+.is1to2,
+.isInSuperBlock {
+  @media $landscapeTablet {
+    letter-spacing: 1px;
+
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
+.is1to3,
+.is1to4 {
+  @media $landscapeTablet {
+    letter-spacing: 0.5px;
+
+    font-size: 10px;
+    line-height: 15px;
+  }
+}
+
+.slide,
+.game  {
+  @media $mobile {
+    width: 100%;
+
+    text-align: center;
+  }
+}
+
+.slide,
+.game,
+.card,
+.live,
+.episode,
+.podcast,
+.rich,
+.isInDynamicBlock {
+  margin-bottom: 6px;
+
+  line-height: 10px;
+
+  @media $mobile {
+    margin-bottom: 10px;
+  }
+}
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/Tag/Tag.stories.module.css

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

package/src/Tag/Tag.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { Tag } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import { TagSizes, TagThemes } from './Tag.types'
+
+import styles from './Tag.stories.module.css'
+
+export default {
+  title: 'Main / Tag',
+  component: Tag,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const tags: { theme: TagThemes; size: TagSizes; title: string }[] = [
+    { theme: 'dark', size: 'small', title: 'Новости' },
+    { theme: 'gold', size: 'small', title: 'Новости' },
+    { theme: 'gray', size: 'small', title: 'Новости' },
+    { theme: 'light', size: 'small', title: 'Новости' },
+    { theme: 'dark', size: 'large', title: 'Новости' },
+    { theme: 'gold', size: 'large', title: 'Новости' },
+    { theme: 'gray', size: 'large', title: 'Новости' },
+    { theme: 'light', size: 'large', title: 'Новости' }
+  ]
+  return (
+    <>
+      <div className={styles.root}>
+        {tags.map(tag => (
+          <div key={`tagSize-${tag.theme}-${tag.size}`}>
+            <Tag size={tag.size} theme={tag.theme} styleContext="rich">
+              {tag.title}
+            </Tag>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Tag/Tag.test.tsx

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

package/src/Tag/Tag.types.ts

@@ -0,0 +1,14 @@
+export type TagSizes = 'small' | 'large'
+
+export type TagThemes = 'dark' | 'gold' | 'gray' | 'light' | 'inherit'
+
+export type TagStyleContexts = 'isInToolbar' | 'isInSpoiler' | 'isInDropdown'
+
+export interface TagProps {
+  children: JSX.Element[] | JSX.Element
+  styleContext?: string | string[]
+  theme: TagThemes
+  size: TagSizes
+  onlyOn?: 'desktop' | 'mobile'
+  correlation?: string
+}

package/src/Tag/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { TagProps } from './Tag.types'
+import makeStyleContext from '../utils/makeStyleContext'
+import makeClassName from '../utils/makeClassName'
+
+import styles from './Tag.module.css'
+
+export const Tag: React.FC<TagProps> = ({
+  children,
+  size = 'small',
+  theme = 'gold',
+  styleContext,
+  correlation,
+  onlyOn
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[size], !!size && !!styles[size]],
+    [styles[theme], !!theme && !!styles[theme]],
+    [styles[onlyOn], !!onlyOn && !!styles[onlyOn]],
+    [styles[correlation], !!correlation && !!styles[correlation]]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="tag" className={makeClassName(classNames)}>
+      {children}
+    </div>
+  )
+}

package/src/Timestamp/Timestamp.module.css

@@ -0,0 +1,6 @@
+@import '../vars.css';
+
+.root {
+  font-family: $secondaryFont;
+  font-weight: normal;
+}

package/src/Timestamp/Timestamp.stories.module.css

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

package/src/Timestamp/Timestamp.stories.tsx

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

package/src/Timestamp/Timestamp.test.tsx

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

package/src/Timestamp/Timestamp.types.ts

@@ -0,0 +1,5 @@
+export interface TimestampProps {
+  publishedAt: number
+  type: 'fromNow' | 'format' | 'date'
+  locale?: string
+}

package/src/Timestamp/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { TimestampProps } from './Timestamp.types'
+
+import dayjs from 'dayjs'
+import 'dayjs/locale/ru'
+
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+import styles from './Timestamp.module.css'
+
+export const Timestamp: React.FC<TimestampProps> = ({
+  publishedAt,
+  locale = 'ru',
+  type
+}) => {
+  let published
+  const timeFormat =
+    locale === 'ru' ? 'HH:mm, D MMMM YYYY' : 'h:mm a, MMMM D, YYYY'
+
+  const preparedPublishedAt = publishedAt * 1000
+
+  dayjs.locale(locale)
+  dayjs.extend(relativeTime)
+
+  if (type === 'fromNow') {
+    published = dayjs(preparedPublishedAt).fromNow()
+  } else if (type === 'format') {
+    published = dayjs(preparedPublishedAt).format('HH:mm')
+  } else if (type === 'date') {
+    published = dayjs(preparedPublishedAt).format(timeFormat)
+  } else {
+    throw new Error('Unknown time type')
+  }
+
+  return (
+    <time data-testid="timestamp" className={styles.root}>
+      {published}
+    </time>
+  )
+}