@datability/8ui 1.2.3 → 1.4.0

package/README.md

@@ -1,3 +1,5 @@
+[Link Demo](https://main.d3pr0z4u32aahy.amplifyapp.com/)
+
 # Commit Message Format
 
 We have very precise rules over how our Git commit messages must be formatted.

package/dist/components/avatar-group/index.scss

@@ -0,0 +1,57 @@
+.DBui-avatarGroup {
+  display: flex;
+  align-items: center;
+
+  &[data-type="spaced"] {
+    gap: var(--spacingGapMd);
+  }
+
+  &[data-type="overlap"] {
+    .DBui-avatarGroupItem {
+      margin-right: var(--spacingGap4xs);
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .DBui-avatarGroupItem {
+    flex-shrink: 0;
+  }
+
+  .DBui-avatarGroupOverflow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: var(--staticRadiusCircular);
+    background-color: var(--componentColorDefaultBackgroundDisabledOnDefault);
+    color: var(--componentColorDefaultLabelDefaultQuaternary);
+
+    &[data-size="sm"] {
+      width: var(--iconXl);
+      height: var(--iconXl);
+    }
+
+    &[data-size="md"] {
+      width: var(--icon2xl);
+      height: var(--icon2xl);
+    }
+
+    &[data-size="lg"] {
+      width: var(--icon2xl);
+      height: var(--icon2xl);
+    }
+
+    &[data-size="xl"] {
+      width: var(--icon3xl);
+      height: var(--icon3xl);
+    }
+
+    &[data-size="2xl"] {
+      width: var(--icon3xl);
+      height: var(--icon3xl);
+    }
+  }
+}

package/dist/components/avatars/index.scss

@@ -0,0 +1,47 @@
+.DBui-avatars {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--staticRadiusCircular);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  // Sizes
+  &[data-size="sm"] {
+    width: var(--icon2xl);
+    height: var(--icon2xl);
+  }
+
+  &[data-size="md"] {
+    width: var(--icon3xl);
+    height: var(--icon3xl);
+  }
+
+  &[data-size="lg"] {
+    width: var(--icon4xl);
+    height: var(--icon4xl);
+  }
+
+  &[data-size="xl"] {
+    width: var(--icon5xl);
+    height: var(--icon5xl);
+  }
+
+  &[data-size="2xl"] {
+    width: var(--icon6xl);
+    height: var(--icon6xl);
+  }
+
+  // Image type
+  .DBui-avatarsImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  // Initial type
+  &[data-type="initial"] {
+    background-color: var(--componentColorDefaultBackgroundDefaultSecondary);
+    color: var(--componentColorDefaultLabelNeutralPureWhite);
+  }
+}

package/dist/components/battery/index.scss

@@ -0,0 +1,45 @@
+.DBui-battery {
+  width: 24px;
+  height: 24px;
+
+  .DBui-batteryBody {
+    fill: #000000;
+  }
+
+  .DBui-batteryFill {
+    fill: #000000;
+  }
+
+  .DBui-batteryIndicator {
+    fill: #E71226;
+  }
+
+  .DBui-batteryWarning {
+    fill: #E71226;
+  }
+
+  .DBui-batteryExclamation {
+    fill: #F5F5F5;
+  }
+
+  // Color variant
+  &[data-variant="color"] {
+    &[data-level="high"] {
+      .DBui-batteryFill {
+        fill: #00b85f;
+      }
+    }
+
+    &[data-level="medium"] {
+      .DBui-batteryFill {
+        fill: #ffc107;
+      }
+    }
+
+    &[data-level="critical"] {
+      .DBui-batteryFill {
+        fill: #E71226;
+      }
+    }
+  }
+}

package/dist/components/breadcrumbs/index.scss

@@ -0,0 +1,35 @@
+.DBui-breadcrumbs {
+  display: flex;
+  align-items: center;
+
+  .DBui-breadcrumbsItem {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    color: var(--componentColorDefaultLabelSecondaryDefault);
+    cursor: pointer;
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+    }
+
+    &[data-current="true"] {
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+      cursor: default;
+    }
+  }
+
+  .DBui-breadcrumbsSeparator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+    flex-shrink: 0;
+  }
+}

package/dist/components/button/index.scss

@@ -1,40 +1,175 @@
+$colors: (
+  "primary": "Primary",
+  "secondary": "Secondary",
+  "tertiary": "Tertiary",
+  "success": "Success",
+  "warning": "Warning",
+  "danger": "Danger",
+  "default": "Default",
+  "neutral": "Neutral",
+  "disabled": "Disabled",
+);
+
 .DBui-button {
-  transition: opacity 0.3s;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5em;
   cursor: pointer;
-  padding: 0.4em 1em;
-  border-radius: 0.3em;
-  border: 1px solid #03287E;
-  background-color: #03287E;
-  color: #FFFFFF;
-
-  &:hover {
-    opacity: 0.8;
-  }
+  border: none;
+  outline: none;
+  background: none;
+  transition: all 0.2s;
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
-  }
-  
-  .DBui-loaderSpinButton {
-    width: 30px;
-    height: 30px;
-    border: 3px solid #aaaaae;
-    border-bottom-color: #FFFFFF;
-    border-radius: 50%;
-    animation: rotation 1s linear infinite;
-
-    @keyframes rotation {
-      0% {
-        transform: rotate(0deg);
+  }
+
+  // Sizes
+  &[data-size="sm"] {
+    gap: var(--buttonGapSm);
+    padding: var(--buttonSpacingSmallPaddingY) var(--buttonSpacingSmallPaddingX);
+    border-radius: var(--buttonRadiusMd);
+
+    .DBui-buttonIcon {
+      width: var(--buttonIconSm);
+      height: var(--buttonIconSm);
+    }
+
+    .DBui-buttonLoader {
+      width: var(--buttonIconSm);
+      height: var(--buttonIconSm);
+    }
+  }
+
+  &[data-size="md"] {
+    gap: var(--buttonGapMd);
+    padding: var(--buttonSpacingMediumPaddingY) var(--buttonSpacingMediumPaddingX);
+    border-radius: var(--buttonRadiusMd);
+
+    .DBui-buttonIcon {
+      width: var(--buttonIconMd);
+      height: var(--buttonIconMd);
+    }
+
+    .DBui-buttonLoader {
+      width: var(--buttonIconMd);
+      height: var(--buttonIconMd);
+    }
+  }
+
+  &[data-size="lg"] {
+    gap: var(--buttonGapMd);
+    padding: var(--buttonSpacingLargePaddingY) var(--buttonSpacingLargePaddingX);
+    border-radius: var(--buttonRadiusMd);
+
+    .DBui-buttonIcon {
+      width: var(--buttonIconLg);
+      height: var(--buttonIconLg);
+    }
+
+    .DBui-buttonLoader {
+      width: var(--buttonIconLg);
+      height: var(--buttonIconLg);
+    }
+  }
+
+  // Default variant
+  &[data-variant="default"] {
+    @each $key, $val in $colors {
+      &[data-color="#{$key}"] {
+        background-color: var(--buttonColorDefaultBackground#{$val}Default);
+        color: var(--buttonColorDefaultLabel#{$val}Default);
+
+        .DBui-buttonIcon {
+          color: var(--buttonColorDefaultIcon#{$val}Default);
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--buttonColorDefaultBackground#{$val}Hover);
+          color: var(--buttonColorDefaultLabel#{$val}Hover);
+
+          .DBui-buttonIcon {
+            color: var(--buttonColorDefaultIcon#{$val}Hover);
+          }
+        }
+      }
+    }
+  }
+
+  // Outline variant
+  &[data-variant="outline"] {
+    @each $key, $val in $colors {
+      &[data-color="#{$key}"] {
+        background-color: transparent;
+        border: var(--buttonBorderXs) solid var(--buttonColorOutlineBorder#{$val}Default);
+        color: var(--buttonColorOutlineLabel#{$val}Default);
+
+        .DBui-buttonIcon {
+          color: var(--buttonColorOutlineIcon#{$val}Default);
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--buttonColorOutlineBackground#{$val}Hover);
+          border-color: var(--buttonColorOutlineBorder#{$val}Hover);
+          color: var(--buttonColorOutlineLabel#{$val}Hover);
+
+          .DBui-buttonIcon {
+            color: var(--buttonColorOutlineIcon#{$val}Hover);
+          }
+        }
       }
-      100% {
-        transform: rotate(360deg);
+    }
+  }
+
+  // Link variant
+  &[data-variant="link"] {
+    background-color: transparent;
+
+    @each $key, $val in $colors {
+      &[data-color="#{$key}"] {
+        color: var(--buttonColorLinkLabel#{$val}Default);
+
+        .DBui-buttonIcon {
+          color: var(--buttonColorLinkIcon#{$val}Default);
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--buttonColorLinkBackground#{$val}Hover);
+          color: var(--buttonColorLinkLabel#{$val}Hover);
+
+          .DBui-buttonIcon {
+            color: var(--buttonColorLinkIcon#{$val}Hover);
+          }
+        }
       }
     }
   }
+
+  // Icon base
+  .DBui-buttonIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // Loader base
+  .DBui-buttonLoader {
+    border: 2px solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: var(--staticRadiusCircular);
+    animation: DBui-buttonSpin 0.6s linear infinite;
+  }
+
+  @keyframes DBui-buttonSpin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }

package/dist/components/button-icon/index.scss

@@ -0,0 +1,125 @@
+$colors: (
+  "primary": "Primary",
+  "secondary": "Secondary",
+  "tertiary": "Tertiary",
+  "danger": "Danger",
+  "default": "Default",
+  "neutral": "Neutral",
+  "disabled": "Disabled",
+);
+
+.DBui-buttonIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: none;
+  transition: all 0.2s;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  // Sizes
+  &[data-size="sm"] {
+    width: var(--icon2xl);
+    height: var(--icon2xl);
+    padding: var(--spacingPaddingMd);
+    gap: var(--buttonGapSm);
+    border-radius: var(--buttonRadiusMd);
+
+    .DBui-buttonIconInner {
+      width: var(--buttonIconSm);
+      height: var(--buttonIconSm);
+    }
+  }
+
+  &[data-size="md"] {
+    width: var(--icon3xl);
+    height: var(--icon3xl);
+    padding: var(--spacingPaddingMd);
+    gap: var(--buttonGapSm);
+    border-radius: var(--buttonRadiusMd);
+
+    .DBui-buttonIconInner {
+      width: var(--buttonIconMd);
+      height: var(--buttonIconMd);
+    }
+  }
+
+  &[data-size="lg"] {
+    width: var(--icon4xl);
+    height: var(--icon4xl);
+    padding: var(--spacingPaddingMd);
+    gap: var(--buttonGapSm);
+    border-radius: var(--buttonRadiusMd);
+
+    .DBui-buttonIconInner {
+      width: var(--buttonIconLg);
+      height: var(--buttonIconLg);
+    }
+  }
+
+  // Default variant
+  &[data-variant="default"] {
+    @each $key, $val in $colors {
+      &[data-color="#{$key}"] {
+        background-color: var(--buttonColorDefaultBackground#{$val}Default);
+        color: var(--buttonColorDefaultIcon#{$val}Default);
+
+        &:hover:not(:disabled) {
+          background-color: var(--buttonColorDefaultBackground#{$val}Hover);
+          color: var(--buttonColorDefaultIcon#{$val}Hover);
+        }
+      }
+    }
+  }
+
+  // Outline variant
+  &[data-variant="outline"] {
+    @each $key, $val in $colors {
+      &[data-color="#{$key}"] {
+        background-color: transparent;
+        border: var(--buttonBorderXs) solid var(--buttonColorOutlineBorder#{$val}Default);
+        color: var(--buttonColorOutlineIcon#{$val}Default);
+
+        &:hover:not(:disabled) {
+          background-color: var(--buttonColorOutlineBackground#{$val}Hover);
+          border-color: var(--buttonColorOutlineBorder#{$val}Hover);
+          color: var(--buttonColorOutlineIcon#{$val}Hover);
+        }
+      }
+    }
+  }
+
+  // Ghost variant
+  &[data-variant="ghost"] {
+    @each $key, $val in $colors {
+      &[data-color="#{$key}"] {
+        background-color: transparent;
+        color: var(--buttonColorOutlineIcon#{$val}Default);
+
+        &:hover:not(:disabled) {
+          background-color: var(--buttonColorOutlineBackground#{$val}Hover);
+          color: var(--buttonColorOutlineIcon#{$val}Hover);
+        }
+      }
+    }
+  }
+
+  // Icon inner
+  .DBui-buttonIconInner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/dist/components/calendar/index.scss

@@ -0,0 +1,101 @@
+.DBui-calendar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 16px;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.DBui-calendarHeader {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.DBui-calendarSelects {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+}
+
+.DBui-calendarTable {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 16px;
+}
+
+.DBui-calendarWeekdays {
+  display: flex;
+  gap: 1px;
+  width: 100%;
+}
+
+.DBui-calendarWeekday {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--typographyFontFamilyPlain), sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #757575;
+  text-align: center;
+}
+
+.DBui-calendarBody {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.DBui-calendarRow {
+  display: flex;
+  gap: 1px;
+}
+
+.DBui-calendarDay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font-family: var(--typographyFontFamilyPlain), sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: #1e1e1e;
+  cursor: pointer;
+  text-align: center;
+
+  &:hover:not(:disabled):not([data-selected]) {
+    background: #f5f5f5;
+  }
+
+  &[data-selected] {
+    background: #2c2c2c;
+    color: #f5f5f5;
+  }
+
+  &[data-in-range] {
+    background: #f5f5f5;
+    color: #2c2c2c;
+  }
+
+  &[data-outside] {
+    color: #b3b3b3;
+    cursor: default;
+  }
+
+  &:disabled:not([data-outside]) {
+    color: #b3b3b3;
+    cursor: not-allowed;
+  }
+}