@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Hero/Hero.mdx

@@ -1,168 +0,0 @@
-import queryString from 'query-string';
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import HeroIframePreview from './IframePreview';
-
-import Alert from '../Alert';
-
-import Hero from './';
-
-# Hero
-
-## Composition
-
-Hero combines Container, Grid, Button and Sticker together with it's built in responsive styles to create a modular component. Height is determined by its content and image, which means that too much text can overflow the image. Copywriters and designers must test that their images and text fit on each breakpoint.
-
-### Title
-
-- Required.
-- Must be shorter than 45 characters.
-- Medium (`.display-2`) and large (`.display-1`) variants must match with medium and large description size. Medium title can only be used with medium description and large title with large description.
-
-### Description
-
-- Optional.
-- Must be shorter than 120 characters.
-- Medium (`.h5`) and large (`.h4`) variants must match with medium and large title size. Medium description can only be used with medium title and large description with large title.
-
-### Price
-
-- Optional.
-- All price wording and numbers must be the same size.
-- Must not contain conditions (e.g. asterisk and explanation).
-
-### Button
-
-- Optional.
-- Points to the main actionable section of the page.
-- Copy should reflect the desired action. Instead of "Read more", try and match the button text with the actionable section.
-
-### Sticker
-
-- Optional.
-- Can contain an icon or text.
-
-### Image
-
-- Always aligned to the right and vertically centered.
-- [**Fullwidth**](#fullwidth-photo-all-features) image dimensions:
-  - **xs**: 768 x 540
-  - **sm, md**: 768 x 540 + hidpi version
-  - **lg**: 1024 x 540 + hidpi version
-  - **xl**: 1280 x 540 + hidpi version
-  - **xxl**: 1400 x 540 + hidpi version
-- [**Half width**](#half-width-photo) image dimensions:
-  - **xs**: 768 x 540
-  - **sm, md**: 768 x 540 + hidpi version
-  - **lg**: 470 x 540 + hidpi version
-  - **xl**: 590 x 540 + hidpi version
-  - **xxl**: 650 x 540 + hidpi version
-- [**Single size**](#with-single-image-size) half width image dimensions:
-  - **xs**: 626 x 540 + hidpi version
-- [**Vendor logo**](#with-vendor-logo) height and position
-  the logo size is constrained by its height and must be placed inside the image by a graphic designer.
-  - **xs**: 30px, 10px from top, 10px from left
-  - **sm, md**: 50px, 30px from top, 20px from left
-  - **lg**: 50px, 50px from top, 30px from right
-  - **xl**: 60px, 60px from top, 30px from right
-  - **xxl**: 60px, 60px from top, 50px from right
-
-### Gradient overlay
-
-- Optional.
-- Makes sure text is readable on full width images.
-
-## Variants
-
-### Build your own!
-
-[Visit the playground](/pages/hero-playground.html) to build your own Hero
-
-### Fullwidth photo all features
-
-<HeroIframePreview
-  textSize="large"
-  background="black"
-  title="Ušetrite až 100&nbsp;€ pri kúpe hernej konzoly"
-  description="Nezmeškajte štedrú ponuku od Orangeu a získajte od nás k internetu hernú konzolu so zľavou až 100&nbsp;."
-  price="od 10&nbsp;€/mes."
-  sticker={{ children: 'Lorem ipsum' }}
-  image={{
-    default: '/images/hero/photo.jpg',
-    xxl: '/images/hero/photo-xxl.jpg, /images/hero/photo-xxl-2x.jpg 2x',
-    xl: '/images/hero/photo-xl.jpg, /images/hero/photo-xl-2x.jpg 2x',
-    lg: '/images/hero/photo-lg.jpg, /images/hero/photo-lg-2x.jpg 2x',
-    sm: '/images/hero/photo.jpg, /images/hero/photo-2x.jpg 2x',
-  }}
-  button={{ children: 'Chcem zľavu na hernú konzolu' }}
-  hasGradientOverlay={true}
-  hasFullwidthImage={true}
-/>
-
-### Half width photo
-
-<HeroIframePreview
-  background="gray"
-  title="Vyberte si vašu dvojičku s OPPO"
-  textSize="large"
-  description="Vyberte si dvojicu smartfónov OPPO. Druhý len za 1 € a bez viazanosti."
-  image={{
-    default: '/images/hero/example.jpg',
-    xxl: '/images/hero/example-xxl.jpg, /images/hero/example-xxl@2x.jpg 2x',
-    xl: '/images/hero/example-xl.jpg, /images/hero/example-xl@2x.jpg 2x',
-    lg: '/images/hero/example-lg.jpg, /images/hero/example-lg@2x.jpg 2x',
-    sm: '/images/hero/example.jpg, /images/hero/example@2x.jpg 2x',
-  }}
-  sticker={{ children: 'Získajte druhý telefón za 1 €' }}
-  hasGradientOverlay
-/>
-
-### With single image size
-
-<HeroIframePreview
-  background="black"
-  title="Byť v Orangei, znamená byť v dobrých rukách"
-  textSize="large"
-  description="Jednoducho sa to oplatí. Ako operátor s maximálnym pokrytím stále myslíme na našich zákazníkov a zdokonaľujeme naše služby. Nechajte sa prekvapiť."
-  image={{
-    src: '/images/hero/single.png',
-    srcSet: '/images/hero/single.png 1x, /images/hero/single@2x.png 2x',
-  }}
-/>
-
-### With vendor logo
-
-<HeroIframePreview
-  background="gray"
-  title="Samsung Galaxy Z Fold4 | Z Flip4"
-  textSize="large"
-  description="Objednajte si jeden z telefónov už teraz."
-  image={{
-    default: '/images/hero/vendor.png',
-    xxl: '/images/hero/vendor-xxl.png, /images/hero/vendor-xxl@2x.png 2x',
-    xl: '/images/hero/vendor-xl.png, /images/hero/vendor-xl@2x.png 2x',
-    lg: '/images/hero/vendor-lg.png, /images/hero/vendor-lg@2x.png 2x',
-    sm: '/images/hero/vendor.png, /images/hero/vendor@2x.png 2x',
-  }}
-/>
-
-### With other vendor logo style
-
-<HeroIframePreview
-  background="black"
-  title="Samsung Galaxy S21 | S21+ | S21 Ultra 5G"
-  textSize="medium"
-  description="Objednajte si jeden z telefónov už teraz."
-  image={{
-    default: '/images/hero/old-vendor.jpg',
-    xxl: '/images/hero/old-vendor-xxl.jpg, /images/hero/old-vendor-xxl-2x.jpg 2x',
-    xl: '/images/hero/old-vendor-xl.jpg, /images/hero/old-vendor-xl-2x.jpg 2x',
-    lg: '/images/hero/old-vendor-lg.jpg, /images/hero/old-vendor-lg-2x.jpg 2x',
-    sm: '/images/hero/old-vendor.jpg, /images/hero/old-vendor-2x.jpg 2x',
-  }}
-/>
-
-## Props
-
-<ComponentDocs title="<Hero />" component={Hero} />

package/src/components/Hero/HeroPlayground.tsx

@@ -1,369 +0,0 @@
-import React, { useEffect, useState } from "react";
-import queryString from "query-string";
-
-import { Fieldset } from "../Forms/Fieldset";
-import { Container } from "../Container";
-import { Grid, GridCol } from "../Grid";
-import { Field, TextInput, TextArea } from "../Forms";
-
-import {
-  Hero,
-  HeroBackground,
-  HeroTextSize,
-  StickerColor,
-  HeroPrice,
-} from "./Hero";
-
-interface ImageConfig {
-  default: string;
-  xxl: string;
-  xl: string;
-  lg: string;
-  sm: string;
-  [key: string]: string;
-}
-
-const config = {
-  hasFullwidthImage: false,
-  background: "black" as HeroBackground,
-  button: null,
-  description: "Description text",
-  hasGradientOverlay: false,
-  price: null,
-  textSize: "medium" as HeroTextSize,
-  title: "Title",
-  stickerColor: "orange" as StickerColor,
-  stickerText: null,
-  image: {
-    default: "/images/hero/photo.jpg",
-    xxl: "/images/hero/photo-xxl.jpg, /images/hero/photo-xxl-2x.jpg 2x",
-    xl: "/images/hero/photo-xl.jpg, /images/hero/photo-xl-2x.jpg 2x",
-    lg: "/images/hero/photo-lg.jpg, /images/hero/photo-lg-2x.jpg 2x",
-    sm: "/images/hero/photo.jpg, /images/hero/photo-2x.jpg 2x",
-  } as ImageConfig,
-};
-
-export const HeroPlayground: React.FC = () => {
-  const [hasFullwidthImage, setHasFullwidthImage] = useState(
-    config.hasFullwidthImage,
-  );
-  const [background, setBackground] = useState<HeroBackground>(
-    config.background,
-  );
-  const [button, setButton] = useState<any>(config.button);
-  const [description, setDescription] = useState(config.description);
-  const [hasGradientOverlay, setGradientOverlay] = useState(
-    config.hasGradientOverlay,
-  );
-  const [price, setPrice] = useState<HeroPrice | null>(config.price);
-  const [textSize, setTextSize] = useState<HeroTextSize>(config.textSize);
-  const [title, setTitle] = useState(config.title);
-  const [stickerColor, setStickerColor] = useState<StickerColor>(
-    config.stickerColor,
-  );
-  const [stickerText, setStickerText] = useState<string | null>(
-    config.stickerText,
-  );
-  const [image, setImage] = useState<ImageConfig>(config.image);
-  const [isEditable, setIsEditable] = useState(true);
-
-  useEffect(() => {
-    const params = queryString.parse(window.location.search, {
-      parseBooleans: true,
-    });
-    const sticker = params?.sticker
-      ? JSON.parse(params?.sticker as string)
-      : {};
-    if (params?.hasFullwidthImage !== undefined) {
-      setHasFullwidthImage(params.hasFullwidthImage as boolean);
-    }
-    if (params?.background) {
-      setBackground(params.background as HeroBackground);
-    }
-    if (params?.button) {
-      setButton(JSON.parse(params.button as string));
-    }
-    if (params?.description) {
-      setDescription(params.description as string);
-    }
-    if (params?.hasGradientOverlay) {
-      setGradientOverlay(params.hasGradientOverlay as boolean);
-    }
-    if (params?.price) {
-      setPrice(params.price as HeroPrice);
-    }
-    if (params?.textSize) {
-      setTextSize(params.textSize as HeroTextSize);
-    }
-    if (params?.title) {
-      setTitle(params.title as string);
-    }
-    if (sticker.color) {
-      setStickerColor(sticker.color as StickerColor);
-    }
-    if (sticker.children) {
-      setStickerText(sticker.children as string);
-    }
-    if (params?.image) {
-      setImage(JSON.parse(params.image as string));
-    }
-    if (params?.disableEditor) {
-      setIsEditable(!params.disableEditor);
-    }
-  }, []);
-
-  const setImageBreakpointSrc = (
-    url: File,
-    breakpoint: string,
-    dpi?: string,
-  ) => {
-    const [x1, x2] = image[breakpoint].split(", ");
-    const imgSrc = URL.createObjectURL(url);
-    const newSrcSet =
-      (breakpoint === "default" && imgSrc) ||
-      (dpi === "1x" && `${imgSrc}, ${x2}`) ||
-      (dpi === "2x" && `${x1}, ${imgSrc} 2x`) ||
-      imgSrc; // fallback
-
-    setImage({
-      ...image,
-      [breakpoint]: newSrcSet as string,
-    });
-  };
-
-  const renderControl = (
-    id: string,
-    value: any,
-    setValue: (value: any) => void,
-    isArea?: boolean,
-  ) => {
-    const ControlComponent = (props: any) => {
-      const Tag = isArea ? TextArea : TextInput;
-      return (
-        <Tag
-          id={id}
-          onChange={(e) => setValue(e.target.value)}
-          defaultValue={value ?? ""}
-          {...props}
-        />
-      );
-    };
-    ControlComponent.displayName = `RenderControl(${id})`;
-    return ControlComponent;
-  };
-
-  return (
-    <>
-      <Hero
-        button={
-          button
-            ? typeof button === "string"
-              ? { children: button }
-              : button
-            : undefined
-        }
-        description={description}
-        hasGradientOverlay={hasGradientOverlay}
-        hasFullwidthImage={hasFullwidthImage}
-        price={price || undefined}
-        textSize={textSize}
-        title={title}
-        sticker={
-          stickerText
-            ? {
-                color: stickerColor,
-                children: stickerText,
-              }
-            : undefined
-        }
-        image={image}
-      />
-
-      {isEditable && (
-        <>
-          <hr />
-          <Container>
-            <h2>Settings:</h2>
-            <Grid>
-              <GridCol size={{ md: 6, lg: 4 }}>
-                <Fieldset legend="Background">
-                  {["white", "gray", "black"].map((bg) => (
-                    <Field
-                      key={bg}
-                      label={bg}
-                      control={{
-                        type: "radio",
-                        id: `bg-${bg}`,
-                        name: "background",
-                        isChecked: background === bg,
-                        onClick: () => setBackground(bg as HeroBackground),
-                        key: bg,
-                      }}
-                    />
-                  ))}
-                </Fieldset>
-                <Field
-                  label="Has gradient overlay"
-                  control={{
-                    type: "checkbox",
-                    id: "gradient-overlay",
-                    isChecked: hasGradientOverlay,
-                    onClick: (e: React.ChangeEvent<HTMLInputElement>) =>
-                      setGradientOverlay(e.target.checked),
-                  }}
-                />
-                <Field
-                  label="Has fullwidth image"
-                  control={{
-                    type: "checkbox",
-                    id: "fullwidth-image",
-                    isChecked: hasFullwidthImage,
-                    onClick: (e: React.ChangeEvent<HTMLInputElement>) =>
-                      setHasFullwidthImage(e.target.checked),
-                  }}
-                />
-              </GridCol>
-              <GridCol size={{ md: 6, lg: 4 }}>
-                <Fieldset legend="Text size">
-                  {["medium", "large"].map((size) => (
-                    <Field
-                      key={size}
-                      label={size}
-                      control={{
-                        type: "radio",
-                        id: `textSize-${size}`,
-                        name: "textSize",
-                        isChecked: textSize === size,
-                        onClick: () => setTextSize(size as HeroTextSize),
-                        key: size,
-                      }}
-                    />
-                  ))}
-                </Fieldset>
-
-                <Field
-                  label="Title"
-                  control={{
-                    renderControl: renderControl("title", title, setTitle),
-                    id: "title",
-                  }}
-                />
-
-                <Field
-                  label="Description"
-                  control={{
-                    renderControl: renderControl(
-                      "description",
-                      description,
-                      setDescription,
-                      true,
-                    ),
-                    id: "description",
-                  }}
-                />
-
-                <Field
-                  label="Price"
-                  control={{
-                    renderControl: renderControl("price", price, setPrice),
-                    id: "price",
-                  }}
-                />
-                <Field
-                  label="Button"
-                  control={{
-                    renderControl: renderControl("button", button, setButton),
-                    id: "button",
-                  }}
-                />
-              </GridCol>
-              <GridCol size={{ md: 6, lg: 4 }}>
-                <Fieldset legend="Sticker color">
-                  {["orange", "white", "black"].map((color) => (
-                    <Field
-                      key={color}
-                      label={color}
-                      control={{
-                        type: "radio",
-                        id: `stickerColor-${color}`,
-                        name: "stickerColor",
-                        isChecked: stickerColor === color,
-                        onClick: () => setStickerColor(color as StickerColor),
-                        key: color,
-                      }}
-                    />
-                  ))}
-                </Fieldset>
-
-                <Field
-                  label="Sticker text"
-                  control={{
-                    renderControl: renderControl(
-                      "stickerText",
-                      stickerText,
-                      setStickerText,
-                    ),
-                    id: "sticker-text",
-                  }}
-                />
-              </GridCol>
-              <GridCol size={{ md: 6, lg: 4 }}>
-                <Fieldset legend="Images">
-                  <p>
-                    <span>See </span>
-                    <a target="_blank" href="/styleguide/components/hero#image">
-                      required image sizes
-                    </a>
-                  </p>
-                  <ul className="list-unstyled">
-                    <li className="mb-2">
-                      <span className="font-weight-bold">Default</span>
-                      <Field
-                        control={{
-                          type: "file",
-                          id: `image-default`,
-                          onChange: (
-                            e: React.ChangeEvent<HTMLInputElement>,
-                          ) => {
-                            setImageBreakpointSrc(
-                              e.target.files![0],
-                              "default",
-                            );
-                          },
-                        }}
-                      />
-                    </li>
-                    {["xxl", "xl", "lg", "sm"].map((breakpoint) =>
-                      ["1x", "2x"].map((dpi) => (
-                        <li key={`${breakpoint}${dpi}`} className="mb-2">
-                          <span className="font-weight-bold">
-                            {breakpoint + (dpi === "2x" ? "@2x" : "")}
-                          </span>
-                          <Field
-                            control={{
-                              type: "file",
-                              id: `image-${breakpoint}-${dpi}`,
-                              onChange: (
-                                e: React.ChangeEvent<HTMLInputElement>,
-                              ) => {
-                                setImageBreakpointSrc(
-                                  e.target.files![0],
-                                  breakpoint,
-                                  dpi,
-                                );
-                              },
-                            }}
-                          />
-                        </li>
-                      )),
-                    )}
-                  </ul>
-                </Fieldset>
-              </GridCol>
-            </Grid>
-          </Container>
-        </>
-      )}
-    </>
-  );
-};