@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.3 → 7.24.3-qa-elisee-7.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/.prettierrc +6 -8
  2. package/package.json +21 -9
  3. package/public/favicon.ico +0 -0
  4. package/public/index.html +17 -0
  5. package/src/App.vue +78 -79
  6. package/src/assets/svgIcons/adjust_roof.svg +6 -0
  7. package/src/assets/svgIcons/copy.svg +10 -0
  8. package/src/assets/theme.js +3 -3
  9. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  10. package/src/components/addNewButton/index.vue +51 -48
  11. package/src/components/banner/actionBanner/index.vue +55 -54
  12. package/src/components/banner/banner/banner.stories.js +5 -5
  13. package/src/components/banner/banner/index.vue +159 -159
  14. package/src/components/banner/infoBanner/index.vue +53 -41
  15. package/src/components/buttons/buttonIcon/index.vue +122 -125
  16. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  17. package/src/components/buttons/closeButton/index.vue +49 -49
  18. package/src/components/buttons/mainButton/index.vue +119 -119
  19. package/src/components/card/index.vue +70 -70
  20. package/src/components/collapsableInfoText/index.vue +94 -96
  21. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  22. package/src/components/deleteIcon/index.vue +54 -54
  23. package/src/components/draggableInputHandle/index.vue +37 -37
  24. package/src/components/dropdown/Dropdown.stories.js +10 -9
  25. package/src/components/dropdown/index.vue +106 -106
  26. package/src/components/errorMessage/index.vue +52 -52
  27. package/src/components/filter/filterSettings.vue +433 -439
  28. package/src/components/filter/index.vue +135 -135
  29. package/src/components/filter/parentDropdown.vue +73 -73
  30. package/src/components/icon/Icons.stories.js +7 -7
  31. package/src/components/icon/iconCollection.vue +53 -53
  32. package/src/components/icon/index.vue +121 -121
  33. package/src/components/iconWrapper/index.vue +156 -156
  34. package/src/components/infoCard/index.vue +26 -26
  35. package/src/components/infoText/index.vue +132 -133
  36. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  37. package/src/components/inputs/checkbox/index.vue +180 -190
  38. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  39. package/src/components/inputs/inputNumber/index.vue +644 -647
  40. package/src/components/inputs/inputNumberQuestion/index.vue +182 -185
  41. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  42. package/src/components/inputs/inputText/index.vue +336 -337
  43. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  44. package/src/components/inputs/radioButton/index.vue +219 -221
  45. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  46. package/src/components/inputs/searchInput/index.vue +126 -127
  47. package/src/components/inputs/select/index.vue +776 -778
  48. package/src/components/inputs/select/option/index.vue +124 -124
  49. package/src/components/inputs/select/select.stories.js +32 -31
  50. package/src/components/inputs/slider/index.vue +99 -99
  51. package/src/components/inputs/switchField/index.vue +222 -220
  52. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  53. package/src/components/inputs/textAreaInput/index.vue +173 -171
  54. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  55. package/src/components/inputs/toggle/index.vue +217 -214
  56. package/src/components/label/index.vue +82 -82
  57. package/src/components/markerItem/index.vue +66 -68
  58. package/src/components/modals/actionModal/index.vue +54 -54
  59. package/src/components/modals/infoModal/index.vue +36 -39
  60. package/src/components/modals/modal/index.vue +134 -134
  61. package/src/components/modals/modal/modal.stories.js +5 -5
  62. package/src/components/navigationTabs/index.vue +94 -96
  63. package/src/components/pageSubtitle/index.vue +49 -55
  64. package/src/components/pageTitle/index.vue +56 -56
  65. package/src/components/pagination/index.vue +89 -92
  66. package/src/components/progressBar/index.vue +107 -107
  67. package/src/components/projectMarker/index.vue +244 -246
  68. package/src/components/rangeSlider/Slider.vue +465 -491
  69. package/src/components/rangeSlider/index.vue +410 -410
  70. package/src/components/rangeSlider/utils/dom.js +5 -5
  71. package/src/components/selectedOptions/index.vue +119 -119
  72. package/src/components/sideMenu/index.vue +199 -199
  73. package/src/components/spinner/index.vue +57 -57
  74. package/src/components/tableDropdown/index.vue +520 -520
  75. package/src/components/tables/mainTable/index.vue +362 -366
  76. package/src/components/tables/viewTable/index.vue +171 -171
  77. package/src/components/threeDots/index.vue +334 -340
  78. package/src/components/videoThumbnail/index.vue +86 -86
  79. package/src/components/videoThumbnail/videoThumbnail.stories.js +16 -14
  80. package/src/helpers/numberConverter.js +2 -2
  81. package/src/helpers/translateLang.js +9 -9
  82. package/src/mixins/inputValidations.js +5 -5
  83. package/.eslintrc.js +0 -184
package/.prettierrc CHANGED
@@ -1,9 +1,7 @@
1
1
  {
2
- "semi": false,
3
- "singleQuote": true,
4
- "printWidth": 80,
5
- "tabWidth": 2,
6
- "trailingComma": "es5",
7
- "bracketSpacing": true,
8
- "vueIndentScriptAndStyle": true
9
- }
2
+ "semi": false,
3
+ "singleQuote": true,
4
+ "useTabs": false,
5
+ "trailingComma": "none",
6
+ "printWidth": 80
7
+ }
package/package.json CHANGED
@@ -1,14 +1,13 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.24.3-EPDM-11320.3",
3
+ "version": "7.24.3-qa-elisee-7.32.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
7
7
  "build": "vue-cli-service build",
8
8
  "lint": "vue-cli-service lint",
9
9
  "storybook": "start-storybook -p 6006",
10
- "build-storybook": "build-storybook",
11
- "prettier": "prettier --write 'src/**/*.{js,vue}'"
10
+ "build-storybook": "build-storybook"
12
11
  },
13
12
  "dependencies": {
14
13
  "@storybook/vue3": "7.0.18",
@@ -23,15 +22,28 @@
23
22
  "vuedraggable": "4.1.0"
24
23
  },
25
24
  "devDependencies": {
26
- "babel-eslint": "10.1.0",
25
+ "@babel/core": "7.12.16",
26
+ "@babel/eslint-parser": "7.12.16",
27
+ "@vue/cli-plugin-babel": "5.0.8",
27
28
  "@vue/cli-plugin-eslint": "5.0.8",
28
29
  "@vue/cli-service": "5.0.8",
29
30
  "@vue/compiler-sfc": "3.3.4",
30
- "eslint": "8.0.1",
31
- "eslint-config-prettier": "8.8.0",
32
- "eslint-plugin-prettier": "4.2.1",
33
- "eslint-plugin-vue": "9.14.1",
34
- "prettier": "2.8.4"
31
+ "eslint": "7.32.0",
32
+ "eslint-plugin-vue": "8.0.3"
33
+ },
34
+ "eslintConfig": {
35
+ "root": true,
36
+ "env": {
37
+ "node": true
38
+ },
39
+ "extends": [
40
+ "plugin:vue/essential",
41
+ "eslint:recommended"
42
+ ],
43
+ "parserOptions": {
44
+ "parser": "@babel/eslint-parser"
45
+ },
46
+ "rules": {}
35
47
  },
36
48
  "browserslist": [
37
49
  "> 1%",
package/public/favicon.ico ADDED
Binary file
package/public/index.html ADDED
@@ -0,0 +1,17 @@
1
+ <!DOCTYPE html>
2
+ <html lang="">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
+ <title><%= htmlWebpackPlugin.options.title %></title>
9
+ </head>
10
+ <body>
11
+ <noscript>
12
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
+ </noscript>
14
+ <div id="app"></div>
15
+ <!-- built files will be auto injected -->
16
+ </body>
17
+ </html>
package/src/App.vue CHANGED
@@ -1,110 +1,109 @@
1
1
  <template>
2
- <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
3
- <PageContainer>
2
+ <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
3
+ <page-container>
4
4
  <br />
5
- <InputNumber
6
- background-color="transparent"
7
- border-color="eturnityGrey"
8
- input-height="34px"
9
- input-width="420px"
10
- :interaction-step="1"
11
- :is-interactive="true"
12
- :min-number="0"
13
- :number-precision="0"
14
- text-align="left"
15
- unit-name="mm"
5
+ <input-number
16
6
  :value="value"
17
- @input-blur="blurHandler"
7
+ :minNumber="0"
8
+ unitName="mm"
9
+ :numberPrecision="0"
10
+ backgroundColor="transparent"
11
+ borderColor="eturnityGrey"
12
+ inputHeight="34px"
13
+ inputWidth="420px"
14
+ textAlign="left"
15
+ :isInteractive="true"
16
+ :interactionStep="1"
17
+ @on-input="inputHandler"
18
18
  @input-change="changeHandler"
19
19
  @input-focus="focusHandler"
20
- @on-input="inputHandler"
20
+ @input-blur="blurHandler"
21
21
  >
22
- <template #label>
22
+ <template v-slot:label>
23
23
  <div>Interactive Label 1</div>
24
24
  </template>
25
- </InputNumber>
25
+ </input-number>
26
26
 
27
- <hr />
27
+ <hr>
28
28
 
29
- <InputNumber
30
- background-color="transparent"
31
- border-color="eturnityGrey"
32
- input-height="34px"
33
- input-width="420px"
34
- :interaction-step="1"
35
- :is-interactive="true"
36
- :min-number="0"
37
- :number-precision="0"
38
- text-align="left"
39
- unit-name="mm"
29
+ <input-number
40
30
  :value="value"
41
- @input-blur="blurHandler"
31
+ :minNumber="0"
32
+ unitName="mm"
33
+ :numberPrecision="0"
34
+ backgroundColor="transparent"
35
+ borderColor="eturnityGrey"
36
+ inputHeight="34px"
37
+ inputWidth="420px"
38
+ textAlign="left"
39
+ :isInteractive="true"
40
+ :interactionStep="1"
41
+ @on-input="inputHandler"
42
42
  @input-change="changeHandler"
43
43
  @input-focus="focusHandler"
44
- @on-input="inputHandler"
44
+ @input-blur="blurHandler"
45
45
  >
46
- <template #label>
46
+ <template v-slot:label>
47
47
  <div>Interactive Label 2</div>
48
48
  </template>
49
- </InputNumber>
49
+ </input-number>
50
50
 
51
- <hr />
52
- <button @click="value = 42">Click to set at 42</button>
53
- </PageContainer>
51
+ <hr>
52
+ <button @click="value=42">Click to set at 42</button>
53
+ </page-container>
54
54
  </ThemeProvider>
55
55
  </template>
56
56
 
57
57
  <script>
58
- import { ThemeProvider } from 'vue3-styled-components'
59
- import theme from './assets/theme'
60
- import styled from 'vue3-styled-components'
61
- import InputNumber from '@/components/inputs/inputNumber'
58
+ import { ThemeProvider } from 'vue3-styled-components'
59
+ import theme from './assets/theme'
60
+ import styled from 'vue3-styled-components'
61
+ import InputNumber from '@/components/inputs/inputNumber'
62
62
 
63
- const PageContainer = styled.div`
64
- padding: 40px;
65
- `
63
+ const PageContainer = styled.div`
64
+ padding: 40px;
65
+ `
66
66
 
67
- export default {
68
- name: 'App',
69
- components: {
70
- ThemeProvider,
71
- PageContainer,
72
- InputNumber,
67
+ export default {
68
+ name: 'App',
69
+ components: {
70
+ ThemeProvider,
71
+ PageContainer,
72
+ InputNumber,
73
+ },
74
+ data() {
75
+ return {
76
+ value: 42,
77
+ }
78
+ },
79
+ computed: {
80
+ },
81
+ methods: {
82
+ blurHandler(e) {
83
+ console.log('blur', e)
73
84
  },
74
- data() {
75
- return {
76
- value: 42,
77
- }
85
+ changeHandler(e) {
86
+ console.log('change', e)
78
87
  },
79
- computed: {},
80
- methods: {
81
- blurHandler(e) {
82
- console.log('blur', e)
83
- },
84
- changeHandler(e) {
85
- console.log('change', e)
86
- },
87
- focusHandler(e) {
88
- console.log('focus', e)
89
- },
90
- inputHandler(e) {
91
- console.log('input', e)
92
- //this.value = e
93
- setTimeout(() => {
94
- this.value = e
95
- }, 1000)
96
- },
97
- getTheme() {
98
- return theme
99
- },
88
+ focusHandler(e) {
89
+ console.log('focus', e)
100
90
  },
91
+ inputHandler(e) {
92
+ console.log('input', e)
93
+ //this.value = e
94
+ setTimeout(()=>{this.value = e},1000)
95
+ },
96
+ getTheme() {
97
+ return theme
98
+ }
101
99
  }
100
+ }
102
101
  </script>
103
102
 
104
103
  <style>
105
- html,
106
- body {
107
- height: 100%;
108
- margin: 0;
109
- }
104
+ html,
105
+ body {
106
+ height: 100%;
107
+ margin: 0;
108
+ }
110
109
  </style>
package/src/assets/svgIcons/adjust_roof.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg width="16" height="16" viewBox="12 12 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M20 13L27 16.8175L26.0477 18.4379L20 15.1397L13.9523 18.4379L13 16.8175L20 13Z" fill="#263238"/>
3
+ <path d="M17.1006 19.1906L20.0001 17.6078L22.8996 19.1906" stroke="#263238" stroke-width="2"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M20 21.5621L22.6508 23.0078L21.6985 24.6282L20 23.7019L18.3015 24.6282L17.3492 23.0078L20 21.5621ZM16.1269 25.8141L13.9523 27L13 25.3797L15.1746 24.1937L16.1269 25.8141ZM26.0477 27L23.8731 25.8141L24.8254 24.1937L27 25.3797L26.0477 27Z" fill="#263238"/>
5
+ <path d="M20.9662 22.9146H19.0332L19.0332 18.2928H20.9662L20.9662 22.9146Z" fill="#263238"/>
6
+ </svg>
package/src/assets/svgIcons/copy.svg ADDED
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
3
+ <svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
4
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5
+ <g id="copy" fill="none" transform="translate(85.333333, 42.666667)">
6
+ <path d="M341.333333,85.3333333 L341.333333,405.333333 L85.3333333,405.333333 L85.3333333,85.3333333 L341.333333,85.3333333 Z M298.666667,128 L128,128 L128,362.666667 L298.666667,362.666667 L298.666667,128 Z M234.666667,7.10542736e-15 L234.666667,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 L1.42108547e-14,298.666667 L1.42108547e-14,7.10542736e-15 L234.666667,7.10542736e-15 Z">
7
+ </path>
8
+ </g>
9
+ </g>
10
+ </svg>
package/src/assets/theme.js CHANGED
@@ -26,16 +26,16 @@ const theme = {
26
26
  transparentWhite3: '#ffffff48',
27
27
  transparentBlack1: '#263238e6',
28
28
  disabled: '#dfe1e1',
29
- eturnityGrey: '#263238',
29
+ eturnityGrey: '#263238'
30
30
  },
31
31
  screen: {
32
32
  mobileSmall: '345px',
33
33
  mobile: '425px',
34
34
  mobileLarge: '530px',
35
35
  tablet: '768px',
36
- tabletLarge: '950px',
36
+ tabletLarge: '950px'
37
37
  },
38
- borderRadius: '4px',
38
+ borderRadius: '4px'
39
39
  }
40
40
 
41
41
  export default theme
package/src/components/addNewButton/AddNewButton.stories.js CHANGED
@@ -1,7 +1,7 @@
1
- import AddNewButton from './index.vue'
1
+ import AddNewButton from "./index.vue"
2
2
 
3
3
  export default {
4
- title: 'AddNewButton',
4
+ title: "AddNewButton",
5
5
  component: AddNewButton,
6
6
  // argTypes: {},
7
7
  }
package/src/components/addNewButton/index.vue CHANGED
@@ -1,61 +1,64 @@
1
1
  <template>
2
- <PageContainer :should-position="shouldPosition">
3
- <ButtonContainer :data-id="dataId">
2
+ <page-container :shouldPosition="shouldPosition">
3
+ <button-container :data-id="dataId">
4
4
  <PlusButtonSvg />
5
- </ButtonContainer>
6
- </PageContainer>
5
+ </button-container>
6
+ </page-container>
7
7
  </template>
8
8
 
9
9
  <script>
10
- // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
11
- import styled from 'vue3-styled-components'
12
- import PlusButtonSvg from '../../assets/icons/plus_button.svg'
10
+ // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
11
+ import styled from 'vue3-styled-components'
12
+ import PlusButtonSvg from '../../assets/icons/plus_button.svg'
13
13
 
14
- const pageAttrs = { shouldPosition: Boolean }
15
- const PageContainer = styled('div', pageAttrs)`
16
- position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
17
- bottom: 30px;
18
- right: 30px;
19
- `
14
+ const pageAttrs = { shouldPosition: Boolean }
15
+ const PageContainer = styled('div', pageAttrs)`
16
+ position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
17
+ bottom: 30px;
18
+ right: 30px;
19
+ `
20
20
 
21
- const ButtonContainer = styled.div`
22
- height: 60px;
23
- width: 60px;
24
- background-color: ${(props) => props.theme.colors.green};
25
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
26
- border-radius: 100%;
27
- cursor: pointer;
28
- display: grid;
29
- align-items: center;
30
- justify-items: center;
21
+ const ButtonContainer = styled.div`
22
+ height: 60px;
23
+ width: 60px;
24
+ background-color: ${(props) => props.theme.colors.green};
25
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
26
+ border-radius: 100%;
27
+ cursor: pointer;
28
+ display: grid;
29
+ align-items: center;
30
+ justify-items: center;
31
31
 
32
- &:hover {
33
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
34
- ${(props) => props.theme.colors.green};
35
- }
32
+ &:hover {
33
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
34
+ ${(props) => props.theme.colors.green};
35
+ }
36
36
 
37
- &:active,
38
- &:focus {
39
- background: ${(props) => props.theme.colors.green};
40
- }
41
- `
37
+ &:active,
38
+ &:focus {
39
+ background: ${(props) => props.theme.colors.green};
40
+ }
41
+ `
42
42
 
43
- export default {
44
- name: 'AddNewButton',
45
- components: {
46
- PageContainer,
47
- ButtonContainer,
48
- PlusButtonSvg,
49
- },
50
- props: {
51
- shouldPosition: {
52
- required: false,
53
- default: true,
54
- },
55
- dataId: {
56
- type: String,
57
- default: '',
58
- },
43
+ const PlusButton = styled.img``
44
+
45
+ export default {
46
+ name: 'add-new-button',
47
+ components: {
48
+ PageContainer,
49
+ ButtonContainer,
50
+ PlusButton,
51
+ PlusButtonSvg
52
+ },
53
+ props: {
54
+ shouldPosition: {
55
+ required: false,
56
+ default: true
59
57
  },
58
+ dataId: {
59
+ type: String,
60
+ default: ''
61
+ }
60
62
  }
63
+ }
61
64
  </script>
package/src/components/banner/actionBanner/index.vue CHANGED
@@ -1,64 +1,65 @@
1
1
  <template>
2
2
  <Modal :is-open="isOpen" @on-close="closeModal">
3
- <ModalContainer>
4
- <ModalTitle v-if="$slots.title">
3
+ <modalContainer>
4
+ <modalTitle v-if="$slots.title">
5
5
  <slot name="title"></slot>
6
- </ModalTitle>
7
- <TextContainer v-if="$slots.body">
6
+ </modalTitle>
7
+ <textContainer v-if="$slots.body">
8
8
  <slot name="body"></slot>
9
- </TextContainer>
10
- <ButtonContainer v-if="$slots.buttons">
9
+ </textContainer>
10
+ <buttonContainer v-if="$slots.buttons">
11
11
  <slot name="buttons"></slot>
12
- </ButtonContainer>
13
- </ModalContainer>
12
+ </buttonContainer>
13
+ </modalContainer>
14
14
  </Modal>
15
15
  </template>
16
16
  <script>
17
- import styled from 'vue3-styled-components'
18
- import Modal from '../modal'
19
- const ModalContainer = styled.div`
20
- width: 450px;
21
- min-height: 205px;
22
- padding: 40px 40px 30px 40px;
23
- `
24
- const ModalTitle = styled.div`
25
- color: ${(props) => props.theme.colors.black};
26
- font-family: ${(props) => props.theme.fonts.mainFont};
27
- font-size: 18px;
28
- font-style: normal;
29
- font-weight: 700;
30
- line-height: 120%;
31
- text-transform: uppercase;
32
- `
33
- const ButtonContainer = styled.div`
34
- display: inline-flex;
35
- align-items: flex-start;
36
- gap: 20px;
37
- `
38
- const TextContainer = styled.div`
39
- color: ${(props) => props.theme.colors.black};
40
- font-family: ${(props) => props.theme.fonts.mainFont};
41
- font-size: 13px;
42
- font-style: normal;
43
- font-weight: 400;
44
- line-height: normal;
45
- padding: 30px 0px;
46
- white-space: pre-wrap;
47
- `
48
- export default {
49
- name: 'ActionModal',
50
- components: {
51
- Modal,
52
- ModalContainer,
53
- ModalTitle,
54
- ButtonContainer,
55
- TextContainer,
56
- },
57
- props: ['isOpen'],
58
- methods: {
59
- closeModal() {
60
- this.$emit('on-close')
61
- },
62
- },
17
+ import styled from 'vue3-styled-components'
18
+ import { mapActions, mapState } from 'vuex'
19
+ import Modal from '../modal'
20
+ const modalContainer = styled.div`
21
+ width: 450px;
22
+ min-height: 205px;
23
+ padding: 40px 40px 30px 40px;
24
+ `
25
+ const modalTitle = styled.div`
26
+ color: ${(props) => props.theme.colors.black};
27
+ font-family: ${(props) => props.theme.fonts.mainFont};
28
+ font-size: 18px;
29
+ font-style: normal;
30
+ font-weight: 700;
31
+ line-height: 120%;
32
+ text-transform: uppercase;
33
+ `
34
+ const buttonContainer = styled.div`
35
+ display: inline-flex;
36
+ align-items: flex-start;
37
+ gap: 20px;
38
+ `
39
+ const textContainer = styled.div`
40
+ color: ${(props) => props.theme.colors.black};
41
+ font-family: ${(props) => props.theme.fonts.mainFont};
42
+ font-size: 13px;
43
+ font-style: normal;
44
+ font-weight: 400;
45
+ line-height: normal;
46
+ padding: 30px 0px;
47
+ white-space: pre-wrap;
48
+ `
49
+ export default {
50
+ name: 'actionModal',
51
+ props: ['isOpen'],
52
+ components: {
53
+ Modal,
54
+ modalContainer,
55
+ modalTitle,
56
+ buttonContainer,
57
+ textContainer
58
+ },
59
+ methods: {
60
+ closeModal() {
61
+ this.$emit('on-close')
62
+ }
63
63
  }
64
+ }
64
65
  </script>
package/src/components/banner/banner/banner.stories.js CHANGED
@@ -1,10 +1,10 @@
1
- import Modal from './index.vue'
1
+ import Modal from "./index.vue";
2
2
 
3
3
  export default {
4
- title: 'Modal',
4
+ title: "Modal",
5
5
  component: Modal,
6
6
  // argTypes: {},
7
- }
7
+ };
8
8
 
9
9
  const Template = (args, { argTypes }) => ({
10
10
  // Components used in your story `template` are defined in the `components` object
@@ -19,7 +19,7 @@ const Template = (args, { argTypes }) => ({
19
19
  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
20
20
  // <div>Data....</div>
21
21
  // </modal>
22
- })
22
+ });
23
23
 
24
24
  export const Default = Template.bind({
25
25
  isOpen: true,
@@ -28,4 +28,4 @@ export const Default = Template.bind({
28
28
  hideClose: false,
29
29
  backdrop: 'dark',
30
30
  })
31
- Default.args = {}
31
+ Default.args = {};