@meduza/ui-kit-2 0.2.21 → 0.2.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.21",
+  "version": "0.2.22",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/SvgSymbol/SvgSymbol.module.css

@@ -206,6 +206,13 @@
   }
 }
 
+.shareBookmark {
+  width: 8px;
+  height: auto;
+
+  cursor: pointer;
+}
+
 .isInToolbar.bookmark {
   width: 14px;
 }

package/src/SvgSymbol/SvgSymbol.types.ts

@@ -29,6 +29,7 @@ export type Icons =
   | 'download'
   | 'play'
   | 'pause'
+  | 'shareBookmark'
   | 'speedHalf'
   | 'speedOne'
   | 'speedOneHalf'

package/src/SvgSymbol/icons.ts

@@ -195,6 +195,13 @@ export const icons = {
       '<path d="M16 20l-7.5-6.333L1 20V1h15z" stroke="currentColor" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>'
   },
 
+  shareBookmark: {
+    width: 8,
+    height: 11,
+    content:
+      '<path clip-rule="evenodd" d="M7 10 4 7l-3 3V1h6v9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+
   receipt: {
     width: 10,
     height: 13,

package/src/Toolbar/Toolbar.module.css

@@ -12,14 +12,10 @@
   display: flex;
   flex-flow: row wrap;
 
-  margin: 0 0 0 -10px;
+  margin: 0 0 0 -11px;
   padding: 0;
 
   list-style: none;
-
-  @media $landscapeTablet {
-    margin: 0 0 0 -15px;
-  }
 }
 
 .item {
@@ -27,8 +23,8 @@
 
   min-width: 42px;
   height: 32px;
-  padding-right: 10px;
-  padding-left: 10px;
+  padding-right: 11px;
+  padding-left: 11px;
 
   cursor: pointer;
   transition: color 250ms ease;
@@ -37,11 +33,6 @@
   color: #808080;
 
   line-height: 1;
-
-  @media $landscapeTablet {
-    padding-right: 15px;
-    padding-left: 15px;
-  }
 }
 
 .item:last-child {
@@ -50,15 +41,13 @@
 
 .item::before {
   position: absolute;
-  top: 7px;
+  top: 50%;
   left: 0;
 
-  height: 18px;
-
-  content: '';
-  vertical-align: middle;
+  content: '·';
+  transform: translateY(-50%);
 
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  font-size: 14px;
 }
 
 .item:empty {

package/src/Toolbar/Toolbar.stories.tsx

@@ -14,11 +14,21 @@ export default {
   }
 }
 
-const buttons: { type: ToolbarButtonTypes; label?: string }[] = [
+const buttons: {
+  type: ToolbarButtonTypes
+  label?: string
+  icon?: 'shareBookmark'
+}[] = [
+  {
+    type: 'tg'
+  },
   {
     type: 'fb',
     label: '23,4K'
   },
+  {
+    type: 'tw'
+  },
   {
     type: 'vk',
     label: '481'
@@ -27,17 +37,11 @@ const buttons: { type: ToolbarButtonTypes; label?: string }[] = [
     type: 'ok'
   },
   {
-    type: 'tw'
-  },
-  {
-    type: 'tg'
-  },
-  {
-    type: 'reaction',
-    label: 'Связаться с редакцией'
+    type: 'bookmark',
+    icon: 'shareBookmark'
   },
   {
-    type: 'bookmark'
+    type: 'reaction'
   }
 ]
 
@@ -66,6 +70,8 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
               }
               key={`${index}-${button.type}`}
               isActive={button.type === 'bookmark' && bookmark}
+              lang="ru"
+              icon={button.icon}
             >
               {button.label && button.label}
             </ToolbarButton>

package/src/ToolbarButton/ToolbarButton.module.css

@@ -7,7 +7,7 @@
 
   cursor: pointer;
 
-  color: inherit;
+  color: #000;
   border-width: 0;
   outline: none;
   background-color: transparent;
@@ -82,21 +82,35 @@
   visibility: hidden;
 }
 
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -1px;
+  padding-right: 5px;
+
+  @media $landscapeTablet {
+    padding-left: 5px;
+  }
+}
+
 .text {
   display: inline-block;
 
-  padding-left: 5px;
+  vertical-align: middle;
+}
 
+.counter {
+  color: #8c8c8c;
+  display: inline-block;
   vertical-align: middle;
+  padding-left: 3px;
 }
 
-.text:empty {
+.counter:empty {
   display: none;
 }
 
 .bookmark {
-  color: #999;
-
   fill: transparent;
 }
 

package/src/ToolbarButton/ToolbarButton.stories.tsx

@@ -20,6 +20,7 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
           type="fb"
           theme={theme}
           onClick={(): void => alert('Hello Button')}
+          lang="ru"
         >
           42
         </ToolbarButton>

package/src/ToolbarButton/ToolbarButton.test.tsx

@@ -10,7 +10,11 @@ describe('Toolbar Button', () => {
 
   const renderComponent = () =>
     render(
-      <ToolbarButton type="fb" onClick={(): void => alert('Hello Button')}>
+      <ToolbarButton
+        lang="ru"
+        type="fb"
+        onClick={(): void => alert('Hello Button')}
+      >
         42
       </ToolbarButton>
     )

package/src/ToolbarButton/ToolbarButton.types.ts

@@ -13,6 +13,8 @@ export type ToolbarButtonTypes =
 export interface ToolbarButtonProps {
   type: ToolbarButtonTypes
   theme?: string
+  lang: 'ru' | 'en'
+  icon?: 'shareBookmark'
   isActive?: boolean
   onClick: (type: string) => void
   children?: React.ReactNode | JSX.Element[] | JSX.Element

package/src/ToolbarButton/index.tsx

@@ -5,12 +5,15 @@ import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import toolbarStyles from '../Toolbar/Toolbar.module.css'
 import styles from './ToolbarButton.module.css'
+import { SocialLabels } from '../constants'
 
 export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
   children,
   type,
   theme,
   isActive,
+  lang = 'ru',
+  icon,
   onClick
 }) => {
   const classNames: ClassNames = [
@@ -20,6 +23,8 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
     [styles.isActive, !!isActive]
   ]
 
+  const label = SocialLabels[lang][type]
+
   return (
     <li className={toolbarStyles.item}>
       <button
@@ -28,8 +33,18 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
         type="button"
         onClick={(): void => onClick(type)}
       >
-        <SvgSymbol size="medium" icon={type} styleContext="isInToolbar" />
-        {children && <span className={styles.text}>{children}</span>}
+        {icon && (
+          <div className={styles.icon}>
+            <SvgSymbol size="medium" icon={icon} styleContext="isInToolbar" />
+          </div>
+        )}
+        <span className={styles.text}>{label}</span>
+        {children && (
+          <span className={styles.counter}>
+            {` `}
+            {children}
+          </span>
+        )}
       </button>
     </li>
   )

package/src/constants.ts

@@ -22,3 +22,23 @@ export const imageConditionalKeys = {
   default: [650, 520, 325],
   narrow: [600, 325]
 }
+
+export const SocialLabels = {
+  ru: {
+    tg: 'Telegram',
+    fb: 'Фб',
+    vk: 'Вк',
+    ok: 'Ок',
+    tw: 'Твиттер',
+    bookmark: 'В закладки',
+    reaction: 'Напишите нам'
+  },
+  en: {
+    tg: 'Telegram',
+    fb: 'Fb',
+    vk: 'Vk',
+    ok: 'Ok',
+    tw: 'Twitter',
+    bookmark: 'Add to bookmarks'
+  }
+}