@meduza/ui-kit-2 0.0.1 → 0.1.0

package/src/Meta/Meta.types.ts

@@ -0,0 +1,19 @@
+import React from 'react'
+export interface MetaContainerProps {
+  block: any
+  styleContext: string[] | string
+  isRead: boolean
+  isListened: boolean
+  isInBookmarks: boolean
+  bookmarkAction?: (service: string, place: string) => void
+  lightBox?: () => void
+  lang: 'ru' | 'en'
+}
+
+export interface MetaProps {
+  onlyOn?: string
+  styleContext?: string[] | string
+  hasSource?: boolean
+  theme?: string
+  children: React.ReactNode
+}

package/src/Meta/MetaContainer.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import { MetaContainerProps } from './Meta.types'
+
+import { Meta } from './'
+import { MetaItem } from '../MetaItem'
+import { MetaItemLive } from '../MetaItemLive'
+import { DocumentItemsCount } from '../DocumentItemsCount'
+
+import { BookmarkButton } from '../BookmarkButton'
+import { Timestamp } from '../Timestamp'
+import { SvgSymbol } from '../SvgSymbol'
+
+import styles from './Meta.module.css'
+
+export const MetaContainer: React.FC<MetaContainerProps> = ({
+  lang,
+  block,
+  isRead,
+  isListened,
+  bookmarkAction,
+  isInBookmarks,
+  block: {
+    data: { components, theme }
+  },
+  styleContext
+}) => {
+  const themeColor =
+    styleContext && styleContext.indexOf('dark') !== -1 ? 'light' : 'unset'
+  const isPodcast = styleContext && styleContext.indexOf('podcast') !== -1
+  const isSlides = styleContext && styleContext.indexOf('slide') !== -1
+
+  const hasSource = !!components.find(item => item.type === 'source_name')
+
+  return (
+    <Meta
+      styleContext={styleContext}
+      theme={theme || themeColor}
+      onlyOn={block.only_on}
+      hasSource={hasSource}
+    >
+      {components.map(component => {
+        switch (component.type) {
+          case 'source_name': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  {lang === 'ru' ? 'Источник: ' : 'Source: '}
+                  {component.url && (
+                    <a
+                      href={component.url}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {component.text}
+                    </a>
+                  )}
+                  {!component.url && component.text}
+                </>
+              </MetaItem>
+            )
+          }
+          case 'duration': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  <SvgSymbol icon="podcast" size="small" />
+                  {component.text}
+                </>
+              </MetaItem>
+            )
+          }
+          case 'datetime': {
+            return (
+              <MetaItem
+                hasSource={hasSource}
+                bullets
+                key={component.id}
+                type="datetime"
+              >
+                <Timestamp
+                  publishedAt={component.datetime}
+                  type="date"
+                  locale={lang}
+                />
+              </MetaItem>
+            )
+          }
+
+          case 'items_count': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <DocumentItemsCount
+                  items={component.count}
+                  type={isPodcast ? 'podcast' : 'card'}
+                  lang={lang}
+                >
+                  <SvgSymbol icon="card" size="unset" />
+                </DocumentItemsCount>
+              </MetaItem>
+            )
+          }
+          case 'broadcast_active': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  <MetaItemLive /> Прямой эфир
+                </>
+              </MetaItem>
+            )
+          }
+          case 'broadcast': {
+            return (
+              <MetaItem hasSource={hasSource} bullets key={component.id}>
+                <>
+                  {component.with_icon && <MetaItemLive />}
+
+                  {component.label}
+                </>
+              </MetaItem>
+            )
+          }
+
+          default: {
+            return null
+          }
+        }
+      })}
+      {(isRead || isListened) && (
+        <MetaItem
+          hasSource={hasSource}
+          bullets
+          type={isListened ? 'listened' : 'read'}
+        >
+          <SvgSymbol icon={isListened ? 'listened' : 'read'} size="unset" />
+        </MetaItem>
+      )}
+
+      {isSlides && lang === 'ru' && (
+        <div className={styles.bookmark}>
+          <BookmarkButton
+            isInBookmarks={isInBookmarks}
+            onClick={(): void => bookmarkAction('bookmark', 'top')}
+          />
+        </div>
+      )}
+    </Meta>
+  )
+}

package/src/Meta/index.tsx

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

package/src/MetaItem/MetaItem.module.css

@@ -0,0 +1,104 @@
+@import '../vars.css';
+
+.root {
+  display: inline;
+
+  margin-right: 15px;
+}
+
+.root > svg {
+  display: inline-block;
+
+  margin-right: 1px;
+
+  vertical-align: top;
+
+  color: inherit;
+
+  fill: currentColor;
+}
+
+.root a {
+  display: inline;
+
+  text-decoration: underline;
+
+  color: inherit;
+
+  -webkit-text-decoration-skip: auto;
+}
+
+.root a:hover {
+  color: $gold;
+}
+
+.hasBullets {
+  margin-right: 0;
+}
+
+.hasBullets:nth-child(n + 2)::before {
+  display: inline-block;
+
+  padding-right: 0.4em;
+  padding-left: 0.4em;
+
+  content: '\B7';
+}
+
+.hasSource {
+  @media $mobileMax {
+    width: 100%;
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+}
+
+.hasSource:first-child {
+  @media $mobileMax {
+    margin-top: 0;
+  }
+}
+
+.hasSource:last-child {
+  margin-bottom: 0;
+}
+
+.hasSource:nth-child(n + 2)::before {
+  @media $mobileMax {
+    display: none;
+  }
+}
+
+.hasSource.listened::before,
+.hasSource.read::before {
+  @media $mobileMax {
+    display: inline-block
+  }
+}
+
+.datetime,
+.listened,
+.read {
+  @media $mobileMax {
+    width: auto;
+  }
+}
+
+.hasSource.datetime:first-child {
+  @media $mobileMax {
+    order: -2;
+  }
+}
+
+.hasSource.listened,
+.hasSource.read {
+  @media $mobileMax {
+    order: -1;
+
+    margin-top: 0;
+  }
+}
+
+.read svg {
+  margin-top: -1px;
+}

package/src/MetaItem/MetaItem.stories.module.css

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

package/src/MetaItem/MetaItem.stories.tsx

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

package/src/MetaItem/MetaItem.test.tsx

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

package/src/MetaItem/MetaItem.types.ts

@@ -0,0 +1,6 @@
+export interface MetaItemProps {
+  bullets?: boolean
+  hasSource?: boolean
+  type?: string
+  children: JSX.Element[] | JSX.Element
+}

package/src/MetaItem/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { MetaItemProps } from './MetaItem.types'
+
+import makeClassName from '../utils/makeClassName'
+
+import styles from './MetaItem.module.css'
+
+export const MetaItem: React.FC<MetaItemProps> = ({
+  hasSource,
+  type,
+  children,
+  bullets
+}) => {
+  const classNames = [
+    [styles.root, true],
+    [styles[type], !!type && !!styles[type]],
+    [styles.hasSource, !!hasSource],
+    [styles.hasBullets, !!bullets]
+  ]
+
+  return (
+    <div data-testid="meta-item" className={makeClassName(classNames)}>
+      {children}
+    </div>
+  )
+}

package/src/MetaItemLive/MetaItemLive.module.css

@@ -0,0 +1,124 @@
+/* stylelint-disable declaration-empty-line-before */
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  display: inline-block;
+
+  width: 18px;
+  height: 18px;
+
+  vertical-align: middle;
+}
+
+.gold {
+  color: $gold;
+}
+
+.root::before,
+.root::after,
+.frame {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+}
+
+.root {
+  margin-top: -4px;
+  margin-right: 1px;
+
+  transform: translateY(1px);
+}
+
+.root::before,
+.root::after,
+.frame {
+
+  border-radius: 50%;
+  transform: scale(0);
+
+  animation-duration: 1.05s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.frame {
+
+  background: currentColor;
+
+  animation-name: liveMiddle;
+}
+
+.root::before,
+.root::after {
+
+  border: 1px solid currentColor;
+
+  content: '';
+}
+
+.root::before {
+  animation-name: liveFirstWave;
+}
+
+.root::after {
+  animation-name: liveSecondWave;
+}
+
+@keyframes liveMiddle {
+  14% {
+    transform: scale(0);
+  }
+
+  30% {
+    transform: scale(0.22);
+  }
+
+  63% {
+    transform: scale(0.22);
+  }
+
+  70% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes liveFirstWave {
+  21% {
+    transform: scale(0.1);
+  }
+
+  53% {
+    transform: scale(0.33);
+  }
+
+  100% {
+    transform: scale(0.66);
+
+    opacity: 0;
+  }
+}
+
+@keyframes liveSecondWave {
+  21% {
+    transform: scale(0.22);
+  }
+
+  53% {
+    transform: scale(0.55);
+  }
+
+  100% {
+    transform: scale(0.88);
+
+    opacity: 0;
+  }
+}

package/src/MetaItemLive/MetaItemLive.stories.module.css

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

package/src/MetaItemLive/MetaItemLive.stories.tsx

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

package/src/MetaItemLive/MetaItemLive.test.tsx

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

package/src/MetaItemLive/MetaItemLive.types.ts

@@ -0,0 +1,3 @@
+export interface MetaItemLiveProps {
+  theme?: 'gold' | 'light' | 'inherit'
+}

package/src/MetaItemLive/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { MetaItemLiveProps } from './MetaItemLive.types'
+
+import makeClassName from '../utils/makeClassName'
+
+import styles from './MetaItemLive.module.css'
+
+export const MetaItemLive: React.FC<MetaItemLiveProps> = ({
+  theme = 'gold'
+}) => {
+  const classNames = [
+    [styles.root, true],
+    [styles[theme], !!theme && styles[theme]]
+  ]
+
+  return (
+    <div
+      data-testid="meta-item-live"
+      data-meta="live"
+      className={makeClassName(classNames)}
+    >
+      <div className={styles.frame} />
+    </div>
+  )
+}