@orangesk/cms-templates 1.0.0-beta.0 → 1.0.0-beta.2

package/src/components/Megamenu/MegamenuClovek.tsx

@@ -1,222 +0,0 @@
-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

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

package/src/components/PageHeading/PageHeadingSimple.tsx

@@ -1,21 +0,0 @@
-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

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

package/src/components/ProductImage/ProductImage.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,45 +0,0 @@
-@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

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

package/src/components/SectionTitle/SectionTitle.tsx

@@ -1,29 +0,0 @@
-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

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