begin scaffolding for lerna
98
packages/netlify-cms-ui-default/Dropdown/Dropdown.js
Normal file
@ -0,0 +1,98 @@
|
||||
(function () {
|
||||
var enterModule = require('react-hot-loader').enterModule;
|
||||
|
||||
enterModule && enterModule(module);
|
||||
})();
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import c from 'classnames';
|
||||
import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
var Dropdown = function Dropdown(_ref) {
|
||||
var label = _ref.label,
|
||||
button = _ref.button,
|
||||
className = _ref.className,
|
||||
_ref$classNameButton = _ref.classNameButton,
|
||||
classNameButton = _ref$classNameButton === undefined ? '' : _ref$classNameButton,
|
||||
_ref$dropdownWidth = _ref.dropdownWidth,
|
||||
dropdownWidth = _ref$dropdownWidth === undefined ? 'auto' : _ref$dropdownWidth,
|
||||
_ref$dropdownPosition = _ref.dropdownPosition,
|
||||
dropdownPosition = _ref$dropdownPosition === undefined ? 'left' : _ref$dropdownPosition,
|
||||
_ref$dropdownTopOverl = _ref.dropdownTopOverlap,
|
||||
dropdownTopOverlap = _ref$dropdownTopOverl === undefined ? '0' : _ref$dropdownTopOverl,
|
||||
children = _ref.children;
|
||||
|
||||
var style = {
|
||||
width: dropdownWidth,
|
||||
top: dropdownTopOverlap,
|
||||
left: dropdownPosition === 'left' ? 0 : 'auto',
|
||||
right: dropdownPosition === 'right' ? 0 : 'auto'
|
||||
};
|
||||
return React.createElement(
|
||||
Wrapper,
|
||||
{ className: c('nc-dropdown', className), onSelection: function onSelection(handler) {
|
||||
return handler();
|
||||
} },
|
||||
button ? React.createElement(
|
||||
Button,
|
||||
null,
|
||||
button
|
||||
) : React.createElement(
|
||||
Button,
|
||||
{ className: c('nc-dropdownButton', classNameButton) },
|
||||
label
|
||||
),
|
||||
React.createElement(
|
||||
Menu,
|
||||
null,
|
||||
React.createElement(
|
||||
'ul',
|
||||
{ className: 'nc-dropdownList', style: style },
|
||||
children
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var DropdownItem = function DropdownItem(_ref2) {
|
||||
var label = _ref2.label,
|
||||
icon = _ref2.icon,
|
||||
iconDirection = _ref2.iconDirection,
|
||||
onClick = _ref2.onClick,
|
||||
className = _ref2.className;
|
||||
return React.createElement(
|
||||
MenuItem,
|
||||
{ className: c('nc-dropdownItem', className), value: onClick },
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
label
|
||||
),
|
||||
icon ? React.createElement(
|
||||
'span',
|
||||
{ className: 'nc-dropdownItemIcon' },
|
||||
React.createElement(Icon, { type: icon, direction: iconDirection, size: 'small' })
|
||||
) : null
|
||||
);
|
||||
};
|
||||
|
||||
export { Dropdown, DropdownItem };
|
||||
;
|
||||
|
||||
(function () {
|
||||
var reactHotLoader = require('react-hot-loader').default;
|
||||
|
||||
var leaveModule = require('react-hot-loader').leaveModule;
|
||||
|
||||
if (!reactHotLoader) {
|
||||
return;
|
||||
}
|
||||
|
||||
reactHotLoader.register(Dropdown, 'Dropdown', 'src/Dropdown/Dropdown.js');
|
||||
reactHotLoader.register(DropdownItem, 'DropdownItem', 'src/Dropdown/Dropdown.js');
|
||||
leaveModule(module);
|
||||
})();
|
||||
|
||||
;
|
77
packages/netlify-cms-ui-default/Icon/Icon.js
Normal file
@ -0,0 +1,77 @@
|
||||
import _extends from 'babel-runtime/helpers/extends';
|
||||
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
||||
|
||||
(function () {
|
||||
var enterModule = require('react-hot-loader').enterModule;
|
||||
|
||||
enterModule && enterModule(module);
|
||||
})();
|
||||
|
||||
import React from 'react';
|
||||
import icons from './icons';
|
||||
|
||||
/**
|
||||
* Calculates rotation for icons that have a `direction` property configured
|
||||
* in the imported icon definition object. If no direction is configured, a
|
||||
* neutral rotation value is returned.
|
||||
*
|
||||
* Returned value is a string of shape `${degrees}deg`, for use in a CSS
|
||||
* transform.
|
||||
*/
|
||||
var getRotation = function getRotation(iconDirection, newDirection) {
|
||||
if (!iconDirection || !newDirection) {
|
||||
return '0deg';
|
||||
}
|
||||
var rotations = { right: 90, down: 180, left: 270, up: 360 };
|
||||
var degrees = rotations[newDirection] - rotations[iconDirection];
|
||||
return degrees + 'deg';
|
||||
};
|
||||
|
||||
var sizes = {
|
||||
xsmall: '12px',
|
||||
small: '18px',
|
||||
medium: '24px',
|
||||
large: '32px'
|
||||
};
|
||||
|
||||
var Icon = function Icon(props) {
|
||||
var type = props.type,
|
||||
direction = props.direction,
|
||||
_props$size = props.size,
|
||||
size = _props$size === undefined ? 'medium' : _props$size,
|
||||
_props$className = props.className,
|
||||
className = _props$className === undefined ? '' : _props$className,
|
||||
width = props.width,
|
||||
height = props.height,
|
||||
remainingProps = _objectWithoutProperties(props, ['type', 'direction', 'size', 'className', 'width', 'height']);
|
||||
|
||||
var icon = icons[type];
|
||||
var rotation = getRotation(icon.direction, direction);
|
||||
var transform = 'rotate(' + rotation + ')';
|
||||
var sizeResolved = sizes[size] || size;
|
||||
var style = { width: sizeResolved, height: sizeResolved, transform: transform };
|
||||
return React.createElement(
|
||||
'span',
|
||||
_extends({ className: 'nc-icon ' + className }, remainingProps),
|
||||
React.createElement('span', { dangerouslySetInnerHTML: { __html: icon.image }, style: style })
|
||||
);
|
||||
};
|
||||
export { Icon };
|
||||
;
|
||||
|
||||
(function () {
|
||||
var reactHotLoader = require('react-hot-loader').default;
|
||||
|
||||
var leaveModule = require('react-hot-loader').leaveModule;
|
||||
|
||||
if (!reactHotLoader) {
|
||||
return;
|
||||
}
|
||||
|
||||
reactHotLoader.register(getRotation, 'getRotation', 'src/Icon/Icon.js');
|
||||
reactHotLoader.register(sizes, 'sizes', 'src/Icon/Icon.js');
|
||||
reactHotLoader.register(Icon, 'Icon', 'src/Icon/Icon.js');
|
||||
leaveModule(module);
|
||||
})();
|
||||
|
||||
;
|
70
packages/netlify-cms-ui-default/Icon/icons.js
Normal file
@ -0,0 +1,70 @@
|
||||
import _extends from 'babel-runtime/helpers/extends';
|
||||
|
||||
(function () {
|
||||
var enterModule = require('react-hot-loader').enterModule;
|
||||
|
||||
enterModule && enterModule(module);
|
||||
})();
|
||||
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import images from './images/_index';
|
||||
|
||||
/**
|
||||
* This module outputs icon objects with the following shape:
|
||||
*
|
||||
* {
|
||||
* image: <svg>...</svg>,
|
||||
* ...props
|
||||
* }
|
||||
*
|
||||
* `props` here are config properties defined in this file for specific icons.
|
||||
* For example, an icon may face a specific direction, and the Icon component
|
||||
* accepts a `direction` prop to rotate directional icons, which relies on
|
||||
* defining the default direction here.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Configuration for individual icons.
|
||||
*/
|
||||
var config = {
|
||||
'arrow': {
|
||||
direction: 'left'
|
||||
},
|
||||
'chevron': {
|
||||
direction: 'down'
|
||||
},
|
||||
'chevron-double': {
|
||||
direction: 'down'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Map icon definition objects - imported object of images simply maps the icon
|
||||
* name to the raw svg, so we move that to the `image` property of the
|
||||
* definition object and set any additional configured properties for each icon.
|
||||
*/
|
||||
var icons = mapValues(images, function (image, name) {
|
||||
var props = config[name] || {};
|
||||
return _extends({ image: image }, props);
|
||||
});
|
||||
|
||||
var _default = icons;
|
||||
export default _default;
|
||||
;
|
||||
|
||||
(function () {
|
||||
var reactHotLoader = require('react-hot-loader').default;
|
||||
|
||||
var leaveModule = require('react-hot-loader').leaveModule;
|
||||
|
||||
if (!reactHotLoader) {
|
||||
return;
|
||||
}
|
||||
|
||||
reactHotLoader.register(config, 'config', 'src/Icon/icons.js');
|
||||
reactHotLoader.register(icons, 'icons', 'src/Icon/icons.js');
|
||||
reactHotLoader.register(_default, 'default', 'src/Icon/icons.js');
|
||||
leaveModule(module);
|
||||
})();
|
||||
|
||||
;
|
115
packages/netlify-cms-ui-default/Icon/images/_index.js
Normal file
@ -0,0 +1,57 @@
|
||||
(function () {
|
||||
var enterModule = require('react-hot-loader').enterModule;
|
||||
|
||||
enterModule && enterModule(module);
|
||||
})();
|
||||
|
||||
import React from 'react';
|
||||
import c from 'classnames';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
export var ListItemTopBar = function ListItemTopBar(_ref) {
|
||||
var collapsed = _ref.collapsed,
|
||||
onCollapseToggle = _ref.onCollapseToggle,
|
||||
onRemove = _ref.onRemove,
|
||||
dragHandleHOC = _ref.dragHandleHOC,
|
||||
className = _ref.className;
|
||||
|
||||
var DragHandle = dragHandleHOC && dragHandleHOC(function () {
|
||||
return React.createElement(
|
||||
'span',
|
||||
{ className: 'nc-listItemTopBar-dragIcon' },
|
||||
React.createElement(Icon, { type: 'drag-handle', size: 'small' })
|
||||
);
|
||||
});
|
||||
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: c('nc-listItemTopBar', className) },
|
||||
onCollapseToggle ? React.createElement(
|
||||
'button',
|
||||
{ className: 'nc-listItemTopBar-toggleButton', onClick: onCollapseToggle },
|
||||
React.createElement(Icon, { type: 'chevron', size: 'small', direction: collapsed ? 'right' : 'down' })
|
||||
) : null,
|
||||
dragHandleHOC ? React.createElement(DragHandle, null) : null,
|
||||
onRemove ? React.createElement(
|
||||
'button',
|
||||
{ className: 'nc-listItemTopBar-removeButton', onClick: onRemove },
|
||||
React.createElement(Icon, { type: 'close', size: 'small' })
|
||||
) : null
|
||||
);
|
||||
};
|
||||
;
|
||||
|
||||
(function () {
|
||||
var reactHotLoader = require('react-hot-loader').default;
|
||||
|
||||
var leaveModule = require('react-hot-loader').leaveModule;
|
||||
|
||||
if (!reactHotLoader) {
|
||||
return;
|
||||
}
|
||||
|
||||
reactHotLoader.register(ListItemTopBar, 'ListItemTopBar', 'src/ListItemTopBar/ListItemTopBar.js');
|
||||
leaveModule(module);
|
||||
})();
|
||||
|
||||
;
|
128
packages/netlify-cms-ui-default/Loader/Loader.js
Normal file
@ -0,0 +1,128 @@
|
||||
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
|
||||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
||||
import _createClass from 'babel-runtime/helpers/createClass';
|
||||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
||||
import _inherits from 'babel-runtime/helpers/inherits';
|
||||
|
||||
(function () {
|
||||
var enterModule = require('react-hot-loader').enterModule;
|
||||
|
||||
enterModule && enterModule(module);
|
||||
})();
|
||||
|
||||
import React from 'react';
|
||||
import CSSTransition from 'react-transition-group/CSSTransition';
|
||||
import c from 'classnames';
|
||||
|
||||
export var Loader = function (_React$Component) {
|
||||
_inherits(Loader, _React$Component);
|
||||
|
||||
function Loader() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Loader);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Loader.__proto__ || _Object$getPrototypeOf(Loader)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
currentItem: 0
|
||||
}, _this.setAnimation = function () {
|
||||
if (_this.interval) return;
|
||||
var children = _this.props.children;
|
||||
|
||||
|
||||
_this.interval = setInterval(function () {
|
||||
var nextItem = _this.state.currentItem === children.length - 1 ? 0 : _this.state.currentItem + 1;
|
||||
_this.setState({ currentItem: nextItem });
|
||||
}, 5000);
|
||||
}, _this.renderChild = function () {
|
||||
var children = _this.props.children;
|
||||
var currentItem = _this.state.currentItem;
|
||||
|
||||
if (!children) {
|
||||
return null;
|
||||
} else if (typeof children == 'string') {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: 'nc-loader-text' },
|
||||
children
|
||||
);
|
||||
} else if (Array.isArray(children)) {
|
||||
_this.setAnimation();
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: 'nc-loader-text' },
|
||||
React.createElement(
|
||||
CSSTransition,
|
||||
{
|
||||
classNames: {
|
||||
enter: 'nc-loader-enter',
|
||||
enterActive: 'nc-loader-enterActive',
|
||||
exit: 'nc-loader-exit',
|
||||
exitActive: 'nc-loader-exitActive'
|
||||
},
|
||||
timeout: 500
|
||||
},
|
||||
React.createElement(
|
||||
'div',
|
||||
{ key: currentItem, className: 'nc-loader-animateItem' },
|
||||
children[currentItem]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Loader, [{
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props,
|
||||
active = _props.active,
|
||||
className = _props.className;
|
||||
|
||||
var combinedClassName = c('nc-loader-root', { 'nc-loader-active': active }, className);
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: combinedClassName },
|
||||
this.renderChild()
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: '__reactstandin__regenerateByEval',
|
||||
// @ts-ignore
|
||||
value: function __reactstandin__regenerateByEval(key, code) {
|
||||
// @ts-ignore
|
||||
this[key] = eval(code);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Loader;
|
||||
}(React.Component);
|
||||
;
|
||||
|
||||
(function () {
|
||||
var reactHotLoader = require('react-hot-loader').default;
|
||||
|
||||
var leaveModule = require('react-hot-loader').leaveModule;
|
||||
|
||||
if (!reactHotLoader) {
|
||||
return;
|
||||
}
|
||||
|
||||
reactHotLoader.register(Loader, 'Loader', 'src/Loader/Loader.js');
|
||||
leaveModule(module);
|
||||
})();
|
||||
|
||||
;
|
57
packages/netlify-cms-ui-default/Toggle/Toggle.js
Normal file
@ -0,0 +1,57 @@
|
||||
import _extends from 'babel-runtime/helpers/extends';
|
||||
|
||||
(function () {
|
||||
var enterModule = require('react-hot-loader').enterModule;
|
||||
|
||||
enterModule && enterModule(module);
|
||||
})();
|
||||
|
||||
import React from 'react';
|
||||
import ReactToggled from 'react-toggled';
|
||||
import c from 'classnames';
|
||||
|
||||
export var Toggle = function Toggle(_ref) {
|
||||
var active = _ref.active,
|
||||
onChange = _ref.onChange,
|
||||
className = _ref.className,
|
||||
classNameBackground = _ref.classNameBackground,
|
||||
classNameSwitch = _ref.classNameSwitch,
|
||||
onFocus = _ref.onFocus,
|
||||
onBlur = _ref.onBlur;
|
||||
return React.createElement(
|
||||
ReactToggled,
|
||||
{ on: active, onToggle: onChange },
|
||||
function (_ref2) {
|
||||
var on = _ref2.on,
|
||||
getElementTogglerProps = _ref2.getElementTogglerProps;
|
||||
return React.createElement(
|
||||
'span',
|
||||
_extends({
|
||||
className: c('nc-toggle', className, { 'nc-toggle-active': on }),
|
||||
role: 'switch',
|
||||
'aria-checked': on.toString(),
|
||||
onFocus: onFocus,
|
||||
onBlur: onBlur
|
||||
}, getElementTogglerProps()),
|
||||
React.createElement('span', { className: 'nc-toggle-background ' + classNameBackground }),
|
||||
React.createElement('span', { className: 'nc-toggle-switch ' + classNameSwitch })
|
||||
);
|
||||
}
|
||||
);
|
||||
};
|
||||
;
|
||||
|
||||
(function () {
|
||||
var reactHotLoader = require('react-hot-loader').default;
|
||||
|
||||
var leaveModule = require('react-hot-loader').leaveModule;
|
||||
|
||||
if (!reactHotLoader) {
|
||||
return;
|
||||
}
|
||||
|
||||
reactHotLoader.register(Toggle, 'Toggle', 'src/Toggle/Toggle.js');
|
||||
leaveModule(module);
|
||||
})();
|
||||
|
||||
;
|
7249
packages/netlify-cms-ui-default/package-lock.json
generated
Normal file
28
packages/netlify-cms-ui-default/package.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "netlify-cms-ui-default",
|
||||
"description": "Default UI components for Netlify CMS.",
|
||||
"version": "2.0.0-alpha.0",
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
"keywords": [
|
||||
"netlify-cms"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "parcel build src --out-dir ."
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"lodash": "^4.13.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.0.0",
|
||||
"react-aria-menubutton": "^5.1.0",
|
||||
"react-toggled": "^1.1.2",
|
||||
"react-transition-group": "^2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-plugin-inline-svg": "^1.0.0",
|
||||
"parcel-bundler": "^1.9.4"
|
||||
}
|
||||
}
|
77
packages/netlify-cms-ui-default/src/Dropdown/Dropdown.css
Normal file
@ -0,0 +1,77 @@
|
||||
:root {
|
||||
--dropdownList: {
|
||||
@apply(--dropShadowDeep);
|
||||
background-color: #fff;
|
||||
border-radius: var(--borderRadius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
--dropdownItem: {
|
||||
@apply --button;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
color: var(--colorText);
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #eaebf1;
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--colorBlue);
|
||||
background-color: var(--colorActiveBackground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nc-dropdown {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nc-dropdownButton {
|
||||
@apply --button;
|
||||
@apply --buttonDefault;
|
||||
display: block;
|
||||
padding-left: 20px;
|
||||
padding-right: 40px;
|
||||
|
||||
&:after {
|
||||
@apply(--caretDown);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.nc-dropdownList {
|
||||
@apply(--dropdownList);
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nc-dropdownItem {
|
||||
@apply(--dropdownItem);
|
||||
}
|
||||
|
||||
.nc-dropdownItemIcon {
|
||||
flex: 1 0 32px;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
53
packages/netlify-cms-ui-default/src/Dropdown/Dropdown.js
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import c from 'classnames';
|
||||
import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
const Dropdown = ({
|
||||
label,
|
||||
button,
|
||||
className,
|
||||
classNameButton = '',
|
||||
dropdownWidth = 'auto',
|
||||
dropdownPosition = 'left',
|
||||
dropdownTopOverlap = '0',
|
||||
children
|
||||
}) => {
|
||||
const style = {
|
||||
width: dropdownWidth,
|
||||
top: dropdownTopOverlap,
|
||||
left: dropdownPosition === 'left' ? 0 : 'auto',
|
||||
right: dropdownPosition === 'right' ? 0 : 'auto',
|
||||
};
|
||||
return (
|
||||
<Wrapper className={c('nc-dropdown', className)} onSelection={handler => handler()}>
|
||||
{
|
||||
button
|
||||
? <Button>{button}</Button>
|
||||
: <Button className={c('nc-dropdownButton', classNameButton)}>{label}</Button>
|
||||
}
|
||||
<Menu>
|
||||
<ul className="nc-dropdownList" style={style}>
|
||||
{children}
|
||||
</ul>
|
||||
</Menu>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownItem = ({ label, icon, iconDirection, onClick, className }) => (
|
||||
<MenuItem className={c('nc-dropdownItem', className)} value={onClick}>
|
||||
<span>{label}</span>
|
||||
{
|
||||
icon
|
||||
? <span className="nc-dropdownItemIcon">
|
||||
<Icon type={icon} direction={iconDirection} size="small"/>
|
||||
</span>
|
||||
: null
|
||||
}
|
||||
</MenuItem>
|
||||
);
|
||||
|
||||
|
||||
export { Dropdown, DropdownItem };
|
24
packages/netlify-cms-ui-default/src/Icon/Icon.css
Normal file
@ -0,0 +1,24 @@
|
||||
.nc-icon {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& path:not(.no-fill),
|
||||
& circle:not(.no-fill),
|
||||
& polygon:not(.no-fill),
|
||||
& rect:not(.no-fill) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
& path.clipped {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nc-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
48
packages/netlify-cms-ui-default/src/Icon/Icon.js
Normal file
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import icons from './icons';
|
||||
|
||||
/**
|
||||
* Calculates rotation for icons that have a `direction` property configured
|
||||
* in the imported icon definition object. If no direction is configured, a
|
||||
* neutral rotation value is returned.
|
||||
*
|
||||
* Returned value is a string of shape `${degrees}deg`, for use in a CSS
|
||||
* transform.
|
||||
*/
|
||||
const getRotation = (iconDirection, newDirection) => {
|
||||
if (!iconDirection || !newDirection) {
|
||||
return '0deg';
|
||||
}
|
||||
const rotations = { right: 90, down: 180, left: 270, up: 360 };
|
||||
const degrees = rotations[newDirection] - rotations[iconDirection];
|
||||
return `${degrees}deg`;
|
||||
}
|
||||
|
||||
const sizes = {
|
||||
xsmall: '12px',
|
||||
small: '18px',
|
||||
medium: '24px',
|
||||
large: '32px',
|
||||
};
|
||||
|
||||
export const Icon = props => {
|
||||
const {
|
||||
type,
|
||||
direction,
|
||||
size = 'medium',
|
||||
className = '',
|
||||
width,
|
||||
height,
|
||||
...remainingProps
|
||||
} = props;
|
||||
const icon = icons[type];
|
||||
const rotation = getRotation(icon.direction, direction)
|
||||
const transform = `rotate(${rotation})`;
|
||||
const sizeResolved = sizes[size] || size;
|
||||
const style = { width: sizeResolved, height: sizeResolved, transform };
|
||||
return (
|
||||
<span className={`nc-icon ${className}`} {...remainingProps}>
|
||||
<span dangerouslySetInnerHTML={{ __html: icon.image }} style={style}></span>
|
||||
</span>
|
||||
);
|
||||
}
|
43
packages/netlify-cms-ui-default/src/Icon/icons.js
Normal file
@ -0,0 +1,43 @@
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import images from './images/_index';
|
||||
|
||||
/**
|
||||
* This module outputs icon objects with the following shape:
|
||||
*
|
||||
* {
|
||||
* image: <svg>...</svg>,
|
||||
* ...props
|
||||
* }
|
||||
*
|
||||
* `props` here are config properties defined in this file for specific icons.
|
||||
* For example, an icon may face a specific direction, and the Icon component
|
||||
* accepts a `direction` prop to rotate directional icons, which relies on
|
||||
* defining the default direction here.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Configuration for individual icons.
|
||||
*/
|
||||
const config = {
|
||||
'arrow': {
|
||||
direction: 'left',
|
||||
},
|
||||
'chevron': {
|
||||
direction: 'down',
|
||||
},
|
||||
'chevron-double': {
|
||||
direction: 'down',
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Map icon definition objects - imported object of images simply maps the icon
|
||||
* name to the raw svg, so we move that to the `image` property of the
|
||||
* definition object and set any additional configured properties for each icon.
|
||||
*/
|
||||
const icons = mapValues(images, (image, name) => {
|
||||
const props = config[name] || {};
|
||||
return { image, ...props };
|
||||
});
|
||||
|
||||
export default icons;
|
91
packages/netlify-cms-ui-default/src/Icon/images/_index.js
Normal file
@ -0,0 +1,91 @@
|
||||
import iconAdd from './add.svg';
|
||||
import iconAddWith from './add-with.svg';
|
||||
import iconArrow from './arrow.svg';
|
||||
import iconBitbucket from './bitbucket.svg';
|
||||
import iconBold from './bold.svg';
|
||||
import iconCheck from './check.svg';
|
||||
import iconChevron from './chevron.svg';
|
||||
import iconChevronDouble from './chevron-double.svg';
|
||||
import iconCircle from './circle.svg';
|
||||
import iconClose from './close.svg';
|
||||
import iconCode from './code.svg';
|
||||
import iconCodeBlock from './code-block.svg';
|
||||
import iconDragHandle from './drag-handle.svg';
|
||||
import iconEye from './eye.svg';
|
||||
import iconFolder from './folder.svg';
|
||||
import iconGithub from './github.svg';
|
||||
import iconGitlab from './gitlab.svg';
|
||||
import iconGrid from './grid.svg';
|
||||
import iconH1 from './h1.svg';
|
||||
import iconH2 from './h2.svg';
|
||||
import iconHome from './home.svg';
|
||||
import iconImage from './image.svg';
|
||||
import iconItalic from './italic.svg';
|
||||
import iconLink from './link.svg';
|
||||
import iconList from './list.svg';
|
||||
import iconListBulleted from './list-bulleted.svg';
|
||||
import iconListNumbered from './list-numbered.svg';
|
||||
import iconMarkdown from './markdown.svg';
|
||||
import iconMedia from './media.svg';
|
||||
import iconMediaAlt from './media-alt.svg';
|
||||
import iconNetlify from './netlify.svg';
|
||||
import iconNetlifyCms from './netlify-cms-logo.svg';
|
||||
import iconPage from './page.svg';
|
||||
import iconPages from './pages.svg';
|
||||
import iconPagesAlt from './pages-alt.svg';
|
||||
import iconQuote from './quote.svg';
|
||||
import iconScroll from './scroll.svg';
|
||||
import iconSearch from './search.svg';
|
||||
import iconSettings from './settings.svg';
|
||||
import iconUser from './user.svg';
|
||||
import iconWorkflow from './workflow.svg';
|
||||
import iconWrite from './write.svg';
|
||||
|
||||
const iconix = iconAdd;
|
||||
|
||||
const images = {
|
||||
'add': iconix,
|
||||
'add-with': iconAddWith,
|
||||
'arrow': iconArrow,
|
||||
'bitbucket': iconBitbucket,
|
||||
'bold': iconBold,
|
||||
'check': iconCheck,
|
||||
'chevron': iconChevron,
|
||||
'chevron-double': iconChevronDouble,
|
||||
'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,
|
||||
'list-bulleted': iconListBulleted,
|
||||
'list-numbered': iconListNumbered,
|
||||
'markdown': iconMarkdown,
|
||||
'media': iconMedia,
|
||||
'media-alt': iconMediaAlt,
|
||||
'netlify': iconNetlify,
|
||||
'netlify-cms': iconNetlifyCms,
|
||||
'page': iconPage,
|
||||
'pages': iconPages,
|
||||
'pages-alt': iconPagesAlt,
|
||||
'quote': iconQuote,
|
||||
'scroll': iconScroll,
|
||||
'search': iconSearch,
|
||||
'settings': iconSettings,
|
||||
'user': iconUser,
|
||||
'workflow': iconWorkflow,
|
||||
'write': iconWrite,
|
||||
};
|
||||
|
||||
export default images;
|
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" fill-rule="evenodd" d="M403.5,22 L400,18 L407,18 L403.5,22 Z M399.5,16.25 L396.75,16.25 L396.75,16.25 C396.473858,16.25 396.25,16.4738576 396.25,16.75 L396.25,19.5 C396.25,19.7761424 396.026142,20 395.75,20 L394.25,20 C393.973858,20 393.75,19.7761424 393.75,19.5 L393.75,16.75 C393.75,16.4738576 393.526142,16.25 393.25,16.25 L390.5,16.25 C390.223858,16.25 390,16.0261424 390,15.75 L390,14.25 C390,13.9738576 390.223858,13.75 390.5,13.75 L393.25,13.75 L393.25,13.75 C393.526142,13.75 393.75,13.5261424 393.75,13.25 L393.75,10.5 L393.75,10.5 C393.75,10.2238576 393.973858,10 394.25,10 L395.75,10 C396.026142,10 396.25,10.2238576 396.25,10.5 L396.25,13.25 C396.25,13.5261424 396.473858,13.75 396.75,13.75 L399.5,13.75 C399.776142,13.75 400,13.9738576 400,14.25 L400,15.75 C400,16.0261424 399.776142,16.25 399.5,16.25 Z" transform="translate(-387 -6)"/></svg>
|
After Width: | Height: | Size: 960 B |
1
packages/netlify-cms-ui-default/src/Icon/images/add.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-add@2x-a" d="M19,14 L15,14 L15,14 C14.4477153,14 14,14.4477153 14,15 L14,19 L14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 L11,20 C10.4477153,20 10,19.5522847 10,19 L10,15 L10,15 C10,14.4477153 9.55228475,14 9,14 L5,14 L5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 L4,11 C4,10.4477153 4.44771525,10 5,10 L9,10 L9,10 C9.55228475,10 10,9.55228475 10,9 L10,5 L10,5 C10,4.44771525 10.4477153,4 11,4 L13,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,9 L14,9 C14,9.55228475 14.4477153,10 15,10 L19,10 L19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 L20,13 C20,13.5522847 19.5522847,14 19,14 Z"/></svg>
|
After Width: | Height: | Size: 737 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><polygon id="Shape" fill="#313D3E" points="10.5060636 19.9155 12.4088613 17.9626642 7.66471461 13.2928984 21.3102222 13.2928984 21.3102222 10.5502731 7.66471461 10.5502731 12.4088613 5.86833577 10.5060636 3.9155 2.55677783 11.9148238"/></svg>
|
After Width: | Height: | Size: 267 B |
1
packages/netlify-cms-ui-default/src/Icon/images/bold.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M13.2,15.8190158 C14.012093,15.24159 14.5813953,14.2935774 14.5813953,13.4145112 C14.5813953,11.4667763 13.1162791,9.96719284 11.2325581,9.96719284 L6,9.96719284 L6,22.0328072 L11.8939535,22.0328072 C13.6437209,22.0328072 15,20.5676969 15,18.766473 C15,17.456492 14.28,16.3361135 13.2,15.8190158 Z M8.10791016,12.1217668 L10.9573975,12.1217668 C11.7457556,12.1217668 12.3821411,12.6991927 12.3821411,13.4145112 C12.3821411,14.1298298 11.7457556,14.7072556 10.9573975,14.7072556 L8.10791016,14.7072556 L8.10791016,12.1217668 Z M11.432312,19.8782332 L8.10791016,19.8782332 L8.10791016,17.2927444 L11.432312,17.2927444 C12.2206702,17.2927444 12.8570557,17.8701702 12.8570557,18.5854888 C12.8570557,19.3008073 12.2206702,19.8782332 11.432312,19.8782332 Z" transform="translate(0 -6)"/></svg>
|
After Width: | Height: | Size: 894 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="-1 -2 16 16"><path d="M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z"/></svg>
|
After Width: | Height: | Size: 923 B |
@ -0,0 +1,8 @@
|
||||
<svg viewBox="0 0 24 24">
|
||||
<g id="caret" transform="translate(2.000000, 3.000000)" fill-rule="nonzero">
|
||||
<polygon points="3.1231456 0.32943568 0.86323447 2.46718624 9.5186981 11.6172615 18.8632345 2.5123409 16.6923073 0.28428102 9.6090173 7.1859389"/>
|
||||
</g>
|
||||
<g id="caret" transform="translate(2.000000, 10.000000)" fill-rule="nonzero">
|
||||
<polygon points="3.1231456 0.32943568 0.86323447 2.46718624 9.5186981 11.6172615 18.8632345 2.5123409 16.6923073 0.28428102 9.6090173 7.1859389"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 511 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><polygon points="5.1231456 6.32943568 2.86323447 8.46718624 11.5186981 17.6172615 20.8632345 8.5123409 18.6923073 6.28428102 11.6090173 13.1859389"/></svg>
|
After Width: | Height: | Size: 180 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><circle id="icon-circle@2x-a" cx="12" cy="12" r="4"/></svg>
|
After Width: | Height: | Size: 185 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><polygon points="11.915701 9.96082949 6.28206042 4.34447005 4.39841986 6.40092166 10.0320604 12.0172811 4.41570097 17.6336406 6.26477931 19.65553 11.8811388 14.0391705 17.4974982 19.6382488 19.3811388 17.5990783 13.7647793 12 19.3984199 6.36635945 17.5320604 4.34447005"/></svg>
|
After Width: | Height: | Size: 303 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M253.102564,19.3198903 L250.051331,16 L253.102564,12.6801097 L251.778331,11.6697083 L247.798462,16 L251.778331,20.3302917 L253.102564,19.3198903 Z M248,10 L260,10 C261.104569,10 262,10.8954305 262,12 L262,20 C262,21.1045695 261.104569,22 260,22 L248,22 C246.895431,22 246,21.1045695 246,20 L246,12 L246,12 C246,10.8954305 246.895431,10 248,10 L248,10 Z M254.927099,19.3198903 L256.144121,20.2553711 L260.12399,15.9250793 L256.144121,11.5947876 L254.927099,12.6801097 L257.978333,16 L254.927099,19.3198903 Z" transform="translate(-243 -6)"/></svg>
|
After Width: | Height: | Size: 653 B |
1
packages/netlify-cms-ui-default/src/Icon/images/code.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M75,20.6 L70.6486486,16 L75,11.4 L73.6756757,10 L68,16 L73.6756757,22 L75,20.6 Z M78,20.6 L82.3513514,16 L78,11.4 L79.3243243,10 L85,16 L79.3243243,22 L78,20.6 L78,20.6 Z" transform="translate(-66 -6)"/></svg>
|
After Width: | Height: | Size: 316 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><path d="M3,15 L3,13 L21,13 L21,15 L3,15 Z M3,11 L3,9 L21,9 L21,11 L3,11 Z"/></svg>
|
After Width: | Height: | Size: 108 B |
1
packages/netlify-cms-ui-default/src/Icon/images/eye.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><path d="M22.5567568,11.4918919 C21.1297297,10 16.8486486,6 12.3945946,6 C7.59459459,6 3.55135135,10 2.21081081,11.4918919 C1.92972973,11.7945946 1.92972973,12.2702703 2.21081081,12.572973 C3.55135135,14.0432432 7.61621622,18 12.3945946,18 C17.1513514,18 21.1945946,14.0864865 22.5567568,12.5945946 C22.8594595,12.2918919 22.8594595,11.7945946 22.5567568,11.4918919 Z M12.4162162,16.1837838 C10.1243243,16.1837838 8.26486486,14.3243243 8.26486486,12.0324324 C8.26486486,9.74054054 10.1243243,7.88108108 12.4162162,7.88108108 C14.7081081,7.88108108 16.5675676,9.74054054 16.5675676,12.0324324 C16.5675676,14.3243243 14.6864865,16.1837838 12.4162162,16.1837838 Z M12.4162162,13.3945946 C13.1685176,13.3945946 13.7783784,12.7847338 13.7783784,12.0324324 C13.7783784,11.280131 13.1685176,10.6702703 12.4162162,10.6702703 C11.6639148,10.6702703 11.0540541,11.280131 11.0540541,12.0324324 C11.0540541,12.7847338 11.6639148,13.3945946 12.4162162,13.3945946 Z"/></svg>
|
After Width: | Height: | Size: 985 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-folder@2x-a" d="M10,5 L5,5 L5,5 C3.8954305,5 3,5.8954305 3,7 L3,17 L3,17 C3,18.1045695 3.8954305,19 5,19 L19,19 L19,19 C20.1045695,19 21,18.1045695 21,17 L21,9 L21,9 C21,7.8954305 20.1045695,7 19,7 L12,7 L10,5 Z"/></svg>
|
After Width: | Height: | Size: 361 B |
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" version="1.1" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
|
After Width: | Height: | Size: 670 B |
@ -0,0 +1 @@
|
||||
<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M22.616 14.971L21.52 11.5l-2.173-6.882a.37.37 0 0 0-.71 0l-2.172 6.882H9.252L7.079 4.617a.37.37 0 0 0-.71 0l-2.172 6.882L3.1 14.971c-.1.317.01.664.27.86l9.487 7.094 9.487-7.094a.781.781 0 0 0 .27-.86" fill="#FC6D26"/><path d="M12.858 22.925L16.465 11.5H9.251z" fill="#E24329"/><path d="M12.858 22.925L9.251 11.5H4.197z" fill="#FC6D26"/><path d="M4.197 11.499L3.1 14.971c-.1.317.01.664.27.86l9.487 7.094L4.197 11.5z" fill="#FCA326"/><path d="M4.197 11.499H9.25L7.08 4.617a.37.37 0 0 0-.71 0l-2.172 6.882z" fill="#E24329"/><path d="M12.858 22.925L16.465 11.5h5.055z" fill="#FC6D26"/><path d="M21.52 11.499l1.096 3.472c.1.317-.01.664-.271.86l-9.487 7.094L21.52 11.5z" fill="#FCA326"/><path d="M21.52 11.499h-5.055l2.172-6.882a.37.37 0 0 1 .71 0l2.173 6.882z" fill="#E24329"/></g></svg>
|
After Width: | Height: | Size: 889 B |
1
packages/netlify-cms-ui-default/src/Icon/images/grid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-grid@2x-a" d="M5,3 L8,3 L8,3 C9.1045695,3 10,3.8954305 10,5 L10,8 L10,8 C10,9.1045695 9.1045695,10 8,10 L5,10 L5,10 C3.8954305,10 3,9.1045695 3,8 L3,5 L3,5 C3,3.8954305 3.8954305,3 5,3 L5,3 Z M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,8 L21,8 C21,9.1045695 20.1045695,10 19,10 L16,10 L16,10 C14.8954305,10 14,9.1045695 14,8 L14,5 L14,5 C14,3.8954305 14.8954305,3 16,3 Z M16,14 L19,14 C20.1045695,14 21,14.8954305 21,16 L21,19 L21,19 C21,20.1045695 20.1045695,21 19,21 L16,21 C14.8954305,21 14,20.1045695 14,19 L14,16 C14,14.8954305 14.8954305,14 16,14 Z M5,14 L8,14 L8,14 C9.1045695,14 10,14.8954305 10,16 L10,19 L10,19 C10,20.1045695 9.1045695,21 8,21 L5,21 C3.8954305,21 3,20.1045695 3,19 L3,16 C3,14.8954305 3.8954305,14 5,14 L5,14 Z"/></svg>
|
After Width: | Height: | Size: 891 B |
1
packages/netlify-cms-ui-default/src/Icon/images/h1.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M147,10 L157,10 L157,22 L147,22 L147,10 Z M149,10 L149,15 L155,15 L155,10 L149,10 Z M149,17 L149,22 L155,22 L155,17 L149,17 Z M161.068,22 L161.068,16.305 L161.042,16.305 L159.43,17.072 L159.105,15.59 L161.341,14.55 L162.979,14.55 L162.979,22 L161.068,22 Z" transform="translate(-144 -6)"/></svg>
|
After Width: | Height: | Size: 402 B |
1
packages/netlify-cms-ui-default/src/Icon/images/h2.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" fill-rule="evenodd" d="M195.036,22 L189.504,22 L189.504,20.896 L190.512,19.984 C192.216,18.46 193.044,17.584 193.068,16.672 C193.068,16.036 192.684,15.532 191.784,15.532 C191.112,15.532 190.524,15.868 190.116,16.18 L189.6,14.872 C190.188,14.428 191.1,14.068 192.156,14.068 C193.92,14.068 194.892,15.1 194.892,16.516 C194.892,17.824 193.944,18.868 192.816,19.876 L192.096,20.476 L192.096,20.5 L195.036,20.5 L195.036,22 Z M180,14 L187,14 L187,22 L180,22 L180,14 Z M182,14 L182,17 L185,17 L185,14 L182,14 Z M182,19 L182,22 L185,22 L185,19 L182,19 Z" transform="translate(-177 -6)"/></svg>
|
After Width: | Height: | Size: 689 B |
1
packages/netlify-cms-ui-default/src/Icon/images/home.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path id="icon-home@2x-a" d="M21,13 L19,13 L19,13 C18.4477153,13 18,13.4477153 18,14 L18,20 L14,20 L14,15 L14,15 C14,14.4477153 13.5522847,14 13,14 L11,14 L11,14 C10.4477153,14 10,14.4477153 10,15 L10,20 L6,20 L6,14 L6,14 C6,13.4477153 5.55228475,13 5,13 L3,13 L12,4 L21,13 Z"/></svg>
|
After Width: | Height: | Size: 387 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M359,9 L371,9 L371,9 C372.656854,9 374,10.3431458 374,12 L374,20 L374,20 C374,21.6568542 372.656854,23 371,23 L359,23 L359,23 C357.343146,23 356,21.6568542 356,20 L356,12 L356,12 C356,10.3431458 357.343146,9 359,9 L359,9 Z M361.48655,16.204594 L359.147781,19.436749 C359.02437,19.6073013 358.957932,19.8124509 358.957932,20.02297 C358.957932,20.5752547 359.405647,21.02297 359.957932,21.02297 L359.957932,21.02297 L369.911144,21.02297 C370.132248,21.02297 370.347118,20.9496923 370.522149,20.814597 C370.959353,20.4771484 371.04022,19.8491688 370.702771,19.4119653 L370.702771,19.4119653 L367.297466,15 L363.845782,19.4690437 L361.48655,16.204594 Z M362.5,14 C363.328427,14 364,13.3284271 364,12.5 C364,11.6715729 363.328427,11 362.5,11 C361.671573,11 361,11.6715729 361,12.5 C361,13.3284271 361.671573,14 362.5,14 Z" transform="translate(-354 -6)"/></svg>
|
After Width: | Height: | Size: 963 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><polygon fill="#7A8291" points="41 10.012 41 12 43.312 12 40.387 20 38 20 38 21.988 45 21.988 45 20 42.953 20 45.878 12 48 12 48 10.012" transform="translate(-33 -6)"/></svg>
|
After Width: | Height: | Size: 257 B |
1
packages/netlify-cms-ui-default/src/Icon/images/link.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M113.682856,16.3147066 L112.427056,15.0624489 L113.6802,13.80842 C114.376292,13.1114421 114.370978,11.9955689 113.6802,11.3047903 C113.348892,10.9714823 112.898341,10.7840626 112.428385,10.7840626 C111.958429,10.7840626 111.507877,10.9714823 111.17657,11.3047903 L108.670283,13.8110768 C108.337194,14.1425007 108.149926,14.5930086 108.149926,15.0628917 C108.149926,15.5327748 108.337194,15.9832827 108.670283,16.3147066 L107.420682,17.5616505 L106.795439,16.9364073 C105.757522,15.899645 105.756333,14.2178637 106.792782,13.1796343 L109.927855,10.0436765 C111.309412,8.66211925 113.553557,8.67097538 114.935114,10.0525326 C116.316603,11.4353285 116.317792,13.6755309 114.937771,15.0597921 L113.682856,16.3147066 Z M104.289153,15.6885777 L104.289153,15.6885777 L104.289153,15.6859209 L105.54141,16.9346361 L104.289153,18.1913218 C103.95601,18.5228972 103.76872,18.9735516 103.76872,19.4435795 C103.76872,19.9136074 103.95601,20.3642618 104.289153,20.6958372 C104.986131,21.3910438 106.102004,21.3866158 106.792782,20.6958372 L109.299069,18.1895506 C109.996047,17.4925727 109.989848,16.3766995 109.299069,15.6859209 L110.547784,14.4372057 L111.170371,15.0615633 C111.669808,15.5587427 111.951021,16.2341324 111.952017,16.938848 C111.953014,17.6435635 111.673713,18.319746 111.175684,18.8183363 L108.040612,21.9534085 C106.657969,23.3339993 104.418071,23.33281 103.036895,21.9507517 C101.655406,20.5679558 101.654217,18.3277534 103.034238,16.9434922 L104.289153,15.6885777 Z" transform="translate(-99 -6)"/></svg>
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M281,12.5 C280.171573,12.5 279.5,11.8284271 279.5,11 C279.5,10.1715729 280.171573,9.5 281,9.5 C281.828427,9.5 282.5,10.1715729 282.5,11 C282.5,11.8284271 281.828427,12.5 281,12.5 Z M281,17.5 C280.171573,17.5 279.5,16.8284271 279.5,16 C279.5,15.1715729 280.171573,14.5 281,14.5 C281.828427,14.5 282.5,15.1715729 282.5,16 C282.5,16.8284271 281.828427,17.5 281,17.5 Z M281,22.5 C280.171573,22.5 279.5,21.8284271 279.5,21 C279.5,20.1715729 280.171573,19.5 281,19.5 C281.828427,19.5 282.5,20.1715729 282.5,21 C282.5,21.8284271 281.828427,22.5 281,22.5 Z M285,10 L295,10 L295,11.964 L285,11.964 L285,10 Z M285,15 L295,15 L295,17 L285,17 L285,15 Z M285,20 L295,20 L295,22 L285,22 L285,20 Z" transform="translate(-276 -6)"/></svg>
|
After Width: | Height: | Size: 829 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M329.013584,10.0231934 L329.013584,12.0231934 L318.013584,12.0231934 L318.013584,10.0231934 L329.013584,10.0231934 Z M329.013584,15.0231934 L329.013584,17.0231934 L318.013584,17.0231934 L318.013584,15.0231934 L329.013584,15.0231934 Z M329.013584,20.0231934 L329.013584,22.0231934 L318.013584,22.0231934 L318.013584,20.0231934 L329.013584,20.0231934 Z M312.603803,14.9847917 L312.603803,10.2309455 L312.586147,10.2309455 L311.491468,10.7755609 L311.270766,9.72325319 L312.789193,8.98479165 L313.901528,8.98479165 L313.901528,14.9847917 L312.603803,14.9847917 Z M315.0623,22.9817785 L311.0623,22.9817785 L311.0623,22.1470995 L311.791151,21.4575821 C313.023255,20.3053623 313.621953,19.6430627 313.639307,18.9535453 C313.639307,18.4726976 313.361649,18.0916485 312.71089,18.0916485 C312.22499,18.0916485 311.799827,18.3456812 311.504817,18.5815688 L311.131715,17.5926557 C311.556877,17.2569696 312.216313,16.9847917 312.979871,16.9847917 C314.255359,16.9847917 314.958179,17.765035 314.958179,18.8356015 C314.958179,19.8245146 314.272712,20.6138306 313.457094,21.3759287 L312.936487,21.8295586 L312.936487,21.8477038 L315.0623,21.8477038 L315.0623,22.9817785 Z" transform="translate(-309 -6)"/></svg>
|
After Width: | Height: | Size: 1.3 KiB |
1
packages/netlify-cms-ui-default/src/Icon/images/list.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-list@2x-a" d="M4.5,3 L19.5,3 C20.3284271,3 21,3.67157288 21,4.5 L21,4.5 C21,5.32842712 20.3284271,6 19.5,6 L4.5,6 C3.67157288,6 3,5.32842712 3,4.5 L3,4.5 L3,4.5 C3,3.67157288 3.67157288,3 4.5,3 L4.5,3 Z M4.5,8 L19.5,8 C20.3284271,8 21,8.67157288 21,9.5 C21,10.3284271 20.3284271,11 19.5,11 L4.5,11 C3.67157288,11 3,10.3284271 3,9.5 C3,8.67157288 3.67157288,8 4.5,8 L4.5,8 Z M4.5,13 L19.5,13 C20.3284271,13 21,13.6715729 21,14.5 C21,15.3284271 20.3284271,16 19.5,16 L4.5,16 C3.67157288,16 3,15.3284271 3,14.5 C3,13.6715729 3.67157288,13 4.5,13 L4.5,13 Z M4.5,18 L19.5,18 C20.3284271,18 21,18.6715729 21,19.5 C21,20.3284271 20.3284271,21 19.5,21 L4.5,21 C3.67157288,21 3,20.3284271 3,19.5 C3,18.6715729 3.67157288,18 4.5,18 L4.5,18 Z"/></svg>
|
After Width: | Height: | Size: 881 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><path d="M1,17 L1,8 L3.75,8 L6.5,11.3088235 L9.25,8 L12,8 L12,17 L9.25,17 L9.25,11.8382353 L6.5,15.1470588 L3.75,11.8382353 L3.75,17 L1,17 Z M19,17 L15,12.6323529 L17.6666667,12.6323529 L17.6666667,8 L20.3333333,8 L20.3333333,12.6323529 L23,12.6323529 L19,17 Z"/></svg>
|
After Width: | Height: | Size: 294 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-media-alt@2x-a" d="M5.02734375,4.04492188 L19.0015392,4.04492188 C20.6583934,4.04492188 22.0015392,5.38806763 22.0015392,7.04492187 L22.0015392,17.0357666 L22.0015392,17.0357666 C22.0015392,18.6926209 20.6583934,20.0357666 19.0015392,20.0357666 L5.02734375,20.0357666 L5.02734375,20.0357666 C3.3704895,20.0357666 2.02734375,18.6926209 2.02734375,17.0357666 L2.02734375,7.04492188 L2.02734375,7.04492188 C2.02734375,5.38806763 3.3704895,4.04492188 5.02734375,4.04492188 L5.02734375,4.04492188 Z M7.90074208,12.5249382 L3.78704271,18.0285026 L20.2418402,18.0285026 L14.7569077,11.1490471 L10.6843453,16.2536031 L7.90074208,12.5249382 Z M9.49298096,10 C10.3252846,10 11,9.32528459 11,8.49298096 C11,7.66067732 10.3252846,6.98596191 9.49298096,6.98596191 C8.66067732,6.98596191 7.98596191,7.66067732 7.98596191,8.49298096 C7.98596191,9.32528459 8.66067732,10 9.49298096,10 Z"/></svg>
|
After Width: | Height: | Size: 1020 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-media@2x-a" d="M21,15.25 L21,4.75 C21,3.7875 20.2125,3 19.25,3 L8.75,3 C7.7875,3 7,3.7875 7,4.75 L7,15.25 C7,16.2125 7.7875,17 8.75,17 L19.25,17 C20.2125,17 21,16.2125 21,15.25 Z M11.3587402,11.4772949 L13.1459927,13.8713378 L15.7608398,10.5938843 L19.2825195,15.0109375 L8.71748047,15.0109375 L11.3587402,11.4772949 Z M3,7 L3,19.25 C3,20.2125 3.7875,21 4.75,21 L17,21 L17,19.0444336 L5.98059082,19.0444336 L5.98059082,19.0444336 C5.42830607,19.0444336 4.98059082,18.5967183 4.98059082,18.0444336 L4.98059082,7 L3,7 Z"/></svg>
|
After Width: | Height: | Size: 667 B |
After Width: | Height: | Size: 18 KiB |
21
packages/netlify-cms-ui-default/src/Icon/images/netlify.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<svg viewBox="0 0 295 284">
|
||||
<g transform="translate(149.500000, 142.500000) rotate(-315.000000) translate(-149.500000, -142.500000) translate(45.000000, 38.000000)">
|
||||
<g transform="translate(4.000000, 4.000000)" fill="#3FB5A0">
|
||||
<path d="M0,0 L200,0 L200,200 L0,200 L0,0 L0,0 Z"></path>
|
||||
</g>
|
||||
<g stroke="#FFFFFF" stroke-width="8">
|
||||
<path d="M209,70 L0,209 L209,70 Z"></path>
|
||||
<path d="M209,6 L0,93 L209,6 Z"></path>
|
||||
<path d="M209,180 L0,145 L209,180 Z"></path>
|
||||
<path d="M88,209 L43,0 L88,209 Z"></path>
|
||||
<path d="M209,172 L89,0 L209,172 Z"></path>
|
||||
<path d="M137,0 L57,209 L137,0 Z"></path>
|
||||
</g>
|
||||
<g transform="translate(43.000000, 33.000000)" fill="#FFFFFF">
|
||||
<circle class="no-fill" cx="14" cy="38" r="14"></circle>
|
||||
<circle class="no-fill" cx="77" cy="12" r="12"></circle>
|
||||
<circle class="no-fill" cx="116" cy="70" r="12"></circle>
|
||||
<circle class="no-fill" cx="35" cy="125" r="16"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 993 B |
1
packages/netlify-cms-ui-default/src/Icon/images/page.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-page@2x-a" d="M13.365625,3 L18.990625,8.49263495 L19,19.1691217 C19,20.1761048 18.15625,21 17.125,21 L5.865625,21 C4.834375,21 4,20.1761048 4,19.1691217 L4,4.83087832 C4,3.82389524 4.834375,3 5.865625,3 L13.365625,3 Z M6.94,12.1099997 L6.94,12.1099997 C6.42085233,12.1099997 6,12.530852 6,13.0499997 C6,13.5691473 6.42085233,13.9899997 6.94,13.9899997 L16.06,13.9899997 C16.5791477,13.9899997 17,13.5691473 17,13.0499997 C17,12.530852 16.5791477,12.1099997 16.06,12.1099997 L6.94,12.1099997 Z M6.94,16 L6.94,16 C6.42085233,16 6,16.4208523 6,16.94 C6,17.4591477 6.42085233,17.88 6.94,17.88 L16.06,17.88 C16.5791477,17.88 17,17.4591477 17,16.94 C17,16.4208523 16.5791477,16 16.06,16 L6.94,16 Z M12.012598,10 L17.1518954,10 L12.012598,4.94685109 L12.012598,10 Z"/></svg>
|
After Width: | Height: | Size: 908 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path id="icon-pages-alt@2x-a" d="M21,15.25 C21,16.2125 20.2125,17 19.25,17 L8.75,17 C7.7875,17 7,16.2125 7,15.25 L7,4.75 C7,3.7875 7.7875,3 8.75,3 L19.25,3 C20.2125,3 21,3.7875 21,4.75 L21,15.25 Z M9,10 L9,12 L19,12 L19,10 L9,10 Z M9,6 L9,8 L19,8 L19,6 L9,6 Z M3,7 L3,19.25 C3,20.2125 3.7875,21 4.75,21 L17,21 L17,19.0444336 L5.98059082,19.0444336 L5.98059082,19.0444336 C5.42830607,19.0444336 4.98059082,18.5967183 4.98059082,18.0444336 L4.98059082,7 L3,7 Z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 599 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path id="icon-pages@2x-a" d="M3,8 L4.98059082,8 L4.98059082,19.0444336 C4.98059082,19.5967183 5.42830607,20.0444336 5.98059082,20.0444336 L17,20.0444336 L17,22 L4.75,22 C3.7875,22 3,21.2125 3,20.25 L3,8 Z M9,2 L15.0737305,2 L20,7.04125977 L20,16 L20,16 C20,17.1045695 19.1045695,18 18,18 L9,18 C7.8954305,18 7,17.1045695 7,16 L7,4 L7,4 C7,2.8954305 7.8954305,2 9,2 L9,2 Z M9.94,10.1099997 C9.42085233,10.1099997 9,10.530852 9,11.0499997 C9,11.5691473 9.42085233,11.9899997 9.94,11.9899997 L17.06,11.9899997 C17.5791477,11.9899997 18,11.5691473 18,11.0499997 C18,10.530852 17.5791477,10.1099997 17.06,10.1099997 L9.94,10.1099997 Z M9.94,14 C9.42085233,14 9,14.4208523 9,14.94 C9,15.4591477 9.42085233,15.88 9.94,15.88 L17.06,15.88 C17.5791477,15.88 18,15.4591477 18,14.94 C18,14.4208523 17.5791477,14 17.06,14 L9.94,14 Z M13.9940186,7.87573242 L18.3376465,7.87573242 L13.9940186,3.53430176 L13.9940186,7.87573242 Z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M214.995361,20.9536133 L217.981445,20.9536133 L219.972168,16.972168 L219.972168,11 L214,11 L214,16.972168 L216.986084,16.972168 L214.995361,20.9536133 Z M222.958252,20.9536133 L225.944336,20.9536133 L227.935059,16.972168 L227.935059,11 L221.962891,11 L221.962891,16.972168 L224.948975,16.972168 L222.958252,20.9536133 Z" transform="translate(-210 -6)"/></svg>
|
After Width: | Height: | Size: 466 B |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><path d="M12.8086276,8.18202896 C12.8086276,8.67909121 12.4068431,9.08087571 11.9097809,9.08087571 C11.4127186,9.08087571 11.0109341,8.67909121 11.0109341,8.18202896 L11.0109341,4.05810136 L8.57595829,6.49397606 C8.22450921,6.84542514 7.65643807,6.84542514 7.30498899,6.49397606 C6.95353991,6.14252698 6.95353991,5.57445583 7.30498899,5.22300675 L11.2742962,1.25280065 C11.6113638,0.915733117 12.208198,0.915733117 12.5452655,1.25280065 L16.5712001,5.27873525 C16.9226492,5.63018433 16.9226492,6.19825547 16.5712001,6.54970455 C16.395925,6.72497967 16.1658203,6.81306665 15.9357155,6.81306665 C15.7056107,6.81306665 15.475506,6.72497967 15.3002308,6.54970455 L12.8086276,4.05810136 L12.8086276,8.18202896 Z M12.8238528,19.9313372 L15.2588287,17.4963613 C15.6102777,17.1458111 16.1783489,17.1449123 16.529798,17.4963613 C16.881247,17.8478104 16.881247,18.4158816 16.529798,18.7673306 L12.5604907,22.7366379 C12.3852156,22.911913 12.1551108,23 11.9250061,23 C11.6949013,23 11.4647965,22.911913 11.2895214,22.7366379 L7.26358681,18.7107033 C6.91213773,18.3592542 6.91213773,17.7911831 7.26358681,17.439734 C7.61503589,17.0882849 8.18310704,17.0882849 8.53455612,17.439734 L11.0261593,19.9313372 L11.0261593,15.8074096 C11.0261593,15.3103473 11.4279438,14.9085628 11.9250061,14.9085628 C12.4220683,14.9085628 12.8238528,15.3103473 12.8238528,15.8074096 L12.8238528,19.9313372 Z M11.9220368,13.4529523 C11.0848678,13.4529523 10.4062083,12.7742927 10.4062083,11.9371237 C10.4062083,11.0999547 11.0848678,10.4212951 11.9220368,10.4212951 C12.7592059,10.4212951 13.4378654,11.0999547 13.4378654,11.9371237 C13.4378654,12.7742927 12.7592059,13.4529523 11.9220368,13.4529523 Z"/></svg>
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24"><path d="M20.5257919,18.2361128 C21.1580694,18.8683902 21.1580694,19.8935145 20.5257919,20.5257919 C19.8935145,21.1580694 18.8683902,21.1580694 18.2361128,20.5257919 L14.8946276,17.1843067 C14.6577899,16.947469 14.2290245,16.8875366 13.9309216,17.0468764 C13.9309216,17.0468764 13.9714624,17.0371796 13.7107036,17.1549733 C12.8475753,17.5448779 11.8896085,17.7619048 10.8809524,17.7619048 C7.08070734,17.7619048 4,14.6811974 4,10.8809524 C4,7.08070734 7.08070734,4 10.8809524,4 C14.6811974,4 17.7619048,7.08070734 17.7619048,10.8809524 C17.7619048,11.8929804 17.5434244,12.8539797 17.1510571,13.7193567 C17.0342217,13.9770405 17.0459207,13.9331809 17.0459207,13.9331809 C16.8855115,14.2273355 16.9476281,14.657949 17.1843067,14.8946276 L20.5257919,18.2361128 Z M10.8490096,14.7701118 C13.0145745,14.7701118 14.7701118,13.0145745 14.7701118,10.8490096 C14.7701118,8.68344474 13.0145745,6.92790751 10.8490096,6.92790751 C8.68344474,6.92790751 6.92790751,8.68344474 6.92790751,10.8490096 C6.92790751,13.0145745 8.68344474,14.7701118 10.8490096,14.7701118 Z"/></svg>
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-settings@2x-a" d="M18.886759,12.8744229 C18.9238016,12.5867777 18.9515835,12.2991325 18.9515835,11.9935095 C18.9515835,11.6878864 18.9238016,11.4002412 18.886759,11.112596 L20.8407543,9.6294255 C21.0167064,9.49459181 21.0630096,9.25189118 20.951882,9.0541351 L19.0997538,5.94397141 C18.9886261,5.74621534 18.7385888,5.67430404 18.5348547,5.74621534 L16.2289551,6.64510658 C15.7474018,6.28555008 15.2288059,5.98891597 14.6639068,5.76419316 L14.3120024,3.38213137 C14.2842205,3.16639747 14.089747,3.00459705 13.858231,3.00459705 L10.1539746,3.00459705 C9.92245861,3.00459705 9.72798515,3.16639747 9.70020323,3.38213137 L9.34829887,5.76419316 C8.78339978,5.98891597 8.26480388,6.29453899 7.78325055,6.64510658 L5.47735096,5.74621534 C5.26435622,5.66531513 5.02357956,5.74621534 4.91245187,5.94397141 L3.06032368,9.0541351 C2.93993535,9.25189118 2.9954992,9.49459181 3.17145137,9.6294255 L5.12544661,11.112596 C5.08840404,11.4002412 5.06062212,11.6968754 5.06062212,11.9935095 C5.06062212,12.2901436 5.08840404,12.5867777 5.12544661,12.8744229 L3.17145137,14.3575934 C2.9954992,14.4924271 2.94919599,14.7351277 3.06032368,14.9328838 L4.91245187,18.0430475 C5.02357956,18.2408036 5.27361686,18.3127149 5.47735096,18.2408036 L7.78325055,17.3419123 C8.26480388,17.7014688 8.78339978,17.998103 9.34829887,18.2228258 L9.70020323,20.6048876 C9.72798515,20.8206215 9.92245861,20.9824219 10.1539746,20.9824219 L13.858231,20.9824219 C14.089747,20.9824219 14.2842205,20.8206215 14.3120024,20.6048876 L14.6639068,18.2228258 C15.2288059,17.998103 15.7474018,17.6924799 16.2289551,17.3419123 L18.5348547,18.2408036 C18.7478494,18.3217038 18.9886261,18.2408036 19.0997538,18.0430475 L20.951882,14.9328838 C21.0630096,14.7351277 21.0167064,14.4924271 20.8407543,14.3575934 L18.886759,12.8744229 Z M12.0094773,15.00571 C10.3479125,15.00571 8.99627686,13.6540744 8.99627686,11.9925095 C8.99627686,10.3309447 10.3479125,8.97930908 12.0094773,8.97930908 C13.6710421,8.97930908 15.0226778,10.3309447 15.0226778,11.9925095 C15.0226778,13.6540744 13.6710421,15.00571 12.0094773,15.00571 Z"/></svg>
|
After Width: | Height: | Size: 2.2 KiB |
1
packages/netlify-cms-ui-default/src/Icon/images/user.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#1E2532" fill-rule="nonzero" d="M16.5,18 C13.475,18 11,15.3658537 11,12.1463415 L11,11.8536585 C11,8.63414634 13.475,6 16.5,6 C19.525,6 22,8.63414634 22,11.8536585 L22,12.1463415 C22,15.3658537 19.525,18 16.5,18 Z M16,29 C12.2615755,29 8.8083215,27.3110381 6.60924829,24.6648788 C5.70213059,23.6009591 5.81208425,21.9641595 6.91162085,21.0639197 C7.73627331,20.4091999 8.75334467,20 9.88036969,20 L22.5250407,20 C23.2672279,20 23.9544382,20.19096 24.5866718,20.4910399 C26.0160694,21.2275997 26.455884,23.0826392 25.4663011,24.3647989 C23.2397395,27.1746381 19.8758665,29 16,29 Z" transform="translate(-1381 -11.437) translate(1381 11.437)"/></g></svg>
|
After Width: | Height: | Size: 825 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-workflow@2x-a" d="M10,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,14 L14,14 C14,14.5522847 13.5522847,15 13,15 L10,15 L10,15 C9.44771525,15 9,14.5522847 9,14 L9,5 L9,5 C9,4.44771525 9.44771525,4 10,4 Z M17,4 L20,4 C20.5522847,4 21,4.44771525 21,5 L21,15 C21,15.5522847 20.5522847,16 20,16 L17,16 C16.4477153,16 16,15.5522847 16,15 L16,5 L16,5 C16,4.44771525 16.4477153,4 17,4 Z M3,4 L6,4 C6.55228475,4 7,4.44771525 7,5 L7,19 C7,19.5522847 6.55228475,20 6,20 L3,20 L3,20 C2.44771525,20 2,19.5522847 2,19 L2,5 L2,5 C2,4.44771525 2.44771525,4 3,4 L3,4 Z"/></svg>
|
After Width: | Height: | Size: 701 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path d="M2.97546387,7.00422571 C2.97651616,6.52724326 3.38665861,6.05730797 3.87228835,6.05627441 L13.3233643,6.05627441 L12.506843,7.95217701 L3.87228835,7.95217701 C3.38665861,7.95114346 2.97651616,7.48120817 2.97546387,7.00422571 Z M2.9921875,15.97484 C2.99323979,16.4518225 3.38665861,17.0372965 3.87228835,17.0383301 L8.56872559,17.0383301 C8.5795632,16.458396 8.66851294,15.6128957 8.77355957,15.0421143 L3.87228835,15.0421143 C3.38665861,15.0431478 2.99323979,15.5661539 2.9921875,16.0431363 L2.9921875,15.97484 Z M10.913208,10.9663086 L11.6745737,8.96921439 L3.87228835,8.96921439 C3.38622207,8.96921439 2.93920898,9.49035027 2.93920898,9.96776149 C2.93920898,10.4451727 3.38622207,10.9663086 3.87228835,10.9663086 L10.913208,10.9663086 Z M2.94970703,13.0409926 C2.95075932,13.5179751 3.38665861,14.0061686 3.87228835,14.0072021 L9.18029785,14.0072021 C9.27596099,13.7491261 9.48133689,13.2906219 9.59868367,13.0388099 L10.0444739,12.0747831 L3.87228835,12.0747831 C3.38665861,12.0758166 2.95075932,12.5640102 2.94970703,13.0409926 Z M20.0486682,7.13319462 L20.444184,6.28438093 C20.8326218,5.52085606 20.7650931,4.60986167 20.2681537,3.90965021 C19.7712143,3.20943875 18.9243532,2.83201406 18.0606023,2.92580001 C17.1968513,3.01958597 16.4543737,3.56958084 16.1251518,4.35949678 L11.4125814,14.5491459 C10.5512169,16.4129184 10.3070507,18.495195 10.714496,20.5024959 C10.7529561,20.6943608 10.8833126,20.8562077 11.0645605,20.9371261 C11.2458083,21.0180445 11.4556723,21.0080896 11.6281375,20.9103927 C13.4349914,19.889889 14.8702434,18.3382049 15.7316136,16.47403 L19.3604708,8.63075838 L20.0486682,7.13319462 Z"/></svg>
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,29 @@
|
||||
.nc-listItemTopBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 26px;
|
||||
border-radius: var(--borderRadius) var(--borderRadius) 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nc-listItemTopBar-toggleButton,
|
||||
.nc-listItemTopBar-dragIcon,
|
||||
.nc-listItemTopBar-removeButton {
|
||||
color: var(--controlLabelColor);
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nc-listControl-dragIcon {
|
||||
width: 100%;
|
||||
cursor: move;
|
||||
}
|
||||
|
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import c from 'classnames';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
|
||||
export const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC, className }) => {
|
||||
const DragHandle = dragHandleHOC && dragHandleHOC(() =>
|
||||
<span className="nc-listItemTopBar-dragIcon">
|
||||
<Icon type="drag-handle" size="small"/>
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={c('nc-listItemTopBar', className)}>
|
||||
{
|
||||
onCollapseToggle
|
||||
? <button className="nc-listItemTopBar-toggleButton" onClick={onCollapseToggle}>
|
||||
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'}/>
|
||||
</button>
|
||||
: null
|
||||
}
|
||||
{ dragHandleHOC ? <DragHandle/> : null }
|
||||
{
|
||||
onRemove
|
||||
? <button className="nc-listItemTopBar-removeButton" onClick={onRemove}>
|
||||
<Icon type="close" size="small"/>
|
||||
</button>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
108
packages/netlify-cms-ui-default/src/Loader/Loader.css
Normal file
@ -0,0 +1,108 @@
|
||||
/* Active Animation */
|
||||
|
||||
@-webkit-keyframes loader {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nc-loader-root {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
@apply(--loaderSize);
|
||||
margin: 0em 0em 0em -1.14285714rem;
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
animation: loader 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
border-radius: 500rem;
|
||||
border-color: #3A69C7 transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 0.2em;
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nc-loader-text {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
text-align: center;
|
||||
color: #767676;
|
||||
margin-top: 55px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.nc-loader-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nc-loader-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Animations*/
|
||||
.nc-loader-animateItem{
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nc-loader-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
.nc-loader-enter.nc-loader-enterActive {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
.nc-loader-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
.nc-loader-exit.nc-loader-exitActive {
|
||||
opacity: 0.01;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
57
packages/netlify-cms-ui-default/src/Loader/Loader.js
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import CSSTransition from 'react-transition-group/CSSTransition';
|
||||
import c from 'classnames';
|
||||
|
||||
export class Loader extends React.Component {
|
||||
|
||||
state = {
|
||||
currentItem: 0,
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
|
||||
setAnimation = () => {
|
||||
if (this.interval) return;
|
||||
const { children } = this.props;
|
||||
|
||||
this.interval = setInterval(() => {
|
||||
const nextItem = (this.state.currentItem === children.length - 1) ? 0 : this.state.currentItem + 1;
|
||||
this.setState({ currentItem: nextItem });
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
renderChild = () => {
|
||||
const { children } = this.props;
|
||||
const { currentItem } = this.state;
|
||||
if (!children) {
|
||||
return null;
|
||||
} else if (typeof children == 'string') {
|
||||
return <div className="nc-loader-text">{children}</div>;
|
||||
} else if (Array.isArray(children)) {
|
||||
this.setAnimation();
|
||||
return (<div className="nc-loader-text">
|
||||
<CSSTransition
|
||||
classNames={{
|
||||
enter: 'nc-loader-enter',
|
||||
enterActive: 'nc-loader-enterActive',
|
||||
exit: 'nc-loader-exit',
|
||||
exitActive: 'nc-loader-exitActive',
|
||||
}}
|
||||
timeout={500}
|
||||
>
|
||||
<div key={currentItem} className="nc-loader-animateItem">{children[currentItem]}</div>
|
||||
</CSSTransition>
|
||||
</div>);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { active, className } = this.props;
|
||||
const combinedClassName = c('nc-loader-root', { 'nc-loader-active': active }, className);
|
||||
return <div className={combinedClassName}>{this.renderChild()}</div>;
|
||||
}
|
||||
}
|
32
packages/netlify-cms-ui-default/src/Toggle/Toggle.css
Normal file
@ -0,0 +1,32 @@
|
||||
.nc-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nc-toggle-background {
|
||||
width: 34px;
|
||||
height: 14px;
|
||||
border-radius: 10px;
|
||||
background-color: #3a69c7;
|
||||
}
|
||||
|
||||
.nc-toggle-switch {
|
||||
@apply(--dropShadowDeep);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.nc-toggle-active .nc-toggle-switch {
|
||||
transform: translateX(20px);
|
||||
}
|
28
packages/netlify-cms-ui-default/src/Toggle/Toggle.js
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react'
|
||||
import ReactToggled from 'react-toggled';
|
||||
import c from 'classnames';
|
||||
|
||||
export const Toggle = ({
|
||||
active,
|
||||
onChange,
|
||||
className,
|
||||
classNameBackground,
|
||||
classNameSwitch,
|
||||
onFocus,
|
||||
onBlur
|
||||
}) =>
|
||||
<ReactToggled on={active} onToggle={onChange}>
|
||||
{({on, getElementTogglerProps}) => (
|
||||
<span
|
||||
className={c('nc-toggle', className, { 'nc-toggle-active': on })}
|
||||
role="switch"
|
||||
aria-checked={on.toString()}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
{...getElementTogglerProps()}
|
||||
>
|
||||
<span className={`nc-toggle-background ${classNameBackground}`}/>
|
||||
<span className={`nc-toggle-switch ${classNameSwitch}`}/>
|
||||
</span>
|
||||
)}
|
||||
</ReactToggled>;
|
7
packages/netlify-cms-ui-default/src/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { Dropdown, DropdownItem } from './Dropdown/Dropdown';
|
||||
import { Icon } from './Icon/Icon';
|
||||
import { ListItemTopBar } from './ListItemTopBar/ListItemTopBar';
|
||||
import { Loader } from './Loader/Loader';
|
||||
import { Toggle } from './Toggle/Toggle';
|
||||
|
||||
export { Dropdown, DropdownItem, Icon, ListItemTopBar, Loader, Toggle };
|