Merge pull request #88 from cloudblue/dialog

Add simple dialog

Author: arnaugiralt

components/src/constants/color.js

@@ -0,0 +1,11 @@
+export const COLORS_DICT = {
+  NICE_GREEN: '#0BB071',
+  NICE_RED: '#FF6A6A',
+  MIDDLE_GREY: '#BDBDBD',
+  DARK_GREY: '#666666',
+  NICE_BLUE: '#2C98F0',
+  DARKER_BLUE: '#4797f2',
+  TEXT: '#212121',
+  WHITE: '#FFFFFF',
+  TRANSPARENT: 'transparent',
+};

components/src/constants/dialogs.js

@@ -0,0 +1,20 @@
+export const ACTIONS_DICT = {
+  CANCEL: 'cancel',
+  CLOSE: 'close',
+  SAVE: 'save',
+  SUBMIT: 'submit',
+  DELETE: 'delete',
+  SPACER: 'spacer',
+  NEXT: 'next',
+  BACK: 'back',
+};
+
+export const ACTIONS_LABELS = {
+  [ACTIONS_DICT.CANCEL]: 'Cancel',
+  [ACTIONS_DICT.CLOSE]: 'Close',
+  [ACTIONS_DICT.SAVE]: 'Save',
+  [ACTIONS_DICT.SUBMIT]: 'Submit',
+  [ACTIONS_DICT.DELETE]: 'Delete',
+  [ACTIONS_DICT.NEXT]: 'Next',
+  [ACTIONS_DICT.BACK]: 'Back',
+};

components/src/index.js

@@ -18,6 +18,7 @@ export { default as Menu } from '~widgets/menu/widget.vue';
 export { default as Textarea } from '~widgets/textarea/widget.vue';
 export { default as Alert } from '~widgets/alert/widget.vue';
 export { default as Radio } from '~widgets/radio/widget.vue';
+export { default as Dialog } from '~widgets/dialog/widget.vue';
 
 export { default as store } from '~core/store';
 export { default as bus } from '~core/eventBus';

components/src/stories/Dialog.stories.js

@@ -0,0 +1,38 @@
+import Dialog from '~widgets/dialog/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-dialog', Dialog);
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `
+    <ui-dialog v-bind="args" style="position: relative;">
+      <div slot>
+        {{ args.content }}
+      </div>
+    </ui-dialog>`,
+  }),
+
+  args: {
+    value: true,
+    title: 'Dialog Title',
+    actions: ['cancel', 'submit'],
+    height: '500px',
+    width: '800px',
+    isValid: true,
+    submitLabel: 'Submit',
+    content: 'This is the dialog content :-)',
+  },
+  decorators: [() => ({ template: '<div style="height: 600px;"><story/></div>' })],
+};