@orangesk/orange-design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

package/src/components/Preview/styles/style.scss

@@ -0,0 +1,340 @@
+@use "../../../styles/tokens/color" as *;
+
+@layer components {
+  // ===== PREVIEW GRID STYLES =====
+  .preview-grid {
+    .grid {
+      position: relative;
+      z-index: 0;
+      padding: 0.5em 0;
+      background-color: rgba(0, 0, 0, 0.08);
+      border: 1px solid rgba(0, 0, 0, 0.15);
+    }
+
+    .grid__col,
+    *[class*="grid__col\-\-"] {
+      position: relative;
+      min-height: 1em;
+      line-height: 1.5;
+      background-color: rgba(0, 0, 0, 0.1);
+      background-clip: content-box;
+    }
+  }
+
+  // ===== PREVIEW COMPONENT STYLES =====
+  .previewWrapper {
+    display: flex;
+    flex-flow: column;
+    margin-bottom: 2rem;
+
+    &.isFullscreen {
+      background-color: white;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100vh;
+      z-index: 9999;
+    }
+  }
+  .preview {
+    padding: 24px;
+    border-radius: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .previewLive {
+    transition: all 200ms ease-in-out;
+  }
+
+  .selectWrapper {
+    position: relative;
+    font-family: inherit;
+    font-size: 14px;
+
+    .select {
+      .select__control {
+        cursor: pointer;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        min-width: 130px;
+      }
+
+      .select__value-container {
+        display: inline-flex;
+        justify-content: flex-end;
+      }
+
+      .select__single-value,
+      .select__option {
+        text-transform: uppercase;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .select__menu {
+        border-radius: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+
+  .codeExample {
+    margin-bottom: 0;
+    border-radius: 0 !important;
+    padding: 24px;
+
+    .isFullscreen & {
+      flex: 1 1 auto;
+      margin-bottom: 0;
+      padding: 0;
+    }
+  }
+
+  // ===== CODE EXAMPLE STYLES =====
+  .wrapper {
+    position: relative;
+  }
+
+  .copyButton {
+    position: absolute;
+    bottom: -3px;
+    right: 0;
+    transform: translateY(100%);
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    margin-bottom: 0;
+    background: var(--color-fill-contrast);
+
+    &:hover {
+      background: var(--color-fill-disabled);
+    }
+
+    &.success {
+      background: var(--color-fill-positive);
+    }
+
+    &.error {
+      background: var(--color-fill-negative);
+    }
+  }
+
+  .codeTypeToggle {
+    margin-bottom: 0 !important;
+    border-radius: 0 !important;
+    border-bottom: none !important;
+    background-color: var(--color-background-primary);
+
+    &:hover {
+      background-color: var(--color-background-primary);
+    }
+
+    &.isActive {
+      background-color: var(--color-background-contrast);
+      color: var(--color-text-inverse);
+    }
+  }
+
+  // ===== PREVIEW TITLE BAR STYLES =====
+  .bar {
+    margin-top: 1rem !important;
+    margin-bottom: 0.5rem;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    align-items: center;
+    .btn {
+      margin: 0 !important;
+    }
+  }
+
+  // ===== INTERACT COMPONENT STYLES =====
+  .interact {
+    position: relative;
+  }
+
+  .interactContainer {
+    position: relative;
+  }
+
+  // ===== PROPS GROUP STYLES =====
+  .group {
+    width: 90%;
+    box-sizing: border-box;
+    position: relative;
+    margin-bottom: 1em;
+
+    & > * + * {
+      margin-top: 1em;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: -20px;
+      left: -1px;
+      height: 20px;
+      width: 0;
+    }
+  }
+
+  // ===== TOOLTIP STYLES =====
+  .tooltip {
+    position: relative;
+    color: #fff;
+
+    .tooltipTitle {
+      pointer-events: none;
+      position: absolute;
+      width: 200px;
+      text-align: center;
+      padding: 0.5rem;
+      background: black;
+      border-radius: 0.25rem;
+      left: 0;
+      top: 50%;
+      transform: translate(-105%, -50%);
+      opacity: 0;
+      transition: opacity 0.3s ease-in 0.1s;
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translate(100%, -50%);
+        border-style: solid;
+        border-width: 6px 0 6px 8px;
+        border-color: transparent transparent transparent #000;
+      }
+    }
+
+    .tooltipTrigger:hover + .tooltipTitle {
+      opacity: 1;
+    }
+
+    .tooltipTrigger {
+      background: #8b5cf6;
+      color: #fff;
+      font-weight: bold;
+      text-align: center;
+      font-size: 14px;
+      line-height: 16px;
+      height: 16px;
+      width: 16px;
+      margin: 0;
+      border-radius: 50%;
+    }
+  }
+
+  // ===== PROP INPUT STYLES =====
+  .input {
+    display: block;
+    font-size: 16px;
+    color: #000;
+    line-height: 1.3;
+    padding: 0.3em 1.4em 0.2em 0.5em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #666;
+    border-radius: 0.3em;
+    appearance: none;
+    background-color: #fff;
+
+    &:focus,
+    &:hover {
+      border-color: #666;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  // ===== PROP SELECT STYLES =====
+  .select {
+    display: block;
+    font-size: 16px;
+    color: #000;
+    line-height: 1.3;
+    padding: 0.3em 1.4em 0.2em 0.5em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #666;
+    border-radius: 0.3em;
+    appearance: none;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat, repeat;
+    background-position:
+      right 0.7em top 50%,
+      0 0;
+    background-size:
+      0.65em auto,
+      100%;
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:hover {
+      border-color: #666;
+    }
+
+    option {
+      font-weight: normal;
+    }
+  }
+
+  // ===== PROP LABEL WITH TOOLTIP STYLES =====
+  .label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+  }
+
+  // ===== PROP CHECKBOX STYLES =====
+  .checkbox {
+    margin-right: 0.5rem;
+  }
+
+  // ===== PROP FORM FIELD STYLES =====
+  .field {
+    margin-bottom: 1rem;
+  }
+
+  .defaultValue {
+    color: grey;
+    margin-top: 0.25rem;
+  }
+
+  // ===== BUTTON SHOW PROPS GROUP STYLES =====
+  .button {
+    padding-left: 0;
+  }
+
+  .text {
+    font-size: 20px;
+  }
+
+  .triangle {
+    font-size: 18px;
+    display: inline-block;
+    transition: transform 0.3s;
+
+    &.up {
+      transform: rotate(180deg);
+    }
+
+    &.down {
+      transform: none;
+    }
+  }
+}

package/src/components/PromoBanner/PromoBanner.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import cx from "classnames";
+import { Grid, GridCol } from "../Grid";
+import { Image } from "../Image";
+import { Button } from "../Button";
+
+interface PromoBannerProps {
+  colorScheme?: "light" | "dark";
+  className?: string;
+  title: string;
+  secondaryTitle?: string;
+  description: string;
+  buttonText: string;
+  image?: string;
+}
+
+const CLASS_ROOT = "promo-banner";
+export const PromoBanner = ({
+  title,
+  secondaryTitle,
+  description,
+  buttonText,
+  image,
+  colorScheme,
+  className,
+}: PromoBannerProps) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      "is-light": colorScheme === "light",
+      "is-dark": colorScheme === "dark",
+    },
+    className,
+  );
+  return (
+    <div className={classes}>
+      <Grid>
+        <GridCol
+          size={{ xs: 12, md: image ? 6 : 8 }}
+          className={`${CLASS_ROOT}__item`}
+        >
+          <h2 className="display-3 thin mb-medium">
+            <span
+              className={`${secondaryTitle ? `${CLASS_ROOT}__item-title` : ""}`}
+            >
+              {title}
+            </span>
+            {secondaryTitle && (
+              <span className={`color-orange ml-small`}>{secondaryTitle}</span>
+            )}
+          </h2>
+          <p className={`mb-large ${image ? "show-lg" : ""}`}>{description}</p>
+          <Button type="fill" size="large">
+            {buttonText}
+          </Button>
+        </GridCol>
+        {image && (
+          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+            <Image src={image} alt="" className="mb-none" />
+          </GridCol>
+        )}
+      </Grid>
+    </div>
+  );
+};

package/src/components/PromoBanner/index.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { PromoBanner } from "./PromoBanner";

package/src/components/PromoBanner/styles/mixins.scss

@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "sass:math";
+
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+
+@mixin promo-banner-base() {
+  background-color: var(--color-background-primary);
+  color: var(--color-text-default);
+  padding: space.get("xlarge") 70px;
+
+  @include breakpoint.get("lg", "down") {
+    padding: space.get("xlarge") 20px;
+  }
+
+  @include breakpoint.get("sm", "down") {
+    padding: 30px space.get("small");
+  }
+}
+
+@mixin promo-banner-image() {
+  text-align: center;
+  align-self: center;
+}
+
+@mixin promo-banner-item() {
+  padding-right: space.get("xlarge") !important;
+  @include breakpoint.get("lg", "down") {
+    padding-right: 10px !important;
+  }
+}
+
+@mixin promo-banner-item-title() {
+  margin-right: space.get("small") !important;
+}

package/src/components/PromoBanner/styles/style.scss

@@ -0,0 +1,23 @@
+@use "../../../styles/tools/layout";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+@use "./mixins";
+
+@layer components {
+  .promo-banner {
+    @include mixins.promo-banner-base;
+
+    &__image {
+      @include mixins.promo-banner-image;
+    }
+
+    &__item {
+      @include mixins.promo-banner-item;
+
+      &-title {
+        @include mixins.promo-banner-item-title;
+      }
+    }
+  }
+}

package/src/components/PromotionCard/PromotionCard.mdx

@@ -0,0 +1,191 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import Preview from '../../styleguide/Preview';
+import Image from '../../components/Image';
+
+import PromotionCard, {
+  PromotionCardContent,
+  PromotionCardImageWrapper,
+  PromotionCardSection,
+  PromotionCardTitle,
+} from './';
+import { Button } from '../index';
+import Divider from '../Divider';
+import Pagination from '../Pagination';
+
+import phones from '../../assets/images/developers/phones.png';
+import Grid, { GridCol } from '../Grid';
+
+export const getItems = (count = 10, current = Math.ceil(count / 2)) =>
+  [
+    ...Array(count)
+      .fill('')
+      .map((_, i) => i + 1),
+  ].map(n => ({
+    label: `${n}`,
+    ariaLabel: `Strana ${n}`,
+    href: `/?page=${n}`,
+    ...(current === n ? { isActive: true } : {}),
+  }));
+
+export const label = 'Výber stránok';
+
+export const DefaultPromotionsCard = () => (
+  <PromotionCard>
+    <PromotionCardSection>
+      <PromotionCardContent>
+        <PromotionCardTitle>
+          <h2>Online ochrana pre váš digitálny svet</h2>
+        </PromotionCardTitle>
+        <p className="mb-none">
+          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
+        </p>
+      </PromotionCardContent>
+      <Button href="#">Zistiť viac</Button>
+    </PromotionCardSection>
+    <PromotionCardImageWrapper>
+      <Image src={phones} alt="iPhone image" />
+    </PromotionCardImageWrapper>
+  </PromotionCard>
+);
+
+export const DarkPromotionsCard = () => (
+  <PromotionCard colorScheme="dark">
+    <PromotionCardSection>
+      <PromotionCardContent>
+        <PromotionCardTitle>
+          <h2>Online ochrana pre váš digitálny svet</h2>
+        </PromotionCardTitle>
+        <p className="mb-none">
+          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
+        </p>
+      </PromotionCardContent>
+      <Button href="#">Zistiť viac</Button>
+    </PromotionCardSection>
+    <PromotionCardImageWrapper>
+      <Image src={phones} alt="iPhone image" />
+    </PromotionCardImageWrapper>
+  </PromotionCard>
+);
+
+export const InversePromotionsCard = () => (
+  <PromotionCard colorScheme="dark">
+    <PromotionCardSection isInverse>
+      <PromotionCardContent>
+        <PromotionCardTitle>
+          <h2>Online ochrana pre váš digitálny svet</h2>
+        </PromotionCardTitle>
+        <p className="mb-none">
+          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
+        </p>
+      </PromotionCardContent>
+      <Button href="#">Zistiť viac</Button>
+    </PromotionCardSection>
+    <PromotionCardImageWrapper>
+      <Image src={phones} alt="iPhone image" />
+    </PromotionCardImageWrapper>
+  </PromotionCard>
+);
+
+# Promotion card
+
+Karta, ktorá propaguje produkt alebo službu. Komponent Promotion card je adaptáciou [Card komponentu](/components/card).
+
+## Príklady
+
+### Základný
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <DefaultPromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Tmavý variant
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <DarkPromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Inverzný variant
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <InversePromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Viacero kariet
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <DefaultPromotionsCard />
+      <DarkPromotionsCard />
+      <DefaultPromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Použitie
+
+### Grid
+
+Šírka karty na väčších obrazovkách je obmedzená gridom. Pozri príklad kódu nižšie:
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <p className="mb-small">
+        <b>Nové</b>
+      </p>
+      <Divider
+        thinLine
+        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
+      />
+      <DefaultPromotionsCard />
+      <p className="mb-small">
+        <b>Staršie</b>
+      </p>
+      <Divider
+        thinLine
+        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
+      />
+      <DarkPromotionsCard />
+      <DefaultPromotionsCard />
+      <InversePromotionsCard />
+      <Pagination label={label} items={getItems(10, 1)} isCompact />
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<PromotionCard />" component={PromotionCard} />
+
+<ComponentDocs
+  title="<PromotionCardSection />"
+  component={PromotionCardSection}
+/>
+
+<ComponentDocs
+  title="<PromotionCardContent />"
+  component={PromotionCardContent}
+/>
+
+<ComponentDocs
+  title="<PromotionCardTitle />"
+  component={PromotionCardTitle}
+/>
+
+<ComponentDocs
+  title="<PromotionCardImageWrapper />"
+  component={PromotionCardImageWrapper}
+/>

package/src/components/PromotionCard/PromotionCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { Card } from '../Card';
+
+import { CLASS_ROOT } from './constants';
+
+export interface PromotionCardProps {
+  /** Inverse colors */
+  colorScheme?: 'light' | 'dark';
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCard: React.FC<PromotionCardProps> = ({ 
+  colorScheme = 'light', 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+  const color = colorScheme === 'dark' ? 'black' : 'white';
+  return (
+    <Card className={classes} color={color} {...other}>
+      {children}
+    </Card>
+  );
+};
+
+PromotionCard.displayName = 'PromotionCard';

package/src/components/PromotionCard/PromotionCardContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { CLASS_CONTENT } from './constants';
+
+interface PromotionCardContentProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCardContent: React.FC<PromotionCardContentProps> = ({ 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_CONTENT, className);
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+PromotionCardContent.displayName = 'PromotionCardContent';