@manuscripts/style-guide 1.12.16-LEAN-3572.0 → 1.12.17-LEAN-3720.0

package/dist/es/components/EditorHeader/ProceedView.js

@@ -1,165 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { Category, Dialog, DialogState, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
-import { AlertMessage, AlertMessageType } from '../AlertMessage';
-import { PrimaryButtonSmall, } from './EditorHeader';
-const DropdownWrapper = ({ disabled, button, primary, children }) => {
-    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
-    return (React.createElement(NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
-        React.createElement(NavDropdownButton, { as: (primary && PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
-        isOpen && React.createElement(NavDropdown, { direction: "left" }, children)));
-};
-const StepDetails = ({ icon, label, description, role }) => (React.createElement(React.Fragment, null,
-    icon && React.createElement(TaskStatus, null, icon),
-    React.createElement(TaskContainer, null,
-        React.createElement(PrimaryBoldHeading, null, label),
-        React.createElement(SecondarySmallText, null, description),
-        React.createElement(SecondarySmallText, null,
-            "Actor: ",
-            role.label))));
-export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
-    const dialogMessages = useMemo(() => hasPendingSuggestions &&
-        !isAnnotator &&
-        !isProofer &&
-        dialogData.state !== DialogState.SUCCESS
-        ? {
-            header: 'The task can not be transitioned to the next step',
-            message: `There are still pending suggestions in the document.
-                It is not possible to complete the task without having them approved or rejected.`,
-            actions: {
-                primary: {
-                    action: onCancelClick,
-                    title: 'Ok',
-                },
-                onClose: onCancelClick,
-            },
-        }
-        : dialogData.state === DialogState.SUCCESS
-            ? {
-                header: 'Content reassigned successfully',
-                message: `to the ${currentStepType.label}`,
-                actions: {
-                    primary: {
-                        action: onCancelClick,
-                        title: 'Close',
-                    },
-                    onClose: onCancelClick,
-                },
-            }
-            : {
-                header: 'Are you sure?',
-                message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
-                actions: {
-                    primary: {
-                        action: continueDialogAction,
-                        title: 'Continue',
-                    },
-                    secondary: {
-                        action: onCancelClick,
-                        title: 'Cancel',
-                    },
-                    onClose: onCancelClick,
-                },
-            }, [
-        dialogData,
-        continueDialogAction,
-        onCancelClick,
-        currentStepType,
-        hasPendingSuggestions,
-        isAnnotator,
-        isProofer,
-    ]);
-    const prevDialogMsgs = useRef();
-    const prevDialogueState = useRef();
-    useEffect(() => {
-        prevDialogMsgs.current = dialogMessages;
-        prevDialogueState.current = dialogData.state;
-    }, [dialogData.state]);
-    const messages = dialogData.state === DialogState.CLOSED && prevDialogMsgs.current
-        ? prevDialogMsgs.current
-        : dialogMessages;
-    const finalState = dialogData.state === DialogState.CLOSED && prevDialogueState.current
-        ? prevDialogueState.current
-        : dialogData.state;
-    return (React.createElement(React.Fragment, null,
-        (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (React.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
-            React.createElement(TaskDropdown, null, currentStepTransition &&
-                currentStepTransition.map((transition, index) => (React.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
-                    React.createElement("strong", null, transition.type.label),
-                    transition.type.description))))))) || (React.createElement(PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
-        finalState === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
-            React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
-        React.createElement(Dialog, { isOpen: dialogData.state !== DialogState.CLOSED &&
-                dialogData.state !== DialogState.LOADING, category: Category.confirmation, header: messages.header, message: messages.message, actions: messages.actions },
-            finalState === DialogState.SUCCESS && (React.createElement(Grid, null,
-                previousStepType && (React.createElement(StepDetails, Object.assign({}, previousStepType, { icon: React.createElement(React.Fragment, null,
-                        React.createElement(TaskStepDoneIcon, null),
-                        React.createElement(Line, null)) }))),
-                React.createElement(StepDetails, Object.assign({}, currentStepType)))),
-            finalState === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
-};
-const TaskDropdown = styled.div `
-  display: flex;
-  flex-direction: column;
-  padding: ${(props) => props.theme.grid.unit * 2}px 0;
-`;
-const Task = styled.button `
-  background: transparent;
-  border: none;
-  color: ${(props) => props.theme.colors.text.secondary};
-  cursor: pointer;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.small} /
-    ${(props) => props.theme.font.lineHeight.normal}
-    ${(props) => props.theme.font.family.sans};
-  order: 1;
-  outline: none;
-  padding: ${(props) => props.theme.grid.unit * 2}px
-    ${(props) => props.theme.grid.unit * 4}px;
-  text-align: left;
-  width: ${(props) => props.theme.grid.unit * 66}px;
-
-  &:not([disabled]):hover,
-  &:not([disabled]):focus {
-    background-color: ${(props) => props.theme.colors.button.default.background.hover};
-  }
-
-  strong {
-    color: ${(props) => props.theme.colors.text.primary};
-    display: block;
-    font-size: ${(props) => props.theme.font.size.normal};
-    line-height: ${(props) => props.theme.font.lineHeight.normal};
-  }
-
-  &.happyPath {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
-    order: 0;
-  }
-`;
-const TextAreaWrapper = styled.div `
-  margin-top: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const Grid = styled.div `
-  display: grid;
-  grid-template-columns: max-content auto;
-  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
-  margin-top: ${(props) => props.theme.grid.unit * 4}px;
-  background: ${(props) => props.theme.colors.background.secondary};
-  padding: ${(props) => props.theme.grid.unit * 6}px;
-`;
-const Line = styled.hr `
-  margin: 5px 0 0 0;
-  flex: 1;
-  border: 1px dashed #c9c9c9;
-`;
-const TaskStatus = styled.div `
-  grid-column: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 5px;
-`;
-const TaskContainer = styled.div `
-  grid-column: 2;
-  margin-bottom: 8px;
-`;

package/dist/types/components/EditorHeader/EditorHeader.d.ts

@@ -1,68 +0,0 @@
-import React from 'react';
-export type PartialSubmission = {
-    id: string;
-    currentStep: SubmissionStep;
-    previousStep?: SubmissionStep | null | undefined;
-    nextStep?: SubmissionStep | null | undefined;
-};
-export type SubmissionStep = {
-    type: SubmissionStepType;
-};
-export type SubmissionStepTransition = {
-    status: {
-        id: string;
-        label: string;
-    };
-    type: SubmissionStepType;
-};
-export type SubmissionStepType = {
-    id: string;
-    label: string;
-    description: string;
-    transitions: Array<SubmissionStepTransition>;
-    role: {
-        label: string;
-    };
-};
-export declare enum DialogState {
-    INIT = 0,
-    LOADING = 1,
-    ERROR = 2,
-    SUCCESS = 3,
-    CLOSED = 4
-}
-export type ProceedDialogData = {
-    state: DialogState;
-    error?: string;
-    mutationError?: any;
-    updateState: (state: DialogState) => void;
-    clearError: () => void;
-};
-export declare const EditorHeader: React.FC<{
-    handleSnapshot?: () => Promise<void>;
-    submission: PartialSubmission;
-    hasPendingSuggestions?: boolean;
-    canCompleteTask: boolean;
-    exceptionDialog: React.FC<{
-        errorCode: string;
-    }>;
-    userRole: string;
-    submitProceed: {
-        dialogData: ProceedDialogData;
-        submit: (statusId: string, noteValue: string) => Promise<unknown>;
-    };
-    goBack?: () => void;
-    status?: 'saved' | 'saving' | 'offline' | 'failed';
-    isAnnotator: boolean;
-    isProofer: boolean;
-    message: React.FC;
-    disabelProceedNote?: boolean;
-}>;
-export declare const PrimaryButtonSmall: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    type: "button" | "submit" | "reset";
-} & {
-    danger?: boolean | undefined;
-    disabled?: boolean | undefined;
-    mini?: boolean | undefined;
-}, "type">;
-export declare const MediumTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, import("../Form").ErrorProps, never>;

package/dist/types/components/EditorHeader/ProceedView.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ProceedDialogData } from '../..';
-import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
-export declare const ProceedView: React.FC<{
-    isAnnotator: boolean;
-    isProofer: boolean;
-    disable: boolean;
-    onTransitionClick: (event: unknown) => void;
-    onNoteChange?: (event: unknown) => void;
-    hasPendingSuggestions: boolean;
-    dialogData: ProceedDialogData;
-    noteValue: string;
-    currentStepTransition: SubmissionStepTransition[];
-    previousStepType: SubmissionStepType | undefined;
-    currentStepType: SubmissionStepType;
-    nextStepType: SubmissionStepType;
-    onCancelClick: () => void;
-    continueDialogAction: () => Promise<void>;
-    message: React.FC<{
-        isCentered: boolean;
-    }>;
-}>;