Onboarding: Use Icon component to render question or close icon

This commit is contained in:
Gustav Hansen 2022-12-20 16:52:21 +01:00
parent f59eb88595
commit d6fb50c7f4

View File

@ -1,8 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { Box, FocusTrap, Typography } from '@strapi/design-system'; import { Box, FocusTrap, Typography, Icon } from '@strapi/design-system';
import { Book, Cross, Information, Question } from '@strapi/icons'; import { Book, Cross, Information, Question } from '@strapi/icons';
import { pxToRem } from '@strapi/helper-plugin';
import { useConfigurations } from '../../../hooks'; import { useConfigurations } from '../../../hooks';
@ -94,13 +95,20 @@ const Onboarding = () => {
<OnboardingWrapper as="aside"> <OnboardingWrapper as="aside">
<Button <Button
id="onboarding" id="onboarding"
aria-label={formatMessage({ aria-label={formatMessage(
id: 'app.components.Onboarding.help.button', isOpen
defaultMessage: 'Help button', ? {
})} id: 'app.components.Onboarding.help.button-close',
defaultMessage: 'Close help menu',
}
: {
id: 'app.components.Onboarding.help.button',
defaultMessage: 'Open help menu',
}
)}
onClick={handleClick} onClick={handleClick}
> >
{isOpen ? <Cross /> : <Question />} <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
</Button> </Button>
{/* FIX ME - replace with popover when overflow popover is fixed {/* FIX ME - replace with popover when overflow popover is fixed