Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): Update callout component design #5126

Merged
merged 2 commits into from
Jan 13, 2023
Merged

feat(editor): Update callout component design #5126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35ff02b
feat(design-system): Update callout component design
alexgrozav Jan 11, 2023
b6b94e6
chore: merge master
alexgrozav Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions packages/design-system/src/components/N8nCallout/Callout.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,7 @@ export const defaultCallout = template.bind({});
defaultCallout.args = {
theme: 'success',
default: `
<n8n-text size="small" >
This is a default callout.
</n8n-text>
This is a default callout.
`,
};

Expand All @@ -75,9 +73,7 @@ customCallout.args = {
theme: 'custom',
icon: 'code-branch',
default: `
<n8n-text size="small" >
This is a custom callout.
</n8n-text>
This is a custom callout.
`,
actions: `
<n8n-link size="small">
Expand All @@ -91,9 +87,7 @@ secondaryCallout.args = {
theme: 'secondary',
icon: 'thumbtack',
default: `
<n8n-text size="small">
This data is pinned.
</n8n-text>
This data is pinned.
`,
actions: `
<n8n-link theme="secondary" size="small" :bold="true" :underline="true">
Expand Down
8 changes: 7 additions & 1 deletion packages/design-system/src/components/N8nCallout/Callout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
<div :class="$style.icon">
<n8n-icon :icon="getIcon" :size="theme === 'secondary' ? 'medium' : 'large'" />
</div>
<slot />&nbsp;
<n8n-text size="small">
<slot />
</n8n-text>
&nbsp;
<slot name="actions" />
</div>

Expand All @@ -14,6 +17,7 @@

<script lang="ts">
import Vue from 'vue';
import N8nText from '../N8nText';
import N8nIcon from '../N8nIcon';

const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
Expand All @@ -26,6 +30,7 @@ const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
export default Vue.extend({
name: 'n8n-callout',
components: {
N8nText,
N8nIcon,
},
props: {
Expand Down Expand Up @@ -69,6 +74,7 @@ export default Vue.extend({

.message-section {
display: flex;
align-items: center;
}

.info,
Expand Down
70 changes: 42 additions & 28 deletions ...ages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,93 @@
// Vitest Snapshot v1

exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _custom_lpicq_17\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _custom_qeab1_18\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp; <n8n-link-stub size=\\"small\\">Do something!</n8n-link-stub>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp; <n8n-link-stub size=\\"small\\">Do something!</n8n-link-stub>
</div>
<n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link-stub>
</div>"
`;

exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _custom_lpicq_17\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _custom_qeab1_18\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp;
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div>
</div>"
`;

exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _danger_lpicq_35\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _danger_qeab1_36\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a danger callout.</n8n-text-stub>&nbsp;
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a danger callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div>
</div>"
`;

exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _info_lpicq_16\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _info_qeab1_17\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is an info callout.</n8n-text-stub>&nbsp;
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is an info callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div>
</div>"
`;

exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _secondary_lpicq_45\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _secondary_qeab1_46\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp;
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div>
</div>"
`;

exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _success_lpicq_29\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _success_qeab1_30\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a success callout.</n8n-text-stub>&nbsp;
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a success callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div>
</div>"
`;

exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _warning_lpicq_23\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _warning_qeab1_24\\">
<div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a warning callout.</n8n-text-stub>&nbsp;
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a warning callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div>
</div>"
`;