Skip to content

GitLab

Commit 9f25a186 authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

Merge branch 'react-refactor/kh-fixes' into 'master' 

React refactor/kh fixes

See merge request !37
parents a706aa6d 2e4608ac
Pipeline #155997 passed with stages
in 7 minutes
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 228 deletions
package.json
View file @ 9f25a186
{
"name": "embl-ebi-jobs",
"name": "embl-jobs",
"version": "0.1.0",
"license": "Apache-2.0",
"vfConfig": {
"vfName": "VF Boilerplate for React",
"vfNamespace": "vfreact-",
"vfName": "EMBL Jobs",
"vfNamespace": "embljobs-",
"vfComponentPath": "@visual-framework",
"vfBuildDestination": "./build/vf-generated-assets",
"vfThemePath": "@frctl/mandelbrot"
......@@ -22,7 +22,7 @@
"prepare": "husky install"
},
"dependencies": {
"@visual-framework/embl-breadcrumbs-lookup": "2.0.1",
"@visual-framework/embl-breadcrumbs-lookup": "^1.0.4",
"@visual-framework/embl-conditional-edit": "1.0.3",
"@visual-framework/embl-content-hub-loader": "1.0.9",
"@visual-framework/embl-content-meta-properties": "1.0.1",
......@@ -30,10 +30,10 @@
"@visual-framework/embl-grid": "2.1.2",
"@visual-framework/embl-logo": "1.2.0",
"@visual-framework/embl-notifications": "1.0.2",
"@visual-framework/vf-activity-group": "^1.0.0-alpha.11",
"@visual-framework/vf-activity-list": "^1.0.0-alpha.10",
"@visual-framework/vf-article-meta-information": "^1.1.1",
"@visual-framework/vf-activity-group": "1.0.0-alpha.11",
"@visual-framework/vf-activity-list": "1.0.0-alpha.10",
"@visual-framework/vf-analytics-google": "1.0.3",
"@visual-framework/vf-article-meta-information": "1.1.1",
"@visual-framework/vf-banner": "1.7.2",
"@visual-framework/vf-body": "1.2.0",
"@visual-framework/vf-box": "2.3.1",
......@@ -42,21 +42,23 @@
"@visual-framework/vf-card-container": "3.1.2",
"@visual-framework/vf-cluster": "1.0.2",
"@visual-framework/vf-code-example": "1.2.1",
"@visual-framework/vf-collapse": "^0.0.2",
"@visual-framework/vf-collapse": "0.0.2",
"@visual-framework/vf-config": "1.0.1-alpha.0",
"@visual-framework/vf-content": "1.5.3",
"@visual-framework/vf-core": "2.2.24",
"@visual-framework/vf-design-tokens": "3.4.1",
"@visual-framework/vf-details": "^1.1.1",
"@visual-framework/vf-details": "1.1.1",
"@visual-framework/vf-divider": "2.0.0",
"@visual-framework/vf-embed": "^1.1.2",
"@visual-framework/vf-explainer": "^0.0.2",
"@visual-framework/vf-embed": "1.1.2",
"@visual-framework/vf-explainer": "0.0.2",
"@visual-framework/vf-extensions": "1.0.0-rc.1",
"@visual-framework/vf-favicon": "1.0.2",
"@visual-framework/vf-flag": "1.0.0-alpha.1",
"@visual-framework/vf-font-plex-mono": "1.1.1",
"@visual-framework/vf-font-plex-sans": "1.1.1",
"@visual-framework/vf-footer": "^1.1.1",
"@visual-framework/vf-form__core": "1.1.2",
"@visual-framework/vf-footer": "1.1.1",
"@visual-framework/vf-form": "2.0.0-alpha.1",
"@visual-framework/vf-form__helper": "^3.0.0-alpha.0",
"@visual-framework/vf-global-header": "3.1.1",
"@visual-framework/vf-grid": "1.4.1",
"@visual-framework/vf-header": "2.0.2",
......@@ -67,62 +69,63 @@
"@visual-framework/vf-link": "2.0.0",
"@visual-framework/vf-link-list": "1.3.4",
"@visual-framework/vf-logo": "1.5.1",
"@visual-framework/vf-masthead": "^3.0.1",
"@visual-framework/vf-masthead": "3.0.1",
"@visual-framework/vf-navigation": "3.0.0-beta.1",
"@visual-framework/vf-news-container": "^1.0.0",
"@visual-framework/vf-news-container": "1.0.0",
"@visual-framework/vf-no-js": "1.0.1",
"@visual-framework/vf-page-header": "^1.1.2",
"@visual-framework/vf-pagination": "^1.0.1",
"@visual-framework/vf-page-header": "1.1.2",
"@visual-framework/vf-pagination": "1.0.1",
"@visual-framework/vf-polyfill-js": "1.0.0-alpha.1",
"@visual-framework/vf-profile": "^1.3.0",
"@visual-framework/vf-profile": "1.3.0",
"@visual-framework/vf-sass-config": "2.5.3",
"@visual-framework/vf-sass-utilities": "1.0.1",
"@visual-framework/vf-search": "2.0.0",
"@visual-framework/vf-section-header": "1.3.3",
"@visual-framework/vf-show-more": "^1.1.2",
"@visual-framework/vf-social-links": "^0.0.2",
"@visual-framework/vf-table": "^1.2.0-rc.0",
"@visual-framework/vf-show-more": "1.1.2",
"@visual-framework/vf-sidebar": "1.0.0-alpha.2",
"@visual-framework/vf-social-links": "0.0.2",
"@visual-framework/vf-stack": "2.1.1",
"@visual-framework/vf-summary": "1.4.2",
"@visual-framework/vf-summary-container": "1.0.0",
"@visual-framework/vf-table": "1.2.0-rc.0",
"@visual-framework/vf-tabs": "1.2.2",
"@visual-framework/vf-text": "1.0.2",
"@visual-framework/vf-tree": "^1.0.2",
"@visual-framework/vf-tree": "1.0.2",
"@visual-framework/vf-u-fullbleed": "1.2.2",
"@visual-framework/vf-utility-classes": "2.0.0",
"@visual-framework/vf-video": "^1.0.0-beta.1",
"@visual-framework/vf-video-container": "^1.0.0-beta.1",
"@visual-framework/vf-video-teaser": "^2.0.0",
"dayjs": "^1.10.4",
"@visual-framework/vf-video": "1.0.0-beta.1",
"@visual-framework/vf-video-container": "1.0.0-beta.1",
"@visual-framework/vf-video-teaser": "2.0.0",
"dayjs": "1.10.4",
"eslint": "latest",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-react": "7.23.2",
"gh-pages": "3.1.0",
"gulp": "4.0.2",
"gulp-autoprefixer": "7.0.1",
"gulp-babel": "8.0.0",
"gulp-better-rollup": "4.0.1",
"gulp-cssnano": "2.1.3",
"gulp-notify": "3.2.0",
"gulp-notify": "4.0.0",
"gulp-rename": "2.0.0",
"gulp-shell": "0.8.0",
"gulp-sourcemaps": "3.0.0",
"gulp-stylelint": "13.0.0",
"gulp-svgmin": "3.0.0",
"gulp-watch": "5.0.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"husky": "6.0.0",
"lint-staged": "11.0.0",
"list-stream": "2.0.0",
"lodash-es": "^4.17.21",
"node-sass": "4.9.4",
"prettier": "^2.2.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.5.2",
"lodash-es": "4.17.21",
"prettier": "2.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-helmet": "6.1.0",
"react-hook-form": "7.5.3",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"require-dir": "^1.2.0",
"rollup-plugin-includepaths": "0.2.4"
"require-dir": "1.2.0",
"rollup-plugin-includepaths": "0.2.4",
"sass": "1.32.13"
},
"eslintConfig": {
"extends": "react-app"
......@@ -140,11 +143,11 @@
]
},
"devDependencies": {
"@visual-framework/ebi-header-footer": "^2.0.2",
"@visual-framework/vf-form__input": "^3.0.0-alpha.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0"
"@visual-framework/ebi-header-footer": "2.0.3",
"@visual-framework/vf-form__input": "3.0.0-alpha.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-prettier": "3.4.0",
"husky": "6.0.0"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
......
public/index.html
View file @ 9f25a186
......@@ -47,65 +47,11 @@
/>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- CSS only -->
<link
rel="stylesheet"
href="https://assets.emblstatic.net/vf/v2.4.8/css/styles.css"
/>
<!-- JS -->
<script
defer
src="https://assets.emblstatic.net/vf/v2.4.8/scripts/scripts.js"
></script>
<link
rel="stylesheet"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css"
type="text/css"
media="all"
/>
<style>
.ebi-iframe-only .vf-content-hub-html, .ebi-iframe-only .embl-breadcrumbs-lookup{
display: none;
}
</style>
</head>
<body class="vf-body vf-stack">
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- embl-ebi global header -->
<link
rel="import"
href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=574&pattern=node-body&source=contenthub"
data-target="self"
data-embl-js-content-hub-loader
/>
<nav
class="vf-breadcrumbs embl-breadcrumbs-lookup"
aria-label="Breadcrumb"
data-embl-js-breadcrumbs-lookup
>
<div
class="vf-list vf-list--inline | vf-breadcrumbs__list | embl-breadcrumbs-lookup--ghosting"
></div>
</nav>
<div id="root"></div>
<!-- embl-ebi global footer -->
<!-- embl global footer -->
<link
rel="import"
href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=569&pattern=node-body&source=contenthub"
data-target="self"
data-embl-js-content-hub-loader
/>
<script
src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="
crossorigin="anonymous"
></script>
<!-- Google Analytics -->
<script>
......
src/app/App.scss
View file @ 9f25a186
......@@ -8,3 +8,23 @@
text-overflow: ellipsis;
white-space: normal;
}
// Temporary fix for bug with file paths and embl logo sass
.embl-logo {
background-image: url("https://assets.emblstatic.net/vf/v2.4.14/assets/embl-logo/assets/logo-medium.svg");
background-repeat: no-repeat;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 2rem;
text-decoration: none;
}
@media (min-width: 1025px) {
.embl-logo {
background-image: url("https://assets.emblstatic.net/vf/v2.4.14/assets/embl-logo/assets/logo.svg");
height: 3rem;
}
}
src/components/EmblBreadcrumbs.jsx 0 → 100644
View file @ 9f25a186
import React from "react";
import { emblBreadcrumbs } from "@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup";
export class EmblBreadcrumbs extends React.Component {
componentDidMount() {
// window.setTimeout(function() {
emblBreadcrumbs();
// }, 700);
}
render() {
return (
<nav className="vf-breadcrumbs embl-breadcrumbs-lookup" aria-label="Breadcrumb" data-embl-js-breadcrumbs-lookup>
<div className="vf-list vf-list--inline | vf-breadcrumbs__list | embl-breadcrumbs-lookup--ghosting"></div>
</nav>
);
}
}
src/components/EmblFooter.jsx 0 → 100644
View file @ 9f25a186
import React from "react";
import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader";
export class EmblFooter extends React.Component {
componentDidMount() {
// window.setTimeout(function() {
emblContentHub();
// }, 700);
}
render() {
return (
<link
rel="import"
href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=569&pattern=node-body&source=contenthub"
data-target="self"
data-embl-js-content-hub-loader
/>
);
}
}
src/components/EmblHeader.jsx 0 → 100644
View file @ 9f25a186
import React from "react";
export class EmblHeader extends React.Component {
render() {
return (
<link
rel="import"
href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=574&pattern=node-body&source=contenthub"
data-target="self"
data-embl-js-content-hub-loader
/>
);
}
}
src/components/Metadata.jsx
View file @ 9f25a186
......@@ -61,7 +61,7 @@ export function Metadata({ metadata = {}, page = {} }) {
{/* <!-- Content descriptors --> */}
{/* the people, groups and teams involved */}
<meta name="embl:who" content={embl_content_meta_properties.who} />
{/* at which EMBL sites the content appl */}
{/* at which EMBL sites the content applies */}
<meta name="embl:where" content={embl_content_meta_properties.where} />
{/* the activities covered */}
<meta name="embl:what" content={embl_content_meta_properties.what} />
......
src/components/Partners.jsx
View file @ 9f25a186
import React, { useEffect } from "react";
import { EmblCards } from "./EmblCards";
import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader.js";
// import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader.js";
import { EmblHeader } from "./EmblHeader";
import { EmblBreadcrumbs } from "./EmblBreadcrumbs";
import { EmblFooter } from "./EmblFooter";
export function Partners() {
useEffect(() => {
emblContentHub();
}, []);
// emblContentHub is done by EmblFooter
// useEffect(() => {
// emblContentHub();
// }, []);
return (
<>
<EmblHeader />
<EmblBreadcrumbs />
<section className="vf-intro" id="an-id-for-anchor">
<div>{/* empty */}</div>
......@@ -48,6 +54,7 @@ export function Partners() {
</div>
</section>
<EmblCards />
<EmblFooter />
</>
);
}
src/components/apply/Apply.jsx
View file @ 9f25a186
import { useEffect } from "react";
import { Helmet } from "react-helmet";
import { Link } from "react-router-dom";
import { EmblHeader } from "../EmblHeader";
import { EmblBreadcrumbs } from "../EmblBreadcrumbs";
import { EmblFooter } from "../EmblFooter";
export function Apply() {
useEffect(() => {
......@@ -9,6 +12,8 @@ export function Apply() {
return (
<>
<EmblHeader />
<EmblBreadcrumbs />
<section className="embl-grid embl-grid--has-centered-content">
<Helmet>
<script
......@@ -58,6 +63,11 @@ export function Apply() {
type="text/css"
href={process.env.PUBLIC_URL + "/assets/custom.css"}
/>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-1.12.3.min.js"
></script>
<script
type="text/javascript"
src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-application-form-namespaced.js"
......@@ -125,6 +135,7 @@ export function Apply() {
</div>
</div>
</section>
<EmblFooter />
</>
);
}
src/components/home/EMBLHome.js
View file @ 9f25a186
import React from "react";
import { EmblCards } from "../EmblCards";
import { EmblHeader } from "../EmblHeader";
import { EmblBreadcrumbs } from "../EmblBreadcrumbs";
import { EmblFooter } from "../EmblFooter";
import "./Home.scss";
import { Home } from "./Home";
export function EMBLHome() {
return (
<>
<React.Fragment>
<EmblHeader />
<EmblBreadcrumbs />
<section className="vf-hero | vf-u-fullbleed">
<div className="vf-hero__content | vf-box | vf-stack vf-stack--400">
{" "}
......@@ -81,6 +88,8 @@ export function EMBLHome() {
</article>
</section>
<EmblCards />
</>
<EmblFooter />
</React.Fragment>
);
}
src/components/job-details/JobDetails.jsx
View file @ 9f25a186
......@@ -11,8 +11,11 @@ import {
} from "../../helpers/date-helpers";
import { Link } from "react-router-dom";
import { Html } from "../Html";
import { VFCard } from "../../component-templates/VFCard";
// import { VFCard } from "../../component-templates/VFCard";
import { EmblCards } from "../EmblCards";
import { EmblHeader } from "../EmblHeader";
import { EmblBreadcrumbs } from "../EmblBreadcrumbs";
import { EmblFooter } from "../EmblFooter";
import { EBICards } from "../EBICards";
const shortcutLinks = [
......@@ -105,6 +108,9 @@ export function JobDetails() {
return (
<div>
{/* {JSON.stringify(currentJob)} */}
<EmblHeader />
<EmblBreadcrumbs />
<section
className="vf-intro"
id="intro"
......@@ -388,6 +394,7 @@ export function JobDetails() {
// general embl cards
<EmblCards />
)}
<EmblFooter />
</div>
);
}
......
src/components/job-list-filters/JobListFilters.jsx
View file @ 9f25a186
......@@ -58,7 +58,7 @@ export function JobListFilters({
}
return (
<form className="vf-form filters-form">
<form className="vf-form filters-form | vf-stack vf-stack--800">
{showLocations && (
<fieldset className="vf-form__fieldset | vf-stack vf-stack--400">
<legend className="vf-form__legend">Position location</legend>
......@@ -79,7 +79,7 @@ export function JobListFilters({
htmlFor={`location-checkbox-${index}`}
className="vf-form__label"
>
{locationTitle}({jobCount})
{locationTitle}{` `}({jobCount})
</label>
</div>
)
......
src/components/job-list/JobList.jsx
View file @ 9f25a186
......@@ -48,15 +48,7 @@ JobList.JobListItem = function JobListItem({ job }) {
at <span className="jplist-duty-station">EMBO</span> in Heidelberg
</>
) : (
<>
in{" "}
<span
className="jplist-duty-station"
dangerouslySetInnerHTML={{
__html: job.field_jobs_duty_station,
}}
></span>
</>
<>in {job.field_jobs_duty_station.replace(/<[^>]+>/g, "")}</>
)}
</p>
......
src/index.js
View file @ 9f25a186
......@@ -7,11 +7,6 @@ import * as serviceWorker from "./serviceWorker";
ReactDOM.render(<App />, document.getElementById("root"));
//app url contains /ebi/iframe - hide headers/footers
if (window && window.location.pathname === "/jobs/ebi/iframe") {
document.body.classList.add("ebi-iframe-only");
}
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
......
src/vf-components/vf-componenet-rollup/index.scss
View file @ 9f25a186
@import "package.variables.scss";
@import 'package.variables.scss';
/*
*
* styles.css
......@@ -7,20 +7,46 @@
* or follow the guide at github.com/visual-framework/vf-core
* to learn how to build custom and optimised CSS.
*/
/*! Component: #{map-get($componentInfo, 'name')}
* Version: #{map-get($componentInfo, 'version')}
/*
* Location: #{map-get($componentInfo, 'location')}
* VF Core version in use: #{map-get($componentInfo, 'vfCoreVersion')}
* Build time: #{map-get($componentInfo, 'buildTimeStamp')}
*/
@import "vf-sass-config/index.scss";
@import 'node_modules/@visual-framework/vf-sass-config/index.scss';
@import 'node_modules/@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss';
// Note, you can also do relative imports
// @import '../vf-sass-config/index.scss';
/* All Visual Framework Font components */
// @import 'vf-font-plex-mono/vf-font-plex-mono.scss';
// @import 'vf-font-plex-sans/vf-font-plex-sans.scss';
$vf-font-plex-mono-prefix: '../../../../assets';
@import 'node_modules/@visual-framework/vf-font-plex-mono/vf-font-plex-mono.scss';
// @import 'node_modules/@visual-framework/vf-font-plex-sans/vf-font-plex-sans.scss';
// @import 'node_modules/@visual-framework/vf-font-plex-sans/vf-font-plex-sans.scss';
// Here we're not making use of vf-core's Sass include paths, and there's an issue around
// Plex's nesting of assets, so we manually import each font weight.
// This is also an annoyance present in IBM Plex's distro https://www.npmjs.com/package/@ibm/plex
$vf-font-plex-sans-prefix: '../../../../assets';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/regular/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/_index.scss';
$vf-font-plex-sans-prefix: '../../../../../assets';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/italic/_index.scss';
html,
button {
......@@ -32,113 +58,112 @@ button {
/* Visual Framework content compatibility
* We put this first so it will have the least specificity
*/
@import "vf-content/vf-content.scss";
@import 'node_modules/@visual-framework/vf-content/vf-content.scss';
/* All Visual Framework grids */
// vf-grid-page is deprecated, use vf-body instead
// @import 'vf-grid-page/vf-grid-page.scss';
@import "vf-body/vf-body.scss";
@import "vf-grid/vf-grid.scss";
@import "vf-cluster/vf-cluster.scss";
@import "vf-stack/vf-stack.scss";
@import 'node_modules/@visual-framework/vf-body/vf-body.scss';
@import 'node_modules/@visual-framework/vf-grid/vf-grid.scss';
@import 'node_modules/@visual-framework/vf-cluster/vf-cluster.scss';
@import 'node_modules/@visual-framework/vf-stack/vf-stack.scss';
@import 'node_modules/@visual-framework/vf-flag/vf-flag.scss';
@import 'node_modules/@visual-framework/vf-sidebar/vf-sidebar.scss';
@import "embl-grid/embl-grid.scss";
@import 'node_modules/@visual-framework/embl-grid/embl-grid.scss';
/* All Visual Framework Elements */