@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BaggageInfo/InfoBox.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import BaggageChecked from '@kiwicom/orbit-components/lib/icons/BaggageChecked';
import Text from '@kiwicom/nitro/lib/components/Text';
import Translate from '@kiwicom/nitro/lib/components/Translate';

// FIXME use orbit components
const styles = css`
  div.baggageCard {
    margin-top: 22px;
    width: 100%;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #e8edf1;
    margin-bottom: 24px;
  }
  div.iconTitle {
    margin: 25px 12px 8.6px 24px;
    display: inline-block;
  }
  h1.title {
    vertical-align: middle;
    display: inline-block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #171b1e;
  }
  div.subtitle {
    margin-left: 24px;
    margin-bottom: 24px;
  }

  :global([dir='rtl']) div.subtitle {
    margin-right: 15px;
  }
`;

type Props = {|
  children: React.Node,
|};

const InfoBox = ({ children }: Props) => (
  <div className="baggageCard">
    <div className="iconTitle">
      <BaggageChecked customColor="black" />
    </div>
    <h1 className="title">
      <Translate t="smartfaq.baggage_info.title" />
    </h1>
    <div className="subtitle">
      <Text type="attention" t="smartfaq.baggage_info.subtitle" />
    </div>
    {children}
    <style jsx>{styles}</style>
  </div>
);

export default InfoBox;