Merge pull request #182 from etchteam/release/crowdsourcing

Crowdsourcing

package.json

@@ -67,13 +67,13 @@
     "@semantic-release/npm": "^11.0.3",
     "@semantic-release/release-notes-generator": "^13.0.0",
     "@sentry/vite-plugin": "^2.16.0",
-    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-essentials": "^7.6.10",
     "@storybook/blocks": "^7.6.10",
     "@storybook/preact": "^7.6.11",
     "@storybook/preact-vite": "^7.6.12",
     "@vitest/ui": "^1.3.1",
     "autoprefixer": "^10.4.17",
-    "eslint": "^9.3.0",
+    "eslint": "^8.57.0",
     "happy-dom": "^14.11.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.0",
@@ -90,7 +90,7 @@
     "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.1.2",
+    "storybook": "^7.6.10",
     "stylelint": "^15.11.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",

public/translations/cy.json

@@ -31,7 +31,7 @@
     "materialSearchInput": {
       "placeholder": "Nodwch enw eitem…",
       "error": "Nodwch enw eitem i chwilio amdani",
-      "notFound": "Doedden ni ddim yn gallu dod o hyd i ateb i gyd-fynd â {{query}}"
+      "notFound": "Ni allem ddod o hyd i gyfatebiaeth ar gyfer yr eitem hon. Ceisiwch ddefnyddio enw arall ar ei gyfer."
     },
     "menu": {
       "whatDoYouWantToDo": "Beth hoffech chi ei wneud?",
@@ -82,6 +82,30 @@
         "accessibilityLabel": "Datganiad Hygyrchedd",
         "accessibilityLink": "https://www.walesrecycles.org.uk/cy/datganiad-hygyrchedd"
       }
+    },
+    "rateThisInfo": {
+      "title": "Sut fyddech chi'n graddio'r wybodaeth hon?",
+      "thumbUp": "Bawd i fyny",
+      "thumbDown": "Bawd i lawr",
+      "help": "Bydd eich adborth yn helpu i wella'r gwasanaeth hwn",
+      "cta": "Anfon adborth",
+      "comment": {
+        "label": "Gadewch sylw i egluro pam.",
+        "placeholder": "Ychwanegwch eich meddyliau...",
+        "error": "Rhowch sylw gydag uchafswm o 250 nod"
+      },
+      "result": {
+        "positive": "Rydych chi'n hoffi hyn!",
+        "negative": "Dydych chi ddim yn hoffi hwn!",
+        "confirmation": "Diolch i chi, am rannu eich syniadau."
+      }
+    },
+    "reportMissingMaterial": {
+      "title": "Os credwch y dylid ei ychwanegu at yr offeryn hwn, <button>dewiswch pa ddeunydd ydyw</button>.",
+      "placeholder": "Dewiswch ddeunydd...",
+      "error": "Dewiswch ddeunydd os gwelwch yn dda",
+      "cta": "Rhoi gwybod am ddeunydd coll",
+      "confirmation": "Rydych chi wedi rhoi gwybod am yr eitem goll hon"
     }
   },
   "error": {

public/translations/en.json

@@ -31,7 +31,7 @@
     "materialSearchInput": {
       "placeholder": "Enter the name of an item…",
       "error": "Please enter the name of an item",
-      "notFound": "We couldn’t find a match for {{query}}"
+      "notFound": "We couldn’t find a match for this item. Please try using an alternative name for it."
     },
     "menu": {
       "whatDoYouWantToDo": "What do you want to do?",
@@ -82,6 +82,30 @@
         "accessibilityLabel": "Accessibility Statement",
         "accessibilityLink": "https://www.recyclenow.com/accessibility-statement"
       }
+    },
+    "rateThisInfo": {
+      "title": "How would you rate this information?",
+      "thumbUp": "Thumb up",
+      "thumbDown": "Thumb down",
+      "help": "Your feedback will help to improve this service",
+      "cta": "Send feedback",
+      "comment": {
+        "label": "Please leave a comment to explain why.",
+        "placeholder": "Add your thoughts...",
+        "error": "Enter a comment with a maximum of 250 characters"
+      },
+      "result": {
+        "positive": "You like this!",
+        "negative": "You don’t like this!",
+        "confirmation": "Thank you, for sharing your thoughts."
+      }
+    },
+    "reportMissingMaterial": {
+      "title": "If you think it should be added to this tool, please <button>select which material it is</button>.",
+      "placeholder": "Select a material...",
+      "error": "Please select a material",
+      "cta": "Report missing material",
+      "confirmation": "You’ve reported this missing item"
     }
   },
   "error": {

src/components/content/Icon/Icon.tsx

@@ -31,7 +31,11 @@ export interface IconAttributes {
     | 'menu'
     | 'food'
     | 'garden'
-    | 'dry';
+    | 'dry'
+    | 'thumb-up'
+    | 'thumb-down'
+    | 'list-add'
+    | 'list-tick';
   readonly color?: 'primary' | 'muted' | 'positive' | 'negative';
   readonly label?: string;
 }

src/components/control/MaterialSearchInput/MaterialSearchInput.tsx

@@ -15,6 +15,7 @@ import '@etchteam/diamond-ui/control/Input/Input';
 import '@etchteam/diamond-ui/control/Button/Button';
 
 import '@/components/content/Icon/Icon';
+import ReportMissingMaterial from '../ReportMissingMaterial/ReportMissingMaterial';
 import LocatorApi from '@/lib/LocatorApi';
 import i18n from '@/lib/i18n';
 import { CustomElement } from '@/types/customElement';
@@ -28,6 +29,7 @@ interface MaterialSearchInputProps {
   readonly defaultValue?: string;
   readonly valid?: boolean;
   readonly autofocus?: boolean;
+  readonly includeFeedbackForm?: boolean;
   readonly handleBlur?: (value: string) => void;
   readonly handleInput?: (value: string) => void;
   readonly handleReset?: () => void;
@@ -169,6 +171,7 @@ export default class MaterialSearchInput extends Component<MaterialSearchInputPr
                       type="reset"
                       onClick={() => {
                         this.inputValue.value = '';
+                        this.materialNotFound.value = null;
                         this.props.handleReset?.();
                       }}
                     >
@@ -220,16 +223,19 @@ export default class MaterialSearchInput extends Component<MaterialSearchInputPr
         {!valid && (
           <p
             id={`${this.props.inputId}-error`}
-            className="text-color-negative diamond-text-size-sm diamond-spacing-top-sm"
+            className="text-color-negative diamond-spacing-top-sm"
             aria-live="polite"
           >
             {materialNotFound
-              ? i18n.t('components.materialSearchInput.notFound', {
-                  query: materialNotFound,
-                })
+              ? i18n.t('components.materialSearchInput.notFound')
               : i18n.t('components.materialSearchInput.error')}
           </p>
         )}
+        {materialNotFound && this.props.includeFeedbackForm && (
+          <ReportMissingMaterial
+            missingMaterial={this.materialNotFound.value}
+          />
+        )}
       </>
     );
   }

src/components/control/RateThisInfo/RateThisInfo.css

@@ -0,0 +1,125 @@
+locator-rate-this-info {
+  background: var(--diamond-theme-background-muted);
+  border-radius: var(--diamond-border-radius);
+  display: block;
+  padding: var(--diamond-spacing-sm) var(--diamond-spacing-sm)
+    var(--diamond-spacing);
+  text-align: center;
+
+  h2 {
+    font-size: var(--diamond-font-size-default);
+    margin-block-end: 0;
+  }
+
+  form {
+    margin: 0 auto;
+    max-width: 18rem;
+  }
+
+  .locator-rate-this-info__rating {
+    display: flex;
+    justify-content: center;
+    margin-block-end: var(--diamond-spacing-sm);
+
+    input {
+      cursor: pointer;
+      opacity: 0;
+      position: absolute;
+    }
+
+    label {
+      --_background: var(--color-white);
+      --_color: var(--diamond-theme-color-muted);
+      --_border-color: var(--diamond-theme-border-color);
+
+      aspect-ratio: 1;
+      background: var(--_background);
+      border: var(--diamond-border-width) var(--diamond-border-style)
+        var(--_border-color);
+      border-radius: var(--diamond-border-radius);
+      color: var(--_color);
+      cursor: pointer;
+      padding: var(--diamond-spacing-sm);
+      position: relative;
+      transition:
+        background-color var(--diamond-transition),
+        border-color var(--diamond-transition),
+        color var(--diamond-transition);
+
+      &:has(input:focus-visible) {
+        outline: 5px auto Highlight;
+        outline: 5px auto -webkit-focus-ring-color;
+        outline-offset: var(--diamond-input-outline-offset);
+      }
+
+      &:has(input:checked) {
+        z-index: var(--layer-one);
+      }
+
+      &:has(input:disabled),
+      &:has(input:disabled):hover {
+        --_background: var(--color-grey-lightest);
+        --_color: var(--diamond-theme-color-muted);
+        --_border-color: var(--diamond-theme-border-color);
+        cursor: not-allowed;
+
+        input {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    label:first-child {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+
+      &:hover,
+      &:has(input:checked) {
+        --_color: var(--color-green-dark);
+      }
+
+      &:has(input:checked) {
+        --_background: var(--color-green-lightest);
+        --_border-color: var(--color-green-dark);
+      }
+    }
+
+    label:last-child {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-inline-start: -1px;
+
+      &:hover,
+      &:has(input:checked) {
+        --_color: var(--color-red-dark);
+      }
+
+      &:has(input:checked) {
+        --_background: var(--color-red-lightest);
+        --_border-color: var(--color-red-dark);
+      }
+    }
+  }
+
+  .locator-rate-this-info__comment {
+    label {
+      font-size: var(--diamond-font-size-sm);
+      justify-content: center;
+    }
+
+    diamond-input {
+      /* extra space for the count */
+      padding-block-end: var(--diamond-spacing);
+      /* position context for the count */
+      position: relative;
+    }
+
+    span {
+      bottom: 0;
+      font-size: var(--diamond-font-size-xs);
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+    }
+  }
+}

src/components/control/RateThisInfo/RateThisInfo.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/preact';
+
+import RateThisInfoComponent from './RateThisInfo';
+
+const meta: Meta = {
+  title: 'Components/Control/RateThisInfo',
+  component: RateThisInfoComponent,
+};
+
+export default meta;
+
+export const RateThisInfo: StoryObj = {
+  render: () => {
+    return <RateThisInfoComponent />;
+  },
+};