Notification

<Notification type="info" title="Info" shadowLevel="zero">
  Уведомление типа info
</Notification>
<Notification type="success" title="Success" shadowLevel="zero">
  Уведомление типа success
</Notification>
<Notification type="warning" title="Warning" shadowLevel="zero">
  Уведомление типа warning
</Notification>
<Notification type="error" title="Error" shadowLevel="zero">
  Уведомление типа error
</Notification>

<Notification
  type="info"
  title="Info"
  shadowLevel="default"
  isColored={false}
>
  Уведомление типа info с белым фоном
</Notification>
<Notification
  type="success"
  title="Success"
  shadowLevel="default"
  isColored={false}
>
  Уведомление типа success с белым фоном
</Notification>
<Notification
  type="warning"
  title="Warning"
  shadowLevel="default"
  isColored={false}
>
  Уведомление типа warning с белым фоном
</Notification>
<Notification
  type="error"
  title="Error"
  shadowLevel="default"
  isColored={false}
>
  Уведомление типа error с белым фоном
</Notification>

<Notification type="info" title="shadowLevel=zero" shadowLevel="zero">
  Уровень тени zero
</Notification>
<Notification
  type="info"
  title="shadowLevel=default"
  shadowLevel="default"
  isColored={false}
>
  Уровень тени default
</Notification>
<Notification type="info" title="shadowLevel=hover" shadowLevel="hover">
  Уровень тени hover
</Notification>
<Notification
  type="info"
  title="shadowLevel=pressed"
  shadowLevel="pressed"
  isColored={false}
>
  Уровень тени pressed
</Notification>

<Notification type="info" title="Info" shadowLevel="zero" icon={<Send />}>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification
  type="info"
  title="Info"
  shadowLevel="default"
  isColored={false}
  icon={<Send />}
>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification
  type="success"
  title="Success"
  shadowLevel="zero"
  icon={<Sended />}
>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification
  type="success"
  title="Success"
  shadowLevel="default"
  isColored={false}
  icon={<Sended />}
>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification
  type="warning"
  title="Warning"
  shadowLevel="zero"
  icon={<Rating1 />}
>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification
  type="warning"
  title="Warning"
  shadowLevel="default"
  isColored={false}
  icon={<Rating1 />}
>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification type="error" title="Error" shadowLevel="zero" icon={<Cancel />}>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>
<Notification
  type="error"
  title="Error"
  shadowLevel="default"
  isColored={false}
  icon={<Cancel />}
>
  Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового
  цвета уведомления
</Notification>

<Notification
  type="info"
  title="Для всех типов, кроме error с цветным фоном"
  shadowLevel="default"
  link="Cсылка зеленого цвета"
  target="_blank"
  href="/"
  isColored={false}
>
  Текст уведомления
</Notification>
<Notification
  type="error"
  title="Для типа error с цветным фоном"
  link="Cсылка белого цвета"
  href="/"
  target="_blank"
>
  Текст уведомления
</Notification>

<Notification
  type="info"
  title="Заголовок уведомления"
  shadowLevel="default"
  link="Cсылка на новую страницу"
  target="_blank"
  href="/"
  target="_blank"
  isColored={false}
/>

<DemoNotificationWrapper>
  {({ initialClickAmount, onLinkClick }) => (
    <Notification
      type="info"
      title="Заголовок уведомления"
      shadowLevel="zero"
      link="Cсылка с обработчиком"
      onLinkClick={onLinkClick}
    >
      {`Количество кликов: ${initialClickAmount}`}
    </Notification>
  )}
</DemoNotificationWrapper>

<Notification
  type="info"
  shadowLevel="default"
  isColored={false}
  link="Cсылка на новую страницу"
  href="/"
  target="_blank"
>
  Отсутствует заголовок
</Notification>
<Notification
  type="info"
  title="Отсутствует дополнительный текст"
  shadowLevel="default"
  isColored={false}
  link="Cсылка на новую страницу"
  href="/"
  target="_blank"
/>

<Notification
  type="info"
  title="Для всех типов, кроме error с цветным фоном"
  shadowLevel="default"
  buttonText="Зеленая кнопка"
  isColored={false}
>
  Текст уведомления
</Notification>
<Notification
  type="error"
  title="Для типа error с цветным фоном"
  buttonText="Белая кнопка"
>
  Текст уведомления
</Notification>

<Notification
  type="info"
  title="Кнопка + ссылка"
  shadowLevel="default"
  buttonText="Кнопка"
  link="Ссылка"
  target="_blank"
  href="/"
  onButtonClick={() => {}}
>
  Выравниваются по левому краю контента.
</Notification>
<Notification
  type="warning"
  title="Кнопка + расхлоп"
  shadowLevel="default"
  buttonText="Подключить"
  shortText="Короткий текст уведомления"
  isCollapseOpened
  onButtonClick={() => {}}
>
  Кнопка выравнивается по левому краю, расхлоп - по правому краю.
</Notification>

<DemoNotificationWrapper>
  {({ initialClickAmount, onButtonClick }) => (
    <Notification
      type="info"
      title="Заголовок уведомления"
      shadowLevel="zero"
      buttonText="Кнопка с обработчиком"
      onButtonClick={onButtonClick}
    >
      {`Количество кликов: ${initialClickAmount}`}
    </Notification>
  )}
</DemoNotificationWrapper>

<Notification
  type="info"
  title="По умолчанию расхлоп изначально закрыт"
  shadowLevel="default"
  buttonText="Подключить"
  shortText="Здание было красивым и странным: оно напоминало жилище эльфов"
>
  Здание было красивым и странным: оно напоминало не то жилище эльфов, не то
  замок рыцарей-монахов. Белые шпили, стрельчатые окна, легкие мраморные
  беседки
</Notification>

<Notification
  type="success"
  title="По умолчанию расхлоп изначально закрыт"
  shadowLevel="default"
  buttonText="Подключить"
  shortText="Здание было красивым и странным: оно напоминало жилище эльфов"
  closeCollapseTitle="Показать весь текст"
  openCollapseTitle=" Скрыть часть текста"
>
  Здание было красивым и странным: оно напоминало не то жилище эльфов, не то
  замок рыцарей-монахов. Белые шпили, стрельчатые окна, легкие мраморные
  беседки
</Notification>

<Notification
  type="info"
  title="Изначально открыт"
  shadowLevel="default"
  isColored={false}
  isCollapseOpened
  shortText="Устанавливает только начальное состояние расхлопа"
>
  Устанавливает только начальное состояние расхлопа. Управляется только по
  кнопке расхлопа.
</Notification>
<DemoNotificationWrapper>
  {({ isCollapseOpen, onWrapperButtonClick, onCollapseButtonClick }) => (
    <div>
      <Notification
        type="info"
        title="Изначально открыт"
        shadowLevel="default"
        isColored={false}
        isCollapseOpened={isCollapseOpen}
        shortText="Есть управление состоянием расхлопа извне"
        onCollapseButtonClick={onCollapseButtonClick}
      >
        Есть управление состоянием расхлопа извне. Управлять состоянием
        расхлопа можно по внешней кнопке, либо по основной кнопке расхлопа.
      </Notification>
      <div style={{ marginTop: '15px' }}>
        <Button onClick={onWrapperButtonClick}>Внешнее управление</Button>
      </div>
    </div>
  )}
</DemoNotificationWrapper>

<DemoNotificationWrapper>
  {({ initialClickAmount, onClose }) => (
    <Notification
      type="error"
      title="Кнопка закрытия с обработчиком"
      shadowLevel="default"
      hasCloseButton
      isColored={false}
      onClose={onClose}
    >
      {`Количество кликов: ${initialClickAmount}`}
    </Notification>
  )}
</DemoNotificationWrapper>

<Notification type="info" shadowLevel="zero" hasCloseButton>
  Если высота контента больше высоты иконки, то они выравниваются по верхнему
  краю контентной области.
</Notification>
<Notification type="info" shadowLevel="zero" hasCloseButton>
  Центрирование по вертикали при небольшой высоте текста.
</Notification>

<Notification
  type="info"
  shadowLevel="zero"
  title="Переход на<br>новую строку"
  shortText="Переход на<br>новую строку"
></Notification>
<Notification
  type="info"
  shadowLevel="zero"
  title="Текст"
  shortText="Текст с <b>жирным</b> начертаниием"
></Notification>
<Notification
  type="info"
  shadowLevel="zero"
  title={fontText}
  shortText={fontText}
></Notification>
<Notification
  type="info"
  shadowLevel="zero"
  title={hrefText}
  shortText={hrefText}
></Notification>
<Notification
  type="info"
  shadowLevel="zero"
  title="Неразрывный&nbspпробел"
  shortText="Неразрывный&nbspпробел"
></Notification>