@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/SvgSymbol/SvgSymbol.module.css

@@ -0,0 +1,240 @@
+@import '../vars.css';
+
+.root {
+  width: 100%;
+  height: 100%;
+
+  vertical-align: middle;
+}
+
+.small {
+  height: 14px;
+}
+
+.normal {
+  height: 14px;
+}
+
+.medium {
+  width: 24px;
+  height: 24px;
+}
+
+.large {
+  width: 42px;
+  height: 42px;
+}
+
+.adaptive {
+  width: 100%;
+  height: 100%;
+}
+
+.fb {
+  width: 16px;
+
+  fill: $fbColor;
+}
+
+.vk {
+  width: 20px;
+
+  fill: $vkColor;
+}
+
+.ok {
+  width: 9px;
+
+  fill: $okColor;
+}
+
+.tw {
+  width: 20px;
+
+  fill: $twColor;
+}
+
+.tg {
+  width: 18px;
+
+  fill: $tgColor;
+}
+
+.reaction {
+  width: 16px;
+
+  color: $gold;
+
+  fill: #262626;
+}
+
+.card,
+.podcast,
+.read,
+.listened {
+  width: 15px;
+  height: 15px;
+}
+
+.menu {
+  width: 24px;
+  height: 24px;
+}
+
+.cross {
+  width: 14px;
+  height: 14px;
+}
+
+.isInFeature,
+.isInCard {
+  width: 16px;
+  height: 16px;
+}
+
+.isInTopicBlockItem {
+  width: 16px;
+  height: 16px;
+}
+
+.isInPageStatic {
+  width: 64px;
+  height: 64px;
+}
+
+.isInMaterialMeta {
+  margin-right: 6px;
+}
+
+.isInAudioPlayer {
+  width: 29px;
+  height: 29px;
+
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+}
+
+.isInEpisodeBlock {
+  width: 38px;
+  height: 38px;
+
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+}
+
+.isInButtonPlaybackRate {
+  width: 34px;
+  height: 28px;
+
+  @media $contentWidth {
+    width: 28px;
+    height: 22px;
+  }
+}
+
+.isInButtonBackward,
+.isInButtonForward {
+  width: 28px;
+  height: 28px;
+
+  @media $contentWidth {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+.isInToolbar.cross {
+  width: 18px;
+  height: 18px;
+}
+
+.play {
+  width: 100%;
+  height: 100%;
+}
+
+.meduzaLogo {
+  width: 92px;
+  height: 20px;
+
+  @media $landscapeTablet {
+    width: 100px;
+    height: 45px;
+  }
+}
+
+.arrow {
+  width: 12px;
+  height: 12px;
+}
+
+.oil {
+  width: 9px;
+  height: 12px;
+}
+
+.search {
+  width: 24px;
+  height: 24px;
+
+  @media $landscapeTablet {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.user {
+  width: 14px;
+  height: 14px;
+
+  @media $landscapeTablet {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.bookmark {
+  width: 17px;
+  height: auto;
+
+  cursor: pointer;
+
+  stroke-width: 2px;
+
+  @media $landscapeTablet {
+    width: 14px;
+
+    stroke-width: 1.5px;
+  }
+}
+
+.isInToolbar.bookmark {
+  width: 14px;
+}
+
+.receipt {
+  width: 10px;
+  height: 13px;
+}
+
+.isInHeader.cross {
+  width: 22px;
+  height: 22px;
+
+  @media $landscapeTablet {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.isInHeader.search circle {
+  @media $landscapeTablet {
+    stroke-width: 1.5px;
+  }
+}
+
+.isInHeader.cross path {
+  stroke-width: 1.8px;
+
+  @media $landscapeTablet {
+    stroke-width: 1.3px;
+  }
+}

package/src/SvgSymbol/SvgSymbol.stories.module.css

@@ -0,0 +1,127 @@
+@font-face {
+  font-family: 'PF Regal';
+  font-style: normal;
+
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-RegularB.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'PF Regal';
+  font-style: italic;
+
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-RegularBItalic.woff') format('woff');
+}
+
+@font-face {
+  font-weight: bold;
+  font-family: 'PF Regal';
+
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-Bold.woff') format('woff');
+}
+
+@font-face {
+  font-weight: bold;
+  font-family: 'PF Regal';
+  font-style: italic;
+
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-BoldItalic.woff') format('woff');
+}
+
+@font-face {
+  font-weight: 400;
+  font-family: 'Proxima Nova';
+  font-style: normal;
+
+  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Regular.woff2') format('woff2'),
+    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-weight: 600;
+  font-family: 'Proxima Nova';
+  font-style: normal;
+
+  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Semibold.woff2') format('woff2'),
+    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Semibold.woff') format('woff');
+}
+
+@font-face {
+  font-weight: 700;
+  font-family: 'Proxima Nova';
+  font-style: normal;
+
+  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Bold.woff2') format('woff2'),
+    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Bold.woff') format('woff');
+}
+
+* { box-sizing: border-box; }
+
+.row {
+  display: flex;
+  flex-flow: row wrap;
+
+  padding: 15px;
+}
+
+.panel {
+  padding: 15px;
+}
+
+
+.root h2 {
+  margin-bottom: 0;
+  padding: 0 12px;
+
+  font-family: sans-serif;
+}
+
+.row[data-theme='dark'] {
+  color: #fff;
+
+  background: #262626;
+  border-radius: 10px;
+}
+
+.row[data-type='buttons'] .item {
+  min-width: 40%;
+}
+
+.item {
+  margin-right: 15px;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 45px;
+  height: 45px;
+  padding: 4px;
+
+  vertical-align: top;
+
+  background: #f1f1f1;
+
+  border: 1px solid #fff;
+}
+
+.row[data-type='MediaBlock'] {
+  color: #808080;
+}
+
+.row[data-type='MediaBlock'] svg {
+  color: #b88b58;
+
+  fill: #b88b58;
+}
+
+.row[data-type='MediaMaterial'] {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.row[data-type='MediaMaterial'] svg {
+  color: rgba(255, 255, 255, 0.7);
+
+  fill: rgba(255, 255, 255, 0.7);
+}

package/src/SvgSymbol/SvgSymbol.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+
+import { SvgSymbol } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './SvgSymbol.stories.module.css'
+import { Icons } from 'SvgSymbol/SvgSymbol.types'
+
+export default {
+  title: 'Main / SvgSymbol',
+  component: SvgSymbol,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const social: Icons[] = ['fb', 'tw', 'vk', 'ok', 'tg', 'reaction']
+
+const podcast: Icons[] = [
+  'backward',
+  'forward',
+  'download',
+  'play',
+  'pause',
+  'speedHalf',
+  'speedOne',
+  'speedOneHalf',
+  'speedTwo'
+]
+
+const meta: Icons[] = ['card', 'podcast', 'read', 'listened']
+
+const other: Icons[] = [
+  'meduzaLogo',
+  'meduzaSymbol',
+  'menu',
+  'search',
+  'cross',
+  'link',
+  'user',
+  'bookmark',
+  'receipt'
+]
+
+const Example: React.FC = () => {
+  return (
+    <div className={styles.root}>
+      <h2>Кнопки соц. сетей и реакций</h2>
+      <div className={styles.row}>
+        {social.map(icon => (
+          <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
+            <SvgSymbol icon={icon} size="medium" />
+          </span>
+        ))}
+      </div>
+
+      <h2>Мета</h2>
+      <div className={styles.row}>
+        {meta.map(icon => (
+          <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
+            <SvgSymbol icon={icon} size="medium" />
+          </span>
+        ))}
+      </div>
+
+      <h2>Плеер</h2>
+      <div className={styles.row}>
+        {podcast.map(icon => (
+          <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
+            <SvgSymbol icon={icon} size="medium" />
+          </span>
+        ))}
+      </div>
+
+      <h2>Другие</h2>
+      <div className={styles.row}>
+        {other.map(icon => (
+          <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
+            <SvgSymbol icon={icon} size="medium" />
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/SvgSymbol/SvgSymbol.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+
+import { SvgSymbol } from './'
+import { SvgSymbolProps } from './SvgSymbol.types'
+import styles from './SvgSymbol.module.css'
+
+describe('Svg Symbol', () => {
+  let props: SvgSymbolProps
+
+  const renderComponent = (): RenderResult =>
+    render(<SvgSymbol icon="meduzaLogo" {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const svgSymbol = getByTestId('svg-symbol')
+
+    expect(svgSymbol).toHaveClass(styles.root)
+  })
+})

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -0,0 +1,57 @@
+export type SvgSymbolStyleContexts =
+  | 'isInFeature'
+  | 'isInCard'
+  | 'isInTopicBlockItem'
+  | 'isInPageStatic'
+  | 'isInMaterialMeta'
+  | 'isInToolbar'
+  | 'isInEpisodeBlock'
+  | 'isInAudioPlayer'
+  | 'isInAudioPanel'
+  | 'isInPlaylist'
+  | 'PodcastMaterial'
+  | 'isInHeader'
+  | 'isInProfile'
+  | 'isInBookmark'
+
+export type Icons =
+  | 'meduzaLogo'
+  | 'meduzaSymbol'
+  | 'menu'
+  | 'fb'
+  | 'tw'
+  | 'vk'
+  | 'ok'
+  | 'tg'
+  | 'chat'
+  | 'backward'
+  | 'forward'
+  | 'download'
+  | 'play'
+  | 'pause'
+  | 'speedHalf'
+  | 'speedOne'
+  | 'speedOneHalf'
+  | 'speedTwo'
+  | 'podcastBookmark'
+  | 'reaction'
+  | 'cross'
+  | 'link'
+  | 'search'
+  | 'card'
+  | 'podcast'
+  | 'arrow'
+  | 'brent'
+  | 'user'
+  | 'bookmark'
+  | 'receipt'
+  | 'read'
+  | 'listened'
+
+export type Sizes = 'small' | 'normal' | 'medium' | 'large' | 'unset'
+
+export interface SvgSymbolProps {
+  styleContext?: SvgSymbolStyleContexts
+  size?: Sizes
+  icon: Icons
+}