docs(styles): add Joule DA icon to ShellBar [ci visual] (#5015)

* docs(styles): add Joule DA icon to ShellBar [ci visual] * docs(styles): add Joule DA icon to ShellBar [ci visual]
SAP · Nov 29, 2023 · 10b9f5a · 10b9f5a
1 parent 53b223a
commit 10b9f5a
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 56 deletions.
diff --git a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-msize.example.html b/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-msize.example.html
@@ -13,14 +13,16 @@
                 </button>
             </div>
             <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
-                    <i class="sap-icon--bell"></i>
-                    <span class="fd-button__badge">251K</span>
+                <button
+                    class="fd-button fd-button--transparent fd-shellbar__button"
+                    aria-label="Joule DA">
+                    <i class="sap-icon--da"></i>
                 </button>
             </div>
             <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Pool">
-                    <i class="sap-icon--pool"></i>
+                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
+                    <i class="sap-icon--bell"></i>
+                    <span class="fd-button__badge">251K</span>
                 </button>
             </div>
             <div class="fd-shellbar__action fd-shellbar__action--mobile">
@@ -47,12 +49,12 @@
                                     </li>
                                     <li class="fd-menu__item">
                                         <a role="button" class="fd-menu__link">
-                                            <span class="fd-menu__title">Notifications Out</span>
+                                            <span class="fd-menu__title">Joule</span>
                                         </a>
                                     </li>
                                     <li class="fd-menu__item">
                                         <a role="button" class="fd-menu__link">
-                                            <span class="fd-menu__title">Pool</span>
+                                            <span class="fd-menu__title">Notifications Out</span>
                                         </a>
                                     </li>
                                 </ul>

diff --git a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-xl-size.example.html b/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-xl-size.example.html
@@ -91,18 +91,18 @@
       <div class="fd-shellbar__action fd-shellbar__action--desktop">
         <button
           class="fd-button fd-button--transparent fd-shellbar__button"
-          aria-label="Notifications"
+          aria-label="Joule Digital Assitant"
         >
-          <i class="sap-icon--bell"></i>
-          <span class="fd-button__badge">251K</span>
+          <i class="sap-icon--da"></i>
         </button>
       </div>
       <div class="fd-shellbar__action fd-shellbar__action--desktop">
         <button
           class="fd-button fd-button--transparent fd-shellbar__button"
-          aria-label="Pool"
+          aria-label="Notifications"
         >
-          <i class="sap-icon--pool"></i>
+          <i class="sap-icon--bell"></i>
+          <span class="fd-button__badge">251K</span>
         </button>
       </div>
       <div class="fd-shellbar__action fd-shellbar__action--mobile">

diff --git a/packages/styles/stories/Components/shellbar/product-switch.example.html b/packages/styles/stories/Components/shellbar/product-switch.example.html
@@ -16,8 +16,10 @@
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--actions">
             <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Pool">
-                    <i class="sap-icon--co"></i>
+                <button
+                    class="fd-button fd-button--transparent fd-shellbar__button"
+                    aria-label="Joule Digital Assitant">
+                    <i class="sap-icon--da"></i>
                 </button>
             </div>
             <div class="fd-shellbar__action">

diff --git a/packages/styles/stories/Components/shellbar/responsive-paddings.example.html b/packages/styles/stories/Components/shellbar/responsive-paddings.example.html
@@ -24,14 +24,16 @@
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--actions">
             <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
-                    <i class="sap-icon--bell"></i>
-                    <span class="fd-button__badge">251K</span>
+                <button
+                    class="fd-button fd-button--transparent fd-shellbar__button"
+                    aria-label="Joule Digital Assitant">
+                    <i class="sap-icon--da"></i>
                 </button>
             </div>
             <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Pool">
-                    <i class="sap-icon--pool"></i>
+                <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
+                    <i class="sap-icon--bell"></i>
+                    <span class="fd-button__badge">251K</span>
                 </button>
             </div>
             <div class="fd-shellbar__action fd-shellbar__action--mobile">
@@ -58,12 +60,12 @@
                                     </li>
                                     <li class="fd-menu__item">
                                         <a role="button" class="fd-menu__link">
-                                            <span class="fd-menu__title">Notifications Out</span>
+                                            <span class="fd-menu__title">Joule</span>
                                         </a>
                                     </li>
                                     <li class="fd-menu__item">
                                         <a role="button" class="fd-menu__link">
-                                            <span class="fd-menu__title">Pool</span>
+                                            <span class="fd-menu__title">Notifications Out</span>
                                         </a>
                                     </li>
                                 </ul>

diff --git a/packages/styles/stories/Components/shellbar/without-center.example.html b/packages/styles/stories/Components/shellbar/without-center.example.html
@@ -13,14 +13,16 @@
             </button>
         </div>
         <div class="fd-shellbar__action fd-shellbar__action--desktop">
-            <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
-                <i class="sap-icon--bell"></i>
-                <span class="fd-button__badge">251K</span>
+            <button
+                class="fd-button fd-button--transparent fd-shellbar__button"
+                aria-label="Joule Digital Assitant">
+                <i class="sap-icon--da"></i>
             </button>
         </div>
         <div class="fd-shellbar__action fd-shellbar__action--desktop">
-            <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Pool">
-                <i class="sap-icon--pool"></i>
+            <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
+                <i class="sap-icon--bell"></i>
+                <span class="fd-button__badge">251K</span>
             </button>
         </div>
         <div class="fd-shellbar__action fd-shellbar__action--mobile">
@@ -47,12 +49,12 @@
                                 </li>
                                 <li class="fd-menu__item">
                                     <a role="button" class="fd-menu__link">
-                                        <span class="fd-menu__title">Notifications Out</span>
+                                        <span class="fd-menu__title">Joule</span>
                                     </a>
                                 </li>
                                 <li class="fd-menu__item">
                                     <a role="button" class="fd-menu__link">
-                                        <span class="fd-menu__title">Pool</span>
+                                        <span class="fd-menu__title">Notifications Out</span>
                                     </a>
                                 </li>
                             </ul>

diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -36934,14 +36934,16 @@ exports[`Check stories > Components/Shellbar > Story LinksWithCollapsibleMenuMSi
                 </button>
             </div>
             <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Notifications\\">
-                    <i class=\\"sap-icon--bell\\"></i>
-                    <span class=\\"fd-button__badge\\">251K</span>
+                <button
+                    class=\\"fd-button fd-button--transparent fd-shellbar__button\\"
+                    aria-label=\\"Joule DA\\">
+                    <i class=\\"sap-icon--da\\"></i>
                 </button>
             </div>
             <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Pool\\">
-                    <i class=\\"sap-icon--pool\\"></i>
+                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Notifications\\">
+                    <i class=\\"sap-icon--bell\\"></i>
+                    <span class=\\"fd-button__badge\\">251K</span>
                 </button>
             </div>
             <div class=\\"fd-shellbar__action fd-shellbar__action--mobile\\">
@@ -36968,12 +36970,12 @@ exports[`Check stories > Components/Shellbar > Story LinksWithCollapsibleMenuMSi
                                     </li>
                                     <li class=\\"fd-menu__item\\">
                                         <a role=\\"button\\" class=\\"fd-menu__link\\">
-                                            <span class=\\"fd-menu__title\\">Notifications Out</span>
+                                            <span class=\\"fd-menu__title\\">Joule</span>
                                         </a>
                                     </li>
                                     <li class=\\"fd-menu__item\\">
                                         <a role=\\"button\\" class=\\"fd-menu__link\\">
-                                            <span class=\\"fd-menu__title\\">Pool</span>
+                                            <span class=\\"fd-menu__title\\">Notifications Out</span>
                                         </a>
                                     </li>
                                 </ul>
@@ -37312,18 +37314,18 @@ exports[`Check stories > Components/Shellbar > Story LinksWithCollapsibleMenuXlS
       <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
         <button
           class=\\"fd-button fd-button--transparent fd-shellbar__button\\"
-          aria-label=\\"Notifications\\"
+          aria-label=\\"Joule Digital Assitant\\"
         >
-          <i class=\\"sap-icon--bell\\"></i>
-          <span class=\\"fd-button__badge\\">251K</span>
+          <i class=\\"sap-icon--da\\"></i>
         </button>
       </div>
       <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
         <button
           class=\\"fd-button fd-button--transparent fd-shellbar__button\\"
-          aria-label=\\"Pool\\"
+          aria-label=\\"Notifications\\"
         >
-          <i class=\\"sap-icon--pool\\"></i>
+          <i class=\\"sap-icon--bell\\"></i>
+          <span class=\\"fd-button__badge\\">251K</span>
         </button>
       </div>
       <div class=\\"fd-shellbar__action fd-shellbar__action--mobile\\">
@@ -37642,8 +37644,10 @@ exports[`Check stories > Components/Shellbar > Story ProductSwitch > Should matc
         </div>
         <div class=\\"fd-shellbar__group fd-shellbar__group--actions\\">
             <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Pool\\">
-                    <i class=\\"sap-icon--co\\"></i>
+                <button
+                    class=\\"fd-button fd-button--transparent fd-shellbar__button\\"
+                    aria-label=\\"Joule Digital Assitant\\">
+                    <i class=\\"sap-icon--da\\"></i>
                 </button>
             </div>
             <div class=\\"fd-shellbar__action\\">
@@ -37826,14 +37830,16 @@ exports[`Check stories > Components/Shellbar > Story ResponsivePaddings > Should
         </div>
         <div class=\\"fd-shellbar__group fd-shellbar__group--actions\\">
             <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Notifications\\">
-                    <i class=\\"sap-icon--bell\\"></i>
-                    <span class=\\"fd-button__badge\\">251K</span>
+                <button
+                    class=\\"fd-button fd-button--transparent fd-shellbar__button\\"
+                    aria-label=\\"Joule Digital Assitant\\">
+                    <i class=\\"sap-icon--da\\"></i>
                 </button>
             </div>
             <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Pool\\">
-                    <i class=\\"sap-icon--pool\\"></i>
+                <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Notifications\\">
+                    <i class=\\"sap-icon--bell\\"></i>
+                    <span class=\\"fd-button__badge\\">251K</span>
                 </button>
             </div>
             <div class=\\"fd-shellbar__action fd-shellbar__action--mobile\\">
@@ -37860,12 +37866,12 @@ exports[`Check stories > Components/Shellbar > Story ResponsivePaddings > Should
                                     </li>
                                     <li class=\\"fd-menu__item\\">
                                         <a role=\\"button\\" class=\\"fd-menu__link\\">
-                                            <span class=\\"fd-menu__title\\">Notifications Out</span>
+                                            <span class=\\"fd-menu__title\\">Joule</span>
                                         </a>
                                     </li>
                                     <li class=\\"fd-menu__item\\">
                                         <a role=\\"button\\" class=\\"fd-menu__link\\">
-                                            <span class=\\"fd-menu__title\\">Pool</span>
+                                            <span class=\\"fd-menu__title\\">Notifications Out</span>
                                         </a>
                                     </li>
                                 </ul>
@@ -37925,14 +37931,16 @@ exports[`Check stories > Components/Shellbar > Story WithoutCenter > Should matc
             </button>
         </div>
         <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-            <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Notifications\\">
-                <i class=\\"sap-icon--bell\\"></i>
-                <span class=\\"fd-button__badge\\">251K</span>
+            <button
+                class=\\"fd-button fd-button--transparent fd-shellbar__button\\"
+                aria-label=\\"Joule Digital Assitant\\">
+                <i class=\\"sap-icon--da\\"></i>
             </button>
         </div>
         <div class=\\"fd-shellbar__action fd-shellbar__action--desktop\\">
-            <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Pool\\">
-                <i class=\\"sap-icon--pool\\"></i>
+            <button class=\\"fd-button fd-button--transparent fd-shellbar__button\\" aria-label=\\"Notifications\\">
+                <i class=\\"sap-icon--bell\\"></i>
+                <span class=\\"fd-button__badge\\">251K</span>
             </button>
         </div>
         <div class=\\"fd-shellbar__action fd-shellbar__action--mobile\\">
@@ -37959,12 +37967,12 @@ exports[`Check stories > Components/Shellbar > Story WithoutCenter > Should matc
                                 </li>
                                 <li class=\\"fd-menu__item\\">
                                     <a role=\\"button\\" class=\\"fd-menu__link\\">
-                                        <span class=\\"fd-menu__title\\">Notifications Out</span>
+                                        <span class=\\"fd-menu__title\\">Joule</span>
                                     </a>
                                 </li>
                                 <li class=\\"fd-menu__item\\">
                                     <a role=\\"button\\" class=\\"fd-menu__link\\">
-                                        <span class=\\"fd-menu__title\\">Pool</span>
+                                        <span class=\\"fd-menu__title\\">Notifications Out</span>
                                     </a>
                                 </li>
                             </ul>