umwd-components 0.1.20 → 0.1.22

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 (5) hide show
  1. package/dist/cjs/components/TextImageBlock.js +31 -7
  2. package/dist/esm/components/TextImageBlock.js +32 -8
  3. package/package.json +1 -1
  4. package/src/components/TextImageBlock.js +46 -15
  5. package/src/stories/TextImageBlock.stories.js +7 -6
package/dist/cjs/components/TextImageBlock.js CHANGED
@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
  var material = require('@mui/material');
14
+ var Image = require('next/image');
14
15
  var muiMarkdown = require('mui-markdown');
15
16
  var PropTypes = require('prop-types');
16
17
 
@@ -18,12 +19,17 @@ function TextImageBlock({
18
19
  block_title,
19
20
  text_content,
20
21
  image_content,
21
- reverse
22
+ reverse,
23
+ maxWidth
22
24
  }) {
23
25
  reverse = Boolean(reverse);
26
+ maxWidth = maxWidth || "100%";
24
27
  return /*#__PURE__*/React.createElement(material.Grid, {
25
28
  container: true,
26
- sx: [text_content === undefined && {
29
+ sx: [{
30
+ maxWidth: maxWidth,
31
+ margin: "auto"
32
+ }, text_content === undefined && {
27
33
  display: "grid",
28
34
  alignItems: "center",
29
35
  justifyItems: "center"
@@ -32,6 +38,7 @@ function TextImageBlock({
32
38
  item: true,
33
39
  xs: 12,
34
40
  sx: {
41
+ p: 1,
35
42
  display: "grid",
36
43
  alignItems: "center",
37
44
  justifyItems: "center"
@@ -42,20 +49,28 @@ function TextImageBlock({
42
49
  item: true,
43
50
  xs: 6,
44
51
  sx: {
52
+ padding: "10px",
45
53
  minHeight: "100vh",
46
54
  display: "grid",
47
55
  alignItems: "center",
48
56
  justifyItems: "center"
49
57
  }
50
- }, /*#__PURE__*/React.createElement("img", {
58
+ }, /*#__PURE__*/React.createElement(material.Box, {
59
+ sx: {
60
+ width: "100%",
61
+ height: "100%",
62
+ overflow: "hidden"
63
+ }
64
+ }, /*#__PURE__*/React.createElement(Image, {
51
65
  src: image_content.url,
52
66
  width: image_content.width,
53
67
  height: image_content.height,
54
68
  alt: image_content.name
55
- })), text_content && /*#__PURE__*/React.createElement(material.Grid, {
69
+ }))), text_content && /*#__PURE__*/React.createElement(material.Grid, {
56
70
  item: true,
57
71
  xs: image_content?.url !== undefined ? 6 : 12,
58
72
  sx: {
73
+ p: 1,
59
74
  minHeight: "100vh",
60
75
  display: "grid",
61
76
  alignItems: "center",
@@ -65,6 +80,7 @@ function TextImageBlock({
65
80
  item: true,
66
81
  xs: image_content?.url !== undefined ? 6 : 12,
67
82
  sx: {
83
+ p: 1,
68
84
  minHeight: "100vh",
69
85
  display: "grid",
70
86
  alignItems: "center",
@@ -74,17 +90,24 @@ function TextImageBlock({
74
90
  item: true,
75
91
  xs: 6,
76
92
  sx: {
93
+ padding: "10px",
77
94
  minHeight: "100vh",
78
95
  display: "grid",
79
96
  alignItems: "center",
80
97
  justifyItems: "center"
81
98
  }
82
- }, /*#__PURE__*/React.createElement("img", {
99
+ }, /*#__PURE__*/React.createElement(material.Box, {
100
+ sx: {
101
+ width: "100%",
102
+ height: "100%",
103
+ overflow: "hidden"
104
+ }
105
+ }, /*#__PURE__*/React.createElement(Image, {
83
106
  src: image_content.url,
84
107
  width: image_content.width,
85
108
  height: image_content.height,
86
109
  alt: image_content.alt
87
- }))));
110
+ })))));
88
111
  }
89
112
  TextImageBlock.propTypes = {
90
113
  block_title: PropTypes.string,
@@ -95,7 +118,8 @@ TextImageBlock.propTypes = {
95
118
  height: PropTypes.number,
96
119
  alt: PropTypes.string
97
120
  }),
98
- reverse: PropTypes.bool
121
+ reverse: PropTypes.bool,
122
+ maxWidth: PropTypes.string
99
123
  };
100
124
 
101
125
  exports.default = TextImageBlock;
package/dist/esm/components/TextImageBlock.js CHANGED
@@ -6,7 +6,8 @@
6
6
  */
7
7
 
8
8
  import React from 'react';
9
- import { Grid, Typography } from '@mui/material';
9
+ import { Grid, Typography, Box } from '@mui/material';
10
+ import Image from 'next/image';
10
11
  import { MuiMarkdown } from 'mui-markdown';
11
12
  import PropTypes from 'prop-types';
12
13
 
@@ -14,12 +15,17 @@ function TextImageBlock({
14
15
  block_title,
15
16
  text_content,
16
17
  image_content,
17
- reverse
18
+ reverse,
19
+ maxWidth
18
20
  }) {
19
21
  reverse = Boolean(reverse);
22
+ maxWidth = maxWidth || "100%";
20
23
  return /*#__PURE__*/React.createElement(Grid, {
21
24
  container: true,
22
- sx: [text_content === undefined && {
25
+ sx: [{
26
+ maxWidth: maxWidth,
27
+ margin: "auto"
28
+ }, text_content === undefined && {
23
29
  display: "grid",
24
30
  alignItems: "center",
25
31
  justifyItems: "center"
@@ -28,6 +34,7 @@ function TextImageBlock({
28
34
  item: true,
29
35
  xs: 12,
30
36
  sx: {
37
+ p: 1,
31
38
  display: "grid",
32
39
  alignItems: "center",
33
40
  justifyItems: "center"
@@ -38,20 +45,28 @@ function TextImageBlock({
38
45
  item: true,
39
46
  xs: 6,
40
47
  sx: {
48
+ padding: "10px",
41
49
  minHeight: "100vh",
42
50
  display: "grid",
43
51
  alignItems: "center",
44
52
  justifyItems: "center"
45
53
  }
46
- }, /*#__PURE__*/React.createElement("img", {
54
+ }, /*#__PURE__*/React.createElement(Box, {
55
+ sx: {
56
+ width: "100%",
57
+ height: "100%",
58
+ overflow: "hidden"
59
+ }
60
+ }, /*#__PURE__*/React.createElement(Image, {
47
61
  src: image_content.url,
48
62
  width: image_content.width,
49
63
  height: image_content.height,
50
64
  alt: image_content.name
51
- })), text_content && /*#__PURE__*/React.createElement(Grid, {
65
+ }))), text_content && /*#__PURE__*/React.createElement(Grid, {
52
66
  item: true,
53
67
  xs: image_content?.url !== undefined ? 6 : 12,
54
68
  sx: {
69
+ p: 1,
55
70
  minHeight: "100vh",
56
71
  display: "grid",
57
72
  alignItems: "center",
@@ -61,6 +76,7 @@ function TextImageBlock({
61
76
  item: true,
62
77
  xs: image_content?.url !== undefined ? 6 : 12,
63
78
  sx: {
79
+ p: 1,
64
80
  minHeight: "100vh",
65
81
  display: "grid",
66
82
  alignItems: "center",
@@ -70,17 +86,24 @@ function TextImageBlock({
70
86
  item: true,
71
87
  xs: 6,
72
88
  sx: {
89
+ padding: "10px",
73
90
  minHeight: "100vh",
74
91
  display: "grid",
75
92
  alignItems: "center",
76
93
  justifyItems: "center"
77
94
  }
78
- }, /*#__PURE__*/React.createElement("img", {
95
+ }, /*#__PURE__*/React.createElement(Box, {
96
+ sx: {
97
+ width: "100%",
98
+ height: "100%",
99
+ overflow: "hidden"
100
+ }
101
+ }, /*#__PURE__*/React.createElement(Image, {
79
102
  src: image_content.url,
80
103
  width: image_content.width,
81
104
  height: image_content.height,
82
105
  alt: image_content.alt
83
- }))));
106
+ })))));
84
107
  }
85
108
  TextImageBlock.propTypes = {
86
109
  block_title: PropTypes.string,
@@ -91,7 +114,8 @@ TextImageBlock.propTypes = {
91
114
  height: PropTypes.number,
92
115
  alt: PropTypes.string
93
116
  }),
94
- reverse: PropTypes.bool
117
+ reverse: PropTypes.bool,
118
+ maxWidth: PropTypes.string
95
119
  };
96
120
 
97
121
  export { TextImageBlock as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.20",
3
+ "version": "0.1.22",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/TextImageBlock.js CHANGED
@@ -1,18 +1,27 @@
1
1
  "use client";
2
2
 
3
3
  import React from "react";
4
- import { Grid, Typography } from "@mui/material";
5
- // import Image from "next/image";
4
+ import { Box, Grid, Typography } from "@mui/material";
5
+ import Image from "next/image";
6
6
  import { MuiMarkdown } from "mui-markdown";
7
7
  import PropTypes from "prop-types";
8
8
 
9
- function TextImageBlock({ block_title, text_content, image_content, reverse }) {
9
+ function TextImageBlock({
10
+ block_title,
11
+ text_content,
12
+ image_content,
13
+ reverse,
14
+ maxWidth,
15
+ }) {
10
16
  reverse = Boolean(reverse);
11
17
 
18
+ maxWidth = maxWidth || "100%";
19
+
12
20
  return (
13
21
  <Grid
14
22
  container
15
23
  sx={[
24
+ { maxWidth: maxWidth, margin: "auto" },
16
25
  text_content === undefined && {
17
26
  display: "grid",
18
27
  alignItems: "center",
@@ -25,6 +34,7 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
25
34
  item
26
35
  xs={12}
27
36
  sx={{
37
+ p: 1,
28
38
  display: "grid",
29
39
  alignItems: "center",
30
40
  justifyItems: "center",
@@ -40,18 +50,27 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
40
50
  item
41
51
  xs={6}
42
52
  sx={{
53
+ padding: "10px",
43
54
  minHeight: "100vh",
44
55
  display: "grid",
45
56
  alignItems: "center",
46
57
  justifyItems: "center",
47
58
  }}
48
59
  >
49
- <img
50
- src={image_content.url}
51
- width={image_content.width}
52
- height={image_content.height}
53
- alt={image_content.name}
54
- />
60
+ <Box
61
+ sx={{
62
+ width: "100%",
63
+ height: "100%",
64
+ overflow: "hidden",
65
+ }}
66
+ >
67
+ <Image
68
+ src={image_content.url}
69
+ width={image_content.width}
70
+ height={image_content.height}
71
+ alt={image_content.name}
72
+ />
73
+ </Box>
55
74
  </Grid>
56
75
  )}
57
76
  {text_content && (
@@ -59,6 +78,7 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
59
78
  item
60
79
  xs={image_content?.url !== undefined ? 6 : 12}
61
80
  sx={{
81
+ p: 1,
62
82
  minHeight: "100vh",
63
83
  display: "grid",
64
84
  alignItems: "center",
@@ -76,6 +96,7 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
76
96
  item
77
97
  xs={image_content?.url !== undefined ? 6 : 12}
78
98
  sx={{
99
+ p: 1,
79
100
  minHeight: "100vh",
80
101
  display: "grid",
81
102
  alignItems: "center",
@@ -90,18 +111,27 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
90
111
  item
91
112
  xs={6}
92
113
  sx={{
114
+ padding: "10px",
93
115
  minHeight: "100vh",
94
116
  display: "grid",
95
117
  alignItems: "center",
96
118
  justifyItems: "center",
97
119
  }}
98
120
  >
99
- <img
100
- src={image_content.url}
101
- width={image_content.width}
102
- height={image_content.height}
103
- alt={image_content.alt}
104
- />
121
+ <Box
122
+ sx={{
123
+ width: "100%",
124
+ height: "100%",
125
+ overflow: "hidden",
126
+ }}
127
+ >
128
+ <Image
129
+ src={image_content.url}
130
+ width={image_content.width}
131
+ height={image_content.height}
132
+ alt={image_content.alt}
133
+ />
134
+ </Box>
105
135
  </Grid>
106
136
  )}
107
137
  </>
@@ -120,6 +150,7 @@ TextImageBlock.propTypes = {
120
150
  alt: PropTypes.string,
121
151
  }),
122
152
  reverse: PropTypes.bool,
153
+ maxWidth: PropTypes.string,
123
154
  };
124
155
 
125
156
  export default TextImageBlock;
package/src/stories/TextImageBlock.stories.js CHANGED
@@ -14,9 +14,9 @@ export const HelloWorld = Template.bind({});
14
14
  HelloWorld.args = {
15
15
  block_title: "Hello World",
16
16
  image_content: {
17
- url: "https://via.placeholder.com/150",
18
- width: 150,
19
- height: 150,
17
+ url: "https://via.placeholder.com/850",
18
+ width: 850,
19
+ height: 850,
20
20
  alt: "Hello World",
21
21
  },
22
22
  text_content:
@@ -29,9 +29,9 @@ export const HelloMars = Template.bind({});
29
29
  HelloMars.args = {
30
30
  block_title: "Hello Mars",
31
31
  image_content: {
32
- url: "https://via.placeholder.com/150",
33
- width: 150,
34
- height: 150,
32
+ url: "https://via.placeholder.com/1200",
33
+ width: 600,
34
+ height: 600,
35
35
  alt: "Hello Mars",
36
36
  },
37
37
  text_content:
@@ -51,6 +51,7 @@ NoTitle.args = {
51
51
  text_content:
52
52
  "**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface. <br /> <br /> *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
53
53
  reverse: false,
54
+ maxWidth: "900px",
54
55
  };
55
56
 
56
57
  export const NoImage = Template.bind({});