dpc-sdp / ripple Goto Github PK
View Code? Open in Web Editor NEWRipple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js
License: Apache License 2.0
Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js
License: Apache License 2.0
this is the body
Describe the bug
Running the example application examples/vue-example-app
does not, it encounters this error:
To Reproduce
Steps to reproduce the behaviour:
git clone [email protected]:dpc-sdp/ripple.git
cd ripple/examples/vue-example-app/
npm i
npm run serve
Expected behaviour
I get a running application on a local port.
Actual behaviour
I get the folllowing error message:
ERROR Failed to compile with 3 errors 12:28:14 pm
These dependencies were not found:
* @dpc-sdp/ripple-grants/grants-status in ./node_modules/@dpc-sdp/ripple-card/mixins/card.js
* @dpc-sdp/ripple-grid in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@dpc-sdp/ripple-card/CardCompactGrid.vue?vue&type=script&lang=js&
* @dpc-sdp/ripple-responsive-img in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@dpc-sdp/ripple-card/CardCta.vue?vue&type=script&lang=js&
To install them, you can run: npm install --save @dpc-sdp/ripple-grants/grants-status @dpc-sdp/ripple-grid @dpc-sdp/ripple-responsive-img
Attemping to install these dependencies manually gives this error message:
npm ERR! Could not install from "@dpc-sdp/ripple-grants/grants-status" as it does not contain a package.json file.
Versions
Desktop (please complete the following information):
I also tried with :
We're using PageLayout but our designs use a different configuration of columns for the main content and sidebar areas.
PageLayout currently hardcodes the main area to 7 columns and the sidebar to 4, but I need to set it to be 8 and 3.
I've got a PR to allow a columns
prop as config, will submit.
Hi Ripplers,
When we use rpl-form
to add a hidden input field to the page, the resulting HTML+CSS leaves a phantom margin attached to the empty .field-group
.
This can also be seen on https://vic.gov.au/ at the bottom of the page in AppContentRating
.
Our designs require the use of SVGs not available in the icon library.
We are using RplIcon
where we can, but would lose the benefit of it if we can't add our icons to the sprite.
I would need to be able to pass RplIcon
an SVG file as a prop, instead of a string.
<template>
<div class="my-header">
<rpl-icon
:symbol="customHamburger"
color="white"
size="0.8"
class="logo-bar__search-icon"
/>
</div>
</template>
<script>
import { RplIcon } from '@dpc-sdp/ripple-icon'
import customHamburger from '~/assets/icons/customHamburger.svg'
export default {
name: 'MyHeader',
components: {
RplIcon
},
data: {
customHamburger
}
}
</script>
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch @dpc-sdp/[email protected]
for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/@dpc-sdp/ripple-layout/BackToTop.vue b/node_modules/@dpc-sdp/ripple-layout/BackToTop.vue
index b591d4f..fee13f8 100644
--- a/node_modules/@dpc-sdp/ripple-layout/BackToTop.vue
+++ b/node_modules/@dpc-sdp/ripple-layout/BackToTop.vue
@@ -5,7 +5,7 @@
:class="{ 'rpl-back-to-top__inner--sticky': sticky }"
>
<transition name="rpl-back-to-top__fade">
- <a v-if="show" class="rpl-back-to-top__button" href="#rpl-skip-link">
+ <a v-if="show" class="rpl-back-to-top__button" href="#rpl-skip-link-0">
<span class="rpl-back-to-top__text">Back to top</span>
<rpl-icon symbol="arrow_up_primary" color="primary" />
</a>
This issue body was partially generated by patch-package.
Describe the bug
When trying to use rpl-header, get an issue relating to sass.
To Reproduce
Repro as of this commit: dwjohnston/vic-gov-data-graph-take-2@64cbcb3
Steps:
Set up a vue project using the VUE cli and use the basic vue 2 setup.
Add variables.scss, update vue.config, as per: https://github.com/dpc-sdp/ripple/tree/master/examples/vue-example-app
Update the vue config as per: #1069
Expected behaviour
The code runs.
Actual behaviour
We get this error message in the browser:
cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss&:1 Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $string: #457b9d is not a string.
โท
208 โ $rpl-form-input-search-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.99 9.243c1.597-2.45 1.224-5.82-1.133-7.833C7.59-.526 4.137-.46 1.94 1.557a6 6 0 00-.19 8.653c2.043 2.045 5.205 2.293 7.527.757.031-.02.102-.083.198-.173l4.343 4.195a.941.941 0 101.308-1.354l-4.324-4.176c.098-.106.166-.184.188-.216zm-8.023-.25a4.274 4.274 0 010-6.035 4.266 4.266 0 016.03 0 4.274 4.274 0 010 6.034 4.266 4.266 0 01-6.03 0z' fill='%23#{str-slice(quote($rpl-form-input-prepend-icon-color), 2)}'/%3E%3C/svg%3E");
โ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
โต
node_modules/@dpc-sdp/ripple-form/index.vue 208:537 root stylesheet
at eval (cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss&:1)
at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss& (chunk-vendors.js:9012)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (index.vue?71ae:4)
at Object../node_modules/vue-style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss& (chunk-vendors.js:14921)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (index.vue?4790:1)
at Module../node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss& (chunk-vendors.js:2507)
For improved accessibility it would be good to move the keyboard focus when navigating to a new page to the h1 of the new content.
I wrote up a directive to help assist with this, but I'm sure there's other ways to address this.
Plugin:
import Vue from 'vue'
let firstMounted = false
// Register a global custom directive called 'v-focus'
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted (el) {
// Skip moving focus on page load
if (!firstMounted) {
firstMounted = true
return
}
// Focus the element
el.focus()
}
})
Then in Vue component:
<h1 v-focus tabindex="-1">{{ title }}</h1>
Hi all, great job, not to be a grammar Nazi but :
In ripple-nuxt-ui/readme :
-Working in progress
please use
Work in progress
Love the framework.
Checkout npm bug: https://npm.community/t/npm-6-11-x-breaks-npm-ci-with-eperm-error-for-private-github-package/9872
At meanwhile, please switch to npm 6.10.x.
Issues:
The 'nuxt-link-active' class may be on links that link to pages which have different URLs to the current page. E.g. If i'm on /about/page, a link to /about will have 'nuxt-link-active'
This means that when I click on /about, rather than loading using the nuxt-link, it will instead hard reload the page. The hard reload should only occur on pages which wouldn't otherwise load through nuxt. Changing the IF check from testing for a class to comparing the routes directly fixes this issue.
Clicking directly upon the <span>
within the <a>
will return the span as the event target rather than the <a>
. This throws errors in the click function, as the event target is expected to have a href. Changing from using e.target to using this.href means that regardless of if the <span>
or <a>
triggered the event, the correct href value is used.
One of the issues no. 2 causes is clicking directly on the text of an active link multiple times will not trigger a page refresh.
I've created a PR to address these issues: #725
Hi there,
I worked on a project which was required the users can conditionally see different fields options on a webform such that I can work through different scenarios to seek the information relevant to them likes this: http://www.asbestos.vic.gov.au/about-asbestos/managing-asbestos/working-safely-with-asbestos
The AppForm component uses the conditional logic function to control states and validation on fields.
testField() currently only supports the 'required' state, but should also have:
- visible
- hidden
- enabled
- disabled
So I implemented it and created a pull request here: #594
Could someone please review and merge my PR?
Thank you!
Hi Ripplers,
The Anchor Links component has lots of helpful theme vars, but since they aren't marked !default
I can't override them in my project.
ripple/packages/Molecules/AnchorLinks/index.vue
Lines 37 to 52 in aaa7482
Cheers
Describe the bug
In @dpc-sdp/ripple-site-header/index.vue the Site search button text is hardcoded - Some sites (eg: legislation.vic.gov.au) require this to behave differently and therefore the text needs to be configurable
To Reproduce
Steps to reproduce the behaviour:
1.
2.
Expected behaviour
A clear and concise description of what you expected to happen.
Actual behaviour
A clear and concise description of what is actually happening.
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
The file packages/Atoms/Global/scss/settings/_layout.scss
is missing a !default
to make it themeable.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
Should return search results
Actual behaviour
A clear and concise description of what is actually happening.
Returns 404 - response error
"error": true,
"status": 404,
"message": "Response Error",
"meta": {
"body": {
"ok": false,
"message": "Unknown resource."
},
"statusCode": 404,
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Seems to be linked to https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/client-connecting.html#product-check - fixing elasticsearch client version to v7.13.0 fixes the issue for now
Hi there - we're finding some issue when resizing the browser in IE11 using the rpl-container
elements (or the rpl-site-constrain--on-all
class)
Seems the browser is having issues calculating the correct padding at times. It is more accentuated on the BHC website as the navigation in within a container, but I was able to replicate it on the vic.giv.au website too.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behaviour:
1.
2.
Expected behaviour
A clear and concise description of what you expected to happen.
Actual behaviour
A clear and concise description of what is actually happening.
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
Wrong protocol is being set in Ripple.
If we check the code here - https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/lib/templates/plugin.js#L81
it uses req.connection.encrypted
to check whether to use HTTP or HTTPS. Should we be using request.secure
instead?
https://stackoverflow.com/questions/58908275/check-if-request-is-encrypted-https-in-node-13
To Reproduce
Steps to reproduce the behaviour:
1.
2.
Expected behaviour
A clear and concise description of what you expected to happen.
Actual behaviour
A clear and concise description of what is actually happening.
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
A clear and concise description of what you expected to happen.
Test uses Axe core to check page for a11y issues
Actual behaviour
Cypress throws error "TypeError: axe.run arguments are invalid"
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Add support for geoQueries so that we can perform geo based searching / sorting.
https://github.com/dpc-sdp/ripple/blob/master/packages/components/Molecules/Card/stories.js#L68
Storybook knob for Card Image Navigation component reads "Link", though it's for the "Image" property.
This is the body
Hi,
I have tried to use the Ripple template in my Vue Project (without Nuxt), but I discover all the icon was unable to display.
Step to reproduce:
Expected Result: The calendar icon is displaying in front of the day
Current Result: Calendar icon is missing
I have tested different modules, such as CardNavigation, the -> icon is also missing
Default font-size for text fields in a form is 14px. If this is changed to 16px then the site won't zoom on form element focus.
This could be done by changing:
$rpl-form-text-ruleset: ('xs', 1.3em, 'regular') !default;
$rpl-form-element-text-ruleset: ('xs', 1em, 'regular');
to
$rpl-form-text-ruleset: ('s', 1.3em, 'regular') !default;
$rpl-form-element-text-ruleset: ('s', 1em, 'regular');
Can Ripple use without Nuxt? (e.g. use directly in Client side)
if yes, what do I need to pass to the Vue.use ?
What browsers do you aim to support?
This would be useful information to add to the contributing docs.
Hello :) It's a little hard to debug and understand, so there's still a strong chance that this isn't something to fix in ripple, but possibly something to add to docs for ripple users.
version | issue |
---|---|
1.19.8 | investigated |
something in November 2020 | raised but not investigated |
We recently inherited a vue app, with an outstanding CI issue, that vue-cli-service build --mode production
yields a build error (included at the bottom, to reduce noise).
Investigation has been difficult, due to webpack chains being a bit magical. But there are a few things we've found that might be relevant:
svgRule.uses.clear();
from our vue.config.json
before the svg-sprite-loader
rules removes the error (but vic-logo.svg
is broken).ripple-pagination
, but separator.svg
remains unaffected if the svg rule is cleared.So, hopefully y'all have seen something like this before, and the fix is easy and obvious and we just didn't realise ๐
But, worst case, something is actually broken, and people haven't noticed (like no one's building vue apps atm, or they haven't noticed the footer is missing an image, or they're deploying staging builds to prod, or who knows).
Build error:
error in ./node_modules/@dpc-sdp/ripple-pagination/PrevNext.vue?vue&type=style&index=0&lang=scss&
Syntax Error: ReferenceError: document is not defined
@ ./node_modules/@dpc-sdp/ripple-pagination/PrevNext.vue?vue&type=style&index=0&lang=scss& 1:0-475 1:0-475
@ ./node_modules/@dpc-sdp/ripple-pagination/PrevNext.vue
@ ./node_modules/@dpc-sdp/ripple-pagination/index.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/search/SearchResult.vue?vue&type=script&lang=ts&
@ ./src/components/search/SearchResult.vue?vue&type=script&lang=ts&
@ ./src/components/search/SearchResult.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/scheme/SearchScheme.vue?vue&type=script&lang=ts&
@ ./src/views/scheme/SearchScheme.vue?vue&type=script&lang=ts&
@ ./src/views/scheme/SearchScheme.vue
@ ./src/router/index.ts
@ ./src/main.ts
@ multi ./src/main.ts
The default submit actions is added when you first create a webform, and webform doesn't allow you to set the #title attribute of the actions element from the UI.
You can however change it from YML in Webform Source. If you add another Submit component, you are free to change the #title attribute.
In order to allow default actions to have a user-defined label, submit__label
should be checked, falling back to title
if not set.
A pull request has been created to address this: #682
Related Jira ticket: https://digital-engagement.atlassian.net/browse/SDPSUP-3977
Describe the bug
Accordions display a slide down animation on open. (Correct)
On close, the animation often does not display and will usually close immediately. (Incorrect)
When clicking an accordion header during it's transition; it will either immediately open or close, with a slight delay before the text hides. This can lead to an open accordion with no text. (Generally it looks buggy)
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
Clicking an accordion to open will display a slide down animation. Clicking to close will display a slide up animation. Clicking during a transition should halt the current animation and perform the expected (opposite) animation. E.g. Click while opening should initiate close / clicking while closing should initiate open.
Actual behaviour
See "Describe the bug"
Screenshots
https://user-images.githubusercontent.com/12739575/113796671-23b54100-9793-11eb-9cd2-4da281f264c8.mp4
Versions
Desktop (please complete the following information):
WYSIWYG elements can contain<article>
tags generated within Drupal.
Cases such as <article class="media media--type-image media--view-mode-embedded">
throw an error in HTML validators due to missing heading elements within the <article>
tag.
Consider adding a new component to transpile Drupal embedded images within WYSIWYGs into custom components so the markup can be made compliant.
Describe the bug
Users should be able to use the package without additional webpack/babel configuration etc.
To Reproduce
See repro here:
dwjohnston/vic-gov-data-graph-take-2@d23a212
Expected behaviour
I should be able to use the packages no problems.
Actual behaviour
I get the following error:
rtl.js:1 Uncaught Error: Module parse failed: Unexpected token (8:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| methods: {
| isRtl () {
> if (this.rplOptions?.siteRtl === true) {
| return true
| } else {
at eval (rtl.js:1)
at Object../node_modules/@dpc-sdp/ripple-global/mixins/rtl.js (chunk-vendors.js:1172)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-document-link/DocumentLink.vue?vue&type=script&lang=js&:7)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-document-link/DocumentLink.vue?vue&type=script&lang=js& (chunk-vendors.js:3818)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (DocumentLink.vue?2f1f:1)
at Module../node_modules/@dpc-sdp/ripple-document-link/DocumentLink.vue?vue&type=script&lang=js& (chunk-vendors.js:143)
Provide an API for overriding the vic.gov.au logo colour in the site header
The vic.gov.au logo is fixed in Ripple to enforce the brand Vic requirement of having the logo. However there are some circumstances where this is problematic, for example when using on light coloured headers.
https://www.firstpeoplesrelations.vic.gov.au/ example
Should we consider if this should be completely optional? Eg https://salsadigital.com.au/
The default settings of the vue-social-sharing
plugin renders a <span>
for each network. This should be an interactable element for accessibility.
I have a fix, will update when I submit the PR.
There is currently no way to configure scroll behaviour in @dpc-sdp/ripple-search - RplSearchForm
This patch adds that behaviour, maintaining the current default behaviour :
diff --git a/node_modules/@dpc-sdp/ripple-search/SearchForm.vue b/node_modules/@dpc-sdp/ripple-search/SearchForm.vue
index 8b47f6b..8932ab8 100644
--- a/node_modules/@dpc-sdp/ripple-search/SearchForm.vue
+++ b/node_modules/@dpc-sdp/ripple-search/SearchForm.vue
@@ -24,7 +24,7 @@
<span v-if="filterCount > 0">( {{ filterCount }} )</span>
</button>
<div v-if="showFilters" class="rpl-search-form__filters">
- <rpl-form :formData="filterForm" :submitHandler="submitSearch" :submitFormOnClear="true"></rpl-form>
+ <rpl-form :formData="filterForm" :submitHandler="submitSearch" :submitFormOnClear="submitOnClear" :scrollToMessage="scrollOnSubmit"></rpl-form>
</div>
</div>
</template>
@@ -51,7 +51,9 @@ export default {
filterText: { type: String, default: 'Refine search' },
theme: String,
type: { type: String, default: 'default' },
- allowBlank: { type: Boolean, default: false }
+ allowBlank: { type: Boolean, default: false },
+ submitOnClear: { type: Boolean, default: true },
+ scrollOnSubmit: { type: Boolean, default: true }
},
components: {
RplForm,
This issue body was partially generated by patch-package.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
Should do something
Actual behaviour
Doesn't do something
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
What accessibility levels does this project aim to comply with?
This would be useful information to add to the contributing docs too.
Open Graph tags should be defined as:
<meta property="og:image" content="https://example.com/ogp.jpg" />
however the current implementation uses name:
https://github.com/dpc-sdp/ripple/blob/master/packages/ripple-nuxt-tide/lib/core/tide-helper.js#L131
<meta name="og:image" content="https://example.com/ogp.jpg" />
Describe the bug
When creating a basic text field on a landing page, and adding Media embed of type Document, If a caption is included with the embed, The end-result on the page will display an indented document link, with a caption that is not using the Document Link's caption style.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
A Document Link caption should render as per the Document Link component.
https://www.ripple.sdp.vic.gov.au/?path=/story/molecules-documentlink--document-link
Actual behaviour
The document link is appearing indented, with a differently styled caption text.
Screenshots
This is using the caption field provided by Drupal media embed:
Versions
Desktop (please complete the following information):
Additional context
From what I can see of the HTML:
An expected document link should output like:
<figure class="rpl-document-link">
<a aria-label="This is the name of the document File type: pdf. Size: 1.4 mb" href="https://www.google.com" target="_blank" class="rpl-document-link__link">
<!-- <svg>Removed embedded svg for clarity</svg> -->
<div class="rpl-document-link__info">
<span class="rpl-document-link__title">This is the name of the document</span>
<div class="rpl-document-link__meta">
<span class="rpl-document-link__type">pdf</span><span class="rpl-document-link__size rpl-document-link__size--seperator">1.4 mb</span>
</div>
</div>
</a>
<figcaption class="rpl-document-link__caption">This is a longer description of the document above.</figcaption>
</figure>
But what is being output by the Markup component is:
<figure role="group" class="caption caption-drupal-entity">
<figure class="rpl-document-link">
<a aria-label="Demo Sample Document File type: docx. Size: 7.53 KB" href="/sites/default/files/tide_demo_content/sample.docx" download="" class="rpl-document-link__link">
<!-- <svg>Removed embedded svg for clarity</svg> -->
<div class="rpl-document-link__info">
<span class="rpl-document-link__title">Demo Sample Document</span>
<div class="rpl-document-link__meta">
<span class="rpl-document-link__type">docx</span> <span class="rpl-document-link__size rpl-document-link__size--seperator">7.53 KB</span>
</div>
</div>
</a>
<!---->
</figure>
<figcaption>This is a caption!</figcaption>
</figure>
Where a figure with a figcaption is wrapping the document link figure.
I believe this is because the markup-plugin that swaps out the Drupal embed with the Vue component doesn't check if it's being wrapped by a figure with caption.
If the markup plugin could also check for any document embeds within a figure, then replace the figure with the document link (with caption passed to the document link component), this should fix the issue.
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: packageRules: Each packageRule must contain at least one selector (matchFiles, matchPaths, matchLanguages, matchBaseBranches, matchManagers, matchDatasources, matchDepTypes, matchPackageNames, matchPackagePatterns, matchPackagePrefixes, excludePackageNames, excludePackagePatterns, excludePackagePrefixes, matchCurrentVersion, matchSourceUrlPrefixes, matchUpdateTypes). If you wish for configuration to apply to all packages, it is not necessary to place it inside a packageRule at all.
For post requests in tide, we are setting the axios config baseUrl
.
https://github.com/dpc-sdp/ripple/blob/master/packages/ripple-nuxt-tide/lib/core/tide.js#L80
Based on the axios readme, baseURL
is the correct variable name, so the baseUrl
variable is not being properly set.
However, if the correct variable name was used and the base was being set to config.baseUrl
, it would break form submissions, as submitting directly to the base URL from a browser would result in a CORS error.
The line should be removed as it's redundant.
This issue provides visibility into Renovate updates and their statuses. Learn more
These updates are currently rate limited. Click on a checkbox below to force their creation now.
babel-jest
, jest
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@elastic/elasticsearch
, axios
, cheerio
, cypress-axe
, jscodeshift
, logform
, moment-timezone
, node
, winston
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
Describe the bug
Search page topics will not populate from aggregated results if a search with no results has occurred.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
Upon step 7, results should show the same as they did in step 3.
Actual behaviour
No results show.
Screenshots
If applicable, add screenshots to help explain your problem.
Versions
Desktop (please complete the following information):
Additional context
Searching "Bill" then "Cheese" then "Bill" will show the correct results each time, it's only if zero results occur that this breaks.
It's likely that setting a null value on the form field means that a non-null value doesn't update the model correctly.
Currently in ripple-nuxt-tide
module, Tide menus fields are hardcoded.
An agency (Victoria Legal Aid) performed automated migration of content and menus from Drupal 7 into two of their SDP sites. The Sites main menus contained over a hundred (100+) menu items in a hierarchy greater than five (5) levels deep.
Side note: Menu content in the Drupal CMS does not scale well to accommodate hundreds of menu items. This is a known Drupal issue, spanning many years, with specific feature additions to enable effective editing and publishing of large, deep menus.
Rendering of a Ripple website with a deep, very large menu hierarchy behaved in unexpected ways.
This should show unexpected rendering results, similar to the ones described above. It may show an HTTP error response on first page load.
Caveat: I do not know for sure where the rendering time is being spent, but I suspect Ripple is not expecting the very large, very deep, menu content response from the CMS.
One idea, to perhaps mitigate against rendering issues, for overly deep, overly large CMS menus, would be to limit the JSON:API response when requesting the main menu content from Tide. If Ripple knows that it should only render a menu at 3 or 4 levels deep, then perhaps any request for the menu content should be limited to that depth.
This is not really a Ripple bug, as these very deep, very large menus may not be supported by the design system specifically. The intent would be to more gracefully render the site when a menu was authored that exceeded the limits for Ripple's design.
Rpl-select has a prop for controlling the length of line in placeholder before truncation - selectedCharLength
fieldRplselect is not forwarding this to rpl-select when used in a form with rpl-form.
This resolves the issue
diff --git a/node_modules/@dpc-sdp/ripple-form/fields/fieldRplselect.vue b/node_modules/@dpc-sdp/ripple-form/fields/fieldRplselect.vue
index 7fd72c7..e744e65 100644
--- a/node_modules/@dpc-sdp/ripple-form/fields/fieldRplselect.vue
+++ b/node_modules/@dpc-sdp/ripple-form/fields/fieldRplselect.vue
@@ -4,6 +4,7 @@
:values="schema.values"
:state="value"
:disabled="disabled"
+ :selectedCharLength="schema.selectedCharLength || undefined"
@rpl-select-update="onUpdate"
/>
</template>
Currently CardCarousel only supports Promotion, Event, and KeyDates cards. If a card other than those is required, an import needs to be added within CardCarousel.
This limits the functionality of the CardCarousel, especially when using non-standard Cards, and requires npm patches in order to support new Cards.
Is there a way to make the CardCarousel flexible enough to support dynamic components?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.