umwd-components 0.1.151 → 0.1.153

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.
Files changed (7) hide show
  1. package/dist/cjs/components/PictureBarSection.js +24 -9
  2. package/dist/cjs/components/StrapiImage.js +2 -2
  3. package/dist/esm/components/PictureBarSection.js +25 -10
  4. package/dist/esm/components/StrapiImage.js +2 -2
  5. package/package.json +1 -1
  6. package/src/components/PictureBarSection.tsx +33 -29
  7. package/src/components/StrapiImage.tsx +2 -2
package/dist/cjs/components/PictureBarSection.js CHANGED
@@ -10,6 +10,7 @@
10
10
  var React = require('react');
11
11
  var material = require('@mui/material');
12
12
  var StrapiImage = require('./StrapiImage.js');
13
+ var utils = require('../lib/utils.js');
13
14
 
14
15
  function PictureBarSection(_ref) {
15
16
  let {
@@ -18,9 +19,10 @@ function PictureBarSection(_ref) {
18
19
  const {
19
20
  pictures,
20
21
  maxWidth = "lg",
21
- sx = {}
22
+ sx = {},
23
+ glass = false
22
24
  } = data;
23
- material.useTheme();
25
+ const theme = material.useTheme();
24
26
  return /*#__PURE__*/React.createElement(material.Container, {
25
27
  maxWidth: maxWidth,
26
28
  sx: {
@@ -35,21 +37,34 @@ function PictureBarSection(_ref) {
35
37
  xs: 12
36
38
  }, /*#__PURE__*/React.createElement(material.Paper, {
37
39
  sx: {
38
- p: 2
40
+ p: 2,
41
+ backdropFilter: "blur(3px)",
42
+ backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
43
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
39
44
  }
40
45
  }, /*#__PURE__*/React.createElement(material.Stack, {
41
- direction: "row",
46
+ direction: {
47
+ xs: "column",
48
+ sm: "row"
49
+ },
42
50
  spacing: 2,
43
51
  justifyContent: "space-around"
44
- }, pictures.map(picture => /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
52
+ }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React.createElement(material.Box, {
53
+ key: picture.id,
54
+ sx: {
55
+ flex: "1 1 0"
56
+ }
57
+ }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
45
58
  src: picture.url,
46
59
  alt: picture.alternativeText,
47
- width: 200,
48
- height: 200,
60
+ width: picture.width,
61
+ height: picture.height,
49
62
  style: {
50
- ...picture.style
63
+ ...picture.style,
64
+ width: "100%",
65
+ height: "auto"
51
66
  }
52
- })))))));
67
+ }))))))));
53
68
  }
54
69
 
55
70
  exports.PictureBarSection = PictureBarSection;
package/dist/cjs/components/StrapiImage.js CHANGED
@@ -14,8 +14,8 @@ function StrapiImage(_ref) {
14
14
  let {
15
15
  src,
16
16
  alt = "",
17
- height = 500,
18
- width = 500,
17
+ height,
18
+ width,
19
19
  style = {}
20
20
  } = _ref;
21
21
  if (!src) return null;
package/dist/esm/components/PictureBarSection.js CHANGED
@@ -6,8 +6,9 @@
6
6
  */
7
7
 
8
8
  import React__default from 'react';
9
- import { useTheme, Container, Grid, Paper, Stack } from '@mui/material';
9
+ import { useTheme, Container, Grid, Paper, Stack, Box } from '@mui/material';
10
10
  import { StrapiImage } from './StrapiImage.js';
11
+ import { setOpacity } from '../lib/utils.js';
11
12
 
12
13
  function PictureBarSection(_ref) {
13
14
  let {
@@ -16,9 +17,10 @@ function PictureBarSection(_ref) {
16
17
  const {
17
18
  pictures,
18
19
  maxWidth = "lg",
19
- sx = {}
20
+ sx = {},
21
+ glass = false
20
22
  } = data;
21
- useTheme();
23
+ const theme = useTheme();
22
24
  return /*#__PURE__*/React__default.createElement(Container, {
23
25
  maxWidth: maxWidth,
24
26
  sx: {
@@ -33,21 +35,34 @@ function PictureBarSection(_ref) {
33
35
  xs: 12
34
36
  }, /*#__PURE__*/React__default.createElement(Paper, {
35
37
  sx: {
36
- p: 2
38
+ p: 2,
39
+ backdropFilter: "blur(3px)",
40
+ backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
41
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
37
42
  }
38
43
  }, /*#__PURE__*/React__default.createElement(Stack, {
39
- direction: "row",
44
+ direction: {
45
+ xs: "column",
46
+ sm: "row"
47
+ },
40
48
  spacing: 2,
41
49
  justifyContent: "space-around"
42
- }, pictures.map(picture => /*#__PURE__*/React__default.createElement(StrapiImage, {
50
+ }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React__default.createElement(Box, {
51
+ key: picture.id,
52
+ sx: {
53
+ flex: "1 1 0"
54
+ }
55
+ }, /*#__PURE__*/React__default.createElement(StrapiImage, {
43
56
  src: picture.url,
44
57
  alt: picture.alternativeText,
45
- width: 200,
46
- height: 200,
58
+ width: picture.width,
59
+ height: picture.height,
47
60
  style: {
48
- ...picture.style
61
+ ...picture.style,
62
+ width: "100%",
63
+ height: "auto"
49
64
  }
50
- })))))));
65
+ }))))))));
51
66
  }
52
67
 
53
68
  export { PictureBarSection };
package/dist/esm/components/StrapiImage.js CHANGED
@@ -12,8 +12,8 @@ function StrapiImage(_ref) {
12
12
  let {
13
13
  src,
14
14
  alt = "",
15
- height = 500,
16
- width = 500,
15
+ height,
16
+ width,
17
17
  style = {}
18
18
  } = _ref;
19
19
  if (!src) return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.151",
3
+ "version": "0.1.153",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/PictureBarSection.tsx CHANGED
@@ -1,22 +1,10 @@
1
1
  "use client";
2
2
 
3
3
  import React from "react";
4
- import {
5
- Paper,
6
- Typography,
7
- Container,
8
- Grid,
9
- useTheme,
10
- Button,
11
- Stack,
12
- Tooltip,
13
- } from "@mui/material";
4
+ import { Paper, Container, Grid, useTheme, Stack, Box } from "@mui/material";
14
5
  import { StrapiImage } from "./StrapiImage.tsx";
15
- import { Email, LinkedIn } from "@mui/icons-material";
16
- import { BlockRendererClient } from "./BlockRendererClient.tsx";
17
- import { type BlocksContent } from "@strapi/blocks-react-renderer";
18
- import { MuiLink } from "./MuiLink.tsx";
19
6
  import { SxProps, Theme } from "@mui/material/styles";
7
+ import { setOpacity } from "../lib/utils.ts";
20
8
 
21
9
  type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
22
10
 
@@ -34,9 +22,10 @@ interface PictureBarSectionProps {
34
22
  __component: string;
35
23
  title: string;
36
24
  description: string;
37
- pictures: ImageProps[];
25
+ pictures: { data: ImageProps[] };
38
26
  maxWidth: MaxWidth;
39
27
  sx?: SxProps<Theme>;
28
+ glass?: boolean;
40
29
  }
41
30
 
42
31
  export function PictureBarSection({
@@ -44,7 +33,7 @@ export function PictureBarSection({
44
33
  }: {
45
34
  readonly data: PictureBarSectionProps;
46
35
  }) {
47
- const { pictures, maxWidth = "lg", sx = {} } = data;
36
+ const { pictures, maxWidth = "lg", sx = {}, glass = false } = data;
48
37
 
49
38
  const theme = useTheme();
50
39
 
@@ -52,23 +41,38 @@ export function PictureBarSection({
52
41
  <Container maxWidth={maxWidth} sx={{ my: 1, ...sx }}>
53
42
  <Grid container spacing={2}>
54
43
  <Grid item xs={12}>
55
- <Paper sx={{ p: 2 }}>
44
+ <Paper
45
+ sx={{
46
+ p: 2,
47
+ backdropFilter: "blur(3px)",
48
+ backgroundColor: setOpacity(
49
+ theme.palette.background.paper,
50
+ glass ? 0.1 : 1
51
+ ),
52
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
53
+ }}
54
+ >
56
55
  <Stack
57
- direction={"row"}
56
+ direction={{ xs: "column", sm: "row" }}
58
57
  spacing={2}
59
58
  justifyContent={"space-around"}
60
59
  >
61
- {pictures.map((picture) => (
62
- <StrapiImage
63
- src={picture.url}
64
- alt={picture.alternativeText}
65
- width={200}
66
- height={200}
67
- style={{
68
- ...picture.style,
69
- }}
70
- />
71
- ))}
60
+ {pictures.data &&
61
+ pictures.data.map((picture) => (
62
+ <Box key={picture.id} sx={{ flex: "1 1 0" }}>
63
+ <StrapiImage
64
+ src={picture.url}
65
+ alt={picture.alternativeText}
66
+ width={picture.width}
67
+ height={picture.height}
68
+ style={{
69
+ ...picture.style,
70
+ width: "100%",
71
+ height: "auto",
72
+ }}
73
+ />
74
+ </Box>
75
+ ))}
72
76
  </Stack>
73
77
  </Paper>
74
78
  </Grid>
package/src/components/StrapiImage.tsx CHANGED
@@ -13,8 +13,8 @@ interface StrapiImageProps {
13
13
  export function StrapiImage({
14
14
  src,
15
15
  alt = "",
16
- height = 500,
17
- width = 500,
16
+ height,
17
+ width,
18
18
  style = {},
19
19
  }: Readonly<StrapiImageProps>) {
20
20
  if (!src) return null;