From 8298aa3aa1435bee2106e7b819978af169f20cc6 Mon Sep 17 00:00:00 2001 From: Rijad R Date: Fri, 19 May 2023 10:21:34 +0530 Subject: [PATCH 01/12] SCAL-156288 SCAL-156493 SCAL-156494 added back button hided left nav and integrated playgroun --- package.json | 1 + src/assets/styles/index.scss | 123 +++++++++-------- src/components/BackButton/index.tsx | 12 +- src/components/DevDocTemplate/index.tsx | 171 +++++++++++++++++++----- src/components/Search/index.scss | 2 +- src/components/Search/index.tsx | 60 ++++++--- src/configs/doc-configs.js | 4 + src/constants/uiConstants.ts | 3 + 8 files changed, 259 insertions(+), 117 deletions(-) diff --git a/package.json b/package.json index 01f6f7eb5..0ce47cb6a 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "jest": "^26.6.3", "jest-puppeteer": "^4.4.0", "jsdom": "^17.0.0", + "loadash": "^1.0.0", "node-sass": "^4.0.0", "prettier": "2.1.2", "puppeteer": "^7.0.1", diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 0035843d1..de49f530f 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -56,7 +56,6 @@ a { padding: 10px 25px; } - .d-inline-block { display: inline-block; } @@ -91,6 +90,14 @@ a { margin-top: $document-margin-top; } +.restApiWrapper { + height: 100%; +} + +.restApiWrapper iframe { + min-height: 100vh; +} + button { cursor: pointer; } @@ -104,7 +111,7 @@ button { } .bordered img { - border: 1px solid var(--border-color); + border: 1px solid var(--border-color); } .displayNone { @@ -118,8 +125,8 @@ button { /*Tags style start*/ .video { - width: 800px; - height: 600px; + width: 800px; + height: 600px; } .tag { @@ -151,7 +158,6 @@ button { border-color: $tip-color; } - .beta { border-radius: $beta-border-radius; display: inline-block; @@ -183,11 +189,11 @@ button { } .greyBackground { - background-color: #EAEDF2; + background-color: #eaedf2; } .greyDarkBackground { - background-color: #A5ACB9; + background-color: #a5acb9; } .orangeBackground { @@ -207,7 +213,7 @@ button { } .betaBackground { - background-color: #06BF7F; + background-color: #06bf7f; } /*Tags style end*/ @@ -222,7 +228,7 @@ button { width: 100%; padding: $padding-sm $padding-sm $padding-sm $padding-md; background-color: var(--announcement-block-color); - } +} .boxDiv { padding: 15px; @@ -237,10 +243,9 @@ button { } .container { - margin:0 0 30px 0; + margin: 0 0 30px 0; padding: 5px; width: auto; - } .homeHeader { @@ -252,12 +257,12 @@ button { } .homeHeaderText { - display: inline-block; - padding: 5px 5px 5px 20px; - width: 600px; - max-width: 33%; - margin: 0; - vertical-align: top; + display: inline-block; + padding: 5px 5px 5px 20px; + width: 600px; + max-width: 33%; + margin: 0; + vertical-align: top; } .homeBullet { @@ -273,14 +278,13 @@ button { color: $darkblue; } -.blockHome{ +.blockHome { border-top: 0.5px solid var(--border-color); border-bottom: 0.5px solid var(--border-color); margin: 20px 10px 5px 10px; - } -.blockHomeContent{ +.blockHomeContent { padding: 15px; display: inline-block; margin: 10px; @@ -316,7 +320,6 @@ button { margin: 5px auto; } - .boxBody { font-size: 13px; font-weight: $font-weight-normal; @@ -336,9 +339,9 @@ button { .boxAuto { border: 0.5px solid $disabledcolor; - height: auto; - width: 100%; - padding: 0 0 0 2px; + height: auto; + width: 100%; + padding: 0 0 0 2px; } .tableContainer { @@ -357,14 +360,13 @@ button { padding: 15px; } -summary.title { +summary.title { font-size: $font-size-summ-title; margin-top: $margin-sm; margin-left: 3px; font-weight: $font-weight-normal; line-height: $line-height-doc; color: var(--primary-color); - } .introTile { @@ -389,39 +391,36 @@ summary.title { margin: auto; padding: 10px; font-weight: $font-weight-bold; - } .cardBlockHeading { - margin-top: $margin-lg; - padding-bottom: $padding-sm; - border-bottom: 1px solid var(--border-color); - font-size: 26px; - font-weight: $font-weight-bold; - text-align: center; + margin-top: $margin-lg; + padding-bottom: $padding-sm; + border-bottom: 1px solid var(--border-color); + font-size: 26px; + font-weight: $font-weight-bold; + text-align: center; } - a.anchor { position: absolute; text-decoration: none; width: 1.75ex; margin-left: -1.5ex; visibility: hidden; - font-size: .8em; + font-size: 0.8em; font-weight: 400; padding-top: 0.05em; } - -.introCard { +.introCard { padding: 15px; display: inline-block; position: relative; height: 225px; max-height: 500px; width: 300px; - max-width:400px; + max-width: 400px; margin: 10px; box-shadow: var(--box-shadow); border-radius: 10px; @@ -430,8 +429,6 @@ a.anchor { } } - - /* Div box style end */ /*Scrollbar styling start*/ @@ -465,23 +462,23 @@ a.anchor { } .homeHeader { - width: 100%; - max-width: 100%; - } + width: 100%; + max-width: 100%; + } .documentWrapper { width: 100%; } .homeHeaderText { - width: 100%; - max-width: 100%; + width: 100%; + max-width: 100%; } .homeHeader { - width: 100%; + width: 100%; } .introTile { - height: 100%; - margin: 10px; + height: 100%; + margin: 10px; } .boxBody { font-size: 12px; @@ -495,23 +492,23 @@ a.anchor { } .homeBanner { - display: none; + display: none; } .homeHeader { - width: 100%; - max-width: 100%; + width: 100%; + max-width: 100%; } - .blockHome { - border: 0; - } + .blockHome { + border: 0; + } - .documentWrapper { - documentView { - padding-left: 5px; - } - } + .documentWrapper { + documentView { + padding-left: 5px; + } + } .containerWrapper { padding: 10px 10px 10px 12px; @@ -529,10 +526,10 @@ a.anchor { } .blockHome { - border: 0; + border: 0; } - .introCard { + .introCard { width: 100%; } @@ -549,8 +546,8 @@ a.anchor { margin: 5px; } .tableContainer { - overflow: scroll; -} + overflow: scroll; + } } @media screen and (max-width: $mobile-resolution-max) { diff --git a/src/components/BackButton/index.tsx b/src/components/BackButton/index.tsx index bc36b5fda..178685487 100644 --- a/src/components/BackButton/index.tsx +++ b/src/components/BackButton/index.tsx @@ -3,8 +3,16 @@ import { IconContext } from '@react-icons/all-files'; import { BsArrowLeft } from '@react-icons/all-files/bs/BsArrowLeft'; import './index.scss'; -const BackButton = (props: { title: string; backLink: string }) => ( -
+const BackButton = (props: { + title: string; + backLink: string; + customStyles: object; +}) => ( +