feat(pie-docs): DSW-2100 add haptic-feedback page to Patterns

.changeset/smart-houses-attack.md

@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Added] - `Haptic Feedback` page to `Patterns` section

apps/pie-docs/src/patterns/haptic-feedback/guidance/guidance.md

@@ -0,0 +1,139 @@
+---
+eleventyNavigation:
+    key: Guidance
+    parent: 'Haptic Feedback'
+    order: 2
+shouldShowContents: true
+---
+
+## About our haptic feedback types
+
+Our entire range of haptic feedback options relies on the system-default haptics provided by Apple in accordance with their [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines).
+
+{% notification {
+  type: "warning",
+  message: "Please note that our default haptic feedback types **cannot be overridden or altered**."
+} %}
+
+---
+
+## Soft haptic feedback
+
+Soft haptic feedback can serve various purposes in order to enhance the overall user experience in a subtle and nuanced manner.
+
+{% contentPageImage {
+  src:"../../../../assets/img/patterns/haptic-feedback/soft-haptic-feedback.svg",
+  alt: "Visual representation of soft haptic feedback.",
+  width: "344px"
+} %}
+
+#### Where can I use soft haptic feedback?
+
+{% list {
+    type: listTypes.icon,
+    iconName: "check-circle",
+    items: [
+        "**Button presses:** Provide a gentle confirmation for various button presses to acknowledge user input without being intrusive.",
+        "**Toggle and state changes:** Convey changes in toggle switches or activation of different states in the UI with a moderately pronounced haptic sensation.",
+        "**Dynamic adjustments:** Provide users with tactile feedback when making dynamic adjustments, such as using sliders, to indicate significant changes.",
+        "**Non-critical notifications:** Use soft haptic feedback for non-critical notifications to gently alert users without causing disruption.",
+        "**Subtle transitions:** Enhance subtle transitions or animations between UI elements for a smooth and cohesive experience.",
+        "**Incremental adjustments:** Offer soft haptic feedback for incremental adjustments, like scrolling or volume control, to provide a sense of granularity."
+    ]
+} %}
+
+---
+
+## Medium haptic feedback
+
+A medium-intensity haptic feedback which can convey a sense of importance and grab the user's attention. A good example of this might be the haptic feedback that occurs when a user navigates to a new screen, commonly known as a "screen transition haptic", which is designed to provide a tactile confirmation of the navigation action.
+
+{% contentPageImage {
+  src:"../../../../assets/img/patterns/haptic-feedback/medium-haptic-feedback.svg",
+  alt: "Visual representation of medium haptic feedback.",
+  width: "344px"
+} %}
+
+#### Where can I use medium haptic feedback?
+
+{% list {
+    type: listTypes.icon,
+    iconName: "check-circle",
+    items: [
+        "**Important actions:** Reinforce the significance of actions such as submitting a form, making a purchase, or saving changes with a medium level of haptic feedback.",
+        "**Gesture recognition:** Use medium haptic feedback to confirm the recognition of gestures, such as pinch-to-zoom or swipe gestures."
+    ]
+} %}
+
+---
+
+## Success haptic feedback
+
+A medium-intensity haptic feedback used to highlight a confirmation of an action. You can use it for the successful submission of a form or completion of a task, providing users with a reassuring response.
+
+{% contentPageImage {
+  src:"../../../../assets/img/patterns/haptic-feedback/success-haptic-feedback.svg",
+  alt: "Visual representation of success haptic feedback.",
+  width: "344px"
+} %}
+
+#### Where can I use success haptic feedback?
+
+{% list {
+    type: listTypes.icon,
+    iconName: "check-circle",
+    items: [
+        "**Task completion:** Use success haptic feedback to celebrate the successful completion of a task or operation, providing positive reinforcement.",
+        "**Confirmation of positive events:** Accompany positive events, such as successful transactions or the completion of a level in a game, with success haptic feedback.",
+        "**Goal achievement:** Celebrate users reaching specific milestones or goals within an app or gamified experience with success haptic feedback."
+    ]
+} %}
+
+---
+
+## Warning haptic feedback
+
+They can be strategically used in various scenarios where it's essential to alert users to critical information or potential issues that demand their attention before they actually happen.
+
+{% contentPageImage {
+  src:"../../../../assets/img/patterns/haptic-feedback/warning-haptic-feedback.svg",
+  alt: "Visual representation of warning haptic feedback.",
+  width: "344px"
+} %}
+
+#### Where can I use warning haptic feedback?
+
+{% list {
+    type: listTypes.icon,
+    iconName: "check-circle",
+    items: [
+        "**Alerts and warnings:** Use warning haptic feedback to highlight critical information or alerts that require users' attention but are not urgent.",
+        "**Potential issues:** Signal potential issues or warnings that users need to be aware of, such as incomplete form entries or system warnings.",
+        "**Near limits:** Provide warning haptic feedback when users are approaching or exceeding certain limits, such as character count or storage capacity."
+    ]
+} %}
+
+---
+
+## Error haptic feedback
+
+A strong, noticeable vibration. You can use them when an error occurs or an invalid action is attempted, signalling to the user that corrective action is needed.
+
+{% contentPageImage {
+  src:"../../../../assets/img/patterns/haptic-feedback/error-haptic-feedback.svg",
+  alt: "Visual representation of error haptic feedback.",
+  width: "344px"
+} %}
+
+#### Where can I use error haptic feedback?
+
+{% list {
+    type: listTypes.icon,
+    iconName: "check-circle",
+    items: [
+        "**Critical errors:** Accompany critical errors or issues that require immediate attention with an intense error haptic feedback.",
+        "**Validation failures:** Use error haptic feedback for validation failures, indicating to users that their input needs correction before proceeding.",
+        "**Loss of critical data:** Use error haptic feedback when there is a risk of losing critical data or when irreversible actions are about to be taken.",
+        "**Security breaches:** Signal security breaches or unauthorised access attempts with an error haptic feedback."
+    ]
+} %}

apps/pie-docs/src/patterns/haptic-feedback/haptic-feedback.json

@@ -0,0 +1,5 @@
+{
+  "title": "Haptic Feedback",
+  "navKey": "Haptic Feedback",
+  "description": "Haptics help us integrate tactile feedback into interfaces, enhancing user experience by improving overall intuitiveness."
+}

apps/pie-docs/src/patterns/haptic-feedback/haptic-feedback.md

@@ -0,0 +1,9 @@
+---
+eleventyNavigation:
+    key: 'Haptic Feedback'
+    parent: Patterns
+    url: /patterns/haptic-feedback/
+    order: 2
+title: 'Haptic Feedback'
+permalink: false
+---

apps/pie-docs/src/patterns/haptic-feedback/overview/overview.md

@@ -0,0 +1,66 @@
+---
+eleventyNavigation:
+    key: Overview
+    parent: 'Haptic Feedback'
+    order: 1
+shouldShowContents: true
+permalink: patterns/haptic-feedback/
+---
+
+
+## What are haptics?
+
+Haptics refer to the incorporation of tactile feedback into user interfaces to enhance the overall user experience. It involves the use of touch-based sensations, such as vibrations or pulses, in response to user interactions with our products.
+
+By integrating haptic feedback, we aim to provide users with a more intuitive and engaging interaction, making the digital experience feel more tangible and responsive.
+
+{% contentPageImage {
+  src:"../../../assets/img/patterns/haptic-feedback/overview-desktop.svg",
+  mobileSrc: "../../../assets/img/patterns/haptic-feedback/overview-mobile.svg",
+  alt: "Visual representation of haptic feedback."
+} %}
+
+---
+
+## Best practices
+
+Here are some best practices when adding haptic feedback to your apps:
+
+### Understand user expectations
+
+Familiarise yourself with system-provided haptic patterns and their meanings. Users often associate specific haptic feedback with particular interactions, so aligning with these expectations enhances usability.
+
+### Use system-provided patterns
+
+Leverage built-in haptic patterns provided by the operating system for standard interactions like toggles, sliders, and pickers. This ensures a consistent experience across the platform and makes your app more intuitive.
+
+### Be consistent
+
+Establish a clear and causal relationship between haptic feedback and user actions. Consistency helps users associate specific haptic patterns with particular experiences, reinforcing the cause-and-effect relationship.
+
+### Complement other types of feedback
+
+Ensure that haptic feedback complements visual and auditory cues in your app. Harmonising these elements creates a more coherent and natural user experience. Match the intensity and timing of haptic feedback with accompanying animations or sounds.
+
+### Don’t overuse
+
+Overusing haptic feedback can lead to a diminished impact or even annoyance. Conduct user testing to find a balance that enhances the user experience without becoming intrusive.
+
+---
+
+## Working with haptics
+
+In this section you’ll find everything you should know about how to communicate haptic feedback points with your team.
+
+### Who’s responsible for adding haptic feedback points?
+
+It is the designer’s responsibility to indicate which interactions should provide haptic feedback and where (and why) should they occur. If you’re unsure about our types of haptic feedback, please check the [guidance](/patterns/haptic-feedback/guidance/) section, which outlines our different types of haptic feedback presets.
+
+### How do I share haptic interactions with development?
+
+Ensure that you provide annotations or include comments specifically directed to the engineers involved in your project. Clearly indicate the locations where haptic feedback is intended and specify the type of haptic feedback to be implemented.
+
+### Quarterly haptic feedback reviews
+
+We're planning to have quarterly check-ins to go over your screens or interactions. These sessions can help you figure out if you're using the right haptic feedback in your products or if you need to make some changes or additions.
+

apps/pie-docs/test/snapshots/expected-routes.snapshot.json

@@ -122,7 +122,9 @@
     "patterns",
     "patterns/cookie-banner",
     "patterns/cookie-banner/code",
+    "patterns/haptic-feedback",
+    "patterns/haptic-feedback/guidance",
     "support",
     "support/contact-us",
     "support/faq"
-]
+]