✨ Implement design system (#2050)
* split up main, sass imports, import new nds * migrate most buttons * update sizes based on feedback * update copy buttons * update executions list * fix issues * force message box buttons * update warning color * update more buttons * wrap message box buttons * update last component * lint fixes * add build report step * breakout imports * set package.json * fix notification bug * clean up imports * use build directories directly * update imports * remove xl size * update number inputs * fix input width * update line height, fix icon bug * fix up editor * fix spacing between buttons * Reset line height * revert changes to this * revert changes * clean up button sizes * change to outline * update select height * update tooltip * remove build report step * clean up impl * remove regenerator runtime * add design system repo * apply editorconfig * apply editor config prettier * lint issue * switch to tabs * switch to single space * update eslintrc * remove git modules * update sass package * support dart sass * add build * update dependency * update contributing.md * set repo * update versions * add tslint step * update spacing to spaces, add dev step * add test step * add test step * update browser lint rc * remove .github * delete .gitignore * set comment for icons * remove preview link * update button interface * update types * set types * clean up intro * update intro * remove assets * move into preview * remove headline comment * reduce theme build * loading executions * match deps versions * match deps versions * fix lint issues * fix lint issues * update callback * disable codacy for docs.css * fix storybook issues * add design system to docker image * update spacing around delete sort button * set line height to stop juggling headline * update sizes * clean up vars * fix scss issues * update button vars * add shade color * fix button without click * fix buttons bug * fix bug with executions list * clean up theme * update link styling * fix typo * run prettier * 🎨 code format * 🎨 code format * 🔥 remove empty files * ✨ N8n 2284 new inputs (#2075) * implement inputs * prettier fixes * revert unnessary change * move input components and tooltip * remove form elements * move select * update input placements * update sizes * update credentails * clean up select size * fix caret issue * update inputs * clean up select * fix tags dropdown border * clean up tags input * fix workflow name bug * clean up select here * add sizes template * fix option caret * fix input sizes * update date input size * remove tags input override * update prop * update input size * center run data inputs * update disabled colors * update execution header * update scrollbar * update text area spacing * fix items in header * update run data tooltip * remove popover * update prefix positions * add filterable demo * address design issues * fix input issues, flip boolean input to text * update input sufffix colors * remove override * speed up switch, fix toggle spacing issue * update icon * remove icon classes * clean up inputs * clean up inputs with icons * update input spacing again * update suffix position * build * Add support for xlarge inputs * fix input issues * fix input issue * update listeners * update number inputs for settings * update append/prepend spacing * clean up inputs, set expression input as text * fix type errors * fix workflow number input * fix tags dropdown bug * fix bugs * fix menu item bug * remove font weight from link element * remove default * fix select option * fix contrast issues * allow overflow x for multi selects * fix icon * update options select * fix issue that resolves expression to null * update how actions are centered * fix up selects * update selects to support limiting size * update option styles * ⚡ Apply suggestions BHesseldieck Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> * 🎨 code format Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> * ⏪ Revert "🔥 remove empty files" This reverts commit e91ace4e52403f4a6b00b7be68b86fc48b7d8fef. * ⚡ Remove private from n8n-design-system package * 🎨 Change to spaces to stay consistent with editorconfig & others package files * ⚡ Fix year in license Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
GitHub
169
packages/design-system/.storybook/font-awesome-icons.js
Normal file
169
packages/design-system/.storybook/font-awesome-icons.js
Normal file
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* These icons are only defined for storybook build
|
||||
* Editor icons are defined seperately
|
||||
*/
|
||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faAngleDoubleLeft,
|
||||
faAngleDown,
|
||||
faAngleRight,
|
||||
faAngleUp,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faAt,
|
||||
faBook,
|
||||
faBug,
|
||||
faCalendar,
|
||||
faCheck,
|
||||
faChevronDown,
|
||||
faChevronUp,
|
||||
faCode,
|
||||
faCodeBranch,
|
||||
faCog,
|
||||
faCogs,
|
||||
faClone,
|
||||
faCloud,
|
||||
faCloudDownloadAlt,
|
||||
faCopy,
|
||||
faCut,
|
||||
faDotCircle,
|
||||
faEdit,
|
||||
faEnvelope,
|
||||
faEye,
|
||||
faExclamationTriangle,
|
||||
faExpand,
|
||||
faExternalLinkAlt,
|
||||
faExchangeAlt,
|
||||
faFile,
|
||||
faFileArchive,
|
||||
faFileCode,
|
||||
faFileDownload,
|
||||
faFileExport,
|
||||
faFileImport,
|
||||
faFilePdf,
|
||||
faFolderOpen,
|
||||
faGift,
|
||||
faHdd,
|
||||
faHome,
|
||||
faHourglass,
|
||||
faImage,
|
||||
faInbox,
|
||||
faInfo,
|
||||
faInfoCircle,
|
||||
faKey,
|
||||
faMapSigns,
|
||||
faNetworkWired,
|
||||
faPause,
|
||||
faPen,
|
||||
faPlay,
|
||||
faPlayCircle,
|
||||
faPlus,
|
||||
faPlusCircle,
|
||||
faQuestion,
|
||||
faQuestionCircle,
|
||||
faRedo,
|
||||
faRss,
|
||||
faSave,
|
||||
faSearch,
|
||||
faSearchMinus,
|
||||
faSearchPlus,
|
||||
faServer,
|
||||
faSignInAlt,
|
||||
faSlidersH,
|
||||
faSpinner,
|
||||
faStop,
|
||||
faSun,
|
||||
faSync,
|
||||
faSyncAlt,
|
||||
faTable,
|
||||
faTasks,
|
||||
faTerminal,
|
||||
faThLarge,
|
||||
faTimes,
|
||||
faTrash,
|
||||
faUndo,
|
||||
faUsers,
|
||||
faClock,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
|
||||
library.add(faAngleDoubleLeft);
|
||||
library.add(faAngleDown);
|
||||
library.add(faAngleRight);
|
||||
library.add(faAngleUp);
|
||||
library.add(faArrowLeft);
|
||||
library.add(faArrowRight);
|
||||
library.add(faAt);
|
||||
library.add(faBook);
|
||||
library.add(faBug);
|
||||
library.add(faCalendar);
|
||||
library.add(faCheck);
|
||||
library.add(faChevronDown);
|
||||
library.add(faChevronUp);
|
||||
library.add(faCode);
|
||||
library.add(faCodeBranch);
|
||||
library.add(faCog);
|
||||
library.add(faCogs);
|
||||
library.add(faClone);
|
||||
library.add(faCloud);
|
||||
library.add(faCloudDownloadAlt);
|
||||
library.add(faCopy);
|
||||
library.add(faCut);
|
||||
library.add(faDotCircle);
|
||||
library.add(faEdit);
|
||||
library.add(faEnvelope);
|
||||
library.add(faEye);
|
||||
library.add(faExclamationTriangle);
|
||||
library.add(faExpand);
|
||||
library.add(faExternalLinkAlt);
|
||||
library.add(faExchangeAlt);
|
||||
library.add(faFile);
|
||||
library.add(faFileArchive);
|
||||
library.add(faFileCode);
|
||||
library.add(faFileDownload);
|
||||
library.add(faFileExport);
|
||||
library.add(faFileImport);
|
||||
library.add(faFilePdf);
|
||||
library.add(faFolderOpen);
|
||||
library.add(faGift);
|
||||
library.add(faHdd);
|
||||
library.add(faHome);
|
||||
library.add(faHourglass);
|
||||
library.add(faImage);
|
||||
library.add(faInbox);
|
||||
library.add(faInfo);
|
||||
library.add(faInfoCircle);
|
||||
library.add(faKey);
|
||||
library.add(faMapSigns);
|
||||
library.add(faNetworkWired);
|
||||
library.add(faPause);
|
||||
library.add(faPen);
|
||||
library.add(faPlay);
|
||||
library.add(faPlayCircle);
|
||||
library.add(faPlus);
|
||||
library.add(faPlusCircle);
|
||||
library.add(faQuestion);
|
||||
library.add(faQuestionCircle);
|
||||
library.add(faRedo);
|
||||
library.add(faRss);
|
||||
library.add(faSave);
|
||||
library.add(faSearch);
|
||||
library.add(faSearchMinus);
|
||||
library.add(faSearchPlus);
|
||||
library.add(faServer);
|
||||
library.add(faSignInAlt);
|
||||
library.add(faSlidersH);
|
||||
library.add(faSpinner);
|
||||
library.add(faStop);
|
||||
library.add(faSun);
|
||||
library.add(faSync);
|
||||
library.add(faSyncAlt);
|
||||
library.add(faTable);
|
||||
library.add(faTasks);
|
||||
library.add(faTerminal);
|
||||
library.add(faThLarge);
|
||||
library.add(faTimes);
|
||||
library.add(faTrash);
|
||||
library.add(faUndo);
|
||||
library.add(faUsers);
|
||||
library.add(faClock);
|
||||
1
packages/design-system/.storybook/fonts.scss
Normal file
1
packages/design-system/.storybook/fonts.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
|
||||
38
packages/design-system/.storybook/main.js
Normal file
38
packages/design-system/.storybook/main.js
Normal file
@@ -0,0 +1,38 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'storybook-addon-designs',
|
||||
'storybook-addon-themes',
|
||||
],
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
config.module.rules.push({
|
||||
test: /\.scss$/,
|
||||
oneOf: [
|
||||
{
|
||||
resourceQuery: /module/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
],
|
||||
include: path.resolve(__dirname, '../'),
|
||||
},
|
||||
{
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
||||
include: path.resolve(__dirname, '../'),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
65
packages/design-system/.storybook/preview.js
Normal file
65
packages/design-system/.storybook/preview.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import './font-awesome-icons';
|
||||
import './storybook.scss';
|
||||
|
||||
import lang from 'element-ui/lib/locale/lang/en';
|
||||
import locale from 'element-ui/lib/locale';
|
||||
|
||||
import Vue from 'vue';
|
||||
|
||||
locale.use(lang);
|
||||
|
||||
// https://github.com/storybookjs/storybook/issues/6153
|
||||
Vue.prototype.toJSON = function () {
|
||||
return this;
|
||||
};
|
||||
|
||||
export const parameters = {
|
||||
actions: {
|
||||
argTypesRegex: '^on[A-Z].*',
|
||||
},
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
backgrounds: {
|
||||
default: '--color-background-xlight',
|
||||
values: [
|
||||
{
|
||||
name: '--color-background-dark',
|
||||
value: 'var(--color-background-dark)',
|
||||
},
|
||||
{
|
||||
name: '--color-background-base',
|
||||
value: 'var(--color-background-base)',
|
||||
},
|
||||
{
|
||||
name: '--color-background-light',
|
||||
value: 'var(--color-background-light)',
|
||||
},
|
||||
{
|
||||
name: '--color-background-lighter',
|
||||
value: 'var(--color-background-lighter)',
|
||||
},
|
||||
{
|
||||
name: '--color-background-xlight',
|
||||
value: 'var(--color-background-xlight)',
|
||||
},
|
||||
],
|
||||
},
|
||||
themes: {
|
||||
list: [
|
||||
{
|
||||
name: 'dark',
|
||||
class: 'theme-dark',
|
||||
color: '#000',
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
storySort: {
|
||||
order: ['Docs', 'Styleguide', 'Atoms'],
|
||||
},
|
||||
},
|
||||
};
|
||||
12
packages/design-system/.storybook/storybook.scss
Normal file
12
packages/design-system/.storybook/storybook.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@use "./fonts.scss";
|
||||
|
||||
@use "~/theme/src/base.scss" with (
|
||||
$font-path: '~element-ui/lib/theme-chalk/fonts',
|
||||
);
|
||||
|
||||
@use "~/theme/src/reset.scss";
|
||||
@use "~/theme/src/index.scss";
|
||||
|
||||
.multi-container > * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user