From 1ff3fe165cc284a3254d1eb3c8c926a375b2b0f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20DOREAU?= Date: Tue, 8 Sep 2020 00:13:15 +0200 Subject: [PATCH] feat(core): add single select component --- .../src/components/Select/Select.stories.tsx | 42 ++++++ .../core/src/components/Select/Select.tsx | 137 ++++++++++++++++++ packages/core/src/components/Select/index.tsx | 17 +++ .../Select/static/ClosedDropdown.tsx | 42 ++++++ .../Select/static/OpenedDropdown.tsx | 42 ++++++ 5 files changed, 280 insertions(+) create mode 100644 packages/core/src/components/Select/Select.stories.tsx create mode 100644 packages/core/src/components/Select/Select.tsx create mode 100644 packages/core/src/components/Select/index.tsx create mode 100644 packages/core/src/components/Select/static/ClosedDropdown.tsx create mode 100644 packages/core/src/components/Select/static/OpenedDropdown.tsx diff --git a/packages/core/src/components/Select/Select.stories.tsx b/packages/core/src/components/Select/Select.stories.tsx new file mode 100644 index 0000000000..5102947207 --- /dev/null +++ b/packages/core/src/components/Select/Select.stories.tsx @@ -0,0 +1,42 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Select } from '.'; + +export default { + title: 'Select', + component: Select, +}; + +const SELECT_ITEMS = [ + { + label: "test 1", + value: "test_1" + }, + { + label: "test 2", + value: "test_2" + }, + { + label: "test 3", + value: "test_3" + } +] + +export const Default = () => ( + setOpening(false)} + onClose={() => setOpening(true)} + input={} + IconComponent={() => ( + isOpen ? : + )} + MenuProps={{ + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + transformOrigin: { + vertical: 'top', + horizontal: 'left', + }, + getContentAnchorEl: null, + }} + > + {items && + items.map(item => ( + + {item.label} + + ))} + + + ); +}; diff --git a/packages/core/src/components/Select/index.tsx b/packages/core/src/components/Select/index.tsx new file mode 100644 index 0000000000..977ebc88eb --- /dev/null +++ b/packages/core/src/components/Select/index.tsx @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { SelectComponent as Select } from './Select'; diff --git a/packages/core/src/components/Select/static/ClosedDropdown.tsx b/packages/core/src/components/Select/static/ClosedDropdown.tsx new file mode 100644 index 0000000000..25ef5aaca5 --- /dev/null +++ b/packages/core/src/components/Select/static/ClosedDropdown.tsx @@ -0,0 +1,42 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { SvgIcon, makeStyles, createStyles } from '@material-ui/core'; + +const useStyles = makeStyles(() => + createStyles({ + icon: { + position: 'absolute', + right: '4px', + pointerEvents: "none" + }, + }), +); + +const ClosedDropdown = () => { + const classes = useStyles(); + return ( + + + + ); +}; + +export default ClosedDropdown; diff --git a/packages/core/src/components/Select/static/OpenedDropdown.tsx b/packages/core/src/components/Select/static/OpenedDropdown.tsx new file mode 100644 index 0000000000..b6205a6e44 --- /dev/null +++ b/packages/core/src/components/Select/static/OpenedDropdown.tsx @@ -0,0 +1,42 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { SvgIcon, makeStyles, createStyles } from '@material-ui/core'; + +const useStyles = makeStyles(() => + createStyles({ + icon: { + position: 'absolute', + right: '4px', + pointerEvents: 'none', + }, + }), +); + +const OpenedDropdown = () => { + const classes = useStyles(); + return ( + + + + ); +}; + +export default OpenedDropdown;