feat: adjust button and radio

Author: linspw

src/components/atoms/button/button.scss

@@ -16,6 +16,7 @@
   --h-button-text-decoration: none;
   --h-button-text-decoration--hover: none;
   --h-button-text-decoration--active: none;
+  --h-button-padding: var(--size-base-small) var(--size-base-large);
   --h-button-color: inherit;
   --h-button-font-weight: 500;
   --h-button-border: none;
@@ -30,7 +31,7 @@
   display: inline-flex;
   font-weight: var(--h-button-font-weight);
   justify-content: center;
-  padding: var(--size-base-small) var(--size-base-large);
+  padding: var(--h-button-padding);
   position: relative;
   text-decoration: var(--h-button-text-decoration);
   transition: background-color 250ms, opacity 250ms;
@@ -165,6 +166,9 @@
       margin-top: var(--size-base-extra-small);
       margin-bottom: var(--size-base-extra-small);
     }
+    &-only-icon {
+      --h-button-padding: var(--size-base-small);
+    }
   }
 
   &__icon {

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

@@ -175,7 +175,7 @@ Items acessíveis tem margens automaticas.
         components: { HButton },
         template: `
         <div>
-          <h-button @click="action" icon-right="fas fa-user" />
+          <h-button @click="action" icon-right="fas fa-user" only-icon />
         </div>
         `,
         methods: { action: action("clicked") }

src/components/atoms/button/button.vue

@@ -7,6 +7,7 @@
       ['h-button--behavior-is-rounded']: isRounded,
       [`h-button--behavior-is-loading`]: isLoading,
       [`h-button--behavior-is-accessible`]: isAccessible,
+      [`h-button--behavior-only-icon`]: onlyIcon,
       [`h-button--color-${color}`]: color,
       [`h-button--size-${size}`]: size,
       [`h-button--variant-${variant}`]: variant,
@@ -119,6 +120,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    onlyIcon: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     slotPassed() {

src/components/atoms/index.js

@@ -14,3 +14,4 @@ export * from './text';
 export * from './suspense';
 export * from './loading';
 export * from './checkbox';
+export * from './radio';

src/components/atoms/radio/index.js

@@ -0,0 +1,3 @@
+import HRadio from './radio.vue';
+
+export { HRadio };

src/components/atoms/radio/radio.stories[WIP}.mdx

@@ -0,0 +1,25 @@
+import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions'
+import HRadio from './radio.vue';
+
+<Meta title="Design System/Atoms/Radio" component={HRadio} />
+
+## Checkbox
+
+### Uso normal:
+
+<Canvas>
+  <Story name="Uso normal">
+    {{
+        components: { HRadio },
+        data() {
+          return {
+            status: null,
+          };
+        },
+        template: '<h-radio label="Checkbox" v-model="status" />',
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable of={HRadio} />

src/components/atoms/radio/radio.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="h-radio">
+    <div>
+      <input type="radio">
+
+      <HIcon icon="fa-solid fa-circle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { HIcon } from '@components/atoms/icon';
+
+export default {
+  name: 'HRadio',
+  components: {
+    HIcon,
+  },
+};
+
+</script>
+
+<style lang="scss">
+.h-radio {
+  display: flex;
+  align-items: center;
+
+  --h-radio-main-color: var(--color-theme-secondary);
+  --h-radio-background-color: transparent;
+  --h-radio-border-color: var(--color-theme-primary);
+  --h-radio-color: var(--colors-original-white);
+  --h-radio__label--color: inherit;
+}
+</style>

src/plugins/core-ui-plugin.js

@@ -16,6 +16,7 @@ import {
   HSuspense,
   HLoading,
   HCheckbox,
+  HRadio,
 } from '@components/atoms';
 
 import {
@@ -50,6 +51,7 @@ const CoreUIPlugin = {
     Vue.component('HSuspense', HSuspense);
     Vue.component('HLoading', HLoading);
     Vue.component('HCheckbox', HCheckbox);
+    Vue.component('HRadio', HRadio);
   },
   installMolecules(Vue) {
     Vue.component('HBreadcrumb', HBreadcrumb);