refactor(components): move premium components to separate folder

i18n/de.json

@@ -5,6 +5,7 @@
   "auth.LoginForm.title": "Login Example",
   "auth.LoginForm.username.error": "The username can not be empty",
   "common.Apollo": "Apollo Example",
+  "common.Back-to-top": "Back to top",
   "common.cancel": "Cancel",
   "common.home": "Home",
   "common.ok": "Ok",

i18n/en.json

@@ -5,6 +5,7 @@
   "auth.LoginForm.title": "Login Example",
   "auth.LoginForm.username.error": "The username can not be empty",
   "common.Apollo": "Apollo Example",
+  "common.Back-to-top": "Back to top",
   "common.cancel": "Cancel",
   "common.home": "Home",
   "common.ok": "Ok",

src/assets/design-system/variables/_variables.scss

@@ -7,15 +7,15 @@
 @import 'breakpoints';
 /* Components */
 @import 'components/organisms/accordion';
-@import 'components/organisms/autocomplete';
+@import 'components/premium/autocomplete';
 @import 'components/data-display/badge';
 @import 'components/molecules/breadcrumb';
 @import 'components/input-and-actions/button';
-@import 'components/organisms/calendar';
+@import 'components/premium/calendar';
 @import 'components/molecules/carousel';
 @import 'components/input-and-actions/checkbox';
 @import 'components/input-and-actions/radio';
-@import 'components/organisms/data-table';
+@import 'components/premium/data-table';
 @import 'components/input-and-actions/dropdown';
 @import 'components/organisms/footer';
 @import 'components/input-and-actions/input';
@@ -32,7 +32,7 @@
 @import 'components/organisms/tab-group';
 @import 'components/molecules/tooltip';
 @import 'components/input-and-actions/toggle';
-@import 'components/atoms/star-rating';
+@import 'components/premium/star-rating';
 @import 'components/behavior/back-to-top';
 @import 'components/molecules/pop-over';
 @import 'components/data-display/menu';

src/components/behavior/VueBackToTop/VueBackToTop.spec.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { fireEvent, render, RenderResult } from '@testing-library/vue';
 import { triggerWindow } from '@/test/test-utils';
+import { i18n } from '@/test/i18n';
 import VueBackToTop from './VueBackToTop.vue';
 
 describe('VueBackToTop.vue', () => {
@@ -11,14 +12,17 @@ describe('VueBackToTop.vue', () => {
     (window as any).pageYOffset = 400;
 
     harness = render(VueBackToTop, {
+      i18n,
       stubs: ['nuxt-link'],
     });
   });
 
   test('renders component', () => {
     const { html } = harness;
 
-    expect(html()).toMatch('<button data-testid="back-to-top" class="vueBackToTop">');
+    expect(html()).toMatch(
+      '<button data-testid="back-to-top" type="button" aria-label="common.Back-to-top" class="vueBackToTop">',
+    );
   });
 
   test('it should scroll to top on click', async () => {
@@ -43,14 +47,18 @@ describe('VueBackToTop.vue', () => {
 
     await Vue.nextTick();
 
-    expect(html()).toMatch('<button data-testid="back-to-top" class="vueBackToTop show">');
+    expect(html()).toMatch(
+      '<button data-testid="back-to-top" type="button" aria-label="common.Back-to-top" class="vueBackToTop show">',
+    );
 
     (window as any).pageYOffset = 0;
 
     triggerWindow.scroll();
 
     await Vue.nextTick();
 
-    expect(html()).toMatch('<button data-testid="back-to-top" class="vueBackToTop">');
+    expect(html()).toMatch(
+      '<button data-testid="back-to-top" type="button" aria-label="common.Back-to-top" class="vueBackToTop">',
+    );
   });
 });

src/components/behavior/VueBackToTop/VueBackToTop.stories.ts

@@ -1,12 +1,14 @@
 import { storiesOf } from '@storybook/vue';
 import ComponentDocs from '@/assets/design-system/docs/components/ComponentDocs.vue';
+import { i18n } from '@/test/i18n';
 import VueBackToTop from './VueBackToTop.vue';
 
 const story = storiesOf('Behavior|BackToTop', module) as any;
 
 story.add(
   'Default',
   () => ({
+    i18n,
     components: { VueBackToTop, ComponentDocs },
     template: `<component-docs
       component-name="BackToTop"

src/components/behavior/VueBackToTop/VueBackToTop.vue

@@ -1,5 +1,11 @@
 <template>
-  <button :class="[$style.vueBackToTop, show && $style.show]" data-testid="back-to-top" @click="onClick">
+  <button
+    :class="[$style.vueBackToTop, show && $style.show]"
+    data-testid="back-to-top"
+    type="button"
+    :aria-label="$t('common.Back-to-top' /* Back to top */)"
+    @click="onClick"
+  >
     <vue-icon-arrow-up />
   </button>
 </template>

src/components/organisms/VueAutocomplete/VueAutocomplete.stories.ts → src/components/premium/VueAutocomplete/VueAutocomplete.stories.ts

@@ -4,7 +4,7 @@ import { i18n } from '@/test/i18n';
 import VueAutocomplete from './VueAutocomplete.vue';
 import { AutocompleteFixture } from './IAutocompleteFixture';
 
-const story = storiesOf('Organisms|Autocomplete', module) as any;
+const story = storiesOf('Premium Components|Autocomplete', module) as any;
 
 story.add(
   'Default',

src/components/organisms/VueAutocomplete/VueAutocomplete.vue → src/components/premium/VueAutocomplete/VueAutocomplete.vue

@@ -264,7 +264,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .vueAutocomplete {
   position: relative;

src/components/organisms/VueCalendar/VueCalendar.stories.ts → src/components/premium/VueCalendar/VueCalendar.stories.ts

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { i18n } from '@/test/i18n';
 import VueCalendar from './VueCalendar.vue';
 
-const story = storiesOf('Organisms|Calendar', module) as any;
+const story = storiesOf('Premium Components|Calendar', module) as any;
 
 story.add(
   'Default',

src/components/organisms/VueCalendar/VueCalendar.vue → src/components/premium/VueCalendar/VueCalendar.vue

@@ -378,7 +378,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .calendar {
   width: 100%;

src/components/organisms/VueDataTable/VueDataTable.stories.ts → src/components/premium/VueDataTable/VueDataTable.stories.ts

@@ -5,7 +5,7 @@ import VueDropdown from '../../input-and-actions/VueDropdown/VueDropdown.vue';
 import VueDataTable from './VueDataTable.vue';
 import { dataTableDataFixture, dataTableHeaderFixture } from './DataTableFixtures';
 
-const story = storiesOf('Organisms|DataTable', module) as any;
+const story = storiesOf('Premium Components|DataTable', module) as any;
 
 story.add(
   'Default',

src/components/organisms/VueDataTable/VueDataTable.vue → src/components/premium/VueDataTable/VueDataTable.vue

@@ -218,7 +218,7 @@ export default {
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .container {
   overflow-x: auto;

src/components/organisms/VueDataTable/VueDataTableHeader/VueDataTableHeader.vue → src/components/premium/VueDataTable/VueDataTableHeader/VueDataTableHeader.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .vueDataTableHeader {
   border: $data-table-header-border;

src/components/organisms/VueDataTable/VueDataTableSearch/VueDataTableSearch.vue → src/components/premium/VueDataTable/VueDataTableSearch/VueDataTableSearch.vue

@@ -30,7 +30,7 @@ export default {
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .vueDataTableSearch {
   padding-top: $space-12;

src/components/organisms/VueDatePicker/VueDatePicker.stories.ts → src/components/premium/VueDatePicker/VueDatePicker.stories.ts

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { i18n } from '@/test/i18n';
 import VueDatePicker from './VueDatePicker.vue';
 
-const story = storiesOf('Organisms|DatePicker', module) as any;
+const story = storiesOf('Premium Components|DatePicker', module) as any;
 
 story.add(
   'Default',

src/components/organisms/VueDatePicker/VueDatePicker.vue → src/components/premium/VueDatePicker/VueDatePicker.vue

@@ -88,7 +88,7 @@ export default {
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .vueDatePicker {
   display: block;

src/components/organisms/VueDateRangePicker/VueDateRangePicker.stories.ts → src/components/premium/VueDateRangePicker/VueDateRangePicker.stories.ts

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { i18n } from '@/test/i18n';
 import VueDateRangePicker from './VueDateRangePicker.vue';
 
-const story = storiesOf('Organisms|DateRangePicker', module) as any;
+const story = storiesOf('Premium Components|DateRangePicker', module) as any;
 
 story.add(
   'Default',

src/components/atoms/VueStarRating/VueStarRating.stories.ts → src/components/premium/VueStarRating/VueStarRating.stories.ts

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue';
 import VueStarRating from './VueStarRating.vue';
 
-const story = storiesOf('Atoms|StarRating', module) as any;
+const story = storiesOf('Premium Components|StarRating', module) as any;
 
 story.add(
   'Default',

src/components/atoms/VueStarRating/VueStarRating.vue → src/components/premium/VueStarRating/VueStarRating.vue

@@ -77,7 +77,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .vueStarRating {
   display: flex;

src/components/molecules/VueTruncate/VueTruncate.stories.ts → src/components/premium/VueTruncate/VueTruncate.stories.ts

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import { i18n } from '@/test/i18n';
 import VueTruncate from './VueTruncate.vue';
 
-const story = storiesOf('Molecules|Truncate', module) as any;
+const story = storiesOf('Premium Components|Truncate', module) as any;
 
 story.add(
   'Default',

src/components/molecules/VueTruncate/VueTruncate.vue → src/components/premium/VueTruncate/VueTruncate.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
-@import '~@/assets/design-system';
+@import '~@/assets/_design-system';
 
 .vueTruncate {
   display: block;