2022-11-16 18:41:15 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
|
|
|
|
|
|
import {
|
2023-05-03 15:50:06 +02:00
|
|
|
TextVariant,
|
2023-02-02 21:15:26 +01:00
|
|
|
Color,
|
2023-08-01 23:37:16 +02:00
|
|
|
BlockSize,
|
|
|
|
Display,
|
2023-02-27 17:42:02 +01:00
|
|
|
AlignItems,
|
|
|
|
IconColor,
|
2023-05-03 15:50:06 +02:00
|
|
|
TextColor,
|
2022-11-16 18:41:15 +01:00
|
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
|
|
|
|
|
|
|
|
import { hideBetaHeader } from '../../../store/actions';
|
2023-07-20 00:32:35 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
ButtonIcon,
|
|
|
|
ButtonIconSize,
|
|
|
|
IconName,
|
|
|
|
Text,
|
2023-08-01 23:37:16 +02:00
|
|
|
Box,
|
2023-07-20 00:32:35 +02:00
|
|
|
} from '../../component-library';
|
2022-11-16 18:41:15 +01:00
|
|
|
|
|
|
|
const BetaHeader = () => {
|
|
|
|
const t = useI18nContext();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box
|
2023-08-01 23:37:16 +02:00
|
|
|
display={Display.Flex}
|
|
|
|
width={BlockSize.Full}
|
2023-02-02 21:15:26 +01:00
|
|
|
backgroundColor={Color.warningDefault}
|
2022-11-16 18:41:15 +01:00
|
|
|
padding={2}
|
|
|
|
className="beta-header"
|
2023-02-27 17:42:02 +01:00
|
|
|
alignItems={AlignItems.center}
|
2022-11-16 18:41:15 +01:00
|
|
|
>
|
2023-05-03 15:50:06 +02:00
|
|
|
<Text
|
|
|
|
variant={TextVariant.bodySm}
|
|
|
|
as="h6"
|
2022-11-16 18:41:15 +01:00
|
|
|
className="beta-header__message"
|
2023-05-03 15:50:06 +02:00
|
|
|
color={TextColor.warningInverse}
|
2022-11-16 18:41:15 +01:00
|
|
|
>
|
|
|
|
{t('betaHeaderText', [
|
|
|
|
<a
|
|
|
|
href={BETA_BUGS_URL}
|
|
|
|
key="link"
|
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer noopener"
|
|
|
|
>
|
|
|
|
{t('here')}
|
|
|
|
</a>,
|
|
|
|
])}
|
2023-05-03 15:50:06 +02:00
|
|
|
</Text>
|
2023-02-27 17:42:02 +01:00
|
|
|
<ButtonIcon
|
2023-04-19 23:16:49 +02:00
|
|
|
iconName={IconName.Close}
|
|
|
|
size={ButtonIconSize.Sm}
|
2023-02-27 17:42:02 +01:00
|
|
|
color={IconColor.warningInverse}
|
2022-11-16 18:41:15 +01:00
|
|
|
className="beta-header__button"
|
|
|
|
data-testid="beta-header-close"
|
|
|
|
onClick={() => {
|
|
|
|
hideBetaHeader();
|
|
|
|
}}
|
|
|
|
aria-label={t('close')}
|
2023-02-27 17:42:02 +01:00
|
|
|
/>
|
2022-11-16 18:41:15 +01:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BetaHeader;
|