glints-aries 4.0.233 → 4.0.235
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/@next/Modal/Modal.d.ts +1 -1
- package/es/@next/Skeleton/SkeletonStyle.d.ts +1 -0
- package/es/@next/Skeleton/SkeletonStyle.js +2 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.d.ts +6 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.js +9 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.stories.d.ts +4 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.d.ts +6 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.js +12 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.stories.d.ts +4 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.d.ts +5 -0
- package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.js +23 -0
- package/es/@next/Skeleton/components/SkeletonText/SkeletonText.d.ts +11 -0
- package/es/@next/Skeleton/components/SkeletonText/SkeletonText.js +19 -0
- package/es/@next/Skeleton/components/SkeletonText/SkeletonText.stories.d.ts +5 -0
- package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.d.ts +8 -0
- package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js +31 -0
- package/es/@next/Skeleton/components/index.d.ts +3 -0
- package/es/@next/Skeleton/components/index.js +3 -0
- package/es/@next/Skeleton/index.d.ts +1 -0
- package/es/@next/Skeleton/index.js +1 -0
- package/es/@next/index.d.ts +1 -0
- package/es/@next/index.js +1 -0
- package/lib/@next/Modal/Modal.d.ts +1 -1
- package/lib/@next/Skeleton/SkeletonStyle.d.ts +1 -0
- package/lib/@next/Skeleton/SkeletonStyle.js +7 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.d.ts +6 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.js +15 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.stories.d.ts +4 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.d.ts +6 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.js +18 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.stories.d.ts +4 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.d.ts +5 -0
- package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.js +31 -0
- package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.d.ts +11 -0
- package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.js +25 -0
- package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.stories.d.ts +5 -0
- package/lib/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.d.ts +8 -0
- package/lib/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js +39 -0
- package/lib/@next/Skeleton/components/index.d.ts +3 -0
- package/lib/@next/Skeleton/components/index.js +13 -0
- package/lib/@next/Skeleton/index.d.ts +1 -0
- package/lib/@next/Skeleton/index.js +9 -0
- package/lib/@next/index.d.ts +1 -0
- package/lib/@next/index.js +8 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { ComponentAction } from '../../types/componentAction';
|
|
|
3
3
|
export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
4
|
isOpen?: boolean;
|
|
5
5
|
header?: string;
|
|
6
|
-
headerDescription?:
|
|
6
|
+
headerDescription?: React.ReactNode;
|
|
7
7
|
children?: React.ReactNode;
|
|
8
8
|
/** This action will be tied to primary button on footer */
|
|
9
9
|
primaryAction?: ComponentAction;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SkeletonShimmer: string;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { Neutral } from '../utilities/colors';
|
|
2
|
+
export var SkeletonShimmer = "\nbackground: linear-gradient(\n 110.76deg,\n " + Neutral.B95 + " 36.01%,\n rgba(217, 217, 217, 0.24) 47.36%,\n " + Neutral.B95 + " 57.51%\n);\nbackground-size: 400% 100%;\n animation: skeleton-shimmer 1.5s linear infinite;\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0 50%;\n }\n }\n";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyledSkeletonImageCircle } from './SkeletonImageStyle';
|
|
3
|
+
export var SkeletonImageCircle = function SkeletonImageCircle(_ref) {
|
|
4
|
+
var _ref$size = _ref.size,
|
|
5
|
+
size = _ref$size === void 0 ? '48px' : _ref$size;
|
|
6
|
+
return /*#__PURE__*/React.createElement(StyledSkeletonImageCircle, {
|
|
7
|
+
size: size
|
|
8
|
+
});
|
|
9
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyledSkeletonImageSquare } from './SkeletonImageStyle';
|
|
3
|
+
export var SkeletonImageSquare = function SkeletonImageSquare(_ref) {
|
|
4
|
+
var _ref$height = _ref.height,
|
|
5
|
+
height = _ref$height === void 0 ? '80px' : _ref$height,
|
|
6
|
+
_ref$width = _ref.width,
|
|
7
|
+
width = _ref$width === void 0 ? '80px' : _ref$width;
|
|
8
|
+
return /*#__PURE__*/React.createElement(StyledSkeletonImageSquare, {
|
|
9
|
+
height: height,
|
|
10
|
+
width: width
|
|
11
|
+
});
|
|
12
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { SkeletonImageCircleProps } from './SkeletonImageCircle';
|
|
2
|
+
import { SkeletonImageSquareProps } from './SkeletonImageSquare';
|
|
3
|
+
export declare const SkeletonImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const StyledSkeletonImageCircle: import("styled-components").StyledComponent<"div", any, SkeletonImageCircleProps, never>;
|
|
5
|
+
export declare const StyledSkeletonImageSquare: import("styled-components").StyledComponent<"div", any, SkeletonImageSquareProps, never>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { borderRadiusHalf } from '../../../utilities/borderRadius';
|
|
3
|
+
import { SkeletonShimmer } from '../../SkeletonStyle';
|
|
4
|
+
export var SkeletonImageContainer = styled.div.withConfig({
|
|
5
|
+
displayName: "SkeletonImageStyle__SkeletonImageContainer",
|
|
6
|
+
componentId: "sc-1x8xyqg-0"
|
|
7
|
+
})(["width:100%;"]);
|
|
8
|
+
export var StyledSkeletonImageCircle = styled.div.withConfig({
|
|
9
|
+
displayName: "SkeletonImageStyle__StyledSkeletonImageCircle",
|
|
10
|
+
componentId: "sc-1x8xyqg-1"
|
|
11
|
+
})(["width:", ";height:", ";border-radius:", ";", ""], function (props) {
|
|
12
|
+
return props.size;
|
|
13
|
+
}, function (props) {
|
|
14
|
+
return props.size;
|
|
15
|
+
}, borderRadiusHalf, SkeletonShimmer);
|
|
16
|
+
export var StyledSkeletonImageSquare = styled.div.withConfig({
|
|
17
|
+
displayName: "SkeletonImageStyle__StyledSkeletonImageSquare",
|
|
18
|
+
componentId: "sc-1x8xyqg-2"
|
|
19
|
+
})(["width:", ";height:", ";", ""], function (props) {
|
|
20
|
+
return props.width;
|
|
21
|
+
}, function (props) {
|
|
22
|
+
return props.height;
|
|
23
|
+
}, SkeletonShimmer);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Variant as TypographyVariant } from '../../../Typography';
|
|
3
|
+
declare type Row = {
|
|
4
|
+
width?: string;
|
|
5
|
+
variant?: TypographyVariant;
|
|
6
|
+
};
|
|
7
|
+
export interface SkeletonTextProps {
|
|
8
|
+
rows?: number | Row[];
|
|
9
|
+
}
|
|
10
|
+
export declare const SkeletonText: ({ rows }: SkeletonTextProps) => JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SkeletonTextContainer, StyledSkeletonText } from './SkeletonTextStyle';
|
|
3
|
+
export var SkeletonText = function SkeletonText(_ref) {
|
|
4
|
+
var _ref$rows = _ref.rows,
|
|
5
|
+
rows = _ref$rows === void 0 ? 4 : _ref$rows;
|
|
6
|
+
var defaultWidth = '100%';
|
|
7
|
+
var defaultVariant = 'body1';
|
|
8
|
+
var renderRows = function renderRows() {
|
|
9
|
+
var rowsToArray = typeof rows === 'number' ? [].concat(Array(rows)) : rows;
|
|
10
|
+
return rowsToArray.map(function (row, index) {
|
|
11
|
+
return /*#__PURE__*/React.createElement(StyledSkeletonText, {
|
|
12
|
+
key: "skeleton-text-" + index,
|
|
13
|
+
width: (row == null ? void 0 : row.width) || defaultWidth,
|
|
14
|
+
variant: (row == null ? void 0 : row.variant) || defaultVariant
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
return /*#__PURE__*/React.createElement(SkeletonTextContainer, null, renderRows());
|
|
19
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Variant as TypographyVariant } from '../../../Typography';
|
|
2
|
+
interface StyledSkeletonTextProps {
|
|
3
|
+
width?: string;
|
|
4
|
+
variant?: TypographyVariant;
|
|
5
|
+
}
|
|
6
|
+
export declare const StyledSkeletonText: import("styled-components").StyledComponent<"li", any, StyledSkeletonTextProps, never>;
|
|
7
|
+
export declare const SkeletonTextContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var _variantHeightMapping;
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import * as Breakpoints from '../../../utilities/breakpoints';
|
|
4
|
+
import { space4 } from '../../../utilities/spacing';
|
|
5
|
+
import { SkeletonShimmer } from '../../SkeletonStyle';
|
|
6
|
+
var headline1 = css(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
|
|
7
|
+
var headline2 = css(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
|
|
8
|
+
var headline3 = css(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
|
|
9
|
+
var headline4 = css(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
|
|
10
|
+
var headline5 = css(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
|
|
11
|
+
var headline6 = css(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
|
|
12
|
+
var subtitle1 = css(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
|
|
13
|
+
var subtitle2 = css(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
|
|
14
|
+
var body1 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
|
|
15
|
+
var body2 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
|
|
16
|
+
var button = css(["height:14px;"]);
|
|
17
|
+
var caption = css(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
|
|
18
|
+
var overline = css(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
|
|
19
|
+
var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
|
|
20
|
+
export var StyledSkeletonText = styled.li.withConfig({
|
|
21
|
+
displayName: "SkeletonTextStyle__StyledSkeletonText",
|
|
22
|
+
componentId: "sc-ym0kos-0"
|
|
23
|
+
})(["", " width:", ";", ""], function (props) {
|
|
24
|
+
return variantHeightMapping[props.variant];
|
|
25
|
+
}, function (props) {
|
|
26
|
+
return props.width;
|
|
27
|
+
}, SkeletonShimmer);
|
|
28
|
+
export var SkeletonTextContainer = styled.ul.withConfig({
|
|
29
|
+
displayName: "SkeletonTextStyle__SkeletonTextContainer",
|
|
30
|
+
componentId: "sc-ym0kos-1"
|
|
31
|
+
})(["list-style:none;width:100%;li:not(:last-child){margin-bottom:", ";}"], space4);
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { SkeletonText, SkeletonTextProps } from './SkeletonText/SkeletonText';
|
|
2
|
+
export { SkeletonImageCircle, SkeletonImageCircleProps, } from './SkeletonImage/SkeletonImageCircle';
|
|
3
|
+
export { SkeletonImageSquare, SkeletonImageSquareProps, } from './SkeletonImage/SkeletonImageSquare';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { SkeletonText, SkeletonTextProps } from './SkeletonText/SkeletonText';
|
|
2
|
+
export { SkeletonImageCircle, SkeletonImageCircleProps } from './SkeletonImage/SkeletonImageCircle';
|
|
3
|
+
export { SkeletonImageSquare, SkeletonImageSquareProps } from './SkeletonImage/SkeletonImageSquare';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
package/es/@next/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
|
|
|
29
29
|
export { Popover, PopoverProps } from './Popover';
|
|
30
30
|
export { RadioButton, RadioButtonProps } from './RadioButton';
|
|
31
31
|
export { Select, SelectProps } from './Select';
|
|
32
|
+
export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps, } from './Skeleton';
|
|
32
33
|
export { Spinner, SpinnerProps } from './Spinner';
|
|
33
34
|
export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
|
|
34
35
|
export { Tag, TagProps } from './Tag';
|
package/es/@next/index.js
CHANGED
|
@@ -30,6 +30,7 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
|
|
|
30
30
|
export { Popover, PopoverProps } from './Popover';
|
|
31
31
|
export { RadioButton, RadioButtonProps } from './RadioButton';
|
|
32
32
|
export { Select, SelectProps } from './Select';
|
|
33
|
+
export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps } from './Skeleton';
|
|
33
34
|
export { Spinner, SpinnerProps } from './Spinner';
|
|
34
35
|
export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
|
|
35
36
|
export { Tag, TagProps } from './Tag';
|
|
@@ -3,7 +3,7 @@ import { ComponentAction } from '../../types/componentAction';
|
|
|
3
3
|
export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
4
|
isOpen?: boolean;
|
|
5
5
|
header?: string;
|
|
6
|
-
headerDescription?:
|
|
6
|
+
headerDescription?: React.ReactNode;
|
|
7
7
|
children?: React.ReactNode;
|
|
8
8
|
/** This action will be tied to primary button on footer */
|
|
9
9
|
primaryAction?: ComponentAction;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SkeletonShimmer: string;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.SkeletonShimmer = void 0;
|
|
5
|
+
var _colors = require("../utilities/colors");
|
|
6
|
+
var SkeletonShimmer = "\nbackground: linear-gradient(\n 110.76deg,\n " + _colors.Neutral.B95 + " 36.01%,\n rgba(217, 217, 217, 0.24) 47.36%,\n " + _colors.Neutral.B95 + " 57.51%\n);\nbackground-size: 400% 100%;\n animation: skeleton-shimmer 1.5s linear infinite;\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0 50%;\n }\n }\n";
|
|
7
|
+
exports.SkeletonShimmer = SkeletonShimmer;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.SkeletonImageCircle = void 0;
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _SkeletonImageStyle = require("./SkeletonImageStyle");
|
|
8
|
+
var SkeletonImageCircle = function SkeletonImageCircle(_ref) {
|
|
9
|
+
var _ref$size = _ref.size,
|
|
10
|
+
size = _ref$size === void 0 ? '48px' : _ref$size;
|
|
11
|
+
return /*#__PURE__*/_react["default"].createElement(_SkeletonImageStyle.StyledSkeletonImageCircle, {
|
|
12
|
+
size: size
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
exports.SkeletonImageCircle = SkeletonImageCircle;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.SkeletonImageSquare = void 0;
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _SkeletonImageStyle = require("./SkeletonImageStyle");
|
|
8
|
+
var SkeletonImageSquare = function SkeletonImageSquare(_ref) {
|
|
9
|
+
var _ref$height = _ref.height,
|
|
10
|
+
height = _ref$height === void 0 ? '80px' : _ref$height,
|
|
11
|
+
_ref$width = _ref.width,
|
|
12
|
+
width = _ref$width === void 0 ? '80px' : _ref$width;
|
|
13
|
+
return /*#__PURE__*/_react["default"].createElement(_SkeletonImageStyle.StyledSkeletonImageSquare, {
|
|
14
|
+
height: height,
|
|
15
|
+
width: width
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
exports.SkeletonImageSquare = SkeletonImageSquare;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { SkeletonImageCircleProps } from './SkeletonImageCircle';
|
|
2
|
+
import { SkeletonImageSquareProps } from './SkeletonImageSquare';
|
|
3
|
+
export declare const SkeletonImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const StyledSkeletonImageCircle: import("styled-components").StyledComponent<"div", any, SkeletonImageCircleProps, never>;
|
|
5
|
+
export declare const StyledSkeletonImageSquare: import("styled-components").StyledComponent<"div", any, SkeletonImageSquareProps, never>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.StyledSkeletonImageSquare = exports.StyledSkeletonImageCircle = exports.SkeletonImageContainer = void 0;
|
|
6
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
7
|
+
var _borderRadius = require("../../../utilities/borderRadius");
|
|
8
|
+
var _SkeletonStyle = require("../../SkeletonStyle");
|
|
9
|
+
var SkeletonImageContainer = _styledComponents["default"].div.withConfig({
|
|
10
|
+
displayName: "SkeletonImageStyle__SkeletonImageContainer",
|
|
11
|
+
componentId: "sc-1x8xyqg-0"
|
|
12
|
+
})(["width:100%;"]);
|
|
13
|
+
exports.SkeletonImageContainer = SkeletonImageContainer;
|
|
14
|
+
var StyledSkeletonImageCircle = _styledComponents["default"].div.withConfig({
|
|
15
|
+
displayName: "SkeletonImageStyle__StyledSkeletonImageCircle",
|
|
16
|
+
componentId: "sc-1x8xyqg-1"
|
|
17
|
+
})(["width:", ";height:", ";border-radius:", ";", ""], function (props) {
|
|
18
|
+
return props.size;
|
|
19
|
+
}, function (props) {
|
|
20
|
+
return props.size;
|
|
21
|
+
}, _borderRadius.borderRadiusHalf, _SkeletonStyle.SkeletonShimmer);
|
|
22
|
+
exports.StyledSkeletonImageCircle = StyledSkeletonImageCircle;
|
|
23
|
+
var StyledSkeletonImageSquare = _styledComponents["default"].div.withConfig({
|
|
24
|
+
displayName: "SkeletonImageStyle__StyledSkeletonImageSquare",
|
|
25
|
+
componentId: "sc-1x8xyqg-2"
|
|
26
|
+
})(["width:", ";height:", ";", ""], function (props) {
|
|
27
|
+
return props.width;
|
|
28
|
+
}, function (props) {
|
|
29
|
+
return props.height;
|
|
30
|
+
}, _SkeletonStyle.SkeletonShimmer);
|
|
31
|
+
exports.StyledSkeletonImageSquare = StyledSkeletonImageSquare;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Variant as TypographyVariant } from '../../../Typography';
|
|
3
|
+
declare type Row = {
|
|
4
|
+
width?: string;
|
|
5
|
+
variant?: TypographyVariant;
|
|
6
|
+
};
|
|
7
|
+
export interface SkeletonTextProps {
|
|
8
|
+
rows?: number | Row[];
|
|
9
|
+
}
|
|
10
|
+
export declare const SkeletonText: ({ rows }: SkeletonTextProps) => JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.SkeletonText = void 0;
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _SkeletonTextStyle = require("./SkeletonTextStyle");
|
|
8
|
+
var SkeletonText = function SkeletonText(_ref) {
|
|
9
|
+
var _ref$rows = _ref.rows,
|
|
10
|
+
rows = _ref$rows === void 0 ? 4 : _ref$rows;
|
|
11
|
+
var defaultWidth = '100%';
|
|
12
|
+
var defaultVariant = 'body1';
|
|
13
|
+
var renderRows = function renderRows() {
|
|
14
|
+
var rowsToArray = typeof rows === 'number' ? [].concat(Array(rows)) : rows;
|
|
15
|
+
return rowsToArray.map(function (row, index) {
|
|
16
|
+
return /*#__PURE__*/_react["default"].createElement(_SkeletonTextStyle.StyledSkeletonText, {
|
|
17
|
+
key: "skeleton-text-" + index,
|
|
18
|
+
width: (row == null ? void 0 : row.width) || defaultWidth,
|
|
19
|
+
variant: (row == null ? void 0 : row.variant) || defaultVariant
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
return /*#__PURE__*/_react["default"].createElement(_SkeletonTextStyle.SkeletonTextContainer, null, renderRows());
|
|
24
|
+
};
|
|
25
|
+
exports.SkeletonText = SkeletonText;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Variant as TypographyVariant } from '../../../Typography';
|
|
2
|
+
interface StyledSkeletonTextProps {
|
|
3
|
+
width?: string;
|
|
4
|
+
variant?: TypographyVariant;
|
|
5
|
+
}
|
|
6
|
+
export declare const StyledSkeletonText: import("styled-components").StyledComponent<"li", any, StyledSkeletonTextProps, never>;
|
|
7
|
+
export declare const SkeletonTextContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.StyledSkeletonText = exports.SkeletonTextContainer = void 0;
|
|
5
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
6
|
+
var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints"));
|
|
7
|
+
var _spacing = require("../../../utilities/spacing");
|
|
8
|
+
var _SkeletonStyle = require("../../SkeletonStyle");
|
|
9
|
+
var _variantHeightMapping;
|
|
10
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
|
+
var headline1 = (0, _styledComponents.css)(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
|
|
13
|
+
var headline2 = (0, _styledComponents.css)(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
|
|
14
|
+
var headline3 = (0, _styledComponents.css)(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
|
|
15
|
+
var headline4 = (0, _styledComponents.css)(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
|
|
16
|
+
var headline5 = (0, _styledComponents.css)(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
|
|
17
|
+
var headline6 = (0, _styledComponents.css)(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
|
|
18
|
+
var subtitle1 = (0, _styledComponents.css)(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
|
|
19
|
+
var subtitle2 = (0, _styledComponents.css)(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
|
|
20
|
+
var body1 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
|
|
21
|
+
var body2 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
|
|
22
|
+
var button = (0, _styledComponents.css)(["height:14px;"]);
|
|
23
|
+
var caption = (0, _styledComponents.css)(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
|
|
24
|
+
var overline = (0, _styledComponents.css)(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
|
|
25
|
+
var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
|
|
26
|
+
var StyledSkeletonText = _styledComponents["default"].li.withConfig({
|
|
27
|
+
displayName: "SkeletonTextStyle__StyledSkeletonText",
|
|
28
|
+
componentId: "sc-ym0kos-0"
|
|
29
|
+
})(["", " width:", ";", ""], function (props) {
|
|
30
|
+
return variantHeightMapping[props.variant];
|
|
31
|
+
}, function (props) {
|
|
32
|
+
return props.width;
|
|
33
|
+
}, _SkeletonStyle.SkeletonShimmer);
|
|
34
|
+
exports.StyledSkeletonText = StyledSkeletonText;
|
|
35
|
+
var SkeletonTextContainer = _styledComponents["default"].ul.withConfig({
|
|
36
|
+
displayName: "SkeletonTextStyle__SkeletonTextContainer",
|
|
37
|
+
componentId: "sc-ym0kos-1"
|
|
38
|
+
})(["list-style:none;width:100%;li:not(:last-child){margin-bottom:", ";}"], _spacing.space4);
|
|
39
|
+
exports.SkeletonTextContainer = SkeletonTextContainer;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { SkeletonText, SkeletonTextProps } from './SkeletonText/SkeletonText';
|
|
2
|
+
export { SkeletonImageCircle, SkeletonImageCircleProps, } from './SkeletonImage/SkeletonImageCircle';
|
|
3
|
+
export { SkeletonImageSquare, SkeletonImageSquareProps, } from './SkeletonImage/SkeletonImageSquare';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = void 0;
|
|
5
|
+
var _SkeletonText = require("./SkeletonText/SkeletonText");
|
|
6
|
+
exports.SkeletonText = _SkeletonText.SkeletonText;
|
|
7
|
+
exports.SkeletonTextProps = _SkeletonText.SkeletonTextProps;
|
|
8
|
+
var _SkeletonImageCircle = require("./SkeletonImage/SkeletonImageCircle");
|
|
9
|
+
exports.SkeletonImageCircle = _SkeletonImageCircle.SkeletonImageCircle;
|
|
10
|
+
exports.SkeletonImageCircleProps = _SkeletonImageCircle.SkeletonImageCircleProps;
|
|
11
|
+
var _SkeletonImageSquare = require("./SkeletonImage/SkeletonImageSquare");
|
|
12
|
+
exports.SkeletonImageSquare = _SkeletonImageSquare.SkeletonImageSquare;
|
|
13
|
+
exports.SkeletonImageSquareProps = _SkeletonImageSquare.SkeletonImageSquareProps;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
var _components = require("./components");
|
|
5
|
+
Object.keys(_components).forEach(function (key) {
|
|
6
|
+
if (key === "default" || key === "__esModule") return;
|
|
7
|
+
if (key in exports && exports[key] === _components[key]) return;
|
|
8
|
+
exports[key] = _components[key];
|
|
9
|
+
});
|
package/lib/@next/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
|
|
|
29
29
|
export { Popover, PopoverProps } from './Popover';
|
|
30
30
|
export { RadioButton, RadioButtonProps } from './RadioButton';
|
|
31
31
|
export { Select, SelectProps } from './Select';
|
|
32
|
+
export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps, } from './Skeleton';
|
|
32
33
|
export { Spinner, SpinnerProps } from './Spinner';
|
|
33
34
|
export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
|
|
34
35
|
export { Tag, TagProps } from './Tag';
|
package/lib/@next/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
|
|
4
|
+
exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = exports.SimplePagination = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
|
|
5
5
|
var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
|
|
6
6
|
exports.BorderRadius = BorderRadius;
|
|
7
7
|
var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
|
|
@@ -106,6 +106,13 @@ exports.RadioButtonProps = _RadioButton.RadioButtonProps;
|
|
|
106
106
|
var _Select = require("./Select");
|
|
107
107
|
exports.Select = _Select.Select;
|
|
108
108
|
exports.SelectProps = _Select.SelectProps;
|
|
109
|
+
var _Skeleton = require("./Skeleton");
|
|
110
|
+
exports.SkeletonImageCircle = _Skeleton.SkeletonImageCircle;
|
|
111
|
+
exports.SkeletonImageCircleProps = _Skeleton.SkeletonImageCircleProps;
|
|
112
|
+
exports.SkeletonImageSquare = _Skeleton.SkeletonImageSquare;
|
|
113
|
+
exports.SkeletonImageSquareProps = _Skeleton.SkeletonImageSquareProps;
|
|
114
|
+
exports.SkeletonText = _Skeleton.SkeletonText;
|
|
115
|
+
exports.SkeletonTextProps = _Skeleton.SkeletonTextProps;
|
|
109
116
|
var _Spinner = require("./Spinner");
|
|
110
117
|
exports.Spinner = _Spinner.Spinner;
|
|
111
118
|
exports.SpinnerProps = _Spinner.SpinnerProps;
|