@selfcommunity/react-ui 0.7.0-alpha.50 → 0.7.0-alpha.52

package/lib/esm/components/LoyaltyProgramDetail/Skeleton.js

@@ -1,15 +1,83 @@
 import React from 'react';
-import { GenericSkeleton } from '../Skeleton';
 import { styled } from '@mui/material/styles';
+import { Typography, CardContent, CardHeader, Grid, Skeleton, Box, CardActions } from '@mui/material';
+import Widget from '../Widget';
 const PREFIX = 'SCLoyaltyProgramDetailSkeleton';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`,
+    title: `${PREFIX}-title`,
+    content: `${PREFIX}-content`,
+    actions: `${PREFIX}-actions`,
+    list: `${PREFIX}-list`,
+    listItem: `${PREFIX}-list-item`,
+    chip: `${PREFIX}-chip`
 };
-const Root = styled(GenericSkeleton, {
+const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+})(({ theme }) => ({
+    [`& .${classes.list}`]: {
+        display: 'flex',
+        flexDirection: 'row'
+    }
+}));
+const PrizeRoot = styled(Widget, {
+    name: `${PREFIX}-Prize`,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    [`& .${classes.root}`]: {
+        flexDirection: 'column',
+        justifyContent: 'space-between'
+    },
+    [`& .${classes.chip}`]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    [`& .${classes.actions}`]: {
+        justifyContent: 'center'
+    }
+}));
+/**
+ * > API documentation for the Community-JS Loyalty Program Detail Skeleton Prize component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LoyaltyProgramDetailSkeletonPrize} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLoyaltyProgramDetailSkeletonPrize` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLoyaltyProgramDetailSkeletonPrize-root|Styles applied to the root element.|
+ |chip|.SCLoyaltyProgramDetailSkeletonPrize-chip|Styles applied to the chip element.|
+ |content|.SCLoyaltyProgramDetailSkeletonPrize-content|Styles applied to the card content section.|
+ |title|.SCLoyaltyProgramDetailSkeletonPrize-title|Styles applied to the title element.|
+ |actions|.SCLoyaltyProgramDetailSkeletonPrize-actions|Styles applied to the action section.|
+ *
+ */
+export function PrizeSkeleton() {
+    return (React.createElement(PrizeRoot, { className: classes.root },
+        React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 40 }),
+        React.createElement(Box, { className: classes.chip },
+            React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 30, height: 15 })),
+        React.createElement(CardContent, { className: classes.content },
+            React.createElement(Typography, { gutterBottom: true, variant: "body1", component: "div", className: classes.title },
+                React.createElement(Skeleton, { animation: "wave", height: 15, width: "70%", variant: "text" })),
+            React.createElement(Typography, { variant: "body2" },
+                React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }))),
+        React.createElement(CardActions, { className: classes.actions },
+            React.createElement(Skeleton, { animation: "wave", height: 20, width: 50, variant: "rectangular" }))));
+}
 /**
  * > API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.
 
@@ -28,9 +96,29 @@ const Root = styled(GenericSkeleton, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCLoyaltyProgramDetailSkeleton-root|Styles applied to the root element.|
+ |header|.SCLoyaltyProgramDetailSkeleton-header|Styles applied to the card header element.|
+ |content|.SCLoyaltyProgramDetailSkeleton-content|Styles applied to the card content section.|
+ |list|.SCLoyaltyProgramDetailSkeleton-list|Styles applied to the list section.|
+ |listItem|.SCLoyaltyProgramDetailSkeleton-list-item|Styles applied to the list item elements.|
  *
  */
 export default function LoyaltyProgramDetailSkeleton() {
-    return React.createElement(Root, { className: classes.root });
+    return (React.createElement(Root, { className: classes.root },
+        React.createElement(CardHeader, { className: classes.header, avatar: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 40, height: 40 }), title: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 30, height: 15 }) }),
+        React.createElement(CardContent, { className: classes.content },
+            React.createElement(React.Fragment, null,
+                React.createElement(Skeleton, { animation: "wave", height: 15, width: "70%", variant: "text" }),
+                React.createElement(Skeleton, { animation: "wave", height: 10, width: "90%", variant: "text" })),
+            React.createElement(Typography, { mt: 1, className: classes.title },
+                React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" })),
+            React.createElement(Grid, { container: true, spacing: 0, mt: 0.5, mb: 1, className: classes.list }, [...Array(8)].map((prize, index) => (React.createElement(Grid, { item: true, xs: 6, key: index, className: classes.listItem },
+                React.createElement(Skeleton, { animation: "wave", height: 10, width: "50%" }))))),
+            React.createElement(Typography, { mb: 1 },
+                React.createElement(Skeleton, { animation: "wave", height: 15, width: "60%", variant: "text", className: classes.title }),
+                React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" }),
+                React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" })),
+            React.createElement(Grid, { container: true, spacing: { xs: 2 }, columns: { xs: 4 }, className: classes.list }, [...Array(4)].map((prize, index) => (React.createElement(Grid, { item: true, xs: 2, key: index, className: classes.listItem },
+                React.createElement(PrizeRoot, null,
+                    React.createElement(PrizeSkeleton, null)))))))));
 }
 //# sourceMappingURL=Skeleton.js.map

package/lib/esm/components/LoyaltyProgramDetail/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAE5C,MAAM,MAAM,GAAG,gCAAgC,CAAC;AAEhD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,eAAe,EAAE;IACnC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B;IAClD,OAAO,oBAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAAC;AAC3C,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"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"}