@eturnity/eturnity_reusable_components 8.31.0 → 8.31.1

package/src/components/statusIndicator/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <BoxContainer
+    :border-radius="borderRadius"
+    :is-active="isActive"
+    :is-dirty="isDirty"
+    :is-disabled="isDisabled"
+    :is-error="isError"
+    :is-valid="isValid"
+    :is-warning="isWarning"
+    :size="size"
+  >
+    <RcIcon
+      v-if="isValid"
+      :color="theme.semanticColors.purple[500]"
+      :hovered-color="theme.semanticColors.purple[500]"
+      name="checkmark_thin"
+      size="16px"
+    />
+    <RcIcon
+      v-else-if="isError"
+      :color="theme.colors.white"
+      :hovered-color="theme.colors.white"
+      name="cross"
+      size="10x"
+    />
+    <RcIcon
+      v-else-if="isWarning"
+      :color="theme.colors.white"
+      :hovered-color="theme.colors.white"
+      name="warning_triangle"
+      size="10px"
+    />
+    <NumberContainer v-else :is-active="isActive" :is-valid="isValid">
+      <slot></slot>
+    </NumberContainer>
+  </BoxContainer>
+</template>
+
+<script>
+  // to use the StatusIndicator, you need to pass the following props:
+  // <StatusIndicator
+  //  :is-error="true"
+  //  :is-warning="true"
+  //  :is-dirty="true"
+  //  :is-disabled="true"
+  //  :is-active="true"
+  // >
+  // 42
+  // </StatusIndicator>
+  import styled from 'vue3-styled-components'
+  import RcIcon from '../icon'
+  import theme from '@/assets/theme.js'
+
+  const StyledComponents = {
+    ProgressionStepItem: styled.div`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    `,
+    BoxContainer: styled('div', {
+      isActive: Boolean,
+      isValid: Boolean,
+      isError: Boolean,
+      isWarning: Boolean,
+      isDirty: Boolean,
+      isDisabled: Boolean,
+      size: String,
+      borderRadius: String,
+    })`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: ${({ size }) => size};
+      height: ${({ size }) => size};
+      font-size: 16px;
+      background-color: ${({
+        theme,
+        isValid,
+        isActive,
+        isError,
+        isWarning,
+        isDirty,
+        isDisabled,
+      }) => {
+        if (isDisabled) return theme.semanticColors.grey[200]
+        if (isError) return theme.semanticColors.red[500]
+        if (isWarning) return theme.semanticColors.yellow[500]
+        if (isActive) {
+          return theme.semanticColors.purple[500]
+        }
+        if (!isDirty) return theme.semanticColors.grey[50]
+        if (isValid) return theme.semanticColors.purple[50]
+        return theme.semanticColors.grey[50]
+      }};
+      border: 1px solid;
+      border-color: ${({
+        theme,
+        isValid,
+        isActive,
+        isError,
+        isWarning,
+        isDirty,
+        isDisabled,
+      }) => {
+        if (isDisabled) return theme.semanticColors.grey[500]
+        if (isError) return theme.semanticColors.red[500]
+        if (isWarning) return theme.semanticColors.yellow[600]
+        if (!isDirty) return theme.semanticColors.grey[400]
+        if (isActive) return theme.semanticColors.purple[600]
+        if (isValid) return theme.semanticColors.purple[50]
+        return theme.semanticColors.grey[400]
+      }};
+      color: ${({ theme, isValid, isActive }) =>
+        isActive ? theme.colors.white : theme.semanticColors.grey[800]};
+      margin: 0;
+      border-radius: ${({ borderRadius }) => borderRadius};
+      cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
+      &:hover {
+        ${({ theme, isValid, isActive }) =>
+          isValid
+            ? 'background-color:' + theme.semanticColors.purple[100] + ';'
+            : ''}
+      }
+    `,
+    NumberContainer: styled.div``,
+  }
+  export default {
+    name: 'StatusIndicator',
+    components: {
+      ...StyledComponents,
+      RcIcon,
+    },
+    props: {
+      isError: {
+        type: Boolean,
+        default: false,
+      },
+      isWarning: {
+        type: Boolean,
+        default: false,
+      },
+      isDirty: {
+        type: Boolean,
+        default: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+      },
+      isActive: {
+        type: Boolean,
+        default: false,
+      },
+      size: {
+        type: String,
+        default: '20px',
+      },
+      borderRadius: {
+        type: String,
+        default: '50%',
+      },
+    },
+    data() {
+      return {
+        theme,
+      }
+    },
+    computed: {
+      isValid() {
+        return this.isDirty && !this.isError && !this.isWarning
+      },
+    },
+  }
+</script>