platformscode-new-react 0.0.3 → 0.0.4

package/src/assets/styles/components/_progress-indicator.scss

@@ -0,0 +1,230 @@
+.progress-indicator {
+  &__step {
+    position: relative;
+    flex: 1;
+    max-width: 200px;
+    max-height: 200px;
+    // justify-content: center;
+    &-content {
+      gap: 8px;
+      & > .step-icon {
+        display: grid;
+        place-items: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 2px solid var(--colors-gray-neutral-300, #d2d6db);
+
+        color: var(--colors-gray-neutral-300, #d2d6db);
+        @extend .text-md-medium;
+      }
+
+      & > .step-icon--brand-border {
+        border: 2px solid var(--colors-brand-600);
+        color: var(--colors-brand-600);
+      }
+
+      & > .step-icon--brand-bg {
+        border: 2px solid var(--colors-brand-600);
+        background-color: var(--colors-brand-600);
+        color: #ffffff;
+      }
+
+
+      & > .step-label {
+        display: grid;
+        place-items: center;
+        height: 32px;
+        width: 32px;
+
+        .step-label--circle {
+          height: 100%;
+          width: 100%;
+          border-radius: 50%;
+          border: 2px solid var(--colors-gray-neutral-300);
+          color: var(--colors-gray-neutral-300);
+          @extend .text-md-medium;
+        }
+
+        .step-label--dot {
+          display: block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: var(--colors-gray-neutral-300);
+        }
+
+        
+        &[data-state = "current"] {
+          .step-label--circle {
+            border: 2px solid var(--colors-brand-600);
+            color: var(--colors-brand-600);
+          }
+
+          .step-label--dot {
+            border: 2px solid var(--colors-brand-600);
+          }
+        }
+
+        &[data-state = "completed"] {
+          .step-label--circle {
+            border: 2px solid var(--colors-brand-600);
+            background-color: var(--colors-brand-600);
+            color: #ffffff;
+          }
+
+          .step-label--dot {
+            background-color: var(--colors-brand-600);
+          }
+        }
+
+        &[data-state = "upcomming"] {
+          .step-label--circle {
+            border: 2px solid var(--colors-gray-neutral-300);
+            color: var(--colors-gray-neutral-300);
+          }
+
+          .step-label--dot {
+            background-color: var(--colors-gray-neutral-300);
+          }
+        }
+
+      }
+
+      & > .step-label--brand-border {
+        color: var(--colors-brand-600);
+        border-color: var(--colors-brand-600);
+      }
+
+      & > .step-text {
+        gap: 4px;
+        height: fit-content;
+        padding-right: 16px;
+
+      }
+
+      &.focus {
+        & > .step-icon {
+          outline: 2px solid var(--colors-base-black);
+        }
+        & > .step-text {
+          border-radius: var(--radius-sm);
+          outline: 2px solid var(--colors-base-black);
+        }
+      }
+    }
+
+    &-connector {
+      display: block;
+      // width: 196px;
+      width: calc(100% - 32px);
+      height: 2px;
+      background: var(--colors-gray-neutral-300);
+      position: absolute;
+      top: 16px;
+      // left: calc(-100% + 32px);
+      // right: calc(100% + 32px);
+      left: 32px;
+
+    }
+
+    [dir="rtl"] &-connector {
+      // left: calc(-100% + 32px);
+      // right: calc(-100% + 32px);
+      left: unset;
+      right: 32px;
+    }
+
+    &-connector--active {
+      background: var(--colors-brand-600);
+    }
+  }
+
+  [data-alignment="vertical"] &__step {
+    &-content {
+      flex-direction: row !important;
+      min-height: 128px;
+    }
+
+    &-connector {
+      height: calc(100% - 32px);
+      width: 2px;
+      left: 16px;
+      // top: calc(-100% + 32px);
+      top: 32px;
+
+      [dir="rtl"] & {
+        right: 16px;
+      }
+    }
+  }
+}
+
+[data-alignment="vertical"].progress-indicator {
+  flex-direction: column;
+}
+
+
+
+
+.step-label {
+  display: grid;
+  place-items: center;
+  height: 32px;
+  width: 32px;
+
+  .step-label--circle {
+    display: grid;
+    place-items: center;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    border: 2px solid var(--colors-gray-neutral-300);
+    color: var(--colors-gray-neutral-300);
+    @extend .text-md-medium;
+  }
+
+  .step-label--dot {
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--colors-gray-neutral-300);
+  }
+
+  
+  &[data-state = "current"] {
+    .step-label--circle {
+      border: 2px solid var(--colors-brand-600);
+      color: var(--colors-brand-600);
+    }
+
+    .step-label--dot {
+      border: 2px solid var(--colors-brand-600);
+    }
+  }
+
+  &[data-state = "completed"] {
+    .step-label--circle {
+      border: 2px solid var(--colors-brand-600);
+      background-color: var(--colors-brand-600);
+      color: #ffffff;
+    }
+
+    .step-label--dot {
+      background-color: var(--colors-brand-600);
+    }
+  }
+
+  &[data-state = "upcomming"] {
+    .step-label--circle {
+      border: 2px solid var(--colors-gray-neutral-300);
+      color: var(--colors-gray-neutral-300);
+    }
+
+    .step-label--dot {
+      background-color: var(--colors-gray-neutral-300);
+    }
+  }
+
+}

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

@@ -0,0 +1,183 @@
+.radio {
+  margin: var(--spacing-md);
+
+  display: inline-flex;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-md);
+  // border: 1px solid #000;
+  cursor: pointer;
+
+  user-select: none;
+
+  &.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 {
+      & ~ .radio-container {
+        &::before {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    }
+
+    &:hover {
+      & ~ .radio-container {
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    }
+  }
+
+  &.active input:not(:checked) ~ .radio-container {
+    background-color: var(--colors-gray-neutral-300);
+  }
+
+  &-container {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--colors-gray-neutral-500);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+
+    &::after,
+    &::before {
+      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;
+    }
+
+    &::before {
+      background-color: var(--colors-gray-neutral-950);
+      width: 15px;
+      height: 15px;
+      z-index: 0;
+      transition: all 0.1s ease-in-out;
+    }
+  }
+
+  & input:read-only {
+    & ~ .radio-container {
+      &::after,
+      &::before {
+        // background-color: #fff;
+      }
+    }
+  }
+
+  & input:disabled {
+    & ~ .radio-container {
+      border-color: var(--colors-border-disabled);
+
+      &::before {
+        background-color: var(--colors-border-disabled);
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+
+    & ~ .radio__label,
+    & ~ div > .radio__label,
+    & ~ div > .radio__helper-text {
+      color: var(--colors-border-disabled);
+    }
+  }
+
+  &__label {
+    @extend .text-md-medium;
+  }
+
+  &__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;
+    }
+
+    &-text {
+    }
+  }
+
+  &--brand {
+    & input:checked {
+      & ~ .radio-container {
+        border-color: var(--colors-brand-600);
+
+        &::before {
+          background-color: var(--colors-brand-600);
+        }
+      }
+
+      & ~ .radio__label,
+      & ~ div > .radio__label {
+        color: var(--colors-text-brand-secondary);
+      }
+    }
+
+    &.active input:checked ~ .radio-container::before {
+      background-color: var(--colors-brand-700);
+    }
+
+    & input:disabled {
+      & ~ .radio-container {
+        border-color: var(--colors-border-disabled);
+
+        &::before {
+          background-color: var(--colors-border-disabled);
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+
+      & ~ .radio__label,
+      & ~ div > .radio__label,
+      & ~ div > .radio__helper-text {
+        color: var(--colors-border-disabled);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+.rating {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    position: relative;
+    font-size: 1.5rem;
+    color: #faaf00;
+    cursor: pointer;
+    text-align: left;
+    width: -webkit-min-content;
+    width: -moz-min-content;
+    width: min-content;
+    -webkit-tap-highlight-color: transparent;
+
+
+    &--small {
+     font-size: 24px;
+    }
+
+    &--medium {
+      font-size: 32px;
+    }
+
+    &--large {
+        font-size: 48px; 
+    }
+
+
+    &__star {
+        position: relative;
+
+        &__label {
+            cursor: inherit;
+
+            &-icon {
+                display: -webkit-box;
+                display: -webkit-flex;
+                display: -ms-flexbox;
+                display: flex;
+                -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                pointer-events: none;
+
+                & > svg {
+                    -webkit-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
+                    width: 1em;
+                    height: 1em;
+                    display: inline-block;
+                    fill: currentColor;
+                    -webkit-flex-shrink: 0;
+                    -ms-flex-negative: 0;
+                    flex-shrink: 0;
+                    -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                    font-size: inherit;
+                }
+            }
+
+            &-text , &-input {
+                border: 0;
+                clip: rect(0 0 0 0);
+                height: 1px;
+                margin: -1px;
+                overflow: hidden;
+                padding: 0;
+                position: absolute;
+                white-space: nowrap;
+                width: 1px;
+            }
+        }
+
+    }
+}

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

@@ -0,0 +1,23 @@
+.shadows {
+  &-container {
+    display: flex;
+    width: 2240px;
+    padding: var(--spacing-none);
+
+    align-items: flex-start;
+    gap: var(--spacing-7xl);
+  }
+
+  &-box {
+    display: flex;
+    height: 240px;
+    max-width: 256px;
+    padding: var(--spacing-3xl);
+    align-items: flex-start;
+    gap: var(--spacing-none);
+    flex: 1 0 0;
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--colors-border-primary);
+    background: var(--colors-bg-primary);
+  }
+}

package/src/assets/styles/components/_structured-list.scss

@@ -0,0 +1,95 @@
+div.table-wrapper {
+  .azm-structured-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);
+        text-align: left;
+        &:last-child {
+          border-right: none;
+        }
+        //   border: 1px solid var(--colors-gray-neutral-300);
+        padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
+        // display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--colors-gray-neutral-600);
+        @extend .text-xs-medium;
+      }
+    }
+    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);
+        }
+        td {
+          div {
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            .checkbox {
+              margin-left: 0px;
+              .checkbox-main {
+                min-width: 5px !important;
+              }
+            }
+          }
+        }
+      }
+      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);
+}
+
+[dir="rtl"] .azm-structured-table {
+  direction: rtl;
+  thead {
+    tr {
+      td {
+        text-align: right;
+      }
+    }
+  }
+}
+[dir="ltr"] .azm-structured-table {
+  direction: ltr;
+}