From c873b14bf24572d944cfe1a42c26e7117e415886 Mon Sep 17 00:00:00 2001 From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com> Date: Thu, 22 Aug 2024 11:10:41 -0400 Subject: [PATCH] fix(styles): add AI Notice [ci visual] (#5573) --- packages/styles/src/fundamental-styles.scss | 8 ++--- packages/styles/src/textarea.scss | 15 ++++++++ .../Patterns/ai-notice/ai-notice.example.html | 31 +++++++++++++++++ .../Patterns/ai-notice/ai-notice.stories.js | 26 ++++++++++++++ .../tests/__snapshots__/styles.test.ts.snap | 34 +++++++++++++++++++ 5 files changed, 110 insertions(+), 4 deletions(-) create mode 100644 packages/styles/stories/AI/Patterns/ai-notice/ai-notice.example.html create mode 100644 packages/styles/stories/AI/Patterns/ai-notice/ai-notice.stories.js diff --git a/packages/styles/src/fundamental-styles.scss b/packages/styles/src/fundamental-styles.scss index 5719021168..e987f2afd0 100644 --- a/packages/styles/src/fundamental-styles.scss +++ b/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'; diff --git a/packages/styles/src/textarea.scss b/packages/styles/src/textarea.scss index e1872d649d..29016f26eb 100644 --- a/packages/styles/src/textarea.scss +++ b/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; diff --git a/packages/styles/stories/AI/Patterns/ai-notice/ai-notice.example.html b/packages/styles/stories/AI/Patterns/ai-notice/ai-notice.example.html new file mode 100644 index 0000000000..b630f88b83 --- /dev/null +++ b/packages/styles/stories/AI/Patterns/ai-notice/ai-notice.example.html @@ -0,0 +1,31 @@ +

For Joule

+
+ +
+
+

For SAP Business AI

+
+ +
+ +
+

With Text Area

+
+
+
+ + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum? Vel minus corrupti in numquam qui eius totam! 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.

+
+
+ +
150 characters left
+
+ +
+
\ No newline at end of file diff --git a/packages/styles/stories/AI/Patterns/ai-notice/ai-notice.stories.js b/packages/styles/stories/AI/Patterns/ai-notice/ai-notice.stories.js new file mode 100644 index 0000000000..f58be153a3 --- /dev/null +++ b/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. +
Note: The component is in an experimental state.`, + tags: ['ai', 'experimental'] + } +}; +export const AINotice = () => aiNoticeExampleHtml; +AINotice.parameters = { + docs: { + description: { + story: `` + } + } +}; \ No newline at end of file diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 500ffcda8d..314f996835 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/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`] = ` +"

For Joule

+
+ +
+
+

For SAP Business AI

+
+ +
+ +
+

With Text Area

+
+
+
+ + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum? Vel minus corrupti in numquam qui eius totam! 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.

+
+
+ +
150 characters left
+
+ +
+
" +`; + exports[`Check stories > AI/Patterns/Progress Indicator > Story AIProgressIndicator > Should match snapshot 1`] = ` "

First loading time (while analyzing the request)