Merge pull request #33 from vtex/style/openapi-docs

style(rapidoc): add tag attributes and css styles to RapiDoc elements

src/pages/_app.tsx

@@ -2,6 +2,7 @@ import type { AppProps } from 'next/app'
 import { ThemeProvider } from '@vtex/brand-ui'
 
 import 'styles/global.css'
+import 'styles/rapidoc.css'
 import Footer from 'components/footer'
 import Header from 'components/header'
 

src/pages/docs/api-reference/[slug].tsx

@@ -6,6 +6,19 @@ interface Props {
 }
 
 const APIPage: NextPage<Props> = ({ slug }) => {
+  const rapidocstyle = {
+    width: '100%',
+    height: '100%',
+    marginTop: '5rem',
+    '--nav-get-color': '#38853C',
+    '--nav-put-color': '#D56A00',
+    '--nav-post-color': '#2978B5',
+    '--nav-delete-color': '#CC3D3D',
+    '--red': '#CC3D3D',
+    '--orange': '#D56A00',
+    '--green': '#2978B5',
+    '--blue': '#38853C',
+  }
   return (
     <>
       <Script
@@ -15,14 +28,29 @@ const APIPage: NextPage<Props> = ({ slug }) => {
 
       <rapi-doc
         spec-url={`/docs/api-reference/${slug}.json`}
+        style={rapidocstyle}
+        fill-request-fields-with-example={true}
         theme="light"
-        show-header={false}
         render-style="focused"
+        bg-color="#FFFFFF"
         nav-bg-color="#FFFFFF"
+        nav-hover-bg-color="#F8F7FC"
+        nav-hover-text-color="#000711"
+        show-method-in-nav-bar={true}
         primary-color="#142032"
         regular-font="VTEX Trust Variable"
-        style={{ height: '100%', width: '100%', marginTop: '5rem' }}
-      />
+        mono-font="VTEX Trust Variable"
+        load-fonts={false}
+        use-path-in-nav-bar={false}
+        nav-text-color="#4A596B"
+        nav-accent-color="#D71D55"
+        nav-item-spacing="relaxed"
+        on-nav-tag-click="expand-collapse"
+        schema-style="table"
+        schema-description-expanded={true}
+        show-info={true}
+        show-header={false}
+      ></rapi-doc>
     </>
   )
 }

src/styles/rapidoc.css

@@ -0,0 +1,89 @@
+rapi-doc::part(section-navbar) {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  background: #FFFFFF;
+  align-self: stretch;
+  margin: 0 15px 0 0;
+}
+
+rapi-doc::part(section-navbar-scroll) {
+  padding: 0px;
+  width: inherit;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-grow: 0;
+  gap: 11px;
+  overflow-y: scroll;
+  background: #FFFFFF;
+  align-self: stretch;
+}
+
+rapi-doc::part(section-main-content) {
+  background: #FFFFFF;
+  padding: 42px 64px;
+}
+
+rapi-doc::part(section-operations-in-tag) {
+  padding: 24px 0px;
+}
+
+rapi-doc::part(textbox), rapi-doc::part(textbox-param), rapi-doc::part(textarea), rapi-doc::part(textarea-param) {
+  /* Auto layout */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 8px 8px 12px;
+  position: static;
+  background: rgba(255, 255, 255, 0.0001);
+  border: 1px solid #B9B9B9;
+  box-sizing: border-box;
+  border-radius: 4px;
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+rapi-doc::part(btn) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px 16px;
+  border-radius: 4px;
+  background: #142032;
+  color: #FFFFFF;
+}
+
+rapi-doc::part(label-operation-path) {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  position: static;
+  width: auto;
+  height: 28px;
+  left: 0px;
+  top: 0px;
+  border: 1px solid #B9B9B9;
+  border-radius: 0px 4px 4px 0px;
+  margin: 4px 0px;
+}
+
+rapi-doc::part(label-operation-method) {
+  display: inline-flex;
+  flex-direction: row;
+  float: left;
+  align-items: center;
+  padding: 4px 8px;
+  position: static;
+  width: auto;
+  height: 28px;
+  left: 0px;
+  top: 0px;
+  border: 1px solid;
+  border-radius: 4px 0px 0px 4px;
+  margin: 4px 0px;
+}