Составной компонент

Что делаем: добавляем компонент Card с заголовком и содержимым и пишем для него первую историю. Это единственный урок, где меняются сразу два файла: компонент и его история.

Содержимое как пропс children

У кнопки все пропсы простые: строки и флаги. У карточки есть children — то, что кладут внутрь. Для Storybook это такой же пропс, и в args он тоже указывается:

 
export const Default: Story = {
 
  args: {
 
    title: 'Новый заказ',
 
    children: 'Заказ №1024 ждёт подтверждения.',
 
  },
 
};

Простой текст в children работает сразу, и панель Controls покажет для него текстовое поле. Но настоящая карточка редко держит только текст, и тогда одних args не хватает.

Попробуйте

Откройте раздел Components / Card и измените children в панели Controls. Какой текст оказался самым длинным из тех, что ещё помещаются в карточку?

Во второй части мы оставляем в стороне состояния кнопки и работаем с окружением: контентом, декораторами и настройками всего проекта.