[C-3362] Port Popup component to Harmony #6685
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Meta, Title, Description, Primary, Controls } from '@storybook/blocks' | ||
|
|
||
| import { Heading, RelatedComponents } from 'storybook/components' | ||
|
|
||
| import * as PopupStories from './Popup.stories' | ||
|
|
||
| <Meta of={PopupStories} /> | ||
|
|
||
| <Title /> | ||
|
|
||
| - [Overview](#overview) | ||
| - [Props](#props) | ||
| - [Use cases and examples](#use-cases-and-examples) | ||
|
|
||
| <Heading> | ||
| ## Overview | ||
| <Description /> | ||
| </Heading> | ||
| <Primary /> | ||
|
|
||
| ## Props | ||
|
|
||
| <Controls /> | ||
|
|
||
| ## Use cases and examples | ||
|
|
||
| - Use Popup alongside components that require user interaction (hover, click) to summon additional more complex interaction | ||
| - Configure a header and dismiss button to show users how to dismiss the Popup | ||
|
|
||
| ## Related components | ||
|
|
||
| <RelatedComponents componentNames={['Flex', 'Box']} /> |
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,47 @@ | ||||||
| .root { | ||||||
| font-family: var(--harmony-font-family); | ||||||
| position: absolute; | ||||||
| } | ||||||
|
|
||||||
| .popup { | ||||||
| background-color: var(--harmony-white); | ||||||
| border-radius: var(--harmony-unit-2); | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| border: 1px solid var(--harmony-neutral-light-7); | ||||||
|
There was a problem hiding this comment.
Suggested change
we use a different system for neutrals now, it's |
||||||
| box-shadow: 0 16px 20px 0 var(--harmony-tile-shadow-1-alt); | ||||||
|
There was a problem hiding this comment. i don't think this exists, ideally we'd use one of the harmony shadow values here https://www.figma.com/file/ZmEdR1D99gglpBgiZDqWrr/%F0%9F%A7%B1-Foundations?node-id=1929%3A4771&mode=dev |
||||||
| user-select: none; | ||||||
| } | ||||||
|
|
||||||
| .header { | ||||||
| border: none; | ||||||
| margin-bottom: var(--harmony-unit-1); | ||||||
|
There was a problem hiding this comment. i think we generally prefer semantic spacing when possible so like |
||||||
| padding-bottom: 0; | ||||||
| display: flex; | ||||||
| align-items: center; | ||||||
| justify-content: center; | ||||||
| } | ||||||
|
|
||||||
| .header::after { | ||||||
| content: ''; | ||||||
| width: var(--harmony-unit-2); | ||||||
|
|
||||||
| padding-right: var(--harmony-unit-half); | ||||||
|
|
||||||
| } | ||||||
|
|
||||||
| .header.noAfter::after { | ||||||
| content: none !important; | ||||||
|
There was a problem hiding this comment. do we need the !important? There was a problem hiding this comment. all this css was copied from the existing one - so i'm not totally sure. want to keep this PR to as much of a consistent "port" as i can so i can drop in/replace the other usages within audius.co, but I'll come back to this...! |
||||||
| } | ||||||
|
|
||||||
| .title { | ||||||
| margin: 0 auto; | ||||||
| justify-self: center; | ||||||
| font-size: var(--harmony-font-m); | ||||||
| font-weight: var(--harmony-font-bold); | ||||||
| color: var(--harmony-neutral); | ||||||
| } | ||||||
|
|
||||||
| .iconRemove { | ||||||
| cursor: pointer; | ||||||
| height: var(--harmony-unit-6); | ||||||
|
There was a problem hiding this comment. i think you can set this on the icon itself via There was a problem hiding this comment. actually this isn't used anywhere, so delete? |
||||||
| width: var(--harmony-unit-6); | ||||||
| padding-left: var(--harmony-unit-half); | ||||||
| transition: all var(--harmony-quick); | ||||||
| } | ||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { useRef, useState } from 'react' | ||
|
|
||
| import type { Meta, StoryObj } from '@storybook/react' | ||
|
|
||
| import { Button } from 'components/button' | ||
| import { Box } from 'components/layout/Box' | ||
| import { Paper } from 'components/layout/Paper' | ||
| import { Text } from 'components/text' | ||
|
|
||
| import { Popup } from './Popup' | ||
| import type { PopupProps } from './types' | ||
|
|
||
| const Render = (props: PopupProps) => { | ||
| const anchorRef = useRef<HTMLButtonElement | null>(null) | ||
| const [isVisible, setIsVisible] = useState(false) | ||
|
|
||
| return ( | ||
| <Button ref={anchorRef} onClick={() => setIsVisible(!isVisible)}> | ||
| <Text>Click Me</Text> | ||
| <Popup | ||
| {...props} | ||
| anchorRef={anchorRef} | ||
| isVisible={isVisible} | ||
| onClose={() => setIsVisible(false)} | ||
| > | ||
| <Paper> | ||
| <Box p='l'> | ||
| <Text>Popup Content</Text> | ||
| </Box> | ||
| </Paper> | ||
| </Popup> | ||
| </Button> | ||
| ) | ||
| } | ||
|
|
||
| const meta: Meta<typeof Popup> = { | ||
| title: 'Layout/Popup [beta]', | ||
| component: Popup, | ||
| parameters: { | ||
| controls: { | ||
| include: [ | ||
| 'anchorRef', | ||
| 'isVisible', | ||
| 'anchorOrigin', | ||
| 'transformOrigin', | ||
| 'dismissOnMouseLeave', | ||
| 'showHeader', | ||
| 'title', | ||
| 'hideCloseButton', | ||
| 'zIndex', | ||
| 'containerRef', | ||
| 'onClose', | ||
| 'onAfterClose', | ||
| 'checkIfClickInside' | ||
| ] | ||
| } | ||
| }, | ||
| render: Render | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof Popup> | ||
|
There was a problem hiding this comment. would be good to have some more stories here with different props applied, but can leave it for later |
||
|
|
||
| export const Default: Story = { args: {} } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do we need this?