@orangesk/cms-templates 1.0.0-beta.0

package/src/components/Megamenu/MegamenuClovek.tsx

@@ -0,0 +1,222 @@
+import React from "react";
+import clsx from "clsx";
+
+export const MegamenuClovek = ({ isDark }: { isDark?: boolean }) => {
+  return (
+    <header>
+      <nav
+        className={clsx("megamenu is-sticky", { "is-dark": isDark })}
+        data-megamenu=""
+        aria-label="Hlavné menu"
+      >
+        <div className="megamenu__main">
+          <div className="megamenu__container">
+            <h2 id="menu-title" className="sr-only">
+              Hlavné menu
+            </h2>
+            <ul className="megamenu__nav" aria-labelledby="menu-title">
+              <li className="megamenu__nav-item megamenu__nav-item--main">
+                <a
+                  href="#"
+                  className="megamenu__nav-logo"
+                  aria-label="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>
+                </a>
+              </li>
+              <li className="megamenu__nav-item megamenu__nav-item--main megamenu--hide-md-down">
+                <a href="#" className="megamenu__nav-link">
+                  Naspať na Orange
+                </a>
+              </li>
+              <li className="megamenu__nav-spacer" aria-hidden="true" />
+              <li className="megamenu__nav-item megamenu--hide-md-down">
+                <button
+                  type="button"
+                  className="megamenu__nav-button"
+                  aria-label="Vyhľadávanie"
+                  aria-controls="megamenu-search"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  <svg
+                    className="megamenu-icon"
+                    aria-hidden="true"
+                    width={24}
+                    height={24}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#search"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#search"
+                    />
+                  </svg>
+                </button>
+                <div className="megamenu__nav-dropdown" id="megamenu-search">
+                  <div className="megamenu__container">
+                    <input
+                      className="megamenu__input megamenu__input--search-icon-with-placeholder"
+                      id="search-1"
+                      type="text"
+                      placeholder="Search"
+                      name="search-1"
+                    />
+                    <ul className="megamenu__subnav">
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple hodinky</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple iphone</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple 16</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple pro</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple watch</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+              <li className="megamenu__nav-item">
+                <a href="#" className="megamenu__nav-link">
+                  <svg
+                    className="megamenu-icon megamenu__nav-icon"
+                    aria-hidden="true"
+                    width={24}
+                    height={24}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#user"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#user"
+                    />
+                  </svg>
+                  Môj Orange
+                </a>
+              </li>
+              <li className="megamenu__nav-item megamenu--hide-lg-up">
+                <button
+                  type="button"
+                  className="megamenu__nav-button"
+                  aria-label="Otvoriť menu"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <svg
+                    className="megamenu-icon"
+                    aria-hidden="true"
+                    width={24}
+                    height={24}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#menu"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#menu"
+                    />
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          className="megamenu__mobile"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="mobile-menu-title"
+        >
+          <h2 id="mobile-menu-title" className="sr-only">
+            Hlavné menu
+          </h2>
+          <button
+            aria-label="Zatvoriť menu"
+            className="megamenu__mobile-overlay"
+            type="button"
+          />
+          <div className="megamenu__mobile-wrapper">
+            <div className="megamenu__mobile-header">
+              <div className="megamenu__container">
+                <ul className="megamenu__nav megamenu__nav--space-small">
+                  <li className="megamenu__nav-spacer" aria-hidden="true" />
+                  <li className="megamenu__nav-item">
+                    <button
+                      type="button"
+                      data-megamenu-close-button="true"
+                      className="megamenu__nav-button"
+                      aria-label="Zatvoriť menu"
+                    >
+                      <svg
+                        className="megamenu-icon"
+                        aria-hidden="true"
+                        width={20}
+                        height={20}
+                      >
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--light"
+                          xlinkHref="/sprite.svg#close"
+                        />
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--dark"
+                          xlinkHref="/sprite.svg#close"
+                        />
+                      </svg>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="megamenu__mobile-body">
+              <div className="megamenu__container">
+                <ul className="megamenu__accordion">
+                  <li className="megamenu__accordion-item">
+                    <div className="megamenu__accordion-header">
+                      <a href="#" className="megamenu__accordion-button">
+                        <span className="megamenu__accordion-title">
+                          Naspať na Orange
+                        </span>
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          aria-label="Zatvoriť dropdown menu"
+          className="megamenu__overlay"
+          type="button"
+        />
+      </nav>
+      <div className="megamenu-spacer--small" aria-hidden="true" />
+    </header>
+  );
+};

package/src/components/Megamenu/index.ts

@@ -0,0 +1,2 @@
+export { MegamenuClovek } from "./MegamenuClovek";
+export { Megamenu } from "./Megamenu";

package/src/components/PageHeading/PageHeadingSimple.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Section } from "@orangesk/orange-design-system";
+import clsx from "clsx";
+
+type PageHeadingSimpleProps = {
+  title: string;
+  children?: string;
+};
+
+export const PageHeadingSimple = ({
+  title,
+  children,
+}: PageHeadingSimpleProps) => {
+  return (
+    <Section>
+      <h1 className={clsx("h1 thin", { mb: children })}>{title}</h1>
+      {children}
+    </Section>
+  );
+};

package/src/components/PageHeading/index.ts

@@ -0,0 +1 @@
+export { PageHeadingSimple } from "./PageHeadingSimple";

package/src/components/ProductImage/ProductImage.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Image } from "@orangesk/orange-design-system";
+import clsx from "clsx";
+
+type colors = "nickel" | "black" | "cerulean-blue" | "permanent-geranium-lake";
+
+type ProductImageProps = {
+  src: string;
+  dots?: colors[];
+};
+
+export const ProductImage = ({ src, dots }: ProductImageProps) => {
+  return (
+    <div className="product-image">
+      <Image src={src} className="mb" alt="Samsung Galaxy Fold 7" />
+      <div className="product-image__dots">
+        {dots?.map((color) => (
+          <span
+            key={color}
+            className={clsx(
+              "product-image__dot",
+              `product-image__dot--${color}`,
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/ProductImage/_product-image.scss

@@ -0,0 +1,45 @@
+@use "@orangesk/orange-design-system/src/styles/tools/convert";
+@use "@orangesk/orange-design-system/src/styles/tokens/breakpoint";
+
+@layer components {
+  .product-image {
+    position: relative;
+
+    &__dots {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: convert.to-rem(40px);
+      display: flex;
+      flex-direction: column;
+      gap: convert.to-rem(10px);
+
+      @include breakpoint.get("lg", "down") {
+        right: convert.to-rem(20px);
+      }
+    }
+
+    &__dot {
+      width: convert.to-rem(24px);
+      height: convert.to-rem(24px);
+      border-radius: 50%;
+      border: 1px solid var(--color-border-subtle);
+
+      &--nickel {
+        background-color: #727272;
+      }
+
+      &--black {
+        background-color: #000000;
+      }
+
+      &--cerulean-blue {
+        background-color: #3a5fb9;
+      }
+
+      &--permanent-geranium-lake {
+        background-color: #ec3526;
+      }
+    }
+  }
+}

package/src/components/ProductImage/index.ts

@@ -0,0 +1 @@
+export { ProductImage } from "./ProductImage";

package/src/components/SectionTitle/SectionTitle.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Bar, BarItem, Link, Icon } from "@orangesk/orange-design-system";
+
+type SectionTitleProps = {
+  title?: string;
+  linkText?: string;
+  className?: string;
+};
+
+export const SectionTitle = ({ title, linkText, className }: SectionTitleProps) => {
+  return (
+    <Bar align="center" className={className}>
+      <BarItem isFilling>
+        <h2 className="thin h2">{title}</h2>
+      </BarItem>
+      <BarItem className="hide show-md">
+        <Link href="#" className="bold hide show-md flex">
+          {linkText}
+          <Icon
+            name="chevron-right"
+            aria-hidden={true}
+            size="large"
+            className="link__icon-right"
+          />
+        </Link>
+      </BarItem>
+    </Bar>
+  );
+};

package/src/components/SectionTitle/index.ts

@@ -0,0 +1 @@
+export { SectionTitle } from "./SectionTitle";