decap-cms-ui-default 2.16.0-beta.0

package/src/Toggle.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import ReactToggled from 'react-toggled';
+
+import { colors, colorsRaw, shadows, transitions } from './styles';
+
+const ToggleContainer = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 40px;
+  height: 20px;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+`;
+
+const ToggleHandle = styled.span`
+  ${shadows.dropDeep};
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: ${colorsRaw.white};
+  transition: transform ${transitions.main};
+
+  ${props =>
+    props.isActive &&
+    css`
+      transform: translateX(20px);
+    `};
+`;
+
+const ToggleBackground = styled.span`
+  width: 34px;
+  height: 14px;
+  border-radius: 10px;
+  background-color: ${colors.active};
+`;
+
+function Toggle({
+  id,
+  active,
+  onChange,
+  onFocus,
+  onBlur,
+  className,
+  Container = ToggleContainer,
+  Background = ToggleBackground,
+  Handle = ToggleHandle,
+}) {
+  return (
+    <ReactToggled on={active} onToggle={onChange}>
+      {({ on, getTogglerProps }) => (
+        <Container
+          id={id}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          className={className}
+          {...getTogglerProps({
+            role: 'switch',
+            'aria-checked': on.toString(),
+            'aria-expanded': null,
+          })}
+        >
+          <Background isActive={on} />
+          <Handle isActive={on} />
+        </Container>
+      )}
+    </ReactToggled>
+  );
+}
+
+Toggle.propTypes = {
+  id: PropTypes.string,
+  active: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  className: PropTypes.string,
+  Container: PropTypes.func,
+  Background: PropTypes.func,
+  Handle: PropTypes.func,
+};
+
+const StyledToggle = styled(Toggle)``;
+
+export { StyledToggle as default, ToggleContainer, ToggleBackground, ToggleHandle };

package/src/WidgetPreviewContainer.js

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+const WidgetPreviewContainer = styled.div`
+  margin: 15px 2px;
+`;
+
+export default WidgetPreviewContainer;

package/src/index.js

@@ -0,0 +1,100 @@
+import Dropdown, {
+  DropdownItem,
+  DropdownCheckedItem,
+  DropdownButton,
+  StyledDropdownButton,
+} from './Dropdown';
+import Icon from './Icon';
+import ListItemTopBar from './ListItemTopBar';
+import Loader from './Loader';
+import FieldLabel from './FieldLabel';
+import IconButton from './IconButton';
+import Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
+import AuthenticationPage from './AuthenticationPage';
+import WidgetPreviewContainer from './WidgetPreviewContainer';
+import ObjectWidgetTopBar from './ObjectWidgetTopBar';
+import GoBackButton from './GoBackButton';
+import {
+  fonts,
+  colorsRaw,
+  colors,
+  lengths,
+  components,
+  buttons,
+  text,
+  shadows,
+  borders,
+  transitions,
+  effects,
+  zIndex,
+  reactSelectStyles,
+  GlobalStyles,
+} from './styles';
+
+export const DecapCmsUiDefault = {
+  Dropdown,
+  DropdownItem,
+  DropdownCheckedItem,
+  DropdownButton,
+  StyledDropdownButton,
+  ListItemTopBar,
+  FieldLabel,
+  Icon,
+  IconButton,
+  Loader,
+  Toggle,
+  ToggleContainer,
+  ToggleBackground,
+  ToggleHandle,
+  AuthenticationPage,
+  WidgetPreviewContainer,
+  ObjectWidgetTopBar,
+  fonts,
+  colorsRaw,
+  colors,
+  lengths,
+  components,
+  buttons,
+  shadows,
+  text,
+  borders,
+  transitions,
+  effects,
+  zIndex,
+  reactSelectStyles,
+  GlobalStyles,
+};
+export {
+  Dropdown,
+  DropdownItem,
+  DropdownCheckedItem,
+  DropdownButton,
+  StyledDropdownButton,
+  ListItemTopBar,
+  FieldLabel,
+  Icon,
+  IconButton,
+  Loader,
+  Toggle,
+  ToggleContainer,
+  ToggleBackground,
+  ToggleHandle,
+  AuthenticationPage,
+  WidgetPreviewContainer,
+  ObjectWidgetTopBar,
+  fonts,
+  colorsRaw,
+  colors,
+  lengths,
+  components,
+  buttons,
+  shadows,
+  text,
+  borders,
+  transitions,
+  effects,
+  zIndex,
+  reactSelectStyles,
+  GlobalStyles,
+  GoBackButton,
+};