N8n 3194 output panels

packages/design-system/src/components/N8nIcon/Icon.vue

@@ -2,6 +2,7 @@
 	<component
 		:is="$options.components.N8nText"
 		:size="props.size"
+		:color="props.color"
 		:compact="true"
 	>
 		<component
@@ -36,6 +37,8 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		color: {
+		},
 	},
 };
 </script>

packages/design-system/src/components/N8nInfoTip/InfoTip.stories.js

@@ -11,7 +11,13 @@ const Template = (args, { argTypes }) => ({
 		N8nInfoTip,
 	},
 	template:
-		'<n8n-info-tip>Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
+		'<n8n-info-tip v-bind="$props">Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
 });
 
-export const InputLabel = Template.bind({});
+export const Note = Template.bind({});
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+	type: 'tooltip',
+	tooltipPlacement: 'right',
+};

packages/design-system/src/components/N8nInfoTip/InfoTip.vue

@@ -1,23 +1,48 @@
-<template functional>
-	<div :class="$style.infotip">
-		<component :is="$options.components.N8nIcon" icon="info-circle" /> <span><slot></slot></span>
+<template>
+	<div :class="[$style[theme], $style[type]]">
+		<n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'">
+			<span>
+				<n8n-icon :icon="theme.startsWith('info') ? 'info-circle': 'exclamation-triangle'" />
+				<span v-if="type === 'note'"><slot></slot></span>
+			</span>
+			<span v-if="type === 'tooltip'" slot="content"><slot></slot></span>
+		</n8n-tooltip>
 	</div>
 </template>
 
 <script lang="ts">
 import N8nIcon from '../N8nIcon';
+import N8nTooltip from '../N8nTooltip';
 
 export default {
 	name: 'n8n-info-tip',
 	components: {
 		N8nIcon,
+		N8nTooltip,
+	},
+	props: {
+		theme: {
+			type: String,
+			default: 'info',
+			validator: (value: string): boolean =>
+				['info', 'info-light', 'warning', 'danger'].includes(value),
+		},
+		type: {
+			type: String,
+			default: 'note',
+			validator: (value: string): boolean =>
+				['note', 'tooltip'].includes(value),
+		},
+		tooltipPlacement: {
+			type: String,
+			default: 'top',
+		},
 	},
 };
 </script>
 
 <style lang="scss" module>
-.infotip {
-	color: var(--color-text-light);
+.base {
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	line-height: var(--font-size-s);
@@ -27,7 +52,35 @@ export default {
 
 	svg {
 		font-size: var(--font-size-s);
+	}
+}
+
+.note {
+	composes: base;
+
+	svg {
 		margin-right: var(--spacing-4xs);
 	}
 }
+
+.tooltip {
+	composes: base;
+	display: inline-block;
+}
+
+.info-light {
+	color: var(--color-foreground-dark);
+}
+
+.info {
+	color: var(--color-text-light);
+}
+
+.warning {
+	color: var(--color-warning);
+}
+
+.danger {
+	color: var(--color-danger);
+}
 </style>

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -0,0 +1,66 @@
+<template>
+	<label role="radio" tabindex="-1" :class="$style.container" aria-checked="true">
+		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
+		<div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div>
+	</label>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'n8n-radio-button',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: String,
+			required: true,
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.container {
+	display: inline-block;
+	outline: 0;
+	position: relative;
+
+	&:hover {
+		.button:not(.active) {
+			color: var(--color-primary);
+		}
+	}
+}
+
+.input {
+	opacity: 0;
+	outline: 0;
+	z-index: -1;
+	position: absolute;
+}
+
+.button {
+	border-radius: 0;
+	padding: 0 var(--spacing-s);
+	display: flex;
+	align-items: center;
+	height: 26px;
+	font-size: var(--font-size-2xs);
+	border-radius: var(--border-radius-base);
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text-base);
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+.active {
+	background-color: var(--color-foreground-xlight);
+	color: var(--color-text-dark);
+}
+</style>

packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.js

@@ -0,0 +1,51 @@
+import N8nRadioButtons from './RadioButtons.vue';
+
+import { action } from '@storybook/addon-actions';
+
+export default {
+	title: 'Atoms/RadioButtons',
+	component: N8nRadioButtons,
+	argTypes: {
+	},
+	parameters: {
+		backgrounds: { default: '--color-background-xlight' },
+	},
+};
+
+const methods = {
+	onInput: action('input'),
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nRadioButtons,
+	},
+	template:
+		`<n8n-radio-buttons v-model="val" v-bind="$props" @input="onInput">
+		</n8n-radio-buttons>`,
+	methods,
+	data() {
+		return {
+			val: '',
+		};
+	},
+});
+
+export const Example = Template.bind({});
+Example.args = {
+	options: [
+		{
+			label: 'Test',
+			value: 'test',
+		},
+		{
+			label: 'World',
+			value: 'world',
+		},
+		{
+			label: 'Hello',
+			value: 'hello',
+		},
+	],
+};

packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue

@@ -0,0 +1,49 @@
+<template>
+	<div role="radiogroup" :class="$style.radioGroup">
+		<RadioButton
+			v-for="option in options"
+			:key="option.value"
+			v-bind="option"
+			:active="value === option.value"
+			@click="(e) => onClick(option.value, e)"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import RadioButton from './RadioButton';
+
+export default {
+	name: 'n8n-radio-buttons',
+	props: {
+		value: {
+			type: String,
+		},
+		options: {
+		},
+	},
+	components: {
+		RadioButton,
+	},
+	methods: {
+		onClick(value) {
+			this.$emit('input', value);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+
+.radioGroup {
+	display: inline-flex;
+	line-height: 1;
+	vertical-align: middle;
+	font-size: 0;
+	background-color: var(--color-foreground-base);
+	padding: var(--spacing-5xs);
+	border-radius: var(--border-radius-base);
+}
+
+</style>
+

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

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

packages/design-system/src/components/N8nSelect/Select.vue

@@ -1,24 +1,29 @@
 <template functional>
-	<component
-		:is="$options.components.ElSelect"
-		v-bind="props"
-		:value="props.value"
-		:size="$options.methods.getSize(props.size)"
-		:class="$style[$options.methods.getClass(props)]"
-		:popper-class="$options.methods.getPopperClass(props, $style)"
-		v-on="listeners"
-		:ref="data.ref"
-	>
-		<template v-slot:prefix>
-			<slot name="prefix" />
-		</template>
-		<template v-slot:suffix>
-			<slot name="suffix" />
-		</template>
-		<template v-slot:default>
-			<slot></slot>
-		</template>
-	</component>
+	<div :class="{[$style.container]: true, [$style.withPrepend]: !!$slots.prepend}">
+		<div v-if="$slots.prepend" :class="$style.prepend">
+			<slot name="prepend" />
+		</div>
+		<component
+			:is="$options.components.ElSelect"
+			v-bind="props"
+			:value="props.value"
+			:size="$options.methods.getSize(props.size)"
+			:class="$style[$options.methods.getClass(props)]"
+			:popper-class="$options.methods.getPopperClass(props, $style)"
+			v-on="listeners"
+			:ref="data.ref"
+		>
+			<template v-slot:prefix>
+				<slot name="prefix" />
+			</template>
+			<template v-slot:suffix>
+				<slot name="suffix" />
+			</template>
+			<template v-slot:default>
+				<slot></slot>
+			</template>
+		</component>
+	</div>
 </template>
 
 <script lang="ts">
@@ -121,4 +126,30 @@ export default {
 		overflow-x: hidden;
 	}
 }
+
+.container {
+	display: inline-flex;
+	width: 100%;
+}
+
+.withPrepend {
+	input {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+.prepend {
+	font-size: var(--font-size-2xs);
+	border: var(--border-base);
+	border-right: none;
+	display: flex;
+	align-items: center;
+	padding: 0 var(--spacing-3xs);
+	background-color: var(--color-background-light);
+	border-bottom-left-radius: var(--input-border-radius, var(--border-radius-base));
+	border-top-left-radius: var(--input-border-radius, var(--border-radius-base));
+	color: var(--color-text-base);
+	white-space: nowrap;
+}
 </style>