@meduza/ui-kit-2 1.1.3 → 1.3.0

package/src/Tag/Tag.module.css

@@ -26,7 +26,6 @@
 
 .large {
   @media $landscapeTablet {
-
     font-size: 14px;
     line-height: 16px;
     letter-spacing: 1px;
@@ -57,7 +56,6 @@
 .is1to2,
 .isInSuperBlock {
   @media $landscapeTablet {
-
     font-size: 12px;
     line-height: 20px;
     letter-spacing: 1px;
@@ -67,7 +65,6 @@
 .is1to3,
 .is1to4 {
   @media $landscapeTablet {
-
     font-size: 10px;
     line-height: 15px;
     letter-spacing: 0.5px;
@@ -107,6 +104,12 @@
   }
 }
 
+.isInBlockMetaContainer {
+  margin-top: -1px;
+
+  line-height: 15px;
+}
+
 .slide,
 .game,
 .card,
@@ -129,10 +132,12 @@
 }
 
 .isInPodcastPlayer {
+  margin-bottom: 6px;
+
   font-size: 12px;
   line-height: 12px;
+
   opacity: 1;
-  margin-bottom: 6px;
 
   @media $mobile {
     margin-bottom: 6px;

package/src/Toolbar/Toolbar.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Toolbar, ToolbarItem } from './'
 import { ToolbarButton } from '../ToolbarButton'
 import { ToolbarButtonTypes } from '../ToolbarButton/ToolbarButton.types'
@@ -17,7 +17,6 @@ export default {
 const buttons: {
   type: ToolbarButtonTypes
   label?: string
-  icon?: 'shareBookmark'
 }[] = [
   {
     type: 'tg'
@@ -28,25 +27,16 @@ const buttons: {
   {
     type: 'tw'
   },
-  {
-    type: 'bookmark',
-    icon: 'shareBookmark'
-  },
   {
     type: 'reaction'
   }
 ]
 
 const Example: React.FC<{ theme?: string }> = ({ theme }) => {
-  const [bookmark, setBookmark] = useState(false)
   const handleButton = (type: string): void => {
     alert(type)
   }
 
-  const handleBookmark = (): void => {
-    setBookmark(!bookmark)
-  }
-
   return (
     <>
       <div className={styles.root}>
@@ -56,14 +46,8 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
               <ToolbarButton
                 type={button.type}
                 theme={theme}
-                onClick={(): void =>
-                  button.type === 'bookmark'
-                    ? handleBookmark()
-                    : handleButton(button.type)
-                }
-                isActive={button.type === 'bookmark' && bookmark}
+                onClick={(): void => handleButton(button.type)}
                 lang="ru"
-                icon={button.icon}
               />
             </ToolbarItem>
           ))}

package/src/ToolbarButton/ToolbarButton.module.css

@@ -52,18 +52,6 @@
   fill: #fff;
 }
 
-.isDark.bookmark svg,
-.dark.bookmark svg {
-  color: #fff;
-
-  fill: transparent;
-}
-
-.isDark.bookmark.isActive svg,
-.dark.bookmark.isActive svg {
-  fill: currentColor;
-}
-
 .isDark::before,
 .dark::before {
   border-left-color: rgba(255, 255, 255, 0.2);
@@ -99,10 +87,6 @@
   vertical-align: middle;
 }
 
-.bookmark {
-  fill: transparent;
-}
-
 .isActive {
   fill: currentColor;
 }

package/src/ToolbarButton/ToolbarButton.types.ts

@@ -4,7 +4,6 @@ export type ToolbarButtonTypes =
   | 'tg'
   | 'reaction'
   | 'pdf'
-  | 'bookmark'
   | 'unblock'
   | 'cross'
 
@@ -13,7 +12,6 @@ export interface ToolbarButtonProps {
   theme?: string
   lang?: 'ru' | 'en'
   text?: string
-  icon?: 'shareBookmark'
   isActive?: boolean
   onClick: (event, type: string) => void
 }

package/src/ToolbarButton/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { ToolbarButtonProps } from './ToolbarButton.types'
-import { SvgSymbol } from '../SvgSymbol/'
 import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import styles from './ToolbarButton.module.css'
@@ -12,7 +11,6 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
   isActive,
   lang = 'ru',
   text,
-  icon,
   onClick
 }) => {
   const classNames: ClassNames = [
@@ -31,11 +29,6 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
       type="button"
       onClick={(event): void => onClick(event, type)}
     >
-      {icon && (
-        <div className={styles.icon}>
-          <SvgSymbol size="medium" icon={icon} styleContext="isInToolbar" />
-        </div>
-      )}
       <span className={styles.text}>{text || label}</span>
     </button>
   )

package/src/constants.ts

@@ -30,7 +30,6 @@ export const SocialLabels = {
     tw: 'Твиттер',
     pdf: 'PDF',
     unblock: 'Magic link',
-    bookmark: 'В закладки',
     reaction: 'Напишите нам'
   },
   en: {
@@ -38,7 +37,6 @@ export const SocialLabels = {
     fb: 'Fb',
     tw: 'Twitter',
     pdf: 'PDF',
-    unblock: 'Magic link',
-    bookmark: 'Add to bookmarks'
+    unblock: 'Magic link'
   }
 }

package/src/index.tsx

@@ -8,7 +8,6 @@ export * from './Tag'
 export * from './Table'
 export * from './MediaCaption'
 export * from './MaterialNote'
-export * from './BookmarkButton'
 export * from './MaterialTitle'
 export * from './Dropdown'
 export * from './Toolbar'

package/src/types.ts

@@ -11,7 +11,6 @@ export type CallToActions =
   | 'tg'
   | 'reaction'
   | 'pdf'
-  | 'bookmark'
   | 'cross'
 
 export type LightboxImage = {

package/dist/BookmarkButton/BookmarkButton.types.d.ts

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

package/dist/BookmarkButton/index.d.ts

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

package/src/BookmarkButton/BookmarkButton.css

@@ -1,45 +0,0 @@
-.root {
-  color: #e0e0e0;
-}
-
-.control {
-  margin: 0;
-  padding: 5px 3px;
-
-  color: inherit;
-
-  background-color: transparent;
-  border-width: 0;
-  outline: none;
-
-  cursor: pointer;
-
-  appearance: none;
-  fill: transparent;
-}
-
-.dark {
-  color: #fff;
-}
-
-.light {
-  color: #000;
-}
-
-.isInBookmarks .control {
-  fill: #000;
-}
-
-.isInBookmarks.dark .control {
-  fill: #fff;
-}
-
-.isInBookmarks.light .control {
-  fill: #000;
-}
-
-.isInGrid .control svg {
-  @media $landscapeTablet {
-    width: 12px;
-  }
-}

package/src/BookmarkButton/BookmarkButton.module.css

@@ -1,45 +0,0 @@
-.root {
-  color: #e0e0e0;
-}
-
-.control {
-  margin: 0;
-  padding: 5px 3px;
-
-  color: inherit;
-
-  background-color: transparent;
-  border-width: 0;
-  outline: none;
-
-  cursor: pointer;
-
-  appearance: none;
-  fill: transparent;
-}
-
-.dark {
-  color: #fff;
-}
-
-.light {
-  color: #000;
-}
-
-.isInBookmarks .control {
-  fill: #e0e0e0;
-}
-
-.isInBookmarks.dark .control {
-  fill: #fff;
-}
-
-.isInBookmarks.light .control {
-  fill: #000;
-}
-
-.isInGrid .control svg {
-  @media $landscapeTablet {
-    width: 12px;
-  }
-}

package/src/BookmarkButton/BookmarkButton.stories.module.css

@@ -1,5 +0,0 @@
-
-
-.root {
-  display: block;
-}

package/src/BookmarkButton/BookmarkButton.stories.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react'
-import { BookmarkButton } from './'
-import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-
-import styles from './BookmarkButton.stories.module.css'
-
-export default {
-  title: 'Main / BookmarkButton',
-  component: BookmarkButton,
-  parameters: {
-    themeWrapperSideBySide: true
-  }
-}
-
-const Example: React.FC = () => {
-  const [isInBookmarks, setIsInBookmarks] = useState(false)
-
-  return (
-    <>
-      <div className={styles.root}>
-        <BookmarkButton
-          onClick={(): void => setIsInBookmarks(!isInBookmarks)}
-          isInBookmarks={isInBookmarks}
-        />
-      </div>
-    </>
-  )
-}
-
-export const Default: React.FC = () => (
-  <>
-    <PreviewWrapper theme="light">
-      <Example />
-    </PreviewWrapper>
-    <PreviewWrapper theme="dark">
-      <Example />
-    </PreviewWrapper>
-  </>
-)

package/src/BookmarkButton/BookmarkButton.test.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import { BookmarkButton } from './'
-import styles from './BookmarkButton.module.css'
-
-describe('Bookmark Button', () => {
-  const renderComponent = () =>
-    render(
-      <BookmarkButton
-        onClick={(): void => alert('true')}
-        isInBookmarks={false}
-      />
-    )
-
-  it('should have root style', () => {
-    const { getByTestId } = renderComponent()
-
-    const bookmarkButton = getByTestId('bookmark-button')
-
-    expect(bookmarkButton).toHaveClass(styles.root)
-  })
-
-  // it('should change class on click', () => {
-  //   const { getByTestId } = renderComponent()
-
-  //   const bookmarkButton = getByTestId('bookmark-button')
-
-  //   fireEvent.click(bookmarkButton)
-
-  //   expect(bookmarkButton).toHaveClass(styles.isInBookmarks)
-  // })
-})

package/src/BookmarkButton/BookmarkButton.types.ts

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

package/src/BookmarkButton/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { BookmarkButtonProps } from './BookmarkButton.types'
-import { makeClassName, ClassNames } 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: ClassNames = [
-    [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>
-  )
-}