Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

testing: Using Paragon CSS External Hosting (JavaScript-based configuration) #707

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions env.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
module.exports = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this should be a temporary change and should be removed in the final implementation.

And I am not sure about merging it to the master branch directly. Probably, we should use some separate development brunch for pre-stage tasing and further releasing.

PARAGON_THEME_URLS: {
core: {
urls: {
default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css',
},
},
defaults: {
light: 'light',
dark: 'dark',
},
variants: {
light: {
urls: {
default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css',
},
},
dark: {
urls: {
default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css',
},
},
},
},
};
7,108 changes: 4,745 additions & 2,363 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"extends @edx/browserslist-config"
],
"scripts": {
"build": "fedx-scripts webpack",
"build": "sh run-build-for-gh-deps.sh",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, these seem to be temporary changes and should be reverted at release.

"i18n_extract": "fedx-scripts formatjs extract",
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
"lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
Expand Down
100 changes: 100 additions & 0 deletions run-build-for-gh-deps.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
#!/bin/bash

log() {
echo "=============================== $1 ==============================="
}

run_command() {
echo "\$ $1"
eval $1
}

log "Starting deployment script"
run_command "pwd"

# frontend-platform
log "Processing frontend-platform"
run_command "cd node_modules/@edx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-platform"
run_command "mkdir frontend-platform" || exit
run_command "ls -l"
run_command "git clone -b Peter_Kulko/design-tokens-support --single-branch https://github.com/raccoongang/frontend-platform.git frontend-platform-temp"
run_command "cd frontend-platform-temp" || exit
log "Current directory: $(pwd)"
run_command "cat package.json" || exit
run_command "ls -l"
run_command "cp -r dist/. ../frontend-platform/" || exit
run_command "cd .." || exit
run_command "ls -l"
log "Current directory: $(pwd)"
run_command "rm -rf frontend-platform-temp"
run_command "cd frontend-platform" || exit
run_command "ls -l"
run_command "cd ../../.."
log "Current directory: $(pwd)"

# frontend-build
log "Processing frontend-build"
run_command "cd node_modules/@openedx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-build"
run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-build.git"
run_command "cd frontend-build" || exit
log "Current directory: $(pwd)"
run_command "npm ci"
run_command "cd ../../.." || exit
log "Current directory: $(pwd)"

# paragon
log "Processing paragon"
run_command "ls -l"
run_command "cd node_modules/@openedx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf paragon"
run_command "mkdir -p paragon"
run_command "cd paragon" || exit
log "Current directory: $(pwd)"
run_command "npm pack @openedx/[email protected]"
run_command "tar -xzf openedx-paragon-23.0.0-alpha.2.tgz --strip-components=1"
run_command "rm openedx-paragon-23.0.0-alpha.2.tgz"
run_command "cd ../../.." || exit
log "Current directory: $(pwd)"

# frontend-component-header
log "Processing frontend-component-header"
run_command "cd node_modules/@edx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-component-header"
run_command "mkdir frontend-component-header" || exit
run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-header.git frontend-component-header-temp"
run_command "cd frontend-component-header-temp" || exit
log "Current directory: $(pwd)"
run_command "cp -r dist ../frontend-component-header/" || exit
run_command "cp -r package.json ../frontend-component-header/" || exit
run_command "cd .."
run_command "rm -rf frontend-component-header-temp"
run_command "cd ../.." || exit
log "Current directory: $(pwd)"

# frontend-component-footer
log "Processing frontend-component-footer"
run_command "cd node_modules/@edx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-component-footer"
run_command "mkdir frontend-component-footer" || exit
run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-footer.git frontend-component-footer-temp"
run_command "cd frontend-component-footer-temp" || exit
log "Current directory: $(pwd)"
run_command "cp -r dist ../frontend-component-footer/" || exit
run_command "cp -r package.json ../frontend-component-footer/" || exit
run_command "cd .."
run_command "rm -rf frontend-component-footer-temp"
run_command "cd ../.." || exit
log "Current directory: $(pwd)"

# webpack
log "Running webpack"
run_command "fedx-scripts webpack"

log "Deployment script finished."
17 changes: 6 additions & 11 deletions src/components/NavigationBar/navBar.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
@import "~@edx/brand/paragon/fonts.scss";
@import "~@edx/brand/paragon/variables.scss";
@import "~@openedx/paragon/scss/core/core.scss";
@import "~@edx/brand/paragon/overrides.scss";

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Expand All @@ -12,13 +7,13 @@ $fa-font-path: "~font-awesome/fonts";
.nav a,
.nav button {
&:hover {
background-color: $light-400;
background-color: var(--pgn-color-light-400);
}
}

.nav a {
&:not(.active):hover {
background-color: $light-400;
background-color: var(--pgn-color-light-400);
border-bottom: none;
}
}
Expand All @@ -30,7 +25,7 @@ $fa-font-path: "~font-awesome/fonts";
.nav-link {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
color: $gray-700;
color: var(--pgn-color-gray-700);

// temporary until we can remove .btn class from dropdowns
border-left: 0;
Expand All @@ -40,9 +35,9 @@ $fa-font-path: "~font-awesome/fonts";
&:hover,
&:focus,
&.active {
font-weight: $font-weight-normal;
color: $primary-500;
border-bottom-color: $primary-500;
font-weight: var(--pgn-typography-font-weight-normal);
color: var(--pgn-color-primary-500);
border-bottom-color: var(--pgn-color-primary-500);
}
}
}
2 changes: 1 addition & 1 deletion src/components/TinyMCEEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import 'tinymce/plugins/charmap';
import 'tinymce/plugins/paste';
/* eslint import/no-webpack-loader-syntax: off */
// eslint-disable-next-line import/no-unresolved
import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
import edxBrandCss from '!!raw-loader!../index.scss';
// eslint-disable-next-line import/no-unresolved
import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
// eslint-disable-next-line import/no-unresolved
Expand Down
2 changes: 1 addition & 1 deletion src/discussions/post-comments/comments/CommentsView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
variant="plain"
block="true"
className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
line-height-24 text-primary-500"
line-height-24 text-primary-500 bg-white"
onClick={handleAddResponse}
data-testid="add-response"
>
Expand Down
43 changes: 20 additions & 23 deletions src/index.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
@import "~@edx/brand/paragon/fonts.scss";
@import "~@edx/brand/paragon/variables.scss";
@import "~@openedx/paragon/scss/core/core.scss";
@import "~@edx/brand/paragon/overrides.scss";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

@import "~@edx/frontend-component-footer/dist/footer";
@import "~@edx/frontend-component-header/dist/index";
Expand Down Expand Up @@ -41,23 +38,23 @@ body,
}

.text-staff-color {
color: $warning-700;
color: var(--pgn-color-warning-700);
}

.outline-staff-color {
outline: $warning-700 solid 2px;
outline: var(--pgn-color-warning-700) solid 2px;
}

.text-TA-color {
color: $success-700;
color: var(--pgn-color-success-700);
}

.outline-TA-color {
outline: $success-700 solid 2px;
outline: var(--pgn-color-success-700) solid 2px;
}

.outline-anonymous {
outline: $light-400 solid 2px;
outline: var(--pgn-color-light-400) solid 2px;
}

.font-size-8 {
Expand Down Expand Up @@ -173,7 +170,7 @@ body,
}

.learner > a:hover {
background-color: $light-300;
background-color: var(--pgn-color-light-300);
}

.py-10px {
Expand Down Expand Up @@ -252,12 +249,12 @@ header {
}

.border-light-400-2 {
border: 2px solid $light-400 !important;
border: 2px solid var(--pgn-color-light-400) !important;
border-width: 2px !important;
}

.border-primary-500-2 {
border: 2px solid $primary-500 !important;
border: 2px solid var(--pgn-color-primary-500) !important;
border-width: 2px !important;
}

Expand Down Expand Up @@ -383,8 +380,8 @@ header {
}

.btn-icon.btn-icon-primary:hover {
background-color: $light-300 !important;
color: $primary-500 !important
background-color: var(--pgn-color-light-300) !important;
color: var(--pgn-color-primary-500) !important
}


Expand Down Expand Up @@ -427,38 +424,38 @@ header {
}

.hover-button:hover {
background-color: $light-300 !important;
background-color: var(--pgn-color-light-300) !important;
height: 36px !important;
border: none !important;
}

.btn-tertiary:hover {
background-color: $light-300 !important;
background-color: var(--pgn-color-light-300) !important;
}

.nav-button-group {
.nav-link {
&:hover {
background-color: $light-300 !important;
background-color: var(--pgn-color-light-300) !important;
}
}

.nav-link.active,
.show>.nav-link {
background-color: $primary-500 !important;
background-color: var(--pgn-color-primary-500) !important;
}
}

.course-tabs-navigation {
.nav a {
&:hover {
background-color: $light-300 !important;;
background-color: var(--pgn-color-light-300) !important;;
}
}
}

.btn-tertiary:disabled {
color: $gray-700 !important;
color: var(--pgn-color-gray-700) !important;
background-color: transparent !important;
}

Expand Down Expand Up @@ -535,14 +532,14 @@ code {
.post-preview,
.discussion-comments {
blockquote {
border-left: 2px solid $gray-200;
border-left: 2px solid var(--pgn-color-gray-200);
margin-left: 1.5rem;
padding-left: 1rem;
}
}

.add-comment-btn {
border: 1px solid $light-300 !important;
border: 1px solid var(--pgn-color-light-300) !important;
}

.icon-size-24 {
Expand Down Expand Up @@ -588,7 +585,7 @@ code {
}

th, td {
border: 1px dashed $gray-200;
border: 1px dashed var(--pgn-color-gray-200);
padding: 0.4rem;
white-space: nowrap;
}
Expand Down