diff --git a/.babelrc b/.babelrc index 2d1044e6..c1d5db4a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,11 @@ { "presets": ["@babel/preset-env"], - "plugins": ["handlebars-inline-precompile"] + "plugins": ["handlebars-inline-precompile", + [ + "@vue/babel-plugin-jsx", + { + "mergeProps": false + } + ] + ] } diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml index 3b0e1170..13fdb587 100644 --- a/.github/workflows/deploy-storybook.yml +++ b/.github/workflows/deploy-storybook.yml @@ -20,7 +20,7 @@ jobs: run: npm install - name: Build Storybook - run: npm run build-storybook + run: GH_PAGES=true npm run build-storybook - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 diff --git a/package.json b/package.json index 9aad199b..326e90d0 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "@storybook/testing-library": "^0.2.0", "@storybook/vue3": "^7.4.0", "@storybook/vue3-webpack5": "^7.4.0", + "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0", + "@vue/babel-plugin-jsx": "^1.1.5", "@vue/cli": "^5.0.8", "@vue/compiler-sfc": "^3.3.4", "babel-loader": "^9.1.2", @@ -88,7 +90,6 @@ "dependencies": { "@material-symbols/font-400": "^0.13.0", "@vimeo/player": "^2.20.1", - "fs": "^0.0.1-security", "vue-style-loader": "^4.1.3" } } diff --git a/src/css/3party/canvas-uob.less b/src/css/3party/canvas-uob.less index 1d032aeb..1108e40b 100755 --- a/src/css/3party/canvas-uob.less +++ b/src/css/3party/canvas-uob.less @@ -112,151 +112,6 @@ visibility: visible; } -/* UoB tip, info, warning and question boxes */ -/* -Her er fargene Lisbeth foreslår -#ffeed5 -#fcdecd -#fce3e6 -#e5d4e9 -#c7d3e1 -#d9eef2 -#ecf0d7 -#e3e2e3 -#ededed -*/ - -.uob-tip, -.pfdk-tips, -.uob-warning, -.kpas-lti-warning, -.pfdk-advarsel, -.uob-question, -.pfdk-spsm, -.uob-quote, -.pfdk-sitat, -.uob-box, -.pfdk-boks, -.uob-read, -.pfdk-les, -.pfdk-maal, -.uob-info, -.kpas-lti-info, -.pfdk-info, -.pfdk-important, -.pfdk-viktig, -.pfdk-tid, -.pfdk-verktoy, -.udir-skoleleder, -.udir-kommentar, -.udir-eksempel { - margin-top: 1em; - margin-bottom: 1em; - padding: 0.5em 0.5em 0.5em 62px; - border-radius: 4px; - border-color: silver; - border-style: solid; - border-width: 1px; - background-repeat: no-repeat; - background-position: 4px 4px; - min-height: 50px; - overflow-y: visible; -} -.pfdk-verktoy { - background-color: #ffeed5; - background-image: url('https://udirdit.blob.core.windows.net/bitmaps/pfdk_gear.png'); - background-size: 40px; - background-position-y: 10px; - background-position-x: 10px; -} - -.udir-kommentar { - background-color: #ffffff; - background-image: url('@{SERVER}vector_images/mmooc-icon-comment.svg'); - background-size: 40px; - background-position-y: 10px; - background-position-x: 10px; -} -.udir-eksempel { - background-color: #ffffff; - background-image: url('@{SERVER}vector_images/street-view-solid.svg'); - background-size: 40px; - background-position-y: 10px; - background-position-x: 10px; -} -.udir-skoleleder { - background-color:#E2E3F1; - background-image: url('@{SERVER}vector_images/mmooc-icon-principal.svg'); - background-size: 40px; - background-position-y: 10px; - background-position-x: 10px; -} -.pfdk-tid { - background-color: #fcdecd; - background-image: url('https://udirdit.blob.core.windows.net/bitmaps/pfdk_time.png'); - background-size: 40px; - background-position-x: 10px; -} -.pfdk-maal { - background-color: #fce3e6; - background-image: url('https://udirdit.blob.core.windows.net/bitmaps/pfdk_info.png'); - background-size: 53px; -} -.pfdk-important, -.pfdk-viktig { - background-color: #e5d4e9; - background-image: url('https://udirdit.blob.core.windows.net/bitmaps/pfdk_important.png'); - background-size: 53px; -} -.uob-info, -.kpas-lti-info, -.pfdk-info { - background-color: #c7d3e1; - background-image: url('https://s3.amazonaws.com/SSL_Assets/bham/images/box_info.png'); -} -.uob-tip { - background-color:#FAFAC8; - background-image: url('https://s3.amazonaws.com/SSL_Assets/bham/images/box_tip.png'); - color: black; -} -.pfdk-tips { - background-color: #d9eef2; /* See http://www.w3.org/WAI/RD/2012/text-customization/r11 */ - background-image: url('https://s3.amazonaws.com/SSL_Assets/bham/images/box_tip.png'); - color: black; -} -.uob-read, -.pfdk-les { - background-color: #ecf0d7; - background-image: url('@{SERVER}bitmaps/uia_read.png'); -} -.uob-box { - background-color: #ffffff; - padding: 0.5em 0.5em 0.5em 0.5em; -} -.pfdk-boks { - background-color: #e3e2e3; - padding: 0.5em 0.5em 0.5em 0.5em; -} -.uob-question, -.pfdk-spsm { - background-color: #ededed; - background-image: url('https://s3.amazonaws.com/SSL_Assets/bham/images/box_question.png'); -} -.uob-quote, -.pfdk-sitat { - background-color: #efefef; - background-image: url('https://s3.amazonaws.com/SSL_Assets/bham/images/box_quote66.png'); - padding: 0.5em 62px 0.5em 62px; - position: relative; - top: 0px; - left: 0px; -} -.uob-warning, -.kpas-lti-warning, -.pfdk-advarsel { - background-color: #ffeeee; - background-image: url('https://s3.amazonaws.com/SSL_Assets/bham/images/box_warning.png'); -} .uob-accordion { background-color: #E2E3F1; diff --git a/src/js/3party/uob7.js b/src/js/3party/uob7.js index 69ba9e55..d024c924 100755 --- a/src/js/3party/uob7.js +++ b/src/js/3party/uob7.js @@ -52,8 +52,8 @@ export default (function() { function uobAddComponents() { onElementRendered( - '#content .user_content.enhanced,#content .show-content.enhanced', - function($content) { + "#content .user_content.enhanced,#content .show-content.enhanced", + function ($content) { // Tooltip var re = /\[(.*?)\]\((.*?)\)/g; @@ -62,16 +62,19 @@ export default (function() { //at koden vår har kjørt. Dersom vi skal støtte dette må vi ha en måte å vite når //alle innleggene er lastet inn på. Da kan man kjøre $content.each iterasjon. - - var $tooltipElements = $content.first().filter(function() { + var $tooltipElements = $content.first().filter(function () { return this.innerHTML.match(re); }); $tooltipElements.each(function (i, el) { - $(this).html($(this).html().replace( + $(this).html( + $(this) + .html() + .replace( re, '$1$2' - )) + ) + ); }); // ================================================================================ @@ -82,7 +85,7 @@ export default (function() { // -------------------------------------------------------------------------------- var $tables = $content - .find('table:hidden') + .find("table:hidden") .not("td:first(:contains('[uob-'))"); $tables.show(); @@ -95,8 +98,8 @@ export default (function() { for (i = 0; i < 10; i++) { // Locate the next uob-accordion table. $table = $content - .find('table') - .has('table > tbody > tr > td:contains([uob-accordion])') + .find("table") + .has("table > tbody > tr > td:contains([uob-accordion])") .last(); // Break loop if no more accordions are to be displayed. @@ -105,38 +108,30 @@ export default (function() { // Convert table into HTML for an accordian. $table.before("
"); - $table.find('tbody:first > tr:gt(0) > td').each(function(_idx, _item) { - if ((_idx + 1) % 2) { - // Add heading 4 for accordion bar. - $table.prev().append(''); - $table - .prev() - .children() - .last() - .append( - $(_item) - .text() - .trim() - ); - } + $table + .find("tbody:first > tr:gt(0) > td") + .each(function (_idx, _item) { + if ((_idx + 1) % 2) { + // Add heading 4 for accordion bar. + $table + .prev() + .append( + '' + ); + $table.prev().children().last().append($(_item).text().trim()); + } - if (_idx % 2) { - // Add div for accordion content. - $table.prev().append('
'); - $table - .prev() - .children() - .last() - .append($(_item).contents()); - } - }); + if (_idx % 2) { + // Add div for accordion content. + $table.prev().append('
'); + $table.prev().children().last().append($(_item).contents()); + } + }); // Remove original table from the DOM $table.remove(); } - - // ================================================================================ // Reveal (Part 1/2) // @@ -147,51 +142,47 @@ export default (function() { do { // Locate the next uob-reveal table var $table = $content - .find('table') - .has('table > tbody > tr > td:contains([uob-reveal])') + .find("table") + .has("table > tbody > tr > td:contains([uob-reveal])") .last(); // Break loop if no more reveal tables are to be converted. var tableFound = $table.length; if (tableFound) { - // Convert table into a reveal strSetNum++; - $table.find('tbody:first > tr:gt(0) > td').each(function(_idx, _item) { - var strAnchor = - 'set' + strSetNum + 'reveal' + (_idx - (_idx % 2)) / 2; - - if ((_idx + 1) % 2) { - // Add new reveal button immediately before table - $table.before( - '

' - ); - $table - .prev() - .children() - .append( - $(_item) - .text() - .trim() + $table + .find("tbody:first > tr:gt(0) > td") + .each(function (_idx, _item) { + var strAnchor = + "set" + strSetNum + "reveal" + (_idx - (_idx % 2)) / 2; + + if ((_idx + 1) % 2) { + // Add new reveal button immediately before table + $table.before( + '

' ); - } + $table.prev().children().append($(_item).text().trim()); + } - if (_idx % 2) { - // Add new reveal content immediately before table - $table.before( - '
' - ); - $table.prev().append($(_item).contents()); - } - }); + if (_idx % 2) { + // Add new reveal content immediately before table + $table.before( + '
' + ); + $table.prev().append($(_item).contents()); + } + }); // Remove original table $table.remove(); } - } while(tableFound) + } while (tableFound); // ================================================================================ // RegExp (Part 1/1) // @@ -203,8 +194,8 @@ export default (function() { for (i = 0; i < 10; i++) { // Locate the next uob-regexp table var $table = $content - .find('table') - .has('table > tbody > tr > td:contains([uob-regexp])') + .find("table") + .has("table > tbody > tr > td:contains([uob-regexp])") .last(); // Break loop if no more regexp tables are to be converted. @@ -214,7 +205,7 @@ export default (function() { strSetNum++; // Generate HTML for input and button/anchor controls, and add to the DOM. - var strAnchor = 'RE' + strSetNum; + var strAnchor = "RE" + strSetNum; var strHTML = '

tr:gt(0) > td") + .each(function (_idx, _item) { + var strValue = $(_item).html(); + var strIndex = (_idx - (_idx % 2)) / 2; - if (_idx % 2) { - // set Content - //$("#data" + strAnchor).attr("content" + strIndex, strValue); - strHTML = - '

'; - $('#content' + strAnchor).append(strHTML); - $('#data' + strAnchor + 'ID' + strIndex).append( - $(_item).contents() - ); - } - }); + if ((_idx + 1) % 2) { + // set RegExp + strValue = $(_item).text().trim(); + $("#button" + strAnchor).attr("regexp" + strIndex, strValue); + } + + if (_idx % 2) { + // set Content + //$("#data" + strAnchor).attr("content" + strIndex, strValue); + strHTML = + '
'; + $("#content" + strAnchor).append(strHTML); + $("#data" + strAnchor + "ID" + strIndex).append( + $(_item).contents() + ); + } + }); // Store IDs of input and button to button and input respectively. - $('#button' + strAnchor).attr('regexpInput', 'input' + strAnchor); - $('#input' + strAnchor).attr('regexpButton', 'button' + strAnchor); + $("#button" + strAnchor).attr("regexpInput", "input" + strAnchor); + $("#input" + strAnchor).attr("regexpButton", "button" + strAnchor); // Store default selection in button. - $('#button' + strAnchor).attr('regexpData', 'data' + strAnchor + 'ID0'); - $('#button' + strAnchor).attr( - 'regexpDataRoot', - 'data' + strAnchor + 'ID' + $("#button" + strAnchor).attr( + "regexpData", + "data" + strAnchor + "ID0" + ); + $("#button" + strAnchor).attr( + "regexpDataRoot", + "data" + strAnchor + "ID" ); // Remove original table @@ -299,64 +293,60 @@ export default (function() { var i; for (i = 0; i < acc.length; i++) { - acc[i].addEventListener("click", function() { + acc[i].addEventListener("click", function () { this.classList.toggle("active"); this.firstElementChild.classList.toggle("active"); var panel = this.nextElementSibling; panel.classList.toggle("active"); - if (panel.style.maxHeight){ + if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } setTimeout(function () { - window.dispatchEvent(new Event('resize'));; - }, 200); - + window.dispatchEvent(new Event("resize")); + }, 200); }); } - // Initialise reveal contents. - var $revealBody = $content.find('.uob-reveal'); + var $revealBody = $content.find(".uob-reveal"); if ($revealBody.length) { for (i = 0; i < $revealBody.length; i++) { var strSelector = $revealBody[i].href; - var iHashPos = strSelector.lastIndexOf('#'); + var iHashPos = strSelector.lastIndexOf("#"); if (iHashPos >= 0) { - $(strSelector.slice(iHashPos + 1)).css('display', 'none'); + $(strSelector.slice(iHashPos + 1)).css("display", "none"); } } } // Initialise reveal buttons. - var $revealButton = $content.find('.uob-reveal-button'); + var $revealButton = $content.find(".uob-reveal-button"); if ($revealButton.length) { $revealButton - .button({ icons: { secondary: 'ui-icon-triangle-1-e' } }) - .click(function(event) { + .button({ icons: { secondary: "ui-icon-triangle-1-e" } }) + .click(function (event) { var $button = $(this); - var body = $button.attr('href'); + var body = $button.attr("href"); var options; - if ($(body).css('display') != 'none') { + if ($(body).css("display") != "none") { $(body).slideUp(400); - $(body) - .find('.hide_youtube_embed_link') - .click(); - options = { icons: { secondary: 'ui-icon-triangle-1-e' } }; + $(body).find(".hide_youtube_embed_link").click(); + options = { icons: { secondary: "ui-icon-triangle-1-e" } }; } else { $(body).slideDown(400); - options = { icons: { secondary: 'ui-icon-triangle-1-s' } }; + options = { icons: { secondary: "ui-icon-triangle-1-s" } }; } - $button.button('option', options); + $button.button("option", options); setTimeout(function () { - window.dispatchEvent(new Event('resize'));; - }, 200); + window.dispatchEvent(new Event("resize")); + }, 200); return false; }); @@ -370,76 +360,76 @@ export default (function() { // -------------------------------------------------------------------------------- // Initialise regexp inputs. - var $regexpInput = $content.find('.uob-regexp-input'); + var $regexpInput = $content.find(".uob-regexp-input"); if ($regexpInput.length) { - $regexpInput.focus(function(event) { + $regexpInput.focus(function (event) { var $input = $(this); - var $button = $('#' + $input.attr('regexpButton')); + var $button = $("#" + $input.attr("regexpButton")); - var strData = $button.attr('regexpData'); - var strDataRoot = $button.attr('regexpDataRoot'); + var strData = $button.attr("regexpData"); + var strDataRoot = $button.attr("regexpDataRoot"); - if (strData != '') { - var $data = $('#' + strData); + if (strData != "") { + var $data = $("#" + strData); var options; // Hide current display if visible - if ($data.css('display') != 'none') { + if ($data.css("display") != "none") { $data.slideUp(400); - $data.find('.hide_youtube_embed_link').click(); - options = { icons: { secondary: 'ui-icon-triangle-1-e' } }; - $button.button('option', options); - $button.attr('regexpData', ''); + $data.find(".hide_youtube_embed_link").click(); + options = { icons: { secondary: "ui-icon-triangle-1-e" } }; + $button.button("option", options); + $button.attr("regexpData", ""); } } }); } // Initialise regexp buttons. - var $regexpButton = $content.find('.uob-regexp-button'); + var $regexpButton = $content.find(".uob-regexp-button"); if ($regexpButton.length) { $regexpButton - .button({ icons: { secondary: 'ui-icon-triangle-1-e' } }) - .click(function(event) { + .button({ icons: { secondary: "ui-icon-triangle-1-e" } }) + .click(function (event) { var $button = $(this); - var $input = $('#' + $button.attr('regexpInput')); + var $input = $("#" + $button.attr("regexpInput")); - var strData = $button.attr('regexpData'); - var strDataRoot = $button.attr('regexpDataRoot'); - if (strData == '') strData = strDataRoot + '0'; - var $data = $('#' + strData); + var strData = $button.attr("regexpData"); + var strDataRoot = $button.attr("regexpDataRoot"); + if (strData == "") strData = strDataRoot + "0"; + var $data = $("#" + strData); var options; // Hide current display if visible - if ($data.css('display') != 'none') { + if ($data.css("display") != "none") { $data.slideUp(400); - options = { icons: { secondary: 'ui-icon-triangle-1-e' } }; - $button.button('option', options); - $button.attr('regexpData', ''); + options = { icons: { secondary: "ui-icon-triangle-1-e" } }; + $button.button("option", options); + $button.attr("regexpData", ""); } else { // Locate content to be displayed var strInput = $input.val(); // Loop through regexp looking for a match and identify content. for (i = 0; i < 100; i++) { - var strRegExp = $button.attr('regexp' + i); + var strRegExp = $button.attr("regexp" + i); if (strRegExp == undefined || strRegExp.length == 0) break; - var re = new RegExp('^' + strRegExp.trim() + '$'); + var re = new RegExp("^" + strRegExp.trim() + "$"); - if (strRegExp == 'default' || re.test(strInput)) { - $button.attr('regexpData', '' + strDataRoot + i); - $data = $('#' + strDataRoot + i); + if (strRegExp == "default" || re.test(strInput)) { + $button.attr("regexpData", "" + strDataRoot + i); + $data = $("#" + strDataRoot + i); break; } } $data.slideDown(400); - options = { icons: { secondary: 'ui-icon-triangle-1-s' } }; - $button.button('option', options); + options = { icons: { secondary: "ui-icon-triangle-1-s" } }; + $button.button("option", options); return false; } }); @@ -454,8 +444,8 @@ export default (function() { // Convert uob-rating table to format required for ratings. var $ratingTable = $content - .find('table') - .has('table > tbody > tr > td:contains([uob-rating])'); + .find("table") + .has("table > tbody > tr > td:contains([uob-rating])"); if ($ratingTable.length) { // Cut table from the DOM @@ -464,93 +454,25 @@ export default (function() { // Determine is user is more than a student. var isTeacher = false; - hasAnyRole('teacher', 'admin', function() { + hasAnyRole("teacher", "admin", function () { isTeacher = true; }); // Add rating control to DOM - var strParams = '?page_loc=' + encodeURIComponent(location.pathname); - strParams += '&page_title=' + encodeURIComponent(document.title); - strParams += '&user_id=' + ENV.current_user_id; + var strParams = "?page_loc=" + encodeURIComponent(location.pathname); + strParams += "&page_title=" + encodeURIComponent(document.title); + strParams += "&user_id=" + ENV.current_user_id; strParams += - '&user_name=' + encodeURIComponent(ENV.current_user.display_name); + "&user_name=" + encodeURIComponent(ENV.current_user.display_name); var strRating = ''; - strRating = "
" + strRating + '
'; + strRating = + "
" + strRating + "
"; $content.append(strRating); } - // ================================================================================ - // Boxes - // - // Create boxes - // -------------------------------------------------------------------------------- - - var aBoxTags = [ - 'uob-tip', - 'pfdk-tips', - 'uob-read', - 'pfdk-les', - 'uob-info', - 'pfdk-info', - 'uob-warning', - 'pfdk-advarsel', - 'uob-header', - 'uob-question', - 'pfdk-spsm', - 'uob-quote', - 'pfdk-sitat', - 'uob-box', - 'pfdk-boks', - 'pfdk-info', - 'pfdk-maal', - 'pfdk-important', - 'pfdk-viktig', - 'pfdk-tid', - 'pfdk-verktoy', - 'udir-skoleleder', - 'udir-kommentar', - 'udir-eksempel' - ]; - - do { - var found = false; - var strTag = ""; - var $table = $content - .find("table") - .filter(function(index) { - var str = $(this).find("tr:eq(0) > td").text(); - var patt = /\[(.*)\]/i; - var result = str.match(patt); - - if(!found && result && result[1] && (aBoxTags.indexOf(result[1]) > -1)) { - strTag = result[1]; - found = true; - return true; - } - return false; - }); - - if (found) { - // Add new container immediately before table - if (strTag == 'uob-header') - $table.before('

'); - else if (strTag == 'uob-quote') - $table.before( - '
' - ); - else $table.before('
'); - - // Move content from table to container - $table.prev().append($table.find('tr:eq(1) > td:eq(0)').contents()); - - // Remove original table - $table.remove(); - } - } while(found); - // ================================================================================ // Previews // @@ -567,51 +489,48 @@ export default (function() { // -------------------------------------------------------------------------------- $content - .find('.instructure_file_link_holder.link_holder') - .has('a') - .each(function(_idx, _item) { + .find(".instructure_file_link_holder.link_holder") + .has("a") + .each(function (_idx, _item) { // Initialise varibles var $item = $(_item); - var $anchor = $(_item) - .find('a') - .filter(':first'); - var strHref = $anchor.attr('href') || ''; // if href is not found, set strHref to an empty string. + var $anchor = $(_item).find("a").filter(":first"); + var strHref = $anchor.attr("href") || ""; // if href is not found, set strHref to an empty string. var iScribd = - $(_item).find('.instructure_scribd_file_holder').length || 0; + $(_item).find(".instructure_scribd_file_holder").length || 0; if (iScribd > 0) { - strHref = ''; + strHref = ""; } if (strHref.length > 0) { // Obtain ID of the file (index is 4 or 6 respectivelly for non-draft and draft modes) - var file_id = strHref.split('/')[ - strHref.indexOf('/courses') == 0 ? 4 : 6 - ]; + var file_id = + strHref.split("/")[strHref.indexOf("/courses") == 0 ? 4 : 6]; // Use Canvas API to obtain information about the file being linked. - $.get('/api/v1/files/' + file_id, function(_d) { + $.get("/api/v1/files/" + file_id, function (_d) { // Check that the file type is compatible with the Google viewer. - if ($.isPreviewable(_d['content-type'], 'google') === 1) { + if ($.isPreviewable(_d["content-type"], "google") === 1) { // Initialise variables - var displayName = _d['display_name']; + var displayName = _d["display_name"]; // Create anchor element for the link. Note, _idx is used to make each // link unique. The file_id cannot be used in case when the same file // link appears more than once on a page. - var $a = $(document.createElement('a')) + var $a = $(document.createElement("a")) .attr( - 'href', - 'javascript:uobShowPreviewDocument(' + _idx + ')' + "href", + "javascript:uobShowPreviewDocument(" + _idx + ")" ) - .attr('title', 'Preview ' + displayName) - .attr('id', 'uobPreview' + _idx) - .data('href2', strHref); + .attr("title", "Preview " + displayName) + .attr("id", "uobPreview" + _idx) + .data("href2", strHref); // Create preview icon for the link - var $img = $(document.createElement('img')) - .attr('src', '/images/preview.png') - .attr('alt', 'Preview ' + displayName); + var $img = $(document.createElement("img")) + .attr("src", "/images/preview.png") + .attr("alt", "Preview " + displayName); // Combine the preview icon with the anchor and add them to the DOM. $a.append($img); @@ -631,14 +550,14 @@ export default (function() { // -------------------------------------------------------------------------------- // Create dummy div and add it to the DOM - var $div = $(document.createElement('div')).attr( - 'id', - 'uob-components-loaded' + var $div = $(document.createElement("div")).attr( + "id", + "uob-components-loaded" ); $content.append($div); // Set callback to test for missing div, as occurs when pages are published/unpublished. - onElementMissing('#uob-components-loaded', function($identity) { + onElementMissing("#uob-components-loaded", function ($identity) { uobAddComponents(); }); @@ -653,7 +572,7 @@ export default (function() { console.log(e); } - if(vimeoPlayerReady && !vimeoTranscriptInitialized) { + if (vimeoPlayerReady && !vimeoTranscriptInitialized) { vimeoTranscriptInitialized = true; vimeo.init(); } @@ -676,11 +595,11 @@ export default (function() { function uobShowPreviewDocument(iFileID) { // Initialise object variables to simplify the code. $target is the preview link // and $holder is the preceding or parent SPAN element (if it exists). - var $target = $('#uobPreview' + iFileID); - var $holder = $target.prev('span.link_holder'); + var $target = $("#uobPreview" + iFileID); + var $holder = $target.prev("span.link_holder"); if ($holder.length == 0) { - $holder = $target.parent('span.link_holder'); + $holder = $target.parent("span.link_holder"); } // Check that preceding element is a SPAN with the "link_holder" class. @@ -690,8 +609,8 @@ export default (function() { // Replace href value, add the "scribd_file_preview_link" class and click. $target - .attr('href', $target.data('href2')) - .addClass('scribd_file_preview_link') + .attr("href", $target.data("href2")) + .addClass("scribd_file_preview_link") .click(); } } @@ -711,8 +630,8 @@ export default (function() { var roles = [].slice.call(arguments, 0); var cb = roles.pop(); - if (typeof ENV != 'object') return cb(false); - if (typeof ENV.current_user_roles != 'object') return cb(false); + if (typeof ENV != "object") return cb(false); + if (typeof ENV.current_user_roles != "object") return cb(false); if (ENV.current_user_roles == null) return cb(false); for (var i = 0; i < roles.length; i++) { @@ -732,7 +651,7 @@ export default (function() { if (el.length) return cb(el); if (_attempts >= 60) return; - setTimeout(function() { + setTimeout(function () { onElementRendered(selector, cb, _attempts); }, 200); } @@ -741,17 +660,17 @@ export default (function() { var el = $(selector); if (!el.length) return cb(el); - setTimeout(function() { + setTimeout(function () { onElementMissing(selector, cb); }, 700); } function getQueryVariable(variable) { var query = window.location.search.substring(1); - var vars = query.split('&'); + var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { - var pair = vars[i].split('='); + var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } @@ -761,20 +680,20 @@ export default (function() { } return { - init: function() { + init: function () { // ----------------------------------------------------------------------------------- // Add UoB enhancements to rich content displayed in courses. // ----------------------------------------------------------------------------------- - onPage(/\/(courses|groups)\/\d+/, function() { + onPage(/\/(courses|groups)\/\d+/, function () { uobAddComponents(); }); }, - setVimeoPlayerReady: function() { + setVimeoPlayerReady: function () { vimeoPlayerReady = true; - if(uobInititalized && !vimeoTranscriptInitialized) { + if (uobInititalized && !vimeoTranscriptInitialized) { vimeo.init(); vimeoTranscriptInitialized = true; } - } + }, }; })(); diff --git a/src/js/main.js b/src/js/main.js index 8d006719..b57c0baf 100755 --- a/src/js/main.js +++ b/src/js/main.js @@ -14,6 +14,7 @@ import i18n from './i18n.js'; import kpas from './3party/kpas.js'; import login from './modules/login.js'; import menu from './modules/menu.js'; +import infoboxes from './modules/infoboxes.js' import messagehandler from './3party/messagehandler.js'; import multilanguage from './3party/multilanguage.js' import nrk from './3party/nrk.js'; @@ -631,6 +632,8 @@ jQuery(function($) { uob.init(); nrk.init(); tabs.init(); + infoboxes.init(); + } catch (e) { console.log(e); } diff --git a/src/js/modules/coursepage.js b/src/js/modules/coursepage.js index c5ce3e0a..1a59833f 100755 --- a/src/js/modules/coursepage.js +++ b/src/js/modules/coursepage.js @@ -27,7 +27,7 @@ export default (function() { } } }, - listModulesAndShowProgressBar: function() { + listModulesAndShowProgressBar: function() { // this is where it feeds modules depending on role. api.getModulesForCurrentCourse(function(modules) { var progressHTML = ""; var modulesHTML = ""; diff --git a/src/js/modules/infoboxes.js b/src/js/modules/infoboxes.js new file mode 100644 index 00000000..3def4e53 --- /dev/null +++ b/src/js/modules/infoboxes.js @@ -0,0 +1,174 @@ +import '../../vue/design/_infoboxes.scss'; +import { IconPaths} from '../../vue/components/icon/iconPaths' + + +export default (function () { + function addInfoBoxes() { + onElementRendered( + '#content .user_content.enhanced,#content .show-content.enhanced', + function ($content) { + var aBoxTags = [ + 'uob-tip', + 'pfdk-tips', + 'uob-read', + 'pfdk-les', + 'uob-info', + 'pfdk-info', + 'uob-warning', + 'pfdk-advarsel', + 'uob-header', + 'uob-question', + 'pfdk-spsm', + 'uob-quote', + 'pfdk-sitat', + 'uob-box', + 'pfdk-boks', + 'pfdk-info', + 'pfdk-maal', + 'pfdk-important', + 'pfdk-viktig', + 'pfdk-tid', + 'pfdk-verktoy', + 'udir-skoleleder', + 'udir-kommentar', + 'udir-eksempel' + ] + + do { + var found = false + var strTag = "" + var className="" + var $table = $content + .find("table") + .filter(function (index) { + var str = $(this).find("tr:eq(0) > td").text() + var patt = /\[(.*)\]/i // pattern is used to match text in [] + var result = str.match(patt) + if (!found && result && result[1] && (aBoxTags.indexOf(result[1]) > -1)) { + strTag = result[1] + if (strTag === "pfdk-tips") { + strTag = "uob-tip"; + } else if (strTag === "pfdk-les") { + strTag = "uob-read"; + } else if (strTag === "pfdk-advarsel") { + strTag = "uob-warning"; + } else if (strTag === "pfdk-spsm") { + strTag = "uob-warning"; + } else if (strTag === "pfdk-sitat") { + strTag = "uob-quote"; + } else if (strTag === "pfdk-viktig") { + strTag = "uob-important"; + } else if ( + strTag === "uob-box" || + strTag === "pfdk-boks" || + strTag === "udir-kommentar" + ) { + strTag = "uob-general"; + } + + className= strTag.replace(/.*-/, "udir-info__"); + + found = true + return true + } + return false + }) + + if (found) { + // Define a function that returns the SVG path + function getPath() { + // Replace this with your own logic to generate the path + return "M10 10 H 90 V 90 H 10 Z"; + } + + // Add new container immediately before the table + if (className === "udir-info-header") { + $table.before('

'); + } else { + $table.before('
'); + } + + // Create two child containers and append them to the parent container + const $container = $table.prev(); + $container.append('
'); + const $contentContainer = $( + '
' + ); + $container.append($contentContainer); + + if (!className.includes('general')) { + // Get the path from the function + const path = getIcon(className); + + // Add an SVG with the path element to the icon container + const $iconContainer = $container.find( + ".udir-info__icon-container" + ); + $iconContainer.html( + `` + ); + } + + + // Move content from table to the second child container + $contentContainer.append( + $table.find("tr:eq(1) > td:eq(0)").contents() + ); + + // Remove the original table + $table.remove(); + } + } while (found) + }) + } + + function onPage(regex, fn) { + if (location.pathname.match(regex)) fn() + } + + + return { + init: function () { + onPage(/\/(courses|groups)\/\d+/, function () { + addInfoBoxes() + }) + } + + } +})() + + +function getIcon(iconType) { + const icon = "udir-info__"; + if (iconType === icon + "verktoy") { + return IconPaths['devices']; + } else if (iconType === icon + "tid") { + return IconPaths['alarm']; + } else if (iconType === icon + "maal") { + return IconPaths['flag']; + }else if (iconType === icon + "tip") { + return IconPaths['light_bulb']; + } else if (iconType === icon + "read" || iconType === icon + "question") { + return IconPaths["article"]; + } else if (iconType === icon + "quote") { + return IconPaths["quote"]; + } else if (iconType === icon + "skoleleder") { + return IconPaths["face"]; + } else if ( + iconType === icon + "info" || + iconType === icon + "warning" || + iconType === icon + "important" + ) { + return IconPaths["star"]; + } +} + function onElementRendered(selector, cb, _attempts) { + var el = $(selector); + _attempts = ++_attempts || 1; + if (el.length) return cb(el); + if (_attempts >= 60) return; + + setTimeout(function () { + onElementRendered(selector, cb, _attempts); + }, 200); +} diff --git a/src/vue/.storybook/main.js b/src/vue/.storybook/main.js index 9439ca87..525c7560 100644 --- a/src/vue/.storybook/main.js +++ b/src/vue/.storybook/main.js @@ -1,21 +1,6 @@ const webpack = require("webpack"); const path = require("path"); -const fs = require("fs"); -// Define possible base directories -const possibleBaseDirectories = ["/frontend/", "/"]; - -// Function to find the first existing base directory -function findExistingBaseDirectory() { - for (const baseDir of possibleBaseDirectories) { - if (fs.existsSync(baseDir)) { - console.error('base dir is: ', baseDir); - return baseDir; - } - } - // If none of the directories exist, default to "/" - return "/"; -} module.exports = { stories: ["../**/*.stories.@(js|jsx|mjs|ts|tsx)"], addons: [ @@ -41,11 +26,12 @@ module.exports = { }, staticDirs: [path.resolve(__dirname, "../assets")], webpackFinal: async (config) => { - // Define global constants that can be accessed in your stories + // Define global constants that can be accessed in your stories/ components config.plugins.push( new webpack.DefinePlugin({ - SERVER: JSON.stringify(findExistingBaseDirectory()), + SERVER: process.env.GH_PAGES ? JSON.stringify('/frontend/') : JSON.stringify('/'), }) + ); return(config); diff --git a/src/vue/components/icon-button/IconButton.vue b/src/vue/components/icon-button/IconButton.vue index db36d97f..7162c79f 100644 --- a/src/vue/components/icon-button/IconButton.vue +++ b/src/vue/components/icon-button/IconButton.vue @@ -21,10 +21,10 @@ const handleClick = () => { background-color: map-get($color-palette-peach,background, 400); color: $color-black; border: none; - padding: 0.25rem; - font-size: 1.5rem; - height: 2rem; - width: 2rem; + padding: 0.125rem; + font-size: 1rem; + height: 1.25rem; + width: 1.25rem; cursor: pointer; transition: all 0.2s ease; border-radius: 70%; diff --git a/src/vue/components/icon/iconPaths.js b/src/vue/components/icon/iconPaths.js index 01ad6a9a..5a0534bf 100644 --- a/src/vue/components/icon/iconPaths.js +++ b/src/vue/components/icon/iconPaths.js @@ -1,10 +1,30 @@ //Add icons alphabetically, to make lookup easier :) export const IconPaths = { - 'error': 'M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z', - 'face': 'M360-390q-21 0-35.5-14.5T310-440q0-21 14.5-35.5T360-490q21 0 35.5 14.5T410-440q0 21-14.5 35.5T360-390Zm240 0q-21 0-35.5-14.5T550-440q0-21 14.5-35.5T600-490q21 0 35.5 14.5T650-440q0 21-14.5 35.5T600-390ZM480-160q134 0 227-93t93-227q0-24-3-46.5T786-570q-21 5-42 7.5t-44 2.5q-91 0-172-39T390-708q-32 78-91.5 135.5T160-486v6q0 134 93 227t227 93Zm0 80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-54-715q42 70 114 112.5T700-640q14 0 27-1.5t27-3.5q-42-70-114-112.5T480-800q-14 0-27 1.5t-27 3.5ZM177-581q51-29 89-75t57-103q-51 29-89 75t-57 103Zm249-214Zm-103 36Z', - 'grade': 'm354-247 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-80l65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Zm247-350Z', - 'open_in_new': 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z', - 'close': 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z' + alarm: + "M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-800q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Zm0-360Zm112 168 56-56-128-128v-184h-80v216l152 152ZM224-866l56 56-170 170-56-56 170-170Zm512 0 170 170-56 56-170-170 56-56ZM480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720q-117 0-198.5 81.5T200-440q0 117 81.5 198.5T480-160Z", + article: + "M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z", + close: + "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z", + devices: + "M80-160v-120h80v-440q0-33 23.5-56.5T240-800h600v80H240v440h240v120H80Zm520 0q-17 0-28.5-11.5T560-200v-400q0-17 11.5-28.5T600-640h240q17 0 28.5 11.5T880-600v400q0 17-11.5 28.5T840-160H600Zm40-120h160v-280H640v280Zm0 0h160-160Z", + error: + "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z", + info: "M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z", + face: "M360-390q-21 0-35.5-14.5T310-440q0-21 14.5-35.5T360-490q21 0 35.5 14.5T410-440q0 21-14.5 35.5T360-390Zm240 0q-21 0-35.5-14.5T550-440q0-21 14.5-35.5T600-490q21 0 35.5 14.5T650-440q0 21-14.5 35.5T600-390ZM480-160q134 0 227-93t93-227q0-24-3-46.5T786-570q-21 5-42 7.5t-44 2.5q-91 0-172-39T390-708q-32 78-91.5 135.5T160-486v6q0 134 93 227t227 93Zm0 80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-54-715q42 70 114 112.5T700-640q14 0 27-1.5t27-3.5q-42-70-114-112.5T480-800q-14 0-27 1.5t-27 3.5ZM177-581q51-29 89-75t57-103q-51 29-89 75t-57 103Zm249-214Zm-103 36Z", + flag: "M200-120v-680h360l16 80h224v400H520l-16-80H280v280h-80Zm300-440Zm86 160h134v-240H510l-16-80H280v240h290l16 80Z", + grade: + "m354-247 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-80l65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Zm247-350Z", + light_bulb: + "M440-80v-120h80v120h-80ZM80-440v-80h120v80H80Zm680 0v-80h120v80H760Zm-40 276-84-84 56-56 84 84-56 56Zm-480 0-56-56 84-84 56 56-84 84Zm240-116q-83 0-141.5-58.5T280-480q0-48 21.5-89.5T360-640v-200h240v200q37 29 58.5 70.5T680-480q0 83-58.5 141.5T480-280Zm-40-396q10-2 20-3t20-1q10 0 20 1t20 3v-84h-80v84Zm40 316q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0-120Z", + link: "M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z", + open_in_new: + "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z", + star: "m354-247 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-80l65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Zm247-350Z", + quote: + "m228-240 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T458-480L320-240h-92Zm360 0 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T818-480L680-240h-92ZM320-500q25 0 42.5-17.5T380-560q0-25-17.5-42.5T320-620q-25 0-42.5 17.5T260-560q0 25 17.5 42.5T320-500Zm360 0q25 0 42.5-17.5T740-560q0-25-17.5-42.5T680-620q-25 0-42.5 17.5T620-560q0 25 17.5 42.5T680-500Zm0-60Zm-360 0Z", + warning: + "m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z", }; diff --git a/src/vue/components/modal/Modal.stories.js b/src/vue/components/modal/Modal.stories.js new file mode 100644 index 00000000..43091dfb --- /dev/null +++ b/src/vue/components/modal/Modal.stories.js @@ -0,0 +1,99 @@ +import Modal from './Modal.vue'; +import Button from '../Button.vue'; + +export default { + title: 'Components/Modal', + component: Modal, +}; + +const Template = (args) => ({ + components: { Modal, Button }, + setup() { + return () => ( + + {{ + header: () =>

This is the header content

, + main: () =>
This is the main content
, + actions: () => ( + <> + + + + ), + }} + + ); + }, +}); + +const TemplateWithoutHeader = (args) => ({ + components: { Modal, Button }, + setup() { + return () => ( + + {{ + main: () =>
This is the main content
, + actions: () => ( + <> + + + + ), + }} + + ); + }, +}); + +const TemplateWithoutActions = (args) => ({ + components: { Modal, Button }, + setup() { + return () => ( + + {{ + header: () =>

This is the header content

, + main: () =>
This is the main content
, + }} + + ); + }, +}); + +const TemplateWithoutMainContent = (args) => ({ + components: { Modal, Button }, + setup() { + return () => ( + + {{ + header: () =>

This is the header content

, + actions: () => ( + <> + + + + ), + }} + + ); + }, +}); + +export const Default = Template.bind({}); +Default.args = { + isOpen: true, +}; + +export const WithoutHeader =TemplateWithoutHeader.bind({}); +WithoutHeader.args = { + isOpen: true, +}; + +export const WithoutActions =TemplateWithoutActions.bind({}); +WithoutActions.args = { + isOpen: true, +}; + +export const WithoutMainContent =TemplateWithoutMainContent.bind({}); +WithoutMainContent.args = { + isOpen: true, +}; diff --git a/src/vue/components/modal/Modal.vue b/src/vue/components/modal/Modal.vue new file mode 100644 index 00000000..09f8c0f2 --- /dev/null +++ b/src/vue/components/modal/Modal.vue @@ -0,0 +1,107 @@ + + + + + diff --git a/src/vue/components/modal/ModalExample.stories.js b/src/vue/components/modal/ModalExample.stories.js new file mode 100644 index 00000000..aa86d3b9 --- /dev/null +++ b/src/vue/components/modal/ModalExample.stories.js @@ -0,0 +1,37 @@ +import ModalExample from './ModalExample.vue'; +import { defineComponent, ref } from 'vue'; + +export default { + title: 'Example/ModalExample', + component: ModalExample, +}; + + +const Template = (args) => + defineComponent({ + components: { ModalExample }, + setup() { + const modalOpen = ref(false); + + const openModal = () => { + modalOpen.value = true; + }; + + const closeModal = () => { + modalOpen.value = false; + }; + + return { + modalOpen, + openModal, + closeModal, + }; + }, + template: ` + + `, + }); + +// Export the Template as a Story +export const Default = Template.bind({}); +Default.args = {}; diff --git a/src/vue/components/modal/ModalExample.vue b/src/vue/components/modal/ModalExample.vue new file mode 100644 index 00000000..b10dbb41 --- /dev/null +++ b/src/vue/components/modal/ModalExample.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/vue/design/_infoboxes.scss b/src/vue/design/_infoboxes.scss new file mode 100644 index 00000000..2944d735 --- /dev/null +++ b/src/vue/design/_infoboxes.scss @@ -0,0 +1,61 @@ +@import './colors.scss'; + +.udir-info{ + margin-top: 1rem; + margin-bottom: 1rem; + padding: 1rem 1.5rem 1rem 1.5rem; + border-radius: 0.25rem; + min-height: 4rem; + overflow-y: visible; + border: none; + display:flex; + align-items: center; + gap: 2rem; + width: 100%; + + .udir-info__icon-container{ + display:inline-block; + font-size: 2rem; + vertical-align: center; + width: fit-content; + } + + &__general { + background: $color-white; + gap:0; + } + + &__info, &__warning, &_important{ + background: map-get($color-palette-red, background, 200); + } + &__verktoy { + background: map-get($color-palette-orange, background, 200); + } + &__tid { + background: map-get($color-palette-steel, background, 200);; + } + + &__maal { + background: map-get($color-palette-green, background, 200); + } + &__important { + background: map-get($color-palette-red, background, 200); + } + &__tip { + background: map-get($color-palette-eggshell, background, 400); + .udir-info__icon-container{ + transform: rotate(180deg); + } + } + &__read , &__question{ + background: map-get($color-palette-azur, background, 400); + } + &__quote{ + background: $color-white; + } + + &__skoleleder{ + background: map-get($color-palette-green, background, 400); + } + +} diff --git a/src/vue/design/base.scss b/src/vue/design/base.scss index 60dc0a86..907e9dc5 100644 --- a/src/vue/design/base.scss +++ b/src/vue/design/base.scss @@ -5,3 +5,6 @@ margin: 0; font-weight: normal; } +body{ + background-color: #f9f9f9!important; +} diff --git a/src/vue/design/colors.scss b/src/vue/design/colors.scss index 4dbaa35a..a6203dfe 100644 --- a/src/vue/design/colors.scss +++ b/src/vue/design/colors.scss @@ -128,7 +128,7 @@ $color-palette-red: ( 500: #ef5350, 600: #c62828 ), - foreground: ( + foreground: (#E2E3F1 200: $color-grey-900, 300: $color-black, 400: $color-grey-900, @@ -142,8 +142,8 @@ $color-palette-orange: ( 200: #fff3e0, 300: #ffcc80, 400: #ffa726, - 500: #fb8c00,s - 600: #ef6c00 + 500: #fb8c00, + 600: #EF6C00 ), foreground: ( 200: $color-grey-900, diff --git a/yarn.lock b/yarn.lock index a146337c..be46d232 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1135,7 +1135,7 @@ "@babel/parser" "^7.22.15" "@babel/types" "^7.22.15" -"@babel/traverse@^7.22.8", "@babel/traverse@^7.23.0": +"@babel/traverse@^7.22.5", "@babel/traverse@^7.22.8", "@babel/traverse@^7.23.0": version "7.23.0" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz" integrity sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw== @@ -3204,6 +3204,31 @@ native-promise-only "0.8.1" weakmap-polyfill "2.0.4" +"@vue/babel-helper-vue-jsx-merge-props@^1.4.0": + version "1.4.0" + resolved "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz" + integrity sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA== + +"@vue/babel-helper-vue-transform-on@^1.1.5": + version "1.1.5" + resolved "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz" + integrity sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w== + +"@vue/babel-plugin-jsx@^1.1.5": + version "1.1.5" + resolved "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz" + integrity sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g== + dependencies: + "@babel/helper-module-imports" "^7.22.5" + "@babel/plugin-syntax-jsx" "^7.22.5" + "@babel/template" "^7.22.5" + "@babel/traverse" "^7.22.5" + "@babel/types" "^7.22.5" + "@vue/babel-helper-vue-transform-on" "^1.1.5" + camelcase "^6.3.0" + html-tags "^3.3.1" + svg-tags "^1.0.0" + "@vue/cli-shared-utils@^5.0.8": version "5.0.8" resolved "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-5.0.8.tgz" @@ -4918,7 +4943,7 @@ camelcase@^5.3.1: resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -camelcase@^6.2.0: +camelcase@^6.2.0, camelcase@^6.3.0: version "6.3.0" resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== @@ -6928,11 +6953,6 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fs@^0.0.1-security: - version "0.0.1-security" - resolved "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz" - integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w== - fswin@^2.17.1227: version "2.17.1227" resolved "https://registry.npmjs.org/fswin/-/fswin-2.17.1227.tgz" @@ -7538,6 +7558,11 @@ html-minifier-terser@^6.0.2: relateurl "^0.2.7" terser "^5.10.0" +html-tags@^3.3.1: + version "3.3.1" + resolved "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz" + integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ== + html-webpack-plugin@^5.5.0, html-webpack-plugin@^5.5.1: version "5.5.3" resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz" @@ -12245,6 +12270,11 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +svg-tags@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz" + integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA== + svgo@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz"