From ad717faeaa969cf8a4169e693a73f3dda29174c9 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Wed, 24 Jun 2020 12:11:58 -0300 Subject: [PATCH 1/3] feature - Select: allow sublabel --- .storybook/webpack.config.js | 2 +- src/inputs/Select/dai.png | Bin 0 -> 4203 bytes src/inputs/Select/gnosis.png | Bin 0 -> 6524 bytes src/inputs/Select/index.tsx | 34 +++++++++++++++++++++++---- src/inputs/Select/select.stories.tsx | 15 +++++++----- src/typings/index.d.ts | 1 + webpack.config.js | 2 +- 7 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 src/inputs/Select/dai.png create mode 100644 src/inputs/Select/gnosis.png diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index f9a39f44..cc490772 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -24,7 +24,7 @@ module.exports = ({ config }) => { }); config.module.rules.push({ - test: /\.(svg)$/, + test: /\.(svg|png|jpg)$/i, use: [ { loader: 'url-loader', diff --git a/src/inputs/Select/dai.png b/src/inputs/Select/dai.png new file mode 100644 index 0000000000000000000000000000000000000000..06cff708fcb13876f5eefc241464d1f5a828da7b GIT binary patch literal 4203 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 literal 0 HcmV?d00001 diff --git a/src/inputs/Select/gnosis.png b/src/inputs/Select/gnosis.png new file mode 100644 index 0000000000000000000000000000000000000000..13b3380e54ba91039495ba80a2f75f2624444e0f GIT binary patch literal 6524 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 props.theme.colors.separator}; border-radius: 5px; height: 56px; width: 140px; @@ -22,12 +25,26 @@ const StyledSelect = styled(SelectMUI)` } .MuiSelect-selectMenu { - font-family: ${(p) => p.theme.fonts.fontFamily}; + font-family: ${(props) => props.theme.fonts.fontFamily}; + } + + &.MuiInput-underline:hover:not(.Mui-disabled):before { + border-bottom: 2px solid ${(props) => props.theme.colors.primary}; + } + &.MuiInput-underline:after { + border-bottom: 2px solid ${(props) => props.theme.colors.primary}; } `; +export type SelectItem = { + id: string; + title?: string; + label: string; + iconUrl?: string; +}; + type Props = { - items: Array<{ id: string; label: string; iconUrl?: string }>; + items: Array; activeItemId: string; onItemClick: (id: string) => void; id?: string; @@ -64,7 +81,16 @@ function Select({ items, activeItemId, onItemClick, id, ...rest }: Props) { return ( {i.iconUrl && } - {i.label} +
+ {i.title && ( + + Title + + )} + + {i.label} + +
); })} diff --git a/src/inputs/Select/select.stories.tsx b/src/inputs/Select/select.stories.tsx index ae7f6492..763697c5 100644 --- a/src/inputs/Select/select.stories.tsx +++ b/src/inputs/Select/select.stories.tsx @@ -1,6 +1,8 @@ import React, { useState } from 'react'; -import Select from './'; +import gnoIcon from './gnosis.png'; +import daiIcon from './dai.png'; +import Select, { SelectItem } from './'; export default { title: 'Inputs/Select', @@ -10,12 +12,13 @@ export default { } }; -const items = [ - { id: '1', label: 'ETH' }, - { id: '2', label: 'GNO' } -]; - export const select = () => { + const items: Array = [ + { id: '1', label: 'DAI asd asd ', title: 'Title', iconUrl: daiIcon }, + { id: '2', label: 'GNO', iconUrl: gnoIcon }, + { id: '3', label: 'without icon' } + ]; + const [activeItemId, setActiveItemId] = useState(''); return (