@mikezimm/fps-library-v2/lib/components/molecules/FPSTiles/webPart/FPSTilesWPHelp.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
// import ReactJson from '@microlink/react-json-view';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
/**
 * FPS Slick Sections Notes:
 *
 * ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
 * @returns
 */
// White text refresh label
export const LinkStyles = { padding: '8px 15px', marginBottom: '12px', color: 'darkblue', cursor: 'pointer' };
export function getFPSTileWPHelp() {
    const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Tile Styles', itemIcon: 'PictureFill' },
        React.createElement("div", { className: 'fps-pph-content' },
            React.createElement("div", { className: 'fps-pph-topic' }, "Tile Layout - Small, Medium, Hover Tile, Card"),
            React.createElement("div", null, "This determines the overall size/type of icon."),
            React.createElement("div", null, "Small and Medium have simple Logo or Image"),
            React.createElement("div", null, "Small has smaller Logo and only displays the site Title - based on the source object like Site Title"),
            React.createElement("div", null, "Medium has slightly larger logo but also includes the Description - based on the source object like Site Description"),
            React.createElement("div", null, "Hover Tile will give a larger customizable size Tile with hover overlay."),
            React.createElement("div", null, "Hover Tile shows the Image and Title, when hovering, the description will be displayed"),
            React.createElement("div", null,
                React.createElement("b", null, "Card is not working as of the writing of this documentation.")),
            React.createElement("div", { className: 'fps-pph-topic' }, "Image Height and Width"),
            React.createElement("div", null, "Only applies when you select Hover Tile or possibly Card Tile Layouts"),
            React.createElement("div", null, "Use the sliders to adjust the default Height and Width of the Tile."),
            React.createElement("div", { className: 'fps-pph-topic' }, "Image Fit - CenterCover, CenterContain, Center, Contain etc..."),
            React.createElement("div", null, "Do not adjust from the defaults unless you know CSS and want to experiment."),
            React.createElement("div", null, "This leverages CSS Image Fit property and can impage how Image Cover works."),
            React.createElement("div", null, "Feel free to experiment but be warned it can impact other CSS properties like Image Cover."),
            React.createElement("div", { className: 'fps-pph-topic' }, "Image Cover"),
            React.createElement("div", null, "Be sure to use Image Fit = CenterCover for this to work properly."),
            React.createElement("div", { className: 'fps-pph-topic' }, "Image Background color"),
            React.createElement("div", null, "Set the default tile/image background color for cases where"),
            React.createElement("ul", null,
                React.createElement("li", null, "Your Images have transparancy"),
                React.createElement("li", null, "Your Image Fit/Image Conver does not fully cover the entire tile")),
            React.createElement("div", { className: 'fps-pph-topic' }, "Tile Title Wrap"),
            React.createElement("div", null, "Determines how to handle long title.  May also impact the Description behaviour."),
            React.createElement("div", null, "Only impacts Hover Tile and Card layout."),
            React.createElement("div", { className: 'fps-pph-topic' }, "Highlighted color"),
            React.createElement("div", null, "Used in Hover Tile layout only."),
            React.createElement("div", null, "Default highlights the Description text in yellow which makes it easier to read on the dark hover card."),
            React.createElement("div", { className: 'fps-pph-topic' }, "File Image Priority"),
            React.createElement("div", null, "Depending on the web part you are using, this provides flexibility to force web part to use certain properties for the Tile image"),
            React.createElement("div", null, "Suggest to just use web part Default, particularly for a web part that uses Sites or Pages since those typically have thumbnail properties from the object - like Site Logo or Page Thumbnail."),
            React.createElement("div", null,
                React.createElement("b", null, "Icon"),
                " will first look for an actual icon - such as file type icon like Excel or PowerPoint which is easier to recognize in small or medium tiles."),
            React.createElement("div", null,
                React.createElement("b", null, "Preview Image"),
                " will first look if the item has a preview image - such as a Power Point might show the first slide.")));
    return WebPartHelpElement;
}
//# sourceMappingURL=FPSTilesWPHelp.js.map