dpc-sdp / ripple Goto Github PK

This issue provides visibility into Renovate updates and their statuses. Learn more

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

• Update dependency @elastic/elasticsearch-mock to v1
• Update dependency chromatic to v6
• Update dependency compare-versions to v4
• Update dependency cucumber-junit-convert to v2
• Update dependency cypress to v9
• Update dependency cypress-audit to v1
• Update dependency cypress-cucumber-preprocessor to v4
• Update dependency dotenv to v16
• Update dependency elasticsearch to v16
• Update dependency eslint to v8
• Update dependency eslint-plugin-jest to v26
• Update dependency eslint-plugin-promise to v6
• Update dependency eslint-plugin-vue to v8
• Update dependency husky to v7
• Update dependency ini to v2
• Update dependency jest-junit to v13
• Update dependency js-cookie to v3
• Update dependency js-yaml to v4
• Update dependency jwt-decode to v3
• Update dependency mockdate to v3
• Update dependency node-sass to v7
• Update dependency normalize-url to v7
• Update dependency pluralize to v8
• Update dependency puppeteer to v13
• Update dependency sass-loader to v12
• Update dependency serialize-javascript to v6
• Update dependency socket.io-parser to v4
• Update dependency svg-sprite-loader to v6
• Update dependency svgo to v2
• Update dependency svgo-loader to v3
• Update dependency url-loader to v4
• Update dependency vue to v3
• Update dependency vue-focus-lock to v2
• Update dependency vue-loader to v17
• Update dependency vue-social-sharing to v3
• Update dependency vuex-persistedstate to v4
• Update dependency webpack-node-externals to v3
• Update dependency xmlhttprequest-ssl to v2
• Update dependency y18n to v5
• Update jest monorepo to v27 (major) (babel-jest, jest)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update all non-major dependencies (@elastic/elasticsearch, axios, cheerio, cypress-axe, jscodeshift, logform, moment-timezone, node, winston)
• Update Node.js to v17
• Update dependency @elastic/elasticsearch to v8
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update Node.js to v16
• Update Node.js to v16
• Update dependency app-root-path to v3
• Update dependency body-scroll-lock to v3

• Check this box to trigger a request for Renovate to run again on this repository

Motivation

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.

• The first load of the homepage took minutes to return a result, which ended in an error response
• Subsequent page loads did complete with the header menu (main menu) sometimes rendered in an unexpected way
• Opening the menu hierarchy beyond the first 3 or 4 levels, extends the deeper branches beyond the visible areas of the page

Steps to reproduce

1. Create a main menu in the CMS with over 100 items in a hierarchy that is 5+ levels deep.
2. Assign this menu to the Sites taxonomy as the main site menu
3. Clear the caches in the CMS and at the edge
4. Open the homepage for the Site

This should show unexpected rendering results, similar to the ones described above. It may show an HTTP error response on first page load.

Proposed solution

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.

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.

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:

1. There is a PR (#774) that removes svg loading rules from the vue example app.
2. Removing svgRule.uses.clear(); from our vue.config.json before the svg-sprite-loader rules removes the error (but vic-logo.svg is broken).
3. The build error surfaces in ripple-pagination, but separator.svg remains unaffected if the svg rule is cleared.
4. All the answers I can find on the internet talk about server-side rendering issues, which makes sense in context of the error, but feels like a red herring in context of SVGs.

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

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.

https://github.com/dpc-sdp/ripple/blob/master/packages/components/Molecules/Card/no-ssr/CardCarousel.vue#L42

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?

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>

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

• Ripple:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

This is the body

What accessibility levels does this project aim to comply with?

This would be useful information to add to the contributing docs too.

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.

Cheers

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.

What

Provide an API for overriding the vic.gov.au logo colour in the site header

Why

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

Other considerations

Should we consider if this should be completely optional? Eg https://salsadigital.com.au/

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:

1. git clone [email protected]:dpc-sdp/ripple.git
2. cd ripple/examples/vue-example-app/
3. npm i
4. 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

• Ripple:

Desktop (please complete the following information):

• OS: macOS 10.15.7
• Node 14.17.6
• npm 6.14.15

I also tried with :

• Node 12.21.0
• npm 6.14.11

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

• Ripple:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

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.

Please see screenshots below.

Add support for geoQueries so that we can perform geo based searching / sorting.

Related Jira ticket: https://digital-engagement.atlassian.net/browse/SDPSUP-3977

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>

The file packages/Atoms/Global/scss/settings/_layout.scss is missing a !default to make it themeable.

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.

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.

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:

1. vue create <project_name>
2. cd project_name
3. yarn add @dpc-sdp/ripple-global @dpc-sdp/ripple-card (I am using RplCardKeydates as example)
4. Edit main.js based on the requirement https://github.com/dpc-sdp/ripple#in-a-vue-project
5. Add the RplCardKeydates same as story book

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

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:

1. Go to /search
2. Search for "Bill" and apply.
3. Results are returned - check the topics - should be populated with options for topics.
4. Search for "sasafsafdsfdsafdsa" and apply.
5. No results are returned - check the topics - no options will show upon clicking the field.
6. Search for "Bill" and apply.
7. Results are returned - check the topics - no options will be available where there should be options.

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

• Ripple: Current vic.gov.au site (1.21.2)

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Firefox
• Version 89

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.

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.

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.

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!

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)

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.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:

1. Add a test which uses the step definiton "it has no detectable a11y violations on load"

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

• Ripple:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

As per below:

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');

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.

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.

Can Ripple use without Nuxt? (e.g. use directly in Client side)
if yes, what do I need to pass to the Vue.use ?

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.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:

1. does something

Expected behaviour
Should do something

Actual behaviour
Doesn't do something

Screenshots
If applicable, add screenshots to help explain your problem.

Versions

• Ripple:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Currently in ripple-nuxt-tide module, Tide menus fields are hardcoded.

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

• Ripple:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

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

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.

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:

1. Set up a vue project using the VUE cli and use the basic vue 2 setup.

2. Add variables.scss, update vue.config, as per: https://github.com/dpc-sdp/ripple/tree/master/examples/vue-example-app

3. 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)

As seen in the following:

The final resting place of the back to top button overlaps the navigation arrows of the pagination.

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:

1. Go to https://www.ripple.sdp.vic.gov.au/?path=/story/organisms-accordion--accordion
2. Repeatedly click the accordion to open and shut and observe results. See video below as an example.

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

• Ripple:

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox / Chrome

https://ogp.me/#structured

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:

1. Create a new Landing Page
2. Add a Basic Text WYSIWYG
3. Add a Media embed for a document with a caption
4. Complete creating the landing page and save
5. View the page on the front-end
6. Observe the indented / incorrectly styled caption.

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

• Ripple: 1.22.0

Desktop (please complete the following information):

• OS: macOS
• Browser Firefox / Chrome
• Version: Latest

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.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:

1. Go to url /search-api/v2/cards

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

• Ripple:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

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

What browsers do you aim to support?

This would be useful information to add to the contributing docs.

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>

Issues:

1. Nuxt Link Active class

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.

2. Span events causing correct hard reload on /about -> /about does not work.

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