Skip to content

Commit 968c59e

Browse files
dmitriyzhukdmitriyzhuk
committed
added :
breadcrumns moved alert back to atoms added languages refactored some styles
1 parent 81996e0 commit 968c59e

File tree

200 files changed

+3803
-2273
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

200 files changed

+3803
-2273
lines changed

‎lib/components/atoms/alert/alert.stories.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import Vue from 'vue';
22
import { storiesOf } from '@storybook/vue';
3-
import aAlert from './alert.vue';
4-
storiesOf('atom|!!!Alert', module).add('default', function () {
3+
import vfAAlert from './alert.vue';
4+
Vue.component('vfAAlert', vfAAlert);
5+
storiesOf('molecule|!!!Alert', module).add('default', function () {
56
return {
67
components: {
7-
vfAAlert: aAlert
8+
vfAAlert: vfAAlert
89
},
910
template: "<vf-a-alert show=\"true\">This is an alert message</vf-a-alert>"
1011
};
@@ -15,7 +16,7 @@ storiesOf('atom|!!!Alert', module).add('default', function () {
1516
}).add('dismissible', function () {
1617
return {
1718
components: {
18-
vfAAlert: aAlert
19+
vfAAlert: vfAAlert
1920
},
2021
template: "<vf-a-alert show=\"true\" dismissible>This is an alert message</vf-a-alert>"
2122
};

‎lib/components/atoms/alert/alert.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<b-alert :show="show" v-on="$listeners" :dismissible="dismissible">
2+
<b-alert class="vf-a-alert" :show="show" v-on="$listeners" :dismissible="dismissible">
33
<slot></slot>
44
</b-alert>
55
</template>

‎lib/components/atoms/badge/badge.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<b-badge :variant="color" :pill="rounded">
2+
<b-badge class="vf-a-badge" :variant="color" :pill="rounded">
33
<slot></slot>
44
</b-badge>
55
</template>
@@ -13,13 +13,13 @@ export default {
1313
color: {
1414
type: String,
1515
default() {
16-
return 'primary'
16+
return "primary";
1717
}
1818
},
1919
rounded: {
2020
type: Boolean,
2121
default() {
22-
return false
22+
return false;
2323
}
2424
}
2525
}

‎lib/components/atoms/button/button.stories.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import { storiesOf } from '@storybook/vue';
33
import vfAButton from './button.vue';
44
import './button.scss';
55
Vue.component('vfAButton', vfAButton);
6-
storiesOf('Atom|Button', module).add('default', function () {
6+
storiesOf('Atom|!!! Button', module).add('default', function () {
77
return {
88
components: {
99
vfAButton: vfAButton
1010
},
1111
template: "<vf-a-button>Primary</vf-a-button>"
1212
};
1313
}, {
14-
info: {}
14+
info: {
15+
summary: "buttons have extra SCSS styles that need to be reviewed"
16+
}
1517
}).add('colors', function () {
1618
return {
1719
components: {

‎lib/components/atoms/heading/heading.stories.js

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
import Vue from 'vue';
22
import { storiesOf } from '@storybook/vue';
3-
import aHeading from './heading.vue';
4-
Vue.component('vfAHeading', aHeading);
5-
storiesOf('Atom|Heading', module).add('default', function () {
6-
return '<vf-a-heading>heading</vf-a-heading>';
3+
import vfAHeading from './heading.vue';
4+
Vue.component('vfAHeading');
5+
storiesOf('Atom|Heading', module).add('div-tag', function () {
6+
return {
7+
components: {
8+
vfAHeading: vfAHeading
9+
},
10+
template: "<div>\n <vf-a-heading level=\"1\">Heading 1</vf-a-heading>\n <vf-a-heading level=\"2\">Heading 2</vf-a-heading>\n <vf-a-heading level=\"3\">Heading 3</vf-a-heading>\n <vf-a-heading level=\"4\">Heading 4</vf-a-heading>\n <vf-a-heading level=\"5\">Heading 5</vf-a-heading>\n <vf-a-heading level=\"6\">Heading 6</vf-a-heading>\n </div>"
11+
};
12+
}, {
13+
info: {
14+
summary: "For SEO purposes we have made div-tag by default. If you need to an h-tag, you will need to specifically state that in the tag prop."
15+
}
16+
}).add('h-tag', function () {
17+
return {
18+
components: {
19+
vfAHeading: vfAHeading
20+
},
21+
template: "<div>\n <vf-a-heading tag=\"h1\" level=\"1\">Heading 1</vf-a-heading>\n <vf-a-heading tag=\"h2\" level=\"2\">Heading 2</vf-a-heading>\n <vf-a-heading tag=\"h3\" level=\"3\">Heading 3</vf-a-heading>\n <vf-a-heading tag=\"h4\" level=\"4\">Heading 4</vf-a-heading>\n <vf-a-heading tag=\"h5\" level=\"5\">Heading 5</vf-a-heading>\n <vf-a-heading tag=\"h6\" level=\"6\">Heading 6</vf-a-heading>\n </div>"
22+
};
723
}, {
824
info: {}
925
});

‎lib/components/atoms/heading/heading.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div :is="tag" :class="`h${level}`">
2+
<div class="vf-a-heading" :is="tag" :class="`h${level}`">
33
<slot></slot>
44
</div>
55
</template>
@@ -15,7 +15,7 @@ export default {
1515
tag: {
1616
type: String,
1717
default() {
18-
return 'div';
18+
return "div";
1919
}
2020
}
2121
}

‎lib/components/atoms/icon/icon.stories.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import Vue from 'vue';
22
import { storiesOf } from '@storybook/vue';
3-
import aIcon from './icon.vue';
4-
Vue.component('vfAIcon', aIcon);
3+
import vfAIcon from './icon.vue';
4+
import './icon.scss';
5+
Vue.component('vfAIcon', vfAIcon);
56
storiesOf('Atom|Icon', module).add('default', function () {
6-
return '<vf-a-icon icon="plus" />';
7+
return {
8+
components: {
9+
vfAIcon: vfAIcon
10+
},
11+
template: "<div>\n <vf-a-icon icon=\"plus\" />\n <vf-a-icon icon=\"shopping-cart\" />\n <vf-a-icon icon=\"heart\" />\n <vf-a-icon icon=\"exchange-alt\" />\n <vf-a-icon icon=\"user-circle\" />\n <vf-a-icon icon=\"long-arrow-alt-right\" />\n <vf-a-icon icon=\"angle-down\" />\n <vf-a-icon icon=\"angle-search\" />\n </div>"
12+
};
713
}, {
8-
info: {}
14+
info: {
15+
summary: ""
16+
}
917
});

‎lib/components/atoms/icon/icon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<i :class="currentIcon"></i>
2+
<i class="vf-a-icon" :class="currentIcon"></i>
33
</template>
44
<script>
55
import { isArray, join } from "lodash";

‎lib/components/atoms/image/image.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.vf-a-image {
2-
&--full_width {
3-
width: 100%;
4-
}
2+
&--full-width {
3+
width: 100%;
4+
}
55
}

‎lib/components/atoms/image/image.stories.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,7 @@ Vue.component('vfAImage', aImage);
55
storiesOf('Atom|Image', module).add('default', function () {
66
return '<vf-a-image src="https://via.placeholder.com/150" />';
77
}, {
8-
info: {}
8+
info: {
9+
summary: ":class=\"{'vf-a-image--full-width': fullWidth}\" is not needed since we have FLUID"
10+
}
911
});

‎lib/components/atoms/image/image.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
:block="block"
99
:width="width"
1010
:height="height"
11-
:class="{'vf-a-image--full_width': fullWidth}"
11+
:class="{'vf-a-image--full-width': fullWidth}"
1212
class="vf-a-image"
1313
/>
1414
</template>

‎lib/components/atoms/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './alert';
12
export * from './button';
23
export * from './icon';
34
export * from './link';
@@ -9,5 +10,4 @@ export * from './heading';
910
export * from './select';
1011
export * from './textarea';
1112
export * from './pagination';
12-
export * from './alert';
1313
export * from './loader';

‎lib/components/atoms/input/input.stories.js

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,49 @@
11
import Vue from 'vue';
22
import { storiesOf } from '@storybook/vue';
3-
import aInput from './input.vue';
4-
Vue.component('vfAInput', aInput);
5-
storiesOf('Atom|Input', module).add('default', function () {
3+
import vfAInput from './input.vue';
4+
Vue.component('vfAInput', vfAInput);
5+
storiesOf('Atom|Input', module).add('default (text)', function () {
66
return '<vf-a-input />';
77
}, {
88
info: {}
9+
}).add('number', function () {
10+
return '<vf-a-input type="number"/>';
11+
}, {
12+
info: {}
13+
}).add('email', function () {
14+
return '<vf-a-input type="email"/>';
15+
}, {
16+
info: {}
17+
}).add('password', function () {
18+
return '<vf-a-input type="password"/>';
19+
}, {
20+
info: {}
21+
}).add('search', function () {
22+
return '<vf-a-input type="search"/>';
23+
}, {
24+
info: {}
25+
}).add('url', function () {
26+
return '<vf-a-input type="url"/>';
27+
}, {
28+
info: {}
29+
}).add('tel', function () {
30+
return '<vf-a-input type="tel"/>';
31+
}, {
32+
info: {}
33+
}).add('date', function () {
34+
return '<vf-a-input type="date"/>';
35+
}, {
36+
info: {}
37+
}).add('time', function () {
38+
return '<vf-a-input type="time"/>';
39+
}, {
40+
info: {}
41+
}).add('range', function () {
42+
return '<vf-a-input type="range"/>';
43+
}, {
44+
info: {}
45+
}).add('color', function () {
46+
return '<div style="width:50px"><vf-a-input type="color"/></div>';
47+
}, {
48+
info: {}
949
});

‎lib/components/atoms/input/input.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
:size="size"
1010
:placeholder="placeholder"
1111
:trim="trim"
12+
class="vf-a-input"
13+
:class="`vf-a-input--${type}`"
1214
/>
1315
</template>
1416
<script>

‎lib/components/atoms/link/link.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue';
22
import { storiesOf } from '@storybook/vue';
3-
import aLink from './link.vue';
4-
Vue.component('vfALink', aLink);
3+
import vfALink from './link.vue';
4+
Vue.component('vfALink', vfALink);
55
storiesOf('Atom|Link', module).add('default', function () {
66
return '<vf-a-link to="#">Link</vf-a-link>';
77
}, {

‎lib/components/atoms/link/link.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<router-link :to="to">
2+
<router-link class="vf-a-link" :to="to">
33
<slot></slot>
44
</router-link>
55
</template>

0 commit comments

Comments
 (0)