@alfalab/core-components-typography 3.2.2 → 4.0.0

package/src/presets.ts

@@ -0,0 +1,17 @@
+export const typographyPresets = {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: 'div',
+                    view: 'primary-medium',
+                },
+                secondary: {
+                    tag: 'div',
+                    color: 'secondary',
+                    view: 'primary-small',
+                },
+            },
+        },
+    },
+};

package/src/text/component.tsx

@@ -0,0 +1,116 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import { Color } from '../colors';
+import { TextElementType } from '../types';
+
+import colors from '../colors.module.css';
+import styles from './index.module.css';
+
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+
+type TextBaseProps = {
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
+     */
+    view?:
+        | 'primary-large'
+        | 'primary-medium'
+        | 'primary-small'
+        | 'secondary-large'
+        | 'secondary-medium'
+        | 'secondary-small'
+        | 'component'
+        | 'caps';
+
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+
+    /**
+     * Толщина шрифта
+     */
+    weight?: 'regular' | 'medium' | 'bold';
+
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+
+    /**
+     * HTML тег
+     */
+    tag?: 'span' | 'div';
+
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+
+    /**
+     * Добавляет отступы к тэгу 'p'
+     */
+    defaultMargins?: never;
+
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+
+type TextPTagProps = Omit<TextBaseProps, 'tag' | 'defaultMargins'> & {
+    tag?: 'p';
+    defaultMargins?: boolean;
+};
+
+export type TextProps = Omit<NativeProps, 'color'> & (TextBaseProps | TextPTagProps);
+
+export const Text = forwardRef<TextElementType, TextProps>(
+    (
+        {
+            view = 'primary-medium',
+            tag: Component = 'span',
+            weight,
+            monospaceNumbers = false,
+            defaultMargins = true,
+            color,
+            className,
+            dataTestId,
+            children,
+            rowLimit,
+            ...restProps
+        },
+        ref,
+    ) => (
+        <Component
+            className={cn(
+                {
+                    [styles.paragraph]: Component === 'p' && !defaultMargins,
+                    [styles.paragraphWithMargins]: Component === 'p' && defaultMargins,
+                    [styles.monospace]: monospaceNumbers,
+                    [styles[`rowLimit${rowLimit}`]]: rowLimit,
+                },
+                className,
+                color && colors[color],
+                styles[view],
+                weight && styles[weight],
+            )}
+            data-test-id={dataTestId}
+            ref={ref as never}
+            {...restProps}
+        >
+            {children}
+        </Component>
+    ),
+);

package/src/text/index.module.css

@@ -0,0 +1,76 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --text-paragraph-margin-bottom: 0 0 var(--gap-s);
+}
+
+.paragraph {
+    margin: 0;
+    padding: 0;
+}
+
+.paragraphWithMargins {
+    padding: 0;
+    margin: var(--text-paragraph-margin-bottom);
+}
+
+.primary-large {
+    @mixin paragraph_primary_large;
+}
+
+.primary-medium {
+    @mixin paragraph_primary_medium;
+}
+
+.primary-small {
+    @mixin paragraph_primary_small;
+}
+
+.secondary-large {
+    @mixin paragraph_secondary_large;
+}
+
+.secondary-medium {
+    @mixin paragraph_secondary_medium;
+}
+
+.secondary-small {
+    @mixin paragraph_secondary_small;
+}
+
+.component {
+    @mixin paragraph_component;
+}
+
+.caps {
+    @mixin paragraph_caps;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.medium {
+    font-weight: 500;
+}
+
+.regular {
+    font-weight: normal;
+}
+
+.monospace {
+    font-variant-numeric: tabular-nums;
+}
+
+.rowLimit1 {
+    @mixin row_limit 1;
+    word-break: break-all;
+}
+
+.rowLimit2 {
+    @mixin row_limit 2;
+}
+
+.rowLimit3 {
+    @mixin row_limit 3;
+}

package/src/text/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/title/common.module.css

@@ -0,0 +1,16 @@
+.component {
+    margin: 0;
+    padding: 0;
+
+    &.bold {
+        font-weight: bold;
+    }
+
+    &.medium {
+        font-weight: 500;
+    }
+
+    &.regular {
+        font-weight: normal;
+    }
+}

package/src/title/component.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import { Color } from '../colors';
+
+import colors from '../colors.module.css';
+
+type NativeProps = HTMLAttributes<HTMLHeadingElement>;
+
+export type TitleProps = Omit<NativeProps, 'color'> & {
+    /**
+     * HTML тег
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+
+    /**
+     * Толщина шрифта
+     */
+    weight?: 'regular' | 'medium' | 'bold';
+
+    /**
+     * Шрифт текста
+     */
+    font?: 'styrene' | 'system';
+
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean;
+
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+
+type Styles = {
+    styles: {
+        [key: string]: string;
+    };
+};
+
+type TitleElementType = HTMLHeadingElement | HTMLDivElement;
+
+export const Title = forwardRef<TitleElementType, TitleProps & Styles>(
+    (
+        {
+            tag: Component = 'div',
+            view = 'medium',
+            font = 'styrene',
+            weight = font === 'styrene' ? 'medium' : 'bold',
+            defaultMargins = false,
+            color,
+            className,
+            dataTestId,
+            children,
+            rowLimit,
+            styles,
+            ...restProps
+        },
+        ref,
+    ) => (
+        <Component
+            className={cn(
+                styles.component,
+                className,
+                styles[`${font}-${view}`],
+                defaultMargins && styles[`margins-${view}`],
+                styles[weight],
+                color && colors[color],
+                { [styles[`rowLimit${rowLimit}`]]: rowLimit },
+            )}
+            data-test-id={dataTestId}
+            ref={ref}
+            {...restProps}
+        >
+            {children}
+        </Component>
+    ),
+);

package/src/title/index.module.css

@@ -0,0 +1,75 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../margins.module.css';
+
+.styrene-xlarge {
+    @mixin headline_xlarge;
+}
+
+.styrene-large {
+    @mixin headline_large;
+}
+
+.styrene-medium {
+    @mixin headline_medium;
+}
+
+.styrene-small {
+    @mixin headline_small;
+}
+
+.styrene-xsmall {
+    @mixin headline_xsmall;
+}
+
+.system-xlarge {
+    @mixin headline-system_xlarge;
+}
+
+.system-large {
+    @mixin headline-system_large;
+}
+
+.system-medium {
+    @mixin headline-system_medium;
+}
+
+.system-small {
+    @mixin headline-system_small;
+}
+
+.system-xsmall {
+    @mixin headline-system_xsmall;
+}
+
+.margins-xlarge {
+    @mixin margin-large;
+}
+
+.margins-large {
+    @mixin margin-medium;
+}
+
+.margins-medium {
+    @mixin margin-medium;
+}
+
+.margins-small {
+    @mixin margin-small;
+}
+
+.margins-xsmall {
+    @mixin margin-small;
+}
+
+.rowLimit1 {
+    @mixin row_limit 1;
+    word-break: break-all;
+}
+
+.rowLimit2 {
+    @mixin row_limit 2;
+}
+
+.rowLimit3 {
+    @mixin row_limit 3;
+}

package/src/title/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+import { Title as TitleBase, TitleProps } from './component';
+
+import commonStyles from './common.module.css';
+import styles from './index.module.css';
+
+const Title: FC<TitleProps> = (props) => (
+    /**
+     * Если поменять Object.assign на деструктуризацию, то упадут тесты.
+     * Видимо, это особенность работы jest и css-modules.
+     */
+    <TitleBase {...props} styles={Object.assign(commonStyles, styles)} />
+);
+
+export { Title };
+export type { TitleProps };

package/src/title-mobile/component.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+
+import { Title, TitleProps } from '../title/component';
+
+import commonStyles from '../title/common.module.css';
+import styles from './index.module.css';
+
+export type TitleMobileProps = Omit<TitleProps, 'defaultMargins'>;
+
+export const TitleMobile: FC<TitleMobileProps> = (props) => (
+    /**
+     * Если поменять Object.assign на деструктуризацию, то упадут тесты.
+     * Видимо, это особенность работы jest и css-modules.
+     */
+    <Title {...props} styles={Object.assign(commonStyles, styles)} />
+);

package/src/title-mobile/index.module.css

@@ -0,0 +1,42 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../margins.module.css';
+
+.styrene-xlarge {
+    @mixin headline-mobile_xlarge;
+}
+
+.styrene-large {
+    @mixin headline-mobile_large;
+}
+
+.styrene-medium {
+    @mixin headline-mobile_medium;
+}
+
+.styrene-small {
+    @mixin headline-mobile_small;
+}
+
+.styrene-xsmall {
+    @mixin headline-mobile_xsmall;
+}
+
+.system-xlarge {
+    @mixin headline-system-mobile_xlarge;
+}
+
+.system-large {
+    @mixin headline-system-mobile_large;
+}
+
+.system-medium {
+    @mixin headline-system-mobile_medium;
+}
+
+.system-small {
+    @mixin headline-system-mobile_small;
+}
+
+.system-xsmall {
+    @mixin headline-system-mobile_xsmall;
+}

package/src/title-mobile/index.tsx

@@ -0,0 +1 @@
+export * from './component';

package/src/title-responsive/component.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+
+import { Title, TitleProps } from '../title/component';
+
+import commonStyles from '../title/common.module.css';
+import styles from './index.module.css';
+
+export const TitleResponsive: FC<TitleProps> = (props) => (
+    /**
+     * Если поменять Object.assign на деструктуризацию, то упадут тесты.
+     * Видимо, это особенность работы jest и css-modules.
+     */
+    <Title {...props} styles={Object.assign(commonStyles, styles)} />
+);

package/src/title-responsive/index.module.css

@@ -0,0 +1,126 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../margins.module.css';
+
+/* TODO: поменять медиа-запросы на миксины */
+
+.styrene-xlarge {
+    @mixin headline-mobile_xlarge;
+}
+
+.styrene-large {
+    @mixin headline-mobile_large;
+}
+
+.styrene-medium {
+    @mixin headline-mobile_medium;
+}
+
+.styrene-small {
+    @mixin headline-mobile_small;
+}
+
+.styrene-xsmall {
+    @mixin headline-mobile_xsmall;
+}
+
+.system-xlarge {
+    @mixin headline-system-mobile_xlarge;
+}
+
+.system-large {
+    @mixin headline-system-mobile_large;
+}
+
+.system-medium {
+    @mixin headline-system-mobile_medium;
+}
+
+.system-small {
+    @mixin headline-system-mobile_small;
+}
+
+.system-xsmall {
+    @mixin headline-system-mobile_xsmall;
+}
+
+.margins-xlarge {
+    @mixin margin-large;
+}
+
+.margins-large {
+    @mixin margin-small;
+}
+
+.margins-medium {
+    @mixin margin-small;
+}
+
+.margins-small {
+    @mixin margin-small;
+}
+
+.margins-xsmall {
+    @mixin margin-small;
+}
+
+@media screen and (min-width: 1024px) {
+    .styrene-xlarge {
+        @mixin headline_xlarge;
+    }
+
+    .styrene-large {
+        @mixin headline_large;
+    }
+
+    .styrene-medium {
+        @mixin headline_medium;
+    }
+
+    .styrene-small {
+        @mixin headline_small;
+    }
+
+    .styrene-xsmall {
+        @mixin headline_xsmall;
+    }
+
+    .system-xlarge {
+        @mixin headline-system_xlarge;
+    }
+
+    .system-large {
+        @mixin headline-system_large;
+    }
+
+    .system-medium {
+        @mixin headline-system_medium;
+    }
+
+    .system-small {
+        @mixin headline-system_small;
+    }
+
+    .system-xsmall {
+        @mixin headline-system_xsmall;
+    }
+
+    .margins-xlarge {
+        @mixin margin-large;
+    }
+
+    .margins-large {
+        @mixin margin-medium;
+    }
+
+    .margins-medium {
+        @mixin margin-medium;
+    }
+
+    .margins-small {
+        @mixin margin-small;
+    }
+
+    .margins-xsmall {
+        @mixin margin-small;
+    }
+}

package/src/title-responsive/index.tsx

@@ -0,0 +1 @@
+export * from './component';

package/src/types.ts

@@ -0,0 +1 @@
+export type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;

package/text/component.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var colors_module = require('../colors.module-a848b027.js');
+var colors_module = require('../colors.module-1c06b16d.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"paragraph":"typography__paragraph_1w6ie","paragraphWithMargins":"typography__paragraphWithMargins_1w6ie","primary-large":"typography__primary-large_1w6ie","primary-medium":"typography__primary-medium_1w6ie","primary-small":"typography__primary-small_1w6ie","secondary-large":"typography__secondary-large_1w6ie","secondary-medium":"typography__secondary-medium_1w6ie","secondary-small":"typography__secondary-small_1w6ie","component":"typography__component_1w6ie","caps":"typography__caps_1w6ie","bold":"typography__bold_1w6ie","medium":"typography__medium_1w6ie","regular":"typography__regular_1w6ie","monospace":"typography__monospace_1w6ie","rowLimit1":"typography__rowLimit1_1w6ie","rowLimit2":"typography__rowLimit2_1w6ie","rowLimit3":"typography__rowLimit3_1w6ie"};
+var styles = {"paragraph":"typography__paragraph_pm003","paragraphWithMargins":"typography__paragraphWithMargins_pm003","primary-large":"typography__primary-large_pm003","primary-medium":"typography__primary-medium_pm003","primary-small":"typography__primary-small_pm003","secondary-large":"typography__secondary-large_pm003","secondary-medium":"typography__secondary-medium_pm003","secondary-small":"typography__secondary-small_pm003","component":"typography__component_pm003","caps":"typography__caps_pm003","bold":"typography__bold_pm003","medium":"typography__medium_pm003","regular":"typography__regular_pm003","monospace":"typography__monospace_pm003","rowLimit1":"typography__rowLimit1_pm003","rowLimit2":"typography__rowLimit2_pm003","rowLimit3":"typography__rowLimit3_pm003"};
 require('./index.css')
 
 var Text = React.forwardRef(function (_a, ref) {