platformscode-new-react 0.0.2 → 0.0.4

package/src/assets/styles/components/_featured-icons.scss

@@ -0,0 +1,127 @@
+$bg-brand-hard: var(--colors-brand-600);
+$bg-gray-hard: var(--colors-gray-neutral-500);
+$bg-error-hard: var(--colors-error-500);
+$bg-warning-hard:var(--colors-warning-400);
+$bg-success-hard: var(--colors-brand-600);
+$bg-info-hard: var(--colors-info-600);
+
+$bg-brand-light: var(--colors-brand-50);
+$bg-gray-light: var(--colors-gray-neutral-100);
+$bg-error-light: var(--colors-error-50);
+$bg-warning-light:var(--colors-warning-50);
+$bg-success-light: var(--colors-brand-50);
+$bg-info-light: var(--colors-info-50);
+
+$icon-color-brand: var(--colors-brand-600);
+$icon-color-gray: var(--colors-gray-neutral-500);
+$icon-color-error: var(--colors-error-600);
+$icon-color-warning:var(--colors-warning-600);
+$icon-color-success: var(--colors-brand-600);
+$icon-color-info: var(--colors-info-600);
+
+$border-brand: var(--colors-brand-200);
+$border-gray: var(--colors-gray-neutral-200);
+$border-error: var(--colors-error-200);
+$border-warning:var(--colors-warning-200);
+$border-success: var(--colors-brand-200);
+$border-info: var(--colors-info-200);
+
+
+
+$bg_hard_variants:('brand': $bg-brand-hard,
+  'gray': $bg-gray-hard,
+  'error': $bg-error-hard,
+  'warning': $bg-warning-hard,
+  'success': $bg-success-hard,
+  'info': $bg-info-hard);
+
+$bg_light_variants: ('brand': $bg-brand-light,
+  'gray': $bg-gray-light,
+  'error': $bg-error-light,
+  'warning': $bg-warning-light,
+  'success': $bg-success-light,
+  'info': $bg-info-light);
+
+$icon_variants: ('brand': $icon-color-brand,
+  'gray': $icon-color-gray,
+  'error': $icon-color-error,
+  'warning': $icon-color-warning,
+  'success': $icon-color-success,
+  'info': $icon-color-info);
+
+$border_variants: ('brand': $border-brand,
+  'gray': $border-gray,
+  'error': $border-error,
+  'warning': $border-warning,
+  'success': $border-success,
+  'info': $border-info);
+
+$sizes: 'xl'56,
+'lg'48,
+'md'40,
+'sm'32;
+
+.featured-icon {
+  display: flex;
+  min-width: 56px;
+  width: 56px;
+  height: 56px;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-sm);
+
+  @each $size,
+  $value in $sizes {
+    &--#{$size} {
+      width: #{$value}px;
+      min-width: #{$value}px;
+      height: #{$value}px;
+
+      span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: #{calc($value/2)}px;
+        height: #{calc($value/2)}px;
+      }
+    }
+  }
+
+  &--circle {
+    border-radius: var(--radius-full);
+  }
+
+  &--hard {
+
+    @each $variant,
+    $value in $bg_hard_variants {
+      &-#{$variant} {
+        color: var(--colors-base-white);
+        background-color: $value;
+      }
+    }
+  }
+
+  &--light {
+
+    @each $variant,
+    $value in $bg_light_variants {
+      &-#{$variant} {
+        color: map-get($icon_variants, $variant);
+        background-color: $value;
+      }
+    }
+  }
+
+  &--outlined {
+
+    @each $variant,
+    $value in $border_variants {
+      &-#{$variant} {
+        border: 1px solid $value;
+        color: map-get($icon_variants, $variant);
+        background-color: transparent;
+      }
+    }
+  }
+}

package/src/assets/styles/components/_file-upload.scss

@@ -0,0 +1,164 @@
+.file-upload {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--size-8, 8px);
+
+  &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  &__drop-area {
+    display: flex;
+    padding: var(--spacing-3xl);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xl);
+    width: 100%;
+
+    border-radius: var(--radius-4, 4px);
+    // border: 1px dashed var(--colors-border-primary);
+    background: var(--colors-gray-neutral-50);
+    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23D2D6DBFF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e");
+  }
+
+  &__icon {
+    font-size: 32px;
+    color: var(--colors-gray-neutral-500);
+    display: flex;
+    align-items: center;
+  }
+
+  &__content {
+    text-align: center;
+  }
+
+  &__instructions {
+    @extend .text-md-regular;
+    color: var(--colors-text-secondary);
+  }
+
+  &__formats {
+    @extend .text-sm-regular;
+    color: var(--colors-text-tertiary);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-xs);
+    border: 1px solid var(--colors-gray-neutral-300);
+    background: var(--colors-gray-neutral-100);
+  }
+
+  &__file {
+    &-item,
+    &-item--error {
+      display: flex;
+      align-items: center;
+      border-radius: var(--radius-xs);
+      border: 1px solid var(--colors-gray-neutral-300);
+      background: var(--colors-gray-neutral-100);
+      padding: var(--spacing-md);
+      gap: 8px;
+      width: 100%;
+
+      &--error {
+        border-color: var(--colors-error-600);
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+        overflow: hidden;
+        gap: 0;
+
+        & .file-upload__file-item {
+          border-radius: 0;
+          border: 0;
+          border-bottom: 1px solid var(--colors-gray-neutral-300);
+
+          &-msg {
+            display: flex;
+            width: 100%;
+            color: var(--colors-text-error-primary);
+            @extend .text-sm-regular;
+            padding: var(--spacing-md);
+            align-items: flex-start;
+            gap: 8px;
+          }
+        }
+      }
+    }
+
+    &-status {
+      &--complete,
+      &--error {
+        font-size: 28px;
+        display: flex;
+        align-items: center;
+      }
+
+      &--complete {
+        color: var(--colors-brand-600);
+      }
+
+      &--error {
+        color: var(--colors-error-600);
+      }
+    }
+
+    &-name {
+      color: var(--Colors-Gray-neutral-950);
+      @extend .text-sm-medium;
+      overflow: hidden;
+      white-space: nowrap;
+      flex: 1;
+    }
+  }
+
+  &__files-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  &--drag-over {
+    & .file-upload__drop-area {
+      background-color: var(--colors-brand-50);
+      background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%231B8354FF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e");
+    }
+
+    & .file-upload__icon {
+      color: var(--colors-brand-600);
+    }
+
+    & .file-upload__instructions {
+      color: var(--colors-text-brand-primary);
+    }
+
+    & .file-upload__formats {
+      color: var(--colors-text-brand-primary);
+    }
+  }
+
+  &--disabled {
+    & .file-upload__drop-area {
+      background-color: var(--colors-base-white);
+    }
+
+    & .file-upload__icon,
+    & .file-upload__instructions,
+    & .file-upload__formats {
+      color: var(--colors-gray-neutral-300);
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+.dga-ico {
+  font-style: normal;
+}

package/src/assets/styles/components/_inline-alert.scss

@@ -0,0 +1,166 @@
+.alert {
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-xl) var(--spacing-3xl);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xl);
+  border-radius: var(--radius-md);
+  background: var(--colors-base-white);
+  border: 1px solid var(--colors-gray-neutral-300);
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 8px;
+    left: 0;
+    top: 0;
+    background-color: var(--colors-error-400);
+    position: absolute;
+  }
+
+  &__close-btn {
+    position: absolute;
+    top: var(--spacing-xl);
+    right: var(--spacing-3xl);
+
+    @include responsive(phone) {
+      right: var(--spacing-xl);
+    }
+  }
+
+  &__header {
+    display: flex;
+    padding: var(--spacing-none);
+    align-items: flex-start;
+    gap: var(--spacing-lg);
+  }
+
+  &__title {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  &__action {
+    padding: var(--spacing-none, 0px) var(--spacing-5xl, 40px);
+    gap: var(--spacing-md);
+
+    &-mobile {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    @include responsive(phone) {
+      display: none;
+
+      &-mobile {
+        display: flex;
+      }
+    }
+  }
+
+  @include responsive(phone) {
+    width: 100%;
+    padding: var(--spacing-xl);
+
+    &::after {
+      width: 100%;
+      height: 8px;
+    }
+
+    &__header {
+      flex-direction: column;
+      gap: var(--spacing-xl);
+    }
+  }
+
+  &--neutral {
+    &::after {
+      background-color: var(--colors-base-white);
+    }
+  }
+
+  &--info {
+    &::after {
+      background-color: var(--colors-info-400);
+    }
+  }
+
+  &--error {
+    &::after {
+      background-color: var(--colors-error-400);
+    }
+  }
+
+  &--warning {
+    &::after {
+      background-color: var(--colors-warning-400);
+    }
+  }
+
+  &--success {
+    &::after {
+      background-color: var(--colors-success-400);
+    }
+  }
+
+  //
+  &--neutral-bg {
+    background-color: var(--colors-gray-neutral-25);
+    border-color: var(--colors-gray-neutral-300);
+
+    &::after {
+      background-color: var(--colors-gray-neutral-25);
+    }
+  }
+
+  &--info-bg {
+    background-color: var(--colors-info-25);
+    border-color: var(--colors-info-300);
+
+    &::after {
+      background-color: var(--colors-info-400);
+    }
+  }
+
+  &--error-bg {
+    background-color: var(--colors-error-25);
+    border-color: var(--colors-error-300);
+
+    &::after {
+      background-color: var(--colors-error-400);
+    }
+  }
+
+  &--warning-bg {
+    background-color: var(--colors-warning-25);
+    border-color: var(--colors-warning-300);
+
+    &::after {
+      background-color: var(--colors-warning-400);
+    }
+  }
+
+  &--success-bg {
+    background-color: var(--colors-success-25);
+    border-color: var(--colors-success-300);
+
+    &::after {
+      background-color: var(--colors-success-400);
+    }
+  }
+}
+
+:is(html[lang="ar"], html[dir="rtl"]) .alert__close-btn {
+  right: auto;
+  left: var(--spacing-3xl);
+
+  @include responsive(phone) {
+    right: auto;
+    left: var(--spacing-xl);
+  }
+}