From 81b982ac204dea738d7a0e76cdfb1967eddfaf84 Mon Sep 17 00:00:00 2001 From: Kate Higa Date: Fri, 8 Apr 2022 12:57:42 -0700 Subject: [PATCH 1/4] feat: add accDescription along with test page --- demos/journey.html | 45 +++++++++++++++++++ src/diagrams/user-journey/journeyDb.js | 20 +++++++-- src/diagrams/user-journey/journeyRenderer.js | 4 ++ .../user-journey/parser/journey.jison | 2 + 4 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 demos/journey.html diff --git a/demos/journey.html b/demos/journey.html new file mode 100644 index 000000000..177d956ba --- /dev/null +++ b/demos/journey.html @@ -0,0 +1,45 @@ + + + + + + + Mermaid Quick Test Page + + + + + +
+ journey + title My day + accDescription A user journey diagram of a typical day in my life + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 5: Me +
+ + + + + + + \ No newline at end of file diff --git a/src/diagrams/user-journey/journeyDb.js b/src/diagrams/user-journey/journeyDb.js index 0452bd4a8..b45561b95 100644 --- a/src/diagrams/user-journey/journeyDb.js +++ b/src/diagrams/user-journey/journeyDb.js @@ -1,7 +1,11 @@ import mermaidAPI from '../../mermaidAPI'; import * as configApi from '../../config'; +import common from '../common/common'; + +const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig()); let title = ''; +let description = ''; let currentSection = ''; const sections = []; @@ -20,14 +24,22 @@ export const clear = function () { rawTasks.length = 0; }; -export const setTitle = function (txt) { - title = txt; +const setTitle = function (txt) { + title = sanitizeText(txt); }; -export const getTitle = function () { +const getTitle = function () { return title; }; +const setAccDescription = function (txt) { + description = sanitizeText(txt); +}; + +const getAccDescription = function () { + return description; +}; + export const addSection = function (txt) { currentSection = txt; sections.push(txt); @@ -123,6 +135,8 @@ export default { clear, setTitle, getTitle, + setAccDescription, + getAccDescription, addSection, getSections, getTasks, diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js index 7ce2caa68..612a89123 100644 --- a/src/diagrams/user-journey/journeyRenderer.js +++ b/src/diagrams/user-journey/journeyRenderer.js @@ -4,6 +4,7 @@ import journeyDb from './journeyDb'; import svgDraw from './svgDraw'; import { getConfig } from '../../config'; import { configureSvgSize } from '../../utils'; +import addSVGAccessibilityFields from '../../accessibility'; parser.yy = journeyDb; @@ -100,6 +101,7 @@ export const draw = function (text, id) { .attr('font-weight', 'bold') .attr('y', 25); } + const height = box.stopy - box.starty + 2 * conf.diagramMarginY; const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX; @@ -120,6 +122,8 @@ export const draw = function (text, id) { diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`); diagram.attr('preserveAspectRatio', 'xMinYMin meet'); diagram.attr('height', height + extraVertForTitle + 25); + + addSVGAccessibilityFields(parser.yy, diagram, id); }; export const bounds = { diff --git a/src/diagrams/user-journey/parser/journey.jison b/src/diagrams/user-journey/parser/journey.jison index e4282ea51..37d493d3e 100644 --- a/src/diagrams/user-journey/parser/journey.jison +++ b/src/diagrams/user-journey/parser/journey.jison @@ -25,6 +25,7 @@ "journey" return 'journey'; "title"\s[^#\n;]+ return 'title'; +"accDescription"\s[^#\n;]+ return 'accDescription'; "section"\s[^#:\n;]+ return 'section'; [^#:\n;]+ return 'taskName'; ":"[^#\n;]+ return 'taskData'; @@ -64,6 +65,7 @@ directive statement : title {yy.setTitle($1.substr(6));$$=$1.substr(6);} + | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);} | section {yy.addSection($1.substr(8));$$=$1.substr(8);} | taskName taskData {yy.addTask($1, $2);$$='task';} | directive From 6b4eaa185e76431f619dc068b7b679890833be9d Mon Sep 17 00:00:00 2001 From: Kate Higa Date: Fri, 8 Apr 2022 13:07:52 -0700 Subject: [PATCH 2/4] add journey tests for accDescription --- src/diagrams/user-journey/journeyDb.spec.js | 3 +++ src/diagrams/user-journey/parser/journey.spec.js | 10 ++++++++++ 2 files changed, 13 insertions(+) diff --git a/src/diagrams/user-journey/journeyDb.spec.js b/src/diagrams/user-journey/journeyDb.spec.js index f97e1eb0a..87ae4fccb 100644 --- a/src/diagrams/user-journey/journeyDb.spec.js +++ b/src/diagrams/user-journey/journeyDb.spec.js @@ -36,6 +36,7 @@ describe('when using the journeyDb', function () { fn | expected ${'getTasks'} | ${[]} ${'getTitle'} | ${''} + ${'getAccDescription'} | ${''} ${'getSections'} | ${[]} `('should clear $fn', ({ fn, expected }) => { expect(journeyDb[fn]()).toEqual(expected); @@ -44,6 +45,7 @@ describe('when using the journeyDb', function () { describe('tasks and actors should be added', function () { journeyDb.setTitle('Shopping'); + journeyDb.setAccDescription('A user journey for family shopping'); journeyDb.addSection('Journey to the shops'); journeyDb.addTask('Get car keys', ':5:Dad'); journeyDb.addTask('Go to car', ':3:Dad, Mum, Child#1, Child#2'); @@ -52,6 +54,7 @@ describe('when using the journeyDb', function () { journeyDb.addTask('Go shopping', ':5:Mum'); expect(journeyDb.getTitle()).toEqual('Shopping'); + expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping'); expect(journeyDb.getTasks()).toEqual([ { score: 5, diff --git a/src/diagrams/user-journey/parser/journey.spec.js b/src/diagrams/user-journey/parser/journey.spec.js index 71dd03a17..74649dbf4 100644 --- a/src/diagrams/user-journey/parser/journey.spec.js +++ b/src/diagrams/user-journey/parser/journey.spec.js @@ -19,6 +19,16 @@ describe('when parsing a journey diagram it', function () { expect(parserFnConstructor(str)).not.toThrow(); }); + it('it should handle an accDescription', function () { + const str = + 'journey\n' + + 'accDescription A user journey for family shopping\n'+ + 'title Adding journey diagram functionality to mermaid\n' + + 'section Order from website'; + + expect(parserFnConstructor(str)).not.toThrow(); + }); + it('should handle a section definition', function () { const str = 'journey\n' + From 6a57c99335d5c3f837d713f45e93f39aa1396149 Mon Sep 17 00:00:00 2001 From: Kate Higa Date: Fri, 8 Apr 2022 13:24:33 -0700 Subject: [PATCH 3/4] fix lint issues --- src/diagrams/user-journey/journeyDb.spec.js | 11 +++++------ src/diagrams/user-journey/parser/journey.spec.js | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/diagrams/user-journey/journeyDb.spec.js b/src/diagrams/user-journey/journeyDb.spec.js index 87ae4fccb..b4738fdac 100644 --- a/src/diagrams/user-journey/journeyDb.spec.js +++ b/src/diagrams/user-journey/journeyDb.spec.js @@ -31,13 +31,12 @@ describe('when using the journeyDb', function () { journeyDb.addTask('test2', '1: id2'); journeyDb.clear(); }); - it.each` - fn | expected - ${'getTasks'} | ${[]} - ${'getTitle'} | ${''} - ${'getAccDescription'} | ${''} - ${'getSections'} | ${[]} + fn | expected + ${'getTasks'} | ${[]} + ${'getTitle'} | ${''} + ${'getAccDescription'} | ${''} + ${'getSections'} | ${[]} `('should clear $fn', ({ fn, expected }) => { expect(journeyDb[fn]()).toEqual(expected); }); diff --git a/src/diagrams/user-journey/parser/journey.spec.js b/src/diagrams/user-journey/parser/journey.spec.js index 74649dbf4..6cf604caf 100644 --- a/src/diagrams/user-journey/parser/journey.spec.js +++ b/src/diagrams/user-journey/parser/journey.spec.js @@ -22,7 +22,7 @@ describe('when parsing a journey diagram it', function () { it('it should handle an accDescription', function () { const str = 'journey\n' + - 'accDescription A user journey for family shopping\n'+ + 'accDescription A user journey for family shopping\n' + 'title Adding journey diagram functionality to mermaid\n' + 'section Order from website'; From a7527e6f8838bd24cfe7067010a2913f4a11b5f1 Mon Sep 17 00:00:00 2001 From: Kate Higa Date: Fri, 8 Apr 2022 13:35:48 -0700 Subject: [PATCH 4/4] fix test issue to ensure description is clearable --- src/diagrams/user-journey/journeyDb.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/diagrams/user-journey/journeyDb.js b/src/diagrams/user-journey/journeyDb.js index b45561b95..55ea6ec3b 100644 --- a/src/diagrams/user-journey/journeyDb.js +++ b/src/diagrams/user-journey/journeyDb.js @@ -21,6 +21,7 @@ export const clear = function () { tasks.length = 0; currentSection = ''; title = ''; + description = ''; rawTasks.length = 0; };