fix: revert 0e81245 (#916)

This reverts commit 0e81245.
core-ds · Dec 8, 2021 · 953fbcf · 953fbcf
1 parent 19a2d08
commit 953fbcf
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 45 deletions.
diff --git a/.storybook/public/global.css b/.storybook/public/global.css
@@ -6,26 +6,22 @@
 /* stylelint-disable */
 @font-face {
     font-family: 'Styrene UI';
-    src: url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_regular.woff2')
-            format('woff2'),
-        url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_regular.woff')
-            format('woff');
+    src: url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_regular.woff2') format('woff2'),
+        url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
 }
 @font-face {
     font-family: 'Styrene UI';
-    src: url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_medium.woff2')
-            format('woff2'),
-        url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_medium.woff') format('woff');
+    src: url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_medium.woff2') format('woff2'),
+        url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
 }
 @font-face {
     font-family: 'Styrene UI';
-    src: url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_bold.woff2')
-            format('woff2'),
-        url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_bold.woff') format('woff');
+    src: url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_bold.woff2') format('woff2'),
+        url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
 }
@@ -201,7 +197,7 @@ select.select {
     padding-right: var(--gap-xl);
     -webkit-appearance: none;
     appearance: none;
-    background-image: url(https://alfabank.gcdn.co/icons/glyph_chevron-down-compact_m.svg);
+    background-image: url(https://alfabank.st/icons/glyph_chevron-down-compact_m.svg);
     background-repeat: no-repeat;
     background-position: right center;
 }

diff --git a/docs/1.getting-started.stories.mdx b/docs/1.getting-started.stories.mdx
@@ -10,7 +10,7 @@ import { version } from '../package.json';
 <div className="lib">
   <div className="lib-header">
     <div className="alfa-logo">
-      <img className="alfa-logo__image" src="https://alfabank.gcdn.co/icons/icon_bank-alfa_xxl_color.svg" alt="Альфа-Банк" />
+      <img className="alfa-logo__image" src="https://alfabank.st/icons/icon_bank-alfa_xxl_color.svg" alt="Альфа-Банк" />
     </div>
     <h1 className="lib-title">
       <span className="lib-title__line">Core</span>

diff --git a/docs/6.typography.stories.mdx b/docs/6.typography.stories.mdx
@@ -1,7 +1,7 @@
 import { Description } from '@storybook/addon-docs/blocks';
 
 <Meta
-  title='Гайдлайны/Типографика'
+  title='Гайдлайны/Типографика' 
   parameters={{ previewTabs: { canvas: { hidden: true } }}}
 />
 
@@ -48,30 +48,30 @@ import { Description } from '@storybook/addon-docs/blocks';
 ```css
 @font-face {
     font-family: 'Styrene UI';
-    src: url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_regular.woff2') format('woff2'),
-         url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_regular.woff') format('woff');
+    src: url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_regular.woff2') format('woff2'),
+         url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
 }
 @font-face {
     font-family: 'Styrene UI';
-    src: url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_medium.woff2') format('woff2'),
-         url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_medium.woff') format('woff');
+    src: url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_medium.woff2') format('woff2'),
+         url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
 }
 @font-face {
     font-family: 'Styrene UI';
-    src: url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_bold.woff2') format('woff2'),
-         url('https://alfabank.gcdn.co/media/fonts/styrene-ui/styrene-ui_bold.woff') format('woff');
+    src: url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_bold.woff2') format('woff2'),
+         url('https://alfabank.st/media/fonts/styrene-ui/styrene-ui_bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
 }
 ```
 
 Есть вариант с CDN:
 
-`https://alfabank.gcdn.co/media/fonts/styrene-ui/font.css`
+`https://alfabank.st/media/fonts/styrene-ui/font.css`
 
 Для всех Styrene-элементов должна быть включена настройка `font-feature-settings: 'ss01';`, и рекомендуем не забыть про сглаживание
 `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`.
diff --git a/docs/8.icons.stories.mdx b/docs/8.icons.stories.mdx
@@ -4,12 +4,28 @@ import { Plate } from '../packages/plate/src';
 import { Badge } from '../packages/badge/src';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph';
 
-<Meta title='Гайдлайны/Иконки' parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+<Meta
+  title='Гайдлайны/Иконки' 
+  parameters={{ previewTabs: { canvas: { hidden: true } }}}
+/>
 
 ## Иконки
 
-Все иконки из Figma доступны для использования в [библиотеке иконок в виде React компонентов](https://github.com/alfa-laboratory/icons).
+Все иконки из Figma доступны для использования в двух вариантах:
+
+- [Библиотека иконок в виде React компонентов](https://github.com/alfa-laboratory/icons)
+- CDN с иконками: `alfabank.st/icons/` + название иконки (например, https://alfabank.st/icons/glyph_star_m.svg)
 
 Для удобства воспользуйтесь [витриной иконок с поиском](https://alfa-laboratory.github.io/icons-demo/).
 
 Иконки из пакета [icons-glyph](https://github.com/alfa-laboratory/icons) одноцветные и легко могут быть перекрашены с помощью `color`.
+
+<div style={{marginTop: 24}}>
+<Plate view='attention' leftAddons={<Badge view='icon' iconColor='attention' content={<AlertCircleMIcon />} />}>
+
+Проверьте, что `alfabank.st` добавлен в список разрешённых источников:
+
+<p style={{marginBottom: 8}}><code>'img-src': `'self' click.alfabank.ru alfabank.st data: 'self'`</code></p>
+
+</Plate>
+</div>
diff --git a/packages/calendar/src/vars.css b/packages/calendar/src/vars.css
@@ -8,8 +8,8 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
-    --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
+    --calendar-arrow-background: url('https://alfabank.st/icons/icon_arrow-left_m_black.svg');
+    --calendar-select-icon-background: url('https://alfabank.st/icons/icon_arrow-select_m_black.svg');
     --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
     --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);

diff --git a/packages/cdn-icon/src/Component.tsx b/packages/cdn-icon/src/Component.tsx
@@ -22,7 +22,7 @@ export const CDNIcon: React.FC<CDNIconProps> = ({ name, color, dataTestId }) =>
 
     useEffect(() => {
         const xhr = new XMLHttpRequest();
-        xhr.open('GET', `https://alfabank.gcdn.co/icons/${name}.svg`);
+        xhr.open('GET', `https://alfabank.st/icons/${name}.svg`);
         xhr.send();
         xhr.onload = function onload() {
             const svg = xhr.response;

diff --git a/packages/gallery/src/vars.css b/packages/gallery/src/vars.css
@@ -1,3 +1,3 @@
 :root {
-    --gallery-broken-image-icon: url('https://alfabank.gcdn.co/icons/art_no-image_s.svg');
+    --gallery-broken-image-icon: url('https://alfabank.st/icons/art_no-image_s.svg');
 }
diff --git a/packages/input/src/default.module.css b/packages/input/src/default.module.css
@@ -1,13 +1,13 @@
 @import '../../themes/src/default.css';
 
 :root {
-    --input-clear-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-circle_m.svg');
+    --input-clear-icon: url('https://alfabank.st/icons/glyph_cross-circle_m.svg');
     --input-color: var(--color-light-text-primary);
     --input-placeholder-color: var(--color-light-text-secondary);
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
     --input-with-label-placeholder-color: var(--color-light-text-tertiary);
-    --input-error-icon: url('https://alfabank.gcdn.co/icons/glyph_alert-circle_m_negative.svg');
-    --input-success-icon: url('https://alfabank.gcdn.co/icons/icon_ok_s_color.svg');
+    --input-error-icon: url('https://alfabank.st/icons/glyph_alert-circle_m_negative.svg');
+    --input-success-icon: url('https://alfabank.st/icons/icon_ok_s_color.svg');
     --input-caret-color: var(--input-color);
 
     /* disabled */

diff --git a/packages/input/src/inverted.module.css b/packages/input/src/inverted.module.css
@@ -1,13 +1,13 @@
 @import '../../themes/src/default.css';
 
 :root {
-    --input-inverted-clear-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-circle_m.svg');
+    --input-inverted-clear-icon: url('https://alfabank.st/icons/glyph_cross-circle_m.svg');
     --input-inverted-color: var(--color-light-text-primary-inverted);
     --input-inverted-placeholder-color: var(--color-light-text-secondary-inverted-transparent);
     --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted);
     --input-inverted-with-label-placeholder-color: var(--color-light-text-tertiary-inverted);
-    --input-inverted-error-icon: url('https://alfabank.gcdn.co/icons/glyph_alert-circle_m_negative.svg');
-    --input-inverted-success-icon: url('https://alfabank.gcdn.co/icons/icon_ok_s_color.svg');
+    --input-inverted-error-icon: url('https://alfabank.st/icons/glyph_alert-circle_m_negative.svg');
+    --input-inverted-success-icon: url('https://alfabank.st/icons/icon_ok_s_color.svg');
     --input-inverted-caret-color: var(--input-inverted-color);
 
     /* disabled */

diff --git a/packages/modal/src/vars.css b/packages/modal/src/vars.css
@@ -29,7 +29,7 @@
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
     /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
+    --modal-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
 
     /* sticky */
     --modal-footer-sticky-box-shadow: none;

diff --git a/packages/plate/src/index.module.css b/packages/plate/src/index.module.css
@@ -6,8 +6,8 @@
     --plate-border-radius: var(--border-radius-m);
 
     /* icons */
-    --plate-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
-    --plate-arrow-icon: url('https://alfabank.gcdn.co/icons/glyph_chevron-down_m.svg');
+    --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
+    --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
 
 .component {

diff --git a/packages/screenshot-utils/helpers.ts b/packages/screenshot-utils/helpers.ts
@@ -85,10 +85,7 @@ export const matchHtml = async ({
     evaluate,
     viewport = defaultViewport,
 }: MatchHtmlParams) => {
-    let pageHtml = await getPageHtml(page, css);
-
-    // FIXME: gcdn.co недоступен на playwright сервере
-    pageHtml = pageHtml.replace(/alfabank\.gcdn\.co/g, 'alfabank.st');
+    const pageHtml = await getPageHtml(page, css);
 
     const image = await axios.post(
         playwrightUrl,

diff --git a/packages/themes/src/mixins/calendar/click.css b/packages/themes/src/mixins/calendar/click.css
@@ -1,7 +1,7 @@
 @define-mixin calendar-click {
     /* theme */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/glyph_chevron-back_m.svg');
-    --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/glyph_arrow-up-down_m.svg');
+    --calendar-arrow-background: url('https://alfabank.st/icons/glyph_chevron-back_m.svg');
+    --calendar-select-icon-background: url('https://alfabank.st/icons/glyph_arrow-up-down_m.svg');
     --calendar-today-border-color: transparent;
     --calendar-range-background: var(--color-light-bg-secondary);
     --calendar-selector-button-outline-border-color: transparent;

diff --git a/packages/themes/src/mixins/input/site.css b/packages/themes/src/mixins/input/site.css
@@ -1,4 +1,4 @@
 @define-mixin input-site {
-    --input-error-icon: url('https://alfabank.gcdn.co/icons/icon_error_m_color.svg');
-    --input-inverted-error-icon: url('https://alfabank.gcdn.co/icons/icon_error_m_color.svg');
+    --input-error-icon: url('https://alfabank.st/icons/icon_error_m_color.svg');
+    --input-inverted-error-icon: url('https://alfabank.st/icons/icon_error_m_color.svg');
 }
diff --git a/packages/themes/src/mixins/modal/click.css b/packages/themes/src/mixins/modal/click.css
@@ -15,7 +15,7 @@
     --modal-l-footer-paddings: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
 
     /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-heavy_m.svg');
+    --modal-closer-icon: url('https://alfabank.st/icons/glyph_cross-heavy_m.svg');
 
     /* sticky */
     --modal-footer-sticky-box-shadow: none;

diff --git a/packages/themes/src/mixins/select/click.css b/packages/themes/src/mixins/select/click.css
@@ -13,6 +13,6 @@
     --select-checkmark-margin: 0 0 0 var(--gap-m);
     --select-checkmark-size: 24px;
     --select-checkmark-order: 1;
-    --select-checkmark-background: url('https://alfabank.gcdn.co/icons/glyph_checkmark-circle_m_color.svg');
+    --select-checkmark-background: url('https://alfabank.st/icons/glyph_checkmark-circle_m_color.svg');
     --select-checkmark-border-radius: 0;
 }