platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,127 +0,0 @@
-$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

@@ -1,164 +0,0 @@
-.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

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

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

@@ -1,166 +0,0 @@
-.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);
-  }
-}