@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/src/components/Button/ButtonIcon.vue

@@ -1,103 +1,103 @@
-<template>
-  <button
-    :class="['button-icon', size, type]"
-    v-on="$listeners"
-  >
-    <unnnic-icon
-      :icon="icon"
-      :scheme="iconScheme"
-      size="ant"
-    ></unnnic-icon>
-  </button>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-
-  props: {
-    type: {
-      type: String,
-      default: 'secondary',
-    },
-
-    size: {
-      type: String,
-      required: true,
-      validator(value) {
-        return ['small', 'large'].includes(value);
-      },
-    },
-
-    icon: {
-      type: String,
-      required: true,
-    },
-  },
-
-  computed: {
-    iconScheme() {
-      if (this.type === 'primary') {
-        return 'neutral-snow';
-      }
-
-      return 'neutral-darkest';
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.button-icon {
-  border: 0;
-  cursor: pointer;
-  border-radius: $unnnic-border-radius-sm;
-
-  &.small {
-    padding: $unnnic-spacing-inset-nano;
-  }
-
-  &.large {
-    padding: $unnnic-spacing-inset-xs;
-  }
-
-  &.primary {
-    background-color: $unnnic-color-neutral-darkest;
-
-    &:hover {
-      opacity: $unnnic-opacity-level-clear;
-    }
-  }
-
-  &.secondary {
-    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
-    position: relative;
-
-    &:before {
-      content: " ";
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
-      border-radius: inherit;
-      pointer-events: none;
-    }
-
-    &:hover {
-      background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
-
-      &:before {
-        border: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <button
+    :class="['button-icon', size, type]"
+    v-on="$listeners"
+  >
+    <unnnic-icon
+      :icon="icon"
+      :scheme="iconScheme"
+      size="ant"
+    ></unnnic-icon>
+  </button>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'secondary',
+    },
+
+    size: {
+      type: String,
+      required: true,
+      validator(value) {
+        return ['small', 'large'].includes(value);
+      },
+    },
+
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    iconScheme() {
+      if (this.type === 'primary') {
+        return 'neutral-snow';
+      }
+
+      return 'neutral-darkest';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.button-icon {
+  border: 0;
+  cursor: pointer;
+  border-radius: $unnnic-border-radius-sm;
+
+  &.small {
+    padding: $unnnic-spacing-inset-nano;
+  }
+
+  &.large {
+    padding: $unnnic-spacing-inset-xs;
+  }
+
+  &.primary {
+    background-color: $unnnic-color-neutral-darkest;
+
+    &:hover {
+      opacity: $unnnic-opacity-level-clear;
+    }
+  }
+
+  &.secondary {
+    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
+    position: relative;
+
+    &:before {
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+
+      &:before {
+        border: 0;
+      }
+    }
+  }
+}
+</style>

package/src/components/Card/AccountCard.vue

@@ -1,94 +1,94 @@
-<template>
-  <!-- Card Item List Selected Icon On -->
-  <div
-    :class="{
-      'unnnic-card-account': true,
-      enabled: enabled,
-    }"
-  >
-    <div class="icon">
-      <unnnic-avatar-icon
-        size="xs"
-        :scheme="scheme"
-        :icon="icon"
-        :enabled="enabled"
-      ></unnnic-avatar-icon>
-    </div>
-
-    <div class="content">
-      <div class="title">{{ title }}</div>
-
-      <div class="description">{{ description }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
-
-export default {
-  name: 'unnnic-card',
-  components: {
-    UnnnicAvatarIcon,
-  },
-  props: {
-    title: {
-      type: String,
-      default: null,
-    },
-    description: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
-    scheme: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-card-account {
-  display: flex;
-  border-radius: $unnnic-border-radius-sm;
-  padding: $unnnic-squish-xs;
-
-  &.enabled {
-    background-color: $unnnic-color-background-sky;
-  }
-
-  .icon {
-    margin-right: $unnnic-inline-xs;
-  }
-
-  .content {
-    .title {
-      font-family: $unnnic-font-family-primary;
-      font-size: $unnnic-font-size-body-lg;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-neutral-darkest;
-      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    }
-
-    .description {
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-gt;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-neutral-cloudy;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      margin-top: $unnnic-spacing-stack-nano;
-    }
-  }
-}
-</style>
+<template>
+  <!-- Card Item List Selected Icon On -->
+  <div
+    :class="{
+      'unnnic-card-account': true,
+      enabled: enabled,
+    }"
+  >
+    <div class="icon">
+      <unnnic-avatar-icon
+        size="xs"
+        :scheme="scheme"
+        :icon="icon"
+        :enabled="enabled"
+      ></unnnic-avatar-icon>
+    </div>
+
+    <div class="content">
+      <div class="title">{{ title }}</div>
+
+      <div class="description">{{ description }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
+
+export default {
+  name: 'unnnic-card',
+  components: {
+    UnnnicAvatarIcon,
+  },
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+    description: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    scheme: {
+      type: String,
+      default: null,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-card-account {
+  display: flex;
+  border-radius: $unnnic-border-radius-sm;
+  padding: $unnnic-squish-xs;
+
+  &.enabled {
+    background-color: $unnnic-color-background-sky;
+  }
+
+  .icon {
+    margin-right: $unnnic-inline-xs;
+  }
+
+  .content {
+    .title {
+      font-family: $unnnic-font-family-primary;
+      font-size: $unnnic-font-size-body-lg;
+      font-weight: $unnnic-font-weight-regular;
+      color: $unnnic-color-neutral-darkest;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+    }
+
+    .description {
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-gt;
+      font-weight: $unnnic-font-weight-regular;
+      color: $unnnic-color-neutral-cloudy;
+      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+      margin-top: $unnnic-spacing-stack-nano;
+    }
+  }
+}
+</style>

package/src/components/Card/BlankCard.vue

@@ -1,83 +1,83 @@
-<template>
-  <div :class="{
-      'unnnic-card-blank': true,
-      'unnnic-card-blank__clickable': clickable,
-    }">
-    <div class="unnnic-card-blank__content">
-        <unnnic-icon-svg
-          :icon="icon"
-          scheme="neutral-clean"
-          class="unnnic-card-blank__content__icon"
-          size="xl"
-        />
-
-      <div class="unnnic-card-blank__content__text">{{ text }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicIconSvg from '../Icon.vue';
-
-export default {
-  name: 'unnnic-card',
-  components: {
-    UnnnicIconSvg,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-card-blank {
-  display: flex;
-  background-color: $unnnic-color-background-snow;
-  border-radius: $unnnic-border-radius-md;
-  padding: $unnnic-inset-md;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: $unnnic-shadow-level-near;
-  }
-
-  &__clickable {
-    cursor: pointer;
-  }
-
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    width: 100%;
-
-    &__icon {
-      padding-bottom: $unnnic-spacing-stack-xs;
-    }
-
-    &__text {
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-lg;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-neutral-cloudy;
-      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-medium;
-    }
-  }
-}
-</style>
+<template>
+  <div :class="{
+      'unnnic-card-blank': true,
+      'unnnic-card-blank__clickable': clickable,
+    }">
+    <div class="unnnic-card-blank__content">
+        <unnnic-icon-svg
+          :icon="icon"
+          scheme="neutral-clean"
+          class="unnnic-card-blank__content__icon"
+          size="xl"
+        />
+
+      <div class="unnnic-card-blank__content__text">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicIconSvg from '../Icon.vue';
+
+export default {
+  name: 'unnnic-card',
+  components: {
+    UnnnicIconSvg,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-card-blank {
+  display: flex;
+  background-color: $unnnic-color-background-snow;
+  border-radius: $unnnic-border-radius-md;
+  padding: $unnnic-inset-md;
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: $unnnic-shadow-level-near;
+  }
+
+  &__clickable {
+    cursor: pointer;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+
+    &__icon {
+      padding-bottom: $unnnic-spacing-stack-xs;
+    }
+
+    &__text {
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-lg;
+      font-weight: $unnnic-font-weight-regular;
+      color: $unnnic-color-neutral-cloudy;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-medium;
+    }
+  }
+}
+</style>