@meduza/ui-kit-2 0.8.628 → 0.8.690

package/src/ListViewSwitcher/ListViewSwitcher.stories.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { ListViewSwitcher } from '.'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './ListViewSwitcher.stories.module.css'
+
+export default {
+  title: 'Main / ListViewSwitcher',
+  component: ListViewSwitcher,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const [enabledOne, setEnabledOne] = useState(false)
+  const [enabledTwo, setEnabledTwo] = useState(false)
+  return (
+    <div className={styles.root}>
+      <ListViewSwitcher
+        enabled={enabledOne}
+        size="sm"
+        onChange={(e) => setEnabledOne(e.target.checked)}
+      />
+      <ListViewSwitcher
+        enabled={enabledTwo}
+        size="md"
+        onChange={(e) => setEnabledTwo(e.target.checked)}
+      />
+    </div>
+  )
+}
+
+export const Default: React.FC = () => (
+  <PreviewWrapper theme="dark">
+    <Example />
+  </PreviewWrapper>
+)

package/src/ListViewSwitcher/ListViewSwitcher.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, fireEvent, RenderResult } from '@testing-library/react'
+import { ListViewSwitcher } from '.'
+import { ListViewSwitcherProps } from './ListViewSwitcher.types'
+
+import styles from './Switcher.module.css'
+
+describe('ListViewSwitcher', () => {
+  let props: ListViewSwitcherProps
+
+  const renderComponent = (): RenderResult =>
+    render(<ListViewSwitcher {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const switcher = getByTestId('listViewSwitcher')
+
+    expect(switcher).toHaveClass(styles.root)
+  })
+
+  it('should check on click', () => {
+    let checked = false
+    const onChange = (e): void => (checked = e.target.checked)
+    const renderComponent = (): RenderResult =>
+      render(<ListViewSwitcher onChange={onChange} {...props} />)
+    const { getByTestId } = renderComponent()
+
+    const switcher = getByTestId('listViewSwitcher')
+
+    fireEvent.click(switcher)
+
+    expect(checked).toBe(true)
+  })
+})

package/src/ListViewSwitcher/ListViewSwitcher.types.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface ListViewSwitcherProps {
+  enabled: boolean
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  size?: 'sm' | 'md'
+}

package/src/ListViewSwitcher/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { ListViewSwitcherProps } from './ListViewSwitcher.types'
+import styles from './ListViewSwitcher.module.css'
+import makeClassName from '../utils/makeClassName'
+
+export const ListViewSwitcher: React.FC<ListViewSwitcherProps> = ({
+  enabled,
+  onChange,
+  size = 'md'
+}) => (
+  <label
+    data-testid="listViewSwitcher"
+    className={makeClassName([
+      [styles.root, true],
+      [styles[size], true]
+    ])}
+  >
+    <input
+      className={styles.input}
+      type="checkbox"
+      checked={enabled}
+      onChange={onChange}
+    />
+
+    <span className={styles.knob} />
+
+    <span className={styles.grid} />
+    <span className={styles.list} />
+  </label>
+)

package/src/Meta/Meta.module.css

@@ -1,19 +1,3 @@
-/* .containerInDynamicBlock {
-  position: absolute;
-  bottom: 20px;
-  left: 57px;
-  width: auto;
-} */
-
-/* .containerInDynamicBlockAndMaterial {
-  left: 65px;
-
-  @media $landscapeTablet {
-    left: auto;
-    bottom: 35px;
-  }
-} */
-
 .root {
   font-size: 12px;
 

package/src/Meta/Meta.types.ts

@@ -10,7 +10,6 @@ export interface MetaContainerProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: () => void
   lang: 'ru' | 'en'
-  type?: any
 }
 
 export interface MetaProps {

package/src/Meta/MetaContainer.tsx

@@ -9,7 +9,6 @@ import { DocumentItemsCount } from '../DocumentItemsCount'
 import { BookmarkButton } from '../BookmarkButton'
 import { Timestamp } from '../Timestamp'
 import { SvgSymbol } from '../SvgSymbol'
-// import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import { TimestampProps } from '../Timestamp/Timestamp.types'
 
@@ -26,7 +25,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
     data: { components, theme }
   },
   styleContext
-  // type
 }) => {
   const themeColor =
     styleContext && styleContext.indexOf('dark') !== -1 ? 'light' : 'unset'
@@ -43,19 +41,7 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
 
   const hasSource = !!components.find((item) => item.type === 'source_name')
 
-  // const classNames: ClassNames = [
-  //   [
-  //     styles.containerInDynamicBlock,
-  //     styleContext === 'isInDynamicBlock' || styleContext.includes('episode')
-  //   ],
-  //   [
-  //     styles.containerInDynamicBlockAndMaterial,
-  //     styleContext === 'isInDynamicBlock' && type === 'isInMaterial'
-  //   ]
-  // ]
-
   return (
-    // <div className={makeClassName(classNames)}>
     <Meta
       styleContext={context}
       theme={theme || themeColor}
@@ -84,13 +70,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             )
           }
           case 'duration': {
-            // if (styleContext === 'isInDynamicBlock') {
-            //   return (
-            //     <MetaItem hasSource={hasSource} bullets key={component.id}>
-            //       {component.text}
-            //     </MetaItem>
-            //   )
-            // }
             return (
               <MetaItem hasSource={hasSource} bullets key={component.id}>
                 <>
@@ -115,11 +94,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
               >
                 <Timestamp
                   publishedAt={component.datetime}
-                  // type={
-                  //   styleContext === 'isInDynamicBlock'
-                  //     ? 'fromNow'
-                  //     : format || 'date'
-                  // }
                   type={format || 'date'}
                   locale={lang}
                 />
@@ -192,6 +166,5 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
         </div>
       )}
     </Meta>
-    // </div>
   )
 }

package/src/RawHtmlBlock/RawHtmlBlock.types.ts

@@ -17,5 +17,4 @@ export interface RawHtmlBlockProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
-  type?: any
 }

package/src/RawHtmlBlock/index.tsx

@@ -18,8 +18,7 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
   isInBookmarks,
   bookmarkAction,
   lightBox,
-  lang,
-  type = 'default'
+  lang
 }) => {
   const context = {
     lightBox: lightBox || null
@@ -69,7 +68,6 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
             isInBookmarks={isInBookmarks}
             bookmarkAction={bookmarkAction}
             lang={lang}
-            type={type}
           />
         </BlockProvider>
       )

package/src/RenderBlocks/RenderBlocks.types.ts

@@ -10,5 +10,4 @@ export interface RenderBlocksProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
-  type?: any
 }

package/src/RenderBlocks/index.tsx

@@ -27,8 +27,7 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   isRead,
   isListened,
   bookmarkAction,
-  isInBookmarks,
-  type = 'default'
+  isInBookmarks
 }) => {
   switch (block.type) {
     case 'tag': {
@@ -62,7 +61,6 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
           isListened={isListened}
           isInBookmarks={isInBookmarks}
           bookmarkAction={bookmarkAction}
-          type={type}
         />
       )
     }

package/src/Spoiler/Spoiler.module.css

@@ -61,17 +61,16 @@
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-weight: 700;
-  font-size: 21px;
-
   font-family: $secondaryFont;
-  line-height: 26px;
+  font-size: calc(17rem / 16);
+  font-weight: 700;
+  line-height: calc(21rem / 16);
 
   @media $mobile {
     margin-bottom: 20px;
 
-    font-size: 28px;
-    line-height: 34px;
+    font-size: 21px;
+    line-height: 28px;
   }
 }
 
@@ -120,9 +119,11 @@
   margin-left: -20px;
   padding: 12px 20px 20px;
 
-  background-image: linear-gradient(180deg,
-  rgba(255, 255, 255, 0) 0%,
-  #fff 64%);
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    #fff 64%
+  );
 
   animation: spoilerSticky 500ms ease both;
 

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -20,8 +20,6 @@ export type Icons =
   | 'menu'
   | 'fb'
   | 'tw'
-  | 'vk'
-  | 'ok'
   | 'tg'
   | 'chat'
   | 'magic'

package/src/Switcher/Switcher.module.css

@@ -13,6 +13,8 @@
   cursor: pointer;
 
   user-select: none;
+
+  gap: 6px;
 }
 
 .dark {
@@ -93,31 +95,13 @@
   left: 18px;
 }
 
-.children.left {
-  margin-right: 6px;
-}
-
-.children.right {
-  margin-left: 6px;
-}
-
-/* panel */
-.isInPanel .children {
-
-  color: #999;
-
-  font-size: 13px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-}
-
 /* menu */
 .isInMenu {
   font-weight: normal;
 }
 
-.isInMenu .children {
-  margin-right: 8px;
+.isInMenu {
+  gap: 8px;
 }
 
 .isInMenu .control {
@@ -143,7 +127,6 @@
 
 /* live */
 .isInLive .children {
-
   color: #7f7f7f;
 
   font-size: 13px;

package/src/Switcher/Switcher.stories.module.css

@@ -1,26 +1,8 @@
 .root {
-  display: block;
-}
-
-.preview {
-  display: inline-block;
-  width: 100%;
-  padding: 16px;
-
-  border: 1px #e8e8e8 solid;
-  border-radius: 3px;
-}
-
-.row {
   display: flex;
-  flex-flow: row wrap;
-
-  padding: 15px;
-}
+  flex-flow: column wrap;
 
-.row[data-theme='dark'] {
-  color: #fff;
+  font-size: 16px;
 
-  background: #262626;
-  border-radius: 10px;
+  gap: 24px;
 }

package/src/Switcher/Switcher.stories.tsx

@@ -14,43 +14,24 @@ export default {
 
 const Example: React.FC = () => {
   const [enabledOne, setEnabledOne] = useState(false)
-  const [enabledTwo, setEnabledTwo] = useState(false)
   const [enabledThree, setEnabledThree] = useState(false)
 
   return (
     <>
       <div className={styles.root}>
-        <div className={styles.preview}>
-          <Switcher
-            enabled={enabledOne}
-            styleContext="isInPanel"
-            onChange={(e) => setEnabledOne(e.target.checked)}
-          >
-            <span>Показывать по порядку</span>
-          </Switcher>
-        </div>
-        <div className={styles.preview}>
-          <div className={styles.row} data-theme="dark">
-            <Switcher
-              enabled={enabledTwo}
-              styleContext="isInMenu"
-              onChange={(e) => setEnabledTwo(e.target.checked)}
-              theme="dark"
-            >
-              <span>Показывать по порядку</span>
-            </Switcher>
-          </div>
-        </div>
-        <div className={styles.preview}>
-          <Switcher
-            enabled={enabledThree}
-            styleContext="isInLive"
-            onChange={(e) => setEnabledThree(e.target.checked)}
-            childrenPosition="right"
-          >
-            <span>Перевернуть трансляцию</span>
-          </Switcher>
-        </div>
+        <Switcher
+          enabled={enabledOne}
+          styleContext="isInPanel"
+          onChange={(e) => setEnabledOne(e.target.checked)}
+          childrenLeft={<span>Показывать по порядку</span>}
+        />
+
+        <Switcher
+          enabled={enabledThree}
+          styleContext="isInLive"
+          onChange={(e) => setEnabledThree(e.target.checked)}
+          childrenRight={<span>Перевернуть трансляцию</span>}
+        />
       </div>
     </>
   )

package/src/Switcher/Switcher.types.ts

@@ -4,13 +4,11 @@ export type SwitcherStyleContexts = 'isInLive' | 'isInPanel' | 'isInMenu'
 
 export type SwitcherThemes = 'light' | 'dark'
 
-export type SwitcherChildrenPositions = 'left' | 'right'
-
 export interface SwitcherProps {
   enabled: boolean
   styleContext: SwitcherStyleContexts
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   theme?: SwitcherThemes
-  children: JSX.Element[] | JSX.Element
-  childrenPosition?: SwitcherChildrenPositions
+  childrenLeft?: JSX.Element
+  childrenRight?: JSX.Element
 }

package/src/Switcher/index.tsx

@@ -5,11 +5,11 @@ import styles from './Switcher.module.css'
 
 export const Switcher: React.FC<SwitcherProps> = ({
   enabled,
-  children,
-  childrenPosition = 'left',
   onChange,
   styleContext,
-  theme = 'light'
+  theme = 'light',
+  childrenLeft,
+  childrenRight
 }) => (
   <label
     data-testid="switcher"
@@ -19,14 +19,14 @@ export const Switcher: React.FC<SwitcherProps> = ({
       [styles[styleContext], !!styles[styleContext]]
     ])}
   >
-    {children && childrenPosition === 'left' && (
+    {childrenLeft && (
       <div
         className={makeClassName([
           [styles.children, true],
           [styles.left, true]
         ])}
       >
-        {children}
+        {childrenLeft}
       </div>
     )}
     <input
@@ -38,14 +38,14 @@ export const Switcher: React.FC<SwitcherProps> = ({
     <span className={styles.control}>
       <span className={styles.knob} />
     </span>
-    {children && childrenPosition === 'right' && (
+    {childrenRight && (
       <div
         className={makeClassName([
           [styles.children, true],
           [styles.right, true]
         ])}
       >
-        {children}
+        {childrenRight}
       </div>
     )}
   </label>

package/src/ToolbarButton/ToolbarButton.types.ts

@@ -1,9 +1,7 @@
 export type ToolbarButtonTypes =
-  | 'vk'
   | 'fb'
   | 'tw'
   | 'tg'
-  | 'ok'
   | 'reaction'
   | 'pdf'
   | 'bookmark'

package/src/_storybook/PreviewWrapper/index.tsx

@@ -17,7 +17,6 @@ export const PreviewWrapper: React.FC<PreviewWrapperProps> = ({
       [styles[theme], !!theme]
     ])}
   >
-    <h2>{theme === 'dark' ? 'Dark theme' : 'Light theme'}</h2>
     {children}
   </div>
 )

package/src/index.tsx

@@ -26,6 +26,7 @@ export * from './HalfBlock'
 export * from './RawHtmlBlock'
 export * from './ImportantLead'
 export * from './ListBlock'
+export * from './ListViewSwitcher'
 export * from './RelatedBlock'
 export * from './RichTitle'
 export * from './SimpleBlock'

package/src/types.ts

@@ -8,10 +8,7 @@ export interface OptimizedImageItem {
 export type CallToActions =
   | 'fb'
   | 'tw'
-  | 'vk'
-  | 'ok'
   | 'tg'
-  | 'wp'
   | 'reaction'
   | 'pdf'
   | 'bookmark'