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

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

@@ -1,271 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Hero from '../Hero';
-
-const image = {
-  default: 'test-img',
-  sm: 'test-img-sm',
-  lg: 'test-img-lg',
-  xl: 'test-img-xl',
-  xxl: 'test-img-xxl',
-};
-
-// title is required
-describe('rendering Hero', () => {
-  describe('initial state', () => {
-    it('has default class hero', () => {
-      const { container } = render(<Hero title="test-title" />);
-      expect(container.getElementsByClassName('hero').length).toBe(1);
-    });
-    it('has default class justify-content-space-between', () => {
-      const { container } = render(<Hero title="test-title" />);
-      expect(
-        container.getElementsByClassName('justify-content-space-between').length
-      ).toBe(1);
-    });
-    it('has default class hero__content', () => {
-      const { container } = render(<Hero title="test-title" />);
-      expect(container.getElementsByClassName('hero__content').length).toBe(1);
-    });
-    it('has default class display-2', () => {
-      const { container } = render(<Hero title="test-title" />);
-      expect(container.getElementsByClassName('display-2').length).toBe(1);
-    });
-  });
-
-  describe('passed title and description props', () => {
-    it('has class hero__description when description is set', () => {
-      const { container } = render(
-        <Hero description="test-description" title="test-title" />
-      );
-      expect(container.getElementsByClassName('hero__description').length).toBe(
-        1
-      );
-    });
-    it('has class h5 when description is set', () => {
-      const { container } = render(
-        <Hero description="test-description" title="test-title" />
-      );
-      expect(container.getElementsByClassName('h5').length).toBe(1);
-    });
-    it('has class display-1 when textSize is set to large', () => {
-      const { container } = render(
-        <Hero textSize="large" title="test-title" />
-      );
-      expect(container.getElementsByClassName('display-1').length).toBe(1);
-    });
-    it('has class h4 when description is set and textSize is set to large', () => {
-      const { container } = render(
-        <Hero
-          description="test-description"
-          textSize="large"
-          title="test-title"
-        />
-      );
-      expect(container.getElementsByClassName('h4').length).toBe(1);
-    });
-    it('renders title', () => {
-      const { getByText } = render(<Hero title="test-title" />);
-      expect(getByText('test-title')).toBeInTheDocument();
-    });
-    it('renders description', () => {
-      const { getByText } = render(
-        <Hero description="test-description" title="test-title" />
-      );
-      expect(getByText('test-description')).toBeInTheDocument();
-    });
-  });
-  describe('passed price prop', () => {
-    it('has classes h2 & hero__price when price is set', () => {
-      const { container } = render(
-        <Hero price="test-price" title="test-title" />
-      );
-      expect(container.getElementsByClassName('h2').length).toBe(1);
-      expect(container.getElementsByClassName('hero__price').length).toBe(1);
-    });
-    it('renders price when price is string', () => {
-      const { getByText } = render(
-        <Hero price="test-price" title="test-title" />
-      );
-      expect(getByText('test-price')).toBeInTheDocument();
-    });
-    it('renders price when price is object', () => {
-      const { getByText } = render(
-        <Hero
-          price={{
-            amount: 10.99,
-            prefix: 'test-prefix',
-            suffix: 'test-suffix',
-          }}
-          title="test-title"
-        />
-      );
-      expect(getByText('test-prefix10,99 €test-suffix')).toBeInTheDocument();
-    });
-  });
-  describe('passed button prop', () => {
-    it('renders button element when button prop is set', () => {
-      const { container } = render(
-        <Hero button={{ children: 'btn-test' }} title="test-title" />
-      );
-      expect(container.getElementsByClassName('btn').length).toBe(1);
-    });
-    it("button's children are rendered", () => {
-      const { getByText } = render(
-        <Hero button={{ children: 'btn-test' }} title="test-title" />
-      );
-      expect(getByText('btn-test')).toBeInTheDocument();
-    });
-    it('button has btn--inverse class when background prop is set to black', () => {
-      const { container } = render(
-        <Hero
-          button={{ children: 'btn-test' }}
-          title="test-title"
-          background="black"
-        />
-      );
-      expect(container.getElementsByClassName('btn--inverse').length).toBe(1);
-    });
-  });
-  describe('passed sticker prop', () => {
-    it('renders sticker element when sticker prop is set', () => {
-      const { container } = render(
-        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
-      );
-      expect(container.getElementsByClassName('sticker').length).toBe(1);
-    });
-    it("sticker's children are rendered", () => {
-      const { getByText } = render(
-        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
-      );
-      expect(getByText('sticker-test')).toBeInTheDocument();
-    });
-    it('sticker has class hero__sticker', () => {
-      const { container } = render(
-        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
-      );
-      expect(container.getElementsByClassName('hero__sticker').length).toBe(1);
-    });
-    it('sticker has additional class when set in sticker prop', () => {
-      const { container } = render(
-        <Hero
-          sticker={{
-            children: 'sticker-test',
-            className: 'sticker-test-class',
-          }}
-          title="test-title"
-        />
-      );
-      expect(container.getElementsByClassName('hero__sticker').length).toBe(1);
-      expect(
-        container.getElementsByClassName('sticker-test-class').length
-      ).toBe(1);
-    });
-    ['black', 'orange'].map(color => {
-      it(`sticker has sticker--${color} class when sticker.color is set to ${color}`, () => {
-        const { container } = render(
-          <Hero
-            sticker={{ children: 'btn-test', color: color }}
-            title="test-title"
-            background="black"
-          />
-        );
-        expect(
-          container.getElementsByClassName(`sticker--${color}`).length
-        ).toBe(1);
-      });
-    });
-  });
-  describe('passed image prop', () => {
-    it('renders image element when image prop is set', () => {
-      const { container } = render(<Hero image={image} title="test-title" />);
-      expect(container.getElementsByClassName('img').length).toBe(1);
-    });
-    it('image has additional class hero__image', () => {
-      const { container } = render(<Hero image={image} title="test-title" />);
-      expect(container.getElementsByClassName('hero__image').length).toBe(1);
-    });
-    it('image has additional class hero__image--single if single size image is used', () => {
-      const { container } = render(
-        <Hero image={{ src: 'text-img-single' }} title="test-title" />
-      );
-      expect(
-        container.getElementsByClassName('hero__image--single').length
-      ).toBe(1);
-    });
-    it('image has additional class hero__image--fullwidth if prop hasFullwidthImage is passed', () => {
-      const { container } = render(
-        <Hero image={image} hasFullwidthImage title="test-title" />
-      );
-      expect(
-        container.getElementsByClassName('hero__image--fullwidth').length
-      ).toBe(1);
-    });
-    it("image's attribute src is set to image.default", () => {
-      const { container } = render(<Hero image={image} title="test-title" />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        'test-img'
-      );
-    });
-    it("image's attribute src is set to image.src if passed as single image", () => {
-      const { container } = render(
-        <Hero image={{ src: 'test-img-single' }} title="test-title" />
-      );
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        'test-img-single'
-      );
-    });
-    ['test-img-xxl', 'test-img-xl', 'test-img-lg', 'test-img-sm'].map(
-      (size, index) => {
-        it(`${
-          index + 1
-        }. source element has attribute srcSet is set to ${size}`, () => {
-          const { container } = render(
-            <Hero image={image} title="test-title" />
-          );
-          expect(
-            container.querySelectorAll('source')[index].getAttribute('srcSet')
-          ).toBe(size);
-        });
-      }
-    );
-    it('image wrapper with class hero__image-wrapper is rendered', () => {
-      const { container } = render(<Hero image={image} title="test-title" />);
-      expect(
-        container.getElementsByClassName('hero__image-wrapper').length
-      ).toBe(1);
-    });
-    it('image has additional class hero__image--gradient when prop hasGradientOverlay is passed', () => {
-      const { container } = render(
-        <Hero hasGradientOverlay image={image} title="test-title" />
-      );
-      expect(
-        container.getElementsByClassName('hero__image--gradient').length
-      ).toBe(1);
-    });
-    it('image has additional class hero__image--gradient-halfwidth when prop hasGradientOverlay is passed', () => {
-      const { container } = render(
-        <Hero hasGradientOverlay image={image} title="test-title" />
-      );
-      expect(
-        container.getElementsByClassName('hero__image--gradient-halfwidth')
-          .length
-      ).toBe(1);
-    });
-    it("image doesn't have class hero__image--gradient-halfwidth when prop hasFullwidthImage is also passed", () => {
-      const { container } = render(
-        <Hero
-          hasGradientOverlay
-          hasFullwidthImage
-          image={image}
-          title="test-title"
-        />
-      );
-      expect(
-        container.getElementsByClassName('hero__image--gradient-halfwidth')
-          .length
-      ).toBe(0);
-    });
-  });
-});

package/src/components/Hero/tests/data.js

@@ -1,40 +0,0 @@
-export const singleImage = {
-  src: 'https://placehold.co/626x540',
-  srcSet: 'https://placehold.co/626x540, https://placehold.co/1252x1080 2x',
-};
-
-export const halfImages = {
-  default: 'https://placehold.co/768x540',
-  sm: 'https://placehold.co/768x540, https://placehold.co/1536x1080 2x',
-  md: 'https://placehold.co/768x510, https://placehold.co/1536x1080 2x',
-  lg: 'https://placehold.co/470x540, https://placehold.co/940x1080 2x',
-  xl: 'https://placehold.co/590x540, https://placehold.co/1180x1080 2x',
-  xxl: 'https://placehold.co/650x540, https://placehold.co/1300x1080 2x',
-};
-
-export const halfImagesDark = {
-  default: 'https://placehold.co/768x540/222/666',
-  sm: 'https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x',
-  md: 'https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x',
-  lg: 'https://placehold.co/470x540/222/666, https://placehold.co/940x1080/222/666 2x',
-  xl: 'https://placehold.co/590x540/222/666, https://placehold.co/1180x1080/222/666 2x',
-  xxl: 'https://placehold.co/650x540/222/666, https://placehold.co/1300x1080/222/666 2x',
-};
-
-export const fullwidthImages = {
-  default: 'https://placehold.co/768x540',
-  sm: 'https://placehold.co/768x540, https://placehold.co/1536x1080 2x',
-  md: 'https://placehold.co/768x510, https://placehold.co/1536x1080 2x',
-  lg: 'https://placehold.co/1024x540, https://placehold.co/2048x1080 2x',
-  xl: 'https://placehold.co/1280x540, https://placehold.co/2520x1080 2x',
-  xxl: 'https://placehold.co/1400x540, https://placehold.co/2800x1080 2x',
-};
-
-export const fullwidthImagesDark = {
-  default: 'https://placehold.co/768x540/222/666',
-  sm: 'https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x',
-  md: 'https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x',
-  lg: 'https://placehold.co/1024x540/222/666, https://placehold.co/2048x1080/222/666 2x',
-  xl: 'https://placehold.co/1280x540/222/666, https://placehold.co/2520x1080/222/666 2x',
-  xxl: 'https://placehold.co/1400x540/222/666, https://placehold.co/2800x1080/222/666 2x',
-};

package/src/components/Icon/Icon.js

@@ -1,59 +0,0 @@
-import React, { useContext } from 'react';
-import { string, oneOf } from 'prop-types';
-import cx from 'classnames';
-
-import { SpritePathContext } from '.';
-
-const propTypes = {
-  alt: string,
-  color: oneOf(['info', 'success', 'warning', 'danger']),
-  name: string.isRequired,
-  size: oneOf(['small', 'medium', 'large', 'xlarge', 'xxlarge', 'huge']),
-  spritePath: string,
-};
-
-const CLASS_ROOT = 'icon';
-
-const Icon = ({
-  className,
-  alt,
-  color,
-  name,
-  size,
-  spritePath = '/sprite.svg',
-  ...other
-}) => {
-  const contextPath = useContext(SpritePathContext);
-
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--${size}`]: size,
-      [`${CLASS_ROOT}--${color}`]: color,
-    },
-    className
-  );
-
-  return (
-    <svg
-      className={classes}
-      aria-hidden={alt !== undefined ? undefined : 'true'}
-      role={alt !== undefined ? 'img' : undefined}
-      title={alt !== undefined && alt.length > 0 ? alt : undefined}
-      {...other}
-    >
-      <use
-        xlinkHref={
-          spritePath !== '/sprite.svg' || typeof contextPath === 'undefined'
-            ? `${spritePath}#${name}`
-            : `${contextPath}#${name}`
-        }
-      />
-    </svg>
-  );
-};
-
-Icon.displayName = 'Icon';
-Icon.propTypes = propTypes;
-
-export default Icon;

package/src/components/Icon/Icon.mdx

@@ -1,172 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Icon from './Icon';
-import Grid, { GridCol } from '../Grid';
-import Bar, { BarItem } from './../Bar';
-import Table from './../Table';
-import SpritePathContext from './SpritePathContext';
-import IconSearch, { IconList } from './IconSearch';
-
-import sizes from './styles/export/size.scss';
-import colors from './styles/export/color.scss';
-import base from '../../styles/export/base.scss';
-
-<!-- Used in code examples to only show icons, not layout -->
-
-export const iconCodeExample = icons =>
-  icons.map(({ name, ...other }) => <Icon key={name} name={name} {...other} />);
-
-<!-- Convert rem size back to pixels -->
-
-export const getPixelSize = size =>
-  size ? parseFloat(size) * parseInt(base['font-size']) + 'px' : '';
-
-<!-- Filter out size names without breakpoints -->
-
-export const sizesWithoutBreakpoints = Object.keys(sizes).filter(
-  name => name.indexOf('-') === -1
-);
-
-<!-- Preview wrapper with simplified code example -->
-
-export const IconVariantPreview = ({ icons, ...other }) => (
-  <Preview
-    code={iconCodeExample(icons)}
-    codeJSXOptions={{ filterProps: ['key'] }}
-    {...other}
-  >
-    <IconList icons={icons} isWide={false} />
-  </Preview>
-);
-
-# Icon
-
-ODS uses SVG icons, which load from a sprite file. [How to add new icons?](#icon-contribution).
-
-<Preview>
-  <Icon name="le-vote" alt="done and done" />
-</Preview>
-
-## Sizes
-
-<Table
-  isCompact
-  headers={[
-    { key: 'name', label: 'Name' },
-    { key: 'size', label: 'Size' },
-    { key: 'sizemd', label: 'Breakpoint MD+' },
-  ]}
-  rows={sizesWithoutBreakpoints.map(size => ({
-    name: size,
-    size: getPixelSize(sizes[size]),
-    sizemd: getPixelSize(sizes[`${size}-md`]),
-  }))}
-/>
-
-<IconVariantPreview
-  icons={sizesWithoutBreakpoints.map(size => ({
-    name: 'money-box',
-    description: size,
-    size: size,
-  }))}
-/>
-
-## Colors
-
-Colors should be only used to provide feedback, e.g. in form validation and alerts
-
-<IconVariantPreview
-  icons={Object.keys(colors).map(color => ({
-    name: 'money-box',
-    size: 'large',
-    description: color,
-    color,
-  }))}
-  id="preview-colors"
-/>
-
-## Sprite path
-
-Default path is `/sprite.svg`. You can define different path either by using spritePath prop or by context SpritePathContext. When both are set, path from spritePath is preffered.
-
-<Preview>
-  <Grid>
-    <GridCol size={3}>
-      <Bar>
-        <BarItem>
-          <Icon name="plus" alt="plus" spritePath="/sprite-sg.svg" />
-        </BarItem>
-        <BarItem>path from SpritePath</BarItem>
-      </Bar>
-    </GridCol>
-    <GridCol size={3}>
-      <Bar>
-        <BarItem>
-          <SpritePathContext.Provider value={'/sprite-sg.svg'}>
-            <Icon name="plus" alt="plus" />
-          </SpritePathContext.Provider>
-        </BarItem>
-        <BarItem>path from context</BarItem>
-      </Bar>
-    </GridCol>
-    <GridCol size={6}>
-      <Bar>
-        <BarItem>
-          <SpritePathContext.Provider value={'/sprite.svg'}>
-            <Icon name="plus" alt="plus" spritePath="/sprite-sg.svg" />
-          </SpritePathContext.Provider>
-        </BarItem>
-        <BarItem>path from SpritePath when context is also set</BarItem>
-      </Bar>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## All icons
-
-You can copy svg by clicking on the icon and paste directly into Figma.
-
-<Preview>
-  <IconSearch />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Icon />" component={Icon} />
-
-## Icon contribution
-
-- **Download** your desired icons from the [Icon Library](https://design.orange.com/libraries/icons-library). You'll get a PSD and a PNG file for each icon. The PSD either contains:
-  - a vector path, which can be directly exported from Photoshop as SVG
-  - a smart object, which you can open in Illustrator and save it as SVG
-  - if you don't have Photoshop, use [Photopea](https://www.photopea.com/) to export the paths to SVG
-- **Rename** the icon file to be lowercase and dash delimited. The library does not employ a naming pattern - there are capitals, dashes, underscores spaces..., but we do! Never change the name of the icon to match the context you're using it in. We need to stay in sync with the file names in the library.
-- **Optimize** the SVGs. Use a tool like [Jake Archibald's SVGOMG](https://jakearchibald.github.io/svgomg/) and use the precision setting to get the smallest file size possible, while still maintaing proper display of the icon.
-- **Drop the files to `src/assets/icons` folder**. They will be built into `build/sprite.svg`.
-- **Open a pull request.** A reviewer will check if all requirements are met. The icons will be included in the next release.
-- **Use them in your project immediately.** You don't need to wait for the next release. When the pull request is closed, you are safe to create your own build with an updated sprite and use it.
-
-### Why such a complicated process?
-
-To make sure we stay in sync with the group icon library, honor a naming pattern and prevent errors.
-
-- We need to stay in sync with the brand icon library, as it is our source of truth. We neeed to check if the icon we want add is not already being used.
-- We need to optimize the icons, so that we can deliver them to the user as fast as possible. The photoshop export is represents the true interpretation of the icon paths. Otimization algorithms can safely remove around 50-80% of the code, just by rounding some numbers, removing unnecesasry attributes and recalculating the shapes. Smaller file size means faster loading time.
-- We need to review newly added icons to eliminate human errrors
-
-### Some of my icons don't work
-
-Just before this process was documented, there was a request for quick addition of several icons. Unfortunatelly, we introduced some duplicates and naming pattern violations. To fix your project, please rename the following icons:
-
-- Collective_class_training -> collective-class-training
-- Love_Logo -> love-logo
-- Social_network -> social-network
-- Team_connect -> team-connect
-- My_Orange -> my-orange
-- Family_Place -> family-place
-- showroom_mobile_pro -> showroom-mobile-pro
-- home-live -> homelive
-- medical-app-phone -> medial-app
-- mobile-data-toggle -> mobile-network-coverage
-- home-new -> home