@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

package/src/components/Hero/HeroPlayground.js

@@ -1,297 +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 from './';
-
-const config = {
-  hasFullwidthImage: false,
-  background: 'black',
-  button: null,
-  description: 'Description text',
-  hasGradientOverlay: false,
-  price: null,
-  textSize: 'medium',
-  title: 'Title',
-  stickerColor: 'orange',
-  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',
-  },
-};
-
-export default () => {
-  const [hasFullwidthImage, setHasFullwidthImage] = useState(
-    config.hasFullwidthImage
-  );
-  const [background, setBackground] = useState(config.background);
-  const [button, setButton] = useState(config.button);
-  const [description, setDescription] = useState(config.description);
-  const [hasGradientOverlay, setGradientOverlay] = useState(
-    config.hasGradientOverlay
-  );
-  const [price, setPrice] = useState(config.price);
-  const [textSize, setTextSize] = useState(config.textSize);
-  const [title, setTitle] = useState(config.title);
-  const [stickerColor, setStickerColor] = useState(config.stickerColor);
-  const [stickerText, setStickerText] = useState(config.stickerText);
-  const [image, setImage] = useState(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) : {};
-    params?.hasFullwidthImage && setHasFullwidthImage(params.hasFullwidthImage);
-    params?.background && setBackground(params.background);
-    params?.button && setButton(JSON.parse(params.button));
-    params?.description && setDescription(params.description);
-    params?.hasGradientOverlay && setGradientOverlay(params.hasGradientOverlay);
-    params?.price && setPrice(params.price);
-    params?.textSize && setTextSize(params.textSize);
-    params?.title && setTitle(params.title);
-    sticker.color && setStickerColor(sticker.color);
-    sticker.children && setStickerText(sticker.children);
-    params?.image && setImage(JSON.parse(params.image));
-    params?.disableEditor && setIsEditable(!params.disableEditor);
-  }, []);
-
-  const setImageBreakpointSrc = (url, breakpoint, dpi) => {
-    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`);
-
-    setImage({
-      ...image,
-      ...{ [breakpoint]: newSrcSet },
-    });
-  };
-
-  const renderControl = (id, value, setValue, isArea) => () => {
-    const Tag = isArea ? TextArea : TextInput;
-    return (
-      <Tag
-        id={id}
-        onChange={e => setValue(e.target.value)}
-        defaultValue={value ?? ''}
-      />
-    );
-  };
-
-  return (
-    <>
-      <Hero
-        background={background}
-        button={
-          button
-            ? typeof button === 'string'
-              ? { children: button }
-              : button
-            : undefined
-        }
-        description={description}
-        hasGradientOverlay={hasGradientOverlay}
-        hasFullwidthImage={hasFullwidthImage}
-        price={price}
-        textSize={textSize}
-        title={title}
-        sticker={
-          stickerText && {
-            color: stickerColor,
-            children: stickerText,
-          }
-        }
-        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),
-                        key: bg,
-                      }}
-                    />
-                  ))}
-                </Fieldset>
-                <Field
-                  label="Has gradient overlay"
-                  control={{
-                    type: 'checkbox',
-                    id: 'gradient-overlay',
-                    isChecked: hasGradientOverlay,
-                    onClick: e => setGradientOverlay(e.target.checked),
-                  }}
-                />
-                <Field
-                  label="Has fullwidth image"
-                  control={{
-                    type: 'checkbox',
-                    id: 'fullwidth-image',
-                    isChecked: hasFullwidthImage,
-                    onClick: e => 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),
-                        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),
-                        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 => {
-                            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 => {
-                                setImageBreakpointSrc(
-                                  e.target.files[0],
-                                  breakpoint,
-                                  dpi
-                                );
-                              },
-                            }}
-                          />
-                        </li>
-                      ))
-                    )}
-                  </ul>
-                </Fieldset>
-              </GridCol>
-            </Grid>
-          </Container>
-        </>
-      )}
-    </>
-  );
-};

package/src/components/Hero/IframePreview.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import queryString from 'query-string';
-
-import Preview from './../../styleguide/Preview';
-import Hero from './Hero';
-
-function stringifyExample(config) {
-  return Object.keys(config).reduce(
-    (acc, curr) => ({
-      ...acc,
-      [curr]:
-        typeof config[curr] === 'object'
-          ? JSON.stringify(config[curr])
-          : config[curr],
-    }),
-    {}
-  );
-}
-
-const IframePreview = props => (
-  <Preview code={<Hero {...props} />}>
-    <iframe
-      title={props.title}
-      src={queryString.stringifyUrl({
-        url: '/pages/hero-playground.html',
-        query: {
-          ...stringifyExample(props),
-          disableEditor: true,
-        },
-      })}
-      style={{
-        width: '100%',
-        height: '650px',
-        borderWidth: 0,
-      }}
-    />
-  </Preview>
-);
-
-export default IframePreview;

package/src/components/Hero/index.js

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

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

@@ -1,13 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-
-$colors: (
-  'default': color.$white,
-  'gray': color.$gray-300,
-  'black': color.$black,
-);
-
-$spacing: (
-  default: space.get('large'),
-  xl: space.get('xlarge'),
-);

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

@@ -1,185 +0,0 @@
-@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%;
-
-  > * {
-    @include breakpoint.get('md', 'only') {
-      max-width: convert.to-rem(764px);
-    }
-  }
-}
-
-@mixin color($color, $config: config.$colors) {
-  background-color: map.get($config, $color);
-
-  @if ($color == 'black') {
-    color: color.$white;
-  }
-}
-
-@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 {
-  margin-bottom: space.get();
-
-  @include breakpoint.get('lg') {
-    margin-bottom: space.get('large');
-  }
-}
-
-@mixin price {
-  color: color.get('orange');
-  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;
-  @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-color($color, $config: config.$colors) {
-  $color-value: map.get($config, $color);
-
-  @include breakpoint.get('lg') {
-    &::after {
-      color: $color-value;
-      background-image: linear-gradient(90deg, rgba($color-value, 1) 0%, rgba($color-value, 1) 35%, rgba($color-value, 0) 50%, rgba($color-value, 0) 100%);
-    }
-  }
-}
-
-@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

@@ -1,65 +0,0 @@
-@use '../../../styles/tools/generate';
-@use './mixins';
-@use './config';
-
-.hero {
-  $this: &;
-  @include mixins.base;
-
-  // can be removed after it stops being used on live website
-  @each $variant, $props in config.$colors {
-    &#{generate.variant-name($variant)} {
-      @include mixins.color($variant);
-    }
-  }
-
-  &__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;
-      
-      // can be removed after it stops being used on live website
-      @each $color, $props in config.$colors {
-        #{$this}#{generate.variant-name($color)} & {
-          @include mixins.gradient-overlay-color($color);
-        }
-      }
-      //stylelint-disable max-nesting-depth
-      @include mixins.gradient-overlay-color('default');
-      .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

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