Partially implement the elements panel

assets/src/edit-story/components/canvas/multiSelectionMovable.js

@@ -32,8 +32,12 @@ import { useStory } from '../../app/story';
 import objectWithout from '../../utils/objectWithout';
 import calculateFitTextFontSize from '../../utils/calculateFitTextFontSize';
 import { useTransform } from '../transform';
-import { useUnits } from '../../units';
-import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../constants';
+import { useUnits, dataToEditorY } from '../../units';
+import {
+  MIN_FONT_SIZE,
+  MAX_FONT_SIZE,
+  DEFAULT_EDITOR_PAGE_HEIGHT,
+} from '../../constants';
 import useCanvas from './useCanvas';
 
 const CORNER_HANDLES = ['nw', 'ne', 'sw', 'se'];
@@ -51,7 +55,7 @@ function MultiSelectionMovable({ selectedElements }) {
     },
   } = useCanvas();
   const {
-    actions: { dataToEditorY, editorToDataX, editorToDataY },
+    actions: { editorToDataX, editorToDataY },
   } = useUnits();
   const {
     actions: { pushTransform },
@@ -68,8 +72,8 @@ function MultiSelectionMovable({ selectedElements }) {
   }, [selectedElements, moveable, nodesById]);
 
   const minMaxFontSize = {
-    minFontSize: dataToEditorY(MIN_FONT_SIZE),
-    maxFontSize: dataToEditorY(MAX_FONT_SIZE),
+    minFontSize: dataToEditorY(MIN_FONT_SIZE, DEFAULT_EDITOR_PAGE_HEIGHT),
+    maxFontSize: dataToEditorY(MAX_FONT_SIZE, DEFAULT_EDITOR_PAGE_HEIGHT),
   };
 
   // Create targets list including nodes and also necessary attributes.

assets/src/edit-story/components/canvas/singleSelectionMovable.js

@@ -27,14 +27,19 @@ import { useRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import {
+  DEFAULT_EDITOR_PAGE_HEIGHT,
+  MIN_FONT_SIZE,
+  MAX_FONT_SIZE,
+} from '../../constants';
 import { useStory } from '../../app';
 import Movable from '../movable';
 import calculateFitTextFontSize from '../../utils/calculateFitTextFontSize';
 import objectWithout from '../../utils/objectWithout';
 import getAdjustedElementDimensions from '../../utils/getAdjustedElementDimensions';
 import { useTransform } from '../transform';
 import { useUnits } from '../../units';
-import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../constants';
+
 import { getDefinitionForType } from '../../elements';
 import useCanvas from './useCanvas';
 
@@ -56,15 +61,15 @@ function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) {
     },
   } = useCanvas();
   const {
-    actions: { getBox, dataToEditorY, editorToDataX, editorToDataY },
+    actions: { getBox, editorToDataX, editorToDataY },
   } = useUnits();
   const {
     actions: { pushTransform },
   } = useTransform();
 
   const minMaxFontSize = {
-    minFontSize: dataToEditorY(MIN_FONT_SIZE),
-    maxFontSize: dataToEditorY(MAX_FONT_SIZE),
+    minFontSize: editorToDataY(MIN_FONT_SIZE, DEFAULT_EDITOR_PAGE_HEIGHT),
+    maxFontSize: editorToDataY(MAX_FONT_SIZE, DEFAULT_EDITOR_PAGE_HEIGHT),
   };
 
   const otherNodes = Object.values(

assets/src/edit-story/components/inspector/document/documentInspector.js

@@ -23,19 +23,19 @@ import { __ } from '@wordpress/i18n';
 /**
  * External dependencies
  */
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 /**
  * Internal dependencies
  */
 import { useStory } from '../../../app/story';
 import { useConfig } from '../../../app/config';
 import { SimplePanel } from '../../panels/panel';
-import UploadButton from '../../uploadButton';
+import { useMediaPicker } from '../../mediaPicker';
 import { SelectMenu, InputGroup } from '../../form';
 import useInspector from '../useInspector';
 
-const buttonStyles = css`
+const Button = styled.button`
   color: ${({ theme }) => theme.colors.mg.v1};
   font-size: 14px;
   width: 100%;
@@ -48,10 +48,6 @@ const Img = styled.img`
   max-height: 300px;
 `;
 
-const RemoveButton = styled.button`
-  ${buttonStyles}
-`;
-
 function DocumentInspector() {
   const {
     actions: { loadStatuses, loadUsers },
@@ -123,6 +119,13 @@ function DocumentInspector() {
     [deleteStory]
   );
 
+  const openMediaPicker = useMediaPicker({
+    title: __('Select as featured image', 'web-stories'),
+    buttonInsertText: __('Set as featured image', 'web-stories'),
+    onSelect: handleChangeImage,
+    type: 'image',
+  });
+
   return (
     <>
       <SimplePanel
@@ -168,7 +171,7 @@ function DocumentInspector() {
             />
           )}
 
-        <RemoveButton
+        <Button
           onClick={handleRemoveStory}
           dangerouslySetInnerHTML={{ __html: 'Move to trash' }}
         />
@@ -197,25 +200,18 @@ function DocumentInspector() {
       >
         {featuredMediaUrl && <Img src={featuredMediaUrl} />}
         {featuredMediaUrl && (
-          <RemoveButton
+          <Button
             onClick={handleRemoveImage}
             dangerouslySetInnerHTML={{ __html: 'Remove image' }}
           />
         )}
 
         {postThumbnails && (
-          <UploadButton
-            onSelect={handleChangeImage}
-            title={__('Select as featured image', 'web-stories')}
-            type={'image'}
-            buttonInsertText={__('Set as featured image', 'web-stories')}
-            buttonText={
-              featuredMediaUrl
-                ? __('Replace image', 'web-stories')
-                : __('Set featured image', 'web-stories')
-            }
-            buttonCSS={buttonStyles}
-          />
+          <Button onClick={openMediaPicker}>
+            {featuredMediaUrl
+              ? __('Replace image', 'web-stories')
+              : __('Set featured image', 'web-stories')}
+          </Button>
         )}
       </SimplePanel>
     </>

assets/src/edit-story/components/library/common/index.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+
+/**
+ * Exports
+ */
+export { default as SearchInput } from './searchInput';
+export { default as Section } from './section';
+
+export const Title = styled.h3`
+  color: ${({ theme }) => theme.colors.fg.v1};
+  margin: 0;
+  font-size: 19px;
+  line-height: 1.4;
+  flex: 3 0 0;
+  display: flex;
+  align-items: center;
+  padding: 2px 0;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  margin: 0 0 25px;
+`;
+
+export const MainButton = styled.button`
+  cursor: pointer;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.fg.v1};
+  padding: 5px;
+  font-weight: bold;
+  flex: 1 0 0;
+  text-align: center;
+  border: 1px solid ${({ theme }) => theme.colors.mg.v1};
+  border-radius: 3px;
+`;

assets/src/edit-story/components/library/common/searchInput.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+/**
+ * Internal dependencies
+ */
+import { ReactComponent as Magnify } from './magnify.svg';
+
+const Icon = styled(Magnify)`
+  position: absolute;
+  fill: ${({ theme }) => theme.colors.mg.v2};
+  left: 10px;
+  width: 20px;
+  height: 20px;
+`;
+
+const SearchField = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+const Search = styled.input.attrs({ type: 'text' })`
+  width: 100%;
+  background: ${({ theme }) => rgba(theme.colors.fg.v1, 0.1)} !important;
+  border: none !important;
+  color: ${({ theme }) => theme.colors.mg.v2} !important;
+  padding: 4px 12px 4px 36px !important;
+  font-family: ${({ theme }) => theme.fonts.body1.family};
+  font-size: ${({ theme }) => theme.fonts.body1.size};
+  letter-spacing: ${({ theme }) => theme.fonts.body1.letterSpacing};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.mg.v2};
+  }
+`;
+
+export default function SearchInput({ value, placeholder, onChange }) {
+  return (
+    <SearchField>
+      <Icon icon="search" />
+      <Search value={value} placeholder={placeholder} onChange={onChange} />
+    </SearchField>
+  );
+}
+
+SearchInput.propTypes = {
+  value: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};

assets/src/edit-story/components/library/common/section.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+const SectionContainer = styled.div`
+  position: relative;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${({ theme }) => rgba(theme.colors.fg.v1, 0.2)};
+`;
+const SectionTitle = styled.h2`
+  color: ${({ theme }) => theme.colors.fg.v1};
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: normal;
+  margin-bottom: 16px;
+`;
+
+export default function Section({ title, children }) {
+  return (
+    <SectionContainer>
+      {title && <SectionTitle>{title}</SectionTitle>}
+      {children}
+    </SectionContainer>
+  );
+}
+
+Section.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};