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

package/src/components/Hero/HeroPlayground.tsx

@@ -0,0 +1,369 @@
+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>
+        </>
+      )}
+    </>
+  );
+};

package/src/components/Hero/index.ts

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

package/src/components/Hero/styles/config.scss

@@ -0,0 +1,23 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+
+
+$sticker-colors: (
+  default: (
+    background-color: var(--color-surface-secondary),
+    color: var(--color-text-default),
+  ),
+  orange: (
+    background-color: var(--color-surface-secondary),
+    color: var(--color-text-inverse),
+  ),
+  black: (
+    background-color: var(--color-surface-contrast),
+    color: var(--color-text-default),
+  ),
+);
+
+$spacing: (
+  default: space.get("large"),
+  xl: space.get("xlarge"),
+);

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

@@ -0,0 +1,173 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "./config";
+
+// image margin needs to be the exact width of content and scticker columns to fit ritght under
+@function calculate-image-margin($content-column-width, $sticker-column-width) {
+  @return (
+      round-to-sass-precision(math.div(100, 12) * $content-column-width) +
+        round-to-sass-precision(math.div(100, 12) * $sticker-column-width)
+    ) *
+    -1%;
+}
+
+// sass rounds numbers only after doing math, which caused problem with rounding column widths resulting in 0.00001% causing major layout issues.
+@function round-to-sass-precision($number) {
+  @return math.div(math.round($number * 100000), 100000);
+}
+
+@mixin base {
+  overflow: hidden;
+  max-width: 100%;
+  background-color: var(--color-background-primary);
+  color: var(--color-text-default);
+
+  > * {
+    @include breakpoint.get("md", "only") {
+      max-width: convert.to-rem(764px);
+    }
+  }
+}
+
+@mixin content($config: config.$spacing) {
+  > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  @include breakpoint.get("lg") {
+    position: relative;
+    z-index: 1;
+  }
+
+  @each $breakpoint, $space in $config {
+    @include breakpoint.get($breakpoint) {
+      padding-top: $space;
+      padding-bottom: $space;
+    }
+  }
+}
+
+@mixin description {
+  line-height: convert.to-rem(22px) !important;
+  margin-bottom: space.get();
+
+  @include breakpoint.get("lg") {
+    margin-bottom: space.get("large");
+  }
+}
+
+@mixin price {
+  // color: var(--color-surface-secondary);
+  margin-bottom: space.get("small");
+}
+
+@mixin sticker {
+  margin: 0 auto;
+}
+
+@mixin image-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-basis: 100%;
+  max-width: 100%;
+
+  @include breakpoint.get("lg") {
+    position: relative;
+    justify-content: flex-end;
+    z-index: 0;
+    margin-left: calculate-image-margin(5, 2);
+  }
+
+  // Try to fix image pixelated rendering on Safari iOS
+  img,
+  picture {
+    image-rendering: crisp-edges;
+  }
+}
+
+@mixin gradient-overlay {
+  position: relative;
+  display: inline-block;
+  color: var(--color-background-primary);
+  @include breakpoint.get("lg") {
+    &::after {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      box-shadow: inset -20px 0 15px -8px;
+    }
+  }
+}
+
+@mixin gradient-overlay-halfwidth {
+  @include breakpoint.get("lg") {
+    &::after {
+      box-shadow:
+        inset 20px 0 15px -8px,
+        inset -20px 0 15px -8px;
+      background-image: none !important;
+    }
+  }
+}
+
+@mixin image {
+  height: auto;
+  max-width: 100%;
+  margin-bottom: 0 !important;
+
+  @include breakpoint.get("lg") {
+    margin-left: space.get("small");
+    margin-right: space.get("small");
+  }
+}
+
+@mixin image-fullwidth {
+  @include breakpoint.get("lg") {
+    margin-left: convert.to-rem(-32px);
+    margin-right: convert.to-rem(-32px);
+    max-width: calc(100% + #{convert.to-rem(64px)});
+  }
+  @include breakpoint.get("xl") {
+    margin-left: convert.to-rem(-40px);
+    margin-right: convert.to-rem(-40px);
+    max-width: calc(100% + #{convert.to-rem(80px)});
+  }
+}
+
+@mixin image-single {
+  display: flex;
+  width: 100%;
+  padding-left: space.get("small");
+  padding-right: space.get("small");
+  justify-content: center;
+  align-items: flex-end;
+  height: auto;
+  max-height: 540px;
+
+  @include breakpoint.get("lg") {
+    aspect-ratio: auto;
+    width: 470px;
+    height: 540px;
+  }
+
+  @include breakpoint.get("xl") {
+    width: 590px;
+    height: 530px;
+  }
+
+  @include breakpoint.get("xxl") {
+    width: 650px;
+    height: 540px;
+  }
+}

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

@@ -0,0 +1,59 @@
+@use "../../../styles/tools/generate";
+@use "./mixins";
+@use "./config";
+
+@layer components {
+  .hero {
+    @include mixins.base;
+    &.is-gray {
+      --color-background-primary: var(--color-surface-subtle);
+      .sticker--orange {
+        --color-text-default: #ffffff !important;
+      }
+    }
+
+    &__content {
+      @include mixins.content;
+    }
+
+    &__description {
+      @include mixins.description;
+    }
+
+    &__sticker {
+      @include mixins.sticker;
+    }
+
+    &__image-wrapper {
+      @include mixins.image-wrapper;
+    }
+
+    &__image {
+      @include mixins.image;
+
+      &--single {
+        @include mixins.image-single;
+      }
+
+      &--fullwidth {
+        @include mixins.image-fullwidth;
+      }
+
+      &--gradient {
+        @include mixins.gradient-overlay;
+
+        //stylelint-disable max-nesting-depth
+        // @include mixins.gradient-overlay-color();
+        .bg-black & {
+          // @include mixins.gradient-overlay-color("black");
+        }
+        .bg-gray & {
+          // @include mixins.gradient-overlay-color("gray");
+        }
+        &-halfwidth {
+          @include mixins.gradient-overlay-halfwidth;
+        }
+      }
+    }
+  }
+}

package/src/components/Hero/tests/Hero.conformance.test.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Hero } from "../";
+
+import { fullwidthImages } from "./data";
+
+const example = (
+  <Hero
+    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;&euro;."
+    price={{ prefix: "od ", amount: 10, suffix: "/mes." }}
+    sticker={{ children: "Lorem ipsum sticker" }}
+    image={fullwidthImages}
+    button={{ children: "Chcem zľavu na hernú konzolu" }}
+    hasFullwidthImage
+  />
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});