feat: adjust a-button and a-select add a-dropdown

Author: linspw

Makefile

@@ -0,0 +1,3 @@
+hyone-boot-startup:
+	yarn install --frozen-lockfile
+	yarn storybook:serve

package.json

@@ -28,6 +28,7 @@
     "core-js": "^3.6.5",
     "url-join": "^4.0.1",
     "vue": "^2.6.11",
+    "vue-click-outside": "^1.1.0",
     "vue-prop-validation-helper": "^3.0.0"
   },
   "devDependencies": {
@@ -53,13 +54,13 @@
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.0",
     "sass-resources-loader": "^2.1.1",
+    "semantic-release": "^17.4.4",
     "storybook-design-token": "^1.2.0",
     "style-loader": "^2.0.0",
     "vue-cli-plugin-storybook": "~2.1.0",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.11",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "semantic-release": "^17.4.4"
+    "webpack-bundle-analyzer": "^4.4.0"
   },
   "eslintConfig": {
     "root": true,

src/components/atoms/a-button/__tests__/__snapshots__/a-button.spec.js.snap

@@ -3,18 +3,21 @@
 exports[`AButton render correctly with attrs 1`] = `
 "<button id=\\"my-first-component\\" data-test-id=\\"secondary\\" class=\\"a-button a-button--behavior-is-rounded a-button--variant-primary a-button--size-small\\">
   <!---->
-  <!----> <span class=\\"a-button__text\\">With many Itens</span></button>"
+  <!----> <span class=\\"a-button__text\\">With many Itens</span>
+  <!----></button>"
 `;
 
 exports[`AButton render correctly with default props 1`] = `
 "<button class=\\"a-button a-button--behavior-is-rounded a-button--variant-primary a-button--size-small\\">
   <!---->
-  <!----> <span class=\\"a-button__text\\">My first test</span></button>"
+  <!----> <span class=\\"a-button__text\\">My first test</span>
+  <!----></button>"
 `;
 
 exports[`AButton render correctly with different props 1`] = `
 "<button class=\\"a-button a-button--behavior-block a-button--variant-secondary a-button--size-small\\">
-  <div class=\\"a-icon a-icon--size-inherit a-icon--color-primary a-button__icon\\"><i class=\\"fas fa-circle\\"></i></div>
+  <div class=\\"a-icon a-icon--size-inherit a-icon--color-primary a-button__icon a-button__icon--position-left\\"><i class=\\"fas fa-circle\\"></i></div>
   <!----> <span class=\\"a-button__text\\">With many Itens</span>
+  <!---->
 </button>"
 `;

src/components/atoms/a-button/a-button.scss

@@ -120,7 +120,12 @@
     display: flex;
     height: 100%;
     width: 16px;
-    margin-right: var(--size-small);
+    &--position-left {
+      margin-right: var(--size-small);
+    }
+    &--position-right {
+      margin-left: var(--size-small);
+    }
   }
 
   &__text {

src/components/atoms/a-button/a-button.stories.mdx

@@ -46,8 +46,9 @@ import AButton from './a-button.vue';
         components: { AButton },
         template: `
         <div>
-          <a-button @click="action" icon="fas fa-home">Hello Button</a-button>
-          <a-button @click="action" icon="fas fa-user">Hello Button</a-button>
+          <a-button @click="action" icon="fas fa-home">Default</a-button>
+          <a-button @click="action" icon="fas fa-user" icon-position="left">Left</a-button>
+          <a-button @click="action" icon="fas fa-user" icon-position="right">Right</a-button>
         </div>
         `,
         methods: { action: action("clicked") }

src/components/atoms/a-button/a-button.vue

@@ -12,10 +12,10 @@
     v-on="$listeners"
   >
     <AIcon
-      v-if="icon"
+      v-if="icon && iconPosition === 'left'"
       :icon="icon"
       :color="iconColor"
-      :class="{'a-button__icon': slotPassed}"
+      :class="{'a-button__icon a-button__icon--position-left': slotPassed}"
     />
     <AIcon
       v-if="isLoading"
@@ -28,6 +28,12 @@
     >
       <slot />
     </span>
+    <AIcon
+      v-if="icon && iconPosition === 'right'"
+      :icon="icon"
+      :color="iconColor"
+      :class="{'a-button__icon a-button__icon--position-right': slotPassed}"
+    />
   </button>
 </template>
 
@@ -40,6 +46,14 @@ export default {
   components: { AIcon },
   inheritAttrs: false,
   props: {
+    iconPosition: {
+      type: String,
+      default: 'left',
+      validator: shouldBeOneOf([
+        'left',
+        'right',
+      ]),
+    },
     behavior: {
       type: String,
       default: '',

src/components/atoms/a-select/a-select.stories.mdx

@@ -30,6 +30,80 @@ import ASelect from './a-select.vue';
   </Story>
 </Canvas>
 
+### With listenners use:
+
+<Canvas>
+  <Story name="With listenners use">
+    {{
+        components: { ASelect },
+        data() {
+          return {
+            selected: 'blah',
+          };
+        },
+        template: `
+        <div style="height: 40vh;">
+          <a-select
+            @select="selected = $event"
+            :value="selected"
+            :options="['example1', 'Example 1']"
+          />
+          <a-select
+            @input="selected = $event"
+            :value="selected"
+            :options="['example1', 'Example 1']"
+          />
+          <a-select
+            @change="selected = $event"
+            :value="selected"
+            :options="['example1', 'Example 1']"
+          />
+          {{ selected }}
+        </div>
+        `,
+    }}
+  </Story>
+</Canvas>
+
+### Use with object with attrs, value and text:
+
+<Canvas>
+  <Story name="Use with object with attrs, value and text">
+    {{
+        components: { ASelect },
+        data() {
+          return {
+            selected: '',
+          };
+        },
+        template: `
+        <div style="height: 40vh;">
+          <a-select
+            v-model="selected"
+            :options="[{value: 'example1', text: 'EXAMPLE 1'}, { value: 'data1', text: 'DATA 1'}]"
+          />
+          {{ selected }}
+        </div>
+        `,
+    }}
+  </Story>
+</Canvas>
+
+### placeholder:
+
+<Canvas>
+  <Story name="placeholder">
+    {{
+        components: { ASelect },
+        template: `
+        <div>
+          <a-select placeholder="placeholder" :options="['yes', 'no']" />
+        </div>
+        `,
+    }}
+  </Story>
+</Canvas>
+
 ### Sizes:
 
 <Canvas>