Merge pull request #185 from CSSSR/release/BLOG-FOOTER-FIX

release: BLOG-FOOTER-FIX

Author: ArtyomResh

.dependabot/config.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "08:00"
+    timezone: Europe/Moscow
+  open-pull-requests-limit: 10
+  target-branch: dependabot-update
+  reviewers:
+  - ArtyomResh

.github/dependabot.yml

@@ -3,17 +3,14 @@
 
 Все зависимости устанавливаются в общую папку `node_modules` (в корневой директории), а внутренние пакеты линкуются между собой.
 
-Сейчас репозиторий содержит 3 пакета:
+Сейчас репозиторий содержит 2 пакета:
 * `@csssr/core-design` — основной пакет, библиотека с переиспользуемыми React-компонентами;
-* `@csssr/core-docs` — документация, приложение на Next.js, использует компоненты из `@csssr/core-design`;
 * `@csssr/core-scripts` — cli-утилита для развертывания голого проекта from scratch из файлов-шаблонов и других полезных комманд, которые могут приготиться пользователю библиотеки;
 
-Пакеты `@csssr/core-design` и `@csssr/core-scripts` публикуются в npm.
+Пакеты публикуются в npm.
 
 ## Как разрабатывать
-В большинстве случаев нужно:
-1. Запустить npm-cкрипт `$ yarn run dev` в директирии `./packages/core-design`;
-2. Запустить dev-сервер приложения документации `$ yarn run dev` в директирии `./packages/core-docs`;
+Запустить npm-cкрипт `$ yarn start:storybook` в директирии `./packages/core-design`; 
 
 ## Пакет `@csssr/core-design`
 Эту библиотеку подключают в проект (с React-ом), и импортируют из неё компоненты.
@@ -63,14 +60,3 @@ $ core-design --help
 2. Выполнить команду `$ npm link`;
 
 Теперь можно локально запускать команду `$ core-design ...`.
-
-## Пакет `@csssr/core-docs`
-Это приложение c SSR (на Next.js), которое использует компоненты из библиотеки `@csssr/core-design` для построения документации на неё же.
-
-### Сборка для продашкн
-Можно посмотреть в документации Next.js. Если вкратце: происходит запуск npm-скрипта `build`, а после этого `start`. Артифакты сборки попадают в директорию `./packages/core-docs/.next`. Используется конфигурация из файла `./packages/core-docs/next.config.js`
-
-### Сборка для локальной разработки
-Запускается скрипт `dev`. Используется конфигурация из файла `./packages/core-docs/next.config.js`, где есть несколько важных особенностей:
-1. Добавлен костыль, который добавляет корректную настройку [externals](https://webpack.js.org/configuration/externals/) webpack-конфига SSR-части для пакета `@csssr/core-design`; Это сделано для корректного отслеживания измененных файлов библиотеки, корректной работы HMR;
-2. Добавлен плагин для проверки типов;

MONOREPO.md

@@ -5,7 +5,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "lerna run dev --parallel --scope=@csssr/core-{design,docs}",
+    "dev": "lerna run dev --parallel --scope=@csssr/core-design",
     "build": "./scripts/build.sh",
     "version": "./scripts/version.sh",
     "release": "./scripts/release.sh",

package.json

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { withKnobs, select } from '@storybook/addon-knobs'
+
+import CookiesPopup from './CookiesPopup'
+
+storiesOf('CookiesPopup', module)
+  .addDecorator(withKnobs)
+  .add('CookiesPopup', () => {
+    const knobs = {
+      preset: select('Preset', ['defaultEn', 'defaultRu', ''], 'defaultEn'),
+    }
+
+    return <CookiesPopup {...knobs} />
+  })

packages/core-design/src/components/CookiesPopup/CookiesPopup.stories.tsx

@@ -0,0 +1,167 @@
+import { css } from '@emotion/react'
+import calcRem from '../../utils/style/calcRem'
+
+const base = ({ media }) => css`
+  & {
+    z-index: 99999;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-top: ${calcRem(8)};
+    padding-bottom: ${calcRem(8)};
+    padding-left: 2rem;
+    padding-right: 2.265rem;
+    background-color: #171717;
+    color: #ffffff;
+    transition: transform 200ms ease-out, opacity 200ms ease-out;
+  }
+
+  &.hide {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  .wrap {
+    position: relative;
+    display: flex;
+  }
+
+  .close {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    top: 1rem;
+    height: 1rem;
+    color: #ffffff;
+    cursor: pointer;
+  }
+
+  .cookies-text {
+    position: relative;
+    color: #ffffff;
+    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
+  }
+
+  .cookies-text::after {
+    content: '';
+    position: absolute;
+    right: -172px;
+    bottom: ${calcRem(-8)};
+    width: ${calcRem(62)};
+    height: ${calcRem(53)};
+    background-image: url(${require('../../static/icons/cookiesPopup/cookie_ready.svg')});
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .cookies-link {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #ffffff;
+    margin-left: 0.25rem;
+  }
+
+  @media (max-width: 1070px) and (min-width: 1025px) {
+    p.cookies-text {
+      max-width: ${calcRem(692)};
+    }
+  }
+
+  ${media.from('1025px')} {
+    & {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .close {
+      top: ${calcRem(21)};
+      right: ${calcRem(16)};
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .cookies-text {
+      max-width: ${calcRem(790)};
+    }
+
+    .cookies-text::after {
+      bottom: -0.5rem;
+    }
+  }
+
+  ${media.to('1024px')} {
+    .cookies-text {
+      max-width: ${calcRem(692)};
+    }
+
+    .cookies-text::after {
+      right: ${calcRem(-133)};
+    }
+
+    .close {
+      top: ${calcRem(19)};
+      right: ${calcRem(15)};
+    }
+  }
+
+  ${media.from('768px')} {
+    .close {
+      width: ${calcRem(24)};
+      height: ${calcRem(24)};
+    }
+  }
+
+  ${media.to('767px')} {
+    & {
+      padding-top: ${calcRem(16)};
+      padding-bottom: ${calcRem(16)};
+    }
+
+    .cookies-text::after {
+      display: none;
+    }
+
+    .close {
+      width: ${calcRem(16)};
+      height: ${calcRem(16)};
+    }
+  }
+
+  @media (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 3) {
+    & {
+      padding-top: ${calcRem(12)};
+      padding-bottom: ${calcRem(12)};
+      padding-left: ${calcRem(24)};
+      padding-right: ${calcRem(27)};
+    }
+
+    .wrap {
+      max-width: unset;
+    }
+
+    .close {
+      top: ${calcRem(12)};
+      right: ${calcRem(12)};
+      width: ${calcRem(12)};
+      height: ${calcRem(12)};
+    }
+
+    .cookies-text {
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+`
+
+const StyledCookiesPopup = (props) => {
+  const media = props.theme.media
+
+  return css`
+    ${base({ media })}
+  `
+}
+
+export default StyledCookiesPopup

packages/core-design/src/components/CookiesPopup/CookiesPopup.styles.ts

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react'
+import cn from 'classnames'
+import styled from '@emotion/styled'
+
+import Text from '../Text'
+import localStorageAvailable from '../../utils/client/localStorageAvailable'
+import styles from './CookiesPopup.styles'
+
+import presets from '../../data/cookiesPopupPresets'
+
+/* tslint:disable */
+const CrossIcon = require('../../static/icons/cookiesPopup/cross_white.svg')
+/* tslint:enable */
+
+const COOKIES_POLICY_ALERT_HIDDEN = 'hidden'
+
+export interface Props {
+  className?: string
+  preset?: string
+}
+
+const CookiesPopup: React.FC<Props> = ({ className, preset }) => {
+  const [isHidden, setIsHidden] = useState(true)
+
+  const handleClick = () => {
+    if (localStorageAvailable()) {
+      localStorage.setItem('cookies_policy', COOKIES_POLICY_ALERT_HIDDEN)
+    }
+    setIsHidden(true)
+  }
+
+  useEffect(() => {
+    if (localStorageAvailable()) {
+      setIsHidden(localStorage.getItem('cookies_policy') === COOKIES_POLICY_ALERT_HIDDEN)
+    } else {
+      setIsHidden(false)
+    }
+  }, [])
+
+  const links = presets[preset].links
+
+  return (
+    <div className={cn(className, { hide: isHidden })}>
+      <button className="close" onClick={handleClick}>
+        <CrossIcon />
+      </button>
+      <div className="wrap">
+        <Text type="regular" size="m" className="cookies-text">
+          <span dangerouslySetInnerHTML={{ __html: presets[preset].text }} />
+
+          {links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="cookies-link"
+              dangerouslySetInnerHTML={{
+                __html: link.title,
+              }}
+            />
+          ))}
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+export default styled(CookiesPopup)`
+  ${styles}
+`

packages/core-design/src/components/CookiesPopup/CookiesPopup.tsx

@@ -0,0 +1 @@
+export { default } from './CookiesPopup'