roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-16 09:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

48
packages/design-system/atoms/popover/Popover.stories.tsx
View file

@ -3,32 +3,32 @@ import * as React from 'react';
import { Popover as PopoverComponent } from './Popover';
export default {
title: 'Atoms/Popover',
argTypes: {
canDefocus: { control: 'boolean' },
},
args: {
canDefocus: true,
},
title: 'Atoms/Popover',
argTypes: {
canDefocus: { control: 'boolean' },
},
args: {
canDefocus: true,
},
};
export const Popover = ({ canDefocus }) => {
const [isOpen, setIsOpen] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(false);
return (
<div style={{ padding: 50 }}>
<Button size="small" onClick={() => setIsOpen(!isOpen)}>
{!isOpen ? 'Open' : 'Close'} me!
</Button>
<PopoverComponent
position="top right"
active={isOpen}
onExit={() => setIsOpen(false)}
canDefocus={canDefocus}
headContent={<>Hello c:</>}
>
stuff
</PopoverComponent>
</div>
);
return (
<div style={{ padding: 50 }}>
<Button size="small" onClick={() => setIsOpen(!isOpen)}>
{!isOpen ? 'Open' : 'Close'} me!
</Button>
<PopoverComponent
position="top right"
active={isOpen}
onExit={() => setIsOpen(false)}
canDefocus={canDefocus}
headContent={<>Hello c:</>}
>
stuff
</PopoverComponent>
</div>
);
};

134
packages/design-system/atoms/popover/Popover.styled.ts
View file

@ -4,87 +4,87 @@ import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
type PopoverStyledProps = {
active: boolean;
preferredWidth?: number;
active: boolean;
preferredWidth?: number;
};
export const PopoverBase = styled.div<PopoverStyledProps>`
box-sizing: border-box;
position: absolute;
background-color: ${palette.taupe100};
padding: 5px;
border: 2px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
z-index: 10;
transition: opacity ${transitions.out2in}s ease-in,
transform ${transitions.out2in}s ease-in;
min-width: ${(props) => props.preferredWidth || 320}px;
max-width: 100vw;
${(props) =>
!props.active &&
css`
transform: translateY(-2vh);
opacity: 0;
pointer-events: none;
`}
${onSmallScreen(
css`
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-width: unset;
width: 100vw;
height: 100vh;
`
)};
box-sizing: border-box;
position: absolute;
background-color: ${palette.taupe100};
padding: 5px;
border: 2px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
z-index: 10;
transition: opacity ${transitions.out2in}s ease-in,
transform ${transitions.out2in}s ease-in;
min-width: ${(props) => props.preferredWidth || 320}px;
max-width: 100vw;
${(props) =>
!props.active &&
css`
transform: translateY(-2vh);
opacity: 0;
pointer-events: none;
`}
${onSmallScreen(
css`
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-width: unset;
width: 100vw;
height: 100vh;
`
)};
`;
export const DefocusHandler = styled.div<PopoverStyledProps>`
background-color: rgba(0, 0, 0, 0.01);
position: fixed;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
${(props) =>
!props.active &&
css`
display: none;
pointer-events: none;
`}
background-color: rgba(0, 0, 0, 0.01);
position: fixed;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
${(props) =>
!props.active &&
css`
display: none;
pointer-events: none;
`}
`;
export const PopoverHead = styled.div`
display: flex;
align-items: center;
display: flex;
align-items: center;
`;
export const PopoverHeadCloser = styled.div`
flex: 0;
font-size: 2em;
cursor: pointer;
margin-right: 10px;
border-radius: 2em;
min-width: 1.4em;
height: 1.4em;
display: flex;
align-items: center;
justify-content: center;
${onTablet(
css`
display: none;
`
)}
flex: 0;
font-size: 2em;
cursor: pointer;
margin-right: 10px;
border-radius: 2em;
min-width: 1.4em;
height: 1.4em;
display: flex;
align-items: center;
justify-content: center;
${onTablet(
css`
display: none;
`
)}
&:hover {
background: rgba(0, 0, 0, 0.1);
}
&:hover {
background: rgba(0, 0, 0, 0.1);
}
`;
export const PopoverContent = styled.div`
padding: 5px;
overflow-y: hidden;
padding: 5px;
overflow-y: hidden;
`;

61
packages/design-system/atoms/popover/Popover.tsx
View file

@ -2,42 +2,39 @@ import { globalOnKeyUp } from '@roleypoly/design-system/atoms/key-events';
import * as React from 'react';
import { IoMdClose } from 'react-icons/io';
import {
DefocusHandler,
PopoverBase,
PopoverContent,
PopoverHead,
PopoverHeadCloser,
DefocusHandler,
PopoverBase,
PopoverContent,
PopoverHead,
PopoverHeadCloser,
} from './Popover.styled';
type PopoverProps = {
children: () => React.ReactNode;
position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
active: boolean;
canDefocus?: boolean;
onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
headContent: React.ReactNode;
preferredWidth?: number;
children: () => React.ReactNode;
position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
active: boolean;
canDefocus?: boolean;
onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
headContent: React.ReactNode;
preferredWidth?: number;
};
export const Popover = (props: PopoverProps) => {
globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
return (
<>
<PopoverBase active={props.active} preferredWidth={props.preferredWidth}>
<PopoverHead>
<PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
<IoMdClose />
</PopoverHeadCloser>
<div>{props.headContent}</div>
</PopoverHead>
<PopoverContent>{props.children()}</PopoverContent>
</PopoverBase>
{props.canDefocus && (
<DefocusHandler
active={props.active}
onClick={() => props.onExit?.('defocus')}
/>
)}
</>
);
globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
return (
<>
<PopoverBase active={props.active} preferredWidth={props.preferredWidth}>
<PopoverHead>
<PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
<IoMdClose />
</PopoverHeadCloser>
<div>{props.headContent}</div>
</PopoverHead>
<PopoverContent>{props.children()}</PopoverContent>
</PopoverBase>
{props.canDefocus && (
<DefocusHandler active={props.active} onClick={() => props.onExit?.('defocus')} />
)}
</>
);
};