Merge pull request #24 from Teradata/feat/feedback-component

feat(feedback): adding feedback and iconButtonToggle component

libs/react-components/src/lib/components/Feedback/Feedback.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Feedback from './index';
+
+const meta = {
+  title: 'Components/Feedback',
+  component: Feedback,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    label: 'Did this page help?',
+    labelForFeedback: 'Thank you for your feedback!',
+    onFeedBack: action('onFeedBack'),
+  }
+} satisfies Meta<typeof Feedback>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

libs/react-components/src/lib/components/Feedback/index.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import styles from './styles.module.scss';
+import IconButtonToggle from '../IconButtonToggle';
+import Typography from '../Typography';
+
+// Define the interface for the Feedback component props
+interface FeedbackProps {
+  label?: string; // Optional label for the feedback component
+  labelForFeedback?: string; // Optional label to display after feedback is given
+  onFeedBack: (feedback: string) => void; // Callback function to handle feedback submission
+}
+
+export const Feedback: React.FC<FeedbackProps> = ({
+  label = 'Did this page help?',
+  labelForFeedback = 'Thank you for your feedback!',
+  onFeedBack,
+}) => {
+  const defaultFeedback = 'neutral';
+  const [feedback, setFeedback] = useState<string>(defaultFeedback);
+  const feedbackLabel = feedback !== defaultFeedback ? labelForFeedback : label;
+  const sendFeedback = (feedbackType: string) => {
+    const response = feedback === feedbackType ? defaultFeedback : feedbackType;
+    setFeedback(response);
+
+    if (onFeedBack) {
+      onFeedBack(response);
+    }
+  };
+
+  return (
+    <div className={styles.feedback}>
+      <span className={styles.feedbackLabel}>
+        <Typography scale="body1">{feedbackLabel}</Typography>
+      </span>
+      <IconButtonToggle
+        offIcon="thumb_up"
+        onIcon="thumb_up"
+        onClick={() => sendFeedback('positive')}
+        on={feedback === 'positive'}
+      />
+      <IconButtonToggle
+        offIcon="thumb_down"
+        onIcon="thumb_down"
+        onClick={() => sendFeedback('negative')}
+        on={feedback === 'negative'}
+      />
+    </div>
+  );
+};
+
+export default Feedback;

libs/react-components/src/lib/components/Feedback/styles.module.scss

@@ -0,0 +1,12 @@
+.feedback {
+    display: flex;
+    min-height: 64px;
+    padding: 0px 16px 0px 24px;
+    align-items: center;
+    border-radius: 12px;
+    background-color: var(--cv-theme-surface-container-highest);
+}
+
+.feedbackLabel {
+    flex: 1;
+}

libs/react-components/src/lib/components/IconButtonToggle/IconButton.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import IconButtonToggle from './index';
+
+const meta = {
+  title: 'Components/IconButtonToggle',
+  component: IconButtonToggle,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    offIcon: 'home',
+    onIcon: 'houseboat',
+  },
+} satisfies Meta<typeof IconButtonToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

libs/react-components/src/lib/components/IconButtonToggle/index.tsx

@@ -0,0 +1,59 @@
+import { CovalentIconButtonToggle } from '@covalent/components/icon-button-toggle';
+import { createComponent } from '@lit/react';
+import React from 'react';
+
+interface IconButtonToggleProps {
+  /**
+   * Icon to be displayed in the button
+   */
+  offIcon?: string;
+  /**
+   * Icon to be displayed in the button
+   */
+  onIcon?: string;
+  /**
+   * Aria label for the icon button
+   */
+  ariaLabel?: string;
+  /**
+   * Whether the button has any associated popup elements
+   */
+  ariaHasPopup?: boolean;
+  /**
+   * Whether the icon button is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Click handler for the button
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const IconButtonToggleComponent = createComponent({
+  tagName: 'cv-icon-button-toggle',
+  elementClass: CovalentIconButtonToggle as never,
+  react: React,
+});
+
+export const IconButtonToggle: React.FC<IconButtonToggleProps> = ({
+  offIcon,
+  onIcon,
+  ariaLabel,
+  ariaHasPopup,
+  disabled,
+  onClick,
+}) => {
+  const customProps = {
+    offIcon,
+    onIcon,
+    disabled,
+    'aria-label': ariaLabel,
+    'aria-haspopup': ariaHasPopup,
+    onClick,
+  };
+  return <IconButtonToggleComponent {...customProps}></IconButtonToggleComponent>;
+};
+
+IconButtonToggle.displayName = 'IconButtonToggle';
+
+export default IconButtonToggle;

libs/react-components/src/lib/index.ts

@@ -5,6 +5,7 @@ import Button from './components/Button';
 import Card from './components/Card';
 import CodeSnippet from './components/CodeSnippet';
 import { DropdownMenu, DropdownMenuItem } from './components/DropdownMenu';
+import { Feedback } from './components/Feedback';
 import Footer, {
   FooterNavLink,
   FooterLink,
@@ -13,6 +14,7 @@ import Footer, {
 import Header, { HeaderAction } from './components/Header';
 import Icon from './components/Icon';
 import IconButton from './components/IconButton';
+import IconButtonToggle from './components/IconButtonToggle';
 import IconLink from './components/IconLink';
 import LanguageDropdown, {
   Language,
@@ -35,10 +37,12 @@ export {
   CodeSnippet,
   DropdownMenu,
   DropdownMenuItem,
+  Feedback,
   Footer,
   Header,
   Icon,
   IconButton,
+  IconButtonToggle,
   IconLink,
   LanguageDropdown,
   ListItem,