@mikezimm/fps-library-v2/lib/common/PropPaneHelp/atoms/GridAreaHelp.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import { CSSGridDocsLink, CSSGridGenLink } from '../../../components/atoms/Links/LinksDevDocs';
import { SingleQuotesEle } from './HandleBarsHelp';
export const LabelPropsToggle = React.createElement("div", null,
    "Toggle the ",
    React.createElement("b", null, "Labels"),
    " toggle to Properties to see the name of each field.");
/**
 * See GridAreaFormNamesNetworkBuilder from Network Builder as an example of input
 * @param FormAreaNames
 * @returns
 */
export function getGridAreaFormNames(FormAreaNames) {
    const ele = React.createElement("div", null,
        React.createElement("div", { className: 'fps-pph-topic' },
            "Grid Area Names from this form: ",
            CSSGridDocsLink,
            " | ",
            CSSGridGenLink),
        FormAreaNames);
    return ele;
}
/**
 * Can be used in PropPane Help as shown in getHelpSingleItem in Network-Builder
 */
export const GridAreaPropHelp = React.createElement("div", null,
    React.createElement("div", { className: 'fps-pph-topic' },
        "CSS Grid Area: ",
        CSSGridDocsLink,
        " ",
        CSSGridGenLink),
    React.createElement("div", null,
        "You define the layout ",
        ` ( Rows and Columns )`,
        " of the form using CSS Grid Area Syntax."),
    React.createElement("div", null, LabelPropsToggle),
    React.createElement("div", null,
        "Generally speaking, you define each row of the grid using ",
        React.createElement("b", null, "Grid Areas"),
        " in ",
        SingleQuotesEle,
        "."),
    React.createElement("div", null,
        "Each row should be separated by a space and the Grid Areas defined in the row must be in ",
        SingleQuotesEle));
/**
 * Can be used in PropPane Help as shown in getHelpSingleItem in Network-Builder
 */
export const GridAreaRowColHelp = React.createElement("div", null,
    React.createElement("div", { className: 'fps-pph-topic' },
        "CSS Grid Columns / Rows: ",
        CSSGridDocsLink,
        " ",
        CSSGridGenLink),
    React.createElement("div", null,
        "CSS Grid Columns settting of ",
        React.createElement("b", null, "1fr 1fr 1fr 1fr"),
        " will create 4 columns of equal fractions"),
    React.createElement("div", null,
        "CSS Grid Rows settting of ",
        React.createElement("b", null, "auto auto"),
        " will create 2 rows of auto height... generally automatically defines height based on content"));
//# sourceMappingURL=GridAreaHelp.js.map