platformscode-new-react 0.0.2 → 0.0.4

package/src/assets/styles/base/_utilities.scss

@@ -0,0 +1,260 @@
+// spacings
+$spacings: (
+  0,
+  2,
+  4,
+  8,
+  12,
+  16,
+  24,
+  32,
+  40,
+  48,
+  56,
+  64,
+  72,
+  80,
+  88,
+  96,
+  104,
+  112,
+  120
+);
+
+@each $value in $spacings {
+  .spacing-hor-#{$value} {
+    height: #{$value}px;
+  }
+
+  .spacing-vert-#{$value} {
+    width: #{$value}px;
+  }
+
+  .p-#{$value} {
+    padding: #{$value}px;
+  }
+
+  .px-#{$value} {
+    padding-inline: #{$value}px;
+  }
+
+  .py-#{$value} {
+    padding-block: #{$value}px;
+  }
+
+  .pl-#{$value} {
+    padding-left: #{$value}px;
+  }
+
+  .pr-#{$value} {
+    padding-right: #{$value}px;
+  }
+
+  .pt-#{$value} {
+    padding-top: #{$value}px;
+  }
+
+  .pb-#{$value} {
+    padding-bottom: #{$value}px;
+  }
+
+  .mx-#{$value} {
+    margin-inline: #{$value}px;
+  }
+
+  .my-#{$value} {
+    margin-block: #{$value}px;
+  }
+
+  .ml-#{$value} {
+    margin-left: #{$value}px;
+  }
+
+  .mr-#{$value} {
+    margin-right: #{$value}px;
+  }
+
+  .mt-#{$value} {
+    margin-top: #{$value}px;
+  }
+
+  .mb-#{$value} {
+    margin-bottom: #{$value}px;
+  }
+}
+
+$radiuses: (
+  small: 2,
+  medium: 4,
+  large: 8,
+  xlarge: 12,
+);
+
+@each $varient, $value in $radiuses {
+  // radius small
+  .radius-#{$varient} {
+    border-radius: #{$value}px;
+  }
+
+  .radius-#{$varient}-t {
+    border-radius: #{$value}px #{$value}px 0 0;
+  }
+
+  .radius-#{$varient}-tl {
+    border-radius: #{$value}px 0px 0 0;
+  }
+
+  .radius-#{$varient}-tr {
+    border-radius: 0px #{$value}px 0 0;
+  }
+
+  .radius-#{$varient}-b {
+    border-radius: 0 0 #{$value}px #{$value}px;
+  }
+
+  .radius-#{$varient}-bl {
+    border-radius: 0 0 #{$value}px 0px;
+  }
+
+  .radius-#{$varient}-br {
+    border-radius: 0 0 0px #{$value}px;
+  }
+}
+
+.radius-none {
+  border-radius: 0px;
+}
+
+.radius-circular {
+  border-radius: 100%;
+}
+
+// flexs
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-center-y {
+  display: flex;
+  align-items: center;
+}
+
+.flex-center-x {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-align-stretch {
+  align-items: stretch;
+}
+
+.flex-align-start {
+  align-items: flex-start;
+}
+
+.flex-align-end {
+  align-items: flex-end;
+}
+
+.flex-justify-end {
+  justify-content: flex-end;
+}
+
+.flex-justify-start {
+  justify-content: flex-start;
+}
+
+//text align
+$aligns: (right, left, center);
+
+@each $align in $aligns {
+  .text-#{$align} {
+    text-align: $align;
+  }
+}
+
+// shadows utilities
+.shadow-xs {
+  box-shadow: var(--shadow-xs);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.shadow-2xl {
+  box-shadow: var(--shadow-2xl);
+}
+
+.shadow-3xl {
+  box-shadow: var(--shadow-3xl);
+}
+
+// colors utilities
+
+// other utis
+.ver-divider {
+  width: 1px;
+  height: 48px;
+  background: hsla(var(--colors-alpha-black) / 20%);
+  margin-inline: var(--spacing-xl);
+}
+
+// responsive utils
+@include responsive(phone) {
+  .xs-hide {
+    display: none;
+  }
+}
+
+$position: (start, end, center, between, around);
+@each $position in $position {
+  .flex-justify-#{$position} {
+    justify-content: $position;
+  }
+}
+
+$align: (start, end, center, stretch);
+@each $align in $align {
+  .flex-align-#{$align} {
+    align-items: $align;
+  }
+}
+
+@mixin add-dynamic-class($key, $value) {
+  .#{$key}-#{$value} {
+    content: "#{$key}: #{$value}";
+  }
+}

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

@@ -0,0 +1,184 @@
+.accordion {
+  // background-color: #ccc;
+
+  &-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: inline-block;
+    width: 100%;
+
+    &__item {
+      &:last-child {
+        border-bottom: 1px solid var(--border-neutral-primary);
+      }
+    }
+  }
+}
+
+.accordion {
+  &-item {
+    border-top: 1px solid var(--border-neutral-primary);
+    width: 100%; //to be edited
+    min-width: 366px;
+    z-index: 1;
+    position: relative;
+
+    &__header {
+      display: flex;
+      padding: var(--spacing-xl);
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-xl);
+      cursor: pointer;
+      border: 2px solid transparent;
+      // transition: background .2s ease-in-out;
+
+      &:hover {
+        background: var(--button-background-neutral-hovered);
+        mix-blend-mode: multiply;
+      }
+    }
+
+    &__title {
+      color: var(--text-default);
+      width: 100%;
+      @extend .text-md-semibold;
+    }
+
+    &__arrow {
+      transition: transform 0.3s ease-in-out;
+      &,
+      & > dga-icon {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    &__body {
+      display: flex;
+      align-items: flex-start;
+      padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);
+      gap: var(--spacing-md);
+      color: var(--text-primary-paragraph);
+      @extend .text-md-regular;
+      max-height: 0;
+      overflow: hidden;
+      // will-change: max-height;
+      opacity: 0;
+      transition: all 0.3s ease-in-out;
+    }
+
+    &.active &__body {
+      padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);
+      opacity: 1;
+    }
+
+    &.active &__arrow {
+      transform: rotate(180deg);
+    }
+
+    &.focused &__header,
+    &__header:focus {
+      background-color: transparent;
+      border: 2px solid var(--border-black);
+      outline: none;
+      position: relative;
+      z-index: 1;
+    }
+
+    &__header:active {
+      background-color: var(--button-background-neutral-pressed);
+      outline: none;
+    }
+
+    &.disabled &__header:active,
+    &.disabled &__header:focus,
+    &.disabled &__header:hover {
+      background-color: transparent;
+      outline: none;
+      border: 2px solid transparent;
+    }
+
+    &.disabled &__title,
+    &.disabled &__arrow,
+    &.disabled &__arrow path,
+    //to be edited when add icons
+    &.disabled &__body {
+      color: var(--text-default-disabled) !important;
+      stroke: var(--text-default-disabled) !important; //to be edited when add icons
+    }
+
+    &--lg {
+      .accordion-item__header {
+        padding: var(--spacing-xl);
+      }
+
+      .accordion__body {
+      }
+    }
+
+    &--md {
+      .accordion-item__header {
+        padding: var(--spacing-lg) var(--spacing-xl);
+      }
+
+      .accordion__body {
+      }
+    }
+
+    &--sm {
+      .accordion-item__header {
+        padding: var(--spacing-md) var(--spacing-xl);
+      }
+
+      .accordion__body {
+      }
+    }
+
+    &--flush {
+      width: 100%;
+      position: relative;
+      border-top: 0;
+      /* Create the "cut" border effect */
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%);
+      }
+    }
+
+    &--icon-leading {
+      .accordion-item__body {
+        padding: 0 var(--spacing-none) 0 var(--spacing-6xl);
+      }
+
+      &.active .accordion-item__body {
+        padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl);
+      }
+    }
+  }
+}
+
+:is(html[lang='ar'], html[dir='rtl']) .accordion-item .accordion-item__body {
+  padding: 0 var(--spacing-xl) 0 var(--spacing-6xl);
+}
+
+:is(html[lang='ar'], html[dir='rtl']) .accordion-item--icon-leading .accordion-item__body {
+  padding: 0 var(--spacing-6xl) 0 var(--spacing-none);
+}
+
+:is(html[lang='ar'], html[dir='rtl']) .accordion-item.active .accordion-item__body {
+  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl);
+}
+
+:is(html[lang='ar'], html[dir='rtl']) .accordion-item--icon-leading.active .accordion-item__body {
+  padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none);
+}

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

@@ -0,0 +1,87 @@
+$avatar_sizes: (
+  120: (
+    'display-md-regular',
+    80,
+  ),
+  80: (
+    'display-sm-regular',
+    56,
+  ),
+  68: (
+    'text-xl-medium',
+    40,
+  ),
+  48: (
+    'text-md-medium',
+    32,
+  ),
+  40: (
+    'text-sm-semibold',
+    32,
+  ),
+  32: (
+    'text-xs-semibold',
+    24,
+  ),
+  24: (
+    'text-2xs-bold',
+    16,
+  ),
+);
+
+.avatar {
+  border-radius: var(--radius-full);
+  border: 2px solid var(--border-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--button-background-neutral-default);
+  overflow: hidden;
+
+  &--initials {
+    // border: 4px solid var(--colors-border-white, #FFF);
+  }
+
+  &--image {
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  &--icon {
+  }
+  &--square {
+    border-radius: var(--radius-8);
+  }
+
+  @each $size, $properties in $avatar_sizes {
+    $text: nth($properties, 1);
+    $icon_size: nth($properties, 2);
+
+    &--#{$size} {
+      width: #{$size}px;
+      height: #{$size}px;
+
+      @if ($size == 120) {
+        border-width: 4px;
+      }
+
+      & .avatar__text {
+        @extend .#{$text};
+        text-transform: uppercase;
+      }
+      & .avatar__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: #{$icon_size}px;
+        height: #{$icon_size}px;
+        & > * {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+@media only screen and (max-width: 768px) {
+  .breadcrumb {
+    justify-content: center;
+  }
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+
+  &-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-4, 4px);
+    color: var(--link-neutral);
+    cursor: pointer;
+    padding-right: var(--size-4, 4px);
+
+    &.active {
+      color: var(--text-default-disabled);
+    }
+
+    &:first-child {
+    }
+
+    &:not(:first-child) {
+      display: flex;
+      align-items: center;
+      // gap: 8px;
+    }
+    & .disabled-link {
+      cursor: not-allowed;
+      &:hover {
+        text-decoration: none;
+        & .link__label {
+          text-decoration: none;
+        }
+      }
+    }
+
+    &.ellipsis .link {
+      align-items: flex-end;
+    }
+  }
+
+  &-icon {
+    color: var(--text-default-disabled);
+    width: 16px;
+    height: 16px;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+:is(html[lang="ar"], html[dir="rtl"]) .breadcrumb-item:first-child {
+  padding-right: 0;
+  padding-left: 4px;
+}
+
+:is(html[lang="ar"], html[dir="rtl"]) .breadcrumb-icon {
+  transform: rotate(180deg);
+}