@meduza/ui-kit-2 0.8.629 → 0.8.690

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/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'