[Guided onboarding] Landing pages design follow ups (elastic#150084)

## Summary
Fixes elastic#149695
Follow up to elastic#149528

This PR fixes minor design issues on the new landing page: 
- Adds a `document` icon to cards that on click redirect the user to a
Kibana page (not the guide cards)
- Updates the color of the icon for completed guide card to match the
header button (as per @cindychangy's
[comment](elastic#149528 (comment)))
- Adds linebreaks to prevent one word dangling on the new line (as per
@osmanis's
[comment](elastic#149528 (comment)))
- Fixes the layout of the completed guide card and all cards on the page
for small screens. See screenshots below

### Screenshots
#### Before (large screens)
<img width="1333" alt="Screenshot 2023-02-01 at 17 58 11"
src="https://user-images.githubusercontent.com/6585477/216111021-32ee8162-5cf8-4948-8f1d-aa3790e6a7f9.png">

#### After (large screens)
<img width="1300" alt="Screenshot 2023-02-01 at 18 01 16"
src="https://user-images.githubusercontent.com/6585477/216111153-d22feadd-1796-4b20-9e97-f7e0b025c42d.png">

#### Before (small screens)
<img width="627" alt="Screenshot 2023-02-01 at 17 58 20"
src="https://user-images.githubusercontent.com/6585477/216111189-08d3cd2b-bd75-4d6b-9f52-8d74623cbe35.png">

#### After (small screens)
<img width="561" alt="Screenshot 2023-02-01 at 18 01 24"
src="https://user-images.githubusercontent.com/6585477/216111209-6dafed8a-d398-4090-a23f-af570b684d33.png">


### Checklist
- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

packages/kbn-guided-onboarding/src/components/landing_page/guide_card.tsx

@@ -9,7 +9,15 @@
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/react';
 
-import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiTextColor } from '@elastic/eui';
+import {
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+  EuiTextColor,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { GuideState } from '../../types';
@@ -55,6 +63,7 @@ export const GuideCard = ({
   activeFilter,
 }: GuideCardsProps & { card: GuideCardConstants }) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { euiTheme } = useEuiTheme();
   let guideState: GuideState | undefined;
   if (card.guideId) {
     guideState = guidesState.find((state) => state.guideId === card.guideId);
@@ -102,9 +111,9 @@ export const GuideCard = ({
             </EuiTextColor>
           )}
           {isComplete && (
-            <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
               <EuiFlexItem grow={false}>
-                <EuiIcon type="checkInCircleFilled" color="success" />
+                <EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <small>
@@ -115,6 +124,7 @@ export const GuideCard = ({
               </EuiFlexItem>
             </EuiFlexGroup>
           )}
+          {card.navigateTo && <EuiIcon type="document" />}
         </>
       }
     />

packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.ts → packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx

@@ -7,12 +7,14 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React, { ReactNode } from 'react';
 import { GuideId } from '../../..';
 import { GuideCardSolutions } from './guide_cards';
 
 export interface GuideCardConstants {
   solution: GuideCardSolutions;
-  title: string;
+  title: string | ReactNode;
   // if present, guideId indicates which guide is opened when clicking the card
   guideId?: GuideId;
   // if present, navigateTo indicates where the user will be redirected, when clicking the card
@@ -30,9 +32,15 @@ export interface GuideCardConstants {
 export const guideCards: GuideCardConstants[] = [
   {
     solution: 'search',
-    title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.appSearch.title', {
-      defaultMessage: 'Build an application on top of Elasticsearch',
-    }),
+    title: (
+      <FormattedMessage
+        id="guidedOnboardingPackage.gettingStarted.cards.appSearch.title"
+        defaultMessage="Build an application on {lineBreak} top of Elasticsearch"
+        values={{
+          lineBreak: <br />,
+        }}
+      />
+    ),
     guideId: 'appSearch',
     telemetryId: 'onboarding--search--application',
     order: 1,
@@ -48,9 +56,15 @@ export const guideCards: GuideCardConstants[] = [
   },
   {
     solution: 'search',
-    title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.databaseSearch.title', {
-      defaultMessage: 'Search across databases and business systems',
-    }),
+    title: (
+      <FormattedMessage
+        id="guidedOnboardingPackage.gettingStarted.cards.databaseSearch.title"
+        defaultMessage="Search across databases and {lineBreak} business systems"
+        values={{
+          lineBreak: <br />,
+        }}
+      />
+    ),
     guideId: 'databaseSearch',
     telemetryId: 'onboarding--search--database',
     order: 7,
@@ -69,9 +83,15 @@ export const guideCards: GuideCardConstants[] = [
   },
   {
     solution: 'observability',
-    title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.apmObservability.title', {
-      defaultMessage: 'Monitor my application performance (APM / tracing)',
-    }),
+    title: (
+      <FormattedMessage
+        id="guidedOnboardingPackage.gettingStarted.cards.apmObservability.title"
+        defaultMessage="Monitor my application {lineBreak} performance (APM / tracing)"
+        values={{
+          lineBreak: <br />,
+        }}
+      />
+    ),
     navigateTo: {
       appId: 'home',
       path: '#/tutorial/apm',
@@ -105,18 +125,30 @@ export const guideCards: GuideCardConstants[] = [
   },
   {
     solution: 'security',
-    title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.siemSecurity.title', {
-      defaultMessage: 'Detect threats in my data with SIEM',
-    }),
+    title: (
+      <FormattedMessage
+        id="guidedOnboardingPackage.gettingStarted.cards.siemSecurity.title"
+        defaultMessage="Detect threats in my {lineBreak} data with SIEM"
+        values={{
+          lineBreak: <br />,
+        }}
+      />
+    ),
     guideId: 'siem',
     telemetryId: 'onboarding--security--siem',
     order: 3,
   },
   {
     solution: 'security',
-    title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.hostsSecurity.title', {
-      defaultMessage: 'Secure my hosts with endpoint security',
-    }),
+    title: (
+      <FormattedMessage
+        id="guidedOnboardingPackage.gettingStarted.cards.hostsSecurity.title"
+        defaultMessage="Secure my hosts with {lineBreak} endpoint security"
+        values={{
+          lineBreak: <br />,
+        }}
+      />
+    ),
     navigateTo: {
       appId: 'integrations',
       path: '/detail/endpoint/overview',
@@ -126,9 +158,15 @@ export const guideCards: GuideCardConstants[] = [
   },
   {
     solution: 'security',
-    title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.cloudSecurity.title', {
-      defaultMessage: 'Secure my cloud assets with posture management',
-    }),
+    title: (
+      <FormattedMessage
+        id="guidedOnboardingPackage.gettingStarted.cards.cloudSecurity.title"
+        defaultMessage="Secure my cloud assets with {lineBreak} posture management"
+        values={{
+          lineBreak: <br />,
+        }}
+      />
+    ),
     navigateTo: {
       appId: 'integrations',
       path: '/detail/cloud_security_posture/overview',

packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.tsx

@@ -27,7 +27,7 @@ export interface GuideCardsProps {
 }
 export const GuideCards = (props: GuideCardsProps) => {
   return (
-    <EuiFlexGroup wrap responsive justifyContent="center">
+    <EuiFlexGroup wrap justifyContent="center" responsive={false}>
       {guideCards.map((card, index) => (
         <EuiFlexItem key={index} grow={false}>
           <GuideCard card={card} {...props} />