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

package/src/components/Buttons/Buttons.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { bool } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** On XS viewport, forces buttons to stack vertically and span the available width. */
-  isStackedOnXs: bool,
-};
-
-const CLASS_ROOT = 'buttons';
-
-const Buttons = ({ isStackedOnXs, children, className, ...other }) => (
-  <div
-    className={cx(
-      CLASS_ROOT,
-      {
-        [`${CLASS_ROOT}--stack-on-xs`]: isStackedOnXs,
-      },
-      className
-    )}
-    {...other}
-  >
-    {children}
-  </div>
-);
-
-Buttons.displayName = 'Buttons';
-Buttons.propTypes = propTypes;
-
-export default Buttons;

package/src/components/Buttons/Buttons.mdx

@@ -1,39 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import { Buttons, Button } from '../';
-
-# Buttons
-
-Help arrange multiple buttons
-
-## Usage
-
-<Preview>
-  <Buttons>
-    <Button>There are example buttons</Button>
-    <Button>They can break into multiple lines</Button>
-    <button className="link">And look fabulous doing it</button>
-  </Buttons>
-</Preview>
-
-## Stack on XS
-
-Buttons can be forced to stack and span the available width only on XS viewport when used on crossroads pages with two available actions. For example:
-
-- Login prompt: "Login" and "Continue as new customer"
-- Upsell/crossel prompt: "Show offer" and "Skip"
-
-Button stacks must not be used in wizards to stack continue/back buttons.
-Button stacks must not be used with only one button. The maximum recommended number of stacked buttons is two.
-
-<Preview>
-  <Buttons isStackedOnXs>
-    <Button type="primary">Log in</Button>
-    <Button>Continue as new customer</Button>
-  </Buttons>
-</Preview>
-
-Button width is always determined by it's content and Button stack scenario is the only exception. If you need vertical navigation, use the [List component](/components/list).
-
-<ComponentDocs title="<Buttons />" component={Buttons} />

package/src/components/Buttons/index.js

@@ -1,5 +0,0 @@
-import Buttons from './Buttons';
-
-import './styles/style.scss';
-
-export default Buttons;

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

@@ -1,3 +0,0 @@
-@use '../../../styles/tokens/space';
-
-$spacing: space.get('small');

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

@@ -1,33 +0,0 @@
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tokens/space';
-@use './config';
-
-@mixin layout($spacing: config.$spacing, $button-selector: '.btn') {
-  display: flex;
-  flex-flow: row wrap;
-  max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get() 0;
-
-  #{$button-selector},
-  #{$button-selector}:last-child,
-  button.link,
-  button.link:last-child {
-    margin: $spacing $spacing 0 0;
-  }
-}
-
-@mixin stack-on-xs($spacing: config.$spacing, $button-selector: '.btn') {
-  @include breakpoint.get('xs', 'down') {
-    flex-flow: column;
-    max-width: 100%;
-    margin: 0 0 $spacing 0;
-
-    #{$button-selector}:not(:last-child),
-    #{$button-selector}:last-child,
-    button.link:not(:last-child),
-    button.link:last-child {
-      margin-right: 0;
-      margin-bottom: 0;
-    }
-  }
-}

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

@@ -1,10 +0,0 @@
-@use './config';
-@use './mixins';
-
-.buttons {
-  @include mixins.layout;
-
-  &--stack-on-xs {
-    @include mixins.stack-on-xs;
-  }
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Button from '../../Button';
-import Buttons from '../';
-
-const example = (
-  <Buttons>
-    <Button>Button 1</Button>
-    <Button>Button 2</Button>
-  </Buttons>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate();
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Buttons from '../Buttons';
-
-describe('rendering Buttons', () => {
-  describe('initial state', () => {
-    it('has default class buttons', () => {
-      const { getByTestId } = render(<Buttons data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('buttons');
-    });
-  });
-
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<Buttons>test</Buttons>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('has class buttons--stack-on-xs when isStackedOnXs is passed', () => {
-      const { getByTestId } = render(
-        <Buttons data-testid="test-id" isStackedOnXs />
-      );
-      expect(getByTestId('test-id')).toHaveClass('buttons');
-      expect(getByTestId('test-id')).toHaveClass('buttons--stack-on-xs');
-    });
-  });
-});

package/src/components/Card/Card.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { bool, oneOf } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** Custom background color */
-  color: oneOf(['white', 'black', 'orange']),
-  /** Add border */
-  hasBorder: bool,
-  hasShadow: bool,
-};
-
-const defaultProps = {
-  color: 'white',
-};
-
-const CLASS_ROOT = 'card';
-
-const Card = ({ className, color, hasBorder, hasShadow, ...other }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`bg-${color}`]: color !== defaultProps.color,
-      [`${CLASS_ROOT}--bordered`]: hasBorder,
-      [`${CLASS_ROOT}--shadow`]: hasShadow,
-    },
-    className
-  );
-
-  return <div className={classes} {...other} />;
-};
-
-Card.displayName = 'Card';
-Card.propTypes = propTypes;
-Card.defaultProps = defaultProps;
-
-export default Card;

package/src/components/Card/Card.mdx

@@ -1,334 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-
-import Card, { CardHeader, CardSection } from './';
-import { headerColors } from '../Card/CardHeader';
-import Divider from '../Divider';
-import Button from '../Button';
-import Image from '../Image';
-import Grid, { GridCol } from '../Grid';
-
-export const GrayPreview = props => <Preview bgTheme="gray" {...props} />;
-
-export const DefaultSection = ({
-  title = 'Section',
-  content = 'Content',
-  ...props
-}) => (
-  <CardSection {...props}>
-    <h3>{title}</h3>
-    <p>{content}</p>
-  </CardSection>
-);
-
-# Card
-
-A card serves as an entry point to more detailed information. Cards may contain
-rich content, such as photos, text, link, list, tables, you name it.
-
-## Example
-
-Card (without border) should be used **on non-white background** to stand out.
-
-<GrayPreview>
-  <Card>
-    <CardSection>
-      <h2>Card with one section</h2>
-      <p>Content can be whatever you choose it to be</p>
-    </CardSection>
-  </Card>
-</GrayPreview>
-
-## Bordered and shadowed
-
-If you need to use white card **on white background** you can eighter use card border or shadow.
-
-<Preview>
-  <Grid>
-    <GridCol size={{ md: 6 }}>
-      <Card hasBorder>
-        <CardSection>
-          <h2>Card with border</h2>
-          <p>Use bordered card on white background</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card hasShadow>
-        <CardSection>
-          <h2>Card with shadow</h2>
-          <p>Use card with shadow on white background</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Background colors
-
-Colors can be changed on:
-
-- `.card__section` (preferred) level
-  - if you need just specific section to have a custom color
-- `.card` level
-  - if you need to change color of all sections, with no custom sections
-
-Default `.card` color is white.
-
-Every `.card__section` inherits from `.card`.
-
-To change default color use `.bg-[color]` class from
-[background color utilities](/utilities/color#background-color).
-
-<GrayPreview>
-  <Grid>
-    <GridCol size={{ md: 'auto' }}>
-      <h2 className="h4">Black section</h2>
-      <Card>
-        <DefaultSection
-          color="black"
-          content="Just this section changed color"
-        />
-        {[1, 2].map(i => (
-          <DefaultSection
-            key={i.toString()}
-            content="Color inherited from card"
-          />
-        ))}
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 'auto' }}>
-      <h2 className="h4">Black card</h2>
-      <Card color="black">
-        {[1, 2, 3].map(i => (
-          <DefaultSection
-            key={i.toString()}
-            content="Color inherited from card"
-          />
-        ))}
-      </Card>
-    </GridCol>
-  </Grid>
-</GrayPreview>
-
-## Height
-
-In `flex` environment, card sections can fill out remaining space with
-`.card__section--fill` class.
-
-<GrayPreview>
-  <Grid justifyHeight>
-    <GridCol size={{ md: 4 }}>
-      <Card>
-        <CardSection isFilling>
-          <h2>Filling good</h2>
-          <p>Adjusting by filling the space</p>
-        </CardSection>
-        <Divider />
-        <CardSection isFilling>
-          <h2>Filling good</h2>
-          <p>Adjusting by filling the space</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 4 }}>
-      <Card>
-        <CardSection isFilling>
-          <h2>I fill for you</h2>
-        </CardSection>
-        <Divider />
-        <CardSection>
-          <h2>I don't fill good</h2>
-          <p>Someone turned my fillings off</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 4 }}>
-      <Card>
-        <CardSection isFilling>
-          <h2>Tall helper card</h2>
-          <p>
-            This card is here just to stretch the vertical space and force the
-            other cards to fill their remaining space.
-          </p>
-          <p>
-            Ipsum consequat esse eu ullamco deserunt veniam exercitation
-            officia. In eu voluptate Lorem ut nisi veniam nulla Lorem ipsum.
-            Enim excepteur adipisicing esse id est. Deserunt adipisicing
-            excepteur sunt occaecat consectetur dolor deserunt excepteur ut enim
-            ullamco Lorem. Enim aliquip laboris sint consequat culpa tempor
-            exercitation. Laborum labore amet do ullamco excepteur anim tempor
-            pariatur pariatur.
-          </p>
-        </CardSection>
-      </Card>
-    </GridCol>
-  </Grid>
-</GrayPreview>
-
-## Header
-
-Header is used to display extra info for the card.
-
-<p>
-  You can choose a black, orange, or gray-400 color for background, default is{' '}
-  {headerColors[0]}.
-</p>
-
-If you need empty header use non breaking space instead of empty string (`\xa0` or `&nbsp;`), but this in not required and you can have thinner header if you keep it empty.
-
-By default, longer texts in the header are truncated. If you want the header text to be wrapped, use the `.card__header--wrap` class.
-
-<GrayPreview>
-  <Card className="bold">
-    <div className="card__header"></div>
-    <DefaultSection />
-  </Card>
-  {headerColors.map(color => (
-    <Card key={color} className="bold">
-      <CardHeader
-        title={color === 'black' ? '' : 'Header title'}
-        color={color}
-      />
-      <DefaultSection />
-    </Card>
-  ))}
-  <Card className="bold">
-    <div className="card__header card__header--wrap">
-      Indonesia (+ Sumatra, Java, Borneo, Bali, Sulawesi) (+62)
-    </div>
-    <DefaultSection />
-  </Card>
-</GrayPreview>
-
-## Divider
-
-If you need to divide the card with a visible element, use the [Divider](/components/divider) component
-in between sections. You can use option with icon or without icon.
-
-<GrayPreview>
-  <Card {...props}>
-    <CardSection>
-      <h2>Dividers</h2>
-    </CardSection>
-    <Divider />
-    <DefaultSection />
-    <Divider icon="add" />
-    <DefaultSection />
-  </Card>
-</GrayPreview>
-
-## Image
-
-You can use images in cards. You can use it inside sections or outside to fill
-the width of the card.
-
-export const PlaceholderImage = ({ title, ...props }) => (
-  <Image
-    src={`https://placehold.co/600x330/000000/FFFFFF?text=${title}`}
-    alt=""
-    {...props}
-  />
-);
-
-<GrayPreview>
-  <Grid>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <CardSection>
-          <PlaceholderImage title="Image inside of a section" />
-          <h3>Section</h3>
-          <p>Content</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <CardSection>
-          <h3>Section</h3>
-          <p>Content</p>
-          <PlaceholderImage title="Image inside of a section" />
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <PlaceholderImage
-          className="mb-none"
-          title="Image outside of a section"
-        />
-        <DefaultSection />
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <DefaultSection />
-        <PlaceholderImage
-          className="mb-none"
-          title="Image outside of a section"
-        />
-      </Card>
-    </GridCol>
-  </Grid>
-</GrayPreview>
-
-## Real-world example
-
-export const products = [
-  {
-    title: 'Internet',
-    description:
-      'Od najrýchlejšej optiky po bezdrôtové 4G, nájdeme vám najlepšie pripojenie, aké môžete mať.',
-    badge: 'Najpredávanejší',
-    price: 10,
-  },
-  {
-    title: 'Televízia',
-    description:
-      'Správy, šport, večerná zábava, detské alebo dokumentárne kanálov... Máme pre vás všetko. Archív, nahrávanie a špičkový obraz sú s Orange TV samozrejmosťou.',
-    price: 10,
-  },
-];
-
-<GrayPreview>
-  <Grid justifyHeight>
-    {products.map((product, index, array) => (
-      <GridCol key={product.title} size={{ md: Math.round(12 / array.length) }}>
-        <Card>
-          <CardHeader title={product.badge} />
-          <CardSection isFilling>
-            <h2>{product.title}</h2>
-            <p className="bold large">{product.description}</p>
-          </CardSection>
-          <CardSection>
-            <div className="bold mb-small">
-              <div className="h1 mb-small color-orange">
-                od {product.price} €/mes.
-              </div>
-              <div className="small">Viazanosť 24 mesiacov</div>
-              <div>+ 19,90 € poplatok za inštaláciu</div>
-            </div>
-            <a href="#" className="btn btn--primary">
-              Vybrať
-            </a>
-          </CardSection>
-        </Card>
-      </GridCol>
-    ))}
-  </Grid>
-</GrayPreview>
-
-## Props
-
-<ComponentDocs title="<Card />" component={Card} />
-
-<ComponentDocs title="<CardSection />" component={CardSection} />
-
-<ComponentDocs title="<CardHeader />" component={CardHeader} />
-
-## Accessibility
-
-The `<Card />` component is purely presentational and does not carry any
-semantic meaning. The only thing you should care about is the usage of correct
-heading level in `<CardSection />`

package/src/components/Card/CardHeader.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { string, oneOf } from 'prop-types';
-
-export const headerColors = ['black', 'orange', 'light-gray'];
-
-const propTypes = {
-  /** Custom background color */
-  color: oneOf(headerColors),
-  /** Title text */
-  title: string,
-};
-
-const defaultProps = {
-  color: 'black',
-  title: `\xa0`,
-};
-
-const CLASS_ROOT = 'card__header';
-
-const CardSection = ({ className, title, color, ...other }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`bg-orange`]: color === 'orange',
-      [`card__header--gray`]: color === 'light-gray',
-    },
-    className
-  );
-
-  /* SAME HEIGHT
-    use non breaking space for keeping the height 
-    no metter what we padd (null, undefined, '')
-    it's not in `defaultProps` cause people could still pass '' (empty string)
-    which would break the height
-  */
-  const t = !!title ? title : defaultProps.title;
-
-  return (
-    <div className={classes} {...other}>
-      {t}
-    </div>
-  );
-};
-
-CardSection.displayName = 'CardSection';
-CardSection.propTypes = propTypes;
-CardSection.defaultProps = defaultProps;
-
-export default CardSection;

package/src/components/Card/CardSection.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { oneOf, bool } from 'prop-types';
-
-const propTypes = {
-  /** Custom background color */
-  color: oneOf(['white', 'black', 'orange']),
-  /** Fill available space using flexbox */
-  isFilling: bool,
-};
-
-const CLASS_ROOT = 'card__section';
-
-const CardSection = ({ className, color, isFilling, ...other }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`bg-${color}`]: color,
-      [`${CLASS_ROOT}--fill`]: isFilling,
-    },
-    className
-  );
-
-  return <div className={classes} {...other} />;
-};
-
-CardSection.displayName = 'CardSection';
-CardSection.propTypes = propTypes;
-
-export default CardSection;

package/src/components/Card/index.js

@@ -1,7 +0,0 @@
-import Card from './Card';
-
-import './styles/style.scss';
-
-export default Card;
-export { default as CardSection } from './CardSection';
-export { default as CardHeader } from './CardHeader';

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

@@ -1,31 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-
-$card-base: (
-  background-color: color.$white,
-  margin-bottom: space.get(),
-);
-
-$card-section: (
-  padding: space.get(),
-);
-
-$card-border: 2px solid color.$black;
-
-$header-base: (
-  padding: space.get(),
-  padding-top: space.get('small'),
-  padding-bottom: space.get('small'),
-  background-color: color.$black,
-  color: color.$white,
-  font-weight: bold,
-);
-
-$card-shadow: (
-  box-shadow: 3px 6px 11px rgba(0,0,0,0.25),
-);
-
-$header-gray: (
-  background-color: color.$gray-400,
-  color: color.$black,
-)