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

package/src/components/Forms/Field/Field.mdx

@@ -1,383 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import Button from '../../Button';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionIndicator,
-} from '../../BlockAction';
-import Bar, { BarItem } from '../../Bar';
-import ToggleCheckbox from '../../../docs/utils/ToggleCheckbox';
-
-import Field from './Field';
-
-# Field
-
-Scaffolding for Controls and Captions
-
-## Required minimum
-
-### TextInput
-
-<Preview>
-  <Field control={{ type: 'text' }} label="Field label" />
-</Preview>
-
-### Radio
-
-<Preview>
-  <Field control={{ type: 'radio', name: 'radio-field' }} label="Field label" />
-</Preview>
-
-### Checkbox
-
-<Preview>
-  <Field control={{ type: 'checkbox' }} label="Field label" />
-</Preview>
-
-### File
-
-<Preview>
-  <Field control={{ type: 'file' }} label="Field label" />
-</Preview>
-
-### Select
-
-<Preview>
-  <Field
-    control={{ type: 'select', options: ['option 1', 'option 2', 'option 3'] }}
-    label="Field label"
-  />
-</Preview>
-
-### Range
-
-<Preview>
-  <Field
-    control={{
-      type: 'range',
-      id: 'range-field',
-      config: {
-        start: [0],
-        range: {
-          min: 0,
-          max: 100,
-        },
-        connect: [true, false],
-        handleAttributes: [{ 'aria-labelledby': 'range-field-label' }],
-      },
-    }}
-    label="Field label"
-  />
-</Preview>
-
-### DatePicker
-
-<Preview>
-  <Field
-    control={{
-      type: 'datepicker',
-    }}
-    label="Field label"
-  />
-</Preview>
-
-### Group
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text' },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-  />
-</Preview>
-
-## Hint, Tooltip and Messages
-
-### TextInput
-
-#### Error state
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Donec id elit non mi porta gravida at eget metus."
-    hint="Field instructions"
-    messages={[{ type: 'error', text: 'Error message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Warning state
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'warning', text: 'Warning message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Success state
-
-<Preview>
-  <Field
-    control={{ type: 'text', isValid: true }}
-    label="Field label"
-    hint="Field instructions"
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Radio
-
-<Preview>
-  <Field
-    control={{ type: 'radio', name: 'radio-field-2' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Checkbox
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Checkbox Toggle
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox', isToggle: true }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### File
-
-<Preview>
-  <Field
-    control={{ type: 'file' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Select
-
-<Preview>
-  <Field
-    control={{ type: 'select', options: ['option 1', 'option 2', 'option 3'] }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'error', text: 'Error message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-  <Field
-    control={{ type: 'select', options: ['option 1', 'option 2', 'option 3'] }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'warning', text: 'Warning message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Range
-
-<Preview>
-  <Field
-    control={{
-      type: 'range',
-      config: {
-        start: [0],
-        range: {
-          min: 0,
-          max: 100,
-        },
-        connect: [true, false],
-      },
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### DatePicker
-
-<Preview>
-  <Field
-    control={{
-      type: 'datepicker',
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Group
-
-#### Warning
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text' },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'error', text: 'Error message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Warning
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text' },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'warning', text: 'Warning message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Success
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text', isValid: true },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-    hint="Field instructions"
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-## Stepper
-
-<Preview>
-  <Field
-    control={{ type: 'input-stepper' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'info', text: 'Info message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-## Fill parent
-
-Because Checkbox/Radio input styling, we are not able to fill the parent using `.block-action__control`. We can do this using class `.radiocheck--fill`, thanks to which Checkbox
-fill whole space of parent element with set position. In this case `position: relative`
-of `.card` prevents element from further expanding. Disadvantage is that we can't have another interactive element inside of this card.
-
-<Preview>
-  <BlockAction>
-    <BlockActionIndicator>
-      <div className="card border border--gray" id="checkbox-no-fill-border">
-        <div className="card__section">
-          <div class="form-field form-field--radiocheck">
-            <div class="form-field__control">
-              <BlockActionControl>
-                <input
-                  type="checkbox"
-                  className="checkbox block-action__control"
-                  id="checkbox-no-fill"
-                  name="checkbox-no-fill"
-                ></input>
-              </BlockActionControl>
-              <div className="checkbox-display"></div>
-            </div>
-            <div class="form-field__description">
-              <label
-                for="checkbox-no-fill"
-                class="label form-field__label"
-                id="checkbox-no-fill-label"
-              >
-                Whole element is not clickable
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </BlockActionIndicator>
-  </BlockAction>
-  <div className="card border border--gray border-hover" id="checkbox-border">
-    <div className="card__section">
-      <div class="form-field form-field--radiocheck">
-        <div class="form-field__control">
-          <ToggleCheckbox />
-          <div className="checkbox-display"></div>
-        </div>
-        <div class="form-field__description">
-          <label
-            for="checkbox-fill"
-            class="label form-field__label"
-            id="checkbox-fill-label"
-          >
-            Whole element is clickable
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Field />" component={Field} />

package/src/components/Forms/Field/FieldContext.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export default createContext();

package/src/components/Forms/Field/Label.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-import Label from '../Label';
-import ConditionalWrapper from '../../../utils/ConditionalWrapper';
-
-import FieldContext from './FieldContext';
-
-const CLASS_ROOT = 'form-field__label';
-
-export default () => {
-  const { control, controlId, label, labelAfter } =
-    React.useContext(FieldContext);
-
-  return (
-    <ConditionalWrapper
-      condition={!!labelAfter}
-      wrapper={<div className={CLASS_ROOT} />}
-    >
-      {control.type !== 'range' ? (
-        <Label
-          id={`${controlId}-label`}
-          htmlFor={controlId}
-          className={!labelAfter && CLASS_ROOT}
-        >
-          {label}
-        </Label>
-      ) : (
-        <span
-          id={`${controlId}-label`}
-          className={cx('label', {
-            [CLASS_ROOT]: !labelAfter,
-          })}
-        >
-          {label}
-        </span>
-      )}
-      {labelAfter && <> {labelAfter}</>}
-    </ConditionalWrapper>
-  );
-};

package/src/components/Forms/Field/Messages.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import Message from '../Message';
-import FieldsetContext from '../Fieldset/FieldsetContext';
-
-import FieldContext from './FieldContext';
-
-export default ({ isMain }) => {
-  const { controlId, messages = [] } =
-    React.useContext(FieldContext) ?? React.useContext(FieldsetContext);
-  return messages
-    .filter(m => isMain === m.isMain)
-    .map((message, index) => (
-      <Message
-        id={`${controlId}-message-${index}`}
-        key={index.toString()}
-        type={message.type}
-      >
-        {message.text}
-      </Message>
-    ));
-};

package/src/components/Forms/Field/Tooltip.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { string } from 'prop-types';
-
-import Tooltip from '../../Tooltip/InfoTooltip';
-
-const propTypes = {
-  id: string.isRequired,
-};
-
-const FormTooltip = ({ id, children, ...other }) => {
-  return children ? (
-    <>
-      &nbsp;
-      <Tooltip
-        id={`${id}-tooltip`}
-        className="form-field__tooltip"
-        placement="right"
-        {...other}
-      >
-        {children}
-      </Tooltip>
-    </>
-  ) : null;
-};
-
-FormTooltip.propTypes = propTypes;
-FormTooltip.displayName = 'FormTooltip';
-
-export default FormTooltip;

package/src/components/Forms/Field/index.js

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

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

@@ -1,25 +0,0 @@
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/convert';
-
-$layout: (
-  margin-bottom: space.get('medium'),
-);
-
-$description: (
-  margin-bottom: space.get('xsmall'),
-  max-width: convert.to-rem(350px),
-);
-
-$input-control: (
-  margin-bottom: space.get('xsmall'),
-);
-
-$radiocheck-control: (
-  margin-right: space.get('small'),
-  margin-bottom: 0,
-);
-
-$hint: (
-  margin-top: space.get('xsmall'),
-  margin-bottom: space.get('xsmall'),
-);

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

@@ -1,43 +0,0 @@
-@use '../../../../styles/tools/generate';
-@use '../../../../styles/tools/convert';
-@use './config';
-
-@mixin base($config: config.$layout) {
-  @include generate.css-map($config);
-};
-
-@mixin radiocheck-base() {
-  display: flex;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-};
-
-
-@mixin radiocheck-fill() {
-  left: 0;
-  top: 0;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-@mixin description($config: config.$description) {
-  @include generate.css-map($config);
-};
-
-@mixin label {
-  display: inline;
-};
-
-@mixin input-control($config: config.$input-control) {
-  @include generate.css-map($config);
-};
-
-@mixin radiocheck-control($config: config.$radiocheck-control) {
-  @include generate.css-map($config);
-};
-
-@mixin hint($config: config.$hint) {
-  @include generate.css-map($config);
-}

package/src/components/Forms/Field/styles/style.scss

@@ -1,35 +0,0 @@
-@use './mixins';
-
-.form-field {
-  $this: &;
-
-  @include mixins.base();
-
-  &__description {
-    @include mixins.description();
-  }
-
-  &__label {
-    @include mixins.label();
-  }
-
-  &__control {
-    @include mixins.input-control();
-  }
-
-  &__hint {
-    @include mixins.hint();
-  }
-
-  &--radiocheck {
-    @include mixins.radiocheck-base();
-
-    #{$this}__control {
-      @include mixins.radiocheck-control();
-    }
-  }
-}
-
-.radiocheck--fill {
-  @include mixins.radiocheck-fill();
-}

package/src/components/Forms/Field/tests/Autocomplete.Field.conformance.test.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Field from '../';
-
-const options = ['option 1', 'option 2', 'option 3'];
-
-const example = (
-  <>
-    <Field label="Field Label" control={{ type: 'autocomplete', options }} />
-    <Field
-      label="Field Label"
-      control={{ type: 'autocomplete', options }}
-      tooltip="info tooltip"
-    />
-    <Field
-      label="Field Label"
-      hint="Field hint with long text"
-      control={{ type: 'autocomplete', options }}
-    />
-    <Field
-      label="Field Label"
-      control={{ type: 'autocomplete', options }}
-      messages={[
-        { type: 'info', text: 'Info message with lorem ipsum long text ipsum' },
-      ]}
-    />
-    <div id="root-tooltips" />
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate({
-    rules: {
-      'no-inline-style': 'off',
-      'prefer-native-element': 'off',
-    },
-  });
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(
-    await axe(container, {
-      rules: {
-        'aria-input-field-name': { enabled: false },
-      },
-    })
-  ).toHaveNoViolations();
-});

package/src/components/Forms/Field/tests/Checkbox.Field.conformance.test.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Field from '../';
-
-const example = (
-  <>
-    <Field label="Field Label" control={{ type: 'checkbox' }} />
-    <Field
-      label="Field Label"
-      control={{ type: 'checkbox' }}
-      tooltip="info tooltip"
-    />
-    <Field
-      label="Field Label"
-      hint="Field hint with long text"
-      control={{ type: 'checkbox' }}
-    />
-    <Field
-      label="Field Label"
-      control={{ type: 'checkbox' }}
-      messages={[
-        { type: 'info', text: 'Info message with lorem ipsum long text ipsum' },
-      ]}
-    />
-    <div id="root-tooltips" />
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate({
-    rules: {
-      'no-inline-style': 'off',
-    },
-  });
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import Field from '../Field';
-
-//legend is required
-describe('rendering Field', () => {
-  it('passes className to control element', () => {
-    render(<Field control={{ className: 'custom-class' }} />);
-    expect(screen.getByRole('textbox')).toHaveClass('custom-class');
-  });
-});