@shopgate/engage
Version:
Shopgate's ENGAGE library.
62 lines (61 loc) • 1.52 kB
JavaScript
import React from 'react';
import { css } from 'glamor';
import PropTypes from 'prop-types';
import { ResponsiveContainer } from '@shopgate/engage/components';
import { i18n } from "../../../core/helpers/i18n";
import { ResponsiveBackButton } from "../ResponsiveBackButton";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
title: css({
padding: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end'
}),
headline: css({
fontSize: '2.125rem',
fontWeight: 'normal',
margin: 0,
lineHeight: '2.25rem'
}),
step: css({
fontSize: '1rem',
lineHeight: 1,
color: 'var(--color-secondary)',
paddingLeft: 16,
margin: 0,
fontWeight: '400',
paddingBottom: 2
})
};
/**
* CheckoutSection component
* @returns {JSX}
*/
const CheckoutTitle = ({
stepFrom,
stepTo,
headline
}) => /*#__PURE__*/_jsxs(ResponsiveContainer, {
webOnly: true,
breakpoint: ">xs",
children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsxs("div", {
className: styles.title,
children: [/*#__PURE__*/_jsx("h1", {
className: styles.headline,
children: i18n.text(headline)
}), stepFrom !== null ? /*#__PURE__*/_jsx("h2", {
className: styles.step,
children: i18n.text('checkout.steps', {
from: stepFrom,
to: stepTo
})
}) : null]
})]
});
CheckoutTitle.defaultProps = {
stepFrom: null,
stepTo: null,
headline: 'titles.checkout'
};
export default CheckoutTitle;