@eturnity/eturnity_reusable_components 8.26.11-autiFill.1 → 8.26.11-autiFill.2

package/src/components/statusIndicator/index.vue

@@ -1,11 +1,13 @@
 <template>
   <BoxContainer
+    :border-radius="borderRadius"
     :is-active="isActive"
     :is-disabled="isDisabled"
     :is-error="isError"
     :is-touched="isTouched"
     :is-valid="isValid"
     :is-warning="isWarning"
+    :size="size"
   >
     <RcIcon
       v-if="isValid && isTouched"
@@ -62,12 +64,14 @@
       isWarning: Boolean,
       isTouched: Boolean,
       isDisabled: Boolean,
+      size: String,
+      borderRadius: String,
     })`
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 32px;
-      height: 32px;
+      width: ${({ size }) => size};
+      height: ${({ size }) => size};
       font-size: 16px;
       background-color: ${({
         theme,
@@ -91,7 +95,7 @@
       color: ${({ theme, isValid, isActive }) =>
         isActive ? theme.colors.white : theme.semanticColors.grey[800]};
       margin: 0;
-      border-radius: 5px;
+      border-radius: ${({ borderRadius }) => borderRadius};
       cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
       &:hover {
         ${({ theme, isValid, isActive }) =>
@@ -129,6 +133,14 @@
         type: Boolean,
         default: false,
       },
+      size: {
+        type: String,
+        default: '20px',
+      },
+      borderRadius: {
+        type: String,
+        default: '50%',
+      },
     },
     data() {
       return {