[SharedUX] Add feedback snippet to SharedUX storybook

src/core/packages/chrome/browser-internal/src/ui/project/sidenav_v2/navigation/navigation_feedback_snippet.tsx

@@ -11,6 +11,8 @@ import React from 'react';
 import { FeedbackSnippet } from '@kbn/shared-ux-feedback-snippet';
 import type { SolutionId } from '@kbn/core-chrome-browser';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 interface NavigationFeedbackSnippetProps {
   solutionId: SolutionId;
@@ -41,9 +43,13 @@ const promptViewMessage = (
 
 export const NavigationFeedbackSnippet = ({ solutionId }: NavigationFeedbackSnippetProps) => {
   const feedbackSurveyUrl = feedbackUrls[solutionId];
+  const { euiTheme } = useEuiTheme();
 
   return (
     <FeedbackSnippet
+      css={css`
+        border-top: ${euiTheme.border.width.thin} ${euiTheme.colors.borderBaseSubdued} solid;
+      `}
       feedbackButtonMessage={feedbackButtonMessage}
       feedbackSnippetId={feedbackSnippetId}
       promptViewMessage={promptViewMessage}

src/platform/packages/shared/shared-ux/feedback_snippet/src/confetti.tsx → src/platform/packages/shared/shared-ux/feedback_snippet/src/confetti/confetti.component.tsx

@@ -11,7 +11,7 @@ import { css } from '@emotion/react';
 import confetti from 'canvas-confetti';
 import React, { useEffect, useRef } from 'react';
 
-const Confetti = () => {
+export const ConfettiComponent = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -48,7 +48,3 @@ const Confetti = () => {
     />
   );
 };
-
-// We need to use the default export here because of the way React.lazy works
-// eslint-disable-next-line import/no-default-export
-export default Confetti;

src/platform/packages/shared/shared-ux/feedback_snippet/src/confetti/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { dynamic } from '@kbn/shared-ux-utility';
+
+/**
+ * A lazy-loaded component that renders a one-shot confetti animation.
+ */
+
+export const Confetti = dynamic(() =>
+  import('./confetti.component').then((mod) => ({
+    default: mod.ConfettiComponent,
+  }))
+);

src/platform/packages/shared/shared-ux/feedback_snippet/src/feedback_button.tsx

@@ -10,10 +10,11 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
+import type { CommonProps } from '@elastic/eui';
 import { EuiButtonEmpty, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-interface FeedbackButtonProps {
+interface FeedbackButtonProps extends CommonProps {
   feedbackButtonMessage: React.ReactNode;
   feedbackSnippetId: string;
   handleOpenSurvey: () => void;
@@ -35,24 +36,33 @@ export const FeedbackButton = ({
   feedbackButtonMessage,
   feedbackSnippetId,
   handleOpenSurvey,
+  className,
 }: FeedbackButtonProps) => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiButtonEmpty
-      data-test-subj="feedbackSnippetButton"
-      onClick={handleOpenSurvey}
+    <div
+      className={className}
       css={css`
-        margin: ${euiTheme.size.m};
-        padding: ${euiTheme.size.s};
+        padding: ${euiTheme.size.m};
       `}
-      color="text"
-      iconType="popout"
-      iconSide="right"
-      id={`${feedbackSnippetId}ButtonSurveyLink`}
-      aria-label={feedbackButtonAriaLabel}
     >
-      {feedbackButtonMessage}
-    </EuiButtonEmpty>
+      <EuiButtonEmpty
+        data-test-subj="feedbackSnippetButton"
+        onClick={handleOpenSurvey}
+        css={css`
+          width: 100%;
+          padding: ${euiTheme.size.s};
+        `}
+        color="text"
+        iconType="popout"
+        iconSide="right"
+        size="s"
+        id={`${feedbackSnippetId}ButtonSurveyLink`}
+        aria-label={feedbackButtonAriaLabel}
+      >
+        {feedbackButtonMessage}
+      </EuiButtonEmpty>
+    </div>
   );
 };

src/platform/packages/shared/shared-ux/feedback_snippet/src/feedback_panel.tsx

@@ -24,6 +24,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { FeedbackView } from './feedback_snippet';
+import { Confetti } from './confetti';
 
 interface FeedbackPanelProps {
   feedbackSnippetId: string;
@@ -35,8 +36,6 @@ interface FeedbackPanelProps {
   handlePositiveFeedback: () => void;
 }
 
-const ConfettiComponentLazy = React.lazy(() => import('./confetti'));
-
 const thumbUpIconLabel = i18n.translate(
   'sharedUXPackages.feedbackSnippet.feedbackPanel.thumbUpIconLabel',
   {
@@ -147,6 +146,7 @@ export const FeedbackPanel = ({
       onClick={handleOpenSurveyAndDismissPanel}
       fill
       fullWidth
+      size="s"
       iconType="popout"
       iconSide="right"
       id={`${feedbackSnippetId}PanelSurveyLink`}
@@ -181,7 +181,7 @@ export const FeedbackPanel = ({
     >
       <EuiFlexGroup
         gutterSize="s"
-        justifyContent={feedbackView === 'positive' ? 'center' : 'flexStart'}
+        justifyContent={feedbackView === 'positive' ? 'center' : 'spaceBetween'}
       >
         <EuiFlexItem grow={false}>
           <EuiText size="s" textAlign={feedbackView === 'positive' ? 'center' : 'left'}>
@@ -195,7 +195,7 @@ export const FeedbackPanel = ({
       <EuiFlexGroup gutterSize="s" justifyContent="center">
         {panelFooter[feedbackView]}
       </EuiFlexGroup>
-      {feedbackView === 'positive' && <ConfettiComponentLazy />}
+      {feedbackView === 'positive' && <Confetti />}
     </EuiPanel>
   );
 };

src/platform/packages/shared/shared-ux/feedback_snippet/src/feedback_snippet.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeedbackSnippet } from './feedback_snippet';
+
+const meta: Meta<typeof FeedbackSnippet> = {
+  title: 'Shared UX/FeedbackSnippet',
+  component: FeedbackSnippet,
+  args: {
+    feedbackButtonMessage: 'Got feedback?',
+    promptViewMessage: 'Was this page helpful? Tell us about it!',
+    surveyUrl: 'https://www.elastic.co',
+    feedbackSnippetId: 'storybook-feedback-snippet-default',
+  },
+  argTypes: {
+    feedbackButtonMessage: { control: 'text' },
+    promptViewMessage: { control: 'text' },
+    surveyUrl: { control: 'text' },
+    feedbackSnippetId: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FeedbackSnippet>;
+
+export const Default: Story = {
+  render: (args) => {
+    localStorage.removeItem(args.feedbackSnippetId);
+    return (
+      <div
+        css={{
+          width: '250px',
+        }}
+      >
+        <FeedbackSnippet {...args} />
+      </div>
+    );
+  },
+};

src/platform/packages/shared/shared-ux/feedback_snippet/src/feedback_snippet.tsx

@@ -9,12 +9,13 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
+import type { CommonProps } from '@elastic/eui';
 import { FeedbackButton } from './feedback_button';
 import { FeedbackPanel } from './feedback_panel';
 
 const FEEDBACK_PANEL_POSITIVE_LIFETIME = 3000;
 
-interface FeedbackSnippetProps {
+interface FeedbackSnippetProps extends CommonProps {
   /**
    * Message to display in the FeedbackButton.
    */
@@ -44,6 +45,7 @@ export const FeedbackSnippet = ({
   feedbackSnippetId,
   promptViewMessage,
   surveyUrl,
+  className,
 }: FeedbackSnippetProps) => {
   const [feedbackView, setFeedbackView] = useState<FeedbackView>('prompt');
   const [showPanel, setShowPanel] = useState(() => {
@@ -103,6 +105,7 @@ export const FeedbackSnippet = ({
     />
   ) : (
     <FeedbackButton
+      className={className}
       feedbackButtonMessage={feedbackButtonMessage}
       feedbackSnippetId={feedbackSnippetId}
       handleOpenSurvey={handleOpenSurvey}

src/platform/packages/shared/shared-ux/feedback_snippet/tsconfig.json

@@ -19,5 +19,6 @@
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/i18n-react",
+    "@kbn/shared-ux-utility",
   ]
 }