diff --git a/client/src/pages/openalex-ror/components/ror-badge.jsx b/client/src/pages/openalex-ror/components/ror-badge.jsx index a73dadd..f2ecafe 100644 --- a/client/src/pages/openalex-ror/components/ror-badge.jsx +++ b/client/src/pages/openalex-ror/components/ror-badge.jsx @@ -1,62 +1,56 @@ -import { Link } from '@dataesr/dsfr-plus'; +import { Link, Tag } from '@dataesr/dsfr-plus'; import PropTypes from 'prop-types'; -export default function RorBadge({ ror, setFilteredAffiliationName, rorColor }) { - console.log(rorColor, getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`)); - +export default function RorBadge({ + isRemoved, + ror, + rorColor, + setFilteredAffiliationName, +}) { return ( -
- -
- ROR logo -
- https://ror.org/ - - {` ${ror.rorId}`} - -
+ type="button" + /> + + ); } RorBadge.propTypes = { + isRemoved: PropTypes.bool.isRequired, ror: PropTypes.shape({ rorId: PropTypes.string.isRequired, }).isRequired, - setFilteredAffiliationName: PropTypes.func.isRequired, rorColor: PropTypes.string.isRequired, + setFilteredAffiliationName: PropTypes.func.isRequired, }; diff --git a/client/src/pages/openalex-ror/components/ror-badge_old.jsx b/client/src/pages/openalex-ror/components/ror-badge_old.jsx new file mode 100644 index 0000000..a73dadd --- /dev/null +++ b/client/src/pages/openalex-ror/components/ror-badge_old.jsx @@ -0,0 +1,62 @@ +import { Link } from '@dataesr/dsfr-plus'; +import PropTypes from 'prop-types'; + +export default function RorBadge({ ror, setFilteredAffiliationName, rorColor }) { + console.log(rorColor, getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`)); + + return ( +
+ +
+ ROR logo +
+ https://ror.org/ + + {` ${ror.rorId}`} + +
+ ); +} + +RorBadge.propTypes = { + ror: PropTypes.shape({ + rorId: PropTypes.string.isRequired, + }).isRequired, + setFilteredAffiliationName: PropTypes.func.isRequired, + rorColor: PropTypes.string.isRequired, +}; diff --git a/client/src/pages/openalex-ror/components/ror-name.jsx b/client/src/pages/openalex-ror/components/ror-name.jsx new file mode 100644 index 0000000..d157285 --- /dev/null +++ b/client/src/pages/openalex-ror/components/ror-name.jsx @@ -0,0 +1,38 @@ +import PropTypes from 'prop-types'; + +export default function RorName({ isRemoved, ror }) { + return ( +
+ {`${ror.rorCountry} + + {isRemoved ? ( + + {ror.rorName} + + ) : ( + ror.rorName + )} + +
+ ); +} + +RorName.propTypes = { + isRemoved: PropTypes.bool.isRequired, + ror: PropTypes.shape({ + rorCountry: PropTypes.string.isRequired, + rorName: PropTypes.string.isRequired, + }).isRequired, +}; diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx index e3a4b18..df4a764 100644 --- a/client/src/pages/openalex-ror/results/list-view.jsx +++ b/client/src/pages/openalex-ror/results/list-view.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import WorksList from '../components/works-list'; import RorBadge from '../components/ror-badge'; +import RorName from '../components/ror-name'; export default function ListView({ allAffiliations, @@ -11,7 +12,8 @@ export default function ListView({ setSelectedOpenAlex, }) { const defineRorColor = []; - const dsColors = ['ror-1', 'ror-2', 'ror-3', 'ror-4', 'ror-5']; + // const dsColors = ['ror-1', 'ror-2', 'ror-3', 'ror-4', 'ror-5']; + const dsColors = ['green-archipel', 'purple-glycine', 'pink-tuile', 'green-menthe', 'brown-cafe-creme']; const rorCount = {}; allAffiliations.forEach((affiliation) => { affiliation.rors.forEach((ror) => { @@ -24,7 +26,6 @@ export default function ListView({ }); const sortedRor = Object.keys(rorCount).sort((a, b) => rorCount[b] - rorCount[a]); defineRorColor.push(...sortedRor.slice(0, 5).map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] }))); - console.log('defineRorColor', defineRorColor); return (