feat(select-with-tags): add select with tags (#435)

* feat(select-with-tags): add select with tags * feat(select-with-tags): fixes * feat(select-with-tags): some fixes * feat(select-with-tags): fix imports * feat(select-with-tags): fixes * feat(select-with-tags): add label styles * feat(select-with-tags): fix placeholder styles * test(select-with-tags): add base tests * test(select-with-tags): add some tests * test(select-with-tags): add more tests * feat(select-with-tags): add arrow opacity on hover * fix(select-with-tags): pr fixes * feat(select-with-tags): review fixes * feat(select-with-tags): fix label position Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> Co-authored-by: Evgeny Sergeev <SiebenSieben@gmail.com> Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com>
core-ds · Dec 30, 2020 · bc42165 · bc42165
1 parent 75b0c9c
commit bc42165
Show file tree

Hide file tree

Showing 16 changed files with 1,206 additions and 1 deletion.
diff --git a/packages/select-with-tags/package.json b/packages/select-with-tags/package.json
@@ -0,0 +1,26 @@
+{
+    "name": "@alfalab/core-components-select-with-tags",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "ISC",
+    "main": "dist/index.js",
+    "module": "./dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-form-control": "3.1.1",
+        "@alfalab/core-components-select": "^4.3.1",
+        "@alfalab/core-components-tag": "1.6.4",
+        "@alfalab/hooks": "0.9.0",
+        "@alfalab/icons-glyph": "1.70.0",
+        "classnames": "^2.2.6"
+    }
+}
diff --git a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectWithTags Display tests should match snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-owns="downshift-1-menu"
+    class="component"
+    role="combobox"
+    tabindex="-1"
+  >
+    <div
+      class="component l"
+    >
+      <div
+        class="component l block hasRightAddons"
+      >
+        <div
+          class="field inner"
+        >
+          <div
+            class="inputWrapper"
+          >
+            <div
+              class="input"
+            >
+              <div
+                class="contentWrapper"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="downshift-1-menu"
+                  aria-labelledby="downshift-1-label"
+                  class="input"
+                  id="downshift-0-input"
+                  tabindex="0"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="addons rightAddons addons addons-size-l"
+          >
+            <span
+              class="arrow"
+            />
+          </div>
+        </div>
+        
+      </div>
+    </div>
+    <div
+      aria-labelledby="downshift-1-label"
+      class="listWrapper"
+      id="downshift-1-menu"
+      role="listbox"
+    />
+  </div>
+</div>
+`;
+
+exports[`SelectWithTags Display tests should match snapshot with selected tags 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-owns="downshift-3-menu"
+    class="component"
+    role="combobox"
+    tabindex="-1"
+  >
+    <div
+      class="component l"
+    >
+      <div
+        class="component l block hasRightAddons"
+      >
+        <div
+          class="field inner filled"
+        >
+          <div
+            class="inputWrapper"
+          >
+            <div
+              class="input"
+            >
+              <div
+                class="contentWrapper hasTags"
+              >
+                <button
+                  class="component xs checked tag"
+                  type="button"
+                >
+                  <span>
+                    <span
+                      class="tagContentWrap"
+                    >
+                      H
+                      <svg
+                        class="tagCross"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M10.586 12L8 14.5 9.5 16l2.5-2.586L14.5 16l1.5-1.5-2.586-2.5L16 9.5 14.5 8 12 10.586 9.5 8 8 9.5l2.586 2.5z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <button
+                  class="component xs checked tag"
+                  type="button"
+                >
+                  <span>
+                    <span
+                      class="tagContentWrap"
+                    >
+                      Li
+                      <svg
+                        class="tagCross"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M10.586 12L8 14.5 9.5 16l2.5-2.586L14.5 16l1.5-1.5-2.586-2.5L16 9.5 14.5 8 12 10.586 9.5 8 8 9.5l2.586 2.5z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <button
+                  class="component xs checked tag"
+                  type="button"
+                >
+                  <span>
+                    <span
+                      class="tagContentWrap"
+                    >
+                      Na
+                      <svg
+                        class="tagCross"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M10.586 12L8 14.5 9.5 16l2.5-2.586L14.5 16l1.5-1.5-2.586-2.5L16 9.5 14.5 8 12 10.586 9.5 8 8 9.5l2.586 2.5z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="downshift-3-menu"
+                  aria-labelledby="downshift-3-label"
+                  class="input"
+                  id="downshift-2-input"
+                  placeholder=""
+                  tabindex="0"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="addons rightAddons addons addons-size-l"
+          >
+            <span
+              class="arrow"
+            />
+          </div>
+        </div>
+        
+      </div>
+    </div>
+    <div
+      aria-labelledby="downshift-3-label"
+      class="listWrapper"
+      id="downshift-3-menu"
+      role="listbox"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/select-with-tags/src/component.stories.mdx b/packages/select-with-tags/src/component.stories.mdx
@@ -0,0 +1,112 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { text, select, boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { Container, Row, Col } from 'storybook/blocks/grid';
+import { ComponentHeader } from 'storybook/blocks/component-header';
+
+import { Tag } from '@alfalab/core-components-tag';
+import { Input } from '@alfalab/core-components-input';
+import { MaskedInput } from '@alfalab/core-components-masked-input';
+import { Arrow, Option } from '@alfalab/core-components-select';
+
+import { SelectWithTags } from './component';
+
+export const options = [
+    { key: '1', content: 'H', value: 'H' },
+    { key: '2', content: 'Li', value: 'Li' },
+    { key: '3', content: 'Na', value: 'Na' },
+    { key: '4', content: 'Curium', value: 'Curium' },
+    { key: '5', content: 'Berkelium', value: 'Berkelium' },
+    { key: '6', content: 'Californium', value: 'Californium' },
+    { key: '7', content: 'Einsteinium', value: 'Einsteinium' },
+    { key: '8', content: 'Fermium', value: 'Fermium' },
+    { key: '9', content: 'Mendelevium', value: 'Mendelevium' },
+    { key: '10', content: 'Nobelium', value: 'Nobelium' },
+    { key: '11', content: 'Lawrencium', value: 'Lawrencium'},
+    { key: '12', content: 'Rutherfordium', value: 'Rutherfordium'},
+    { key: '13', content: 'Dubnium', value: 'Dubnium' },
+    { key: '14', content: 'Seaborgium', value: 'Seaborgium'},
+    { key: '15', content: 'Bohrium', value: 'Bohrium' },
+];
+
+export const matchOption = (option, inputValue) =>
+    option.content.toLowerCase().includes((inputValue || '').toLowerCase());
+
+
+<Meta
+    title='Компоненты'
+    component={SelectWithTags}
+    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+/>
+
+
+<!-- Canvas -->
+
+<Story name='SelectWithTags'>
+    {React.createElement(() => {
+        const [value, setValue] = React.useState('');
+        const [selected, setSelected] = React.useState([]);
+        const handleInput = event => {
+            setValue(event.target.value);
+        };
+        const handleChange = React.useCallback(({ selectedMultiple }) => {
+            setSelected(selectedMultiple);
+        }, [])
+        return (
+            <div style={{width: '375px'}}>
+                <SelectWithTags
+                    options={options}
+                    block={boolean('block', true)}
+                    size={select('size', ['s', 'm', 'l'], 'l')}
+                    disabled={boolean('disabled', false)}
+                    error={text('error', '')}
+                    success={boolean('success', false)}
+                    hint={text('hint', '')}
+                    Arrow={boolean('Arrow', false) ? Arrow : undefined}
+                    circularNavigation={boolean('circularNavigation', false)}
+                    placeholder={text('placeholder', 'Элемент')}
+                    label={text('label', '')}
+                    autocomplete={boolean('autocomplete', true)}
+                    onInput={handleInput}
+                    value={value}
+                    onChange={handleChange}
+                    selected={selected}
+                />
+            </div>
+        );
+    })}
+</Story>
+
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='SelectWithTags'
+    stage={1}
+/>
+
+```tsx
+import { SelectWithTags } from '@alfalab/core-components-select-with-tags';
+```
+
+<Preview>
+    {React.createElement(() => {
+        const [value, setValue] = React.useState('');
+        const handleInput = event => {
+            setValue(event.target.value);
+        };
+        return (
+            <div style={{width: '375px'}}>
+                <SelectWithTags
+                    options={options}
+                    onInput={handleInput}
+                    value={value}
+                    autocomplete={true}
+                    block={true}
+                />
+            </div>
+        );
+    })}
+</Preview>
+
+<Props of={SelectWithTags} />