@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -1,6 +1,9 @@
 import cx from "classnames";
 
 import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
+import { getMegamenuIds } from "./ids";
 import {
   CLASS_CONTAINER,
   CLASS_HIDE_MD_DOWN,
@@ -11,8 +14,10 @@ import {
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
   CLASS_NAV_ITEM,
+  CLASS_NAV_VERTICAL,
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
+  CLASS_NAV_LINK_NO_LINE,
   CLASS_NAV_LOGO,
   CLASS_NAV_SPACER,
   CLASS_ROOT,
@@ -24,25 +29,43 @@ import {
   CLASS_MOBILE_HEADER,
   CLASS_MOBILE_BODY,
   CLASS_OVERLAY,
-  CLASS_INPUT,
-  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
   CLASS_NAV_SPACE_SMALL,
-  CLASS_ACCORDION,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_HEADER,
-  CLASS_ACCORDION_ITEM,
-  CLASS_ACCORDION_TITLE,
   CLASS_SPACER_SMALL,
   CLASS_LIST_INLINE,
+  CLASS_LIST_GAP_SMALL,
   CLASS_TAG,
+  CLASS_TAG_LARGE,
+  CLASS_TAG_TRANSPARENT,
 } from "./constants";
-import { list, MegamenuProps } from "./Megamenu";
+import { MegamenuProps } from "./Megamenu";
+
+const blogCategories = [
+  "Kategória 1",
+  "Kategória 2",
+  "Kategória 3",
+  "Kategória 4",
+  "Kategória 5",
+];
+
+export const MegamenuBlog = ({
+  className,
+  title = "Človek",
+  isSticky = true,
+  searchEmpty,
+  searchFilled,
+}: MegamenuProps) => {
+  const ids = getMegamenuIds("blog");
+  const hasSearchEmpty = Boolean(searchEmpty);
+  const hasSearchFilled = Boolean(searchFilled);
+  const showSearchState = hasSearchEmpty || hasSearchFilled;
+  const searchValue = hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "";
 
-export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
   return (
     <header>
       <nav
-        className={cx(CLASS_ROOT, className)}
+        className={cx(CLASS_ROOT, className, {
+          "is-sticky": isSticky,
+        })}
         data-megamenu
         aria-label="Main navigation"
       >
@@ -53,7 +76,7 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
                 <a
                   href="#"
                   className={CLASS_NAV_LOGO}
-                  aria-label="Domovská stránka"
+                  aria-label={`${title} - Domovská stránka`}
                 >
                   <svg
                     viewBox="0 0 40 40"
@@ -67,7 +90,7 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
                       fill="white"
                     />
                   </svg>
-                  <span>Človek</span>
+                  <span>{title}</span>
                 </a>
               </li>
 
@@ -78,7 +101,10 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
                   CLASS_HIDE_MD_DOWN,
                 )}
               >
-                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                <a
+                  href="#"
+                  className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_NO_LINE)}
+                >
                   Naspať na Orange
                 </a>
               </li>
@@ -90,7 +116,7 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
                   type="button"
                   className={CLASS_NAV_BUTTON}
                   aria-label="Vyhľadávanie"
-                  aria-controls="megamenu-search"
+                  aria-controls={ids.searchDropdownId}
                   aria-expanded="false"
                   aria-haspopup="true"
                 >
@@ -102,57 +128,30 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
                   />
                 </button>
 
-                <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
+                <div
+                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
+                  id={ids.searchDropdownId}
+                >
                   <div className={CLASS_CONTAINER}>
-                    <input
-                      className={cx(
-                        CLASS_INPUT,
-                        CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
-                      )}
-                      id="megamenu-blog-search-input"
-                      type="text"
-                      placeholder="Search"
-                      name="search"
-                      defaultValue={searchEmpty ? "" : "apple"}
+                    <MegamenuSearchContent
+                      inputId={ids.searchInputDesktopId}
+                      inputLabel="Vyhľadávanie v blog menu"
+                      searchValue={searchValue}
+                      hasSearchEmpty={hasSearchEmpty}
+                      hasSearchFilled={hasSearchFilled}
                     />
-                    {searchEmpty ? (
-                      <>
-                        <p>Najhľadanejši výrazy</p>
-                        <ul className={CLASS_LIST_INLINE}>
-                          {list.map((item) => (
-                            <a key={item}>
-                              <span className={cx(CLASS_TAG)}>{item}</span>
-                            </a>
-                          ))}
-                        </ul>
-                      </>
-                    ) : (
-                      <ul className={CLASS_SUBNAV}>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">apple</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">apple hodinky</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">apple iphone</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">apple 16</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">apple pro</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">apple watch</a>
-                        </li>
-                      </ul>
-                    )}
                   </div>
                 </div>
               </li>
               <li className={CLASS_NAV_ITEM}>
-                <a href="#" className={CLASS_NAV_LINK}>
+                <button
+                  type="button"
+                  className={CLASS_NAV_BUTTON}
+                  data-megamenu-mobile-toggle
+                  data-megamenu-mobile-target="my-orange"
+                  aria-haspopup="dialog"
+                  aria-expanded="false"
+                >
                   <MegamenuIcon
                     width={24}
                     height={24}
@@ -161,14 +160,73 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
                     aria-hidden="true"
                   />
                   Môj Orange
-                </a>
+                </button>
               </li>
+
+              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
+                <button
+                  type="button"
+                  className={cx(
+                    CLASS_NAV_BUTTON,
+                    "megamenu__nav-button--toggle",
+                  )}
+                  aria-label="Kategórie"
+                  aria-controls="megamenu-blog-categories"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  <span className="megamenu__nav-button-icon-open">
+                    <MegamenuIcon
+                      width={24}
+                      height={24}
+                      name="menu"
+                      aria-hidden="true"
+                    />
+                  </span>
+                  <span className="megamenu__nav-button-icon-close">
+                    <MegamenuIcon
+                      width={24}
+                      height={24}
+                      name="close"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </button>
+
+                <div
+                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
+                  id="megamenu-blog-categories"
+                >
+                  <div className={CLASS_CONTAINER}>
+                    <p>Kategórie</p>
+                    <ul className={CLASS_LIST_INLINE}>
+                      {blogCategories.map((category) => (
+                        <li key={category}>
+                          <a
+                            href="#"
+                            className={cx(
+                              CLASS_TAG,
+                              CLASS_TAG_TRANSPARENT,
+                              CLASS_TAG_LARGE,
+                            )}
+                          >
+                            {category}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </li>
+
               <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
                 <button
                   type="button"
                   className={CLASS_NAV_BUTTON}
                   aria-label="Otvoriť menu"
-                  aria-haspopup="true"
+                  data-megamenu-mobile-toggle
+                  data-megamenu-mobile-target="main"
+                  aria-haspopup="dialog"
                   aria-expanded="false"
                 >
                   <MegamenuIcon
@@ -256,11 +314,14 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
         <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="mobile-menu-title"
+          aria-labelledby={ids.mobileMainTitleId}
+          aria-hidden="true"
         >
-          <h2 id="mobile-menu-title" className="sr-only">
+          <h2 id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
           </h2>
           <button
@@ -273,12 +334,35 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
             <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`}
+                    >
+                      <svg
+                        viewBox="0 0 40 40"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
+                        <path
+                          d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
+                          fill="white"
+                        />
+                      </svg>
+                      <span>{title}</span>
+                    </a>
+                  </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"
                     >
@@ -295,22 +379,57 @@ export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
             </div>
             <div className={CLASS_MOBILE_BODY}>
               <div className={CLASS_CONTAINER}>
-                <ul className={CLASS_ACCORDION}>
-                  <li className={CLASS_ACCORDION_ITEM}>
-                    <div className={CLASS_ACCORDION_HEADER}>
-                      <a href="#" className={CLASS_ACCORDION_BUTTON}>
-                        <span className={CLASS_ACCORDION_TITLE}>
+                <MegamenuSearchContent
+                  inputId={ids.searchInputMobileId}
+                  inputLabel="Vyhľadávanie v mobilnom blog menu"
+                  searchValue={searchValue}
+                  hasSearchEmpty={hasSearchEmpty}
+                  hasSearchFilled={hasSearchFilled}
+                />
+
+                {!showSearchState ? (
+                  <>
+                    <p>
+                      <b>Kategórie</b>
+                    </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" />
+
+                    <ul className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}>
+                      <li className={CLASS_NAV_ITEM}>
+                        <a href="#" className={CLASS_NAV_BUTTON}>
                           Naspať na Orange
-                        </span>
-                      </a>
-                    </div>
-                  </li>
-                </ul>
+                        </a>
+                      </li>
+                    </ul>
+                  </>
+                ) : null}
               </div>
             </div>
           </div>
         </div>
 
+        <MyOrangeMobilePanel
+          panelId={ids.myOrangePanelId}
+          titleId={ids.myOrangeTitleId}
+        />
+
         <button
           aria-label="Zatvoriť dropdown menu"
           className={CLASS_OVERLAY}

package/src/components/Megamenu/MegamenuSearchContent.tsx

@@ -0,0 +1,74 @@
+import cx from "classnames";
+
+import {
+  CLASS_INPUT,
+  CLASS_INPUT_SEARCH_RESPONSIVE,
+  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_LIST_INLINE,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
+  CLASS_TAG,
+} from "./constants";
+import { searchResultItems, searchTerms } from "./data";
+
+type MegamenuSearchContentProps = {
+  inputId: string;
+  inputLabel: string;
+  searchValue: string;
+  hasSearchEmpty: boolean;
+  hasSearchFilled: boolean;
+  emptyStateLinkHref?: string;
+};
+
+export const MegamenuSearchContent = ({
+  inputId,
+  inputLabel,
+  searchValue,
+  hasSearchEmpty,
+  hasSearchFilled,
+  emptyStateLinkHref = "#",
+}: MegamenuSearchContentProps) => {
+  return (
+    <>
+      <label htmlFor={inputId} className="sr-only">
+        {inputLabel}
+      </label>
+
+      <input
+        className={cx(
+          CLASS_INPUT,
+          CLASS_INPUT_SEARCH_RESPONSIVE,
+          CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+        )}
+        id={inputId}
+        type="text"
+        placeholder="Hľadať"
+        name="search"
+        defaultValue={searchValue}
+      />
+
+      {hasSearchEmpty ? (
+        <>
+          <p>Najhľadanejši výrazy</p>
+          <ul className={CLASS_LIST_INLINE}>
+            {searchTerms.map((item) => (
+              <li key={item}>
+                <a href={emptyStateLinkHref} className={cx(CLASS_TAG)}>
+                  {item}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : hasSearchFilled ? (
+        <ul className={CLASS_SUBNAV}>
+          {searchResultItems.map((item) => (
+            <li key={item} className={CLASS_SUBNAV_ITEM}>
+              <a href="#">{item}</a>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+};

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -0,0 +1,127 @@
+import cx from "classnames";
+
+import { MegamenuIcon } from "./MegaMenuIcon";
+import {
+  CLASS_CONTAINER,
+  CLASS_MOBILE,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_ACCOUNT,
+  CLASS_MOBILE_ACCOUNT_AVATAR,
+  CLASS_MOBILE_ACCOUNT_NAME,
+  CLASS_MOBILE_ACCOUNT_PHONE,
+  CLASS_MOBILE_ACCOUNT_LOGOUT,
+  CLASS_MOBILE_ACCOUNT_CTA,
+  CLASS_MOBILE_ACCOUNT_LINKS,
+  CLASS_MOBILE_ACCOUNT_LINK,
+  CLASS_NAV,
+  CLASS_NAV_SPACE_SMALL,
+  CLASS_NAV_SPACER,
+  CLASS_NAV_ITEM,
+  CLASS_NAV_BUTTON,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
+} from "./constants";
+
+type MyOrangeMobilePanelProps = {
+  titleId: string;
+  panelId?: string;
+};
+
+export const MyOrangeMobilePanel = ({
+  titleId,
+  panelId,
+}: 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"
+    >
+      <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_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>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className={CLASS_MOBILE_BODY}>
+          <div className={CLASS_CONTAINER}>
+            <section 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_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>
+            </section>
+
+            <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Megamenu/constants.ts

@@ -9,9 +9,13 @@ export const CLASS_CARD = `${CLASS_ROOT}__card`;
 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`;
+export const CLASS_NAV_MOBILE_LOCALE = `${CLASS_ROOT}__nav--mobile-locale`;
 export const CLASS_NAV_ITEM = `${CLASS_ROOT}__nav-item`;
+export const CLASS_NAV_ITEM_LEAD = `${CLASS_ROOT}__nav-item--lead`;
 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_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`;
@@ -26,6 +30,8 @@ export const CLASS_SPACER = `${CLASS_ROOT}-spacer`;
 export const CLASS_SPACER_SMALL = `${CLASS_ROOT}-spacer--small`;
 
 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_UP = `${CLASS_ROOT}--hide-lg-up`;
 export const CLASS_ALIGN_CENTER = `${CLASS_ROOT}--align-center`;
@@ -35,6 +41,14 @@ 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_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_MOBILE_ACCOUNT_LINKS = `${CLASS_ROOT}__mobile-account-links`;
+export const CLASS_MOBILE_ACCOUNT_LINK = `${CLASS_ROOT}__mobile-account-link`;
 
 // Accordion classes for mobile menu
 export const CLASS_ACCORDION = `${CLASS_ROOT}__accordion`;
@@ -47,6 +61,7 @@ export const CLASS_ACCORDION_BODY = `${CLASS_ROOT}__accordion-body`;
 
 export const CLASS_INPUT = `${CLASS_ROOT}__input`;
 export const CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input--search-icon-with-placeholder`;
+export const CLASS_INPUT_SEARCH_RESPONSIVE = `${CLASS_ROOT}__input--search-responsive`;
 
 export const CLASS_TAG = `${CLASS_ROOT}__tag`;
 export const CLASS_TAG_ORANGE = `${CLASS_ROOT}__tag--orange`;