Skip to content
This repository was archived by the owner on Nov 29, 2023. It is now read-only.

Commit 19552e6

Browse files
authored
DX-2818 Update Redoc CSS to Use classNames (#823)
* DX-2818 Update Redoc CSS to Use classNames * use new bw-redoc package * spacing in custom.css * Sass (#825) * Switch to Sass * switch to scss for some easy ones first * featurePanel scss * Fix carousel and add mixins * implement mixins for previously fixed files * fix docs about page * fix landing page * fix sdk page * major refactor of all css for sass * fix footer css and styling * use mixin utils properly * fix redoc css * fix markdown css * fix footer and classnames * classNames * fix code snippet render bug for chi and standardize classNames * newlines at eof * restructure to use sass variables * finish moving/organizing everything * start applying sass principles * finalize everything * fix navbar tests * revert messaging spec * fix css from review comments
1 parent 20f5a79 commit 19552e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+1932
-1969
lines changed

site/cypress/e2e/tests/navbar.cy.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ context('Dev Docs Brand Logo/Link', () => {
4848
})
4949

5050
context('Github Link', () => {
51-
extLinkTester('/','a.navbar__item.navbar__link.header-github-link.bw-link', 'https://github.com/Bandwidth')
51+
extLinkTester('/','a.navbar__item.navbar__link.github-link', 'https://github.com/Bandwidth')
5252
})
5353

5454
context('Postman Link', () => {
55-
extLinkTester('/','a.navbar__item.navbar__link.header-postman-link.bw-link', 'https://www.postman.com/bandwidth')
55+
extLinkTester('/','a.navbar__item.navbar__link.postman-link', 'https://www.postman.com/bandwidth')
5656
})
5757

5858
context('Login Link', () => {
59-
extLinkTester('/','a.navbar__item.navbar__link.header-login-link', 'https://www.bandwidth.com/login/')
59+
extLinkTester('/','a.navbar__item.navbar__link.login-link', 'https://www.bandwidth.com/login/')
6060
})

site/cypress/utils/utils.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export const testCarousel = (path, length, title) => {
196196
var initialOffset = length * 2 * slideWidth;
197197
var rollOverOffset = initialOffset - ((length - 1) * slideWidth);
198198
it('validates the carousel content', () => {
199-
cy.get('[data-cy="header"]').should('have.text', `${title}`);
199+
cy.get('[data-cy="carouselHeader"]').should('have.text', `${title}`);
200200
cy.get('[data-cy="carouselSlides"]').children().should('have.length', length * 4);
201201
cy.get(`:nth-child(${startIndex}) > [data-cy="item"] > [data-cy="image"]`).should('be.visible');
202202
cy.get(`:nth-child(${startIndex}) > [data-cy="item"] > [data-cy="categories"]`).should('not.be.empty');

site/docs/account/dashboard-setup.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Your Sub-account contains a unique Site ID, you will need to reference this for
5858
### Sub-Account Fields
5959
![Sub-Account Fields](@site/static/img/docs-diagrams/account/setup-subaccount-fields.png)
6060
<br/>
61-
<div className="tableCenter">
61+
<div className="table-center">
6262

6363
| Field Name | Mandatory | Description |
6464
|:----------------|:---------:|:---------------------------------------------------------------------------|
@@ -101,7 +101,7 @@ To begin using your Bandwidth Dashboard phone numbers for Voice APIs, create a V
101101
#### Voice Application Fields
102102
![Voice Application Fields](@site/static/img/docs-diagrams/account/setup-voice-application-fields.png)
103103
<br/>
104-
<div className="tableCenter">
104+
<div className="table-center">
105105

106106
| Field Name | Mandatory | Description |
107107
|:-------------------------------|:---------:|:-----------------------------------------------------------------------------------------------------------------------------------|
@@ -139,7 +139,7 @@ To begin using your Bandwidth Dashboard numbers for Messaging APIs, create a Mes
139139
#### Messaging Application Fields
140140
![Messaging Application Fields](@site/static/img/docs-diagrams/account/setup-messaging-application-fields.png)
141141
<br/>
142-
<div className="tableCenter">
142+
<div className="table-center">
143143

144144
| Field Name | Mandatory | Description |
145145
|:-----------------------------------|:---------:|:-----------------------------------------------------------------------------------------------------------------|
@@ -183,7 +183,7 @@ Link your Application with a Location:
183183
### Location Fields
184184
![Location Fields](@site/static/img/docs-diagrams/account/setup-location-fields.png)
185185
<br/>
186-
<div className="tableCenter">
186+
<div className="table-center">
187187

188188
| Field Name | Mandatory | Description |
189189
|:--------------------------|:--------------------:|:-----------------------------------------------------------------------------------------------------------------|

site/docusaurus.config.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,17 +86,17 @@ module.exports = {
8686
}, {
8787
href: 'https://github.com/Bandwidth',
8888
position: 'right',
89-
className: 'header-github-link bw-link',
89+
className: 'github-link',
9090
title: 'Github Organization'
9191
}, {
9292
href: 'https://www.postman.com/bandwidth', // TODO: update with real postman url
9393
position: 'right',
94-
className: 'header-postman-link bw-link',
94+
className: 'postman-link',
9595
title: 'Postman Collection'
9696
}, {
9797
href: 'https://www.bandwidth.com/login/',
9898
position: 'right',
99-
className: 'header-login-link',
99+
className: 'login-link',
100100
title: 'Login'
101101
}]
102102
},
@@ -119,7 +119,7 @@ module.exports = {
119119
editUrl: 'https://github.com/Bandwidth/api-docs/edit/main/site/',
120120
},
121121
theme: {
122-
customCss: require.resolve('./src/css/custom.css'),
122+
customCss: require.resolve('./src/css/main.scss'),
123123
},
124124
googleAnalytics: {
125125
trackingID: 'UA-62651840-1',
@@ -174,6 +174,7 @@ module.exports = {
174174
redocCodeBackground: '#263238',
175175
},
176176
plugins: [
177-
path.resolve(__dirname, 'redoc-plugin')
177+
path.resolve(__dirname, 'redoc-plugin'),
178+
'docusaurus-plugin-sass',
178179
],
179180
};

site/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,17 @@
2020
"@docusaurus/core": "^2.2.0",
2121
"@docusaurus/preset-classic": "^2.2.0",
2222
"@types/react": "^17.0.0",
23+
"bandwidth-redoc": "^1.0.0",
2324
"buffer": "^6.0.3",
2425
"core-js": "^3.1.4",
26+
"docusaurus-plugin-sass": "^0.2.2",
2527
"js-yaml": "^4.1.0",
2628
"mobx": "^6.3.0",
2729
"react": "^17.0.1",
2830
"react-dom": "^17.0.1",
2931
"react-is": "^18.1.0",
3032
"react-loadable": "*",
31-
"redoc": "^2.0.0-rc.77",
33+
"sass": "^1.56.1",
3234
"styled-components": "^5.2.3",
3335
"typescript": "^2.7",
3436
"webpack": "^5.0.0"

site/src/components/ApiReference.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { useColorMode } from '@docusaurus/theme-common';
3-
import { RedocStandalone } from 'redoc';
3+
import { RedocStandalone } from 'bandwidth-redoc';
44
import { lightTheme, darkTheme } from '@site/src/css/redocTheme';
55

66
const RedocConfig = (props) => {

site/src/components/BlueButton.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
2-
import blueButtonStyles from '@site/src/components/css/BlueButton.module.css';
32

43
export default function BlueButton({link, text}) {
54
return (
6-
<div className={blueButtonStyles.blueButton}>
5+
<div className="blue-button">
76
<a href={link} target="_blank" rel="noopener">{text}</a>
87
</div>
98
)

site/src/components/Carousel.js

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, { useEffect, useState, useMemo } from 'react';
2-
import carouselStyles from '@site/src/components/css/Carousel.module.css';
1+
import React, { useEffect, useState } from 'react';
32

43
export default function Carousel({itemList, title}) {
54

@@ -118,15 +117,15 @@ export default function Carousel({itemList, title}) {
118117
}
119118

120119
return (
121-
<div className={carouselStyles.slide} style={slideStyle}>
122-
<div className={carouselStyles.item} style={itemStyle} data-cy="item">
123-
<div className={carouselStyles.image} style={imageStyle} data-cy="image"></div>
124-
<div className={carouselStyles.categories} style={categoriesStyle} data-cy="categories">
120+
<div className="slide" style={slideStyle}>
121+
<div className="item" style={itemStyle} data-cy="item">
122+
<div className="image" style={imageStyle} data-cy="image"></div>
123+
<div className="categories" style={categoriesStyle} data-cy="categories">
125124
{categories.map((category, idx) => (
126125
<a href={categoryLinks[idx]} key={idx}>{category}</a>
127126
))}
128127
</div>
129-
<div className={carouselStyles.post} style={postStyle} data-cy="post">
128+
<div className="post" style={postStyle} data-cy="post">
130129
<a href={postLink}>{postTitle}</a>
131130
</div>
132131
</div>
@@ -135,27 +134,27 @@ export default function Carousel({itemList, title}) {
135134
}
136135

137136
return (
138-
<div className={carouselStyles.carouselContainer}>
139-
<div className={`${carouselStyles.decoration} ${carouselStyles.top}`}>
137+
<div className="carousel-container">
138+
<div className="top-amoeba">
140139
<Svg/>
141140
</div>
142-
<div className={carouselStyles.content}>
143-
<div className={carouselStyles.header} data-cy="header">{title}</div>
144-
<div className={carouselStyles.carouselContent} style={carouselContentStyle}>
145-
<div className={carouselStyles.carousel}>
146-
<div className={`${carouselStyles.carouselSlides} ${hasTransitionClass ? carouselStyles.transition :""}`} style={carouselSlidesStyle} data-cy="carouselSlides">
141+
<div className="content">
142+
<div className="carousel-header" data-cy="carouselHeader">{title}</div>
143+
<div className="carousel-content" style={carouselContentStyle}>
144+
<div className="carousel">
145+
<div className={`carousel-slides ${hasTransitionClass ? "transition" :""}`} style={carouselSlidesStyle} data-cy="carouselSlides">
147146
{newItemList.map((props, idx) => (
148147
<CarouselItem key={idx} {...props} index={idx}/>
149148
))}
150149
</div>
151-
<div className={`${carouselStyles.navButtons} ${navDisabled ? carouselStyles.disabled :""}`} style={navButtonsStyle}>
152-
<button className={carouselStyles.leftButton} onClick={() => scrollCarousel(currentIndex - 1)} style={buttonStyle} data-cy="leftButton"></button>
153-
<button className={carouselStyles.rightButton} onClick={() => scrollCarousel(currentIndex + 1)} style={buttonStyle} data-cy="rightButton"></button>
150+
<div className={`nav-buttons ${navDisabled ? "disabled" :""}`} style={navButtonsStyle}>
151+
<button className="left-button" onClick={() => scrollCarousel(currentIndex - 1)} style={buttonStyle} data-cy="leftButton"></button>
152+
<button className="right-button" onClick={() => scrollCarousel(currentIndex + 1)} style={buttonStyle} data-cy="rightButton"></button>
154153
</div>
155154
</div>
156155
</div>
157156
</div>
158-
<div className={`${carouselStyles.decoration} ${carouselStyles.bottom}`}>
157+
<div className="bottom-amoeba">
159158
<Svg/>
160159
</div>
161160
</div>

site/src/components/DocsDiagram.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useEffect, useState } from 'react';
2-
import docsAboutStyles from '@site/src/components/css/DocsAbout.module.css';
32

43
export default function DocsDiagram({description, Desktop, Mobile}) {
54

@@ -21,8 +20,8 @@ export default function DocsDiagram({description, Desktop, Mobile}) {
2120
}, [])
2221

2322
return (
24-
<div className={docsAboutStyles.diagram}>
25-
{description && <div className={docsAboutStyles.description}>{description}</div>}
23+
<div className="docs-diagram">
24+
{description && <div className="description">{description}</div>}
2625
{isDesktop ? <Desktop/> : <Mobile/>}
2726
</div>
2827
)

site/src/components/DocsFeatures.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
2-
import docsAboutStyles from '@site/src/components/css/DocsAbout.module.css';
32
import FeaturePanels from '@site/src/components/FeaturePanels.js';
43

54
export default function DocsFeatures({featuresText, panels}) {
65
return (
7-
<div className={docsAboutStyles.features}>
8-
<div className={docsAboutStyles.featuresText}>{featuresText}</div>
6+
<div className="docs-features">
7+
<div className="features-text">{featuresText}</div>
98
<FeaturePanels panels={panels}/>
109
</div>
1110
);

0 commit comments

Comments
 (0)