@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -1,73 +1,88 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
+import { BrandMark } from "./BrandMark";
 import {
+  CLASS_CAPTION,
   CLASS_CONTAINER,
-  CLASS_HIDE_MD_DOWN,
   CLASS_HIDE_LG_UP,
+  CLASS_HIDE_MD_DOWN,
+  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,
   CLASS_NAV_ICON,
+  CLASS_NAV_ICON_NO_GAP_MD_DOWN,
   CLASS_NAV_ITEM,
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
+  CLASS_NAV_LINK_NO_LINE,
   CLASS_NAV_LOGO,
+  CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_ROOT,
-  CLASS_SUBNAV,
-  CLASS_SUBNAV_ITEM,
-  CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
+  CLASS_NAV_VERTICAL,
   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_ROOT,
   CLASS_SPACER_SMALL,
+  CLASS_SUBNAV,
+  CLASS_TAG,
+  CLASS_TAG_LARGE,
+  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";
+
+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,
+  compactLogoOnly = false,
+}: 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 }: any) => {
   return (
     <header>
       <nav
-        className={cx(CLASS_ROOT, className)}
+        className={cx(CLASS_ROOT, className, {
+          "is-sticky": isSticky,
+        })}
         data-megamenu
         aria-label="Main navigation"
       >
         <div className={CLASS_MAIN}>
           <div className={CLASS_CONTAINER}>
-            <h2 id="menu-title" className="sr-only">
-              Hlavné menu
-            </h2>
-            <ul className={CLASS_NAV} aria-labelledby="menu-title">
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
                 <a
-                  href="#"
+                  href="/"
                   className={CLASS_NAV_LOGO}
-                  aria-label="Domovská stránka"
+                  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>Človek</span>
+                  {compactLogoOnly ? <Logo /> : <BrandMark />}
+                  <span>{title}</span>
                 </a>
               </li>
 
@@ -78,7 +93,10 @@ export const MegamenuBlog = ({ className }: any) => {
                   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 +108,7 @@ export const MegamenuBlog = ({ className }: any) => {
                   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,59 +120,109 @@ export const MegamenuBlog = ({ className }: any) => {
                   />
                 </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="search-1"
-                      type="text"
-                      placeholder="Search"
-                      name="search-1"
+                    <MegamenuSearchContent
+                      inputId={ids.searchInputDesktopId}
+                      inputLabel="Vyhľadávanie v blog menu"
+                      searchValue={searchValue}
+                      hasSearchEmpty={hasSearchEmpty}
+                      hasSearchFilled={hasSearchFilled}
                     />
-                    <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"
+                  aria-label="Môj Orange"
+                >
                   <MegamenuIcon
                     width={24}
                     height={24}
                     name="user"
-                    className={CLASS_NAV_ICON}
+                    className={cx(
+                      CLASS_NAV_ICON,
+                      CLASS_NAV_ICON_NO_GAP_MD_DOWN,
+                    )}
                     aria-hidden="true"
                   />
-                  Môj Orange
-                </a>
+                  <span className={CLASS_HIDE_MD_DOWN}>Môj Orange</span>
+                </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 className={CLASS_CAPTION}>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
@@ -175,7 +243,7 @@ export const MegamenuBlog = ({ className }: any) => {
           <ul className={cx(CLASS_LIST_INLINE, CLASS_ALIGN_CENTER)}>
             <li>
               <a
-                href="#"
+                href="/"
                 className={cx(
                   CLASS_TAG,
                   CLASS_TAG_TRANSPARENT,
@@ -187,7 +255,7 @@ export const MegamenuBlog = ({ className }: any) => {
             </li>
             <li>
               <a
-                href="#"
+                href="/"
                 className={cx(
                   CLASS_TAG,
                   CLASS_TAG_TRANSPARENT,
@@ -199,7 +267,7 @@ export const MegamenuBlog = ({ className }: any) => {
             </li>
             <li>
               <a
-                href="#"
+                href="/"
                 className={cx(
                   CLASS_TAG,
                   CLASS_TAG_TRANSPARENT,
@@ -211,7 +279,7 @@ export const MegamenuBlog = ({ className }: any) => {
             </li>
             <li>
               <a
-                href="#"
+                href="/"
                 className={cx(
                   CLASS_TAG,
                   CLASS_TAG_TRANSPARENT,
@@ -223,7 +291,7 @@ export const MegamenuBlog = ({ className }: any) => {
             </li>
             <li>
               <a
-                href="#"
+                href="/"
                 className={cx(
                   CLASS_TAG,
                   CLASS_TAG_TRANSPARENT,
@@ -242,13 +310,16 @@ export const MegamenuBlog = ({ className }: any) => {
         <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">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}
@@ -259,12 +330,24 @@ export const MegamenuBlog = ({ className }: any) => {
             <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>
+
                   <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"
                     >
@@ -281,22 +364,55 @@ export const MegamenuBlog = ({ className }: any) => {
             </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 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" />
+
+                    <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,82 @@
+import cx from "classnames";
+
+import {
+  CLASS_CAPTION,
+  CLASS_INPUT,
+  CLASS_INPUT_WRAPPER,
+  CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
+  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>
+
+      <span
+        className={cx(
+          CLASS_INPUT_WRAPPER,
+          CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
+          CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
+        )}
+      >
+        <input
+          className={CLASS_INPUT}
+          id={inputId}
+          type="text"
+          placeholder="Hľadať"
+          name="search"
+          defaultValue={searchValue}
+        />
+      </span>
+
+      {hasSearchEmpty ? (
+        <>
+          <p className={CLASS_CAPTION}>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="#" className="no-underline">
+                {item}
+              </a>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+};

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -0,0 +1,126 @@
+import cx from "classnames";
+import {
+  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_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,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
+} from "./constants";
+import { MegamenuIcon } from "./MegaMenuIcon";
+
+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}>
+            <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_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>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};