@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap

@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SkeletonTypography> Snapshots and structure should render story 'TextTypography' 1`] = `
+[
+  <div
+    className="lumx-spacing-margin-bottom lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-title"
+    style={
+      {
+        "width": "30%",
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
+    style={
+      {
+        "width": "70%",
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-primary"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-secondary"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-blue"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-dark"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-green"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-yellow"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-red"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-light"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+  <div
+    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-grey"
+    style={
+      {
+        "width": undefined,
+      }
+    }
+  >
+    <div
+      className="lumx-skeleton-typography__inner"
+    />
+  </div>,
+]
+`;

package/dist/src/components/skeleton/index.ts

@@ -0,0 +1,3 @@
+export * from './SkeletonCircle';
+export * from './SkeletonRectangle';
+export * from './SkeletonTypography';

package/dist/src/components/slider/Slider.stories.tsx

@@ -0,0 +1,29 @@
+import { Slider } from '@lumx/react';
+import { number, text } from '@storybook/addon-knobs';
+import noop from 'lodash/noop';
+import React from 'react';
+
+export default { title: 'LumX components/slider/Slider' };
+
+export const DefaultSlider = ({ theme }: any) => (
+    <Slider
+        label={text('label', 'Default')}
+        max={number('max', 10)}
+        min={number('min', 0)}
+        theme={theme}
+        value={5}
+        onChange={noop}
+    />
+);
+
+export const WithHelperSlider = ({ theme }: any) => (
+    <Slider
+        label={text('label', 'Default')}
+        helper={text('helper', 'This is an helper text')}
+        max={number('max', 10)}
+        min={number('min', 0)}
+        theme={theme}
+        value={5}
+        onChange={noop}
+    />
+);

package/dist/src/components/slider/Slider.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { Slider, SliderProps } from './Slider';
+import * as stories from './Slider.stories';
+
+const CLASSNAME = Slider.className as string;
+
+jest.mock('uid', () => ({ uid: () => 'uid' }));
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<SliderProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<Slider {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${Slider.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, Slider);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/slider/Slider.tsx

@@ -0,0 +1,299 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { forwardRef, SyntheticEvent, useMemo, useRef } from 'react';
+
+import classNames from 'classnames';
+
+import { InputHelper, InputLabel, Theme } from '@lumx/react';
+
+import useEventCallback from '@lumx/react/hooks/useEventCallback';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+import { uid } from 'uid';
+import { clamp } from '@lumx/react/utils/clamp';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SliderProps extends GenericProps, HasTheme {
+    /** Helper text. */
+    helper?: string;
+    /** Whether the min and max labels should be hidden or not. */
+    hideMinMaxLabel?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label text. */
+    label?: string;
+    /** Maximum value on the range. */
+    max: number;
+    /** Minimum value of the range. */
+    min: number;
+    /** Native input name property. */
+    name?: string;
+    /** Number of digits in the fractional part of the selected value. */
+    precision?: number;
+    /** Range step value. */
+    steps?: number;
+    /** Selected ranged value. */
+    value: number;
+    /** On change callback. */
+    onChange(value: number, name?: string, event?: SyntheticEvent): void;
+    /** On click callback. */
+    onMouseDown?(event: React.SyntheticEvent): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Slider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<SliderProps> = {
+    precision: 0,
+    steps: 0,
+    theme: Theme.light,
+};
+
+/**
+ * Convert a percent value to a value in range min - max.
+ *
+ * @param percent   Value to convert.
+ * @param min       Minimum value.
+ * @param max       Maximum value.
+ * @param precision Precision.
+ * @return Value in range min - max
+ */
+const computeValueFromPercent = (percent: number, min: number, max: number, precision = 0): number =>
+    Number((min + percent * (max - min)).toFixed(precision));
+
+/**
+ * Convert a value in range min - max to a percent value.
+ *
+ * @param value Value to convert.
+ * @param min   Minimum value.
+ * @param max   Maximum value.
+ * @return Value in percent
+ */
+const computePercentFromValue = (value: number, min: number, max: number): number =>
+    Number((value - min) / (max - min));
+
+/**
+ * Slider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        className,
+        disabled,
+        helper,
+        hideMinMaxLabel,
+        id,
+        isDisabled = disabled,
+        label,
+        max,
+        min,
+        name,
+        onChange,
+        onMouseDown,
+        precision,
+        steps,
+        theme,
+        value,
+        ...forwardedProps
+    } = props;
+    const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
+    const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
+    const sliderRef = useRef<HTMLDivElement>(null);
+
+    // build a lookup array for the steps.
+    const availableSteps = useMemo((): number[] => {
+        if (!steps) return [];
+
+        const available = [0];
+        const percentStep = 1 / ((max - min) / steps);
+        let ptr = 0;
+        while (ptr + percentStep < 1) {
+            ptr += percentStep;
+            available.push(ptr);
+        }
+        return available;
+    }, [steps, min, max]);
+
+    /**
+     * Try to find the closest step to the current slider position.
+     *
+     * @param percentValue Reference value
+     * @return The closest step value
+     */
+    const findClosestStep = (percentValue: number): number => {
+        const closest = availableSteps.reduce(
+            (acc, step) => {
+                const aDst = Math.abs(percentValue - step);
+                if (aDst < acc.dst) {
+                    return { dst: aDst, val: step };
+                }
+                return acc;
+            },
+            { dst: Infinity, val: -1 },
+        );
+        return closest.val;
+    };
+
+    /**
+     * Convert slider's handle position to percent.
+     *
+     * @param event The interaction event
+     * @param slider the slider element
+     * @return The computed percent value
+     */
+    const getPercentValue = (event: React.MouseEvent, slider: HTMLDivElement): number => {
+        const { width, left } = slider.getBoundingClientRect();
+        let percent = (event.pageX - left - window.pageXOffset) / width;
+        percent = clamp(percent, 0, 1);
+        if (steps) {
+            percent = findClosestStep(percent);
+        }
+        return percent;
+    };
+
+    /**
+     * Register a handler for the mouse move event.
+     */
+    const handleMove = useEventCallback((event: React.MouseEvent) => {
+        const { current: slider } = sliderRef;
+        if (!slider || !onChange) return;
+        const newValue = getPercentValue(event, slider);
+        onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
+    });
+
+    /**
+     * Register a handler for the mouse up event.
+     * Clean a all listeners.
+     */
+    const handleEnd = useEventCallback(() => {
+        document.body.removeEventListener('mousemove', handleMove);
+        document.body.removeEventListener('mouseup', handleEnd);
+        document.body.removeEventListener('touchmove', handleMove);
+        document.body.removeEventListener('touchend', handleEnd);
+    });
+
+    /**
+     * Move to the next or previous value (i.e. + or - 10%) or next step
+     * @param previous Should seek the previous value.
+     */
+    const hopToValue = (previous = false) => {
+        const oldPercent = computePercentFromValue(value, min, max);
+        let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);
+        if (steps) {
+            percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);
+            percent = findClosestStep(percent);
+        }
+        if (onChange) {
+            onChange(computeValueFromPercent(percent, min, max, precision), name);
+        }
+    };
+
+    /**
+     * Register a handler for keyboard interactions
+     */
+    const handleKeyDown = useEventCallback((event: React.KeyboardEvent) => {
+        if (event.key === 'ArrowRight') {
+            hopToValue();
+        } else if (event.key === 'ArrowLeft') {
+            hopToValue(true);
+        }
+    });
+
+    /**
+     * Register a handler for the mouseDown event.
+     */
+    const handleMouseDown = useEventCallback((event: React.MouseEvent) => {
+        onMouseDown?.(event);
+
+        const { current: slider } = sliderRef;
+        if (isDisabled || !slider) return;
+        const newValue = getPercentValue(event, slider);
+        if (onChange) {
+            onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
+        }
+
+        document.body.addEventListener('mousemove', handleMove);
+        document.body.addEventListener('mouseup', handleEnd);
+    });
+
+    const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({ prefix: CLASSNAME, theme, hasLabel: Boolean(label) }),
+            )}
+            onMouseDown={handleMouseDown}
+            aria-disabled={isDisabled}
+        >
+            {label && (
+                <InputLabel id={sliderLabelId} htmlFor={sliderId} className={`${CLASSNAME}__label`} theme={theme}>
+                    {label}
+                </InputLabel>
+            )}
+
+            {helper && (
+                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
+                    {helper}
+                </InputHelper>
+            )}
+
+            <div className={`${CLASSNAME}__ui-wrapper`}>
+                {!hideMinMaxLabel && (
+                    <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`}>{min}</span>
+                )}
+                <div className={`${CLASSNAME}__wrapper`} ref={sliderRef}>
+                    <div className={`${CLASSNAME}__track ${CLASSNAME}__track--background`} />
+                    <div
+                        className={`${CLASSNAME}__track ${CLASSNAME}__track--active`}
+                        style={{ width: percentString }}
+                    />
+                    {steps ? (
+                        <div className={`${CLASSNAME}__ticks`}>
+                            {availableSteps.map((step, idx) => (
+                                <div
+                                    key={`tick_${idx}`}
+                                    className={`${CLASSNAME}__tick`}
+                                    style={{ left: `${step * 100}%` }}
+                                />
+                            ))}
+                        </div>
+                    ) : null}
+                    <button
+                        type="button"
+                        aria-labelledby={sliderLabelId}
+                        name={name}
+                        id={sliderId}
+                        className={`${CLASSNAME}__handle`}
+                        style={{ left: percentString }}
+                        onKeyDown={handleKeyDown}
+                        disabled={isDisabled}
+                    />
+                </div>
+                {!hideMinMaxLabel && (
+                    <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`}>{max}</span>
+                )}
+            </div>
+        </div>
+    );
+});
+Slider.displayName = COMPONENT_NAME;
+Slider.className = CLASSNAME;
+Slider.defaultProps = DEFAULT_PROPS;

package/dist/src/components/slider/__snapshots__/Slider.test.tsx.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Slider> Snapshots and structure should render story 'DefaultSlider' 1`] = `
+<div
+  className="lumx-slider lumx-slider--theme-light lumx-slider--has-label"
+  onMouseDown={[Function]}
+>
+  <InputLabel
+    className="lumx-slider__label"
+    htmlFor="slider-uid"
+    id="label-slider-uid"
+    theme="light"
+  >
+    Default
+  </InputLabel>
+  <div
+    className="lumx-slider__ui-wrapper"
+  >
+    <span
+      className="lumx-slider__value-label lumx-slider__value-label--min"
+    >
+      0
+    </span>
+    <div
+      className="lumx-slider__wrapper"
+    >
+      <div
+        className="lumx-slider__track lumx-slider__track--background"
+      />
+      <div
+        className="lumx-slider__track lumx-slider__track--active"
+        style={
+          {
+            "width": "50%",
+          }
+        }
+      />
+      <button
+        aria-labelledby="label-slider-uid"
+        className="lumx-slider__handle"
+        id="slider-uid"
+        onKeyDown={[Function]}
+        style={
+          {
+            "left": "50%",
+          }
+        }
+        type="button"
+      />
+    </div>
+    <span
+      className="lumx-slider__value-label lumx-slider__value-label--max"
+    >
+      10
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<Slider> Snapshots and structure should render story 'WithHelperSlider' 1`] = `
+<div
+  className="lumx-slider lumx-slider--theme-light lumx-slider--has-label"
+  onMouseDown={[Function]}
+>
+  <InputLabel
+    className="lumx-slider__label"
+    htmlFor="slider-uid"
+    id="label-slider-uid"
+    theme="light"
+  >
+    Default
+  </InputLabel>
+  <InputHelper
+    className="lumx-slider__helper"
+    kind="info"
+    theme="light"
+  >
+    This is an helper text
+  </InputHelper>
+  <div
+    className="lumx-slider__ui-wrapper"
+  >
+    <span
+      className="lumx-slider__value-label lumx-slider__value-label--min"
+    >
+      0
+    </span>
+    <div
+      className="lumx-slider__wrapper"
+    >
+      <div
+        className="lumx-slider__track lumx-slider__track--background"
+      />
+      <div
+        className="lumx-slider__track lumx-slider__track--active"
+        style={
+          {
+            "width": "50%",
+          }
+        }
+      />
+      <button
+        aria-labelledby="label-slider-uid"
+        className="lumx-slider__handle"
+        id="slider-uid"
+        onKeyDown={[Function]}
+        style={
+          {
+            "left": "50%",
+          }
+        }
+        type="button"
+      />
+    </div>
+    <span
+      className="lumx-slider__value-label lumx-slider__value-label--max"
+    >
+      10
+    </span>
+  </div>
+</div>
+`;

package/dist/src/components/slider/index.ts

@@ -0,0 +1,2 @@
+export * from './Slider';
+export { clamp } from '@lumx/react/utils/clamp';