Andal.LND/frontend-component-header
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added support Paragon design tokens (#351)

Browse Source 
Co-authored-by: Diana Catalina Olarte <diana.olarte@edunext.co>
This commit is contained in:
Peter Kulko
2025-03-18 09:41:04 -07:00
committed by GitHub
parent 8d46de8fe3
commit 7970561181
8 changed files with 4983 additions and 1891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -9,4 +9,4 @@ module.config.js
.idea/
.vscode
src/i18n/messages
src/i18n/messages

6
example/index.scss
View File

@@ -1,6 +1,4 @@
@import "@edx/brand/paragon/fonts";
@import "@edx/brand/paragon/variables";
@import "@openedx/paragon/scss/core/core";
@import "@edx/brand/paragon/overrides";
@use "@openedx/paragon/dist/core.min.css" as paragonCore;
@use "@openedx/paragon/dist/light.min.css" as paragonLight;
@import "@edx/frontend-component-header/index";

6779
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -35,10 +35,10 @@
"devDependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/browserslist-config": "^1.1.1",
"@edx/frontend-platform": "8.3.1",
"@edx/frontend-platform": "^8.3.1",
"@edx/reactifex": "^2.1.1",
"@openedx/frontend-build": "14.2.2",
"@openedx/paragon": "22.16.0",
"@openedx/paragon": "^23.0.0",
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "10.4.9",
@@ -60,7 +60,7 @@
"@fortawesome/free-regular-svg-icons": "6.6.0",
"@fortawesome/free-solid-svg-icons": "6.6.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@openedx/frontend-plugin-framework": "^1.3.0",
"@openedx/frontend-plugin-framework": "^1.6.0",
"axios-mock-adapter": "1.22.0",
"babel-polyfill": "6.26.0",
"classnames": "^2.5.1",
@@ -70,7 +70,7 @@
},
"peerDependencies": {
"@edx/frontend-platform": "^7.0.0 || ^8.0.0",
"@openedx/paragon": "^22.0.0",
"@openedx/paragon": ">= 22.0.0 < 24.0.0",
"prop-types": "^15.5.10",
"react": "^16.9.0 || ^17.0.0",
"react-dom": "^16.9.0 || ^17.0.0",

12
src/Menu/menu.scss
View File

@@ -1,45 +1,45 @@
.menu {
position: relative;
}
.menu-content {
position: absolute;
top: 100%;
z-index: 10;
background: #fff;
background: var(--pgn-color-white, #fff);
min-width: 10rem;
&.pin-left {
left: 0;
}
&.pin-right {
right: 0;
}
}
.menu-dropdown-enter {
opacity: 0;
transform-origin: 75% 0;
transform: scale3d(0.8, 0.8, 1);
}
.menu-dropdown-enter-active {
transform-origin: 75% 0;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
.menu-dropdown-enter-done {
}
.menu-dropdown-exit {
transform-origin: 75% 0;
transform: scale3d(1, 1, 1);
opacity: 1;
}
.menu-dropdown-exit-active {
transform-origin: 75% 0;
transform: scale3d(0.8, 0.8, 1);
transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
opacity: 0;
}
.menu-dropdown-exit-done {
}

51
src/index.scss
View File

@@ -1,6 +1,9 @@
$spacer: 1rem;
$blue: #007db8;
$white: #fff;
$component-active-bg: #0A3055FF !default;
$component-active-color: $white !default;
$rounded-pill: 50rem !default;
@import './Menu/menu.scss';
@import './studio-header/StudioHeader.scss';
@@ -21,8 +24,9 @@ $white: #fff;
padding: .75rem;
justify-content: center;
align-items:center;
&:hover, &:focus {
background: rgba(0,0,0,.1);
background: rgba(0, 0, 0, .1);
}
}
@@ -36,17 +40,12 @@ $white: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 0.1rem;
padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
}
}
.user-dropdown {
.btn {
height: 3rem;
// @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
// padding: 0 0.5rem;
// }
}
.user-dropdown .btn {
height: 3rem;
}
}
@@ -63,6 +62,7 @@ $white: #fff;
text-decoration: none;
cursor: pointer;
}
img {
height: 1.5rem;
}
@@ -70,19 +70,22 @@ $white: #fff;
.site-header-desktop {
box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
background: $white;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
background: var(--pgn-color-white, $white);
.nav-link {
text-decoration: none;
}
.logo {
display: block;
box-sizing: content-box;
position: relative;
top: -.05em;
height: 1.75rem;
padding: 1rem 0;
margin-right: 1rem;
padding: var(--pgn-spacing-spacer-base, $spacer) 0;
margin-right: var(--pgn-spacing-spacer-base, $spacer);
img {
display: block;
height: 100%;
@@ -93,38 +96,42 @@ $white: #fff;
.nav-link:focus,
.nav-link.active,
.expanded .nav-link {
background: $component-active-bg;
color: $component-active-color;
background: var(--pgn-color-bg-active, $component-active-bg);
color: var(--pgn-color-active, $component-active-color);
}
}
.main-nav {
.nav-link {
padding: 1.125rem 1rem;
padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
text-decoration: none;
font-weight: 500;
letter-spacing: .01em;
}
.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.expanded .nav-link {
background: $component-active-bg;
color: $component-active-color;
background: var(--pgn-color-bg-active, $component-active-bg);
color: var(--pgn-color-active, $component-active-color);
}
.menu {
position: static;
.menu-content {
border-top: solid 2px $component-active-bg;
border-top: solid 2px var(--pgn-color-bg-active);
left: 0;
right: 0;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
padding: 1rem;
padding: var(--pgn-spacing-spacer-base, $spacer);
}
}
}
.search-input {
border-radius: $rounded-pill;
border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
}
}

12
src/studio-header/StudioHeader.scss
View File

@@ -7,10 +7,10 @@ $white: #FFFFFF;
height: 3.75rem;
box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
background: $white;
background: var(--pgn-color-white, $white);
.btn-outline-primary {
border-color: $white;
border-color: var(--pgn-color-white, $white);
}
.logo {
@@ -19,8 +19,8 @@ $white: #FFFFFF;
position: relative;
top: -.05em;
height: 1.75rem;
padding: $spacer 0;
margin-right: $spacer;
padding: var(--pgn-spacing-spacer-base, $spacer) 0;
margin-right: var(--pgn-spacing-spacer-base, $spacer);
img {
display: block;
@@ -33,13 +33,13 @@ $white: #FFFFFF;
@media only screen and (min-width: 769px) {
padding: .5rem;
padding-right: $spacer;
padding-right: var(--pgn-spacing-spacer-base, $spacer);
border-right: 1px solid #E5E5E5;
width: 70%;
}
span {
color: #333333;
color: var(--pgn-color-gray-800, #333333);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

4
webpack.dev.config.js
View File

@@ -2,7 +2,9 @@ const path = require('path');
const { createConfig } = require('@openedx/frontend-build');
module.exports = createConfig('webpack-dev', {
entry: path.resolve(__dirname, 'example'),
entry: {
app: path.resolve(__dirname, 'example'),
},
output: {
path: path.resolve(__dirname, 'example/dist'),
publicPath: '/',