qpp-style 9.6.13 → 9.7.0

package/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import Dropdown from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Dropdown',
+  component: Dropdown,
+  decorators: [withKnobs],
+};
+
+export const DropdownField = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DropdownFieldAutoWidth = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    className="qpp-u-width--auto"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DisabledDropdown = () => (
+  <Dropdown
+    disabled
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DropdownBigVariant = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    size="big"
+    options={[
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+      { name: 'Name 3', value: 'Value 3' },
+    ]}
+  />
+);
+
+export const DropdownWithDisabledOption = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+    options={[
+      { disabled: true, name: 'Select Category', value: 'default' },
+      { name: 'Name 1', value: 'Value 1' },
+      { name: 'Name 2', value: 'Value 2' },
+    ]}
+  />
+);
+
+export const DropdownUsingChildrenProp = () => (
+  <Dropdown
+    id="id-example"
+    value="value-example"
+    name="name-example"
+    ariaLabel="arial label example"
+  >
+    <option value="Value 1">Name 1</option>
+    <option value="Value 2">Name 2</option>
+  </Dropdown>
+);

package/components/Dropdown/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Dropdown = ({
+  className,
+  id,
+  ariaLabelledBy,
+  ariaLabel,
+  onChange,
+  dataTestId,
+  name,
+  dataType,
+  disabled,
+  size,
+  options,
+  children,
+  parentElement,
+  ...rest
+}) => {
+  const dropdownClass = [
+    'qpp-c-dropdown',
+    size === 'big' && 'qpp-c-dropdown--big',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <select
+      id={id}
+      aria-labelledby={ariaLabelledBy}
+      aria-label={ariaLabel}
+      className={dropdownClass || ''}
+      onChange={onChange}
+      data-testid={dataTestId}
+      name={name}
+      disabled={disabled}
+      data-type={dataType}
+      {...rest}
+    >
+      {children}
+      {options.map(({ disabled, name, value }) => (
+        <option disabled={disabled} key={value} value={value}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+Dropdown.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  ariaLabelledBy: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  dataTestId: PropTypes.string,
+  name: PropTypes.string,
+  dataType: PropTypes.string,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['big']),
+  options: PropTypes.array,
+  parentElement: PropTypes.string,
+};
+
+Dropdown.defaultProps = {
+  children: false,
+  className: 'qpp-u-width--100',
+  id: null,
+  ariaLabelledBy: null,
+  ariaLabel: null,
+  onChange: () => null,
+  dataTestId: null,
+  name: null,
+  dataType: null,
+  disabled: false,
+  size: null,
+  options: [],
+  parentElement: 'span',
+};
+
+export default Dropdown;

package/components/index.js

@@ -16,6 +16,7 @@ import Tooltip from './Tooltip';
 import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
+import Dropdown from './Dropdown';
 import {
   MyApplicationsIcon,
   UserSignInIcon,
@@ -118,5 +119,6 @@ export {
   Tabs,
   TextButton,
   TextInput,
+  Dropdown,
   Tooltip,
 };