payload 0.20.1 → 0.20.4-beta.0

package/dist/admin/components/elements/Button/index.scss

@@ -56,7 +56,8 @@
     line-height: base(1);
   }
 
-  span, svg {
+  span,
+  svg {
     vertical-align: top;
   }
 
@@ -69,20 +70,20 @@
   }
 
   &--style-primary {
-    background-color: $color-dark-gray;
-    color: white;
+    background-color: var(--theme-elevation-800);
+    color: var(--theme-elevation-0);
 
     &.btn--disabled {
-      background-color: rgba($color-dark-gray, .6);
+      background-color: var(--theme-elevation-400);
     }
 
     &:not(.btn--disabled) {
       &:hover {
-        background: lighten($color-dark-gray, 5%);
+        background: var(--theme-elevation-750);
       }
 
       &:active {
-        background: lighten($color-dark-gray, 10%);
+        background: var(--theme-elevation-700);
       }
     }
 
@@ -94,26 +95,26 @@
   }
 
   &--style-secondary {
-    $base-box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray;
-    $hover-box-shadow: inset 0 0 0 $style-stroke-width lighten($color-dark-gray, 5%);
+    $base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
+    $hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700);
 
     box-shadow: $base-box-shadow;
-    color: $color-dark-gray;
+    color: var(--theme-elevation-800);
     background: none;
 
     &:hover {
-      background: rgba($color-dark-gray, .02);
+      background: var(--theme-elevation-100);
       box-shadow: $hover-box-shadow;
     }
 
     &:active {
-      background: lighten($color-light-gray, 7%);
+      background: var(--theme-elevation-200);
     }
 
     &.btn--disabled {
-      color: rgba($color-dark-gray, .6);
+      color: var(--theme-elevation-400);
       background: none;
-      box-shadow: inset 0 0 0 $style-stroke-width rgba($color-dark-gray, .4);
+      box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
     }
 
     &:focus {
@@ -148,7 +149,7 @@
 
     &.btn--style-primary {
       .icon {
-        @include color-svg(white);
+        @include color-svg(var(--theme-elevation-0));
       }
     }
   }
@@ -159,7 +160,7 @@
   }
 
   &--style-light-gray {
-    box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray;
+    box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
   }
 
   &--icon-position-left {
@@ -191,15 +192,15 @@
 
   &:hover {
     .btn__icon {
-      @include color-svg(white);
-      background: $color-dark-gray;
+      @include color-svg(var(--theme-elevation-0));
+      background: var(--theme-elevation-800);
     }
   }
 
   &:focus {
     .btn__icon {
-      @include color-svg($color-dark-gray);
-      background: $color-light-gray;
+      @include color-svg(var(--theme-elevation-800));
+      background: var(--theme-elevation-150);
     }
 
     outline: none;
@@ -207,8 +208,8 @@
 
   &:active {
     .btn__icon {
-      @include color-svg(white);
-      background: lighten($color-dark-gray, 10%);
+      @include color-svg(var(--theme-elevation-0));
+      background: var(--theme-elevation-700);
     }
   }
 }

package/dist/admin/components/elements/Button/types.d.ts

@@ -1,6 +1,7 @@
 import React, { MouseEvent } from 'react';
 export declare type Props = {
     className?: string;
+    id?: string;
     type?: 'submit' | 'button';
     el?: 'link' | 'anchor' | undefined;
     to?: string;
@@ -11,6 +12,7 @@ export declare type Props = {
     icon?: React.ReactNode | ['chevron' | 'x' | 'plus' | 'edit'];
     iconStyle?: 'with-border' | 'without-border' | 'none';
     buttonStyle?: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label';
+    buttonId?: string;
     round?: boolean;
     size?: 'small' | 'medium';
     iconPosition?: 'left' | 'right';

package/dist/admin/components/elements/Card/index.js

@@ -3,12 +3,13 @@ import Button from '../Button';
 import './index.scss';
 const baseClass = 'card';
 const Card = (props) => {
-    const { title, actions, onClick } = props;
+    const { id, title, actions, onClick } = props;
     const classes = [
         baseClass,
+        id,
         onClick && `${baseClass}--has-onclick`,
     ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes },
+    return (React.createElement("div", { className: classes, id: id },
         React.createElement("h5", null, title),
         actions && (React.createElement("div", { className: `${baseClass}__actions` }, actions)),
         onClick && (React.createElement(Button, { className: `${baseClass}__click`, buttonStyle: "none", onClick: onClick }))));

package/dist/admin/components/elements/Card/index.scss

@@ -1,7 +1,7 @@
 @import '../../../scss/styles';
 
 .card {
-  background: $color-background-gray;
+  background: var(--theme-elevation-50);
   padding: base(1.25) $baseline;
   position: relative;
 
@@ -26,7 +26,7 @@
     cursor: pointer;
 
     &:hover {
-      background: darken($color-background-gray, 3%);
+      background: var(--theme-elevation-100);
     }
   }
 

package/dist/admin/components/elements/Card/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare type Props = {
+    id?: string;
     title: string;
     actions?: React.ReactNode;
     onClick?: () => void;

package/dist/admin/components/{forms/DraggableSection/PositionPanel → elements/Collapsible}/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { Props } from './types';
 import './index.scss';
-declare const PositionPanel: React.FC<Props>;
-export default PositionPanel;
+export declare const Collapsible: React.FC<Props>;

package/dist/admin/components/elements/Collapsible/index.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import { CollapsibleProvider, useCollapsible } from './provider';
+import Chevron from '../../icons/Chevron';
+import DragHandle from '../../icons/Drag';
+import './index.scss';
+const baseClass = 'collapsible';
+export const Collapsible = ({ children, collapsed: collapsedFromProps, onToggle, className, header, initCollapsed, dragHandleProps, actions, }) => {
+    const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
+    const [hovered, setHovered] = useState(false);
+    const isNested = useCollapsible();
+    const collapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
+    return (React.createElement("div", { className: [
+            baseClass,
+            className,
+            dragHandleProps && `${baseClass}--has-drag-handle`,
+            collapsed && `${baseClass}--collapsed`,
+            isNested && `${baseClass}--nested`,
+            hovered && `${baseClass}--hovered`,
+        ].filter(Boolean).join(' ') },
+        React.createElement(CollapsibleProvider, null,
+            React.createElement("div", { className: `${baseClass}__toggle-wrap`, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) },
+                dragHandleProps && (React.createElement("div", { className: `${baseClass}__drag`, ...dragHandleProps },
+                    React.createElement(DragHandle, null))),
+                React.createElement("button", { type: "button", className: [
+                        `${baseClass}__toggle`,
+                        `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,
+                    ].filter(Boolean).join(' '), onClick: () => {
+                        if (typeof onToggle === 'function')
+                            onToggle(!collapsed);
+                        setCollapsedLocal(!collapsed);
+                    } },
+                    React.createElement("span", null, "Toggle block")),
+                header && (React.createElement("div", { className: [
+                        `${baseClass}__header-wrap`,
+                        dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,
+                    ].filter(Boolean).join(' ') }, header && header)),
+                React.createElement("div", { className: `${baseClass}__actions-wrap` },
+                    actions && (React.createElement("div", { className: `${baseClass}__actions` }, actions)),
+                    React.createElement(Chevron, { className: `${baseClass}__indicator` }))),
+            React.createElement(AnimateHeight, { height: collapsed ? 0 : 'auto', duration: 200 },
+                React.createElement("div", { className: `${baseClass}__content` }, children)))));
+};

package/dist/admin/components/elements/Collapsible/index.scss

@@ -0,0 +1,113 @@
+@import '../../../scss/styles.scss';
+
+.collapsible {
+  --toggle-pad-h: #{base(.75)};
+  --toggle-pad-v: #{base(.5)};
+
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: $style-radius-m;
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-300);
+  }
+
+  &__toggle-wrap {
+    position: relative;
+  }
+
+  &--hovered {
+    >.collapsible__toggle-wrap>.collapsible__drag {
+      opacity: 1;
+    }
+
+    >.collapsible__toggle-wrap>.collapsible__toggle {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__drag {
+    opacity: .5;
+    position: absolute;
+    z-index: 1;
+    top: var(--toggle-pad-v);
+    left: base(.5);
+  }
+
+  &__toggle {
+    @extend %btn-reset;
+    @extend %body;
+    text-align: left;
+    cursor: pointer;
+    background: var(--theme-elevation-50);
+    border-top-right-radius: $style-radius-s;
+    border-top-left-radius: $style-radius-s;
+    width: 100%;
+    color: transparent;
+
+    span {
+      user-select: none;
+    }
+  }
+
+  &__toggle,
+  &__header-wrap {
+    padding: var(--toggle-pad-v) var(--toggle-pad-h);
+  }
+
+  &__header-wrap {
+    position: absolute;
+    top: 0;
+    right: base(3);
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+
+    >* {
+      pointer-events: all;
+    }
+  }
+
+  &__header-wrap--has-drag-handle {
+    left: base(.875);
+  }
+
+  &--collapsed {
+    .collapsible__toggle {
+      border-bottom-right-radius: $style-radius-s;
+      border-bottom-left-radius: $style-radius-s;
+    }
+
+    .collapsible__indicator {
+      transform: rotate(0turn);
+    }
+  }
+
+  &__actions-wrap {
+    position: absolute;
+    right: var(--toggle-pad-h);
+    top: var(--toggle-pad-v);
+    pointer-events: none;
+    display: flex;
+  }
+
+  &__actions {
+    pointer-events: all;
+  }
+
+  &__indicator {
+    transform: rotate(.5turn);
+  }
+
+  &__content {
+    background-color: var(--theme-elevation-0);
+    border-bottom-left-radius: $style-radius-s;
+    border-bottom-right-radius: $style-radius-s;
+    padding: $baseline;
+  }
+
+  @include small-break {
+    &__content {
+      padding: var(--gutter-h);
+    }
+  }
+}

package/dist/admin/components/elements/Collapsible/provider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const Context: React.Context<boolean>;
+export declare const CollapsibleProvider: React.FC<{
+    children?: React.ReactNode;
+    withinCollapsible?: boolean;
+}>;
+export declare const useCollapsible: () => boolean;
+export default Context;

package/dist/admin/components/elements/Collapsible/provider.js

@@ -0,0 +1,7 @@
+import React, { createContext, useContext, } from 'react';
+const Context = createContext(false);
+export const CollapsibleProvider = ({ children, withinCollapsible = true }) => {
+    return (React.createElement(Context.Provider, { value: withinCollapsible }, children));
+};
+export const useCollapsible = () => useContext(Context);
+export default Context;

package/dist/admin/components/{forms/FieldTypeGutter → elements/Collapsible}/types.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 export declare type Props = {
-    variant?: 'left' | 'right';
-    verticalAlignment?: 'top' | 'center' | 'sticky';
-    dragHandleProps?: DraggableProvidedDragHandleProps;
+    collapsed?: boolean;
     className?: string;
-    children?: React.ReactNode;
+    header?: React.ReactNode;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    onToggle?: (collapsed: boolean) => void;
+    initCollapsed?: boolean;
+    dragHandleProps?: DraggableProvidedDragHandleProps;
 };

package/dist/admin/components/elements/ColumnSelector/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import flattenTopLevelFields from '../../../../utilities/flattenTopLevelFields';
+import flattenTopLevelFields from '../../../utilities/flattenTopLevelFields';
 import Pill from '../Pill';
 import Plus from '../../icons/Plus';
 import X from '../../icons/X';
@@ -7,7 +7,7 @@ import './index.scss';
 const baseClass = 'column-selector';
 const ColumnSelector = (props) => {
     const { collection, columns, setColumns, } = props;
-    const [fields] = useState(() => flattenTopLevelFields(collection.fields));
+    const [fields] = useState(() => flattenTopLevelFields(collection.fields, true));
     return (React.createElement("div", { className: baseClass }, fields && fields.map((field, i) => {
         const isEnabled = columns.find((column) => column === field.name);
         return (React.createElement(Pill, { onClick: () => {
@@ -19,7 +19,10 @@ const ColumnSelector = (props) => {
                     newState.unshift(field.name);
                 }
                 setColumns(newState);
-            }, alignIcon: "left", key: field.name || i, icon: isEnabled ? React.createElement(X, null) : React.createElement(Plus, null), pillStyle: isEnabled ? 'dark' : undefined, className: `${baseClass}__active-column` }, field.label || field.name));
+            }, alignIcon: "left", key: field.name || i, icon: isEnabled ? React.createElement(X, null) : React.createElement(Plus, null), className: [
+                `${baseClass}__column`,
+                isEnabled && `${baseClass}__column--active`,
+            ].filter(Boolean).join(' ') }, field.label || field.name));
     })));
 };
 export default ColumnSelector;

package/dist/admin/components/elements/ColumnSelector/index.scss

@@ -1,11 +1,20 @@
 @import '../../../scss/styles.scss';
 
 .column-selector {
-  background: $color-background-gray;
+  background: var(--theme-elevation-50);
   padding: base(1) base(1) base(.5);
 
   .pill {
     margin-right: base(.5);
     margin-bottom: base(.5);
   }
+
+  &__column {
+    background-color: transparent;
+    box-shadow: 0 0 0 1px var(--theme-elevation-200);
+  }
+
+  &__column--active {
+    background-color: var(--theme-elevation-150);
+  }
 }