diff --git a/package-lock.json b/package-lock.json index 4374ec566..6f08731e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5321,9 +5321,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001549", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz", - "integrity": "sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==", + "version": "1.0.30001610", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz", + "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==", "dev": true, "funding": [ { diff --git a/spec/config-spec.js b/spec/config-spec.js deleted file mode 100644 index 17d2391bb..000000000 --- a/spec/config-spec.js +++ /dev/null @@ -1,22 +0,0 @@ -const config = require('../src/config') - -describe('Config Test', () => { - it('should return all env when no env defined', () => { - const actual = config() - expect(actual).toStrictEqual({ - production: { featureToggles: { UIRefresh2022: true } }, - development: { featureToggles: { UIRefresh2022: true } }, - }) - }) - - it('should return the given env', () => { - const oldEnv = process.env - process.env.ENVIRONMENT = 'development' - const actual = config() - expect(actual).toStrictEqual({ - featureToggles: { UIRefresh2022: true }, - }) - - process.env = oldEnv - }) -}) diff --git a/spec/util/sheet-spec.js b/spec/util/sheet-spec.js index e9adb310d..e0f865140 100644 --- a/spec/util/sheet-spec.js +++ b/spec/util/sheet-spec.js @@ -1,11 +1,8 @@ const Sheet = require('../../src/util/sheet') -const config = require('../../src/config') -jest.mock('../../src/config') describe('sheet', function () { const oldEnv = process.env beforeEach(() => { - config.mockReturnValue({ featureToggles: { UIRefresh2022: true } }) process.env.API_KEY = 'API_KEY' }) @@ -113,27 +110,4 @@ describe('sheet', function () { expect(mockCallback).toHaveBeenCalledTimes(1) expect(mockCallback).toHaveBeenCalledWith({ message: errorMessage }, 'API_KEY') }) - - it('should give the sheet not found error with old message', () => { - const errorMessage = 'Oops! We can’t find the Google Sheet you’ve entered. Can you check the URL?' - const mockCallback = jest.fn() - const xhrMock = { open: jest.fn(), send: jest.fn(), readyState: 4, status: 404, response: 'response' } - jest.spyOn(window, 'XMLHttpRequest').mockImplementation(() => xhrMock) - config.mockReturnValue({ featureToggles: { UIRefresh2022: false } }) - - const sheet = new Sheet('http://example.com/a/b/c/d/?x=y') - sheet.validate(mockCallback) - xhrMock.onreadystatechange(new Event('')) - - expect(xhrMock.open).toHaveBeenCalledTimes(1) - expect(xhrMock.open).toHaveBeenCalledWith( - 'GET', - 'https://docs.google.com/spreadsheets/d/http://example.com/a/b/c/d/?x=y', - true, - ) - expect(xhrMock.send).toHaveBeenCalledTimes(1) - expect(xhrMock.send).toHaveBeenCalledWith(null) - expect(mockCallback).toHaveBeenCalledTimes(1) - expect(mockCallback).toHaveBeenCalledWith({ message: errorMessage }, 'API_KEY') - }) }) diff --git a/src/config.js b/src/config.js deleted file mode 100644 index 27f305ea8..000000000 --- a/src/config.js +++ /dev/null @@ -1,16 +0,0 @@ -const config = () => { - const env = { - production: { - featureToggles: { - UIRefresh2022: true, - }, - }, - development: { - featureToggles: { - UIRefresh2022: true, - }, - }, - } - return process.env.ENVIRONMENT ? env[process.env.ENVIRONMENT] : env -} -module.exports = config diff --git a/src/graphing/blips.js b/src/graphing/blips.js index aebf78825..3c9e46bfc 100644 --- a/src/graphing/blips.js +++ b/src/graphing/blips.js @@ -5,8 +5,6 @@ const { renderBlipDescription } = require('./components/quadrantTables') const Blip = require('../models/blip') const isEmpty = require('lodash/isEmpty') const { replaceSpaceWithHyphens, removeAllSpaces } = require('../util/stringUtil') -const config = require('../config') -const featureToggles = config().featureToggles const _ = { sortBy: require('lodash/sortBy'), } @@ -86,24 +84,18 @@ function findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoor ) let coordinates = calculateRadarBlipCoordinates(minRadius, maxRadius, startAngle, quadrantOrder, chance, blip) let iterationCounter = 0 - let foundAPlace = false while (iterationCounter < maxIterations) { if (thereIsCollision(coordinates, allBlipCoordinatesInRing, blip.width)) { coordinates = calculateRadarBlipCoordinates(minRadius, maxRadius, startAngle, quadrantOrder, chance, blip) } else { - foundAPlace = true + // found a valid coordinate break } iterationCounter++ } - if (!featureToggles.UIRefresh2022 && !foundAPlace && blip.width > graphConfig.minBlipWidth) { - blip.width = blip.width - 1 - blip.scale = Math.max((blip.scale || 1) - 0.1, 0.7) - return findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoordinatesInRing, quadrantOrder) - } else { - return coordinates - } + + return coordinates } function blipAssistiveText(blip) { diff --git a/src/graphing/components/banner.js b/src/graphing/components/banner.js index df1db2d57..7a1f2e625 100644 --- a/src/graphing/components/banner.js +++ b/src/graphing/components/banner.js @@ -1,36 +1,15 @@ const d3 = require('d3') -const config = require('../../config') const { addPdfCoverTitle } = require('../pdfPage') -const featureToggles = config().featureToggles function renderBanner(renderFullRadar) { - if (featureToggles.UIRefresh2022) { - const documentTitle = document.title[0].toUpperCase() + document.title.slice(1) + const documentTitle = document.title[0].toUpperCase() + document.title.slice(1) - document.title = documentTitle - d3.select('.hero-banner__wrapper').append('p').classed('hero-banner__subtitle-text', true).text(document.title) - d3.select('.hero-banner__title-text').on('click', renderFullRadar) + document.title = documentTitle + d3.select('.hero-banner__wrapper').append('p').classed('hero-banner__subtitle-text', true).text(document.title) + d3.select('.hero-banner__title-text').on('click', renderFullRadar) - addPdfCoverTitle(documentTitle) - } else { - const header = d3.select('body').insert('header', '#radar') - header - .append('div') - .attr('class', 'radar-title') - .append('div') - .attr('class', 'radar-title__text') - .append('h1') - .text(document.title) - .style('cursor', 'pointer') - .on('click', renderFullRadar) - - header - .select('.radar-title') - .append('div') - .attr('class', 'radar-title__logo') - .html(' ') - } + addPdfCoverTitle(documentTitle) } module.exports = { diff --git a/src/graphing/radar.js b/src/graphing/radar.js index 76954834f..f0431ba26 100644 --- a/src/graphing/radar.js +++ b/src/graphing/radar.js @@ -1,12 +1,8 @@ const d3 = require('d3') const { default: d3tip } = require('d3-tip') -const Chance = require('chance') const _ = require('lodash/core') const RingCalculator = require('../util/ringCalculator') -const AutoComplete = require('../util/autoComplete') -const config = require('../config') -const featureToggles = config().featureToggles const { plotRadarBlips } = require('./blips') const { graphConfig, getGraphSize } = require('./config') @@ -24,15 +20,13 @@ const { const { renderQuadrantTables } = require('./components/quadrantTables') const { addQuadrantNameInPdfView, addRadarLinkInPdfView } = require('./pdfPage') -const { constructSheetUrl } = require('../util/urlUtils') const { toRadian } = require('../util/mathUtils') -const MIN_BLIP_WIDTH = 12 const ANIMATION_DURATION = 1000 const Radar = function (size, radar) { const CENTER = size / 2 - var svg, radarElement, quadrantButtons, buttonsGroup, header, alternativeDiv + var svg, radarElement var tip = d3tip() .attr('class', 'd3-tip') @@ -47,7 +41,6 @@ const Radar = function (size, radar) { var ringCalculator = new RingCalculator(radar.rings().length, CENTER) var self = {} - var chance function plotLines(quadrantGroup, quadrant) { const startX = size * (1 - (-Math.sin(toRadian(quadrant.startAngle)) + 1) / 2) @@ -61,7 +54,7 @@ const Radar = function (size, radar) { endY = startY startY = aux } - const strokeWidth = featureToggles.UIRefresh2022 ? graphConfig.quadrantsGap : 10 + const strokeWidth = graphConfig.quadrantsGap quadrantGroup .append('line') @@ -80,54 +73,6 @@ const Radar = function (size, radar) { .attr('stroke-width', strokeWidth) } - function plotQuadrant(rings, quadrant) { - var quadrantGroup = svg - .append('g') - .attr('class', 'quadrant-group quadrant-group-' + quadrant.order) - .on('mouseover', mouseoverQuadrant.bind({}, quadrant.order)) - .on('mouseout', mouseoutQuadrant.bind({}, quadrant.order)) - .on('click', selectQuadrant.bind({}, quadrant.order, quadrant.startAngle)) - - rings.forEach(function (ring, i) { - var arc = d3 - .arc() - .innerRadius(ringCalculator.getRadius(i)) - .outerRadius(ringCalculator.getRadius(i + 1)) - .startAngle(toRadian(quadrant.startAngle)) - .endAngle(toRadian(quadrant.startAngle - 90)) - - quadrantGroup - .append('path') - .attr('d', arc) - .attr('class', 'ring-arc-' + ring.order()) - .attr('transform', 'translate(' + CENTER + ', ' + CENTER + ')') - }) - - return quadrantGroup - } - - function plotTexts(quadrantGroup, rings, quadrant) { - rings.forEach(function (ring, i) { - if (quadrant.order === 'first' || quadrant.order === 'fourth') { - quadrantGroup - .append('text') - .attr('class', 'line-text') - .attr('y', CENTER + 4) - .attr('x', CENTER + (ringCalculator.getRadius(i) + ringCalculator.getRadius(i + 1)) / 2) - .attr('text-anchor', 'middle') - .text(ring.name()) - } else { - quadrantGroup - .append('text') - .attr('class', 'line-text') - .attr('y', CENTER + 4) - .attr('x', CENTER - (ringCalculator.getRadius(i) + ringCalculator.getRadius(i + 1)) / 2) - .attr('text-anchor', 'middle') - .text(ring.name()) - } - }) - } - function plotRingNames(quadrantGroup, rings, quadrant) { rings.forEach(function (ring, i) { const ringNameWithEllipsis = ring.name().length > 6 ? ring.name().slice(0, 6) + '...' : ring.name() @@ -151,362 +96,6 @@ const Radar = function (size, radar) { }) } - function triangle(blip, x, y, order, group) { - return group - .append('path') - .attr( - 'd', - 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406', - ) - .attr( - 'transform', - 'scale(' + - blip.width / 34 + - ') translate(' + - (-404 + x * (34 / blip.width) - 17) + - ', ' + - (-282 + y * (34 / blip.width) - 17) + - ')', - ) - .attr('class', order) - } - - function triangleLegend(x, y, group) { - return group - .append('path') - .attr( - 'd', - 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406', - ) - .attr( - 'transform', - 'scale(' + 22 / 64 + ') translate(' + (-404 + x * (64 / 22) - 17) + ', ' + (-282 + y * (64 / 22) - 17) + ')', - ) - } - - function circle(blip, x, y, order, group) { - return (group || svg) - .append('path') - .attr( - 'd', - 'M420.084,282.092c-1.073,0-2.16,0.103-3.243,0.313c-6.912,1.345-13.188,8.587-11.423,16.874c1.732,8.141,8.632,13.711,17.806,13.711c0.025,0,0.052,0,0.074-0.003c0.551-0.025,1.395-0.011,2.225-0.109c4.404-0.534,8.148-2.218,10.069-6.487c1.747-3.886,2.114-7.993,0.913-12.118C434.379,286.944,427.494,282.092,420.084,282.092', - ) - .attr( - 'transform', - 'scale(' + - blip.width / 34 + - ') translate(' + - (-404 + x * (34 / blip.width) - 17) + - ', ' + - (-282 + y * (34 / blip.width) - 17) + - ')', - ) - .attr('class', order) - } - - function circleLegend(x, y, group) { - return (group || svg) - .append('path') - .attr( - 'd', - 'M420.084,282.092c-1.073,0-2.16,0.103-3.243,0.313c-6.912,1.345-13.188,8.587-11.423,16.874c1.732,8.141,8.632,13.711,17.806,13.711c0.025,0,0.052,0,0.074-0.003c0.551-0.025,1.395-0.011,2.225-0.109c4.404-0.534,8.148-2.218,10.069-6.487c1.747-3.886,2.114-7.993,0.913-12.118C434.379,286.944,427.494,282.092,420.084,282.092', - ) - .attr( - 'transform', - 'scale(' + 22 / 64 + ') translate(' + (-404 + x * (64 / 22) - 17) + ', ' + (-282 + y * (64 / 22) - 17) + ')', - ) - } - - function addRing(ring, order) { - var table = d3.select('.quadrant-table.' + order) - table.append('h3').text(ring) - return table.append('ul') - } - - function calculateBlipCoordinates(blip, chance, minRadius, maxRadius, startAngle) { - var adjustX = Math.sin(toRadian(startAngle)) - Math.cos(toRadian(startAngle)) - var adjustY = -Math.cos(toRadian(startAngle)) - Math.sin(toRadian(startAngle)) - - var radius = chance.floating({ - min: minRadius + blip.width / 2, - max: maxRadius - blip.width / 2, - }) - var angleDelta = (Math.asin(blip.width / 2 / radius) * 180) / (Math.PI - 1.25) - angleDelta = angleDelta > 45 ? 45 : angleDelta - var angle = toRadian(chance.integer({ min: angleDelta, max: 90 - angleDelta })) - - var x = CENTER + radius * Math.cos(angle) * adjustX - var y = CENTER + radius * Math.sin(angle) * adjustY - - return [x, y] - } - - function thereIsCollision(blip, coordinates, allCoordinates) { - return allCoordinates.some(function (currentCoordinates) { - return ( - Math.abs(currentCoordinates[0] - coordinates[0]) < blip.width + 10 && - Math.abs(currentCoordinates[1] - coordinates[1]) < blip.width + 10 - ) - }) - } - - function plotBlips(quadrantGroup, rings, quadrantWrapper) { - var blips, quadrant, startAngle, order - - quadrant = quadrantWrapper.quadrant - startAngle = quadrantWrapper.startAngle - order = quadrantWrapper.order - - d3.select('.quadrant-table.' + order) - .append('h2') - .attr('class', 'quadrant-table__name') - .text(quadrant.name()) - - blips = quadrant.blips() - rings.forEach(function (ring, i) { - var ringBlips = blips.filter(function (blip) { - return blip.ring() === ring - }) - - if (ringBlips.length === 0) { - return - } - - var maxRadius, minRadius - - minRadius = ringCalculator.getRadius(i) - maxRadius = ringCalculator.getRadius(i + 1) - - var sumRing = ring - .name() - .split('') - .reduce(function (p, c) { - return p + c.charCodeAt(0) - }, 0) - var sumQuadrant = quadrant - .name() - .split('') - .reduce(function (p, c) { - return p + c.charCodeAt(0) - }, 0) - chance = new Chance(Math.PI * sumRing * ring.name().length * sumQuadrant * quadrant.name().length) - - var ringList = addRing(ring.name(), order) - var allBlipCoordinatesInRing = [] - - ringBlips.forEach(function (blip) { - const coordinates = findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoordinatesInRing, order) - - allBlipCoordinatesInRing.push(coordinates) - drawBlipInCoordinates(blip, coordinates, order, quadrantGroup, ringList) - }) - }) - } - - function findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoordinatesInRing, quadrantOrder) { - const maxIterations = 200 - var coordinates = calculateBlipCoordinates(blip, chance, minRadius, maxRadius, startAngle, quadrantOrder) - var iterationCounter = 0 - var foundAPlace = false - - while (iterationCounter < maxIterations) { - if (thereIsCollision(blip, coordinates, allBlipCoordinatesInRing)) { - coordinates = calculateBlipCoordinates(blip, chance, minRadius, maxRadius, startAngle, quadrantOrder) - } else { - foundAPlace = true - break - } - iterationCounter++ - } - - if (!foundAPlace && blip.width > MIN_BLIP_WIDTH) { - blip.width = blip.width - 1 - return findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoordinatesInRing, quadrantOrder) - } else { - return coordinates - } - } - - function drawBlipInCoordinates(blip, coordinates, order, quadrantGroup, ringList) { - var x = coordinates[0] - var y = coordinates[1] - - var group = quadrantGroup - .append('g') - .attr('class', 'blip-link') - .attr('id', 'blip-link-' + blip.id()) - - if (blip.isNew()) { - triangle(blip, x, y, order, group) - } else { - circle(blip, x, y, order, group) - } - group - .append('text') - .attr('x', x) - .attr('y', y + 4) - .attr('class', 'blip-text') - // derive font-size from current blip width - .style('font-size', (blip.width * 10) / 22 + 'px') - .attr('text-anchor', 'middle') - .text(blip.blipText()) - - var blipListItem = ringList.append('li') - var blipText = blip.blipText() + '. ' + blip.name() + (blip.topic() ? '. - ' + blip.topic() : '') - blipListItem - .append('div') - .attr('class', 'blip-list-item') - .attr('id', 'blip-list-item-' + blip.id()) - .text(blipText) - - var blipItemDescription = blipListItem - .append('div') - .attr('id', 'blip-description-' + blip.id()) - .attr('class', 'blip-item-description') - if (blip.description()) { - blipItemDescription.append('p').html(blip.description()) - } - - var mouseOver = function () { - d3.selectAll('g.blip-link').attr('opacity', 0.3) - group.attr('opacity', 1.0) - blipListItem.selectAll('.blip-list-item').classed('highlight', true) - tip.show(blip.name(), group.node()) - } - - var mouseOut = function () { - d3.selectAll('g.blip-link').attr('opacity', 1.0) - blipListItem.selectAll('.blip-list-item').classed('highlight', false) - tip.hide().style('left', 0).style('top', 0) - } - - blipListItem.on('mouseover', mouseOver).on('mouseout', mouseOut) - group.on('mouseover', mouseOver).on('mouseout', mouseOut) - - var clickBlip = function () { - d3.select('.blip-item-description.expanded').node() !== blipItemDescription.node() && - d3.select('.blip-item-description.expanded').classed('expanded', false) - blipItemDescription.classed('expanded', !blipItemDescription.classed('expanded')) - - blipItemDescription.on('click', function () { - d3.event.stopPropagation() - }) - } - - blipListItem.on('click', clickBlip) - } - - function removeHomeLink() { - d3.select('.home-link').remove() - } - - function createHomeLink(pageElement) { - if (pageElement.select('.home-link').empty()) { - pageElement - .insert('div', 'div#alternative-buttons') - .html('« Back to Radar home') - .classed('home-link', true) - .classed('selected', true) - .on('click', redrawFullRadar) - .append('g') - .attr('fill', '#626F87') - .append('path') - .attr( - 'd', - 'M27.6904224,13.939279 C27.6904224,13.7179572 27.6039633,13.5456925 27.4314224,13.4230122 L18.9285959,6.85547454 C18.6819796,6.65886965 18.410898,6.65886965 18.115049,6.85547454 L9.90776939,13.4230122 C9.75999592,13.5456925 9.68592041,13.7179572 9.68592041,13.939279 L9.68592041,25.7825947 C9.68592041,25.979501 9.74761224,26.1391059 9.87092041,26.2620876 C9.99415306,26.3851446 10.1419265,26.4467108 10.3145429,26.4467108 L15.1946918,26.4467108 C15.391698,26.4467108 15.5518551,26.3851446 15.6751633,26.2620876 C15.7984714,26.1391059 15.8600878,25.979501 15.8600878,25.7825947 L15.8600878,18.5142424 L21.4794061,18.5142424 L21.4794061,25.7822933 C21.4794061,25.9792749 21.5410224,26.1391059 21.6643306,26.2620876 C21.7876388,26.3851446 21.9477959,26.4467108 22.1448776,26.4467108 L27.024951,26.4467108 C27.2220327,26.4467108 27.3821898,26.3851446 27.505498,26.2620876 C27.6288061,26.1391059 27.6904224,25.9792749 27.6904224,25.7822933 L27.6904224,13.939279 Z M18.4849735,0.0301425662 C21.0234,0.0301425662 23.4202449,0.515814664 25.6755082,1.48753564 C27.9308469,2.45887984 29.8899592,3.77497963 31.5538265,5.43523218 C33.2173918,7.09540937 34.5358755,9.05083299 35.5095796,11.3015031 C36.4829061,13.5518717 36.9699469,15.9439104 36.9699469,18.4774684 C36.9699469,20.1744196 36.748098,21.8101813 36.3044755,23.3844521 C35.860551,24.9584216 35.238498,26.4281731 34.4373347,27.7934053 C33.6362469,29.158336 32.6753041,30.4005112 31.5538265,31.5197047 C30.432349,32.6388982 29.1876388,33.5981853 27.8199224,34.3973401 C26.4519041,35.1968717 24.9791531,35.8176578 23.4016694,36.2606782 C21.8244878,36.7033971 20.1853878,36.9247943 18.4849735,36.9247943 C16.7841816,36.9247943 15.1453837,36.7033971 13.5679755,36.2606782 C11.9904918,35.8176578 10.5180429,35.1968717 9.15002449,34.3973401 C7.78223265,33.5978839 6.53752245,32.6388982 5.41612041,31.5197047 C4.29464286,30.4005112 3.33339796,29.158336 2.53253673,27.7934053 C1.73144898,26.4281731 1.10909388,24.9584216 0.665395918,23.3844521 C0.22184898,21.8101813 0,20.1744196 0,18.4774684 C0,16.7801405 0.22184898,15.1446802 0.665395918,13.5704847 C1.10909388,11.9962138 1.73144898,10.5267637 2.53253673,9.16153157 C3.33339796,7.79652546 4.29464286,6.55435031 5.41612041,5.43523218 C6.53752245,4.3160387 7.78223265,3.35675153 9.15002449,2.55752138 C10.5180429,1.75806517 11.9904918,1.13690224 13.5679755,0.694183299 C15.1453837,0.251464358 16.7841816,0.0301425662 18.4849735,0.0301425662 L18.4849735,0.0301425662 Z', - ) - } - } - - function removeRadarLegend() { - d3.select('.legend').remove() - } - - function drawLegend(order) { - removeRadarLegend() - - var triangleKey = 'New or moved' - var circleKey = 'No change' - - var container = d3 - .select('svg') - .append('g') - .attr('class', 'legend legend' + '-' + order) - - var x = 10 - var y = 10 - - if (order === 'first') { - x = (4 * size) / 5 - y = (1 * size) / 5 - } - - if (order === 'second') { - x = (1 * size) / 5 - 15 - y = (1 * size) / 5 - 20 - } - - if (order === 'third') { - x = (1 * size) / 5 - 15 - y = (4 * size) / 5 + 15 - } - - if (order === 'fourth') { - x = (4 * size) / 5 - y = (4 * size) / 5 - } - - d3.select('.legend') - .attr('class', 'legend legend-' + order) - .transition() - .style('visibility', 'visible') - - triangleLegend(x, y, container) - - container - .append('text') - .attr('x', x + 15) - .attr('y', y + 5) - .attr('font-size', '0.8em') - .text(triangleKey) - - circleLegend(x, y + 20, container) - - container - .append('text') - .attr('x', x + 15) - .attr('y', y + 25) - .attr('font-size', '0.8em') - .text(circleKey) - } - - function redrawFullRadar() { - removeHomeLink() - removeRadarLegend() - tip.hide() - d3.selectAll('g.blip-link').attr('opacity', 1.0) - - svg.style('left', 0).style('right', 0) - - d3.selectAll('.button').classed('selected', false).classed('full-view', true) - - d3.selectAll('.quadrant-table').classed('selected', false) - d3.selectAll('.home-link').classed('selected', false) - - d3.selectAll('.quadrant-group').transition().duration(ANIMATION_DURATION).attr('transform', 'scale(1)') - - if (featureToggles.UIRefresh2022) { - d3.select('#radar-plot').attr('width', size).attr('height', size) - d3.selectAll(`.quadrant-bg-images`).each(function () { - this.classList.remove('hidden') - }) - d3.selectAll('.quadrant-group').style('display', 'block') - } else { - d3.selectAll('.quadrant-group .blip-link').transition().duration(ANIMATION_DURATION).attr('transform', 'scale(1)') - } - d3.selectAll('.quadrant-group').style('pointer-events', 'auto') - } - function renderFullRadar() { removeScrollListener() @@ -573,195 +162,17 @@ const Radar = function (size, radar) { d3.selectAll(`.quadrant-group rect:nth-child(2n)`).attr('tabindex', 0) } - function searchBlip(_e, ui) { - const { blip, quadrant } = ui.item - const isQuadrantSelected = d3.select('div.button.' + quadrant.order).classed('selected') - selectQuadrant.bind({}, quadrant.order, quadrant.startAngle)() - const selectedDesc = d3.select('#blip-description-' + blip.id()) - d3.select('.blip-item-description.expanded').node() !== selectedDesc.node() && - d3.select('.blip-item-description.expanded').classed('expanded', false) - selectedDesc.classed('expanded', true) - - d3.selectAll('g.blip-link').attr('opacity', 0.3) - const group = d3.select('#blip-link-' + blip.id()) - group.attr('opacity', 1.0) - d3.selectAll('.blip-list-item').classed('highlight', false) - d3.select('#blip-list-item-' + blip.id()).classed('highlight', true) - if (isQuadrantSelected) { - tip.show(blip.name(), group.node()) - } else { - // need to account for the animation time associated with selecting a quadrant - tip.hide() - - setTimeout(function () { - tip.show(blip.name(), group.node()) - }, ANIMATION_DURATION) - } - } - - function plotRadarHeader() { - header = d3.select('header') - - buttonsGroup = header.append('div').classed('buttons-group', true) - alternativeDiv = header.append('div').attr('id', 'alternative-buttons') - - quadrantButtons = buttonsGroup.append('div').classed('quadrant-btn--group', true) - } - - function plotQuadrantButtons(quadrants) { - function addButton(quadrant) { - radarElement.append('div').attr('class', 'quadrant-table ' + quadrant.order) - - quadrantButtons - .append('div') - .attr('class', 'button ' + quadrant.order + ' full-view') - .text(quadrant.quadrant.name()) - .on('mouseover', mouseoverQuadrant.bind({}, quadrant.order)) - .on('mouseout', mouseoutQuadrant.bind({}, quadrant.order)) - .on('click', selectQuadrant.bind({}, quadrant.order, quadrant.startAngle)) - } - - _.each([0, 1, 2, 3], function (i) { - addButton(quadrants[i]) - }) - - buttonsGroup - .append('div') - .classed('print-radar-btn', true) - .append('div') - .classed('print-radar button no-capitalize', true) - .text('Print this radar') - .on('click', window.print.bind(window)) - - alternativeDiv - .append('div') - .classed('search-box', true) - .append('input') - .attr('id', 'auto-complete') - .attr('placeholder', 'Search') - .classed('search-radar', true) - - AutoComplete('#auto-complete', quadrants, searchBlip) - } - - function plotRadarFooter() { - d3.select('body') - .insert('div', '#radar-plot + *') - .attr('id', 'footer') - .append('div') - .attr('class', 'footer-content') - .append('p') - .html( - 'Powered by Thoughtworks. ' + - 'By using this service you agree to Thoughtworks\' terms of use. ' + - 'You also agree to our privacy policy, which describes how we will gather, use and protect any personal data contained in your public Google Sheet. ' + - 'This software is open source and available for download and self-hosting.', - ) - } - - function mouseoverQuadrant(order) { - d3.select('.quadrant-group-' + order).style('opacity', 1) - d3.selectAll('.quadrant-group:not(.quadrant-group-' + order + ')').style('opacity', 0.3) - } - - function mouseoutQuadrant(order) { - d3.selectAll('.quadrant-group:not(.quadrant-group-' + order + ')').style('opacity', 1) - } - function hideTooltipOnScroll(tip) { window.addEventListener('scroll', () => { tip.hide().style('left', 0).style('top', 0) }) } - function selectQuadrant(order, startAngle) { - d3.selectAll('.home-link').classed('selected', false) - createHomeLink(d3.select('header')) - - d3.selectAll('.button').classed('selected', false).classed('full-view', false) - d3.selectAll('.button.' + order).classed('selected', true) - d3.selectAll('.quadrant-table').classed('selected', false) - d3.selectAll('.quadrant-table.' + order).classed('selected', true) - d3.selectAll('.blip-item-description').classed('expanded', false) - - var scale = 2 - - var adjustX = Math.sin(toRadian(startAngle)) - Math.cos(toRadian(startAngle)) - var adjustY = Math.cos(toRadian(startAngle)) + Math.sin(toRadian(startAngle)) - - var translateX = ((-1 * (1 + adjustX) * size) / 2) * (scale - 1) + -adjustX * (1 - scale / 2) * size - var translateY = -1 * (1 - adjustY) * (size / 2 - 7) * (scale - 1) - ((1 - adjustY) / 2) * (1 - scale / 2) * size - if (featureToggles.UIRefresh2022) { - translateY = 0 - } - - var translateXAll = (((1 - adjustX) / 2) * size * scale) / 2 + ((1 - adjustX) / 2) * (1 - scale / 2) * size - var translateYAll = (((1 + adjustY) / 2) * size * scale) / 2 - - var moveRight = ((1 + adjustX) * (0.8 * window.innerWidth - size)) / 2 - var moveLeft = ((1 - adjustX) * (0.8 * window.innerWidth - size)) / 2 - - var blipScale = 3 / 4 - var blipTranslate = (1 - blipScale) / blipScale - - svg.style('left', moveLeft + 'px').style('right', moveRight + 'px') - - d3.select('.quadrant-group-' + order) - .transition() - .duration(ANIMATION_DURATION) - .attr('transform', 'translate(' + translateX + ',' + translateY + ')scale(' + scale + ')') - d3.selectAll('.quadrant-group-' + order + ' .blip-link text').each(function () { - var x = d3.select(this).attr('x') - var y = d3.select(this).attr('y') - d3.select(this.parentNode) - .transition() - .duration(ANIMATION_DURATION) - .attr('transform', 'scale(' + blipScale + ')translate(' + blipTranslate * x + ',' + blipTranslate * y + ')') - }) - - d3.selectAll('.quadrant-group').style('pointer-events', 'auto') - - d3.selectAll('.quadrant-group:not(.quadrant-group-' + order + ')') - .transition() - .duration(ANIMATION_DURATION) - .style('pointer-events', 'none') - .attr('transform', 'translate(' + translateXAll + ',' + translateYAll + ')scale(0)') - - if (d3.select('.legend.legend-' + order).empty()) { - drawLegend(order) - } - } - self.init = function () { radarElement = d3.select('#radar') - if (!featureToggles.UIRefresh2022) { - const selector = 'body' - radarElement = d3.select(selector).append('div').attr('id', 'radar') - } return self } - function plotAlternativeRadars(alternatives, currentSheet) { - var alternativeSheetButton = alternativeDiv.append('div').classed('multiple-sheet-button-group', true) - - alternativeSheetButton.append('p').text('Choose a sheet to populate radar') - alternatives.forEach(function (alternative) { - alternativeSheetButton - .append('div:a') - .attr('class', 'first full-view alternative multiple-sheet-button') - .attr('href', constructSheetUrl(alternative)) - .text(alternative) - - if (alternative === currentSheet) { - d3.selectAll('.alternative') - .filter(function () { - return d3.select(this).text() === alternative - }) - .attr('class', 'highlight multiple-sheet-button') - } - }) - } - self.plot = function () { var rings, quadrants, alternatives, currentSheet @@ -775,63 +186,37 @@ const Radar = function (size, radar) { renderBanner(renderFullRadar) - if (featureToggles.UIRefresh2022) { - renderQuadrantSubnav(radarHeader, quadrants, renderFullRadar) - renderSearch(radarHeader, quadrants) - renderAlternativeRadars(radarFooter, alternatives, currentSheet) - renderQuadrantTables(quadrants, rings) - renderButtons(radarFooter) + renderQuadrantSubnav(radarHeader, quadrants, renderFullRadar) + renderSearch(radarHeader, quadrants) + renderAlternativeRadars(radarFooter, alternatives, currentSheet) + renderQuadrantTables(quadrants, rings) + renderButtons(radarFooter) - const landingPageElements = document.querySelectorAll('main .home-page') - landingPageElements.forEach((elem) => { - elem.style.display = 'none' - }) - } else { - plotRadarHeader() - plotRadarFooter() - if (alternatives.length) { - plotAlternativeRadars(alternatives, currentSheet) - } - plotQuadrantButtons(quadrants) - } + const landingPageElements = document.querySelectorAll('main .home-page') + landingPageElements.forEach((elem) => { + elem.style.display = 'none' + }) svg = radarElement.append('svg').call(tip) - if (featureToggles.UIRefresh2022) { - const legendHeight = 40 - radarElement.style('height', size + legendHeight + 'px') - svg.attr('id', 'radar-plot').attr('width', size).attr('height', size) - } else { - radarElement.style('height', size + 14 + 'px') - svg - .attr('id', 'radar-plot') - .attr('width', size) - .attr('height', size + 14) - } + const legendHeight = 40 + radarElement.style('height', size + legendHeight + 'px') + svg.attr('id', 'radar-plot').attr('width', size).attr('height', size) _.each(quadrants, function (quadrant) { let quadrantGroup - if (featureToggles.UIRefresh2022) { - quadrantGroup = renderRadarQuadrants(size, svg, quadrant, rings, ringCalculator, tip) - plotLines(quadrantGroup, quadrant) - const ringTextGroup = quadrantGroup.append('g') - plotRingNames(ringTextGroup, rings, quadrant) - plotRadarBlips(quadrantGroup, rings, quadrant, tip) - renderMobileView(quadrant) - addQuadrantNameInPdfView(quadrant.order, quadrant.quadrant.name()) - } else { - quadrantGroup = plotQuadrant(rings, quadrant) - plotLines(quadrantGroup, quadrant) - plotTexts(quadrantGroup, rings, quadrant) - plotBlips(quadrantGroup, rings, quadrant) - } + quadrantGroup = renderRadarQuadrants(size, svg, quadrant, rings, ringCalculator, tip) + plotLines(quadrantGroup, quadrant) + const ringTextGroup = quadrantGroup.append('g') + plotRingNames(ringTextGroup, rings, quadrant) + plotRadarBlips(quadrantGroup, rings, quadrant, tip) + renderMobileView(quadrant) + addQuadrantNameInPdfView(quadrant.order, quadrant.quadrant.name()) }) - if (featureToggles.UIRefresh2022) { - renderRadarLegends(radarElement, hasMovementData(quadrants)) - hideTooltipOnScroll(tip) - addRadarLinkInPdfView() - } + renderRadarLegends(radarElement, hasMovementData(quadrants)) + hideTooltipOnScroll(tip) + addRadarLinkInPdfView() } function hasMovementData(quadrants) { diff --git a/src/models/radar.js b/src/models/radar.js index e26aeba20..7efe7ecf9 100644 --- a/src/models/radar.js +++ b/src/models/radar.js @@ -1,33 +1,17 @@ const MalformedDataError = require('../exceptions/malformedDataError') const ExceptionMessages = require('../util/exceptionMessages') -const _ = { - map: require('lodash/map'), - uniqBy: require('lodash/uniqBy'), - sortBy: require('lodash/sortBy'), -} - const Radar = function () { - const config = require('../config') - const featureToggles = config().featureToggles - let self, quadrants, blipNumber, addingQuadrant, alternatives, currentSheetName, rings blipNumber = 0 addingQuadrant = 0 - quadrants = featureToggles.UIRefresh2022 - ? [ - { order: 'first', startAngle: 0 }, - { order: 'second', startAngle: -90 }, - { order: 'third', startAngle: 90 }, - { order: 'fourth', startAngle: -180 }, - ] - : [ - { order: 'first', startAngle: 90 }, - { order: 'second', startAngle: 0 }, - { order: 'third', startAngle: -90 }, - { order: 'fourth', startAngle: -180 }, - ] + quadrants = [ + { order: 'first', startAngle: 0 }, + { order: 'second', startAngle: -90 }, + { order: 'third', startAngle: 90 }, + { order: 'fourth', startAngle: -180 }, + ] alternatives = [] currentSheetName = '' self = {} @@ -70,38 +54,8 @@ const Radar = function () { rings = allRings } - function allQuadrants() { - if (addingQuadrant < 4) { - throw new MalformedDataError(ExceptionMessages.LESS_THAN_FOUR_QUADRANTS) - } - - return _.map(quadrants, 'quadrant') - } - - function allBlips() { - return allQuadrants().reduce(function (blips, quadrant) { - return blips.concat(quadrant.blips()) - }, []) - } - self.rings = function () { - if (featureToggles.UIRefresh2022) { - return rings - } - - return _.sortBy( - _.map( - _.uniqBy(allBlips(), function (blip) { - return blip.ring().name() - }), - function (blip) { - return blip.ring() - }, - ), - function (ring) { - return ring.order() - }, - ) + return rings } self.quadrants = function () { diff --git a/src/stylesheets/_alternativeradars.scss b/src/stylesheets/_alternativeradars.scss index d609f78fb..ea95b49af 100644 --- a/src/stylesheets/_alternativeradars.scss +++ b/src/stylesheets/_alternativeradars.scss @@ -1,105 +1,103 @@ @import 'colors'; @import 'layout'; -@if $UIRefresh2022 { - .graph-footer { - display: flex; - flex-direction: column; - width: 100%; +.graph-footer { + display: flex; + flex-direction: column; + width: 100%; - @include media-query-medium { - align-items: center; - } + @include media-query-medium { + align-items: center; } +} + +.alternative-radars { + display: flex; + flex-direction: column; + align-items: center; + + margin: 32px auto 0; - .alternative-radars { + @include layout-margin(1, $screen-small); + @include layout-margin(1, $screen-medium); + @include layout-margin(1, $screen-large); + @include layout-margin(1, $screen-xlarge); + @include layout-margin(1, $screen-xxlarge); + @include layout-margin(calc(10 / 12), $screen-xxxlarge); + + &__list { + width: 100%; display: flex; flex-direction: column; - align-items: center; + list-style: none; + padding: 0; + justify-content: center; + font-size: 1.125rem; + font-family: $baseFontFamily; + font-weight: 630; + margin-block: 0; + margin-bottom: 16px; + margin-left: 0; - margin: 32px auto 0; - - @include layout-margin(1, $screen-small); - @include layout-margin(1, $screen-medium); - @include layout-margin(1, $screen-large); - @include layout-margin(1, $screen-xlarge); - @include layout-margin(1, $screen-xxlarge); - @include layout-margin(calc(10 / 12), $screen-xxxlarge); - - &__list { - width: 100%; - display: flex; - flex-direction: column; - list-style: none; - padding: 0; - justify-content: center; - font-size: 1.125rem; - font-family: $baseFontFamily; - font-weight: 630; - margin-block: 0; - margin-bottom: 16px; - margin-left: 0; + @include media-query-medium { + font-size: 1.25rem; + flex-direction: row; + } + + @include media-query-xxlarge { + font-size: 1.5rem; + } + &__row-0 { @include media-query-medium { - font-size: 1.25rem; - flex-direction: row; + margin-top: 48px; } + } - @include media-query-xxlarge { - font-size: 1.5rem; - } + &-item { + flex-grow: 1; + flex-basis: 0; + text-align: center; + padding: 0 4px; + border-bottom: 1px solid $mist; - &__row-0 { - @include media-query-medium { - margin-top: 48px; + &.active { + border-bottom: 3px solid $flamingo-s40; + color: $flamingo-s40; + + &:hover { + color: $link-hover; } } - &-item { - flex-grow: 1; - flex-basis: 0; - text-align: center; - padding: 0 4px; - border-bottom: 1px solid $mist; + &:only-child { + flex-basis: unset; + flex-grow: unset; + padding: 0 32px 4px; + } - &.active { - border-bottom: 3px solid $flamingo-s40; - color: $flamingo-s40; + &-link { + display: inline-block; + width: 100%; + margin-top: 32px; + padding: 0 8px 4px; + box-sizing: border-box; + border: 1px solid transparent; + border-width: 0px 1px; - &:hover { - color: $link-hover; - } - } + display: -webkit-box; + line-height: 1.75rem; + -webkit-box-orient: vertical; - &:only-child { - flex-basis: unset; - flex-grow: unset; - padding: 0 32px 4px; + @include media-query-medium { + -webkit-line-clamp: 1; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 0; } - &-link { - display: inline-block; - width: 100%; - margin-top: 32px; - padding: 0 8px 4px; - box-sizing: border-box; - border: 1px solid transparent; - border-width: 0px 1px; - - display: -webkit-box; - line-height: 1.75rem; - -webkit-box-orient: vertical; - - @include media-query-medium { - -webkit-line-clamp: 1; - overflow: hidden; - text-overflow: ellipsis; - margin-top: 0; - } - - &:hover { - border-color: transparent !important; - } + &:hover { + border-color: transparent !important; } } } diff --git a/src/stylesheets/_buttons.scss b/src/stylesheets/_buttons.scss index e137ae91e..9b1b1d6e0 100644 --- a/src/stylesheets/_buttons.scss +++ b/src/stylesheets/_buttons.scss @@ -1,69 +1,67 @@ @import 'colors'; @import 'layout'; -@if $UIRefresh2022 { - .buttons { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 64px auto 56px; +.buttons { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 64px auto 56px; + + @include layout-margin(calc(3 / 4), $screen-small); + @include layout-margin(calc(6 / 8), $screen-medium); + @include layout-margin(calc(8 / 12), $screen-large); + @include layout-margin(calc(6 / 12), $screen-xlarge); + @include layout-margin(calc(6 / 12), $screen-xxlarge); + @include layout-margin(calc(4 / 12), $screen-xxxlarge); + + @include media-query-medium { + flex-direction: row; + } - @include layout-margin(calc(3 / 4), $screen-small); - @include layout-margin(calc(6 / 8), $screen-medium); - @include layout-margin(calc(8 / 12), $screen-large); - @include layout-margin(calc(6 / 12), $screen-xlarge); - @include layout-margin(calc(6 / 12), $screen-xxlarge); - @include layout-margin(calc(4 / 12), $screen-xxxlarge); + button { + border: none; + font-size: 20px; + color: $white; + width: 220px; + height: 48px; + margin: 0 15px 32px; + cursor: pointer; @include media-query-medium { - flex-direction: row; + margin: 0 15px; } - button { + a { border: none; - font-size: 20px; color: $white; - width: 220px; - height: 48px; - margin: 0 15px 32px; - cursor: pointer; - @include media-query-medium { - margin: 0 15px; - } - - a { - border: none; + &:hover { color: $white; - - &:hover { - color: $white; - } } } + } - &__wave-btn { - background-color: $wave; - } + &__wave-btn { + background-color: $wave; + } - &__flamingo-btn { - background-color: $flamingo-s40; - color: $white; + &__flamingo-btn { + background-color: $flamingo-s40; + color: $white; - display: inline-flex; - align-items: center; - justify-content: center; + display: inline-flex; + align-items: center; + justify-content: center; - width: 220px; - height: 48px; + width: 220px; + height: 48px; - border: none; - font-size: 20px; + border: none; + font-size: 20px; - &:hover { - color: $white; - } + &:hover { + color: $white; } } } diff --git a/src/stylesheets/_error.scss b/src/stylesheets/_error.scss index ba9c514e5..83d69b355 100644 --- a/src/stylesheets/_error.scss +++ b/src/stylesheets/_error.scss @@ -6,17 +6,11 @@ padding-top: 48px; .error-container__message { - @if not $UIRefresh2022 { - width: 60%; - display: inline-block; + p:first-child { + color: $error-text; } - @if $UIRefresh2022 { - p:first-child { - color: $error-text; - } - p { - margin: 0; - } + p { + margin: 0; } } @@ -29,10 +23,6 @@ } .switch-account-button { - margin: 0 0 35px 0; - } - - .switch-account-button-newui { background-color: $button-normal; color: $white; font-size: 20px; diff --git a/src/stylesheets/_footer.scss b/src/stylesheets/_footer.scss index d0b06522b..7ae472cc2 100644 --- a/src/stylesheets/_footer.scss +++ b/src/stylesheets/_footer.scss @@ -18,21 +18,19 @@ } } -@if $UIRefresh2022 { - footer { - margin-bottom: 40px; +footer { + margin-bottom: 40px; - p { - @include eight-column-layout-margin; - font-family: $baseFontFamily; - font-weight: normal; - margin-top: 30px; - font-size: 16px !important; + p { + @include eight-column-layout-margin; + font-family: $baseFontFamily; + font-weight: normal; + margin-top: 30px; + font-size: 16px !important; - @include media-query-large { - font-size: 18px !important; - text-align: center; - } + @include media-query-large { + font-size: 18px !important; + text-align: center; } } } diff --git a/src/stylesheets/_header.scss b/src/stylesheets/_header.scss index 1489274c6..90f7e3f0e 100644 --- a/src/stylesheets/_header.scss +++ b/src/stylesheets/_header.scss @@ -184,64 +184,40 @@ header { } } -@if not $UIRefresh2022 { - .ui-autocomplete { - width: 275px !important; - - .ui-autocomplete-quadrant { - font-size: 14px; - font-weight: 600; - padding: 5px; - } - - .ui-menu-item { - white-space: normal; - font-size: 14px; - font-weight: 400; - - .ui-menu-item-wrapper { - padding: 0 10px; - } - } - } -} +header { + height: $headerHeight; + width: 100%; + display: flex; + align-items: center; -@if $UIRefresh2022 { - header { - height: $headerHeight; - width: 100%; + div { display: flex; - align-items: center; - - div { - display: flex; - flex-direction: row; - - margin: auto; - width: 90%; - - @include layout-margin(1, $screen-small); - @include layout-margin(1, $screen-medium); - @include layout-margin(1, $screen-large); - @include layout-margin(1, $screen-xlarge); - @include layout-margin(1, $screen-xxlarge); - @include layout-margin(1, $screen-xxxlarge); - - span { - margin-right: 5px; - font-family: $baseFontFamily; - font-weight: 630; - } + flex-direction: row; + + margin: auto; + width: 90%; + + @include layout-margin(1, $screen-small); + @include layout-margin(1, $screen-medium); + @include layout-margin(1, $screen-large); + @include layout-margin(1, $screen-xlarge); + @include layout-margin(1, $screen-xxlarge); + @include layout-margin(1, $screen-xxxlarge); + + span { + margin-right: 5px; + font-family: $baseFontFamily; + font-weight: 630; + } - a { - display: block; - border-bottom: none; + a { + display: block; + border-bottom: none; - img { - height: 20px; - width: auto; - margin-top: 1.5px; - } + img { + height: 20px; + width: auto; + margin-top: 1.5px; } } } diff --git a/src/stylesheets/_herobanner.scss b/src/stylesheets/_herobanner.scss index 94b9db8a9..ca03c0c9f 100644 --- a/src/stylesheets/_herobanner.scss +++ b/src/stylesheets/_herobanner.scss @@ -1,74 +1,72 @@ @import 'colors'; @import 'layout'; -@if $UIRefresh2022 { - .hero-banner { - height: $tabletBannerHeight; - background-color: $amethyst; - background-image: url('/images/banner-image-mobile.jpg'); - background-size: contain; - background-repeat: no-repeat; - background-position: right; - color: $white; - display: flex; - align-items: center; - margin: 0 !important; +.hero-banner { + height: $tabletBannerHeight; + background-color: $amethyst; + background-image: url('/images/banner-image-mobile.jpg'); + background-size: contain; + background-repeat: no-repeat; + background-position: right; + color: $white; + display: flex; + align-items: center; + margin: 0 !important; - @include media-query-large { - background-image: url('/images/banner-image-mobile.jpg'); - } + @include media-query-large { + background-image: url('/images/banner-image-mobile.jpg'); + } - @include media-query-xlarge { - background-image: url('/images/banner-image-desktop.jpg'); - height: $bannerHeight; - background-size: cover; - } + @include media-query-xlarge { + background-image: url('/images/banner-image-desktop.jpg'); + height: $bannerHeight; + background-size: cover; + } - &__wrapper { - margin: auto; - width: 90%; + &__wrapper { + margin: auto; + width: 90%; - @include layout-margin(1, $screen-small); - @include layout-margin(1, $screen-medium); - @include layout-margin(1, $screen-large); - @include layout-margin(1, $screen-xlarge); - @include layout-margin(1, $screen-xxlarge); - @include layout-margin(1, $screen-xxxlarge); - } + @include layout-margin(1, $screen-small); + @include layout-margin(1, $screen-medium); + @include layout-margin(1, $screen-large); + @include layout-margin(1, $screen-xlarge); + @include layout-margin(1, $screen-xxlarge); + @include layout-margin(1, $screen-xxxlarge); + } - &__title-text { - width: fit-content; - text-align: left; - text-transform: none; - letter-spacing: 0; - cursor: pointer; - } + &__title-text { + width: fit-content; + text-align: left; + text-transform: none; + letter-spacing: 0; + cursor: pointer; + } - &__subtitle-text { - font-weight: 630; - width: 50%; - text-align: left; - text-transform: none; - letter-spacing: 0; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - line-height: 1.75rem; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; + &__subtitle-text { + font-weight: 630; + width: 50%; + text-align: left; + text-transform: none; + letter-spacing: 0; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + line-height: 1.75rem; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; - @include media-query-medium { - width: 37.5%; - -webkit-line-clamp: 2; - } + @include media-query-medium { + width: 37.5%; + -webkit-line-clamp: 2; + } - @include media-query-large { - width: 25%; - } + @include media-query-large { + width: 25%; + } - @include media-query-xlarge { - width: 33%; - } + @include media-query-xlarge { + width: 33%; } } } diff --git a/src/stylesheets/_quadrantTables.scss b/src/stylesheets/_quadrantTables.scss index 5649edb65..724c5c973 100644 --- a/src/stylesheets/_quadrantTables.scss +++ b/src/stylesheets/_quadrantTables.scss @@ -1,124 +1,122 @@ @import 'colors'; @import 'layout'; -@if $UIRefresh2022 { - .quadrant-table { - @include layout-margin(calc(12 / 12), $screen-small); - @include layout-margin(calc(12 / 12), $screen-medium); - @include layout-margin(calc(12 / 12), $screen-large); - @include layout-margin(calc(4 / 12), $screen-xlarge); - @include layout-margin(calc(5 / 12), $screen-xxlarge); - @include layout-margin(calc(5 / 12), $screen-xxxlarge); - - &__ring-name { - text-transform: none; - margin: 0; - scroll-margin-top: $subnavHeight; - font-family: $baseFontFamily; - } +.quadrant-table { + @include layout-margin(calc(12 / 12), $screen-small); + @include layout-margin(calc(12 / 12), $screen-medium); + @include layout-margin(calc(12 / 12), $screen-large); + @include layout-margin(calc(4 / 12), $screen-xlarge); + @include layout-margin(calc(5 / 12), $screen-xxlarge); + @include layout-margin(calc(5 / 12), $screen-xxxlarge); + + &__ring-name { + text-transform: none; + margin: 0; + scroll-margin-top: $subnavHeight; + font-family: $baseFontFamily; + } - @include media-query-xlarge { - max-width: 40%; - margin-top: 0 !important; - } + @include media-query-xlarge { + max-width: 40%; + margin-top: 0 !important; + } - &__container { - display: flex; - justify-content: center; + &__container { + display: flex; + justify-content: center; - @include media-query-xlarge { - display: block; - justify-content: unset; - } + @include media-query-xlarge { + display: block; + justify-content: unset; } } +} + +.blip-list { + width: 100%; + margin-bottom: 64px; - .blip-list { + &__item { width: 100%; - margin-bottom: 64px; - &__item { - width: 100%; + &:hover, + &.highlight { + background-color: $mist; + } - &:hover, - &.highlight { + &-container { + &.expand { background-color: $mist; } - &-container { - &.expand { - background-color: $mist; - } - - &.expand &__name { - &-arrow { - rotate: -135deg; - margin-top: 10px; - } - } - - &.expand &__description { - display: block; + &.expand &__name { + &-arrow { + rotate: -135deg; + margin-top: 10px; } + } - &__name { - padding: 20px; - width: 100%; - border: none; - background-color: transparent; - border-bottom: 1px solid $mist-s20; - text-align: unset; - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - scroll-margin-top: $subnavHeight; - - & > * { - pointer-events: none; - } - - &-value { - pointer-events: none; - display: inline-block; - width: 90%; - font-size: 1rem; - font-family: $baseFontFamily; - - @include media-query-large { - font-size: 1.125rem; - } - } + &.expand &__description { + display: block; + } - &-arrow { - width: 8px; - height: 8px; - display: inline-flex; - rotate: 45deg; - border: 1px solid $flamingo; - border-width: 0 2px 2px 0; - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; - } + &__name { + padding: 20px; + width: 100%; + border: none; + background-color: transparent; + border-bottom: 1px solid $mist-s20; + text-align: unset; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + scroll-margin-top: $subnavHeight; + + & > * { + pointer-events: none; } - &__description { - display: none; - padding: 20px; + &-value { + pointer-events: none; + display: inline-block; + width: 90%; font-size: 1rem; font-family: $baseFontFamily; - line-height: 36px; @include media-query-large { font-size: 1.125rem; } + } - & > * { - font-family: inherit !important; - font-size: inherit !important; - line-height: inherit !important; - margin: 0 !important; - } + &-arrow { + width: 8px; + height: 8px; + display: inline-flex; + rotate: 45deg; + border: 1px solid $flamingo; + border-width: 0 2px 2px 0; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + } + } + + &__description { + display: none; + padding: 20px; + font-size: 1rem; + font-family: $baseFontFamily; + line-height: 36px; + + @include media-query-large { + font-size: 1.125rem; + } + + & > * { + font-family: inherit !important; + font-size: inherit !important; + line-height: inherit !important; + margin: 0 !important; } } } diff --git a/src/stylesheets/_quadrants.scss b/src/stylesheets/_quadrants.scss index 49f92b079..cd7912828 100644 --- a/src/stylesheets/_quadrants.scss +++ b/src/stylesheets/_quadrants.scss @@ -3,50 +3,48 @@ margin: 0 auto; position: relative; - @if $UIRefresh2022 { - width: 100%; + width: 100%; - @include media-query-xlarge { - width: 80%; - min-width: calc($quadrantWidth * 2 + $quadrantsGap); - } + @include media-query-xlarge { + width: 80%; + min-width: calc($quadrantWidth * 2 + $quadrantsGap); + } - @include layout-margin(calc(12 / 12), $screen-xlarge); - @include layout-margin(calc(12 / 12), $screen-xxlarge); - @include layout-margin(calc(12 / 12), $screen-xxxlarge); + @include layout-margin(calc(12 / 12), $screen-xlarge); + @include layout-margin(calc(12 / 12), $screen-xxlarge); + @include layout-margin(calc(12 / 12), $screen-xxxlarge); + + .no-blip-text { + display: none; + text-align: center; + font-size: 24px; + font-weight: bold; + } + &.no-blips { + height: auto !important; .no-blip-text { - display: none; - text-align: center; - font-size: 24px; - font-weight: bold; + display: block; } - &.no-blips { - height: auto !important; - .no-blip-text { - display: block; - } - - .quadrant-group, - .quadrant-table, - .radar-legends { - display: none !important; - } + .quadrant-group, + .quadrant-table, + .radar-legends { + display: none !important; } + } - .mobile { - display: block; - } + .mobile { + display: block; + } - &:not(.mobile) { - display: none; - } + &:not(.mobile) { + display: none; + } - @include media-query-xlarge { - &:not(.mobile) { - display: block; - } + @include media-query-xlarge { + &:not(.mobile) { + display: block; } } @@ -56,20 +54,17 @@ position: absolute; left: 0; right: 0; + display: none; + transition: none; - @if $UIRefresh2022 { - display: none; - transition: none; - - margin: 0 auto; + margin: 0 auto; - &.enable-transition { - transition: all 1s ease; - } + &.enable-transition { + transition: all 1s ease; + } - @include media-query-medium { - display: block; - } + @include media-query-medium { + display: block; } &.quadrant-view { @@ -90,10 +85,8 @@ } } - @if $UIRefresh2022 { - pointer-events: none; - z-index: 10; - } + pointer-events: none; + z-index: 10; .legend { visibility: hidden; @@ -123,22 +116,20 @@ } } - @if $UIRefresh2022 { - path { - &.ring-arc-3, - &.ring-arc-2, - &.ring-arc-1, - &.ring-arc-0 { - stroke: $mist-s30; - stroke-width: 1; - fill: white; - } + path { + &.ring-arc-3, + &.ring-arc-2, + &.ring-arc-1, + &.ring-arc-0 { + stroke: $mist-s30; + stroke-width: 1; + fill: white; } + } - .quadrant-group { - transition: opacity 0.5s ease-out; - pointer-events: all; - } + .quadrant-group { + transition: opacity 0.5s ease-out; + pointer-events: all; } .blip-link { @@ -195,49 +186,47 @@ } } - @if $UIRefresh2022 { - circle, - polygon, - rect, - path { - &.first { - fill: $sapphire-dark; - stroke: none; - } - - &.second { - fill: $turmeric-dark; - stroke: none; - } + circle, + polygon, + rect, + path { + &.first { + fill: $sapphire-dark; + stroke: none; + } - &.third { - fill: $jade-dark; - stroke: none; - } + &.second { + fill: $turmeric-dark; + stroke: none; + } - &.fourth { - fill: $flamingo-dark; - stroke: none; - } + &.third { + fill: $jade-dark; + stroke: none; } - line { - stroke: white; + &.fourth { + fill: $flamingo-dark; + stroke: none; } + } - text { - &.blip-text { - font-size: 9px; - font-style: italic; - fill: $black; - } + line { + stroke: white; + } - &.line-text { - font-weight: bold; - text-transform: none; - fill: $black; - font-size: 16px; - } + text { + &.blip-text { + font-size: 9px; + font-style: italic; + fill: $black; + } + + &.line-text { + font-weight: bold; + text-transform: none; + fill: $black; + font-size: 16px; } } } @@ -248,9 +237,6 @@ } max-height: 0; - @if not $UIRefresh2022 { - max-width: 0; - } position: absolute; overflow: hidden; z-index: 11; @@ -263,70 +249,38 @@ font-weight: bold; } - @if $UIRefresh2022 { - overflow: clip; - &.first { - float: left; - } - - &.second { - float: left; - } - - &.third { - float: right; - } - - &.fourth { - float: right; - } - } @else { - &.first { - &.selected { - float: right; - } - } + overflow: clip; + &.first { + float: left; + } - &.second { - &.selected { - float: left; - } - } + &.second { + float: left; + } - &.third { - &.selected { - float: left; - } - } + &.third { + float: right; + } - &.fourth { - &.selected { - float: right; - } - } + &.fourth { + float: right; } &.selected { position: relative; max-height: 10000px; - - @if not $UIRefresh2022 { - max-width: 40%; - } } - @if $UIRefresh2022 { - max-height: 0; - opacity: 0; - transition: opacity 0.3s ease-out; + max-height: 0; + opacity: 0; + transition: opacity 0.3s ease-out; - &.selected { - opacity: 1; - transition: opacity 1s ease; + &.selected { + opacity: 1; + transition: opacity 1s ease; - @include media-query-medium { - transition: opacity 1s ease 1s; - } + @include media-query-medium { + transition: opacity 1s ease 1s; } } @@ -378,115 +332,113 @@ } } -@if ($UIRefresh2022) { - .radar-legends { - display: none; - - @include media-query-medium { - &.right-view, - &.left-view { - justify-content: unset; - width: unset; - } - - &.sticky { - position: fixed; - } +.radar-legends { + display: none; - display: flex; - align-items: center; - justify-content: center; - margin: $quadrantsGap auto; - width: 100%; - position: absolute; - top: calc($quadrantWidth * 2 + $quadrantsGap); + @include media-query-medium { + &.right-view, + &.left-view { + justify-content: unset; + width: unset; } - img:nth-child(n + 2) { - margin-left: 24px; + &.sticky { + position: fixed; } + + display: flex; + align-items: center; + justify-content: center; + margin: $quadrantsGap auto; + width: 100%; + position: absolute; + top: calc($quadrantWidth * 2 + $quadrantsGap); } - .all-quadrants-mobile { - --quadrant-gap: 12px; - --quadrant-btn-width-mobile: 150px; - --quadrant-btn-height-mobile: 70px; - display: none; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; - align-content: space-between; - margin: auto; - margin-bottom: 42px; + img:nth-child(n + 2) { + margin-left: 24px; + } +} +.all-quadrants-mobile { + --quadrant-gap: 12px; + --quadrant-btn-width-mobile: 150px; + --quadrant-btn-height-mobile: 70px; + display: none; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; + align-content: space-between; + margin: auto; + margin-bottom: 42px; + + &.show-all-quadrants-mobile { + display: flex; + } + @include media-query-medium { + --quadrant-btn-width-mobile: 345px; + --quadrant-btn-height-mobile: 160px; + } + @include media-query-xlarge { + display: none; &.show-all-quadrants-mobile { - display: flex; + display: none; } + } + + width: calc(var(--quadrant-btn-width-mobile) * 2 + var(--quadrant-gap)); + height: calc(var(--quadrant-btn-height-mobile) * 2 + var(--quadrant-gap)); + + .all-quadrants-mobile--btn { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + margin: 3px; + width: var(--quadrant-btn-width-mobile); + height: var(--quadrant-btn-height-mobile); + background-size: 100%; + background-repeat: no-repeat; + font-size: 16px; + font-weight: bold; + color: white; + border: none; + @include media-query-medium { - --quadrant-btn-width-mobile: 345px; - --quadrant-btn-height-mobile: 160px; + font-size: 24px; } - @include media-query-xlarge { - display: none; - &.show-all-quadrants-mobile { - display: none; - } + + &::after { + content: url('/images/arrow-white-icon.svg'); + margin: 4px 4px 0; } - width: calc(var(--quadrant-btn-width-mobile) * 2 + var(--quadrant-gap)); - height: calc(var(--quadrant-btn-height-mobile) * 2 + var(--quadrant-gap)); - - .all-quadrants-mobile--btn { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - margin: 3px; - width: var(--quadrant-btn-width-mobile); - height: var(--quadrant-btn-height-mobile); - background-size: 100%; - background-repeat: no-repeat; - font-size: 16px; - font-weight: bold; - color: white; - border: none; + .btn-text-wrapper { + text-align: left; + word-break: break-word; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; @include media-query-medium { - font-size: 24px; - } - - &::after { - content: url('/images/arrow-white-icon.svg'); - margin: 4px 4px 0; - } - - .btn-text-wrapper { - text-align: left; - word-break: break-word; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - - @include media-query-medium { - max-width: 60%; - max-height: 60px; - } + max-width: 60%; + max-height: 60px; } } + } - #first-quadrant-mobile { - background-color: $sapphire; - } - #second-quadrant-mobile { - background-color: $turmeric; - } - #third-quadrant-mobile { - background-color: $jade; - } - #fourth-quadrant-mobile { - background-color: $flamingo; - } + #first-quadrant-mobile { + background-color: $sapphire; + } + #second-quadrant-mobile { + background-color: $turmeric; + } + #third-quadrant-mobile { + background-color: $jade; + } + #fourth-quadrant-mobile { + background-color: $flamingo; } } diff --git a/src/stylesheets/_quadrantsubnav.scss b/src/stylesheets/_quadrantsubnav.scss index ce9db9a0f..84c10d19d 100644 --- a/src/stylesheets/_quadrantsubnav.scss +++ b/src/stylesheets/_quadrantsubnav.scss @@ -1,165 +1,163 @@ @import 'colors'; @import 'layout'; -@if $UIRefresh2022 { - .quadrant-subnav { - font-size: 1.125rem; +.quadrant-subnav { + font-size: 1.125rem; + width: 100%; + background-color: $mist; + display: flex; + flex-direction: column; + height: fit-content; + min-height: $subnavHeight; + + @include media-query-xlarge { + flex-direction: row; + justify-content: center; + height: $subnavHeight; + font-size: 1.25rem; + } + + &.sticky { + position: fixed; + top: 0; width: 100%; - background-color: $mist; - display: flex; - flex-direction: column; + z-index: 999; + } + + &__dropdown { height: fit-content; min-height: $subnavHeight; + font-weight: 630; + display: inline-flex; + border-bottom: 1px solid $mist-s20; + align-items: center; + flex-direction: row; + justify-content: center; + gap: 8px; + cursor: pointer; + + &-arrow { + width: 8px; + height: 8px; + display: inline-flex; + rotate: 45deg; + border: 1px solid $flamingo; + border-width: 0 2px 2px 0; + margin-top: 0; + margin-bottom: 4px; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + + &.rotate { + rotate: -135deg; + margin-bottom: 0; + margin-top: 4px; + } + } @include media-query-xlarge { - flex-direction: row; - justify-content: center; - height: $subnavHeight; - font-size: 1.25rem; + display: none; } + } + + &__list { + display: none; + width: 100%; - &.sticky { - position: fixed; - top: 0; + &.show { + display: flex; + flex-direction: column; width: 100%; - z-index: 999; + list-style-type: none; + margin: 0; + padding: 0; } - &__dropdown { - height: fit-content; + &-item { + width: 100%; min-height: $subnavHeight; - font-weight: 630; display: inline-flex; - border-bottom: 1px solid $mist-s20; align-items: center; - flex-direction: row; + border-bottom: 1px solid $mist-s20; justify-content: center; - gap: 8px; - cursor: pointer; - - &-arrow { - width: 8px; - height: 8px; - display: inline-flex; - rotate: 45deg; - border: 1px solid $flamingo; - border-width: 0 2px 2px 0; - margin-top: 0; - margin-bottom: 4px; - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; - - &.rotate { - rotate: -135deg; - margin-bottom: 0; - margin-top: 4px; - } - } + padding: 0; + height: 100%; + box-sizing: border-box; + font-size: 16px; @include media-query-xlarge { - display: none; - } - } + max-width: 20% !important; + &.active-item { + padding-top: 4px; + border-bottom: 4px solid transparent; + pointer-events: none; + font-weight: bold; + transition: font-weight 0.3s ease-in-out; + + &:nth-child(1) { + border-color: $mist-s30; + } - &__list { - display: none; - width: 100%; + &:nth-child(2) { + border-color: $sapphire; + } - &.show { - display: flex; - flex-direction: column; - width: 100%; - list-style-type: none; - margin: 0; - padding: 0; - } + &:nth-child(3) { + border-color: $turmeric; + } - &-item { - width: 100%; - min-height: $subnavHeight; - display: inline-flex; - align-items: center; - border-bottom: 1px solid $mist-s20; - justify-content: center; - padding: 0; - height: 100%; - box-sizing: border-box; - font-size: 16px; + &:nth-child(4) { + border-color: $jade; + } - @include media-query-xlarge { - max-width: 20% !important; - &.active-item { - padding-top: 4px; - border-bottom: 4px solid transparent; - pointer-events: none; - font-weight: bold; - transition: font-weight 0.3s ease-in-out; - - &:nth-child(1) { - border-color: $mist-s30; - } - - &:nth-child(2) { - border-color: $sapphire; - } - - &:nth-child(3) { - border-color: $turmeric; - } - - &:nth-child(4) { - border-color: $jade; - } - - &:nth-child(5) { - border-color: $flamingo; - } + &:nth-child(5) { + border-color: $flamingo; } } + } - &__button { - text-decoration: none; - border: none; - font: inherit; - cursor: pointer; - background-color: $mist; - - @include media-query-xlarge { - padding: 15px 40px; - margin: 0 1px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + &__button { + text-decoration: none; + border: none; + font: inherit; + cursor: pointer; + background-color: $mist; + + @include media-query-xlarge { + padding: 15px 40px; + margin: 0 1px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } + } - @include media-query-xlarge { - height: 100%; - display: flex; + @include media-query-xlarge { + height: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + + &.show { flex-direction: row; - justify-content: center; - align-items: center; - margin: 0; - padding: 0; + } - &.show { - flex-direction: row; - } + &-item { + width: unset; + min-height: unset; + border: none; - &-item { - width: unset; - min-height: unset; - border: none; + &:not(.active-item):hover { + color: $flamingo-s40; + text-decoration: underline; + text-underline-offset: 6px; - &:not(.active-item):hover { + & > * { color: $flamingo-s40; - text-decoration: underline; - text-underline-offset: 6px; - - & > * { - color: $flamingo-s40; - } } } } diff --git a/src/stylesheets/_search.scss b/src/stylesheets/_search.scss index a32e80400..fc75f0e8f 100644 --- a/src/stylesheets/_search.scss +++ b/src/stylesheets/_search.scss @@ -1,104 +1,102 @@ @import 'colors'; @import 'layout'; -@if $UIRefresh2022 { - .graph-header { - display: flex; - flex-direction: column; - height: auto; +.graph-header { + display: flex; + flex-direction: column; + height: auto; - @include media-query-large { - align-items: center; - } + @include media-query-large { + align-items: center; } +} - .search-container { - height: auto; - margin: 48px auto 40px; - display: flex; - justify-content: center; - align-items: center; +.search-container { + height: auto; + margin: 48px auto 40px; + display: flex; + justify-content: center; + align-items: center; - &.sticky-offset { - margin-top: 108px; - } + &.sticky-offset { + margin-top: 108px; + } - @include layout-margin(1, $screen-small); - @include layout-margin(calc(10 / 12), $screen-large); - @include layout-margin(calc(10 / 12), $screen-xlarge); - @include layout-margin(calc(10 / 12), $screen-xxlarge); - @include layout-margin(calc(8 / 12), $screen-xxxlarge); + @include layout-margin(1, $screen-small); + @include layout-margin(calc(10 / 12), $screen-large); + @include layout-margin(calc(10 / 12), $screen-xlarge); + @include layout-margin(calc(10 / 12), $screen-xxlarge); + @include layout-margin(calc(8 / 12), $screen-xxxlarge); - @include media-query-medium { - height: 48px; - margin: 64px auto 48px; + @include media-query-medium { + height: 48px; + margin: 64px auto 48px; - &.sticky-offset { - margin-top: 124px; - } + &.sticky-offset { + margin-top: 124px; } + } - @include media-query-large { - margin: 72px auto 48px; + @include media-query-large { + margin: 72px auto 48px; - &.sticky-offset { - margin-top: 132px; - } + &.sticky-offset { + margin-top: 132px; } + } - @include media-query-xlarge { - margin: 32px auto; + @include media-query-xlarge { + margin: 32px auto; - &.sticky-offset { - margin-top: 92px; - } + &.sticky-offset { + margin-top: 92px; } + } - @include media-query-xxlarge { - margin: 40px auto; + @include media-query-xxlarge { + margin: 40px auto; - &.sticky-offset { - margin-top: 100px; - } + &.sticky-offset { + margin-top: 100px; } + } - &__input { - color: $wave; - height: 48px; - margin-bottom: 30px; - background: #edf1f3 url(images/search-active-wave.svg) no-repeat 98% center; - font-family: $baseFontFamily; - scroll-margin-top: $subnavHeight; - - @include media-query-medium { - height: 100%; - margin-bottom: 0; - flex-grow: 1; - } + &__input { + color: $wave; + height: 48px; + margin-bottom: 30px; + background: #edf1f3 url(images/search-active-wave.svg) no-repeat 98% center; + font-family: $baseFontFamily; + scroll-margin-top: $subnavHeight; + + @include media-query-medium { + height: 100%; + margin-bottom: 0; + flex-grow: 1; } } +} - ul.ui-autocomplete { - max-height: 196px !important; - z-index: 999; - - li div { - height: 48px; - display: flex; - align-items: center; - padding-left: 16px; - border-bottom: 1px solid #edf1f3; - font-family: $baseFontFamily; - font-size: 16px; - color: $black; - - &.ui-state-active { - background-color: $mist !important; - color: $black !important; - - &:active { - background-color: $mist-light !important; - } +ul.ui-autocomplete { + max-height: 196px !important; + z-index: 999; + + li div { + height: 48px; + display: flex; + align-items: center; + padding-left: 16px; + border-bottom: 1px solid #edf1f3; + font-family: $baseFontFamily; + font-size: 16px; + color: $black; + + &.ui-state-active { + background-color: $mist !important; + color: $black !important; + + &:active { + background-color: $mist-light !important; } } } diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss index f824317fe..edb38ecbf 100644 --- a/src/stylesheets/base.scss +++ b/src/stylesheets/base.scss @@ -33,124 +33,120 @@ body { font: 18px 'Open Sans'; opacity: 0; - @if $UIRefresh2022 { - font-family: $baseFontFamily; - opacity: 1; + font-family: $baseFontFamily; + opacity: 1; - h1 { - font-size: 1.5rem; - font-family: 'Bitter', serif; - text-transform: none; - letter-spacing: normal; + h1 { + font-size: 1.5rem; + font-family: 'Bitter', serif; + text-transform: none; + letter-spacing: normal; - @include media-query-medium { - font-size: 2rem; - } + @include media-query-medium { + font-size: 2rem; + } - @include media-query-large { - font-size: 2.5rem; - } + @include media-query-large { + font-size: 2.5rem; + } - @include media-query-xxlarge { - font-size: 3rem; - } + @include media-query-xxlarge { + font-size: 3rem; + } - @include media-query-xxxlarge { - font-size: 3.5rem; - } + @include media-query-xxxlarge { + font-size: 3.5rem; } + } + + h2 { + font-size: 1.25rem; + font-weight: 630; + font-family: 'Inter', serif; + text-transform: none; + letter-spacing: normal; - h2 { + @include media-query-medium { font-size: 1.25rem; - font-weight: 630; - font-family: 'Inter', serif; - text-transform: none; - letter-spacing: normal; - - @include media-query-medium { - font-size: 1.25rem; - } - - @include media-query-large { - font-size: 1.5rem; - } - - @include media-query-xlarge { - font-size: 1.5rem; - } - - @include media-query-xxlarge { - font-size: 2rem; - } - - @include media-query-xxxlarge { - font-size: 2rem; - } } - p { - font-size: 1rem; - font-family: $baseFontFamily; + @include media-query-large { + font-size: 1.5rem; + } - @include media-query-xxlarge { - font-size: 1.125rem; - } + @include media-query-xlarge { + font-size: 1.5rem; } - a { - color: $link-normal; - border-color: $link-normal; + @include media-query-xxlarge { + font-size: 2rem; + } - &:hover { - color: $link-hover; - border-color: $link-hover; - } + @include media-query-xxxlarge { + font-size: 2rem; } } - -webkit-font-smoothing: antialiased; - margin: 0; - } - - @if $UIRefresh2022 { - .d3-tip { - font-size: 12px; - display: block; - padding: 12px; - background: $wave; - color: $white; - pointer-events: none; - z-index: 20; - max-width: 170px; - word-wrap: break-word; - white-space: pre-line; - line-height: 2; - border-radius: unset; + p { + font-size: 1rem; + font-family: $baseFontFamily; - @include media-query-medium { - max-width: 250px; + @include media-query-xxlarge { + font-size: 1.125rem; } } - .d3-tip:after { - box-sizing: border-box; - font-size: 10px; - width: 100%; - color: $wave; - position: absolute; - pointer-events: none; - } + a { + color: $link-normal; + border-color: $link-normal; - .d3-tip.n { - margin: -10px 0 0; + &:hover { + color: $link-hover; + border-color: $link-hover; + } } - .d3-tip.n:after { - content: '\25BC'; - margin: -3px 0 0; - top: 100%; - left: 0; - text-align: center; + -webkit-font-smoothing: antialiased; + margin: 0; + } + + .d3-tip { + font-size: 12px; + display: block; + padding: 12px; + background: $wave; + color: $white; + pointer-events: none; + z-index: 20; + max-width: 170px; + word-wrap: break-word; + white-space: pre-line; + line-height: 2; + border-radius: unset; + + @include media-query-medium { + max-width: 250px; } } + + .d3-tip:after { + box-sizing: border-box; + font-size: 10px; + width: 100%; + color: $wave; + position: absolute; + pointer-events: none; + } + + .d3-tip.n { + margin: -10px 0 0; + } + + .d3-tip.n:after { + content: '\25BC'; + margin: -3px 0 0; + top: 100%; + left: 0; + text-align: center; + } } diff --git a/src/util/autoComplete.js b/src/util/autoComplete.js index 46bbf7a84..70906efe0 100644 --- a/src/util/autoComplete.js +++ b/src/util/autoComplete.js @@ -1,9 +1,6 @@ const $ = require('jquery') require('jquery-ui/ui/widgets/autocomplete') -const config = require('../config') -const featureToggles = config().featureToggles - $.widget('custom.radarcomplete', $.ui.autocomplete, { _create: function () { this._super() @@ -31,30 +28,17 @@ const AutoComplete = (el, quadrants, cb) => { return [...acc, ...quadrant.quadrant.blips().map((blip) => ({ blip, quadrant }))] }, []) - if (featureToggles.UIRefresh2022) { - $(el).autocomplete({ - appendTo: '.search-container', - source: (request, response) => { - const matches = blips.filter(({ blip }) => { - const searchable = `${blip.name()} ${blip.description()}`.toLowerCase() - return request.term.split(' ').every((term) => searchable.includes(term.toLowerCase())) - }) - response(matches.map((item) => ({ ...item, value: item.blip.name() }))) - }, - select: cb.bind({}), - }) - } else { - $(el).radarcomplete({ - source: (request, response) => { - const matches = blips.filter(({ blip }) => { - const searchable = `${blip.name()} ${blip.description()}`.toLowerCase() - return request.term.split(' ').every((term) => searchable.includes(term.toLowerCase())) - }) - response(matches.map((item) => ({ ...item, value: item.blip.name() }))) - }, - select: cb.bind({}), - }) - } + $(el).autocomplete({ + appendTo: '.search-container', + source: (request, response) => { + const matches = blips.filter(({ blip }) => { + const searchable = `${blip.name()} ${blip.description()}`.toLowerCase() + return request.term.split(' ').every((term) => searchable.includes(term.toLowerCase())) + }) + response(matches.map((item) => ({ ...item, value: item.blip.name() }))) + }, + select: cb.bind({}), + }) } module.exports = AutoComplete diff --git a/src/util/exceptionMessages.js b/src/util/exceptionMessages.js index bb9e62c1b..b924bcd19 100644 --- a/src/util/exceptionMessages.js +++ b/src/util/exceptionMessages.js @@ -7,8 +7,7 @@ const ExceptionMessages = { MISSING_CONTENT: 'Document is missing content.', LESS_THAN_FOUR_QUADRANTS: 'There are less than 4 quadrant names listed in your data. Check the quadrant column for errors.', - SHEET_NOT_FOUND: 'Oops! We can’t find the Google Sheet you’ve entered. Can you check the URL?', - SHEET_NOT_FOUND_NEW: 'Oops! We can’t find the Google Sheet you’ve entered, please check the URL of your sheet.', + SHEET_NOT_FOUND: 'Oops! We can’t find the Google Sheet you’ve entered, please check the URL of your sheet.', UNAUTHORIZED: 'UNAUTHORIZED', INVALID_CONFIG: 'Unexpected number of quadrants or rings. Please check in the configuration.', INVALID_JSON_CONTENT: 'Invalid content of JSON file. Please check the content of file.', diff --git a/src/util/factory.js b/src/util/factory.js index 5cad3b873..647eb95e6 100644 --- a/src/util/factory.js +++ b/src/util/factory.js @@ -19,73 +19,11 @@ const ContentValidator = require('./contentValidator') const Sheet = require('./sheet') const ExceptionMessages = require('./exceptionMessages') const GoogleAuth = require('./googleAuth') -const config = require('../config') -const featureToggles = config().featureToggles const { getDocumentOrSheetId, getSheetName } = require('./urlUtils') const { getGraphSize, graphConfig, isValidConfig } = require('../graphing/config') const InvalidConfigError = require('../exceptions/invalidConfigError') const InvalidContentError = require('../exceptions/invalidContentError') const FileNotFoundError = require('../exceptions/fileNotFoundError') -const plotRadar = function (title, blips, currentRadarName, alternativeRadars) { - if (title.endsWith('.csv')) { - title = title.substring(0, title.length - 4) - } - if (title.endsWith('.json')) { - title = title.substring(0, title.length - 5) - } - document.title = title - d3.selectAll('.loading').remove() - - var rings = _.map(_.uniqBy(blips, 'ring'), 'ring') - var ringMap = {} - var maxRings = 4 - - _.each(rings, function (ringName, i) { - if (i === maxRings) { - throw new MalformedDataError(ExceptionMessages.TOO_MANY_RINGS) - } - ringMap[ringName] = new Ring(ringName, i) - }) - - var quadrants = {} - _.each(blips, function (blip) { - if (!quadrants[blip.quadrant]) { - quadrants[blip.quadrant] = new Quadrant(blip.quadrant[0].toUpperCase() + blip.quadrant.slice(1)) - } - quadrants[blip.quadrant].add( - new Blip( - blip.name, - ringMap[blip.ring], - blip.isNew.toLowerCase() === 'true', - blip.status, - blip.topic, - blip.description, - ), - ) - }) - - var radar = new Radar() - _.each(quadrants, function (quadrant) { - radar.addQuadrant(quadrant) - }) - - if (alternativeRadars !== undefined || true) { - alternativeRadars.forEach(function (sheetName) { - radar.addAlternative(sheetName) - }) - } - - if (currentRadarName !== undefined || true) { - radar.setCurrentSheet(currentRadarName) - } - - const size = featureToggles.UIRefresh2022 - ? getGraphSize() - : window.innerHeight - 133 < 620 - ? 620 - : window.innerHeight - 133 - new GraphingRadar(size, radar).init().plot() -} function validateInputQuadrantOrRingName(allQuadrantsOrRings, quadrantOrRing) { const quadrantOrRingNames = Object.keys(allQuadrantsOrRings) @@ -138,8 +76,7 @@ const plotRadarGraph = function (title, blips, currentRadarName, alternativeRada radar.setCurrentSheet(currentRadarName) - const graphSize = window.innerHeight - 133 < 620 ? 620 : window.innerHeight - 133 - const size = featureToggles.UIRefresh2022 ? getGraphSize() : graphSize + const size = getGraphSize() new GraphingRadar(size, radar).init().plot() } @@ -150,7 +87,7 @@ const GoogleSheet = function (sheetReference, sheetName) { var sheet = new Sheet(sheetReference) sheet.validate(function (error, apiKeyEnabled) { if (error instanceof SheetNotFoundError) { - plotErrorMessage(error, 'sheet') + plotErrorMessage(error) return } @@ -171,10 +108,9 @@ const GoogleSheet = function (sheetReference, sheetName) { const all = values const header = all.shift() var blips = _.map(all, (blip) => new InputSanitizer().sanitizeForProtectedSheet(blip, header)) - const title = featureToggles.UIRefresh2022 ? documentTitle : documentTitle + ' - ' + sheetName - featureToggles.UIRefresh2022 - ? plotRadarGraph(title, blips, sheetName, sheetNames) - : plotRadar(title, blips, sheetName, sheetNames) + const title = documentTitle + + plotRadarGraph(title, blips, sheetName, sheetNames) } self.authenticate = function (force = false, apiKeyEnabled, callback) { @@ -191,9 +127,9 @@ const GoogleSheet = function (sheetReference, sheetName) { self.error = true plotUnauthorizedErrorMessage() } else if (error instanceof MalformedDataError) { - plotErrorMessage(error, 'sheet') + plotErrorMessage(error) } else { - plotErrorMessage(sheet.createSheetNotFoundError(), 'sheet') + plotErrorMessage(sheet.createSheetNotFoundError()) } }) if (callback) { @@ -217,9 +153,9 @@ const CSVDocument = function (url) { self.build = function () { d3.csv(url) .then(createBlips) - .catch((exception) => { + .catch(() => { const fileNotFoundError = new FileNotFoundError(`Oops! We can't find the CSV file you've entered`) - plotErrorMessage(featureToggles.UIRefresh2022 ? fileNotFoundError : exception, 'csv') + plotErrorMessage(fileNotFoundError) }) } @@ -231,12 +167,10 @@ const CSVDocument = function (url) { contentValidator.verifyContent() contentValidator.verifyHeaders() var blips = _.map(data, new InputSanitizer().sanitize) - featureToggles.UIRefresh2022 - ? plotRadarGraph(FileName(url), blips, 'CSV File', []) - : plotRadar(FileName(url), blips, 'CSV File', []) + plotRadarGraph(FileName(url), blips, 'CSV File', []) } catch (exception) { const invalidContentError = new InvalidContentError(ExceptionMessages.INVALID_CSV_CONTENT) - plotErrorMessage(featureToggles.UIRefresh2022 ? invalidContentError : exception, 'csv') + plotErrorMessage(invalidContentError) } } @@ -254,9 +188,9 @@ const JSONFile = function (url) { self.build = function () { d3.json(url) .then(createBlips) - .catch((exception) => { + .catch(() => { const fileNotFoundError = new FileNotFoundError(`Oops! We can't find the JSON file you've entered`) - plotErrorMessage(featureToggles.UIRefresh2022 ? fileNotFoundError : exception, 'json') + plotErrorMessage(fileNotFoundError) }) } @@ -267,12 +201,10 @@ const JSONFile = function (url) { contentValidator.verifyContent() contentValidator.verifyHeaders() var blips = _.map(data, new InputSanitizer().sanitize) - featureToggles.UIRefresh2022 - ? plotRadarGraph(FileName(url), blips, 'JSON File', []) - : plotRadar(FileName(url), blips, 'JSON File', []) + plotRadarGraph(FileName(url), blips, 'JSON File', []) } catch (exception) { const invalidContentError = new InvalidContentError(ExceptionMessages.INVALID_JSON_CONTENT) - plotErrorMessage(featureToggles.UIRefresh2022 ? invalidContentError : exception, 'json') + plotErrorMessage(invalidContentError) } } @@ -310,7 +242,7 @@ const Factory = function () { } window.addEventListener('keydown', function (e) { - if (featureToggles.UIRefresh2022 && e.key === '/') { + if (e.key === '/') { const inputElement = d3.select('input.search-container__input').node() || d3.select('.input-sheet-form input').node() @@ -338,22 +270,6 @@ const Factory = function () { sheet = GoogleSheet(paramId, sheetName) sheet.init().build() } else { - if (!featureToggles.UIRefresh2022) { - document.body.style.opacity = '1' - document.body.innerHTML = '' - const content = d3.select('body').append('div').attr('class', 'input-sheet') - plotLogo(content) - const bannerText = - '

Build your own radar

Once you\'ve created your Radar, you can use this service' + - ' to generate an
interactive version of your Technology Radar. Not sure how? Read this first.

' - - plotBanner(content, bannerText) - - plotForm(content) - - plotFooter(content) - } - setDocumentTitle() } } @@ -365,118 +281,27 @@ function setDocumentTitle() { document.title = 'Build your own Radar' } -function plotLoading(content) { - if (!featureToggles.UIRefresh2022) { - document.body.style.opacity = '1' - document.body.innerHTML = '' - content = d3.select('body').append('div').attr('class', 'loading').append('div').attr('class', 'input-sheet') - - setDocumentTitle() - - plotLogo(content) - - var bannerText = - '

Building your radar...

Your Technology Radar will be available in just a few seconds

' - plotBanner(content, bannerText) - plotFooter(content) - } else { - document.querySelector('.helper-description > p').style.display = 'none' - document.querySelector('.input-sheet-form').style.display = 'none' - document.querySelector('.helper-description .loader-text').style.display = 'block' - } -} - -function plotLogo(content) { - content - .append('div') - .attr('class', 'input-sheet__logo') - .html('logo') -} - -function plotFooter(content) { - content - .append('div') - .attr('id', 'footer') - .append('div') - .attr('class', 'footer-content') - .append('p') - .html( - 'Powered by Thoughtworks. ' + - 'By using this service you agree to Thoughtworks\' terms of use. ' + - 'You also agree to our privacy policy, which describes how we will gather, use and protect any personal data contained in your public Google Sheet. ' + - 'This software is open source and available for download and self-hosting.', - ) +function plotLoading() { + document.querySelector('.helper-description > p').style.display = 'none' + document.querySelector('.input-sheet-form').style.display = 'none' + document.querySelector('.helper-description .loader-text').style.display = 'block' } -function plotBanner(content, text) { - content.append('div').attr('class', 'input-sheet__banner').html(text) +function plotErrorMessage(exception) { + showErrorMessage(exception) } -function plotForm(content) { - content - .append('div') - .attr('class', 'input-sheet__form') - .append('p') - .html( - 'Enter the URL of your Google Sheet, CSV or JSON file below…', - ) - - var form = content.select('.input-sheet__form').append('form').attr('method', 'get') - - form - .append('input') - .attr('type', 'text') - .attr('name', 'sheetId') - .attr('placeholder', 'e.g. https://docs.google.com/spreadsheets/d/ or hosted CSV/JSON file') - .attr('required', '') - - form.append('button').attr('type', 'submit').append('a').attr('class', 'button').text('Build my radar') - - form.append('p').html("Need help?") -} - -function plotErrorMessage(exception, fileType) { - if (featureToggles.UIRefresh2022) { - showErrorMessage(exception, fileType) - } else { - const content = d3.select('body').append('div').attr('class', 'input-sheet') - setDocumentTitle() - - plotLogo(content) - - const bannerText = - '

Build your own radar

Once you\'ve created your Radar, you can use this service' + - ' to generate an
interactive version of your Technology Radar. Not sure how? Read this first.

' - - plotBanner(content, bannerText) - - d3.selectAll('.loading').remove() - plotError(exception, fileType) - - plotFooter(content) - } -} - -function plotError(exception, fileType) { +function plotError(exception) { let message let faqMessage = 'Please check FAQs for possible solutions.' - if (featureToggles.UIRefresh2022) { - message = exception.message - if (exception instanceof SheetNotFoundError) { - const href = 'https://www.thoughtworks.com/radar/byor' - faqMessage = `You can also check the FAQs for other possible solutions` - } - if (exception instanceof InvalidConfigError) { - faqMessage = '' - d3.selectAll('.input-sheet-form form input').attr('disabled', true) - } - } else { - const fileTypes = { sheet: 'Google Sheet', json: 'JSON file', csv: 'CSV file' } - const file = fileTypes[fileType] - message = `Oops! We can't find the ${file} you've entered` - if (exception instanceof MalformedDataError) { - message = message.concat(exception.message) - } + message = exception.message + if (exception instanceof SheetNotFoundError) { + const href = 'https://www.thoughtworks.com/radar/byor' + faqMessage = `You can also check the FAQs for other possible solutions` + } + if (exception instanceof InvalidConfigError) { + faqMessage = '' + d3.selectAll('.input-sheet-form form input').attr('disabled', true) } d3.selectAll('.error-container__message').remove() @@ -489,40 +314,21 @@ function plotError(exception, fileType) { document.querySelector('.helper-description > p').style.display = 'block' document.querySelector('.input-sheet-form').style.display = 'block' - - if (!featureToggles.UIRefresh2022) { - let homePageURL = window.location.protocol + '//' + window.location.hostname - homePageURL += window.location.port === '' ? '' : ':' + window.location.port - const homePage = 'GO BACK' - errorContainer.append('div').append('p').html(homePage) - } } -function showErrorMessage(exception, fileType) { +function showErrorMessage(exception) { document.querySelector('.helper-description .loader-text').style.display = 'none' - plotError(exception, fileType) + plotError(exception) } function plotUnauthorizedErrorMessage() { let content const helperDescription = d3.select('.helper-description') - if (!featureToggles.UIRefresh2022) { - content = d3.select('body').append('div').attr('class', 'input-sheet') - setDocumentTitle() + content = d3.select('main') + helperDescription.style('display', 'none') + d3.selectAll('.loader-text').remove() + d3.selectAll('.error-container').remove() - plotLogo(content) - - const bannerText = '

Build your own radar

' - - plotBanner(content, bannerText) - - d3.selectAll('.loading').remove() - } else { - content = d3.select('main') - helperDescription.style('display', 'none') - d3.selectAll('.loader-text').remove() - d3.selectAll('.error-container').remove() - } const currentUser = GoogleAuth.getEmail() let homePageURL = window.location.protocol + '//' + window.location.hostname homePageURL += window.location.port === '' ? '' : ':' + window.location.port @@ -534,8 +340,7 @@ function plotUnauthorizedErrorMessage() { const errorContainer = container.append('div').attr('class', 'error-container__message') errorContainer.append('div').append('p').attr('class', 'error-title').html(message) - const newUi = featureToggles.UIRefresh2022 ? 'switch-account-button-newui' : 'switch-account-button' - const button = errorContainer.append('button').attr('class', `button ${newUi}`).text('Switch account') + const button = errorContainer.append('button').attr('class', 'button switch-account-button').text('Switch account') errorContainer .append('div') @@ -548,10 +353,10 @@ function plotUnauthorizedErrorMessage() { sheet = GoogleSheet(getDocumentOrSheetId(), getSheetName()) sheet.authenticate(true, false, () => { - if (featureToggles.UIRefresh2022 && !sheet.error) { + if (!sheet.error) { helperDescription.style('display', 'block') errorContainer.remove() - } else if (featureToggles.UIRefresh2022 && sheet.error) { + } else if (sheet.error) { helperDescription.style('display', 'none') } else { content.remove() diff --git a/src/util/sheet.js b/src/util/sheet.js index e84212f54..679437e3d 100644 --- a/src/util/sheet.js +++ b/src/util/sheet.js @@ -2,11 +2,9 @@ const SheetNotFoundError = require('../../src/exceptions/sheetNotFoundError') const UnauthorizedError = require('../../src/exceptions/unauthorizedError') const ExceptionMessages = require('./exceptionMessages') -const config = require('../config') const Sheet = function (sheetReference) { var self = {} - const featureToggles = config().featureToggles ;(function () { var matches = sheetReference.match('https:\\/\\/docs.google.com\\/spreadsheets\\/d\\/(.*?)($|\\/$|\\/.*|\\?.*)') @@ -35,9 +33,7 @@ const Sheet = function (sheetReference) { } self.createSheetNotFoundError = function () { - const exceptionMessage = featureToggles.UIRefresh2022 - ? ExceptionMessages.SHEET_NOT_FOUND_NEW - : ExceptionMessages.SHEET_NOT_FOUND + const exceptionMessage = ExceptionMessages.SHEET_NOT_FOUND return new SheetNotFoundError(exceptionMessage) } diff --git a/webpack.dev.js b/webpack.dev.js index c1ec83944..af6ecced0 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -5,10 +5,8 @@ const postcssPresetEnv = require('postcss-preset-env') const cssnano = require('cssnano') const common = require('./webpack.common.js') -const config = require('./src/config') const { graphConfig, uiConfig } = require('./src/graphing/config') -const featureToggles = config().development.featureToggles const main = ['./src/site.js'] const scssVariables = [] @@ -20,10 +18,6 @@ Object.entries(uiConfig).forEach(function ([key, value]) { scssVariables.push(`$${key}: ${value}px;`) }) -Object.entries(featureToggles).forEach(function ([key, value]) { - scssVariables.push(`$${key}: ${value};`) -}) - module.exports = merge(common, { mode: 'development', entry: { main: main }, diff --git a/webpack.prod.js b/webpack.prod.js index 4eef36d9b..43f607bbe 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -5,10 +5,8 @@ const postcssPresetEnv = require('postcss-preset-env') const cssnano = require('cssnano') const common = require('./webpack.common.js') -const config = require('./src/config') const { graphConfig, uiConfig } = require('./src/graphing/config') -const featureToggles = config().production.featureToggles const main = ['./src/site.js'] const scssVariables = [] @@ -20,10 +18,6 @@ Object.entries(uiConfig).forEach(function ([key, value]) { scssVariables.push(`$${key}: ${value}px;`) }) -Object.entries(featureToggles).forEach(function ([key, value]) { - scssVariables.push(`$${key}: ${value};`) -}) - module.exports = merge(common, { mode: 'production', entry: { main },