From fa42f954d83a1ac6b5788ca67642a0dd4cd48995 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Thu, 29 Oct 2020 10:26:15 +0100 Subject: [PATCH 01/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20JSX=20to=20TSX?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/{Popover.stories.jsx => Popover.stories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/storybook-react/stories/{Popover.stories.jsx => Popover.stories.tsx} (100%) diff --git a/apps/storybook-react/stories/Popover.stories.jsx b/apps/storybook-react/stories/Popover.stories.tsx similarity index 100% rename from apps/storybook-react/stories/Popover.stories.jsx rename to apps/storybook-react/stories/Popover.stories.tsx From f2dcf48646bf313c367d2354e10757315d82cefe Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Thu, 29 Oct 2020 14:51:29 +0100 Subject: [PATCH 02/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Popover=20default=20?= =?UTF-8?q?story=20with=20controls?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/Popover.stories.tsx | 460 +++++++++--------- libraries/core-react/src/Popover/Popover.tsx | 87 ++-- libraries/core-react/src/Popover/index.ts | 3 +- libraries/core-react/src/index.ts | 2 +- 4 files changed, 264 insertions(+), 288 deletions(-) diff --git a/apps/storybook-react/stories/Popover.stories.tsx b/apps/storybook-react/stories/Popover.stories.tsx index 7462b28f4f..5ebc88ffad 100644 --- a/apps/storybook-react/stories/Popover.stories.tsx +++ b/apps/storybook-react/stories/Popover.stories.tsx @@ -1,18 +1,14 @@ import React from 'react' -import { withKnobs, select, text } from '@storybook/addon-knobs' import styled from 'styled-components' import { Typography, Button, - Avatar, - Chip, - TextField, - Search, - Icon, Popover, + PopoverProps, Card, } from '@equinor/eds-core-react' -import catImg from '../images/cat.jpg' +import { action } from '@storybook/addon-actions' +import { Meta, Story } from '@storybook/react' const { PopoverAnchor, PopoverTitle, PopoverContent } = Popover const { CardActions } = Card @@ -36,10 +32,61 @@ const TextWrapper = styled.div` export default { title: 'Components/Popover', component: Popover, - decorators: [withKnobs], + argTypes: { + placement: { + control: { + type: 'select', + options: [ + 'topLeft', + 'top', + 'topRight', + 'rightTop', + 'right', + 'rightBottom', + 'bottomLeft', + 'bottom', + 'bottomRight', + 'leftTop', + 'left', + 'leftBottom', + ], + }, + }, + }, +} as Meta + +const handleClick = (e) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + action('handleClick')(e.target.textContent) } -export function Placement() { +export const Default: Story = (args) => { + const [active, setActive] = React.useState(false) + const handleToggle = () => { + setActive(!active) + } + return ( +
+ + + + + Title + + Content + + + + + + +
+ ) +} + +export const Placements: Story = () => { const [active, setActive] = React.useState(null) const handleClick = (event) => { @@ -64,7 +111,7 @@ export function Placement() { ) return ( - + <> Placement @@ -73,161 +120,171 @@ export function Placement() { inside the PopoverAnchor tag - - Top - - - - - - - - - - - - - - - - - - - - - +
+ + Top + + + + + + + + + + + + + + + + + + + + + - - Bottom - - - - - - - - - - - - - - - - - - - - - + + Bottom + + + + + + + + + + + + + + + + + + + + + - - Left - - - - - - - - - - - - - - - - - - - - - - - Right - - - - - - - - - - - - - - - - - - - - - - + + Left + + + + + + + + + + + + + + + + + + + + + + + Right + + + + + + + + + + + + + + + + + + + + + +
+ ) } -export function ActivationTypes() { +export const ActivationTypes: Story = () => { const [active, setActive] = React.useState(null) const handleClick = (event) => { @@ -298,86 +355,3 @@ export function ActivationTypes() { ) } - -const ANCHOR_CHOICES = { - button: , - avatar: , - chip: Chip, - search: ( - - ), - textfield: ( - - ), - typography: Typography, - icon: , -} - -const ACTIONS_CHOICES = { - none: '', - default: ( - - - - - ), - alignRight: ( - - - - - ), - meta: ( - - - - ), -} - -export const WithKnobs = () => { - const anchor = select('Anchor', Object.keys(ANCHOR_CHOICES), 'avatar') - const title = text('Title', 'Title') - const content = text('Content', 'Content') - const action = select('Actions', Object.keys(ACTIONS_CHOICES), 'default') - const placement = select( - 'Placement', - [ - 'topLeft', - 'top', - 'topRight', - 'rightTop', - 'right', - 'rightBottom', - 'bottomLeft', - 'bottom', - 'bottomRight', - 'leftTop', - 'left', - 'leftBottom', - ], - 'bottom', - ) - - return ( - - - With knobs - - - - {title} - {ANCHOR_CHOICES[anchor]} - - {content} - - {ACTIONS_CHOICES[action]} - - - - ) -} diff --git a/libraries/core-react/src/Popover/Popover.tsx b/libraries/core-react/src/Popover/Popover.tsx index 0526e893a0..a9c10e653c 100644 --- a/libraries/core-react/src/Popover/Popover.tsx +++ b/libraries/core-react/src/Popover/Popover.tsx @@ -25,8 +25,8 @@ type PopoverSplit = { childArray: ReactNode[] } -export type Props = { - /* Popover placement relative to anchor */ +export type PopoverProps = { + /** Popover placement relative to anchor */ placement?: | 'topLeft' | 'top' @@ -47,53 +47,54 @@ export type Props = { } & HTMLAttributes // Controller Component for PopoverItem -export const Popover = forwardRef(function Popover( - { open, children, placement = 'bottom', ...rest }, - ref, -) { - const props = { - ...rest, - placement, - ref, - } - if (!children) { - return - } - const anchorRef = useRef(null) +export const Popover = forwardRef( + function Popover({ open, children, placement = 'bottom', ...rest }, ref) { + const props = { + ...rest, + placement, + ref, + } + if (!children) { + return + } + const anchorRef = useRef(null) - const { anchorElement, childArray } = React.Children.toArray(children).reduce( - (acc: PopoverSplit, child): PopoverSplit => { - if (isValidElement(child) && child.type === PopoverAnchor) { + const { anchorElement, childArray } = React.Children.toArray( + children, + ).reduce( + (acc: PopoverSplit, child): PopoverSplit => { + if (isValidElement(child) && child.type === PopoverAnchor) { + return { + ...acc, + anchorElement: child, + } + } return { ...acc, - anchorElement: child, + childArray: [...acc.childArray, child], } - } - return { - ...acc, - childArray: [...acc.childArray, child], - } - }, - { anchorElement: null, childArray: [] }, - ) + }, + { anchorElement: null, childArray: [] }, + ) - if (open && anchorRef.current) { - anchorRef.current.focus() - } + if (open && anchorRef.current) { + anchorRef.current.focus() + } - return ( - - - {anchorElement} - + return ( + + + {anchorElement} + - {open && ( - - {childArray} - - )} - - ) -}) + {open && ( + + {childArray} + + )} + + ) + }, +) // Popover.displayName = 'eds-popover' diff --git a/libraries/core-react/src/Popover/index.ts b/libraries/core-react/src/Popover/index.ts index f49821e67f..bed9e72b51 100644 --- a/libraries/core-react/src/Popover/index.ts +++ b/libraries/core-react/src/Popover/index.ts @@ -1,4 +1,4 @@ -import { Popover as BaseComponent } from './Popover' +import { Popover as BaseComponent, PopoverProps as Props } from './Popover' import { PopoverTitle } from './PopoverTitle' import { PopoverAnchor } from './PopoverAnchor' import { PopoverContent } from './PopoverContent' @@ -19,3 +19,4 @@ Popover.PopoverContent = PopoverContent Popover.PopoverItem = PopoverItem export { Popover } +export type PopoverProps = Props diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts index 46d6d94ddf..1bc8546fd5 100644 --- a/libraries/core-react/src/index.ts +++ b/libraries/core-react/src/index.ts @@ -20,7 +20,7 @@ export * from './Search' export { Slider } from './Slider' export { Tooltip } from './Tooltip' export { Snackbar } from './Snackbar' -export { Popover } from './Popover' +export * from './Popover' export * from './Banner' export { Radio, Checkbox, Switch } from './SelectionControls' export * from './Progress' From 9fe91e05d643e0f513fc5da87bfcb7b180401f01 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Thu, 29 Oct 2020 15:02:34 +0100 Subject: [PATCH 03/10] =?UTF-8?q?=F0=9F=94=A5=20PopoverItem=20removed=20fr?= =?UTF-8?q?om=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PopoverItem is just for internal use, not needed elsewhere --- libraries/core-react/src/Popover/Popover.tsx | 2 +- libraries/core-react/src/Popover/PopoverItem.tsx | 2 +- libraries/core-react/src/Popover/index.ts | 3 --- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/libraries/core-react/src/Popover/Popover.tsx b/libraries/core-react/src/Popover/Popover.tsx index a9c10e653c..258e68d2d4 100644 --- a/libraries/core-react/src/Popover/Popover.tsx +++ b/libraries/core-react/src/Popover/Popover.tsx @@ -42,7 +42,7 @@ export type PopoverProps = { | 'leftBottom' /** On Close function */ onClose?: () => void - /** Open activates */ + /** Open activates Popover */ open?: boolean } & HTMLAttributes diff --git a/libraries/core-react/src/Popover/PopoverItem.tsx b/libraries/core-react/src/Popover/PopoverItem.tsx index 4fdd63ad61..e4a6518cd6 100644 --- a/libraries/core-react/src/Popover/PopoverItem.tsx +++ b/libraries/core-react/src/Popover/PopoverItem.tsx @@ -98,7 +98,7 @@ type Props = { | 'leftBottom' /** On Close function */ onClose?: () => void - /** Open activates */ + /** Open activates Popover */ anchorRef: React.MutableRefObject } & HTMLAttributes diff --git a/libraries/core-react/src/Popover/index.ts b/libraries/core-react/src/Popover/index.ts index bed9e72b51..89140018b7 100644 --- a/libraries/core-react/src/Popover/index.ts +++ b/libraries/core-react/src/Popover/index.ts @@ -2,13 +2,11 @@ import { Popover as BaseComponent, PopoverProps as Props } from './Popover' import { PopoverTitle } from './PopoverTitle' import { PopoverAnchor } from './PopoverAnchor' import { PopoverContent } from './PopoverContent' -import { PopoverItem } from './PopoverItem' type PopoverTypes = typeof BaseComponent & { PopoverTitle: typeof PopoverTitle PopoverAnchor: typeof PopoverAnchor PopoverContent: typeof PopoverContent - PopoverItem: typeof PopoverItem } const Popover = BaseComponent as PopoverTypes @@ -16,7 +14,6 @@ const Popover = BaseComponent as PopoverTypes Popover.PopoverTitle = PopoverTitle Popover.PopoverAnchor = PopoverAnchor Popover.PopoverContent = PopoverContent -Popover.PopoverItem = PopoverItem export { Popover } export type PopoverProps = Props From e882354e330e33a1087f683033ad89bca8a4fd66 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Thu, 29 Oct 2020 15:10:42 +0100 Subject: [PATCH 04/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Rename=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- libraries/core-react/src/Popover/PopoverItem.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libraries/core-react/src/Popover/PopoverItem.tsx b/libraries/core-react/src/Popover/PopoverItem.tsx index e4a6518cd6..43b2caa558 100644 --- a/libraries/core-react/src/Popover/PopoverItem.tsx +++ b/libraries/core-react/src/Popover/PopoverItem.tsx @@ -81,7 +81,7 @@ const StyledCloseButton = styled(Button)` } ` -type Props = { +type PopoverItemProps = { /* Popover placement relative to anchor */ placement?: | 'topLeft' @@ -98,12 +98,12 @@ type Props = { | 'leftBottom' /** On Close function */ onClose?: () => void - /** Open activates Popover */ + /** Anchor reference */ anchorRef: React.MutableRefObject } & HTMLAttributes -export const PopoverItem = forwardRef( - function EdsPopoverItem( +export const PopoverItem = forwardRef( + function PopoverItem( { children, onClose = () => {}, From 92b18a987c3f1f3c79113f6d7bb0719e25a99943 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Thu, 29 Oct 2020 16:10:10 +0100 Subject: [PATCH 05/10] =?UTF-8?q?=F0=9F=94=A5=20Removed=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Want to fix these errors instead --- .../stories/Popover.stories.tsx | 322 +++++++++--------- 1 file changed, 153 insertions(+), 169 deletions(-) diff --git a/apps/storybook-react/stories/Popover.stories.tsx b/apps/storybook-react/stories/Popover.stories.tsx index 5ebc88ffad..58cf6680e9 100644 --- a/apps/storybook-react/stories/Popover.stories.tsx +++ b/apps/storybook-react/stories/Popover.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { MouseEvent } from 'react' import styled from 'styled-components' import { Typography, @@ -7,7 +7,6 @@ import { PopoverProps, Card, } from '@equinor/eds-core-react' -import { action } from '@storybook/addon-actions' import { Meta, Story } from '@storybook/react' const { PopoverAnchor, PopoverTitle, PopoverContent } = Popover @@ -55,11 +54,6 @@ export default { }, } as Meta -const handleClick = (e) => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - action('handleClick')(e.target.textContent) -} - export const Default: Story = (args) => { const [active, setActive] = React.useState(false) const handleToggle = () => { @@ -89,7 +83,7 @@ export const Default: Story = (args) => { export const Placements: Story = () => { const [active, setActive] = React.useState(null) - const handleClick = (event) => { + const handleClick = (event: MouseEvent) => { setActive(event.currentTarget.id) } @@ -111,7 +105,7 @@ export const Placements: Story = () => { ) return ( - <> + Placement @@ -120,167 +114,157 @@ export const Placements: Story = () => { inside the PopoverAnchor tag -
- - Top - - - - - - - - - - - - - - - - - - - - - + + Top + + + + + + + + + + + + + + + + + + + + + - - Bottom - - - - - - - - - - - - - - - - - - - - - + + Bottom + + + + + + + + + + + + + + + + + + + + + - - Left - - - - - - - - - - - - - - - - - - - - - - - Right - - - - - - - - - - - - - - - - - - - - - -
- + + Left + + + + + + + + + + + + + + + + + + + + + + + Right + + + + + + + + + + + + + + + + + + + + + + ) } @@ -291,7 +275,7 @@ export const ActivationTypes: Story = () => { setActive(event.currentTarget.id) } - const handleHover = (event) => { + const handleHover = (event: MouseEvent) => { const current = event.currentTarget.id setTimeout(() => { setActive(current) From 1992acb1cc8a263601ecaaf610978523ac8ee1fd Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Fri, 30 Oct 2020 08:58:20 +0100 Subject: [PATCH 06/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Type=20React.Synthet?= =?UTF-8?q?icEvent=20(generic=20for=20events)=20on=20event=20handlers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cleared lint warnings --- apps/storybook-react/stories/Popover.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/storybook-react/stories/Popover.stories.tsx b/apps/storybook-react/stories/Popover.stories.tsx index 58cf6680e9..6cf0e2c8f4 100644 --- a/apps/storybook-react/stories/Popover.stories.tsx +++ b/apps/storybook-react/stories/Popover.stories.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent } from 'react' +import React from 'react' import styled from 'styled-components' import { Typography, @@ -83,7 +83,7 @@ export const Default: Story = (args) => { export const Placements: Story = () => { const [active, setActive] = React.useState(null) - const handleClick = (event: MouseEvent) => { + const handleClick = (event: React.SyntheticEvent) => { setActive(event.currentTarget.id) } @@ -271,11 +271,11 @@ export const Placements: Story = () => { export const ActivationTypes: Story = () => { const [active, setActive] = React.useState(null) - const handleClick = (event) => { + const handleClick = (event: React.SyntheticEvent) => { setActive(event.currentTarget.id) } - const handleHover = (event: MouseEvent) => { + const handleHover = (event: React.SyntheticEvent) => { const current = event.currentTarget.id setTimeout(() => { setActive(current) From 9972184e0df2bd64add4ab1a4e9c8b9f2d6cab5b Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Fri, 30 Oct 2020 09:33:54 +0100 Subject: [PATCH 07/10] =?UTF-8?q?=F0=9F=9A=A8=20Fixed=20linter=20warnings?= =?UTF-8?q?=20in=20story?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/storybook-react/stories/Popover.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/storybook-react/stories/Popover.stories.tsx b/apps/storybook-react/stories/Popover.stories.tsx index 6cf0e2c8f4..1ba02b1134 100644 --- a/apps/storybook-react/stories/Popover.stories.tsx +++ b/apps/storybook-react/stories/Popover.stories.tsx @@ -81,14 +81,14 @@ export const Default: Story = (args) => { } export const Placements: Story = () => { - const [active, setActive] = React.useState(null) + const [active, setActive] = React.useState('') const handleClick = (event: React.SyntheticEvent) => { setActive(event.currentTarget.id) } const handleClose = () => { - setActive(null) + setActive('') } const Content = () => ( @@ -269,7 +269,7 @@ export const Placements: Story = () => { } export const ActivationTypes: Story = () => { - const [active, setActive] = React.useState(null) + const [active, setActive] = React.useState('') const handleClick = (event: React.SyntheticEvent) => { setActive(event.currentTarget.id) @@ -283,7 +283,7 @@ export const ActivationTypes: Story = () => { } const handleClose = () => { - setActive(null) + setActive('') } const Content = () => ( From d0f10db5ea322a5f30098ee1f00d3c9d89dc9892 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Fri, 30 Oct 2020 09:38:45 +0100 Subject: [PATCH 08/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Open=20Popover=20via?= =?UTF-8?q?=20control=20AND=20anchor=20(story)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/storybook-react/stories/Popover.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook-react/stories/Popover.stories.tsx b/apps/storybook-react/stories/Popover.stories.tsx index 1ba02b1134..97e17397fd 100644 --- a/apps/storybook-react/stories/Popover.stories.tsx +++ b/apps/storybook-react/stories/Popover.stories.tsx @@ -61,7 +61,7 @@ export const Default: Story = (args) => { } return (
- + @@ -61,7 +64,7 @@ describe('Popover', () => { expect(arrow).toHaveStyleRule('right', `${topRight.arrowRight}`) expect(arrow).toHaveStyleRule('bottom', `${topRight.arrowBottom}`) }) - it('Has provided necessary props', () => { + it('Has provided necessary PopoverProps', () => { const placement = 'topRight' const { queryByText } = render() expect(queryByText(placement)).toBeDefined() From 9df2f09ea1ce4472190d310e13dcb4dbddf5112b Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Fri, 30 Oct 2020 14:27:03 +0100 Subject: [PATCH 10/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Export=20merged=20ty?= =?UTF-8?q?pes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/storybook-react/stories/Popover.stories.tsx | 6 ++++++ libraries/core-react/src/Popover/index.ts | 9 ++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/apps/storybook-react/stories/Popover.stories.tsx b/apps/storybook-react/stories/Popover.stories.tsx index 97e17397fd..0ec12fe2a8 100644 --- a/apps/storybook-react/stories/Popover.stories.tsx +++ b/apps/storybook-react/stories/Popover.stories.tsx @@ -31,6 +31,12 @@ const TextWrapper = styled.div` export default { title: 'Components/Popover', component: Popover, + subcomponents: { + PopoverAnchor, + PopoverTitle, + PopoverContent, + CardActions, + }, argTypes: { placement: { control: { diff --git a/libraries/core-react/src/Popover/index.ts b/libraries/core-react/src/Popover/index.ts index 89140018b7..82f3e3c823 100644 --- a/libraries/core-react/src/Popover/index.ts +++ b/libraries/core-react/src/Popover/index.ts @@ -1,19 +1,18 @@ -import { Popover as BaseComponent, PopoverProps as Props } from './Popover' +import { Popover as BaseComponent } from './Popover' import { PopoverTitle } from './PopoverTitle' import { PopoverAnchor } from './PopoverAnchor' import { PopoverContent } from './PopoverContent' -type PopoverTypes = typeof BaseComponent & { +type PopoverProps = typeof BaseComponent & { PopoverTitle: typeof PopoverTitle PopoverAnchor: typeof PopoverAnchor PopoverContent: typeof PopoverContent } -const Popover = BaseComponent as PopoverTypes +const Popover = BaseComponent as PopoverProps Popover.PopoverTitle = PopoverTitle Popover.PopoverAnchor = PopoverAnchor Popover.PopoverContent = PopoverContent -export { Popover } -export type PopoverProps = Props +export { Popover, PopoverProps }