Эта статья является частью 2 серии Как начать с Gatsby JS.

Шаг 5. Типографика - динамический компонент и стилизованная система

Что касается типографики, сначала я думаю о создании компонента для каждого стиля текста и его импорте по мере необходимости.

Однако не все текстовые стили имеют одинаковые HTML-теги. Подготовка нескольких одинаковых текстовых стилей с другими тегами кажется не лучшим решением.

К счастью, Dynamic Component позволяет применять к компоненту любой HTML-элемент.

Чтобы создать типографику, используйте Styled System - отзывчивый, основанный на теме стиль реквизита для создания систем дизайна с React. Стилизованная система работает со стилизованным компонентом и большинством других библиотек css-in-js.

Первый шаг - установить в системном стиле через yarn. Пожалуйста, запустите эту команду в терминале:

$ yarn add styled-system

Создайте DynamicComponent.js в глобальном каталоге.

Импортируйте необходимые функции стиля из системы стилей и добавьте их в аргумент стилей компонента. У этого компонента будет четыре доступных свойства стиля: fontSize, color, fontWeight и lineHeight.

global / DynamicComponent.js

import styled from 'styled-components';
import {
  lineHeight,
  fontSize,
  color,
  fontWeight,
} from 'styled-system';
const StyledDynamicComponent = styled.p`
  ${lineHeight}
  ${fontSize}
  ${color}
  ${fontWeight}
`;
export default StyledDynamicComponent;

По умолчанию я установил свой StyledDynamicComponent как абзац.

Перейдите в theme / index.js и создайте объект textStyles (в существующем объекте темы), включая стили для заголовка и стиль текста. После добавления ThemeProvider StyledDynamicComponent имеет доступ к свойствам, определенным в объекте textStyles.

textStyles: {
  heading1: {
    fontSize: ['32px', '42px', '52px'],
    color: '#000',
    fontWeight: 800,
  },  
  textStyle1: {
    fontSize: '16px',
    color: '#000',
    fontWeight: 400,
    lineHeight: '1.4',
  },
},

Все функции styled-system принимают массивы в качестве значений для быстрой установки стилей с использованием подхода, ориентированного на мобильные устройства. На четвертом шаге (о медиа-запросах) этого руководства я определил массив точек останова. Теперь массив fontSize установит размер шрифта на соответствующую ширину экрана.

Пришло время создать компонент стиля заголовка и текста с помощью DynamicComponent. Перейдите в components / Typography / index.js.

import styled from 'styled-components'
import DynamicComponent from '../../global/DynamicComponent';
import theme from '../../theme';
const {
  heading1,
  textStyle1
} = theme.textStyles;
const createTypoComponent = props => {
  const TypoComponent = styled(DynamicComponent)``
  TypoComponent.defaultProps = {
    ...props,
  };
  return TypoComponent
};
export const Heading1 = createTypoComponent(heading1);
export const TextStyle1 = createTypoComponent(textStyle1);

Давайте визуализируем заголовок с тегом h1, используя ‘as’ и TextStyle с абзацем по умолчанию.

pages / index.js

import { Heading1, TextStyle1 } from '../components/Typography';
const IndexPage = () => (
  <ThemeProvider theme={theme}>
    <Layout>
      <Header/>
      <Heading1 as="h1">This is Heading1 with H1 tag</Heading1>
      <TextStyle1>This is TextStyle1 with p tag by default</TextStyle1>
    </Layout>
  </ThemeProvider>
);

В результате вы получили отзывчивый компонент с возможностью управления тегом.

Вы можете переопределить значение стиля вашей темы или добавить новое свойство.

<TextStyle1 color="#fff" bg="#744c9d">This is TextStyle1 with p tag</TextStyle1>

Результат:

Наконец, добавьте в истории типографику.
Typography / index.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Heading1, TextStyle1 } from '../Typography';
storiesOf('Typography', module)
  .add('headings', () => (
    <Heading1>Heading1</Heading1>
  ))
  .add('text styles', () => (
    <TextStyle1>TextStyle1</TextStyle1>
  ));

И проверьте свой сборник рассказов:

Продолжение следует…

На этом пока все.

В последней части вы узнаете о Gatsby Image.