platformscode-new-react 0.0.3 → 0.0.4

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

@@ -0,0 +1,294 @@
+.textarea {
+  display: inline-flex;
+  height: 40px;
+  width: 320px;
+  max-width: 332px;
+  min-width: 200px;
+  justify-content: flex-start;
+  border-radius: var(--radius-sm);
+  gap: var(--spacing-xs);
+  border: 1px solid var(--colors-gray-neutral-400);
+  background: var(--colors-base-white);
+  overflow: hidden;
+  position: relative;
+
+  &:hover {
+    border-color: var(--colors-gray-neutral-700);
+  }
+
+  &[data-error="true"] {
+    border-color: red;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0%;
+    height: 2px;
+    transform: translateX(-50%);
+    background-color: var(--colors-gray-neutral-950);
+    transition: width 0.2s ease-in-out;
+  }
+
+  &__field {
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    height: 100%;
+    width: 100%;
+    color: var(--colors-text-primary);
+    padding: var(--spacing-lg) var(--spacing-xl);
+    resize: none;
+    position: relative;
+    @extend .text-md-regular;
+
+    &::placeholder {
+      color: var(--colors-text-placeholder);
+      @extend .text-md-regular;
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  }
+
+  &__field--hidden-scrollbar ::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__field--hidden-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  &__field--resize {
+    resize: vertical;
+  }
+
+  &.focus {
+    @extend .shadow-md;
+
+    &::after {
+      width: 100%;
+    }
+  }
+
+  &.active {
+    &::after {
+      width: 50%;
+    }
+  }
+
+  &--readonly,
+  &--disabled {
+    &,
+    &:hover {
+      border-color: var(--colors-gray-neutral-300);
+      box-shadow: none !important;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    & .textarea__field {
+      &,
+      &::placeholder {
+        color: var(--colors-text-primary);
+      }
+    }
+  }
+
+  &--disabled {
+    & .textarea__field {
+      &,
+      &::placeholder {
+        color: var(--colors-gray-neutral-300);
+      }
+    }
+
+    & .textarea__icon span,
+    & .textarea__prefix--subtle-text,
+    & .textarea__prefix--solid-text {
+      color: var(--colors-gray-neutral-300);
+    }
+  }
+
+  &__icon {
+    // margin-right: var(--spacing-xs);
+    // margin-left: var(--spacing-xl);
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+
+    & span {
+      color: var(--colors-gray-neutral-700);
+      font-size: 20px;
+    }
+  }
+
+  &__feedback-icon {
+    height: fit-content;
+    display: inline-flex;
+    align-items: center;
+    // margin-left: var(--spacing-xs);
+    // margin-right: var(--spacing-xl);
+
+    position: absolute;
+    top: 12px;
+    right: 16px;
+
+    span {
+      font-size: 20px;
+      position: relative;
+      z-index: 0;
+    }
+
+    &--success {
+      color: var(--colors-brand-600);
+
+      & span::after {
+        background-color: var(--colors-brand-100);
+      }
+    }
+
+    &--error {
+      color: var(--colors-error-600);
+
+      & span::after {
+        background-color: var(--colors-error-100);
+      }
+    }
+
+    &--warning {
+      color: var(--colors-warning-600);
+
+      & span::after {
+        background-color: var(--colors-warning-100);
+      }
+
+      &-triangle {
+        color: var(--colors-warning-600);
+
+        & span::after {
+          width: 0 !important;
+          height: 0 !important;
+          transform: scale(1) !important;
+          border: 12px solid rgba(0, 0, 0, 0);
+          border-top: 0;
+          border-bottom: 20px solid var(--colors-warning-100);
+          border-radius: 0px !important;
+          left: -2px !important;
+          top: -1px !important;
+        }
+      }
+    }
+
+    &--ring {
+      & span::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        transform: scale(1.16);
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: var(--radius-full);
+        z-index: -1;
+      }
+    }
+  }
+
+  [dir="rtl"] &__feedback-icon {
+    right: auto;
+    left: 16px;
+  }
+
+  &__dropdown {
+    &-list {
+      @extend .dropdown__list !optional;
+    }
+
+    &-btn.open + &-list {
+      z-index: 2;
+      opacity: 1;
+      padding-block: var(--spacing-md);
+      max-height: 376px;
+      pointer-events: auto;
+      overflow-y: auto;
+    }
+  }
+
+  &--lighter {
+    border: 0;
+
+    &:hover {
+      border: 1px solid var(--colors-gray-neutral-400);
+    }
+
+    &.focus {
+      border: 1px solid var(--colors-gray-neutral-400);
+      background-color: var(--colors-base-white);
+    }
+
+    &.active {
+      border: 1px solid var(--colors-gray-neutral-400);
+      background-color: var(--colors-gray-neutral-100);
+    }
+  }
+
+  &--darker {
+    border: 0;
+    background-color: var(--colors-gray-neutral-50);
+
+    &:hover {
+      border: 1px solid var(--colors-gray-neutral-400);
+    }
+
+    &.focus {
+      border: 1px solid var(--colors-gray-neutral-400);
+      background-color: var(--colors-base-white);
+    }
+
+    &.active {
+      border: 1px solid var(--colors-gray-neutral-400);
+      background-color: var(--colors-gray-neutral-100);
+    }
+  }
+
+  &--error {
+    &,
+    &:hover {
+      outline-color: var(--colors-error-600);
+    }
+
+    &::after {
+      background-color: var(--colors-error-600);
+    }
+  }
+
+  &--lg {
+    height: auto;
+    min-height: 96px;
+
+    & .textarea__field {
+      &,
+      &::placeholder {
+        @extend .text-sm-regular;
+      }
+    }
+
+    &__feedback-icon {
+      span {
+        font-size: 20px;
+      }
+    }
+  }
+
+  &.disabled {
+    opacity: 0.6;
+  }
+}

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

@@ -0,0 +1,257 @@
+.tooltip {
+  width: fit-content;
+  position: relative;
+  z-index: 2;
+  &-main {
+    position: absolute;
+    width: 240px;
+    min-width: 160px;
+
+    @extend .shadow-lg;
+
+    border-radius: var(--radius-sm);
+    background: var(--tooltip-background-light);
+
+    &__wrapper {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tooltip-gap);
+      position: relative;
+      padding: var(--tooltip-padding);
+    }
+
+    &__icon {
+      font-size: 18px;
+      color: var(--icon-neutral);
+      display: flex;
+      align-items: center;
+    }
+
+    .flex-column {
+      gap: 4px;
+    }
+
+    &__content {
+      &__title {
+        color: var(--tooltip-text-heading-light);
+        @extend .text-xs-semibold;
+      }
+
+      &__helper-text {
+        color: var(--tooltip-text-paragraph-light);
+
+        @extend .text-xs-regular;
+      }
+    }
+
+    &__beak {
+      position: absolute;
+      left: 50%;
+      border-style: solid;
+
+      &[data-beak-direction='top-start'] {
+        left: 14px;
+        top: 0;
+        transform: translateY(-100%);
+        border-width: 0 6px 6px 6px;
+        border-color: transparent transparent var(--tooltip-background-light) transparent;
+      }
+
+      &[data-beak-direction='top-center'] {
+        left: 50%;
+        top: 0;
+        transform: translate(-50%, -100%);
+        border-width: 0 6px 6px 6px;
+        border-color: transparent transparent var(--tooltip-background-light) transparent;
+      }
+
+      &[data-beak-direction='top-end'] {
+        left: calc(100% - 14px);
+        top: 0;
+        transform: translateY(-100%);
+        border-width: 0 6px 6px 6px;
+        border-color: transparent transparent var(--tooltip-background-light) transparent;
+      }
+
+      &[data-beak-direction='right-start'] {
+        top: 8px;
+        left: 100%;
+        border-width: 6px 0 6px 6px;
+        border-color: transparent transparent transparent var(--tooltip-background-light);
+      }
+
+      &[data-beak-direction='right-center'] {
+        top: 50%;
+        left: 100%;
+        transform: translateY(-50%);
+        border-width: 6px 0 6px 6px;
+        border-color: transparent transparent transparent var(--tooltip-background-light);
+      }
+
+      &[data-beak-direction='right-end'] {
+        bottom: 0;
+        left: 100%;
+        transform: translateY(-8px);
+        border-width: 6px 0 6px 6px;
+        border-color: transparent transparent transparent var(--tooltip-background-light);
+      }
+
+      &[data-beak-direction='bottom-start'] {
+        left: 14px;
+        top: 100%;
+        border-width: 6px 6px 0px 6px;
+        border-color: var(--tooltip-background-light) transparent transparent transparent;
+      }
+
+      &[data-beak-direction='bottom-center'] {
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+        border-width: 6px 6px 0px 6px;
+        border-color: var(--tooltip-background-light) transparent transparent transparent;
+      }
+
+      &[data-beak-direction='bottom-end'] {
+        left: calc(100% - 14px);
+        top: 100%;
+        border-width: 6px 6px 0px 6px;
+        border-color: var(--tooltip-background-light) transparent transparent transparent;
+      }
+
+      &[data-beak-direction='left-start'] {
+        top: 8px;
+        left: -5px;
+        border-width: 6px 6px 6px 0px;
+        border-color: transparent var(--tooltip-background-light) transparent transparent;
+      }
+
+      &[data-beak-direction='left-center'] {
+        top: 50%;
+        left: -5px;
+        transform: translateY(-50%);
+        border-width: 6px 6px 6px 0px;
+        border-color: transparent var(--tooltip-background-light) transparent transparent;
+      }
+
+      &[data-beak-direction='left-end'] {
+        top: calc(100% - 14px);
+        left: -5px;
+        transform: translateY(-50%);
+        border-width: 6px 6px 6px 0px;
+        border-color: transparent var(--tooltip-background-light) transparent transparent;
+      }
+    }
+
+    &[data-direction='top'] {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 14px;
+    }
+
+    &[data-direction='left'] {
+      top: 50%;
+      right: 100%;
+      transform: translateY(-50%);
+      margin-right: 14px;
+    }
+
+    &[data-direction='bottom'] {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 14px;
+    }
+
+    &[data-direction='right'] {
+      top: 50%;
+      left: 100%;
+      transform: translateY(-50%);
+
+      margin-left: 14px;
+    }
+  }
+  &-item {
+    width: fit-content;
+    cursor: pointer;
+
+    @extend .text-md-regular;
+  }
+}
+
+.tooltip--light {
+  .tooltip-main {
+    background: var(--tooltip-background-light);
+  }
+}
+
+.tooltip[data-theme='dark'] .tooltip {
+  &-main {
+    background: var(--tooltip-background-dark);
+
+    &__icon {
+      color: var(--icon-oncolor);
+      fill: var(--icon-neutral);
+    }
+
+    &__content {
+      &__title {
+        color: var(--tooltip-text-heading-dark);
+      }
+
+      &__helper-text {
+        color: var(--tooltip-text-paragraph-dark);
+      }
+    }
+
+    &__beak {
+      &[data-beak-direction='top-start'] {
+        border-color: transparent transparent var(--tooltip-background-dark) transparent;
+      }
+
+      &[data-beak-direction='top-center'] {
+        border-color: transparent transparent var(--tooltip-background-dark) transparent;
+      }
+
+      &[data-beak-direction='top-end'] {
+        border-color: transparent transparent var(--tooltip-background-dark) transparent;
+      }
+
+      &[data-beak-direction='bottom-start'] {
+        border-color: var(--tooltip-background-dark) transparent transparent transparent;
+      }
+
+      &[data-beak-direction='bottom-center'] {
+        border-color: var(--tooltip-background-dark) transparent transparent transparent;
+      }
+
+      &[data-beak-direction='bottom-end'] {
+        border-color: var(--tooltip-background-dark) transparent transparent transparent;
+      }
+
+      &[data-beak-direction='left-start'] {
+        border-color: transparent var(--tooltip-background-dark) transparent transparent;
+      }
+
+      &[data-beak-direction='left-center'] {
+        border-color: transparent var(--tooltip-background-dark) transparent transparent;
+      }
+
+      &[data-beak-direction='left-end'] {
+        border-color: transparent var(--tooltip-background-dark) transparent transparent;
+      }
+
+      &[data-beak-direction='right-start'] {
+        border-color: transparent transparent transparent var(--tooltip-background-dark);
+      }
+
+      &[data-beak-direction='right-center'] {
+        border-color: transparent transparent transparent var(--tooltip-background-dark);
+      }
+
+      &[data-beak-direction='right-end'] {
+        border-color: transparent transparent transparent var(--tooltip-background-dark);
+      }
+    }
+  }
+}

package/src/assets/styles/layout/_footer.scss

@@ -0,0 +1,186 @@
+.footer {
+  // display: flex;
+  // max-width: 1327px;
+  padding: var(--spacing-none) var(--spacing-4xl);
+  // justify-content: center;
+  // align-items: flex-start;
+  background-color: var(--colors-gray-neutral-100);
+
+  &--bg-default {
+    background-color: var(--colors-gray-neutral-100);
+  }
+
+  &--bg-brand {
+    background-color: var(--colors-brand-900);
+  }
+
+  &-icon-section {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    a {
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 30px;
+    }
+  }
+  &-title-description {
+    max-width: var(--width-2xl);
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: space-between;
+    margin-block: var(--spacing-7xl);
+    h3 {
+      font-size: 72px;
+      font-weight: 700;
+      line-height: 90px;
+      letter-spacing: -1.44px;
+    }
+    p {
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 32px; /* 133.333% */
+    }
+  }
+  &-content {
+    display: flex;
+    // max-width: 1280px;
+    padding: var(--spacing-3xl, 24px) var(--spacing-none, 0px);
+
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__nav-links {
+    display: flex;
+    padding: var(--spacing-xl) var(--spacing-none);
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: var(--spacing-3xl);
+    align-self: stretch;
+    flex-wrap: wrap;
+    // border-bottom: 1px solid var(--colors-border-primary);
+    justify-content: space-around;
+    margin-bottom: var(--spacing-6xl);
+    & ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    &-column {
+      min-width: 180px;
+
+      &,
+      &-body {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md);
+      }
+
+      &-title {
+        color: var(--colors-text-primary);
+        @extend .text-lg-semibold;
+        display: flex;
+        padding-bottom: var(--spacing-md, 8px);
+        flex-direction: column;
+        align-items: flex-start;
+        border-bottom: 1px solid var(--colors-border-primary);
+      }
+
+      &-divider {
+      }
+
+      &-body {
+      }
+    }
+  }
+
+  &__nav-Link {
+  }
+
+  &__basic {
+    display: flex;
+    padding: var(--spacing-xl) var(--spacing-none);
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    // gap: var(--spacing-3xl);
+    width: 100%;
+    min-height: 106px;
+  }
+
+  &__actions-copyright {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xl);
+    flex: 1;
+
+    @include responsive(tab-port) {
+      flex: auto;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: var(--spacing-xl);
+    align-self: stretch;
+    flex-wrap: wrap;
+    list-style: none;
+  }
+  &__extra-actions {
+    display: flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: var(--spacing-xl);
+    align-self: stretch;
+    flex-wrap: wrap;
+    list-style: none;
+    li {
+      a {
+        span {
+          text-decoration: none;
+          //styleName: Text xs/Regular;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+
+  &__copyright {
+    color: var(--colors-text-primary);
+    margin-top: 40px;
+  }
+
+  &__logos {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+
+  &--bg-default {
+    background-color: var(--colors-gray-neutral-100);
+  }
+
+  &--bg-brand {
+    background-color: var(--colors-brand-900);
+
+    & .footer__nav-links-column-title {
+      color: var(--colors-text-primary_on-brand);
+      border-color: hsla(var(--colors-alpha-white) / 30%);
+    }
+
+    & .footer__copyright {
+      color: var(--colors-text-primary_on-brand);
+    }
+  }
+}