chore: add code formatting and linting (#952)
This commit is contained in:
@ -9,12 +9,12 @@ const StyledAuthenticationPage = styled.section`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
`
|
||||
`;
|
||||
|
||||
const PageLogoIcon = styled(Icon)`
|
||||
color: #c4c6d2;
|
||||
margin-top: -300px;
|
||||
`
|
||||
`;
|
||||
|
||||
const LoginButton = styled.button`
|
||||
${buttons.button};
|
||||
@ -27,7 +27,7 @@ const LoginButton = styled.button`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
`
|
||||
`;
|
||||
|
||||
const AuthenticationPage = ({
|
||||
onLogin,
|
||||
@ -38,14 +38,14 @@ const AuthenticationPage = ({
|
||||
}) => {
|
||||
return (
|
||||
<StyledAuthenticationPage>
|
||||
<PageLogoIcon size="300px" type="netlify-cms"/>
|
||||
<PageLogoIcon size="300px" type="netlify-cms" />
|
||||
{loginErrorMessage ? <p>{loginErrorMessage}</p> : null}
|
||||
{!renderPageContent ? null : renderPageContent()}
|
||||
{!renderButtonContent ? null :
|
||||
{!renderButtonContent ? null : (
|
||||
<LoginButton disabled={loginDisabled} onClick={onLogin}>
|
||||
{renderButtonContent()}
|
||||
</LoginButton>
|
||||
}
|
||||
)}
|
||||
</StyledAuthenticationPage>
|
||||
);
|
||||
};
|
||||
|
@ -8,7 +8,7 @@ const StyledWrapper = styled(Wrapper)`
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
`
|
||||
`;
|
||||
|
||||
const StyledDropdownButton = styled(DropdownButton)`
|
||||
${buttons.button};
|
||||
@ -26,7 +26,7 @@ const StyledDropdownButton = styled(DropdownButton)`
|
||||
right: 16px;
|
||||
color: currentColor;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
const DropdownList = styled.ul`
|
||||
${components.dropdownList};
|
||||
@ -42,19 +42,19 @@ const DropdownList = styled.ul`
|
||||
top: ${props.top};
|
||||
left: ${props.position === 'left' ? 0 : 'auto'};
|
||||
right: ${props.position === 'right' ? 0 : 'auto'};
|
||||
`}
|
||||
`
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledMenuItem = styled(MenuItem)`
|
||||
${components.dropdownItem};
|
||||
`
|
||||
`;
|
||||
|
||||
const MenuItemIconContainer = styled.div`
|
||||
flex: 1 0 32px;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
`
|
||||
`;
|
||||
|
||||
const Dropdown = ({
|
||||
renderButton,
|
||||
@ -79,13 +79,11 @@ const Dropdown = ({
|
||||
const DropdownItem = ({ label, icon, iconDirection, onClick, className }) => (
|
||||
<StyledMenuItem value={onClick} className={className}>
|
||||
<span>{label}</span>
|
||||
{
|
||||
icon
|
||||
? <MenuItemIconContainer>
|
||||
<Icon type={icon} direction={iconDirection} size="small"/>
|
||||
</MenuItemIconContainer>
|
||||
: null
|
||||
}
|
||||
{icon ? (
|
||||
<MenuItemIconContainer>
|
||||
<Icon type={icon} direction={iconDirection} size="small" />
|
||||
</MenuItemIconContainer>
|
||||
) : null}
|
||||
</StyledMenuItem>
|
||||
);
|
||||
|
||||
|
@ -24,7 +24,7 @@ const IconWrapper = styled.span`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
/**
|
||||
* Calculates rotation for icons that have a `direction` property configured
|
||||
@ -41,7 +41,7 @@ const getRotation = (iconDirection, newDirection) => {
|
||||
const rotations = { right: 90, down: 180, left: 270, up: 360 };
|
||||
const degrees = rotations[newDirection] - rotations[iconDirection];
|
||||
return `${degrees}deg`;
|
||||
}
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
xsmall: '12px',
|
||||
@ -59,4 +59,4 @@ const Icon = ({ type, direction, size = 'medium', className }) => (
|
||||
/>
|
||||
);
|
||||
|
||||
export default styled(Icon)``
|
||||
export default styled(Icon)``;
|
||||
|
@ -19,15 +19,15 @@ import images from './images/_index';
|
||||
* Configuration for individual icons.
|
||||
*/
|
||||
const config = {
|
||||
'arrow': {
|
||||
arrow: {
|
||||
direction: 'left',
|
||||
},
|
||||
'chevron': {
|
||||
chevron: {
|
||||
direction: 'down',
|
||||
},
|
||||
'chevron-double': {
|
||||
direction: 'down',
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -44,48 +44,48 @@ import iconWrite from './write.svg';
|
||||
const iconix = iconAdd;
|
||||
|
||||
const images = {
|
||||
'add': iconix,
|
||||
add: iconix,
|
||||
'add-with': iconAddWith,
|
||||
'arrow': iconArrow,
|
||||
'bitbucket': iconBitbucket,
|
||||
'bold': iconBold,
|
||||
'check': iconCheck,
|
||||
'chevron': iconChevron,
|
||||
arrow: iconArrow,
|
||||
bitbucket: iconBitbucket,
|
||||
bold: iconBold,
|
||||
check: iconCheck,
|
||||
chevron: iconChevron,
|
||||
'chevron-double': iconChevronDouble,
|
||||
'circle': iconCircle,
|
||||
'close': iconClose,
|
||||
'code': iconCode,
|
||||
circle: iconCircle,
|
||||
close: iconClose,
|
||||
code: iconCode,
|
||||
'code-block': iconCodeBlock,
|
||||
'drag-handle': iconDragHandle,
|
||||
'eye': iconEye,
|
||||
'folder': iconFolder,
|
||||
'github': iconGithub,
|
||||
'gitlab': iconGitlab,
|
||||
'grid': iconGrid,
|
||||
'h1': iconH1,
|
||||
'h2': iconH2,
|
||||
'home': iconHome,
|
||||
'image': iconImage,
|
||||
'italic': iconItalic,
|
||||
'link': iconLink,
|
||||
'list': iconList,
|
||||
eye: iconEye,
|
||||
folder: iconFolder,
|
||||
github: iconGithub,
|
||||
gitlab: iconGitlab,
|
||||
grid: iconGrid,
|
||||
h1: iconH1,
|
||||
h2: iconH2,
|
||||
home: iconHome,
|
||||
image: iconImage,
|
||||
italic: iconItalic,
|
||||
link: iconLink,
|
||||
list: iconList,
|
||||
'list-bulleted': iconListBulleted,
|
||||
'list-numbered': iconListNumbered,
|
||||
'markdown': iconMarkdown,
|
||||
'media': iconMedia,
|
||||
markdown: iconMarkdown,
|
||||
media: iconMedia,
|
||||
'media-alt': iconMediaAlt,
|
||||
'netlify': iconNetlify,
|
||||
netlify: iconNetlify,
|
||||
'netlify-cms': iconNetlifyCms,
|
||||
'page': iconPage,
|
||||
'pages': iconPages,
|
||||
page: iconPage,
|
||||
pages: iconPages,
|
||||
'pages-alt': iconPagesAlt,
|
||||
'quote': iconQuote,
|
||||
'scroll': iconScroll,
|
||||
'search': iconSearch,
|
||||
'settings': iconSettings,
|
||||
'user': iconUser,
|
||||
'workflow': iconWorkflow,
|
||||
'write': iconWrite,
|
||||
quote: iconQuote,
|
||||
scroll: iconScroll,
|
||||
search: iconSearch,
|
||||
settings: iconSettings,
|
||||
user: iconUser,
|
||||
workflow: iconWorkflow,
|
||||
write: iconWrite,
|
||||
};
|
||||
|
||||
export default images;
|
||||
|
@ -9,7 +9,7 @@ const TopBar = styled.div`
|
||||
height: 26px;
|
||||
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
|
||||
position: relative;
|
||||
`
|
||||
`;
|
||||
|
||||
const TopBarButton = styled.button`
|
||||
${buttons.button};
|
||||
@ -24,38 +24,32 @@ const TopBarButton = styled.button`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`
|
||||
`;
|
||||
|
||||
const TopBarButtonSpan = TopBarButton.withComponent('span');
|
||||
|
||||
const DragIcon = styled(TopBarButtonSpan)`
|
||||
width: 100%;
|
||||
cursor: move;
|
||||
`
|
||||
`;
|
||||
|
||||
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
|
||||
<TopBar className={className}>
|
||||
{
|
||||
onCollapseToggle
|
||||
? <TopBarButton onClick={onCollapseToggle}>
|
||||
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'}/>
|
||||
</TopBarButton>
|
||||
: null
|
||||
}
|
||||
{
|
||||
dragHandleHOC
|
||||
? <DragIcon>
|
||||
<Icon type="drag-handle" size="small"/>
|
||||
</DragIcon>
|
||||
: null
|
||||
}
|
||||
{
|
||||
onRemove
|
||||
? <TopBarButton onClick={onRemove}>
|
||||
<Icon type="close" size="small"/>
|
||||
</TopBarButton>
|
||||
: null
|
||||
}
|
||||
{onCollapseToggle ? (
|
||||
<TopBarButton onClick={onCollapseToggle}>
|
||||
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
|
||||
</TopBarButton>
|
||||
) : null}
|
||||
{dragHandleHOC ? (
|
||||
<DragIcon>
|
||||
<Icon type="drag-handle" size="small" />
|
||||
</DragIcon>
|
||||
) : null}
|
||||
{onRemove ? (
|
||||
<TopBarButton onClick={onRemove}>
|
||||
<Icon type="close" size="small" />
|
||||
</TopBarButton>
|
||||
) : null}
|
||||
</TopBar>
|
||||
);
|
||||
|
||||
@ -65,6 +59,6 @@ const StyledListItemTopBar = styled(ListItemTopBar)`
|
||||
height: 26px;
|
||||
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
|
||||
position: relative;
|
||||
`
|
||||
`;
|
||||
|
||||
export default StyledListItemTopBar;
|
||||
|
@ -45,13 +45,13 @@ const LoaderText = styled.div`
|
||||
color: #767676;
|
||||
margin-top: 55px;
|
||||
line-height: 35px;
|
||||
`
|
||||
`;
|
||||
|
||||
const LoaderItem = styled.div`
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
`
|
||||
`;
|
||||
|
||||
export class Loader extends React.Component {
|
||||
state = {
|
||||
@ -69,7 +69,8 @@ export class Loader extends React.Component {
|
||||
const { children } = this.props;
|
||||
|
||||
this.interval = setInterval(() => {
|
||||
const nextItem = (this.state.currentItem === children.length - 1) ? 0 : this.state.currentItem + 1;
|
||||
const nextItem =
|
||||
this.state.currentItem === children.length - 1 ? 0 : this.state.currentItem + 1;
|
||||
this.setState({ currentItem: nextItem });
|
||||
}, 5000);
|
||||
};
|
||||
@ -108,7 +109,7 @@ export class Loader extends React.Component {
|
||||
}
|
||||
|
||||
const StyledLoader = styled(Loader)`
|
||||
display: ${props => props.active ? 'block' : 'none'};
|
||||
display: ${props => (props.active ? 'block' : 'none')};
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -143,6 +144,6 @@ const StyledLoader = styled(Loader)`
|
||||
border-color: ${colors.active} transparent transparent;
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export default StyledLoader;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled, { css }from 'react-emotion';
|
||||
import styled, { css } from 'react-emotion';
|
||||
import Icon from './Icon';
|
||||
import { colors, buttons } from './styles';
|
||||
|
||||
@ -10,17 +10,19 @@ const TopBarContainer = styled.div`
|
||||
justify-content: space-between;
|
||||
margin: 0 -14px;
|
||||
padding: 13px;
|
||||
`
|
||||
`;
|
||||
|
||||
const ExpandButtonContainer = styled.div`
|
||||
${props => props.hasHeading && css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
`}
|
||||
`
|
||||
${props =>
|
||||
props.hasHeading &&
|
||||
css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
`};
|
||||
`;
|
||||
|
||||
const ExpandButton = styled.button`
|
||||
${buttons.button};
|
||||
@ -31,7 +33,7 @@ const ExpandButton = styled.button`
|
||||
&:last-of-type {
|
||||
margin-right: 4px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
const AddButton = styled.button`
|
||||
${buttons.button};
|
||||
@ -46,9 +48,16 @@ const AddButton = styled.button`
|
||||
${Icon} {
|
||||
margin-left: 6px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, heading = null, label }) => (
|
||||
const ObjectWidgetTopBar = ({
|
||||
allowAdd,
|
||||
onAdd,
|
||||
onCollapseToggle,
|
||||
collapsed,
|
||||
heading = null,
|
||||
label,
|
||||
}) => (
|
||||
<TopBarContainer>
|
||||
<ExpandButtonContainer hasHeading={!!heading}>
|
||||
<ExpandButton onClick={onCollapseToggle}>
|
||||
@ -56,11 +65,11 @@ const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, head
|
||||
</ExpandButton>
|
||||
{heading}
|
||||
</ExpandButtonContainer>
|
||||
{!allowAdd ? null :
|
||||
{!allowAdd ? null : (
|
||||
<AddButton onClick={onAdd}>
|
||||
Add {label} <Icon type="add" size="xsmall" />
|
||||
</AddButton>
|
||||
}
|
||||
)}
|
||||
</TopBarContainer>
|
||||
);
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from 'react';
|
||||
import styled, { css } from 'react-emotion';
|
||||
import ReactToggled from 'react-toggled';
|
||||
import { colors, colorsRaw, shadows, transitions } from './styles';
|
||||
@ -11,7 +11,7 @@ const ToggleContainer = styled.span`
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
`
|
||||
`;
|
||||
|
||||
const ToggleHandle = styled.span`
|
||||
${shadows.dropDeep};
|
||||
@ -24,17 +24,19 @@ const ToggleHandle = styled.span`
|
||||
background-color: ${colorsRaw.white};
|
||||
transition: transform ${transitions.main};
|
||||
|
||||
${props => props.isActive && css`
|
||||
transform: translateX(20px);
|
||||
`}
|
||||
`
|
||||
${props =>
|
||||
props.isActive &&
|
||||
css`
|
||||
transform: translateX(20px);
|
||||
`};
|
||||
`;
|
||||
|
||||
const ToggleBackground = styled.span`
|
||||
width: 34px;
|
||||
height: 14px;
|
||||
border-radius: 10px;
|
||||
background-color: ${colors.active};
|
||||
`
|
||||
`;
|
||||
|
||||
const Toggle = ({
|
||||
active,
|
||||
@ -47,7 +49,7 @@ const Toggle = ({
|
||||
Handle = ToggleHandle,
|
||||
}) => (
|
||||
<ReactToggled on={active} onToggle={onChange}>
|
||||
{({on, getElementTogglerProps}) => (
|
||||
{({ on, getElementTogglerProps }) => (
|
||||
<Container
|
||||
role="switch"
|
||||
aria-checked={on.toString()}
|
||||
@ -56,8 +58,8 @@ const Toggle = ({
|
||||
className={className}
|
||||
{...getElementTogglerProps()}
|
||||
>
|
||||
<Background isActive={on}/>
|
||||
<Handle isActive={on}/>
|
||||
<Background isActive={on} />
|
||||
<Handle isActive={on} />
|
||||
</Container>
|
||||
)}
|
||||
</ReactToggled>
|
||||
|
@ -1,16 +1,6 @@
|
||||
import { css, injectGlobal } from 'react-emotion';
|
||||
|
||||
export {
|
||||
fonts,
|
||||
colorsRaw,
|
||||
colors,
|
||||
lengths,
|
||||
components,
|
||||
buttons,
|
||||
shadows,
|
||||
borders,
|
||||
transitions,
|
||||
};
|
||||
export { fonts, colorsRaw, colors, lengths, components, buttons, shadows, borders, transitions };
|
||||
|
||||
/**
|
||||
* Font Stacks
|
||||
@ -110,19 +100,16 @@ const transitions = {
|
||||
|
||||
const shadows = {
|
||||
drop: css`
|
||||
box-shadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
|
||||
box-shadow: 0 2px 4px 0 rgba(19, 39, 48, 0.12);
|
||||
`,
|
||||
dropMain: css`
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),
|
||||
0 1px 3px 0 rgba(68, 74, 87, 0.10);
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1);
|
||||
`,
|
||||
dropMiddle: css`
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.15),
|
||||
0 1px 3px 0 rgba(68, 74, 87, 0.30);
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.3);
|
||||
`,
|
||||
dropDeep: css`
|
||||
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15),
|
||||
0 1px 3px 0 rgba(68, 74, 87, 0.25);
|
||||
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.25);
|
||||
`,
|
||||
};
|
||||
|
||||
@ -285,7 +272,7 @@ const components = {
|
||||
background-color: ${colors.activeBackground};
|
||||
}
|
||||
`,
|
||||
}
|
||||
};
|
||||
|
||||
injectGlobal`
|
||||
*, *:before, *:after {
|
||||
|
Reference in New Issue
Block a user