Stampy redesign 368

app/components/Article/FeedbackForm/feedbackForm.css

@@ -0,0 +1,63 @@
+.feedback-container {
+  width: 384px;
+  padding: var(--spacing-32);
+}
+.select-option {
+  height: var(--spacing-48);
+  padding: var(--spacing-8) var(--spacing-16);
+  margin: var(--spacing-8) 0;
+  cursor: pointer;
+  width: 100%;
+}
+.select-option.selected {
+  border: 1px solid var(--colors-teal-500);
+}
+
+.feedback-form {
+  width: 100%;
+  position: relative;
+  text-align: left;
+  font-size: 16px;
+  color: var(--colors-cool-grey-600);
+  z-index: 2;
+}
+
+.feedback-text {
+  width: calc(100% - var(--spacing-24));
+  max-width: calc(100% - var(--spacing-24));
+  height: 128px;
+  padding: var(--spacing-12);
+  margin: var(--spacing-40) 0;
+  box-sizing: content-box;
+}
+.feedback-text.no-options {
+  margin: var(--spacing-16) 0;
+}
+.submit-feedback.enabled {
+  cursor: pointer;
+  opacity: 1;
+}
+
+.tooltip:hover::after {
+  display: block;
+}
+
+.action-feedback-text {
+  display: none;
+  position: absolute;
+  left: 180px;
+  text-wrap: nowrap;
+  top: 13px;
+}
+.action-feedback-text.show {
+  display: block;
+}
+.composite-button > .feedback-form {
+  position: absolute;
+  left: 90px;
+  top: -342px;
+  display: none;
+}
+.composite-button > .feedback-form.show {
+  display: block;
+}

app/components/Article/FeedbackForm/index.tsx

@@ -0,0 +1,111 @@
+import React, {ChangeEvent} from 'react'
+import Button from '~/components/Button'
+import './feedbackForm.css'
+
+export interface FeedbackFormProps {
+  /**
+   * Article ID
+   */
+  pageid: string
+  /**
+   * Class name
+   */
+  className?: string
+  /**
+   * onBlur
+   */
+  onBlur?: () => void
+  /**
+   * onFocus
+   */
+  onFocus?: () => void
+  /**
+   * Has Options
+   */
+  hasOptions?: boolean
+}
+const FeedbackForm = ({
+  pageid,
+  className = 'feedback-form',
+  onBlur,
+  onFocus,
+  hasOptions = true,
+}: FeedbackFormProps) => {
+  // to be implemented.
+  console.log(pageid)
+  const [selected, setSelected] = React.useState<string>()
+  const options = [
+    {
+      text: 'Making things up',
+      option: 'making_things_up',
+    },
+    {
+      text: 'Being mean',
+      option: 'being_mean',
+    },
+    {
+      text: 'Typos',
+      option: 'typos',
+    },
+  ]
+  const [enabledSubmit, setEnabledSubmit] = React.useState(false)
+  const selectFeedback = (option: string) => {
+    setSelected(option)
+
+    if (onFocus) {
+      onFocus()
+    }
+    setEnabledSubmit(true)
+  }
+  const handleBlur = React.useCallback(
+    (e: ChangeEvent<HTMLElement>) => {
+      const currentTarget = e.currentTarget
+
+      // Give browser time to focus the next element
+      requestAnimationFrame(() => {
+        // Check if the new focused element is a child of the original container
+        if (!currentTarget.contains(document.activeElement)) {
+          if (onBlur) {
+            onBlur()
+          }
+        }
+      })
+    },
+    [onBlur]
+  )
+
+  const handleSubmit = () => {}
+
+  return (
+    <div className={className} onBlur={handleBlur} onFocus={onFocus}>
+      <div className={'feedback-container bordered'}>
+        <span className={'black'}>What was the problem?</span>
+        {hasOptions
+          ? options.map((option, index) => (
+              <Button
+                key={index}
+                className={[
+                  option.text == selected ? 'secondary-alt selected' : 'secondary',
+                  'select-option',
+                ].join(' ')}
+                action={() => selectFeedback(option.text)}
+              >
+                <div>{option.text}</div>
+              </Button>
+            ))
+          : null}
+
+        <textarea
+          name={'feedback-text'}
+          className={['feedback-text bordered', !hasOptions ? 'no-options' : ''].join(' ')}
+          placeholder={'Leave a comment (optional)'}
+        ></textarea>
+        <Button className="primary full-width" action={handleSubmit} disabled={!enabledSubmit}>
+          <p>Submit feedback</p>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default FeedbackForm

app/components/Article/article.css

@@ -28,6 +28,7 @@ article .tags {
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--spacing-8);
+  margin-top: var(--spacing-24);
 }
 
 article .tag {
@@ -98,6 +99,8 @@ article .link-popup p {
 article .footer-comtainer {
   display: flex;
   align-items: center;
+  margin-top: var(--spacing-56);
+  margin-bottom: var(--spacing-24);
 }
 
 article .footer-comtainer > * {

app/components/Article/index.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import React, {useState} from 'react'
 import {Link} from '@remix-run/react'
 import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
@@ -8,17 +8,33 @@ import {Action, ActionType} from '~/routes/questions.actions'
 import type {Glossary, Question} from '~/server-utils/stampy'
 import Contents from './Contents'
 import './article.css'
+import FeedbackForm from '~/components/Article/FeedbackForm'
 
 const isLoading = ({text}: Question) => !text || text === 'Loading...'
 
 const ArticleFooter = (question: Question) => {
+  const [showFeedback, setShowFeedback] = useState(false)
+  const [showFeedbackForm, setShowFeedbackForm] = useState(false)
+  const [isFormFocused, setIsFormFocused] = useState(false)
   const date =
     question.updatedAt &&
     new Date(question.updatedAt).toLocaleDateString('en-GB', {
       year: 'numeric',
       month: 'short',
     })
 
+  React.useEffect(() => {
+    // Hide the form after 10 seconds if the user hasn't interacted with it
+    const timeoutId = setInterval(() => {
+      if (!isFormFocused) {
+        setShowFeedbackForm(false)
+      }
+    }, 10000)
+
+    // Clear the timeout to prevent it from running if the component unmounts
+    return () => clearInterval(timeoutId)
+  }, [showFeedbackForm, isFormFocused])
+
   return (
     !isLoading(question) && (
       <div className="footer-comtainer">
@@ -35,8 +51,28 @@ const ArticleFooter = (question: Question) => {
         <span>Did this page help you?</span>
 
         <CompositeButton className="flex-container">
-          <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
-          <Action pageid={question.pageid} showText={true} actionType={ActionType.UNHELPFUL} />
+          <Action
+            pageid={question.pageid}
+            showText={true}
+            actionType={ActionType.HELPFUL}
+            onSuccess={() => setShowFeedback(true)}
+          />
+          <Action
+            pageid={question.pageid}
+            showText={true}
+            actionType={ActionType.UNHELPFUL}
+            onSuccess={() => setShowFeedbackForm(true)}
+          />
+          <span className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
+            Thanks for your feedback!
+          </span>
+          <FeedbackForm
+            pageid={question.pageid}
+            className={['feedback-form', showFeedbackForm ? 'show' : ''].join(' ')}
+            onBlur={() => setIsFormFocused(false)}
+            onFocus={() => setIsFormFocused(true)}
+            hasOptions={false}
+          />
         </CompositeButton>
       </div>
     )

app/components/Button/button.css

@@ -72,7 +72,7 @@
   border-right: 1px solid transparent;
 }
 
-.composite-button > form:last-child .button,
+.composite-button > form:last-of-type .button,
 .composite-button > .button:last-child {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -104,6 +104,13 @@
   z-index: 1;
 }
 
-.tooltip:hover::after {
-  display: block;
+.button.full-width {
+  width: 100%;
+  height: 48px;
+  border: 0;
+}
+.button:disabled,
+.button[disabled] {
+  opacity: 0.6;
+  cursor: inherit;
 }

app/components/Button/index.tsx

@@ -8,19 +8,29 @@ type ButtonProps = {
   className?: string
   tooltip?: string
   icon?: ReactNode
+  disabled?: boolean
 }
-const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
+const Button = ({children, action, tooltip, icon, className, disabled = false}: ButtonProps) => {
   const classes = ['button', className, tooltip && 'tooltip'].filter((i) => i).join(' ')
   if (typeof action === 'string') {
     return (
-      <Link to={action} className={classes} data-tooltip={tooltip}>
+      <Link
+        to={action}
+        className={classes}
+        data-tooltip={tooltip}
+        onClick={(e) => {
+          if (disabled) {
+            e.preventDefault()
+          }
+        }}
+      >
         {children}
         {icon && icon}
       </Link>
     )
   }
   return (
-    <button className={classes} onClick={action} data-tooltip={tooltip}>
+    <button className={classes} onClick={action} data-tooltip={tooltip} disabled={disabled}>
       {children}
     </button>
   )

app/newRoot.css

@@ -29,12 +29,14 @@
 
   /* spacing */
   --spacing-4: 4px;
+  --spacing-6: 6px;
   --spacing-8: 8px;
   --spacing-12: 12px;
   --spacing-16: 16px;
   --spacing-24: 24px;
   --spacing-32: 32px;
   --spacing-40: 40px;
+  --spacing-48: 48px;
   --spacing-56: 56px;
   --spacing-80: 80px;
   --spacing-104: 104px;
@@ -45,6 +47,7 @@
 
 .flex-container {
   display: flex;
+  position: relative;
 }
 
 .flex-double {

app/routes/questions.actions.tsx

@@ -94,8 +94,16 @@ type Props = {
   showText?: boolean
   children?: ReactNode | ReactNode[]
   [k: string]: unknown
+  onSuccess?: () => void
 }
-export const Action = ({pageid, actionType, showText = true, children, ...props}: Props) => {
+export const Action = ({
+  pageid,
+  actionType,
+  showText = true,
+  children,
+  onSuccess,
+  ...props
+}: Props) => {
   const [remixSearchParams] = useSearchParams()
   const [stateString] = useState(() => remixSearchParams.get('state') ?? '')
   const {Icon, title} = actions[actionType]
@@ -139,6 +147,7 @@ export const Action = ({pageid, actionType, showText = true, children, ...props}
     const response = await fetch('/questions/actions', {method: 'POST', body: searchParams})
 
     if (response.ok !== true) setActionTaken(!actionTaken)
+    else if (onSuccess) onSuccess()
   }
 
   const className = 'secondary icon-link' + (actionTaken ? ' focused' : '')

stories/FeedbackForm.stories.tsx

@@ -0,0 +1,14 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import FeedbackForm from '../app/components/Article/FeedbackForm'
+const meta = {
+  title: 'Components/Article/FeedbackForm',
+  component: FeedbackForm,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FeedbackForm>
+export default meta
+type Story = StoryObj<typeof FeedbackForm>
+export const Default: Story = {
+  args: {
+    pageid: 'NH50',
+  },
+}