lucid-ui
Version:
A UI component library from Xandr.
49 lines • 3.6 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupSkeleton = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var LoadingSkeletonsSvgUtil_1 = require("./LoadingSkeletonsSvgUtil");
var LoadingSkeleton_1 = __importDefault(require("./LoadingSkeleton"));
var GroupSkeleton = function (props) {
var _a = props.width, width = _a === void 0 ? 300 : _a, _b = props.height, height = _b === void 0 ? 55 : _b, className = props.className;
var bottomRectWidth = lodash_1.default.toNumber(width) - lodash_1.default.toNumber(width) / 3;
return (react_1.default.createElement("div", { "data-test-id": 'loadingSkeleton-GroupSkeleton' },
react_1.default.createElement("svg", { "data-test-id": 'loadingSkeleton-GroupSkeleton-svg', width: width, height: height, version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
react_1.default.createElement("g", { id: 'GroupSkeleton-Details', stroke: 'none', strokeWidth: '1', fill: 'none', fillRule: 'evenodd' },
react_1.default.createElement("g", { id: 'GroupSkeleton-Group' },
react_1.default.createElement("g", { id: 'GGroupSkeleton-Group-1', className: (0, LoadingSkeletonsSvgUtil_1.cxBackgroundGray)('&', className) },
react_1.default.createElement("rect", { id: 'Rectangle', x: '0', y: '0' })),
react_1.default.createElement("rect", { className: (0, LoadingSkeletonsSvgUtil_1.cxBackgroundGray)('&', className), id: 'GroupSkeleton-Rectangle-1', x: '10', y: '13', width: width, height: '10' }),
react_1.default.createElement("rect", { className: (0, LoadingSkeletonsSvgUtil_1.cxBackgroundGray)('&', className), id: 'GroupSkeleton-Rectangle-2', x: '10', y: '32', width: bottomRectWidth, height: '18' }))))));
};
exports.GroupSkeleton = GroupSkeleton;
var GroupLoadingSkeleton = function (props) {
return (react_1.default.createElement(LoadingSkeleton_1.default, __assign({ "data-test-id": 'loadingSkeleton-GroupLoadingSkeleton', Skeleton: exports.GroupSkeleton }, props)));
};
GroupLoadingSkeleton.displayName = 'GroupLoadingSkeleton';
GroupLoadingSkeleton.peek = {
description: "A loading indicator wrapper with optional overlay.",
notes: {
overview: "\n\t\t\tA visual indication that a section or component of the interface is loading. Designed to indicate loading data\n\t\t",
intendedUse: "\n\t\t\t- Use in places where data takes time to load. GroupLoadingSkeleton lets users know that the information they expect to see will appear shortly.\t\t\n\t\t",
technicalRecommendations: "\n\t\t\tIf a page is displaying a lot of data coming from multiple sources, try as best as possible to load the \n\t\t\tindividual parts of the UI, so as not to disrupt the user and block them from interacting with the entire page until all data is loaded.\n\t\t",
},
categories: ['Loading Indicator'],
};
exports.default = GroupLoadingSkeleton;
//# sourceMappingURL=GroupLoadingSkeleton.js.map