Style presets

assets/src/edit-story/app/story/effects/useLoadStory.js

@@ -98,6 +98,9 @@ function useLoadStory({ storyId, shouldLoad, restore }) {
         if (!stylePresets.textColors) {
           stylePresets.textColors = [];
         }
+        if (!stylePresets.textStyles) {
+          stylePresets.textStyles = [];
+        }
 
         // Set story-global variables.
         const story = {

assets/src/edit-story/components/panels/layer/panel.js

@@ -36,7 +36,10 @@ function LayerPanel() {
   return (
     <Panel
       name="layers"
-      initialHeight={numLayersVisible * LAYER_HEIGHT}
+      initialHeight={Math.min(
+        numLayersVisible * LAYER_HEIGHT,
+        window.innerHeight / 3
+      )}
       resizeable
     >
       <PanelTitle isSecondary isResizable>

assets/src/edit-story/components/panels/panel/shared/handle.js

@@ -20,7 +20,6 @@
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useRef } from 'react';
-import { rgba } from 'polished';
 
 /**
  * WordPress dependencies
@@ -34,7 +33,6 @@ import useDragHandlers from '../useDragHandlers';
 import useKeyboardHandlers from '../useKeyboardHandlers';
 
 const Handle = styled.div`
-  background-color: ${({ theme }) => rgba(theme.colors.bg.v0, 0.07)};
   border: 0;
   padding: 0;
   height: 6px;
@@ -46,10 +44,10 @@ const Handle = styled.div`
   user-select: none;
 `;
 
+// @todo This needs blue outline when in focus.
 const Bar = styled.div.attrs({
   tabIndex: 0,
 })`
-  background-color: ${({ theme }) => rgba(theme.colors.fg.v1, 0.1)};
   width: 36px;
   height: 4px;
   border-radius: 2px;

assets/src/edit-story/components/panels/panel/shared/title.js

@@ -63,11 +63,9 @@ const Header = styled.h2`
   user-select: none;
 `;
 
-const HeaderButton = styled.button.attrs({ type: 'button' })`
+const HeaderButton = styled.div.attrs({ role: 'button' })`
   color: inherit;
-  border: 0;
   padding: 10px 20px;
-  background: transparent;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -87,12 +85,15 @@ const HeaderActions = styled.div`
   align-items: center;
 `;
 
-const Collapse = styled.span`
+const Collapse = styled.button`
+  border: none;
+  background: transparent;
   color: inherit;
   width: 28px;
   height: 28px;
   display: flex; /* removes implicit line-height padding from child element */
-
+  padding: 0;
+  cursor: pointer;
   svg {
     width: 28px;
     height: 28px;
@@ -155,17 +156,21 @@ function Title({
           handleDoubleClick={resetHeight}
         />
       )}
-      <HeaderButton
-        onClick={isCollapsed ? expand : collapse}
-        aria-label={titleLabel}
-        aria-expanded={!isCollapsed}
-        aria-controls={panelContentId}
-      >
+      <HeaderButton onClick={isCollapsed ? expand : collapse}>
         <Heading>{children}</Heading>
         <HeaderActions>
           {secondaryAction}
           {canCollapse && (
-            <Collapse isCollapsed={isCollapsed}>
+            <Collapse
+              isCollapsed={isCollapsed}
+              onClick={(evt) => {
+                evt.stopPropagation();
+                isCollapsed ? expand() : collapse();
+              }}
+              aria-label={titleLabel}
+              aria-expanded={!isCollapsed}
+              aria-controls={panelContentId}
+            >
               <Arrow />
             </Collapse>
           )}

assets/src/edit-story/components/panels/stylePreset/header.js

@@ -0,0 +1,137 @@
+/*
+ * 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, { css } from 'styled-components';
+import { rgba } from 'polished';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PropTypes from 'prop-types';
+import { ReactComponent as Edit } from '../../../icons/edit_pencil.svg';
+import { ReactComponent as Add } from '../../../icons/add_page.svg';
+import { PanelTitle } from '../panel';
+
+const buttonCSS = css`
+  border: none;
+  background: transparent;
+  width: 30px;
+  height: 28px;
+  color: ${({ theme }) => rgba(theme.colors.fg.v1, 0.84)};
+  cursor: pointer;
+  padding: 0;
+`;
+
+const AddColorPresetButton = styled.button`
+  ${buttonCSS}
+  svg {
+    width: 26px;
+    height: 28px;
+  }
+`;
+
+const ExitEditMode = styled.button`
+  ${buttonCSS}
+  color: ${({ theme }) => theme.colors.fg.v1};
+  font-size: 12px;
+  line-height: 14px;
+  padding: 7px;
+  height: initial;
+`;
+
+const EditModeButton = styled.button`
+  ${buttonCSS}
+  height: 20px;
+  svg {
+    width: 16px;
+    height: 20px;
+  }
+`;
+
+function PresetsHeader({
+  handleAddColorPreset,
+  isEditMode,
+  setIsEditMode,
+  stylePresets,
+}) {
+  const { fillColors, textColors, textStyles } = stylePresets;
+  const hasPresets =
+    fillColors.length > 0 || textColors.length > 0 || textStyles.length > 0;
+
+  const getActions = () => {
+    return !isEditMode ? (
+      <>
+        {hasPresets && (
+          <EditModeButton
+            onClick={(evt) => {
+              evt.stopPropagation();
+              setIsEditMode(true);
+            }}
+            aria-label={__('Edit presets', 'web-stories')}
+          >
+            <Edit />
+          </EditModeButton>
+        )}
+        <AddColorPresetButton
+          onClick={handleAddColorPreset}
+          aria-label={__('Add preset', 'web-stories')}
+        >
+          <Add />
+        </AddColorPresetButton>
+      </>
+    ) : (
+      <ExitEditMode
+        onClick={(evt) => {
+          evt.stopPropagation();
+          setIsEditMode(false);
+        }}
+        aria-label={__('Exit edit mode', 'web-stories')}
+      >
+        {__('Exit', 'web-stories')}
+      </ExitEditMode>
+    );
+  };
+
+  return (
+    <PanelTitle
+      secondaryAction={getActions()}
+      canCollapse={!isEditMode && hasPresets}
+    >
+      {__('Presets', 'web-stories')}
+    </PanelTitle>
+  );
+}
+
+PresetsHeader.propTypes = {
+  stylePresets: PropTypes.shape({
+    fillColors: PropTypes.array,
+    textColors: PropTypes.array,
+    textStyles: PropTypes.array,
+  }).isRequired,
+  isEditMode: PropTypes.bool.isRequired,
+  handleAddColorPreset: PropTypes.func.isRequired,
+  setIsEditMode: PropTypes.func.isRequired,
+};
+
+export default PresetsHeader;