@meduza/ui-kit-2 0.1.19 → 0.1.21

package/src/SimpleBlock/mock.json

@@ -1,5 +1,11 @@
 {
   "blocks": [
+    {
+      "type": "p",
+      "data": "Hello Component",
+      "length": 0,
+      "id": "1-a3d239200edd759999e5493fd4a6311710f16774927df9907ffbabf57a915a901f"
+    },
     {
       "type": "lead",
       "data": "В России качество медицинской помощи даже в одной больнице может значительно отличаться. Это прямое следствие того, что обучение врачей и проверку их знаний и навыков нельзя назвать хорошими. При этом у самих медицинских специалистов даже нет возможности понять, что с ними что-то не так: им дают дипломы, им разрешают работать. И если студент, ординатор или состоявшийся врач захотят получить хорошее образование (и будут понимать, что это значит), у них, скорее всего, возникнут проблемы, потому что в государственном секторе таких возможностей может не быть вообще либо они окажутся труднодоступны. В последнее время все чаще публично выступают люди, которые недовольны таким положением вещей. Они не только говорят о недостатках образования, которые видят, но и пытаются хотя бы локально что-то изменить. «Медуза» решила рассказать о некоторых студентах, врачах и благотворителях, которые меняют то, что им не нравится в вузах, ординатуре и в целом образовании врачей (и заодно объясняем, что не устраивает этих людей).",

package/src/SimpleTitle/SimpleTitle.test.tsx

@@ -5,10 +5,11 @@ import { SimpleTitleProps } from './SimpleTitle.types'
 
 import styles from './SimpleTitle.module.css'
 
-describe('Simple Title', () => {
-  let props: SimpleTitleProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<SimpleTitle {...props} />)
+describe('Simple Title', () => {
+  const renderComponent = () =>
+    render(<SimpleTitle block={mock as SimpleTitleProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/SimpleTitle/SimpleTitle.types.ts

@@ -1,4 +1,9 @@
 export interface SimpleTitleProps {
-  block: any
+  block: {
+    data: {
+      first: string
+    }
+    only_on?: string
+  }
   styleContext?: string[] | string
 }

package/src/SourceBlock/SourceBlock.test.tsx

@@ -5,10 +5,11 @@ import { SourceBlockProps } from './SourceBlock.types'
 
 import styles from './SourceBlock.module.css'
 
-describe('Source Block', () => {
-  let props: SourceBlockProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<SourceBlock {...props} />)
+describe('Source Block', () => {
+  const renderComponent = () =>
+    render(<SourceBlock block={mock as SourceBlockProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/SourceBlock/SourceBlock.types.ts

@@ -1,4 +1,16 @@
 export interface SourceBlockProps {
-  block: any
+  block: {
+    only_on?: string
+    data: {
+      quote: {
+        type: string
+        data: string
+        length: number
+      }[]
+
+      origin: string
+      url: string
+    }
+  }
   styleContext?: string[] | string
 }

package/src/Spoiler/Spoiler.test.tsx

@@ -5,10 +5,11 @@ import { SpoilerProps } from './Spoiler.types'
 
 import styles from './Spoiler.module.css'
 
-describe('Spoiler', () => {
-  let props: SpoilerProps
+import mock from './mock.json'
 
-  const renderComponent = () => render(<Spoiler {...props} />)
+describe('Spoiler', () => {
+  const renderComponent = () =>
+    render(<Spoiler block={mock as SpoilerProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Table/Table.test.tsx

@@ -4,11 +4,11 @@ import { Table } from './'
 import { TableProps } from './Table.types'
 
 import styles from './Table.module.css'
+import mock from './mock.json'
 
 describe('Table', () => {
-  let props: TableProps
-
-  const renderComponent = () => render(<Table {...props} />)
+  const renderComponent = () =>
+    render(<Table block={mock as TableProps['block']} />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Timestamp/Timestamp.test.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { Timestamp } from './'
-import { TimestampProps } from './Timestamp.types'
+// import { TimestampProps } from './Timestamp.types'
 
 import styles from './Timestamp.module.css'
 
 describe('Timestamp', () => {
-  let props: TimestampProps
+  // let props: TimestampProps
 
-  const renderComponent = () => render(<Timestamp {...props} />)
+  const renderComponent = () =>
+    render(<Timestamp publishedAt={1526024185} type="fromNow" />)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/ToolbarButton/ToolbarButton.test.tsx

@@ -1,14 +1,19 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { ToolbarButton } from './'
-import { ToolbarButtonProps } from './ToolbarButton.types'
+// import { ToolbarButtonProps } from './ToolbarButton.types'
 
 import styles from './ToolbarButton.module.css'
 
 describe('Toolbar Button', () => {
-  let props: ToolbarButtonProps
+  // let props: ToolbarButtonProps
 
-  const renderComponent = () => render(<ToolbarButton {...props} />)
+  const renderComponent = () =>
+    render(
+      <ToolbarButton type="fb" onClick={(): void => alert('Hello Button')}>
+        42
+      </ToolbarButton>
+    )
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/_storybook/PreviewWrapper/PreviewWrapper.module.css

@@ -78,7 +78,9 @@
 }
 
 .wrapper {
-  padding: 40px;
+  @media (min-width: 1000px) {
+    padding: 40px;
+  }
 }
 
 .wrapper.light {

package/src/index.tsx

@@ -37,4 +37,5 @@ export * from './MetaItemLive'
 export * from './DocumentItemsCount'
 export * from './ToolbarButton'
 export * from './Footnote'
+export * from './RelatedRichBlock'
 // /* PLOP_INJECT_LINK */ //

package/src/types.ts

@@ -0,0 +1,6 @@
+export interface OptimizedImageItem {
+  '1x': string
+  '2x': string
+  '1x_webp': string
+  '2x_webp': string
+}

package/src/utils/{toCamel.ts → converCase.ts}

@@ -1,2 +1,5 @@
 export const toCamel = (s: string): string =>
   s.replace(/([_][a-z])/gi, (str) => str.toUpperCase().replace('_', ''))
+
+export const toCapitalize = (s: string): string =>
+  s[0].toUpperCase() + s.slice(1)

package/src/utils/generateGradient.ts

@@ -1,19 +1,25 @@
-const generateGradient = (color: string): string => {
-  const gradientSteps = [
-    [0, 7],
-    [0.08, 12],
-    [0.16, 17],
-    [0.22, 21],
-    [0.32, 26],
-    [0.42, 32],
-    [0.52, 38],
-    [0.62, 47],
-    [0.72, 57],
-    [0.82, 65],
-    [1, 82]
-  ]
+const generateGradient = (color: string, type: string): string => {
+  const steps = {
+    mediaBlockBottom: [
+      [0, 7],
+      [0.08, 12],
+      [0.16, 17],
+      [0.22, 21],
+      [0.32, 26],
+      [0.42, 32],
+      [0.52, 38],
+      [0.62, 47],
+      [0.72, 57],
+      [0.82, 65],
+      [1, 82]
+    ],
+    mediaBlockTop: [
+      [0.5, 0],
+      [0, 97]
+    ]
+  }
 
-  const gradient = gradientSteps.map((i) => `rgba(${color}, ${i[0]}) ${i[1]}%`)
+  const gradient = steps[type].map((i) => `rgba(${color}, ${i[0]}) ${i[1]}%`)
 
   return `linear-gradient(-180deg, ${gradient})`
 }

package/dist/utils/toCamel.d.ts

@@ -1 +0,0 @@
-export declare const toCamel: (s: string) => string;