AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create symlink for node_modules in generateJson and buildRadar scripts

Browse Source
This commit is contained in:
dennis.ludwig
2021-06-17 14:18:23 +02:00
parent 33e36674f7
commit 3b0aab8f08
63 changed files with 5238 additions and 861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/QuadrantSection/QuadrantSection.tsx
View File

@@ -1,12 +1,17 @@
import React from 'react';
import { translate, rings, Ring, showEmptyRings } from '../../config';
import Badge from '../Badge/Badge';
import Link from '../Link/Link';
import ItemList from '../ItemList/ItemList';
import Flag from '../Flag/Flag';
import { Group } from '../../model';
import './quadrant-section.scss';
const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
import React from "react";
import { translate, rings, Ring, showEmptyRings } from "../../config";
import Badge from "../Badge/Badge";
import Link from "../Link/Link";
import ItemList from "../ItemList/ItemList";
import Flag from "../Flag/Flag";
import { Group } from "../../model";
import "./quadrant-section.scss";
const renderList = (
ringName: Ring,
quadrantName: string,
groups: Group,
big: boolean
) => {
const itemsInRing = groups[quadrantName][ringName] || [];
if (big) {
@@ -20,13 +25,13 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
}
return (
<div className='ring-list'>
<div className='ring-list__header'>
<div className="ring-list">
<div className="ring-list__header">
<Badge type={ringName}>{ringName}</Badge>
</div>
{itemsInRing.map((item) => (
<span key={item.name} className='ring-list__item'>
<Link className='link' pageName={`${item.quadrant}/${item.name}`}>
<span key={item.name} className="ring-list__item">
<Link className="link" pageName={`${item.quadrant}/${item.name}`}>
{item.title}
<Flag item={item} short />
</Link>
@@ -36,36 +41,58 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
);
};
const renderRing = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0)) {
const renderRing = (
ringName: Ring,
quadrantName: string,
groups: Group,
big: boolean
) => {
if (
!showEmptyRings &&
(!groups[quadrantName] ||
!groups[quadrantName][ringName] ||
groups[quadrantName][ringName].length === 0)
) {
return null;
}
return (
<div key={ringName} className='quadrant-section__ring'>
<div key={ringName} className="quadrant-section__ring">
{renderList(ringName, quadrantName, groups, big)}
</div>
);
};
export default function QuadrantSection({ quadrantName, groups, big = false }: { quadrantName: string; groups: Group; big?: boolean }) {
export default function QuadrantSection({
quadrantName,
groups,
big = false,
}: {
quadrantName: string;
groups: Group;
big?: boolean;
}) {
return (
<div className='quadrant-section'>
<div className='quadrant-section__header'>
<div className='split'>
<div className='split__left'>
<h4 className='headline'>{translate(quadrantName)}</h4>
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">{translate(quadrantName)}</h4>
</div>
{!big && (
<div className='split__right'>
<Link className='icon-link' pageName={`${quadrantName}`}>
<span className='icon icon--pie icon-link__icon' />
<div className="split__right">
<Link className="icon-link" pageName={`${quadrantName}`}>
<span className="icon icon--pie icon-link__icon" />
Zoom In
</Link>
</div>
)}
</div>
</div>
<div className='quadrant-section__rings'>{rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))}</div>
<div className="quadrant-section__rings">
{rings.map((ringName) =>
renderRing(ringName, quadrantName, groups, big)
)}
</div>
</div>
);
}

5
src/components/QuadrantSection/quadrant-section.scss
View File

@@ -1,4 +1,4 @@
@import '../../styles/sccs-vars.scss';
@import "../../styles/sccs-vars.scss";
.quadrant-section {
&__header {
@@ -18,7 +18,6 @@
@media (max-width: $until-md) {
flex-basis: 50%;
}
}
}
}