@meduza/ui-kit-2 0.8.8 → 0.8.601

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

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

package/src/Switcher/Switcher.stories.tsx

@@ -20,19 +20,37 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <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 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>
       </div>
     </>
   )

package/src/Switcher/Switcher.types.ts

@@ -4,11 +4,13 @@ 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
-  childrenLeft?: JSX.Element
-  childrenRight?: JSX.Element
+  children: JSX.Element[] | JSX.Element
+  childrenPosition?: SwitcherChildrenPositions
 }

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',
-  childrenLeft,
-  childrenRight
+  theme = 'light'
 }) => (
   <label
     data-testid="switcher"
@@ -19,14 +19,14 @@ export const Switcher: React.FC<SwitcherProps> = ({
       [styles[styleContext], !!styles[styleContext]]
     ])}
   >
-    {childrenLeft && (
+    {children && childrenPosition === 'left' && (
       <div
         className={makeClassName([
           [styles.children, true],
           [styles.left, true]
         ])}
       >
-        {childrenLeft}
+        {children}
       </div>
     )}
     <input
@@ -38,14 +38,14 @@ export const Switcher: React.FC<SwitcherProps> = ({
     <span className={styles.control}>
       <span className={styles.knob} />
     </span>
-    {childrenRight && (
+    {children && childrenPosition === 'right' && (
       <div
         className={makeClassName([
           [styles.children, true],
           [styles.right, true]
         ])}
       >
-        {childrenRight}
+        {children}
       </div>
     )}
   </label>

package/src/Tag/Tag.module.css

@@ -124,6 +124,10 @@
   }
 }
 
+.isInDynamicBlock {
+  opacity: 0.5;
+}
+
 .mobile {
   @media $mobile {
     display: none;

package/src/ToolbarButton/ToolbarButton.types.ts

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

package/src/_storybook/PreviewWrapper/index.tsx

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

package/src/index.tsx

@@ -26,7 +26,6 @@ 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,7 +8,10 @@ export interface OptimizedImageItem {
 export type CallToActions =
   | 'fb'
   | 'tw'
+  | 'vk'
+  | 'ok'
   | 'tg'
+  | 'wp'
   | 'reaction'
   | 'pdf'
   | 'bookmark'

package/dist/ListViewSwitcher/ListViewSwitcher.types.d.ts

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

package/dist/ListViewSwitcher/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { ListViewSwitcherProps } from './ListViewSwitcher.types';
-export declare const ListViewSwitcher: React.FC<ListViewSwitcherProps>;

package/src/ListViewSwitcher/ListViewSwitcher.module.css

@@ -1,109 +0,0 @@
-.root {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-
-  cursor: pointer;
-  user-select: none;
-
-  border-radius: 40px;
-  background-color: #fff;
-}
-
-.input {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  visibility: hidden;
-}
-
-.knob {
-  position: relative;
-  z-index: $zIndex-2;
-
-  display: block;
-
-  transition: 0.25s ease-in-out;
-
-  border-radius: 15px;
-  background: #000;
-}
-
-.sm {
-  width: 35px;
-  height: 18px;
-  padding: 2px;
-}
-
-.md {
-  width: 52px;
-  height: 26px;
-  padding: 2px 3px;
-}
-
-.md .knob {
-  width: 22px;
-  height: 22px;
-}
-
-.grid,
-.list {
-  position: absolute;
-
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-.grid {
-  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
-}
-
-.list {
-  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='9.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
-}
-
-.md .input:checked ~ .knob {
-  transform: translateX(24px);
-}
-
-.md .grid,
-.md .list {
-  width: 13px;
-  height: 13px;
-  top: 7px;
-}
-
-.md .grid {
-  left: 10px;
-}
-
-.md .list {
-  right: 10px;
-}
-
-.sm .grid {
-  left: 5px;
-}
-
-.sm .list {
-  right: 5px;
-}
-
-.sm .knob {
-  width: 14px;
-  height: 14px;
-}
-
-.sm .grid,
-.sm .list {
-  width: 8px;
-  height: 8px;
-  top: 5px;
-}
-
-.sm .input:checked ~ .knob {
-  transform: translateX(16px);
-}

package/src/ListViewSwitcher/ListViewSwitcher.stories.module.css

@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  flex-flow: row wrap;
-
-  gap: 24px;
-}

package/src/ListViewSwitcher/ListViewSwitcher.stories.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

package/src/ListViewSwitcher/index.tsx

@@ -1,30 +0,0 @@
-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>
-)