Individual Workflow Template Page / Part I

packages/design-system/package.json

@@ -30,14 +30,14 @@
     "@fortawesome/free-solid-svg-icons": "5.x",
     "@fortawesome/vue-fontawesome": "2.x",
     "core-js": "3.x",
-    "element-ui": "2.13.x"
+    "element-ui": "2.15.x"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "core-js": "^3.6.5",
-    "element-ui": "~2.13.0",
+    "element-ui": "2.15.x",
     "storybook-addon-themes": "^6.1.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -48,6 +48,7 @@
     "@storybook/addon-links": "^6.3.6",
     "@storybook/vue": "^6.3.6",
     "@types/jest": "^26.0.13",
+    "@types/markdown-it": "^12.2.3",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -64,6 +65,10 @@
     "eslint-plugin-vue": "^7.16.0",
     "fibers": "^5.0.0",
     "gulp": "^4.0.0",
+    "markdown-it": "^12.3.2",
+    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-link-attributes": "^4.0.0",
+    "markdown-it-task-lists": "^2.1.1",
     "prettier": "^2.3.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
@@ -75,6 +80,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-dart-sass": "^1.0.2",
     "node-notifier": ">=8.0.1",
-    "trim": ">=0.0.3"
+    "trim": ">=0.0.3",
+    "xss": "^1.0.10"
   }
 }

packages/design-system/src/components/N8nImage/Image.stories.js

@@ -0,0 +1,24 @@
+import N8nImage from './Image.vue';
+
+export default {
+  title: 'Atoms/Image',
+  component: N8nImage,
+	argTypes: {
+		images: {
+			control: {
+				type: 'array',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    N8nImage,
+  },
+  template:
+    '<n8n-image v-bind="$props"></n8n-image>',
+});
+
+export const Image = Template.bind({});

packages/design-system/src/components/N8nImage/Image.vue

@@ -0,0 +1,66 @@
+<template>
+	<div :class="$style.wrapper">
+		<div v-show="imageIsLoaded">
+			<img :class="$style.image" :srcset="getSrcset(images)" @load="imageIsLoaded = true"/>
+		</div>
+		<div>
+			<n8n-loading :animated="true" :loading="!imageIsLoaded" :rows="1" variant="image" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import N8nLoading from '../N8nLoading';
+
+interface IProps {
+	url: string;
+	metadata: IMetadata;
+}
+
+interface IMetadata {
+  width: string
+}
+
+export default {
+	name: 'n8n-image',
+	props: {
+		images: {
+			type: Array,
+		},
+	},
+	components: {
+		N8nLoading,
+	},
+	data() {
+		return {
+			imageIsLoaded: false,
+		};
+	},
+	methods: {
+		getSrcset(images: IProps[]): string {
+			let srcset = '';
+			if (images) {
+				for (let i = 0; i < images.length; i++) {
+          if (!images[i].metadata) {
+            srcset += images[i].url + ` 600w,`;
+          } else {
+						srcset += images[i].url + ` ${images[i].metadata.width}w,`;
+					}
+
+				}
+			}
+			return srcset;
+		},
+		onLoad() {
+			this.imageIsLoaded = true;
+		}
+	},
+};
+</script>
+
+<style lang="scss" module>
+.image {
+	border: 1px solid #dbdfe7;
+	border-radius: var(--border-radius-large);
+}
+</style>

packages/design-system/src/components/N8nImage/index.js

@@ -0,0 +1,3 @@
+import Image from './Image.vue';
+
+export default Image;

packages/design-system/src/components/N8nLoading/Loading.stories.js

@@ -0,0 +1,40 @@
+import N8nLoading from './Loading.vue';
+
+export default {
+	title: 'Atoms/Loading',
+	component: N8nLoading,
+	argTypes: {
+		animated: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		loading: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		rows: {
+			control: {
+				type: 'select',
+				options: [1, 2, 3, 4, 5],
+			},
+		},
+		variant: {
+			control: {
+				type: 'select',
+				options: ['button', 'h1', 'image', 'p'],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nLoading,
+	},
+	template: '<n8n-loading v-bind="$props"></n8n-heading>',
+});
+
+export const Loading = Template.bind({});

packages/design-system/src/components/N8nLoading/Loading.vue

@@ -0,0 +1,62 @@
+<template>
+	<el-skeleton :loading="loading" :animated="animated">
+		<template slot="template">
+			<el-skeleton-item
+				v-if="variant === 'button'"
+				:variant="variant"
+			/>
+			<div v-if="variant === 'h1'">
+				<el-skeleton-item
+					v-for="(item, index) in rows"
+					:key="`${index}-${item}`"
+					:class="{
+						'el-skeleton__h1--last': item === rows && rows > 1,
+					}"
+					:variant="variant"
+				/>
+			</div>
+			<el-skeleton-item
+				v-if="variant === 'image'"
+				:variant="variant"
+			/>
+			<div v-if="variant === 'p'">
+				<el-skeleton-item
+					class="el-skeleton__paragraph"
+					v-for="(item, index) in rows"
+					:key="`${index}-${item}`"
+					:class="{
+						'last': item === rows && rows > 1,
+					}"
+					:variant="variant"
+				/>
+			</div>
+		</template>
+	</el-skeleton>
+</template>
+
+<script lang="ts">
+import ElSkeleton from 'element-ui/lib/skeleton';
+import ElSkeletonItem from 'element-ui/lib/skeleton-item';
+
+export default {
+	name: 'n8n-loading',
+	components: {
+		ElSkeleton,
+		ElSkeletonItem,
+	},
+	props: {
+		animated: {
+			type: Boolean,
+		},
+		loading: {
+			type: Boolean,
+		},
+		rows: {
+			type: Number,
+		},
+		variant: {
+			type: String,
+		},
+	},
+};
+</script>

packages/design-system/src/components/N8nLoading/index.js

@@ -0,0 +1,3 @@
+import N8nLoading from './Loading.vue';
+
+export default N8nLoading;