@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/BookmarkButton/BookmarkButton.test.tsx

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

package/src/BookmarkButton/BookmarkButton.types.ts

@@ -0,0 +1,6 @@
+export interface BookmarkButtonProps {
+  styleContext?: string | string[]
+  theme?: string
+  isInBookmarks: boolean
+  onClick: () => void
+}

package/src/BookmarkButton/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { BookmarkButtonProps } from './BookmarkButton.types'
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import { SvgSymbol } from '../SvgSymbol'
+
+import styles from './BookmarkButton.module.css'
+
+export const BookmarkButton: React.FC<BookmarkButtonProps> = ({
+  styleContext,
+  theme,
+  isInBookmarks,
+  onClick
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles.isInBookmarks, isInBookmarks],
+    [styles[theme], !!theme && !!styles[theme]]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="bookmark-button" className={makeClassName(classNames)}>
+      <button
+        className={styles.control}
+        onClick={(): void => onClick()}
+        type="button"
+      >
+        <SvgSymbol icon="bookmark" size="unset" />
+      </button>
+    </div>
+  )
+}

package/src/Button/Button.stories.module.css

@@ -0,0 +1,30 @@
+.block {
+  max-width: 350px;
+}
+
+.item {
+  margin-bottom: 20px;
+}
+
+.controls {
+  display: flex;
+  flex-flow: row nowrap;
+
+  margin: 0 0 42px -12px;
+  padding: 12px;
+
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+}
+
+.control {
+  width: 260px;
+}
+
+.control + .control {
+  margin-left: 20px;
+}
+
+.rootDark .controls {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}

package/src/Button/Button.stories.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+
+import { Button } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './Button.stories.module.css'
+import { ButtonStates, ButtonThemes } from './Button.types'
+
+export default {
+  title: 'Main / Button',
+  component: Button,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const buttons: { theme: ButtonThemes; title: string }[] = [
+  { theme: 'gold', title: 'Золотая кнопка' },
+  { theme: 'sand', title: 'Песочная кнопка' },
+  { theme: 'red', title: 'Красная кнопка' },
+  { theme: 'dark', title: 'Темная кнопка' },
+  { theme: 'light', title: 'Белая кнопка' },
+  { theme: 'black', title: 'Черная кнопка' },
+  { theme: 'gray', title: 'Серая кнопка' }
+]
+
+const Example: React.FC = () => {
+  const [state, setState] = useState<ButtonStates>('isDefault')
+  const [disabled, setDisabled] = useState(false)
+
+  const handleLoaderClick = () => {
+    setState(state === 'isLoading' ? 'isDefault' : 'isLoading')
+  }
+  const handleDisabledClick = () => {
+    setDisabled(!disabled)
+  }
+
+  return (
+    <>
+      <div className={styles.controls}>
+        <div className={styles.control}>
+          <Button
+            onClick={() => handleLoaderClick()}
+            theme="gray"
+            size="default"
+          >
+            Toggle Loader
+          </Button>
+        </div>
+        <div className={styles.control}>
+          <Button
+            onClick={() => handleDisabledClick()}
+            theme="gray"
+            size="default"
+          >
+            Toggle Disabled
+          </Button>
+        </div>
+      </div>
+
+      <div className={styles.block}>
+        {buttons.map((item, index) => (
+          <div className={styles.item} key={index}>
+            <Button
+              theme={item.theme}
+              state={state}
+              disabled={disabled}
+              size="default"
+            >
+              {item.title}
+            </Button>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Button/Button.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+
+import { Button } from './'
+import styles from './Button.module.css'
+import { ButtonThemes } from './Button.types'
+
+describe('Button', () => {
+  const buttonTypes: { theme: ButtonThemes; title: string }[] = [
+    { theme: 'gold', title: 'Золотая кнопка' },
+    { theme: 'sand', title: 'Песочная кнопка' },
+    { theme: 'red', title: 'Красная кнопка' },
+    { theme: 'dark', title: 'Темная кнопка' },
+    { theme: 'light', title: 'Белая кнопка' },
+    { theme: 'black', title: 'Черная кнопка' },
+    { theme: 'gray', title: 'Серая кнопка' }
+  ]
+
+  test.each(buttonTypes)('Check classes.', button => {
+    const renderComponent = (): RenderResult =>
+      render(<Button theme={button.theme}>{button.title}</Button>)
+
+    const { getByTestId } = renderComponent()
+    const buttonComponent = getByTestId('button')
+
+    expect(buttonComponent).toHaveClass(styles[button.theme])
+    expect(buttonComponent).toContainHTML(button.title)
+  })
+
+  it('check loader', () => {
+    const renderComponent = (): RenderResult =>
+      render(
+        <Button state="isLoading" theme={buttonTypes[0].theme}>
+          {buttonTypes[0].title}
+        </Button>
+      )
+
+    const { getByTestId } = renderComponent()
+    const buttonComponent = getByTestId('button')
+    expect(buttonComponent).toHaveClass(styles['isLoading'])
+  })
+})

package/src/Button/Button.types.ts

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export type ButtonThemes =
   | 'sand'
   | 'gold'
@@ -21,5 +19,5 @@ export interface ButtonProps {
   styleContext?: ButtonStyleContexts
   disabled?: boolean
   onClick?: () => void
-  children: React.ReactNode
+  children: JSX.Element[] | JSX.Element
 }

package/src/Button/index.tsx

@@ -8,13 +8,13 @@ import { ButtonProps } from './Button.types'
 export const Button: FC<ButtonProps> = ({
   theme = 'gold',
   size = 'default',
-  state = 'default',
+  state = 'isDefault',
   styleContext = 'isInToolbar',
   disabled = false,
   onClick,
   children
 }) => {
-  const handleClick = () => {
+  const handleClick = (): void => {
     if (disabled || !onClick) {
       return
     }

package/src/CardTitle/CardTitle.module.css

@@ -0,0 +1,52 @@
+@import '../vars.css';
+
+.root {
+  margin-bottom: 11px;
+
+  @media $landscapeTablet {
+    margin-bottom: 10px;
+
+    text-align: center;
+  }
+}
+
+.index {
+  margin-bottom: 7px;
+
+  color: $gold;
+
+  font-family: $secondaryFont;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.title {
+  color: #1d1d1d;
+
+  font-family: $secondaryFont;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+
+  @media $landscapeTablet {
+    font-size: 28px;
+    line-height: 34px;
+  }
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/CardTitle/CardTitle.stories.module.css

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

package/src/CardTitle/CardTitle.stories.tsx

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

package/src/CardTitle/CardTitle.test.tsx

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

package/src/CardTitle/CardTitle.types.ts

@@ -0,0 +1,8 @@
+export interface CardTitleProps {
+  block: {
+    index: number
+    text: string
+    only_on?: string
+  }
+  styleContext?: string
+}

package/src/CardTitle/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { CardTitleProps } from './CardTitle.types'
+import makeClassName from '../utils/makeClassName'
+
+import styles from './CardTitle.module.css'
+
+export const CardTitle: React.FC<CardTitleProps> = ({
+  block: { only_on: onlyOn, index, text },
+  styleContext
+}) => {
+  return (
+    <div
+      data-testid="card-title"
+      className={makeClassName([
+        [styles.root, true],
+        [styles[onlyOn], !!onlyOn],
+        [styles[styleContext], !!styleContext && !!styles[styleContext]]
+      ])}
+    >
+      <div className={styles.index}>{index}</div>
+      <h3 className={styles.title}>{text}</h3>
+    </div>
+  )
+}

package/src/CardTitle/mock.json

@@ -0,0 +1,8 @@
+{
+  "type": "card_title",
+  "data": {
+    "index": 2,
+    "text": "Крапивница — это такие волдыри?"
+  },
+  "id": "1-0-2a4afa3e61705dbf8cad3a9c8ecd4118de9fef75bde8f96d91f1b78755212ea4"
+}

package/src/ChapterBlock/ChapterBlock.module.css

@@ -0,0 +1,70 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  margin: 38px auto 7px;
+
+  @media $mobile {
+    max-width: 650px;
+    margin-top: 70px;
+  }
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.subtitle {
+  display: inline-block;
+
+  vertical-align: top;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+
+  font-family: $secondaryFont;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 12px;
+
+  @media $mobile {
+    font-size: 13px;
+    line-height: 16px;
+  }
+}
+
+.subtitle::after {
+  display: block;
+
+  width: 120px;
+  padding: 0 0 7px;
+
+  content: '';
+
+  border-bottom: 1px solid #ccc;
+
+  @media $mobile {
+    padding: 0 0 6px;
+  }
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}
+

package/src/ChapterBlock/ChapterBlock.stories.module.css

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

package/src/ChapterBlock/ChapterBlock.stories.tsx

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

package/src/ChapterBlock/ChapterBlock.test.tsx

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

package/src/ChapterBlock/ChapterBlock.types.ts

@@ -0,0 +1,7 @@
+export interface ChapterBlockProps {
+  block: {
+    data: string
+    only_on?: string
+  }
+  styleContext?: string
+}

package/src/ChapterBlock/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { ChapterBlockProps } from './ChapterBlock.types'
+import makeClassName from '../utils/makeClassName'
+
+import DangerousHTML from '../utils/DangerousHtml'
+
+import styles from './ChapterBlock.module.css'
+
+export const ChapterBlock: React.FC<ChapterBlockProps> = ({
+  block,
+  block: { only_on: onlyOn },
+  styleContext
+}) => {
+  return (
+    <div
+      data-testid="chapter-block"
+      className={makeClassName([
+        [styles.root, true],
+        [styles[onlyOn], !!onlyOn]
+      ])}
+    >
+      <DangerousHTML
+        className={makeClassName([
+          [styles.subtitle, true],
+          [styles[styleContext], !!styleContext && !!styles[styleContext]]
+        ])}
+        html={block.data}
+      />
+    </div>
+  )
+}

package/src/ChapterBlock/mock.json

@@ -0,0 +1,5 @@
+{
+  "type": "chapter-subtitle",
+  "data": "Глава первая",
+  "id": "1-42f2cc0c50396bf4d8fdddebdbed2c085404eb97843034641e093a063841f75a"
+}

package/src/Cover/Cover.module.css

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

package/src/Cover/Cover.stories.module.css

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

package/src/Cover/Cover.stories.tsx

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

package/src/Cover/Cover.test.tsx

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

package/src/Cover/Cover.types.ts

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