umwd-components 0.1.60 → 0.1.62

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 (8) hide show
  1. package/dist/cjs/components/TextImageBlock.js +95 -70
  2. package/dist/esm/components/TextImageBlock.js +96 -71
  3. package/package.json +2 -1
  4. package/src/components/Page.js +2 -2
  5. package/src/components/TextImageSection.tsx +91 -0
  6. package/src/stories/TextImageSection.stories.js +73 -0
  7. package/src/components/TextImageBlock.js +0 -161
  8. package/src/stories/TextImageBlock.stories.js +0 -77
package/dist/cjs/components/TextImageBlock.js CHANGED
@@ -29,46 +29,106 @@ function TextImageBlock(_ref) {
29
29
 
30
30
  /* TODO Text_content should deal with linebreaks */
31
31
 
32
+ /* return (
33
+ <Container maxWidth="lg" sx={{ my: 1 }}>
34
+ <Grid
35
+ container
36
+ sx={[
37
+ { margin: "auto", p: 2 },
38
+ text === undefined && {
39
+ display: "grid",
40
+ alignItems: "center",
41
+ justifyContent: "center",
42
+ },
43
+ ]}
44
+ component={Paper}
45
+ >
46
+ {title && (
47
+ <Grid
48
+ item
49
+ xs={12}
50
+ sx={{
51
+ p: 1,
52
+ display: "grid",
53
+ alignItems: "center",
54
+ justifyContent: "center",
55
+ }}
56
+ >
57
+ <Typography variant="h1">{title}</Typography>
58
+ </Grid>
59
+ )}
60
+ {image?.url !== undefined && (
61
+ <Grid
62
+ item
63
+ xs={text !== null && text !== undefined ? 6 : 12}
64
+ sx={{
65
+ padding: "10px",
66
+ minHeight: minHeight || "300px",
67
+ display: "grid",
68
+ alignItems: "center",
69
+ justifyContent: "center",
70
+ }}
71
+ >
72
+ <Box
73
+ sx={{
74
+ width: "100%",
75
+ height: "100%",
76
+ overflow: "hidden",
77
+ display: "flex",
78
+ alignItems: "center",
79
+ justifyContent: "center",
80
+ }}
81
+ >
82
+ <Image
83
+ src={image.url}
84
+ width={image.width || 500}
85
+ height={image.height || 500}
86
+ alt={image.name}
87
+ />
88
+ </Box>
89
+ </Grid>
90
+ )}
91
+ {text !== null && text !== undefined && (
92
+ <Grid
93
+ item
94
+ xs={image?.url !== undefined ? 6 : 12}
95
+ sx={{
96
+ p: 1,
97
+ minHeight: minHeight || "300px",
98
+ display: "grid",
99
+ alignItems: "center",
100
+ justifyContent: "center",
101
+ }}
102
+ >
103
+ <MuiMarkdown>{text}</MuiMarkdown>
104
+ </Grid>
105
+ )}
106
+ </Grid>
107
+ </Container>
108
+ ); */
109
+
32
110
  return /*#__PURE__*/React.createElement(material.Container, {
33
111
  maxWidth: "lg",
34
112
  sx: {
35
113
  my: 1
36
114
  }
37
- }, /*#__PURE__*/React.createElement(material.Grid, {
38
- container: true,
39
- sx: [{
40
- margin: "auto",
41
- p: 2
42
- }, text === undefined && {
43
- display: "grid",
44
- alignItems: "center",
45
- justifyContent: "center"
46
- }],
47
- component: material.Paper
48
- }, title && /*#__PURE__*/React.createElement(material.Grid, {
49
- item: true,
50
- xs: 12,
115
+ }, /*#__PURE__*/React.createElement(material.Paper, {
51
116
  sx: {
52
- p: 1,
53
- display: "grid",
54
- alignItems: "center",
55
- justifyContent: "center"
117
+ p: 2
56
118
  }
57
- }, /*#__PURE__*/React.createElement(material.Typography, {
58
- variant: "h1"
59
- }, title)), reverse ? /*#__PURE__*/React.createElement(React.Fragment, null, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
60
- item: true,
61
- xs: text !== null && text !== undefined ? 6 : 12,
119
+ }, title && /*#__PURE__*/React.createElement(material.Typography, {
120
+ variant: "h1",
121
+ textAlign: "center",
122
+ width: "100%",
62
123
  sx: {
63
- padding: "10px",
64
- minHeight: minHeight || "300px",
65
- display: "grid",
66
- alignItems: "center",
67
- justifyContent: "center"
124
+ pb: 2
68
125
  }
69
- }, /*#__PURE__*/React.createElement(material.Box, {
126
+ }, title), /*#__PURE__*/React.createElement(material.Stack, {
127
+ spacing: 2,
128
+ direction: reverse ? "row-reverse" : "row"
129
+ }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Box, {
70
130
  sx: {
71
- width: "100%",
131
+ width: text !== null && text !== undefined ? "50%" : "100%",
72
132
  height: "100%",
73
133
  overflow: "hidden",
74
134
  display: "flex",
@@ -77,54 +137,19 @@ function TextImageBlock(_ref) {
77
137
  }
78
138
  }, /*#__PURE__*/React.createElement(Image, {
79
139
  src: image.url,
80
- width: image.width,
81
- height: image.height,
140
+ width: image.width || 500,
141
+ height: image.height || 500,
82
142
  alt: image.name
83
- }))), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
84
- item: true,
85
- xs: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 6 : 12,
143
+ })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
86
144
  sx: {
87
- p: 1,
88
- minHeight: minHeight || "300px",
89
- display: "grid",
90
- alignItems: "center",
91
- justifyContent: "center"
92
- }
93
- }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text))) : /*#__PURE__*/React.createElement(React.Fragment, null, text && /*#__PURE__*/React.createElement(material.Grid, {
94
- item: true,
95
- xs: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 6 : 12,
96
- sx: {
97
- p: 1,
98
- minHeight: minHeight || "300px",
99
- display: "grid",
100
- alignItems: "center",
101
- justifyContent: "center"
102
- }
103
- }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text)), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
104
- item: true,
105
- xs: text !== null && text !== undefined ? 6 : 12,
106
- sx: {
107
- padding: "10px",
108
- minHeight: minHeight || "300px",
109
- display: "grid",
110
- alignItems: "center",
111
- justifyContent: "center"
112
- }
113
- }, /*#__PURE__*/React.createElement(material.Box, {
114
- sx: {
115
- width: "100%",
145
+ width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
116
146
  height: "100%",
117
147
  overflow: "hidden",
118
148
  display: "flex",
119
149
  alignItems: "center",
120
150
  justifyContent: "center"
121
151
  }
122
- }, /*#__PURE__*/React.createElement(Image, {
123
- src: image.url,
124
- width: image.width,
125
- height: image.height,
126
- alt: image.alt
127
- }))))));
152
+ }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text)))));
128
153
  }
129
154
  TextImageBlock.propTypes = {
130
155
  title: PropTypes.string,
package/dist/esm/components/TextImageBlock.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import React from 'react';
9
- import { Container, Grid, Paper, Typography, Box } from '@mui/material';
9
+ import { Container, Paper, Typography, Stack, Box } from '@mui/material';
10
10
  import Image from 'next/image';
11
11
  import { MuiMarkdown } from 'mui-markdown';
12
12
  import PropTypes from 'prop-types';
@@ -25,46 +25,106 @@ function TextImageBlock(_ref) {
25
25
 
26
26
  /* TODO Text_content should deal with linebreaks */
27
27
 
28
+ /* return (
29
+ <Container maxWidth="lg" sx={{ my: 1 }}>
30
+ <Grid
31
+ container
32
+ sx={[
33
+ { margin: "auto", p: 2 },
34
+ text === undefined && {
35
+ display: "grid",
36
+ alignItems: "center",
37
+ justifyContent: "center",
38
+ },
39
+ ]}
40
+ component={Paper}
41
+ >
42
+ {title && (
43
+ <Grid
44
+ item
45
+ xs={12}
46
+ sx={{
47
+ p: 1,
48
+ display: "grid",
49
+ alignItems: "center",
50
+ justifyContent: "center",
51
+ }}
52
+ >
53
+ <Typography variant="h1">{title}</Typography>
54
+ </Grid>
55
+ )}
56
+ {image?.url !== undefined && (
57
+ <Grid
58
+ item
59
+ xs={text !== null && text !== undefined ? 6 : 12}
60
+ sx={{
61
+ padding: "10px",
62
+ minHeight: minHeight || "300px",
63
+ display: "grid",
64
+ alignItems: "center",
65
+ justifyContent: "center",
66
+ }}
67
+ >
68
+ <Box
69
+ sx={{
70
+ width: "100%",
71
+ height: "100%",
72
+ overflow: "hidden",
73
+ display: "flex",
74
+ alignItems: "center",
75
+ justifyContent: "center",
76
+ }}
77
+ >
78
+ <Image
79
+ src={image.url}
80
+ width={image.width || 500}
81
+ height={image.height || 500}
82
+ alt={image.name}
83
+ />
84
+ </Box>
85
+ </Grid>
86
+ )}
87
+ {text !== null && text !== undefined && (
88
+ <Grid
89
+ item
90
+ xs={image?.url !== undefined ? 6 : 12}
91
+ sx={{
92
+ p: 1,
93
+ minHeight: minHeight || "300px",
94
+ display: "grid",
95
+ alignItems: "center",
96
+ justifyContent: "center",
97
+ }}
98
+ >
99
+ <MuiMarkdown>{text}</MuiMarkdown>
100
+ </Grid>
101
+ )}
102
+ </Grid>
103
+ </Container>
104
+ ); */
105
+
28
106
  return /*#__PURE__*/React.createElement(Container, {
29
107
  maxWidth: "lg",
30
108
  sx: {
31
109
  my: 1
32
110
  }
33
- }, /*#__PURE__*/React.createElement(Grid, {
34
- container: true,
35
- sx: [{
36
- margin: "auto",
37
- p: 2
38
- }, text === undefined && {
39
- display: "grid",
40
- alignItems: "center",
41
- justifyContent: "center"
42
- }],
43
- component: Paper
44
- }, title && /*#__PURE__*/React.createElement(Grid, {
45
- item: true,
46
- xs: 12,
111
+ }, /*#__PURE__*/React.createElement(Paper, {
47
112
  sx: {
48
- p: 1,
49
- display: "grid",
50
- alignItems: "center",
51
- justifyContent: "center"
113
+ p: 2
52
114
  }
53
- }, /*#__PURE__*/React.createElement(Typography, {
54
- variant: "h1"
55
- }, title)), reverse ? /*#__PURE__*/React.createElement(React.Fragment, null, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(Grid, {
56
- item: true,
57
- xs: text !== null && text !== undefined ? 6 : 12,
115
+ }, title && /*#__PURE__*/React.createElement(Typography, {
116
+ variant: "h1",
117
+ textAlign: "center",
118
+ width: "100%",
58
119
  sx: {
59
- padding: "10px",
60
- minHeight: minHeight || "300px",
61
- display: "grid",
62
- alignItems: "center",
63
- justifyContent: "center"
120
+ pb: 2
64
121
  }
65
- }, /*#__PURE__*/React.createElement(Box, {
122
+ }, title), /*#__PURE__*/React.createElement(Stack, {
123
+ spacing: 2,
124
+ direction: reverse ? "row-reverse" : "row"
125
+ }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(Box, {
66
126
  sx: {
67
- width: "100%",
127
+ width: text !== null && text !== undefined ? "50%" : "100%",
68
128
  height: "100%",
69
129
  overflow: "hidden",
70
130
  display: "flex",
@@ -73,54 +133,19 @@ function TextImageBlock(_ref) {
73
133
  }
74
134
  }, /*#__PURE__*/React.createElement(Image, {
75
135
  src: image.url,
76
- width: image.width,
77
- height: image.height,
136
+ width: image.width || 500,
137
+ height: image.height || 500,
78
138
  alt: image.name
79
- }))), text !== null && text !== undefined && /*#__PURE__*/React.createElement(Grid, {
80
- item: true,
81
- xs: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 6 : 12,
139
+ })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(Box, {
82
140
  sx: {
83
- p: 1,
84
- minHeight: minHeight || "300px",
85
- display: "grid",
86
- alignItems: "center",
87
- justifyContent: "center"
88
- }
89
- }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text))) : /*#__PURE__*/React.createElement(React.Fragment, null, text && /*#__PURE__*/React.createElement(Grid, {
90
- item: true,
91
- xs: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 6 : 12,
92
- sx: {
93
- p: 1,
94
- minHeight: minHeight || "300px",
95
- display: "grid",
96
- alignItems: "center",
97
- justifyContent: "center"
98
- }
99
- }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(Grid, {
100
- item: true,
101
- xs: text !== null && text !== undefined ? 6 : 12,
102
- sx: {
103
- padding: "10px",
104
- minHeight: minHeight || "300px",
105
- display: "grid",
106
- alignItems: "center",
107
- justifyContent: "center"
108
- }
109
- }, /*#__PURE__*/React.createElement(Box, {
110
- sx: {
111
- width: "100%",
141
+ width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
112
142
  height: "100%",
113
143
  overflow: "hidden",
114
144
  display: "flex",
115
145
  alignItems: "center",
116
146
  justifyContent: "center"
117
147
  }
118
- }, /*#__PURE__*/React.createElement(Image, {
119
- src: image.url,
120
- width: image.width,
121
- height: image.height,
122
- alt: image.alt
123
- }))))));
148
+ }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))));
124
149
  }
125
150
  TextImageBlock.propTypes = {
126
151
  title: PropTypes.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.60",
3
+ "version": "0.1.62",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -86,6 +86,7 @@
86
86
  "dependencies": {
87
87
  "@fontsource/material-icons": "^5.0.15",
88
88
  "@fontsource/roboto": "^5.0.12",
89
+ "@mui/types": "^7.2.14",
89
90
  "@rollup/plugin-commonjs": "^25.0.7",
90
91
  "next-router-mock": "^0.9.12",
91
92
  "react": "^18.2.0",
package/src/components/Page.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import React from "react";
4
4
  import PropTypes from "prop-types";
5
- import TextImageBlock from "./TextImageBlock";
5
+ import TextImageBlock from "./TextImageSection.tsx";
6
6
  import { HeroSection } from "./HeroSection.tsx";
7
7
  import { FeatureSection } from "./FeaturesSection.tsx";
8
8
 
@@ -13,7 +13,7 @@ function blockRenderer(block) {
13
13
  case "layout.feature-section":
14
14
  return <FeatureSection key={block.id} data={block} />;
15
15
  case "layout.text-image-section":
16
- return <TextImageBlock key={block.id} {...block} />;
16
+ return <TextImageBlock key={block.id} data={block} />;
17
17
  default:
18
18
  return null;
19
19
  }
package/src/components/TextImageSection.tsx ADDED
@@ -0,0 +1,91 @@
1
+ "use client";
2
+
3
+ import React from "react";
4
+ import { Box, Container, Paper, Typography, Stack } from "@mui/material";
5
+ import { MuiMarkdown } from "mui-markdown";
6
+ import { StrapiImage } from "./StrapiImage.tsx";
7
+
8
+ type maxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | string;
9
+
10
+ interface TextImageSectionProps {
11
+ data: {
12
+ title: string;
13
+ text: string;
14
+ image: {
15
+ url: string;
16
+ width: number;
17
+ height: number;
18
+ alt: string;
19
+ };
20
+ reverse: boolean;
21
+ maxWidth: maxWidth;
22
+ minHeight: string;
23
+ };
24
+ }
25
+
26
+ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
27
+ const { title, text, image, reverse = false, maxWidth } = data;
28
+
29
+ /* TODO Text_content should deal with linebreaks,
30
+ reading up upon mui-markdown docs is advised */
31
+
32
+ return (
33
+ <Container maxWidth={maxWidth} sx={{ my: 1 }}>
34
+ <Paper sx={{ p: 2 }}>
35
+ {title && (
36
+ <Typography
37
+ variant="h1"
38
+ textAlign="center"
39
+ width={"100%"}
40
+ sx={{ pb: 2 }}
41
+ >
42
+ {title}
43
+ </Typography>
44
+ )}
45
+
46
+ <Stack spacing={2} direction={reverse ? "row-reverse" : "row"}>
47
+ {image?.url !== undefined && (
48
+ <Box
49
+ sx={{
50
+ width: text !== null && text !== undefined ? "50%" : "100%",
51
+ height: "100%",
52
+ overflow: "hidden",
53
+ display: "flex",
54
+ alignItems: "center",
55
+ justifyContent: "center",
56
+ }}
57
+ >
58
+ <StrapiImage
59
+ alt={image.alt}
60
+ style={{}}
61
+ height={image.height}
62
+ src={image.url}
63
+ width={image.width}
64
+ />
65
+ </Box>
66
+ )}
67
+
68
+ {text !== null && text !== undefined && (
69
+ <Box
70
+ sx={{
71
+ width:
72
+ image?.url !== null && image?.url !== undefined
73
+ ? "50%"
74
+ : "100%",
75
+ height: "100%",
76
+ overflow: "hidden",
77
+ display: "flex",
78
+ alignItems: "center",
79
+ justifyContent: "center",
80
+ }}
81
+ >
82
+ <MuiMarkdown>{text}</MuiMarkdown>
83
+ </Box>
84
+ )}
85
+ </Stack>
86
+ </Paper>
87
+ </Container>
88
+ );
89
+ }
90
+
91
+ export default TextImageSection;
package/src/stories/TextImageSection.stories.js ADDED
@@ -0,0 +1,73 @@
1
+ import TextImageSection from "../components/TextImageSection.tsx";
2
+ import React from "react";
3
+
4
+ export default {
5
+ title: "UMWD/TextImageSection",
6
+ component: TextImageSection,
7
+ // argTypes: { numberOfChildren: { type: "number" } },
8
+ };
9
+
10
+ const Template = ({ ...args }) => <TextImageSection data={args} />;
11
+
12
+ export const HelloWorld = Template.bind({});
13
+
14
+ HelloWorld.args = {
15
+ title: "Hello World",
16
+ image: {
17
+ url: "https://via.placeholder.com/850",
18
+ width: 850,
19
+ height: 850,
20
+ alt: "Hello World",
21
+ },
22
+ text: "## Hello World \n **Hello World,** a timeless greeting that transcends boundaries and encapsulates the essence of connectivity in the digital age. From the humble beginnings of computer programming to the interconnected web of today, Hello World stands as the inaugural utterance in the realm of coding. *Hello World,* a phrase that marks the inception of countless software projects, introducing developers to the syntax and structure of a programming language. It symbolizes the first step into a world of algorithms, data structures, and creative problem-solving. Beyond its technical significance, it embodies the spirit of initiation and the commencement of a journey into the vast landscape of software development. <br /> <br /> *Hello World,* a greeting echoed by computer science enthusiasts worldwide, reflecting the universality of technology and the shared experience of navigating the intricacies of code. It bridges the gap between novices and seasoned programmers, serving as a common ground where knowledge is exchanged, challenges are discussed, and innovations are born. <br /> <br /> In a broader context, *Hello World* extends beyond the confines of programming. It serves as a metaphor for embracing new beginnings, fostering connections, and acknowledging the vastness of our global community. In a world increasingly shaped by technology, this simple greeting remains a symbol of the interconnectedness that defines our modern existence.",
23
+ reverse: false,
24
+ };
25
+
26
+ export const HelloMars = Template.bind({});
27
+
28
+ HelloMars.args = {
29
+ title: "Hello Mars",
30
+ image: {
31
+ url: "https://via.placeholder.com/1200",
32
+ width: 600,
33
+ height: 600,
34
+ alt: "Hello Mars",
35
+ },
36
+ text: "**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. *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.",
37
+ reverse: true,
38
+ };
39
+
40
+ export const NoTitle = Template.bind({});
41
+
42
+ NoTitle.args = {
43
+ image: {
44
+ url: "https://via.placeholder.com/150",
45
+ width: 150,
46
+ height: 150,
47
+ alt: "Hello Mars",
48
+ },
49
+ text: "**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.",
50
+ reverse: false,
51
+ maxWidth: "md",
52
+ };
53
+
54
+ export const NoImage = Template.bind({});
55
+
56
+ NoImage.args = {
57
+ title: "Hello Mars",
58
+ text: "## Hello Mars \n **Hello Mars,** 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.",
59
+ reverse: false,
60
+ };
61
+
62
+ export const NoText = Template.bind({});
63
+
64
+ NoText.args = {
65
+ title: "Hello Mars",
66
+ image: {
67
+ url: "https://via.placeholder.com/150",
68
+ width: 150,
69
+ height: 150,
70
+ alt: "Hello Mars",
71
+ },
72
+ reverse: true,
73
+ };
package/src/components/TextImageBlock.js DELETED
@@ -1,161 +0,0 @@
1
- "use client";
2
-
3
- import React from "react";
4
- import { Box, Container, Grid, Paper, Typography } from "@mui/material";
5
- import Image from "next/image";
6
- import { MuiMarkdown } from "mui-markdown";
7
- import PropTypes from "prop-types";
8
-
9
- function TextImageBlock({ title, text, image, reverse, maxWidth, minHeight }) {
10
- reverse = Boolean(reverse);
11
-
12
- maxWidth = maxWidth || "100%";
13
-
14
- /* TODO Text_content should deal with linebreaks */
15
-
16
- return (
17
- <Container maxWidth="lg" sx={{ my: 1 }}>
18
- <Grid
19
- container
20
- sx={[
21
- { margin: "auto", p: 2 },
22
- text === undefined && {
23
- display: "grid",
24
- alignItems: "center",
25
- justifyContent: "center",
26
- },
27
- ]}
28
- component={Paper}
29
- >
30
- {title && (
31
- <Grid
32
- item
33
- xs={12}
34
- sx={{
35
- p: 1,
36
- display: "grid",
37
- alignItems: "center",
38
- justifyContent: "center",
39
- }}
40
- >
41
- <Typography variant="h1">{title}</Typography>
42
- </Grid>
43
- )}
44
- {reverse ? (
45
- <>
46
- {image?.url !== undefined && (
47
- <Grid
48
- item
49
- xs={text !== null && text !== undefined ? 6 : 12}
50
- sx={{
51
- padding: "10px",
52
- minHeight: minHeight || "300px",
53
- display: "grid",
54
- alignItems: "center",
55
- justifyContent: "center",
56
- }}
57
- >
58
- <Box
59
- sx={{
60
- width: "100%",
61
- height: "100%",
62
- overflow: "hidden",
63
- display: "flex",
64
- alignItems: "center",
65
- justifyContent: "center",
66
- }}
67
- >
68
- <Image
69
- src={image.url}
70
- width={image.width}
71
- height={image.height}
72
- alt={image.name}
73
- />
74
- </Box>
75
- </Grid>
76
- )}
77
- {text !== null && text !== undefined && (
78
- <Grid
79
- item
80
- xs={image?.url !== undefined ? 6 : 12}
81
- sx={{
82
- p: 1,
83
- minHeight: minHeight || "300px",
84
- display: "grid",
85
- alignItems: "center",
86
- justifyContent: "center",
87
- }}
88
- >
89
- <MuiMarkdown>{text}</MuiMarkdown>
90
- </Grid>
91
- )}
92
- </>
93
- ) : (
94
- <>
95
- {text && (
96
- <Grid
97
- item
98
- xs={image?.url !== undefined ? 6 : 12}
99
- sx={{
100
- p: 1,
101
- minHeight: minHeight || "300px",
102
- display: "grid",
103
- alignItems: "center",
104
- justifyContent: "center",
105
- }}
106
- >
107
- <MuiMarkdown>{text}</MuiMarkdown>
108
- </Grid>
109
- )}
110
- {image?.url !== undefined && (
111
- <Grid
112
- item
113
- xs={text !== null && text !== undefined ? 6 : 12}
114
- sx={{
115
- padding: "10px",
116
- minHeight: minHeight || "300px",
117
- display: "grid",
118
- alignItems: "center",
119
- justifyContent: "center",
120
- }}
121
- >
122
- <Box
123
- sx={{
124
- width: "100%",
125
- height: "100%",
126
- overflow: "hidden",
127
- display: "flex",
128
- alignItems: "center",
129
- justifyContent: "center",
130
- }}
131
- >
132
- <Image
133
- src={image.url}
134
- width={image.width}
135
- height={image.height}
136
- alt={image.alt}
137
- />
138
- </Box>
139
- </Grid>
140
- )}
141
- </>
142
- )}
143
- </Grid>
144
- </Container>
145
- );
146
- }
147
-
148
- TextImageBlock.propTypes = {
149
- title: PropTypes.string,
150
- text: PropTypes.string,
151
- image: PropTypes.shape({
152
- url: PropTypes.string,
153
- width: PropTypes.number,
154
- height: PropTypes.number,
155
- alt: PropTypes.string,
156
- }),
157
- reverse: PropTypes.bool,
158
- maxWidth: PropTypes.string,
159
- };
160
-
161
- export default TextImageBlock;
package/src/stories/TextImageBlock.stories.js DELETED
@@ -1,77 +0,0 @@
1
- import TextImageBlock from "../components/TextImageBlock";
2
- import React from "react";
3
-
4
- export default {
5
- title: "UMWD/TextImageBlock",
6
- component: TextImageBlock,
7
- // argTypes: { numberOfChildren: { type: "number" } },
8
- };
9
-
10
- const Template = ({ ...args }) => <TextImageBlock {...args} />;
11
-
12
- export const HelloWorld = Template.bind({});
13
-
14
- HelloWorld.args = {
15
- block_title: "Hello World",
16
- image_content: {
17
- url: "https://via.placeholder.com/850",
18
- width: 850,
19
- height: 850,
20
- alt: "Hello World",
21
- },
22
- text_content:
23
- "## Hello World \n **Hello World,** a timeless greeting that transcends boundaries and encapsulates the essence of connectivity in the digital age. From the humble beginnings of computer programming to the interconnected web of today, Hello World stands as the inaugural utterance in the realm of coding. *Hello World,* a phrase that marks the inception of countless software projects, introducing developers to the syntax and structure of a programming language. It symbolizes the first step into a world of algorithms, data structures, and creative problem-solving. Beyond its technical significance, it embodies the spirit of initiation and the commencement of a journey into the vast landscape of software development. <br /> <br /> *Hello World,* a greeting echoed by computer science enthusiasts worldwide, reflecting the universality of technology and the shared experience of navigating the intricacies of code. It bridges the gap between novices and seasoned programmers, serving as a common ground where knowledge is exchanged, challenges are discussed, and innovations are born. <br /> <br /> In a broader context, *Hello World* extends beyond the confines of programming. It serves as a metaphor for embracing new beginnings, fostering connections, and acknowledging the vastness of our global community. In a world increasingly shaped by technology, this simple greeting remains a symbol of the interconnectedness that defines our modern existence.",
24
- reverse: false,
25
- };
26
-
27
- export const HelloMars = Template.bind({});
28
-
29
- HelloMars.args = {
30
- block_title: "Hello Mars",
31
- image_content: {
32
- url: "https://via.placeholder.com/1200",
33
- width: 600,
34
- height: 600,
35
- alt: "Hello Mars",
36
- },
37
- text_content:
38
- "**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. *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.",
39
- reverse: true,
40
- };
41
-
42
- export const NoTitle = Template.bind({});
43
-
44
- NoTitle.args = {
45
- image_content: {
46
- url: "https://via.placeholder.com/150",
47
- width: 150,
48
- height: 150,
49
- alt: "Hello Mars",
50
- },
51
- text_content:
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
- reverse: false,
54
- maxWidth: "900px",
55
- };
56
-
57
- export const NoImage = Template.bind({});
58
-
59
- NoImage.args = {
60
- block_title: "Hello Mars",
61
- text_content:
62
- "## Hello Mars \n **Hello Mars,** 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.",
63
- reverse: false,
64
- };
65
-
66
- export const NoText = Template.bind({});
67
-
68
- NoText.args = {
69
- block_title: "Hello Mars",
70
- image_content: {
71
- url: "https://via.placeholder.com/150",
72
- width: 150,
73
- height: 150,
74
- alt: "Hello Mars",
75
- },
76
- reverse: true,
77
- };