github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Guided onboarding] Fix card footer button markup (#145050)

Browse source
This commit is contained in:
Muhammad Ibragimov 2022-11-14 20:10:53 +05:00 • committed by GitHub
parent 6ac78d740e
commit 94437f8add
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 98 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

126
packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap generated
View file

@ -12,8 +12,32 @@ exports[`guide card footer snapshots should render the footer when the guide has
<EuiSpacer
size="l"
/>
<div
className="eui-textCenter"
<EuiFlexGroup
justifyContent="center"
>
<EuiFlexItem
grow={false}
>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--view--search"
fill={true}
onClick={[Function]}
size="m"
>
View guide
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
`;
exports[`guide card footer snapshots should render the footer when the guide has not started yet 1`] = `
<EuiFlexGroup
justifyContent="center"
>
<EuiFlexItem
grow={false}
>
<EuiButton
color="primary"
@ -24,24 +48,8 @@ exports[`guide card footer snapshots should render the footer when the guide has
>
View guide
</EuiButton>
</div>
</Fragment>
`;
exports[`guide card footer snapshots should render the footer when the guide has not started yet 1`] = `
<div
className="eui-textCenter"
>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--view--search"
fill={true}
onClick={[Function]}
size="m"
>
View guide
</EuiButton>
</div>
</EuiFlexItem>
</EuiFlexGroup>
`;
exports[`guide card footer snapshots should render the footer when the guide is in progress 1`] = `
@ -69,19 +77,23 @@ exports[`guide card footer snapshots should render the footer when the guide is
<EuiSpacer
size="l"
/>
<div
className="eui-textCenter"
<EuiFlexGroup
justifyContent="center"
>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--continue--search"
fill={true}
onClick={[Function]}
size="m"
<EuiFlexItem
grow={false}
>
Continue
</EuiButton>
</div>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--continue--search"
fill={true}
onClick={[Function]}
size="m"
>
Continue
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
`;
@ -110,34 +122,42 @@ exports[`guide card footer snapshots should render the footer when the guide is
<EuiSpacer
size="l"
/>
<div
className="eui-textCenter"
<EuiFlexGroup
justifyContent="center"
>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--continue--search"
fill={true}
onClick={[Function]}
size="m"
<EuiFlexItem
grow={false}
>
Continue
</EuiButton>
</div>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--continue--search"
fill={true}
onClick={[Function]}
size="m"
>
Continue
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
`;
exports[`guide card footer snapshots should render the footer when the guided onboarding has not started yet 1`] = `
<div
className="eui-textCenter"
<EuiFlexGroup
justifyContent="center"
>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--view--search"
fill={true}
onClick={[Function]}
size="m"
<EuiFlexItem
grow={false}
>
View guide
</EuiButton>
</div>
<EuiButton
color="primary"
data-test-subj="onboarding--guideCard--view--search"
fill={true}
onClick={[Function]}
size="m"
>
View guide
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
`;

46
packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx
View file

@ -8,7 +8,7 @@
import React from 'react';
import { css } from '@emotion/react';
import { EuiButton, EuiProgress, EuiSpacer } from '@elastic/eui';
import { EuiButton, EuiProgress, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { GuideId, GuideState } from '../../types';
import { UseCase } from './use_case_card';
@ -54,16 +54,18 @@ export interface GuideCardFooterProps {
export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFooterProps) => {
const guideState = guides.find((guide) => guide.guideId === (useCase as GuideId));
const viewGuideButton = (
<div className="eui-textCenter">
<EuiButton
// Used for FS tracking
data-test-subj={`onboarding--guideCard--view--${useCase}`}
fill
onClick={() => activateGuide(useCase, guideState)}
>
{viewGuideLabel}
</EuiButton>
</div>
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButton
// Used for FS tracking
data-test-subj={`onboarding--guideCard--view--${useCase}`}
fill
onClick={() => activateGuide(useCase, guideState)}
>
{viewGuideLabel}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
);
// guide has not started yet
if (!guideState || guideState.status === 'not_started') {
@ -108,16 +110,18 @@ export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFoo
}}
/>
<EuiSpacer size="l" />
<div className="eui-textCenter">
<EuiButton
// Used for FS tracking
data-test-subj={`onboarding--guideCard--continue--${useCase}`}
fill
onClick={() => activateGuide(useCase, guideState)}
>
{continueGuideLabel}
</EuiButton>
</div>
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButton
// Used for FS tracking
data-test-subj={`onboarding--guideCard--continue--${useCase}`}
fill
onClick={() => activateGuide(useCase, guideState)}
>
{continueGuideLabel}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</>
);
};