platformscode-new-react 0.0.2 → 0.0.4

package/src/assets/styles/components/_card.scss

@@ -0,0 +1,91 @@
+.card {
+  max-width: 350px;
+  padding: var(--spacing-xl, 16px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-3xl, 24px);
+  border-radius: var(--radius-lg, 16px);
+  background: var(--Colors-Base-white, #fff);
+  border: 2px solid var(--Colors-Base-black, #fff);
+  cursor: pointer;
+  position: relative;
+
+  &__image-container {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    border-radius: var(--radius-lg, 16px);
+
+    img {
+      width: auto;
+      height: 100%;
+      border-radius: inherit;
+    }
+  }
+
+  &__checkbox-container {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    & > .checkbox {
+      .checkbox-main {
+        min-width: fit-content;
+      }
+    }
+  }
+
+  & > .badge--icon.badge--lg {
+    width: 48px;
+    height: 48px;
+  }
+
+  @extend .shadow-md;
+  &__content-text {
+    gap: 8px;
+  }
+
+  &__action {
+    width: 100%;
+    display: flex;
+
+    &--default {
+      gap: 12px;
+    }
+    &--expanded {
+      // position: relative;
+      justify-content: flex-end;
+
+      .btn {
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    color: var(--colors-gray-neutral-300);
+    background-color: transparent;
+    border-color: transparent;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--colors-gray-neutral-100);
+      opacity: 0.3;
+    }
+  }
+
+  &.focused {
+    border-radius: var(--radius-lg, 16px);
+    border: 2px solid var(--Colors-Base-black, #000);
+    @extend .shadow-md;
+  }
+}

package/src/assets/styles/components/_checkbox.scss

@@ -0,0 +1,241 @@
+.checkbox {
+  margin: var(--spacing-md);
+  display: flex;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-none);
+  cursor: pointer;
+
+  user-select: none;
+
+  &-icon {
+    display: none !important;
+    color: var(--colors-base-white);
+
+    width: 16px;
+    height: 16px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.focus {
+    border-radius: var(--radius-sm);
+    outline: 2px solid var(--colors-base-black);
+  }
+
+  &-main {
+    &,
+    &__content {
+      display: flex;
+      column-gap: var(--spacing-xl);
+    }
+
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    max-width: 382px;
+    // min-width: 160px;
+  }
+
+  & input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked {
+      & ~ .checkbox-container {
+        background-color: var(--colors-gray-neutral-950);
+
+        & .checkbox__checked-icon {
+          display: inline-flex !important;
+        }
+      }
+    }
+
+    &:hover {
+      & ~ .checkbox-container {
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    }
+  }
+
+  &.active input:not(:checked) ~ .checkbox-container {
+    background-color: var(--colors-gray-neutral-300);
+  }
+
+  &-container {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    border-radius: var(--radius-xs);
+    border: 1px solid var(--colors-gray-neutral-500);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    margin: var(--spacing-xs);
+    -webkit-user-select: none;
+    /* Safari */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
+
+    &::after {
+      content: "";
+      border-radius: var(--radius-full);
+      background: var(--colors-gray-neutral-100);
+      width: 48px;
+      height: 48px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      z-index: -1;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+
+  &--indeterminate {
+    & .checkbox-container {
+      background-color: var(--colors-gray-neutral-950);
+
+      .checkbox-icon {
+        display: none;
+      }
+
+      .checkbox__indeterminate-icon {
+        display: inline-block !important;
+      }
+    }
+
+    & input:checked {
+      & ~ .checkbox-container {
+        .checkbox__indeterminate-icon {
+          display: none !important;
+        }
+
+        .checkbox__checked-icon {
+          display: inline-block !important;
+        }
+      }
+    }
+  }
+
+  & input:disabled {
+    & ~ .checkbox-container {
+      border-color: var(--colors-border-disabled);
+      background-color: var(--colors-border-disabled);
+    }
+
+    &:checked ~ .checkbox-container .checkbox__checked-icon {
+      // display: inline-block !important;
+      // color: var(--colors-gray-neutral-300);
+    }
+
+    & ~ .checkbox__label,
+    & ~ div > .checkbox__label,
+    & ~ div > .checkbox__helper-text {
+      color: var(--colors-border-disabled);
+    }
+  }
+
+  &__label {
+    @extend .text-md-medium;
+    margin-top: var(--spacing-xs);
+  }
+
+  &__helper-text {
+    color: var(--colors-text-tertiary);
+    @extend .text-sm-regular;
+    margin-block: var(--spacing-xs);
+  }
+
+  &__warning {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xl);
+
+    color: var(--colors-text-error-primary);
+    @extend .text-sm-medium;
+
+    &-icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: var(--spacing-xs);
+    }
+
+    &-text {
+    }
+  }
+
+  &--brand {
+    & input:checked {
+      & ~ .checkbox-container {
+        border-color: var(--colors-brand-600);
+        background-color: var(--colors-brand-600);
+      }
+
+      & ~ .checkbox__label,
+      & ~ div > .checkbox__label {
+        color: var(--colors-text-brand-secondary);
+      }
+
+      &:disabled {
+        & ~ .checkbox-container {
+          background-color: var(--colors-border-disabled);
+
+          .checkbox__checked-icon {
+            display: inline-block !important;
+            // color: var(--colors-gray-neutral-300);
+          }
+        }
+      }
+    }
+
+    & input:disabled {
+      & ~ .checkbox-container {
+        border-color: var(--colors-border-disabled);
+        background-color: transparent;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:checked {
+      }
+
+      & ~ .checkbox__label,
+      & ~ div > .checkbox__label,
+      & ~ div > .checkbox__helper-text {
+        color: var(--colors-border-disabled);
+      }
+    }
+
+    &.active input:checked ~ .checkbox-container {
+      background-color: var(--colors-brand-700);
+    }
+  }
+
+  &--readonly {
+    & .checkbox-container {
+      background-color: transparent !important;
+
+      .checkbox-icon {
+        color: var(--colors-gray-neutral-600);
+      }
+    }
+  }
+
+  &--indeterminate {
+  }
+}

package/src/assets/styles/components/_content-switcher.scss

@@ -0,0 +1,108 @@
+.content-switcher {
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    display: inline-flex;
+    min-width: 76px;
+    padding: var(--spacing-xs) 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    // border: 3px solid transparent !important;
+    border: 0;
+
+    background: var(--colors-gray-neutral-100);
+    color: var(--colors-2-text-primary, #161616);
+    @extend .text-md-regular;
+    // box-shadow: 0 0 0 2px transparent;
+
+    &:hover {
+      background: var(--colors-gray-neutral-200, #e5e7eb);
+    }
+
+    &:focus {
+      outline: none;
+      border: 1px solid white !important;
+      box-shadow: 0 0 0 2px black;
+      z-index: 9;
+    }
+
+    &--selected {
+      &,
+      &:hover {
+        background-color: var(--colors-gray-neutral-950, #0d121c);
+        color: var(--colors-2-text-primary_on-color, #fff);
+      }
+    }
+
+    &--first {
+      border-radius: var(--radius-md) 0px 0px var(--radius-md);
+      border-right: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
+    }
+
+    :is(html[lang="ar"], html[dir="rtl"]) &--first {
+      border-radius: 0px var(--radius-md) var(--radius-md) 0px;
+    }
+
+    &--mid {
+      border-radius: var(--radius-none);
+      border-right: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
+      border-left: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
+    }
+
+    &--last {
+      border-radius: 0px var(--radius-md) var(--radius-md) 0px;
+      border-left: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
+    }
+
+    :is(html[lang="ar"], html[dir="rtl"]) &--last {
+      border-radius: var(--radius-md) 0px 0px var(--radius-md);
+    }
+
+    &--on-color {
+      color: var(--colors-2-text-primary_on-color, #fff);
+      background-color: alpha("white", 10%);
+      border-color: alpha("white", 10%);
+
+      &:hover {
+        background: alpha("white", 30%);
+      }
+
+      &.content-switcher__item--selected {
+        &,
+        &:hover {
+          background-color: var(--colors-brand-600);
+          // color: var(--colors-2-text-primary_on-color, #FFF);
+        }
+      }
+    }
+
+    &--sm {
+      height: auto;
+    }
+
+    &--md {
+      height: 40px;
+    }
+
+    &--lg {
+      height: 48px;
+    }
+  }
+
+  &__content {
+    color: #000;
+
+    &--on-color {
+      color: #fff;
+    }
+  }
+}

package/src/assets/styles/components/_data-table.scss

@@ -0,0 +1,155 @@
+div.table-wrapper {
+  .azm-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0px;
+    padding: 0px;
+    tr.row-divider:not(:last-child) {
+      border-bottom: 1px solid var(--colors-gray-neutral-300);
+    }
+    thead {
+      border-bottom: 1px solid var(--colors-gray-neutral-300);
+      border-top: 1px solid var(--colors-gray-neutral-300);
+      background: var(--Colors-Gray-neutral-100, #f3f4f6);
+      // th:first-child {
+      //   width: 20px;
+      // }
+      th {
+        height: 48px;
+        border-right: 1px solid var(--colors-gray-neutral-300);
+        &:last-child {
+          border-right: none;
+        }
+        //   border: 1px solid var(--colors-gray-neutral-300);
+        padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
+        span {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          span.text {
+            color: var(--colors-gray-neutral-600);
+            @extend .text-xs-medium;
+          }
+          span.icon-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2px;
+            // @media (prefers-color-scheme: light) {
+            //   button {
+            //     cursor: pointer;
+            //     margin-inline: 3px;
+            //     background-color: white;
+            //     border-radius: 4px;
+            //     color: black;
+            //     &:hover {
+            //       transition: all 0.2s ease-in-out;
+            //       background-color: white;
+            //     }
+            //     &:active {
+            //       transition: all 0.2s ease-in-out;
+            //       background-color: var(--colors-gray-neutral-600);
+            //       // background-color: var(--colors-gray-neutral-500);
+            //     }
+            //     &:visited,
+            //     &:focus {
+            //       transition: all 0.2s ease-in-out;
+            //       background-color: white;
+            //       color: black;
+            //       border: 2px solid white;
+            //       outline: 3px solid #0e0e0e;
+            //     }
+            //   }
+            // }
+            // @media (prefers-color-scheme: dark) {
+            //   button {
+            //     cursor: pointer;
+            //     margin-inline: 3px;
+            //     background-color: var(--colors-gray-modern-950);
+            //     border-radius: 4px;
+            //     color: white;
+            //     &:hover {
+            //       transition: all 0.2s ease-in-out;
+            //       background-color: var(--colors-gray-modern-950);
+            //     }
+            //     &:active {
+            //       transition: all 0.2s ease-in-out;
+            //       background-color: var(--colors-gray-neutral-600);
+            //       // background-color: var(--colors-gray-neutral-500);
+            //     }
+            //     &:visited,
+            //     &:focus {
+            //       transition: all 0.2s ease-in-out;
+            //       border-radius: var(--radius-4, 4px);
+            //       border: 2px solid var(--colors-base-black);
+            //       background-color: var(--colors-gray-neutral-600);
+            //     }
+            //   }
+            // }
+            // button {
+            //   cursor: pointer;
+            //   margin-inline: 3px;
+            //   background-color: var(--colors-gray-modern-950);
+            //   border-radius: 4px;
+            //   color: white;
+            //   &:hover {
+            //     transition: all 0.2s ease-in-out;
+            //     background-color: var(--colors-gray-modern-950);
+            //   }
+            //   &:active {
+            //     transition: all 0.2s ease-in-out;
+            //     background-color: var(--colors-gray-neutral-600);
+            //     // background-color: var(--colors-gray-neutral-500);
+            //   }
+            //   &:visited,
+            //   &:focus {
+            //     transition: all 0.2s ease-in-out;
+            //     border-radius: var(--radius-4, 4px);
+            //     border: 2px solid var(--colors-base-black);
+            //     background-color: var(--colors-gray-neutral-600);
+            //   }
+            // }
+          }
+        }
+      }
+    }
+    tbody {
+      tr {
+        &.alternate:nth-child(even):not(&:hover, &.row-selected) {
+          transition: all 0.2s ease-in-out;
+          background-color: var(--colors-gray-50);
+        }
+        &:hover {
+          background-color: var(--colors-gray-neutral-100);
+        }
+      }
+      tr.row-selected {
+        background-color: var(--colors-brand-200);
+      }
+      // td:first-child {
+      //   width: 20px;
+      // }
+      td {
+        height: 64px;
+        color: var(--text-text-primary);
+        padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
+        @extend .text-md-regular;
+      }
+    }
+  }
+}
+.table-contained {
+  overflow: hidden; /* Optional */
+  border-radius: var(--radius-md, 8px);
+  border: 1px solid var(--colors-gray-neutral-300);
+  padding: 0px;
+}
+
+.selected-cell {
+  border: 3px solid var(--colors-brand-200);
+  background: var(--Colors-Gray-neutral-950, #0d121c);
+}
+
+:is(html[lang="ar"], html[dir="rtl"]) .azm-table {
+  direction: ltr;
+}