feat: added power select component (#6)

* feat: added power select component * chore: added extra test for empty array and added types/react-select package to dev dependencies * chore: changed DnPowerSelect to DnMultiSelect and added name as a prop * chore: writing additional test cases for onChange on Multiselect Co-authored-by: Anusha Ganti <[email protected]>
denali-design · Sep 10, 2021 · a9a52ba · a9a52ba
1 parent 4d885d9
commit a9a52ba
Show file tree

Hide file tree

Showing 9 changed files with 1,454 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,8 @@
     "react": ">=16.0.0"
   },
   "dependencies": {
-    "classnames": "2.2.6"
+    "classnames": "2.2.6",
+    "react-select": "4.3.1"
   },
   "devDependencies": {
     "@babel/core": "7.13.1",
@@ -66,6 +67,7 @@
     "@types/enzyme": "3.10.6",
     "@types/jest": "26.0.14",
     "@types/react": "16.9.49",
+    "@types/react-select": "4.0.17",
     "@typescript-eslint/eslint-plugin": "3.10.1",
     "@typescript-eslint/parser": "3.10.1",
     "babel-loader": "8.1.0",

diff --git a/src/DnMultiSelect/DnMultiSelect.css b/src/DnMultiSelect/DnMultiSelect.css
@@ -0,0 +1,169 @@
+/**
+ * Copyright 2020, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+.denali-multiselect__control {
+    min-height: 36px !important;
+    width: auto;
+    padding: 0px 10px !important;
+}
+
+.denali-multiselect .denali-multiselect__control {
+    align-items: center;
+    background: rgba(1, 110, 255, 0.08) !important;
+    border: none !important;
+    border-radius: 4px;
+    color: #303030;
+    display: flex;
+    outline: none;
+    position: relative;
+}
+
+.denali-multiselect__control--menu-is-open {
+    box-shadow: 0px 2px 0px #016EFF !important;
+}
+
+.denali-multiselect .denali-multiselect__control--is-focused {
+    align-items: center;
+    background: #016eff14 !important;
+    border: none !important;
+    border-radius: 4px;
+    color: #303030;
+    display: flex;
+    min-height: 36px;
+    outline: none;
+    padding: 2px 25px 2px 10px;
+    position: relative;
+}
+
+.denali-multiselect__value-container {
+    padding: 0% !important;
+}
+
+.denali-multiselect .denali-multiselect__control--menu-is-open {
+    align-items: center;
+    background: rgba(1, 110, 255, 0.08) !important;
+    border: none !important;
+    border-radius: 4px;
+    color: #303030;
+    display: flex;
+    min-height: 36px;
+    outline: none;
+    padding: 2px 25px 2px 10px;
+    position: relative;
+}
+
+.denali-multiselect__multi-value__label {
+    font-size: 1.4rem !important;
+    padding: 0 !important;
+    padding-left: 7px !important;
+    margin: 0;
+}
+
+/* tag remove icon */
+
+.denali-multiselect__multi-value__remove {
+    content: "";
+    height: 20px;
+    width: 20px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICA8dGl0bGU+Y2xvc2U8L3RpdGxlPgogIDxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPgogICAgPGcgaWQ9ImludmlzaWJsZV9ib3giIGRhdGEtbmFtZT0iaW52aXNpYmxlIGJveCI+CiAgICAgIDxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSIvPgogICAgPC9nPgogICAgPGcgaWQ9Imljb25zX1EyIiBkYXRhLW5hbWU9Imljb25zIFEyIiBmaWxsPSIjNjA2MDYwIj4KICAgICAgPHBhdGggZD0iTTI2LjgsMjQsMzcuNCwxMy41YTIuMSwyLjEsMCwwLDAsLjItMi43LDEuOSwxLjksMCwwLDAtMy0uMkwyNCwyMS4yLDEzLjQsMTAuNmExLjksMS45LDAsMCwwLTMsLjIsMi4xLDIuMSwwLDAsMCwuMiwyLjdMMjEuMiwyNCwxMC42LDM0LjVhMi4xLDIuMSwwLDAsMC0uMiwyLjcsMS45LDEuOSwwLDAsMCwzLC4yTDI0LDI2LjgsMzQuNiwzNy40YTEuOSwxLjksMCwwLDAsMy0uMiwyLjEsMi4xLDAsMCwwLS4yLTIuN1oiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=);
+    background-repeat: no-repeat;
+    background-size: 14px;
+    margin-top: 6px;
+    margin-left: 5px;
+}
+
+.denali-multiselect__multi-value__remove>svg {
+    display: none;
+}
+
+.denali-multiselect__multi-value__remove:hover {
+    background-color: transparent !important;
+    cursor: pointer;
+}
+
+/* drop down arrowhead */
+
+.denali-multiselect__dropdown-indicator {
+    content: "";
+    height: 10px;
+    width: 10px;
+    right: 10px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICA8dGl0bGU+YXJyb3doZWFkLWRvd248L3RpdGxlPgogIDxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPgogICAgPGcgaWQ9ImludmlzaWJsZV9ib3giIGRhdGEtbmFtZT0iaW52aXNpYmxlIGJveCI+CiAgICAgIDxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSIvPgogICAgPC9nPgogICAgPGcgaWQ9Imljb25zX1EyIiBkYXRhLW5hbWU9Imljb25zIFEyIj4KICAgICAgPHBhdGggZmlsbD0iIzYwNjA2MCIgZD0iTTI0LDI3LjIsMTMuNCwxNi42YTEuOSwxLjksMCwwLDAtMywuMiwyLjEsMi4xLDAsMCwwLC4yLDIuN2wxMiwxMS45YTEuOSwxLjksMCwwLDAsMi44LDBsMTItMTEuOWEyLjEsMi4xLDAsMCwwLC4yLTIuNywxLjksMS45LDAsMCwwLTMtLjJaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);
+    background-repeat: no-repeat;
+    background-size: 15px;
+}
+
+/* clear all indicator try after or before and try hiding svg*/
+.denali-multiselect__clear-indicator>svg {
+    display: none;
+}
+
+.denali-multiselect__clear-indicator:before {
+    content: "Clear all";
+}
+
+.denali-multiselect__clear-indicator {
+    display: block;
+    color: #016eff !important;
+    text-decoration: none;
+    font-size: inherit;
+    cursor: pointer;
+}
+
+.denali-multiselect__clear-indicator:hover {
+    color: #004cb3 !important;
+}
+
+.denali-multiselect__menu-list {
+    padding: 0 !important;
+    font-size: 1.4rem;
+    font-family: Helvetica, "Arial", sans-serif;
+}
+
+.denali-multiselect__control {
+    align-items: center;
+    background: rgba(1, 110, 255, 0.08) !important;
+    border: none !important;
+    border-radius: 4px;
+    box-shadow: none;
+    color: #303030;
+    display: flex;
+    min-height: 36px;
+    outline: none;
+    padding: 2px 25px 2px 10px;
+    position: relative;
+}
+
+.denali-multiselect__indicator-separator {
+    display: none !important;
+}
+
+.denali-multiselect__multi-value {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0px 10px;
+    height: 28px;
+    margin: 3px;
+    background-color: #CCE2FF !important;
+    color: #303030;
+    border-radius: 9999px !important;
+    white-space: nowrap;
+    transition: 300ms;
+    font-size: 1.2rem;
+    font-family: Helvetica, "Arial", sans-serif;
+    height: 22px;
+    padding: 0px 8px;
+}
+
+.denali-multiselect__multi-value__remove {
+    padding: 0 !important;
+}
+
+.denali-multiselect__multi-value__remove :hover {
+    background-color: #cce2ff !important;
+    color: #3d4042 !important;
+    cursor: pointer;
+}
diff --git a/src/DnMultiSelect/DnMultiSelect.tsx b/src/DnMultiSelect/DnMultiSelect.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright 2020, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+import React from 'react';
+import Select from 'react-select';
+import './DnMultiSelect.css';
+
+export const DnMultiSelect: React.FC<DnMultiSelectProps> = ({
+    name,
+    dataList,
+    closeMenuOnSelect,
+    isClearable,
+    isSearchable,
+    ...rest
+}: DnMultiSelectProps) => {
+    return (
+        <Select
+            defaultValue={dataList && dataList[0]}
+            isMulti
+            name={name}
+            options={dataList}
+            classNamePrefix="denali-multiselect"
+            closeMenuOnSelect={closeMenuOnSelect}
+            isClearable={isClearable}
+            isSearchable={isSearchable}
+            {...rest}
+        />
+    );
+};
+
+export interface DnMultiSelectProps {
+    name?: string;
+    dataList: DnMultiSelectProps[];
+    closeMenuOnSelect?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+}
+
+DnMultiSelect.defaultProps = {
+    name: undefined,
+    closeMenuOnSelect: false,
+    isClearable: false,
+    isSearchable: false,
+};
diff --git a/src/DnMultiSelect/__stories__/index.stories.jsx b/src/DnMultiSelect/__stories__/index.stories.jsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2020, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+import React from 'react';
+import { withKnobs, object, text, boolean } from '@storybook/addon-knobs';
+import { getThemeClassName, propsGroupId } from '../../../.storybook/storybook-utils';
+import { DnMultiSelect } from '../../index'; // src/index.tsx
+
+const getDataList = (value) => object('dataList', value, propsGroupId);
+
+const getCloseMenuOnSelect = (value) => boolean('closeMenuOnSelect', value, propsGroupId);
+
+const getIsClearable = (value) => boolean('isClearable', value, propsGroupId);
+
+const getIsSearchable = (value) => boolean('isSearchable', value, propsGroupId);
+
+const getName = (value) => text('name', value, propsGroupId);
+
+export default {
+    title: 'Components/DnMultiSelect',
+    decorators: [withKnobs],
+};
+
+export const Default = () => {
+    return (
+        <DnMultiSelect
+            dataList={getDataList([
+                { value: 'chocolate', label: 'Chocolate' },
+                { value: 'strawberry', label: 'Strawberry' },
+                { value: 'vanilla', label: 'Vanilla' },
+            ])}
+        />
+    );
+};
+
+export const Playground = () => {
+    return (
+        <div className={getThemeClassName()}>
+            <DnMultiSelect
+                name={getName('groceries')}
+                dataList={getDataList([
+                    { value: 'bread', label: 'Bread' },
+                    { value: 'meat', label: 'Meat' },
+                    { value: 'oil', label: 'Oil' },
+                    { value: 'icecream', label: 'Ice Cream' },
+                    { value: 'cheese', label: 'Cheese' },
+                    { value: 'eggs', label: 'Eggs' },
+                ])}
+                closeMenuOnSelect={getCloseMenuOnSelect()}
+                isClearable={getIsClearable()}
+                isSearchable={getIsSearchable()}
+            />
+        </div>
+    );
+};