@hyphen/hyphen-components 2.12.3 → 2.13.0

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from './components/Modal/Modal';
 export * from './components/Pagination/Pagination';
 export * from './components/Popover/Popover';
 export * from './components/RadioGroup/RadioGroup';
+export * from './components/RangeInput/RangeInput';
 export * from './components/ResponsiveProvider/ResponsiveProvider';
 export * from './components/SelectInput/SelectInput';
 export * from './components/SelectInputInset/SelectInputInset';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.12.3",
+  "version": "2.13.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Modal/Modal.module.scss

@@ -40,7 +40,7 @@
   align-items: flex-end;
   z-index: var(--size-z-index-overlay);
   background: hsl(0deg 0% 0% / 33%);
-  background-color: rgb(77 82 79 / 50%);
+  background-color: rgba( 0, 0, 0, .6);
   overflow: hidden;
 
   :global {

package/src/components/RangeInput/RangeInput.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import * as Stories from './RangeInput.stories';
+import {RangeInput} from "./RangeInput";
+
+<Meta of={Stories} />
+
+# RangeInput
+
+Use a RangeInput when a user is required to select a value within a range. It is ideal for this scenario because the range is displayed without having to interact.
+
+## Props
+
+<ArgTypes of={RangeInput} />
+
+## Default
+
+All that is required to render a basic version of the RangeInput is the input's unique `id`, a `value`, a `max`, and an `onChange` event handler passed to the `onChange` prop.
+
+<Canvas isExpanded of={Stories.Default} />
+
+### Disabled
+
+Use the `isDisabled` prop to disable the input.
+
+<Canvas of={Stories.Disabled} />

package/src/components/RangeInput/RangeInput.module.scss

@@ -0,0 +1,25 @@
+.slider {
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0 !important;
+  background-color: var(--color-base-grey-700);
+  border: none;
+  border-radius: 2.5rem;
+  height: var(--size-spacing-sm);
+  overflow: visible;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: var(--size-spacing-2xl);
+  width: var(--size-spacing-2xl);
+  background-color: var(--color-base-white);
+  border-radius: var(--size-percentage-50);
+  border: 0.125rem solid #0f172a;
+  cursor: pointer;
+}
+
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/src/components/RangeInput/RangeInput.stories.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import { RangeInput } from './RangeInput';
+
+const meta: Meta<typeof RangeInput> = {
+  title: 'Components/RangeInput',
+  component: RangeInput,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const Default = () => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <>
+      <RangeInput
+        id="range"
+        value={value}
+        max={100}
+        onChange={(event) => setValue(+event.target.value)}
+      />
+      <p>Value: {value}</p>
+    </>
+  );
+};
+
+export const Disabled = () => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <RangeInput
+      id="range-disabled"
+      value={value}
+      max={100}
+      onChange={(event) => setValue(+event.target.value)}
+      isDisabled={true}
+    />
+  );
+};

package/src/components/RangeInput/RangeInput.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { InputRangeProps, RangeInput } from './RangeInput';
+
+describe('RangeInput', () => {
+  const defaultProps: InputRangeProps = {
+    id: 'test-range',
+    value: 50,
+    max: 100,
+    onChange: jest.fn(),
+  };
+
+  test('should render the range input with correct attributes', () => {
+    render(<RangeInput {...defaultProps} />);
+    const rangeInput = screen.getByRole('slider');
+
+    expect(rangeInput).toBeInTheDocument();
+    expect(rangeInput).toHaveAttribute('id', 'test-range');
+    expect(rangeInput).toHaveAttribute('type', 'range');
+    expect(rangeInput).toHaveAttribute('min', '0');
+    expect(rangeInput).toHaveAttribute('value', '50');
+    expect(rangeInput).toHaveAttribute('max', '100');
+  });
+
+  test('should update the value when changed', async () => {
+    const onChangeMock = jest.fn();
+    render(<RangeInput {...defaultProps} onChange={onChangeMock} />);
+    const rangeInput = screen.getByRole('slider');
+
+    await fireEvent.change(rangeInput, { target: { value: '75' } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/RangeInput/RangeInput.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FC } from 'react';
+import classNames from 'classnames';
+import styles from './RangeInput.module.scss';
+
+export interface InputRangeProps {
+  /**
+   * The input's id attribute.
+   */
+  id: string;
+  /**
+   * The value of the range.
+   */
+  value: number;
+  /**
+   * The maximum value of the range.
+   */
+  max: number;
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Custom class to be added to standard input classes.
+   */
+  className?: string;
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+}
+
+export const RangeInput: FC<InputRangeProps> = ({
+  value = 0,
+  max = 0,
+  id,
+  onChange,
+  className,
+  isDisabled = false,
+  ...restProps
+}) => {
+  const currentProgress = value > 0 ? (value / max) * 100 : 0;
+
+  return (
+    <input
+      {...restProps}
+      id={id}
+      type="range"
+      min="0"
+      value={value}
+      max={max}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-label="range input"
+      className={classNames(styles.slider, className, {
+        [styles.disabled]: isDisabled,
+      })}
+      onChange={onChange}
+      disabled={isDisabled}
+      style={{
+        background: `linear-gradient(to right, var(--color-base-grey-400) ${currentProgress}%, var(--color-base-grey-700) ${currentProgress}%)`,
+      }}
+    />
+  );
+};

package/src/index.ts

@@ -30,6 +30,7 @@ export * from './components/Modal/Modal';
 export * from './components/Pagination/Pagination';
 export * from './components/Popover/Popover';
 export * from './components/RadioGroup/RadioGroup';
+export * from './components/RangeInput/RangeInput';
 export * from './components/ResponsiveProvider/ResponsiveProvider';
 export * from './components/SelectInput/SelectInput';
 export * from './components/SelectInputInset/SelectInputInset';