@orangesk/orange-design-system 3.3.0 → 3.4.0

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -1,5 +1,4 @@
 import cx from "classnames";
-import { BrandMark } from "./BrandMark";
 import {
   CLASS_CAPTION,
   CLASS_CONTAINER,
@@ -8,11 +7,8 @@ import {
   CLASS_LIST_GAP_SMALL,
   CLASS_LIST_INLINE,
   CLASS_MAIN,
-  CLASS_MOBILE,
   CLASS_MOBILE_BODY,
   CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
   CLASS_NAV_BUTTON,
   CLASS_NAV_DROPDOWN,
@@ -22,7 +18,6 @@ import {
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_NO_LINE,
-  CLASS_NAV_LOGO,
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
   CLASS_NAV_VERTICAL,
@@ -35,11 +30,17 @@ import {
   CLASS_TAG_TRANSPARENT,
 } from "./constants";
 import { getMegamenuIds } from "./ids";
-import { Logo } from "./Logo";
 import { MegamenuIcon } from "./MegaMenuIcon";
 import { MegamenuProps } from "./Megamenu";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
 import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
+import {
+  getMegamenuSearchState,
+  MegamenuCloseButton,
+  MegamenuLogoLink,
+  MegamenuMobilePanel,
+  MegamenuSearchDropdown,
+} from "./shared";
 
 const blogCategories = [
   "Kategória 1",
@@ -52,22 +53,21 @@ const blogCategories = [
 export const MegamenuBlog = ({
   className,
   title = "Človek",
-  isSticky = true,
+  notSticky = false,
   searchEmpty,
   searchFilled,
   compactLogoOnly = false,
+  isB2B = false,
 }: MegamenuProps) => {
   const ids = getMegamenuIds("blog");
-  const hasSearchEmpty = Boolean(searchEmpty);
-  const hasSearchFilled = Boolean(searchFilled);
-  const showSearchState = hasSearchEmpty || hasSearchFilled;
-  const searchValue = hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "";
+  const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
+    getMegamenuSearchState(searchEmpty, searchFilled);
 
   return (
     <header>
       <nav
         className={cx(CLASS_ROOT, className, {
-          "is-sticky": isSticky,
+          "non-sticky": notSticky,
         })}
         data-megamenu
         aria-label="Main navigation"
@@ -76,14 +76,12 @@ export const MegamenuBlog = ({
           <div className={CLASS_CONTAINER}>
             <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
-                <a
-                  href="/"
-                  className={CLASS_NAV_LOGO}
-                  aria-label={`${title} - Domovská stránka`}
+                <MegamenuLogoLink
+                  compactLogoOnly={compactLogoOnly}
+                  title={title}
                 >
-                  {compactLogoOnly ? <Logo /> : <BrandMark />}
                   <span>{title}</span>
-                </a>
+                </MegamenuLogoLink>
               </li>
 
               <li
@@ -120,20 +118,14 @@ export const MegamenuBlog = ({
                   />
                 </button>
 
-                <div
-                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
-                  id={ids.searchDropdownId}
-                >
-                  <div className={CLASS_CONTAINER}>
-                    <MegamenuSearchContent
-                      inputId={ids.searchInputDesktopId}
-                      inputLabel="Vyhľadávanie v blog menu"
-                      searchValue={searchValue}
-                      hasSearchEmpty={hasSearchEmpty}
-                      hasSearchFilled={hasSearchFilled}
-                    />
-                  </div>
-                </div>
+                <MegamenuSearchDropdown
+                  dropdownId={ids.searchDropdownId}
+                  inputId={ids.searchInputDesktopId}
+                  inputLabel="Vyhľadávanie v blog menu"
+                  searchValue={searchValue}
+                  hasSearchEmpty={hasSearchEmpty}
+                  hasSearchFilled={hasSearchFilled}
+                />
               </li>
               <li className={CLASS_NAV_ITEM}>
                 <button
@@ -307,110 +299,85 @@ export const MegamenuBlog = ({
 
         {/* MOBILE MENU */}
 
-        <div
-          // className={cx(CLASS_MOBILE, "is-active")}
-          className={cx(CLASS_MOBILE)}
-          data-megamenu-mobile-panel="main"
-          id={ids.mobileMainPanelId}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby={ids.mobileMainTitleId}
-          aria-hidden="true"
+        <MegamenuMobilePanel
+          panelId={ids.mobileMainPanelId}
+          titleId={ids.mobileMainTitleId}
+          target="main"
+          title="Hlavné menu"
+          overlayAriaLabel="Zatvoriť menu"
         >
-          <span id={ids.mobileMainTitleId} className="sr-only">
-            Hlavné menu
-          </span>
-          <button
-            aria-label="Zatvoriť menu"
-            className={CLASS_MOBILE_OVERLAY}
-            type="button"
-          />
-
-          <div className={CLASS_MOBILE_WRAPPER}>
-            <div className={CLASS_MOBILE_HEADER}>
-              <div className={CLASS_CONTAINER}>
-                <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-                  <li className={CLASS_NAV_ITEM}>
-                    <a
-                      href="/"
-                      className={CLASS_NAV_LOGO}
-                      aria-label={`${title} - Domovská stránka`}
-                    >
-                      {compactLogoOnly ? <Logo /> : <BrandMark />}
-                      <span>{title}</span>
-                    </a>
-                  </li>
+          <div className={CLASS_MOBILE_HEADER}>
+            <div className={CLASS_CONTAINER}>
+              <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
+                <li className={CLASS_NAV_ITEM}>
+                  <MegamenuLogoLink
+                    compactLogoOnly={compactLogoOnly}
+                    title={title}
+                  >
+                    <span>{title}</span>
+                  </MegamenuLogoLink>
+                </li>
 
-                  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+                <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-                  <li className={CLASS_NAV_ITEM}>
-                    <button
-                      type="button"
-                      data-megamenu-close-button
-                      data-megamenu-mobile-target="main"
-                      className={CLASS_NAV_BUTTON}
-                      aria-label="Zatvoriť menu"
-                    >
-                      <MegamenuIcon
-                        name="close"
-                        width={20}
-                        height={20}
-                        aria-hidden="true"
-                      />
-                    </button>
-                  </li>
-                </ul>
-              </div>
+                <li className={CLASS_NAV_ITEM}>
+                  <MegamenuCloseButton
+                    ariaLabel="Zatvoriť menu"
+                    target="main"
+                  />
+                </li>
+              </ul>
             </div>
-            <div className={CLASS_MOBILE_BODY}>
-              <div className={CLASS_CONTAINER}>
-                <MegamenuSearchContent
-                  inputId={ids.searchInputMobileId}
-                  inputLabel="Vyhľadávanie v mobilnom blog menu"
-                  searchValue={searchValue}
-                  hasSearchEmpty={hasSearchEmpty}
-                  hasSearchFilled={hasSearchFilled}
-                />
-
-                {!showSearchState ? (
-                  <>
-                    <p className={CLASS_CAPTION}>Kategórie</p>
-                    <ul className={cx(CLASS_SUBNAV, CLASS_LIST_GAP_SMALL)}>
-                      {blogCategories.map((category) => (
-                        <li key={category}>
-                          <a
-                            href="/"
-                            className={cx(
-                              CLASS_TAG,
-                              CLASS_TAG_TRANSPARENT,
-                              CLASS_TAG_LARGE,
-                            )}
-                          >
-                            {category}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-
-                    <hr className="mt-none" />
+          </div>
+          <div className={CLASS_MOBILE_BODY}>
+            <div className={CLASS_CONTAINER}>
+              <MegamenuSearchContent
+                inputId={ids.searchInputMobileId}
+                inputLabel="Vyhľadávanie v mobilnom blog menu"
+                searchValue={searchValue}
+                hasSearchEmpty={hasSearchEmpty}
+                hasSearchFilled={hasSearchFilled}
+              />
 
-                    <ul className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}>
-                      <li className={CLASS_NAV_ITEM}>
-                        <a href="/" className={CLASS_NAV_BUTTON}>
-                          Naspať na Orange
+              {!showSearchState ? (
+                <>
+                  <p className={CLASS_CAPTION}>Kategórie</p>
+                  <ul className={cx(CLASS_SUBNAV, CLASS_LIST_GAP_SMALL)}>
+                    {blogCategories.map((category) => (
+                      <li key={category}>
+                        <a
+                          href="/"
+                          className={cx(
+                            CLASS_TAG,
+                            CLASS_TAG_TRANSPARENT,
+                            CLASS_TAG_LARGE,
+                          )}
+                        >
+                          {category}
                         </a>
                       </li>
-                    </ul>
-                  </>
-                ) : null}
-              </div>
+                    ))}
+                  </ul>
+
+                  <hr className="mt-none" />
+
+                  <ul className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}>
+                    <li className={CLASS_NAV_ITEM}>
+                      <a href="/" className={CLASS_NAV_BUTTON}>
+                        Naspať na Orange
+                      </a>
+                    </li>
+                  </ul>
+                </>
+              ) : null}
             </div>
           </div>
-        </div>
+        </MegamenuMobilePanel>
 
         <MyOrangeMobilePanel
           panelId={ids.myOrangePanelId}
           titleId={ids.myOrangeTitleId}
+          isB2B={isB2B}
         />
 
         <button

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -1,21 +1,23 @@
 import cx from "classnames";
 import {
+  CLASS_BUTTON,
+  CLASS_BUTTON_SECONDARY,
   CLASS_CONTAINER,
-  CLASS_MOBILE,
   CLASS_MOBILE_ACCOUNT,
   CLASS_MOBILE_ACCOUNT_AVATAR,
-  CLASS_MOBILE_ACCOUNT_CTA,
   CLASS_MOBILE_ACCOUNT_LINK,
   CLASS_MOBILE_ACCOUNT_LINKS,
   CLASS_MOBILE_ACCOUNT_LOGOUT,
-  CLASS_MOBILE_ACCOUNT_NAME,
   CLASS_MOBILE_ACCOUNT_PHONE,
+  CLASS_MOBILE_APP_CARD,
+  CLASS_MOBILE_APP_CARD_IMAGE,
+  CLASS_MOBILE_APP_CARD_SECTION,
+  CLASS_MOBILE_APP_CARD_STORE,
+  CLASS_MOBILE_APP_CARD_STORES,
+  CLASS_MOBILE_APP_CARD_TITLE,
   CLASS_MOBILE_BODY,
   CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
-  CLASS_NAV_BUTTON,
   CLASS_NAV_ITEM,
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
@@ -23,104 +25,134 @@ import {
   CLASS_SUBNAV_ITEM,
 } from "./constants";
 import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuCloseButton, MegamenuMobilePanel } from "./shared";
 
 type MyOrangeMobilePanelProps = {
   titleId: string;
   panelId?: string;
+  isB2B?: boolean;
 };
 
 export const MyOrangeMobilePanel = ({
   titleId,
   panelId,
+  isB2B = false,
 }: MyOrangeMobilePanelProps) => {
   return (
-    <div
-      className={cx(CLASS_MOBILE)}
-      data-megamenu-mobile-panel="my-orange"
-      id={panelId}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={titleId}
-      aria-hidden="true"
+    <MegamenuMobilePanel
+      titleId={titleId}
+      panelId={panelId}
+      target="my-orange"
+      title="Môj Orange"
+      overlayAriaLabel="Zatvoriť panel Môj Orange"
     >
-      <h2 id={titleId} className="sr-only">
-        Môj Orange
-      </h2>
-      <button
-        aria-label="Zatvoriť panel Môj Orange"
-        className={CLASS_MOBILE_OVERLAY}
-        type="button"
-        data-megamenu-close-button
-        data-megamenu-mobile-target="my-orange"
-      />
+      <div className={CLASS_MOBILE_HEADER}>
+        <div className={CLASS_CONTAINER}>
+          <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
+            <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+            <li className={CLASS_NAV_ITEM}>
+              <MegamenuCloseButton
+                ariaLabel="Zatvoriť panel Môj Orange"
+                target="my-orange"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className={CLASS_MOBILE_BODY}>
+        <div className={CLASS_CONTAINER}>
+          <div className={CLASS_MOBILE_ACCOUNT}>
+            <div className={CLASS_MOBILE_ACCOUNT_AVATAR} aria-hidden="true">
+              <MegamenuIcon name="user" width={72} height={72} />
+            </div>
+            <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
+            <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
+              Odhlásiť
+            </a>
+            <a href="#" className={CLASS_BUTTON}>
+              Orange Business
+            </a>
+            {isB2B ? (
+              <a href="#" className={cx(CLASS_BUTTON, CLASS_BUTTON_SECONDARY)}>
+                My Orange
+              </a>
+            ) : null}
+          </div>
+        </div>
 
-      <div className={CLASS_MOBILE_WRAPPER}>
-        <div className={CLASS_MOBILE_HEADER}>
-          <div className={CLASS_CONTAINER}>
-            <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-              <li className={CLASS_NAV_ITEM}>
-                <button
-                  type="button"
-                  data-megamenu-close-button
-                  data-megamenu-mobile-target="my-orange"
-                  className={CLASS_NAV_BUTTON}
-                  aria-label="Zatvoriť panel Môj Orange"
-                >
-                  <MegamenuIcon
-                    name="close"
-                    width={20}
-                    height={20}
-                    aria-hidden="true"
-                  />
-                </button>
+        <div className={CLASS_CONTAINER}>
+          <nav aria-label="Môj Orange rýchle akcie">
+            <ul className={cx(CLASS_SUBNAV, CLASS_MOBILE_ACCOUNT_LINKS)}>
+              <li className={CLASS_SUBNAV_ITEM}>
+                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
+                  Zaplatiť faktúru
+                </a>
+              </li>
+              <li className={CLASS_SUBNAV_ITEM}>
+                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
+                  Pozrieť spotrebu
+                </a>
+              </li>
+              <li className={CLASS_SUBNAV_ITEM}>
+                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
+                  Aktivovať služby
+                </a>
+              </li>
+              <li className={CLASS_SUBNAV_ITEM}>
+                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
+                  Dobiť kredit
+                </a>
               </li>
             </ul>
-          </div>
+          </nav>
         </div>
-        <div className={CLASS_MOBILE_BODY}>
-          <div className={CLASS_CONTAINER}>
-            <div className={CLASS_MOBILE_ACCOUNT}>
-              <div className={CLASS_MOBILE_ACCOUNT_AVATAR} aria-hidden="true">
-                <MegamenuIcon name="user" width={72} height={72} />
+
+        <div className={CLASS_CONTAINER}>
+          <div className={cx(CLASS_MOBILE_APP_CARD)}>
+            <div className={CLASS_MOBILE_APP_CARD_SECTION}>
+              <h2 className={CLASS_MOBILE_APP_CARD_TITLE}>
+                Stiahnite si aplikáciu
+                <br />
+                Môj Orange
+              </h2>
+              <div className={CLASS_MOBILE_APP_CARD_STORES}>
+                <a
+                  href="#"
+                  className={CLASS_MOBILE_APP_CARD_STORE}
+                  aria-label="Stiahnuť aplikáciu z App Store"
+                >
+                  <img
+                    src={isB2B ? "/apple--white.svg" : "/apple.svg"}
+                    alt=""
+                  />
+                </a>
+                <a
+                  href="#"
+                  className={CLASS_MOBILE_APP_CARD_STORE}
+                  aria-label="Stiahnuť aplikáciu z Google Play"
+                >
+                  <img src={isB2B ? "/play--white.svg" : "/play.svg"} alt="" />
+                </a>
+                <a
+                  href="#"
+                  className={CLASS_MOBILE_APP_CARD_STORE}
+                  aria-label="Stiahnuť aplikáciu z Huawei AppGallery"
+                >
+                  <img
+                    src={isB2B ? "/huawei--white.svg" : "/huawei.svg"}
+                    alt=""
+                  />
+                </a>
               </div>
-              <p className={CLASS_MOBILE_ACCOUNT_NAME}>Martin Prihlásený</p>
-              <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
-              <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
-                Odhlásiť
-              </a>
-              <a href="#" className={CLASS_MOBILE_ACCOUNT_CTA}>
-                My Orange
-              </a>
             </div>
-
-            <nav aria-label="Môj Orange rýchle akcie">
-              <ul className={cx(CLASS_SUBNAV, CLASS_MOBILE_ACCOUNT_LINKS)}>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
-                    Zaplatiť faktúru
-                  </a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
-                    Pozrieť spotrebu
-                  </a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
-                    Aktivovať služby
-                  </a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
-                    Dobiť kredit
-                  </a>
-                </li>
-              </ul>
-            </nav>
+            <img
+              className={CLASS_MOBILE_APP_CARD_IMAGE}
+              src="/images/phones.png"
+              alt=""
+            />
           </div>
         </div>
       </div>
-    </div>
+    </MegamenuMobilePanel>
   );
 };

package/src/components/Megamenu/constants.ts

@@ -6,6 +6,11 @@ export const CLASS_SUBMAIN = `${CLASS_ROOT}__submain`;
 export const CLASS_CONTAINER = `${CLASS_ROOT}__container`;
 export const CLASS_GRID = `${CLASS_ROOT}__grid`;
 export const CLASS_CARD = `${CLASS_ROOT}__card`;
+export const CLASS_TILES = `${CLASS_ROOT}__tiles`;
+export const CLASS_TILE = `${CLASS_ROOT}__tile`;
+export const CLASS_TILE_BODY = `${CLASS_ROOT}__tile-body`;
+export const CLASS_TILE_CONTENT = `${CLASS_ROOT}__tile-content`;
+export const CLASS_TILE_LABEL = `${CLASS_ROOT}__tile-label`;
 export const CLASS_NAV = `${CLASS_ROOT}__nav`;
 export const CLASS_NAV_VERTICAL = `${CLASS_ROOT}__nav--vertical`;
 export const CLASS_NAV_SPACE_SMALL = `${CLASS_ROOT}__nav--space-small`;
@@ -16,13 +21,17 @@ export const CLASS_NAV_ITEM_MAIN = `${CLASS_ROOT}__nav-item--main`;
 export const CLASS_NAV_LINK = `${CLASS_ROOT}__nav-link`;
 export const CLASS_NAV_LINK_LOCALE = `${CLASS_ROOT}__nav-link--locale`;
 export const CLASS_NAV_LINK_NO_LINE = `${CLASS_ROOT}__nav-link--no-line`;
+export const CLASS_NAV_LINK_CTA = `${CLASS_ROOT}__nav-link--cta`;
+export const CLASS_NAV_SELECT = `${CLASS_ROOT}__nav-select`;
 export const CLASS_NAV_CART_ICON = `${CLASS_ROOT}__nav-cart-icon`;
 export const CLASS_NAV_SPACER = `${CLASS_ROOT}__nav-spacer`;
 export const CLASS_NAV_ICON = `${CLASS_ROOT}__nav-icon`;
 export const CLASS_NAV_ICON_NO_GAP_MD_DOWN = `${CLASS_NAV_ICON}--no-gap-md-down`;
+export const CLASS_NAV_ICON_CTA = `${CLASS_NAV_ICON}--cta`;
 export const CLASS_NAV_LOGO = `${CLASS_ROOT}__nav-logo`;
 export const CLASS_NAV_BUTTON = `${CLASS_ROOT}__nav-button`;
 export const CLASS_NAV_BUTTON_INDICATOR = `${CLASS_ROOT}__nav-button--indicator`;
+export const CLASS_NAV_SELECT_WRAPPER = `${CLASS_ROOT}__nav-button--select`;
 export const CLASS_NAV_DROPDOWN = `${CLASS_ROOT}__nav-dropdown`;
 export const CLASS_SUBNAV = `${CLASS_ROOT}__subnav`;
 export const CLASS_SUBNAV_ITEM = `${CLASS_ROOT}__subnav-item`;
@@ -34,6 +43,7 @@ export const CLASS_TEXT_LARGE = `${CLASS_ROOT}__text--large`;
 export const CLASS_CAPTION = `${CLASS_ROOT}__caption`;
 export const CLASS_CAPTION_LARGE = `${CLASS_ROOT}__caption--large`;
 export const CLASS_HIDE_MD_DOWN = `${CLASS_ROOT}--hide-md-down`;
+export const CLASS_HIDE_LG_ONLY = `${CLASS_ROOT}--hide-lg-only`;
 export const CLASS_HIDE_LG_UP = `${CLASS_ROOT}--hide-lg-up`;
 export const CLASS_ALIGN_CENTER = `${CLASS_ROOT}--align-center`;
 
@@ -42,14 +52,21 @@ export const CLASS_MOBILE_OVERLAY = `${CLASS_ROOT}__mobile-overlay`;
 export const CLASS_MOBILE_WRAPPER = `${CLASS_ROOT}__mobile-wrapper`;
 export const CLASS_MOBILE_HEADER = `${CLASS_ROOT}__mobile-header`;
 export const CLASS_MOBILE_BODY = `${CLASS_ROOT}__mobile-body`;
+export const CLASS_MOBILE_CTA = `${CLASS_ROOT}__mobile-cta`;
 export const CLASS_MOBILE_ACCOUNT = `${CLASS_ROOT}__mobile-account`;
 export const CLASS_MOBILE_ACCOUNT_AVATAR = `${CLASS_ROOT}__mobile-account-avatar`;
-export const CLASS_MOBILE_ACCOUNT_NAME = `${CLASS_ROOT}__mobile-account-name`;
 export const CLASS_MOBILE_ACCOUNT_PHONE = `${CLASS_ROOT}__mobile-account-phone`;
 export const CLASS_MOBILE_ACCOUNT_LOGOUT = `${CLASS_ROOT}__mobile-account-logout`;
-export const CLASS_MOBILE_ACCOUNT_CTA = `${CLASS_ROOT}__mobile-account-cta`;
+export const CLASS_BUTTON = `${CLASS_ROOT}__button`;
+export const CLASS_BUTTON_SECONDARY = `${CLASS_BUTTON}--secondary`;
 export const CLASS_MOBILE_ACCOUNT_LINKS = `${CLASS_ROOT}__mobile-account-links`;
 export const CLASS_MOBILE_ACCOUNT_LINK = `${CLASS_ROOT}__mobile-account-link`;
+export const CLASS_MOBILE_APP_CARD = `${CLASS_ROOT}__mobile-app-card`;
+export const CLASS_MOBILE_APP_CARD_SECTION = `${CLASS_MOBILE_APP_CARD}-section`;
+export const CLASS_MOBILE_APP_CARD_TITLE = `${CLASS_MOBILE_APP_CARD}-title`;
+export const CLASS_MOBILE_APP_CARD_STORES = `${CLASS_MOBILE_APP_CARD}-stores`;
+export const CLASS_MOBILE_APP_CARD_STORE = `${CLASS_MOBILE_APP_CARD}-store`;
+export const CLASS_MOBILE_APP_CARD_IMAGE = `${CLASS_MOBILE_APP_CARD}-image`;
 
 // Accordion classes for mobile menu
 export const CLASS_ACCORDION = `${CLASS_ROOT}__accordion`;