fix(styles): add AI Notice [ci visual] (#5573)

packages/styles/src/fundamental-styles.scss

@@ -1,6 +1,9 @@
 /* Do not modify manually, this file is being generated by workspace-plugins:sync-components executor */
 @import './action-bar';
 @import './action-sheet';
+@import './ai-busy-indicator';
+@import './ai-loading-bar';
+@import './ai-text';
 @import './alert';
 @import './avatar-group';
 @import './avatar';
@@ -74,6 +77,7 @@
 @import './popover';
 @import './product-switch';
 @import './progress-indicator';
+@import './prompt-input';
 @import './quick-view';
 @import './radio';
 @import './rating-indicator';
@@ -112,7 +116,3 @@
 @import './vertical-nav';
 @import './wizard';
 @import './btp/avatar';
-@import '.prompt-input';
-@import '.ai-busy-indicator';
-@import '.ai-loading-bar';
-@import '.ai-text';

packages/styles/src/textarea.scss

@@ -85,6 +85,21 @@ $block: #{$fd-namespace}-textarea;
     }
   }
 
+  &-counter-container {
+    @include fd-reset();
+
+    @include fd-flex() {
+      align-items: center;
+    };
+
+    padding-block: 0.375rem 0.5rem;
+
+    .#{$block}-counter {
+      padding-block: 0;
+      margin-inline-start: auto;
+    }
+  }
+
   &--ai {
     position: relative;
 

packages/styles/stories/AI/Patterns/ai-notice/ai-notice.example.html

@@ -0,0 +1,31 @@
+<h4>For Joule</h4>
+<div>
+    <label class="fd-form-label">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Joule</span></a>. Verify results before using them.</label>
+</div>
+<br>
+<h4>For SAP Business AI</h4>
+<div>
+    <label class="fd-form-label fd-form-label--required" aria-required="true">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">SAP Business AI</span></a>. Verify results before using them.</label>
+</div>
+
+<br>
+<h4>With Text Area</h4>
+<div style="max-width: 80%;">
+    <div class="fd-form-item">
+        <div class="fd-form-item__label-container">
+            <label class="fd-form-label" for="textarea-ai-1">How will you measure this goal? </label>
+            <button class="fd-button">
+                <i class="sap-icon--ai"></i>
+                <span class="fd-button__text">Revise</span>
+                <i class="sap-icon--slim-arrow-down"></i>
+            </button>
+        </div>
+        <div role="textbox" contenteditable="true" aria-multiline="true" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><p class="fd-ai-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum? <mark>Vel minus corrupti in numquam qui eius totam!</mark> Sequi aut molestiae minus inventore. Sapiente, officia possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fugiat quas cum, voluptas consequuntur totam aliquam illum aspernatur corrupti consectetur sint eaque sequi magni alias aliquid saepe quod ab voluptates.</p>
+        </div>
+        <div class="fd-textarea-counter-container">
+            <label class="fd-form-label">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Joule</span></a>. Verify results before using them.</label>
+            <div class="fd-textarea-counter">150 characters left</div>
+        </div>
+
+    </div>
+</div>

packages/styles/stories/AI/Patterns/ai-notice/ai-notice.stories.js

@@ -0,0 +1,26 @@
+import aiNoticeExampleHtml from "./ai-notice.example.html?raw";
+
+import '../../../../src/textarea.scss';
+import '../../../../src/form-item.scss';
+import '../../../../src/button.scss';
+import '../../../../src/icon.scss';
+import '../../../../src/form-label.scss';
+import '../../../../src/link.scss';
+import '../../../../src/ai-text.scss';
+
+export default {
+  title: 'AI/Patterns/Notice',
+  parameters: {
+    description: `The "AI Notice" pattern provides clear references about the quality and reliability of AI-generated results in written text. It is an essential part of the broader "messaging patterns" associated with AI services and integrates with other AI interaction patterns like explainability and feedback. This pattern helps users understand the trustworthiness of AI-generated content, enhancing transparency and confidence. It's especially useful in environments where AI-generated information is key, such as collaborative platforms, educational tools, content creation apps, and informational websites.
+<br><b>Note: The component is in an experimental state.</b>`,
+    tags: ['ai', 'experimental']
+  }
+};
+export const AINotice = () => aiNoticeExampleHtml;
+AINotice.parameters = {
+  docs: {
+   description: {
+      story: ``
+    }
+  }
+};

packages/styles/tests/__snapshots__/styles.test.ts.snap

@@ -324,6 +324,40 @@ exports[`Check stories > AI/Patterns/Guided Prompt > Story AIGuidedPrompt > Shou
 "
 `;
 
+exports[`Check stories > AI/Patterns/Notice > Story AINotice > Should match snapshot 1`] = `
+"<h4>For Joule</h4>
+<div>
+    <label class=\\"fd-form-label\\">Created with <a href=\\"#\\" class=\\"fd-link\\" tabindex=\\"0\\"><span class=\\"fd-link__content\\">Joule</span></a>. Verify results before using them.</label>
+</div>
+<br>
+<h4>For SAP Business AI</h4>
+<div>
+    <label class=\\"fd-form-label fd-form-label--required\\" aria-required=\\"true\\">Created with <a href=\\"#\\" class=\\"fd-link\\" tabindex=\\"0\\"><span class=\\"fd-link__content\\">SAP Business AI</span></a>. Verify results before using them.</label>
+</div>
+
+<br>
+<h4>With Text Area</h4>
+<div style=\\"max-width: 80%;\\">
+    <div class=\\"fd-form-item\\">
+        <div class=\\"fd-form-item__label-container\\">
+            <label class=\\"fd-form-label\\" for=\\"textarea-ai-1\\">How will you measure this goal? </label>
+            <button class=\\"fd-button\\">
+                <i class=\\"sap-icon--ai\\"></i>
+                <span class=\\"fd-button__text\\">Revise</span>
+                <i class=\\"sap-icon--slim-arrow-down\\"></i>
+            </button>
+        </div>
+        <div role=\\"textbox\\" contenteditable=\\"true\\" aria-multiline=\\"true\\" class=\\"fd-textarea fd-textarea--ai is-information\\" id=\\"textarea-ai-1\\" placeholder=\\"Write something here\\" rows=\\"5\\"><p class=\\"fd-ai-text\\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum? <mark>Vel minus corrupti in numquam qui eius totam!</mark> Sequi aut molestiae minus inventore. Sapiente, officia possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fugiat quas cum, voluptas consequuntur totam aliquam illum aspernatur corrupti consectetur sint eaque sequi magni alias aliquid saepe quod ab voluptates.</p>
+        </div>
+        <div class=\\"fd-textarea-counter-container\\">
+            <label class=\\"fd-form-label\\">Created with <a href=\\"#\\" class=\\"fd-link\\" tabindex=\\"0\\"><span class=\\"fd-link__content\\">Joule</span></a>. Verify results before using them.</label>
+            <div class=\\"fd-textarea-counter\\">150 characters left</div>
+        </div>
+
+    </div>
+</div>"
+`;
+
 exports[`Check stories > AI/Patterns/Progress Indicator > Story AIProgressIndicator > Should match snapshot 1`] = `
 "<h4>First loading time (while analyzing the request)</h4>
 <div class=\\"fd-form-item\\">