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

package/src/components/Forms/TextInput/tests/TextInput.unit.test.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-
-import TextInput from '../TextInput';
-
-// id is required
-describe('rendering TextInput', () => {
-  describe('initial state', () => {
-    it('has default class text-input', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('text-input');
-    });
-    it('has default type text', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" />
-      );
-      expect(getByTestId('test-id').getAttribute('type')).toBe('text');
-    });
-  });
-  describe('passed props', () => {
-    it('has is-invalid class when isInvalid prop is passed', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" isInvalid />
-      );
-      expect(getByTestId('test-id')).toHaveClass('is-invalid');
-    });
-    it('has is-valid class when isValid prop is passed', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" isValid />
-      );
-      expect(getByTestId('test-id')).toHaveClass('is-valid');
-    });
-    it('has text-input--large class when size prop is set to large', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" size="large" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('text-input--large');
-    });
-    ['3ch', '8ch', '12ch', 'fullwidth'].map(width => {
-      it(`has text-input--${width} class when width prop is set to ${width}`, () => {
-        const { getByTestId } = render(
-          <TextInput data-testid="test-id" width={width} id="test" />
-        );
-        expect(getByTestId('test-id')).toHaveClass(`text-input--${width}`);
-      });
-    });
-    ['email', 'hidden', 'password', 'search', 'tel', 'url'].map(type => {
-      it(`has type ${type} when htmltype is set to ${type}`, () => {
-        const { getByTestId } = render(
-          <TextInput data-testid="test-id" htmlType={type} id="test" />
-        );
-        expect(getByTestId('test-id').getAttribute('type')).toBe(type);
-      });
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('text-input');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('name attribute is set to id when name prop is not set', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" />
-      );
-      expect(getByTestId('test-id').getAttribute('name')).toBe(
-        getByTestId('test-id').getAttribute('id')
-      );
-    });
-    it('name attribute is set to name prop when prop is passed', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" name="test-name" />
-      );
-      expect(getByTestId('test-id').getAttribute('name')).toBe('test-name');
-    });
-    it('disabled attribute is set to true when isDisabled prop is passed', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" isDisabled />
-      );
-      expect(getByTestId('test-id').disabled).toBe(true);
-    });
-    it('has placeholder attribute when placeholder prop is set', () => {
-      const { getByTestId } = render(
-        <TextInput
-          data-testid="test-id"
-          id="test"
-          placeholder="test-placeholder"
-        />
-      );
-      expect(getByTestId('test-id').getAttribute('placeholder')).toBe(
-        'test-placeholder'
-      );
-    });
-    it('has value attribute set to value prop', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" defaultValue="test-value" />
-      );
-      expect(getByTestId('test-id').value).toBe('test-value');
-    });
-    it('has readOnly attribute set to true when readOnly prop is passed', () => {
-      const { getByTestId } = render(
-        <TextInput data-testid="test-id" id="test" readOnly />
-      );
-      expect(getByTestId('test-id').readOnly).toBe(true);
-    });
-  });
-});

package/src/components/Forms/index.js

@@ -1,16 +0,0 @@
-export { default as Autocomplete } from './Autocomplete';
-export { default as Checkbox } from './Checkbox';
-export { default as DatePicker } from './DatePicker';
-export { default as Field } from './Field';
-export { default as Fieldset } from './Fieldset';
-export { default as File } from './Field';
-export { default as Group } from './Group';
-export { default as Hint } from './Hint';
-export { default as Label } from './Label';
-export { default as Message } from './Message';
-export { default as Radio } from './Radio';
-export { default as RangeSlider } from './RangeSlider';
-export { default as Select } from './Select';
-export { default as TextArea } from './TextArea';
-export { default as TextInput } from './TextInput';
-export { default as InputStepper } from './InputStepper';

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

@@ -1,41 +0,0 @@
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-
-$default: (
-  background-color: color.$white,
-  border: 2px solid color.$gray-500,
-);
-
-$focus: (
-  border-color: color.$black,
-  box-shadow: base.$focus-shadow,
-);
-
-$disabled: (
-  background-color: color.$gray-300,
-  border-color: color.$gray-500,
-  color: color.$gray-700,
-);
-
-$disabled-checked: (
-  background-color: color.$gray-500,
-);
-
-$readonly: (
-  background-color: color.$gray-300,
-  color: color.$gray-700,
-);
-
-$invalid: (
-  border-color: color.$danger,
-);
-
-$placeholder: (
-  color: color.$gray-700,
-);
-
-$radiocheck-sizes: (
-  default: space.get('medium'),
-  large: space.get('large'),
-);

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

@@ -1,44 +0,0 @@
-@use "sass:map";
-@use '../../../styles/tools/generate';
-
-@mixin radiocheck-states($config, $display-selector: '') {
-  + #{$display-selector} {
-    @include generate.css-map($config, 'default');
-  }
-
-  &:checked + #{$display-selector} {
-    background-position: center center;
-    @include generate.css-map($config, 'checked');
-  }
-
-  &:disabled + #{$display-selector} {
-    @include generate.css-map($config, 'disabled');
-  }
-
-  &:disabled:checked + #{$display-selector} {
-    @include generate.css-map($config, 'disabled-checked');
-  }
-
-  &.is-invalid + #{$display-selector} {
-    @include generate.css-map($config, 'invalid');
-  }
-
-  &:focus + #{$display-selector} {
-    @include generate.css-map($config, 'focus');
-  }
-
-  &:checked.is-invalid + #{$display-selector} {
-    @include generate.css-map($config, 'invalid-checked');
-  }
-}
-
-@mixin radiocheck-input() {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-};
-
-@mixin radiocheck-size($size, $config) {
-  width: map.get($config, $size);
-  height: map.get($config, $size);
-}

package/src/components/Gauge/Gauge.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import { node, number } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** Text inside the gauge */
-  children: node,
-  /** Value filling the gauge */
-  percentage: number,
-};
-
-const getMaxValue = radius => Math.PI * (radius + radius * 0.22) * 2;
-
-const getStrokeDasharray = (max, percentage) => {
-  const fullCircleLength = max;
-  const strokeLength = (max / 2) * (percentage / 100);
-  return `${strokeLength}, ${fullCircleLength}`;
-};
-
-const clamp = (num, min = 0, max = 100) => {
-  return Math.min(Math.max(num, min), max);
-};
-
-const CLASS_ROOT = 'gauge';
-
-const Gauge = React.forwardRef(
-  ({ children, className, percentage = 0, ...other }, ref) => {
-    const radius = 100;
-    const maxValue = getMaxValue(radius);
-
-    const circleAttrs = {
-      r: radius,
-      cx: 110,
-      cy: 110,
-      strokeWidth: 15,
-      fill: 'none',
-      transform: 'rotate(160, 110, 110)',
-    };
-
-    return (
-      <figure ref={ref} className={cx(`${CLASS_ROOT}`, className)} {...other}>
-        <svg
-          width="220"
-          height="150"
-          viewBox="0 0 220 150"
-          className={`${CLASS_ROOT}__dial`}
-        >
-          <circle
-            className={`${CLASS_ROOT}__display`}
-            strokeDasharray={getStrokeDasharray(maxValue, 100)}
-            {...circleAttrs}
-          />
-          <circle
-            className={`${CLASS_ROOT}__indicator`}
-            strokeDasharray={getStrokeDasharray(maxValue, clamp(percentage))}
-            {...circleAttrs}
-          />
-        </svg>
-        <figcaption className={`${CLASS_ROOT}__text`}>{children}</figcaption>
-      </figure>
-    );
-  }
-);
-
-Gauge.propTypes = propTypes;
-Gauge.displayName = 'Gauge';
-
-export default Gauge;

package/src/components/Gauge/Gauge.mdx

@@ -1,35 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Code, Preview } from '../../styleguide/';
-import Gauge from './';
-import GaugeMaker from './GaugeMaker';
-
-# Gauge
-
-Stylized display of a scalar value within a known range. Often used to compare a single, important value between multiple product versions.
-
-The gauge consists of:
-
-- **Dial**: SVG element, the face of the gauge meter
-- **Display**: Gray denominator of the maximum value
-- **Indicator**: Black "needle" which shows the value
-- **Text**: Textual representation of the value
-
-<Preview>
-  <Gauge percentage={70}>
-    <div className="h1 mb-xsmall">500</div>
-    <div className="bold">
-      Mbit/s <br />
-      sťahovanie
-    </div>
-  </Gauge>
-</Preview>
-
-## Calculating your svg values
-
-Gauge presentaion is done using `svg`. Due to visual complexity, math is needed to display each value correctly. Use the widget below to set your value and copy the code.
-
-<GaugeMaker />
-
-## Props
-
-<ComponentDocs component={Gauge} />

package/src/components/Gauge/GaugeMaker.js

@@ -1,82 +0,0 @@
-import React, { useState, useRef } from 'react';
-import pretty from 'pretty';
-
-import Bar, { BarItem } from '../Bar';
-import Field from '../Forms/Field';
-import TextInput from '../Forms/TextInput';
-import Button from '../Button';
-import Message from '../Forms/Message';
-
-import Gauge from './';
-
-const GaugeMaker = () => {
-  const [val, setVal] = useState(20);
-  const [isSuccessMessageVisible, setIsSuccessMessageVisible] = useState(false);
-  const [isErrorMessageVisible, setIsErrorMessageVisible] = useState(false);
-  const gaugeRef = useRef(null);
-
-  const updateGauge = e => {
-    const value = parseInt(e.target.value, 10) || 0;
-
-    if (value < 0 || value > 100) {
-      setIsErrorMessageVisible(true);
-    } else {
-      setVal(value);
-      setIsSuccessMessageVisible(false);
-      setIsErrorMessageVisible(false);
-    }
-  };
-
-  const copy = e => {
-    e.preventDefault();
-    navigator.clipboard.writeText(pretty(gaugeRef.current.outerHTML));
-    setIsSuccessMessageVisible(true);
-  };
-
-  return (
-    <>
-      <Bar align="start">
-        <BarItem>
-          <form onSubmit={copy}>
-            <Field
-              label="Percentage"
-              id="gauge-control"
-              control={{
-                width: '3ch',
-                renderControl: props => (
-                  <TextInput
-                    min="0"
-                    max="100"
-                    type="number"
-                    onChange={updateGauge}
-                    defaultValue={val}
-                    {...props}
-                  />
-                ),
-              }}
-              messages={[
-                ...(isErrorMessageVisible
-                  ? [
-                      {
-                        type: 'error',
-                        text: 'Gauge can only display values between 0 and 100',
-                      },
-                    ]
-                  : []),
-              ]}
-            />
-            <Button htmlType="submit" onClick={copy}>
-              Copy markup
-            </Button>
-            <Message hidden={!isSuccessMessageVisible}>Markup copied.</Message>
-          </form>
-        </BarItem>
-        <BarItem>
-          <Gauge percentage={val} ref={gaugeRef} />
-        </BarItem>
-      </Bar>
-    </>
-  );
-};
-
-export default GaugeMaker;

package/src/components/Gauge/index.js

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

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

@@ -1,32 +0,0 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
-
-.gauge {
-  position: relative;
-  width: convert.to-rem(220px);
-  padding: 0;
-  margin: 0 0 space.get() 0;
-  text-align: center;
-
-  &__dial {
-    display: block;
-    margin: 0 auto;
-  }
-
-  &__text {
-    position: absolute;
-    max-width: convert.to-rem(160px);
-    bottom: space.get('xsmall');
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &__display {
-    stroke: color.$gray-300;
-  }
-
-  &__indicator {
-    stroke: color.$black;
-  }
-}

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

@@ -1,35 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import Gauge from '../';
-
-describe('rendering Gauge', () => {
-  describe('initial state', () => {
-    it('has default class gauge', () => {
-      const { getByTestId } = render(<Gauge data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('gauge');
-    });
-
-    it('has dial element', () => {
-      const { container } = render(<Gauge data-testid="test-id" />);
-      expect(container.getElementsByClassName('gauge__dial').length).toBe(1);
-    });
-
-    it('has display element', () => {
-      const { container } = render(<Gauge data-testid="test-id" />);
-      expect(container.getElementsByClassName('gauge__display').length).toBe(1);
-    });
-
-    it('has indicator element', () => {
-      const { container } = render(<Gauge data-testid="test-id" />);
-      expect(container.getElementsByClassName('gauge__indicator').length).toBe(
-        1
-      );
-    });
-
-    it('has text element', () => {
-      const { container } = render(<Gauge data-testid="test-id" />);
-      expect(container.getElementsByClassName('gauge__text').length).toBe(1);
-    });
-  });
-});

package/src/components/Grid/Grid.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { bool, oneOf, string } from 'prop-types';
-import cx from 'classnames';
-
-import { getResponsivePropType, genResponsiveClasses } from '../../utils';
-
-const propTypes = {
-  /** Flex vertical alignment */
-  vAlign: oneOf(['stretch', 'start', 'end', 'center']),
-  /** Flex horizontal alignment */
-  hAlign: oneOf(['end', 'center', 'space-around', 'space-between']),
-  /** Html element. */
-  tag: string,
-  /** Attempt to equalize height of column children. */
-  justifyHeight: bool,
-  /** Row gap size between rows */
-  rowGapSize: getResponsivePropType(oneOf(['medium', 'large', 'xlarge'])),
-  /** Space between columns */
-  columnGapSize: oneOf(['none']),
-};
-
-const CLASS_ROOT = 'grid';
-
-const Grid = ({
-  className,
-  hAlign,
-  vAlign,
-  tag = 'div',
-  justifyHeight,
-  rowGapSize,
-  columnGapSize,
-  ...other
-}) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`align-items-${vAlign}`]: vAlign,
-      [`justify-content-${hAlign}`]: hAlign,
-      [`${CLASS_ROOT}--justify-height`]: justifyHeight,
-      [`${CLASS_ROOT}--column-gap-${columnGapSize}`]: columnGapSize,
-    },
-    ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
-    className
-  );
-  const TagName = tag;
-
-  return <TagName className={classes} {...other} />;
-};
-
-Grid.displayName = 'Grid';
-Grid.propTypes = propTypes;
-
-export default Grid;