feat(core-components-typography): add responsive title (#362)

* style(core-components-typography): rename to lower case

* feat(core-components-typography): add title responsive

* docs(core-components-typography): add todo

* feat(core-components-typography): add styles

packages/amount/src/component.stories.mdx

@@ -4,7 +4,7 @@ import { Container, Row, Col } from 'storybook/blocks/grid';
 import { ComponentHeader } from 'storybook/blocks/component-header';
 
 import { Amount } from '.';
-import { Typography } from '../../typography/src/Component';
+import { Typography } from '../../typography/src';
 import { getAllCurrencyCodes } from '@alfalab/utils';
 import { name, version } from '../package.json';
 

packages/typography/src/Component.stories.mdx → packages/typography/src/component.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
 import { text, boolean, select, number } from '@storybook/addon-knobs';
 import { ComponentHeader } from 'storybook/blocks/component-header';
 
-import { Typography } from './Component';
+import { Typography } from './component';
 import { name, version } from '../package.json';
 import { colors } from './colors';
 
@@ -32,6 +32,26 @@ import { colors } from './colors';
     })}
 </Story>
 
+<Story name='Typography.TitleResponsive'>
+    {React.createElement(() => {
+        const VIEW_TYPES = [
+            'xlarge',
+            'large',
+            'medium',
+            'small',
+            'xsmall',
+        ];
+        const color = select('color', colors, '');
+        const weight = select('weight', ['regular', 'medium', 'bold'], 'medium');
+        const font = select('font', ['styrene', 'system'], 'styrene');
+        return VIEW_TYPES.map(view => (
+            <Typography.TitleResponsive view={view} color={color} weight={weight} font={font} key={view}>
+                заголовок view='{view}'
+            </Typography.TitleResponsive>
+        ))
+    })}
+</Story>
+
 <Story name='Typography.Text'>
     {React.createElement(() => {
         const VIEW_TYPES = [
@@ -110,6 +130,31 @@ import { Typography } from '@alfalab/core-components-typography';
     })}
 </Preview>
 
+## Typography.TitleResponsive
+
+<Typography.TitleResponsive>Адаптивный заголовок для шрифта styrene</Typography.TitleResponsive>
+<Typography.TitleResponsive font='system'>Адаптивный заголовок для шрифта system</Typography.TitleResponsive>
+
+<Preview>
+    {React.createElement(() => {
+        const VIEW_TYPES = [
+            'xlarge',
+            'large',
+            'medium',
+            'small',
+            'xsmall',
+        ];
+        const color = select('color', colors, '');
+        const weight = select('weight', ['regular', 'medium', 'bold'], 'medium');
+        const font = select('font', ['styrene', 'system'], 'styrene');
+        return VIEW_TYPES.map(view => (
+            <Typography.TitleResponsive view={view} color={color} weight={weight} font={font} key={view}>
+                заголовок view='{view}'
+            </Typography.TitleResponsive>
+        ))
+    })}
+</Preview>
+
 ## Typography.Text
 
 Компонент для оформления текста. Позволяет задать внешний вид, тэг и цвет текста.

packages/typography/src/component.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+import { Title, TitleProps } from './title';
+import { Text, TextProps } from './text';
+import { TitleResponsive } from './title-responsive';
+
+export const Typography: {
+    Title: FC<TitleProps>;
+    Text: FC<TextProps>;
+    TitleResponsive: FC<TitleProps>;
+} = {
+    Title,
+    Text,
+    TitleResponsive,
+};

packages/typography/src/index.ts

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

packages/typography/src/text/index.ts

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

packages/typography/src/title-responsive/component.tsx

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

packages/typography/src/title-responsive/index.module.css

@@ -0,0 +1,127 @@
+@import '../../../themes/src/default.css';
+
+/* TODO: поменять медиа-запросы на миксины */
+
+.styrene-xlarge {
+    @mixin headline_medium;
+}
+
+.styrene-large {
+    @mixin headline_small;
+}
+
+.styrene-medium {
+    @mixin headline_xsmall;
+}
+
+.styrene-small {
+    @mixin headline_xsmall;
+}
+
+.styrene-xsmall {
+    @mixin headline_xsmall;
+}
+
+.system-xlarge {
+    @mixin headline-system_medium;
+}
+
+.system-large {
+    @mixin headline-system_small;
+}
+
+.system-medium {
+    @mixin headline-system_xsmall;
+}
+
+.system-small {
+    @mixin headline-system_xsmall;
+}
+
+.system-xsmall {
+    @mixin headline-system_xsmall;
+}
+
+@media screen and (min-width: 600px) {
+    .styrene-xlarge {
+        @mixin headline_large;
+    }
+
+    .styrene-large {
+        @mixin headline_medium;
+    }
+
+    .styrene-medium {
+        @mixin headline_small;
+    }
+
+    .styrene-small {
+        @mixin headline_small;
+    }
+
+    .styrene-xsmall {
+        @mixin headline_xsmall;
+    }
+
+    .system-xlarge {
+        @mixin headline-system_large;
+    }
+
+    .system-large {
+        @mixin headline-system_medium;
+    }
+
+    .system-medium {
+        @mixin headline-system_small;
+    }
+
+    .system-small {
+        @mixin headline-system_small;
+    }
+
+    .system-xsmall {
+        @mixin headline-system_xsmall;
+    }
+}
+
+@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;
+    }
+}

packages/typography/src/title-responsive/index.tsx

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

packages/typography/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;
+}

packages/typography/src/title/Component.tsx → packages/typography/src/title/component.tsx

@@ -2,7 +2,6 @@ import cn from 'classnames';
 import React from 'react';
 import { Color } from '../colors';
 
-import styles from './index.module.css';
 import colors from '../colors.module.css';
 
 export type TitleProps = {
@@ -47,7 +46,13 @@ export type TitleProps = {
     children?: React.ReactNode;
 };
 
-export const Title: React.FC<TitleProps> = ({
+type Styles = {
+    styles: {
+        [key: string]: string;
+    };
+};
+
+export const Title: React.FC<TitleProps & Styles> = ({
     tag: Component = 'div',
     view = 'medium',
     font = 'styrene',
@@ -56,7 +61,8 @@ export const Title: React.FC<TitleProps> = ({
     className,
     dataTestId,
     children,
-}: TitleProps): React.ReactElement => (
+    styles,
+}) => (
     <Component
         className={cn(
             styles.component,

packages/typography/src/title/index.module.css

@@ -1,10 +1,5 @@
 @import '../../../themes/src/default.css';
 
-.component {
-    margin: 0;
-    padding: 0;
-}
-
 .styrene-xlarge {
     @mixin headline_xlarge;
 }
@@ -44,15 +39,3 @@
 .system-xsmall {
     @mixin headline-system_xsmall;
 }
-
-.bold {
-    font-weight: bold;
-}
-
-.medium {
-    font-weight: 500;
-}
-
-.regular {
-    font-weight: normal;
-}

packages/typography/src/title/index.tsx

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