@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/ImportantLead/ImportantLead.module.css

@@ -0,0 +1,64 @@
+@import '../vars.css';
+
+.root {
+  margin: 18px 0;
+  padding: 12px 12px 13px;
+
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  border-radius: 8px;
+  background: #FFF8C4;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 20px;
+
+  @media $mobile {
+    margin: 25px 0;
+    padding: 12px 15px 13px;
+
+    font-size: 17px;
+    line-height: 24px;
+  }
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root a {
+  color: #000;
+  box-shadow: inset 0 -1px #000;
+}
+
+.root a:hover {
+  color: $gold;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.slide {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* VISIBILITY */
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}
+

package/src/ImportantLead/ImportantLead.stories.module.css

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

package/src/ImportantLead/ImportantLead.stories.tsx

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

package/src/ImportantLead/ImportantLead.test.tsx

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

package/src/ImportantLead/ImportantLead.types.ts

@@ -0,0 +1,4 @@
+export interface ImportantLeadProps {
+  block: any
+  styleContext: string[] | string
+}

package/src/ImportantLead/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ImportantLeadProps } from './ImportantLead.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import { RenderBlocks } from '../RenderBlocks'
+
+import styles from './ImportantLead.module.css'
+
+export const ImportantLead: React.FC<ImportantLeadProps> = ({
+  block: { only_on: onlyOn, data },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], !!onlyOn]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="important-lead" className={makeClassName(classNames)}>
+      {data.map(item => (
+        <RenderBlocks
+          key={item.id}
+          block={item}
+          styleContext="isInImportantLead"
+        />
+      ))}
+    </div>
+  )
+}

package/src/Lazy/Lazy.module.css

@@ -0,0 +1,9 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}
+
+.visible {
+  color: red;
+}

package/src/Lazy/Lazy.stories.module.css

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

package/src/Lazy/Lazy.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { Lazy } from './'
+import { Image } from '../Image'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import mock from '../Image/mock.json'
+import styles from './Lazy.stories.module.css'
+
+export default {
+  title: 'Main / Lazy',
+  component: Lazy,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const {
+    image: { data }
+  } = mock
+  return (
+    <>
+      <div className={styles.root}>
+        <Lazy>
+          <Image
+            optimized={data.optimized}
+            width={data.width}
+            height={data.height}
+            alt={data.credit}
+            display={data.display}
+            lazy={data.lazy}
+          />
+        </Lazy>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Lazy/Lazy.test.tsx

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

package/src/Lazy/Lazy.types.ts

@@ -0,0 +1,4 @@
+export interface LazyProps {
+  children: JSX.Element[] | JSX.Element
+  threshold?: number
+}

package/src/Lazy/index.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import makeClassName from '../utils/makeClassName'
+
+import styles from './Lazy.module.css'
+
+import { LazyProps } from './Lazy.types'
+
+export const Lazy: React.FC<LazyProps> = ({ children, threshold }) => {
+  const [ref, inView, entry] = useInView({
+    threshold: threshold || 0
+  })
+
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (entry && entry.boundingClientRect && entry.boundingClientRect.y < 0) {
+      setVisible(true)
+    }
+  }, [entry])
+
+  useEffect(() => {
+    if (inView) {
+      setVisible(true)
+    }
+  }, [inView])
+
+  return (
+    <div
+      className={makeClassName([
+        [styles.root, true],
+        [styles.visible, visible]
+      ])}
+      ref={ref}
+      data-testid="lazy"
+    >
+      {visible && children}
+    </div>
+  )
+}

package/src/ListBlock/ListBlock.module.css

@@ -0,0 +1,163 @@
+@import '../vars.css';
+
+.root {
+  margin: 15px 0;
+  padding: 0;
+
+  list-style: none;
+
+  font-family: $primaryFont;
+  font-size: 18px;
+  line-height: 24px;
+
+  @media $mobile {
+    font-size: 20px;
+    line-height: 28px;
+  }
+
+  @media $portraitTablet {
+    margin: 20px 0;
+  }
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root a {
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.root a:hover {
+  color: $gold;
+}
+
+.root li {
+  position: relative;
+
+  margin-bottom: 6px;
+}
+
+.root mark {
+  position: relative;
+
+  white-space: pre-wrap;
+
+  background-color: $highlighter;
+
+  font-weight: inherit;
+  font-style: inherit;
+
+  @media $mobile {
+    padding-bottom: 1px;
+  }
+}
+
+.root a mark {
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.ol {
+  counter-reset: list 0;
+}
+
+.ol li {
+  padding: 0 0 0 33px;
+}
+
+.ol li::before {
+  position: absolute;
+  left: 0;
+
+  width: 23px;
+
+  content: counter(list) '. ';
+  counter-increment: list;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.ul li {
+  padding: 0 0 0 23px;
+
+  @media $portraitTablet {
+    padding: 0 0 0 38px;
+  }
+}
+
+.ul li:last-child {
+  margin-bottom: 0;
+}
+
+.ul li::before {
+  position: absolute;
+  top: 0;
+  left: 5px;
+
+  width: 8px;
+
+  content: '\2022';
+  text-align: center;
+
+  color: $gold;
+
+  font-size: 18px;
+  line-height: inherit;
+
+  @media $portraitTablet {
+    left: 0;
+
+    width: 36px;
+
+    text-align: center;
+
+    font-size: 20px;
+  }
+}
+
+.center {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.isInImportantLead {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 20px;
+
+  @media $portraitTablet {
+    font-size: 17px;
+    line-height: 24px;
+  }
+}
+
+.dark a {
+  color: inherit;
+}
+
+.dark a:hover {
+  color: $gold;
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/ListBlock/ListBlock.stories.module.css

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

package/src/ListBlock/ListBlock.stories.tsx

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

package/src/ListBlock/ListBlock.test.tsx

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

package/src/ListBlock/ListBlock.types.ts

@@ -0,0 +1,4 @@
+export interface ListBlockProps {
+  block: any,
+  styleContext: string[] | string
+}

package/src/ListBlock/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { ListBlockProps } from './ListBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+import DangerousHTML from '../utils/DangerousHtml'
+
+import styles from './ListBlock.module.css'
+
+export const ListBlock: React.FC<ListBlockProps> = ({
+  block: { type, data, only_on: onlyOn },
+  styleContext
+}) => {
+  const TagName = type
+
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true],
+    [styles[type], !!type && !!styles[type]]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <TagName className={makeClassName(classNames)}>
+      {data.map((item, index) => (
+        <DangerousHTML key={index} html={item} tagName="li" />
+      ))}
+    </TagName>
+  )
+}

package/src/MaterialNote/MaterialNote.module.css

@@ -0,0 +1,139 @@
+@import '../vars.css';
+
+.root {
+  margin-bottom: 17px;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.root:empty {
+  margin-bottom: 0;
+}
+
+.root:empty::before {
+  margin-bottom: 9px;
+}
+
+.root::before {
+  display: block;
+
+  width: 120px;
+  height: 1px;
+  margin-bottom: 15px;
+
+  content: '';
+
+  background: #000;
+}
+
+.root p {
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+.root a {
+  text-decoration: none;
+
+  color: inherit;
+  box-shadow: inset 0 -1px;
+}
+
+.root a:hover {
+  color: $gold;
+}
+
+.dark::before {
+  background-color: #4f4f4f;
+}
+
+.note_credit {
+  color: #666;
+
+  font-size: 12px;
+  line-height: 15px;
+}
+
+.root .note_credit {
+  margin-top: 6px;
+}
+
+.note_credit:only-child {
+  margin-top: 0;
+}
+
+.note_caption b {
+  font-weight: bold;
+}
+
+.center {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.center,
+.default {
+  margin-top: 25px;
+
+  @media $mobile {
+    margin-top: 35px;
+  }
+}
+
+.card:empty,
+.slide:empty,
+.game:empty {
+  display: none;
+}
+
+.slide::before,
+.card::before,
+.game::before {
+  content: none;
+}
+
+.gameSurvey,
+.gameSurvey:empty {
+  display: block;
+}
+
+.gameSurvey::before {
+  margin-right: auto;
+  margin-left: auto;
+
+  content: '';
+}
+
+.slide .note_caption,
+.card .note_caption,
+.game .note_caption {
+  margin-top: 0;
+}
+
+.game {
+  margin-bottom: 0;
+
+  text-align: center;
+
+  @media $mobile {
+    margin-top: 25px;
+  }
+}
+
+.game.dark .note_credit {
+  @media $mobileMax {
+    color: #fff;
+  }
+}
+
+.slide,
+.card {
+  margin-bottom: 9px;
+  padding-top: 8px;
+
+  @media $mobile {
+    margin-bottom: 16px;
+  }
+}