Merge branch 'develop' into feature/campaign-feedback

packages/nuxt-ripple/components/TideContentRating.vue

@@ -31,7 +31,6 @@ onMounted(() => {
             :formId="contentRatingFormId"
             hideFormOnSubmit
             title="Was this page helpful?"
-            successMessageTitle=""
             successMessageHTML="Thank you! Your response has been submitted."
             errorMessageHTML="We are experiencing a server error. Please try again, otherwise contact us."
           >
@@ -102,21 +101,30 @@ onMounted(() => {
 </template>
 
 <style>
+@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
+
 .tide-content-rating {
   border-top: var(--rpl-border-1) solid var(--rpl-clr-neutral-300);
   padding-top: var(--rpl-sp-6);
-}
 
-.tide-content-rating__rating .rpl-form-label {
-  @media (--rpl-bp-m) {
-    float: left;
-    margin: 0;
-    margin-right: var(--rpl-sp-6);
+  .rpl-form-alert {
+    margin-bottom: var(--rpl-sp-6);
   }
 }
 
 .tide-content-rating__rating {
   margin-bottom: var(--rpl-sp-6);
+
+  @media (--rpl-bp-s) {
+    .rpl-form-label {
+      float: left;
+      margin: 0 var(--rpl-sp-4) 0 0;
+    }
+
+    .rpl-form-radio-group {
+      --local-block-padding: 0;
+    }
+  }
 }
 
 .tide-content-rating__expanded {
@@ -125,7 +133,10 @@ onMounted(() => {
 
   @media (--rpl-bp-m) {
     padding-top: var(--rpl-sp-2);
-    padding-bottom: var(--rpl-sp-8);
+  }
+
+  @media (--rpl-bp-l) {
+    padding-bottom: var(--rpl-sp-9);
   }
 }
 </style>

packages/ripple-tide-search/components/TideSearchSortOptions.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="rpl-form__outer tide-search-sort-options" data-invalid="false">
     <div class="rpl-form__wrapper">
-      <RplFormLabel for="search-listing-sort-options">Sort by</RplFormLabel>
+      <RplFormLabel id="search-listing-sort-options-label">
+        Sort by
+      </RplFormLabel>
       <div class="rpl-form__inner">
         <RplFormDropdown
           id="search-listing-sort-options"

packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue

@@ -73,7 +73,7 @@ const imageAspect = computed(() => {
     case 'landscape':
       return 'wide'
     case 'portrait':
-      return 'full'
+      return 'portrait'
     case 'square':
       return 'square'
     case 'avatar':

packages/ripple-ui-core/src/styles/components/_embed.css

@@ -20,7 +20,8 @@
   /* Portrait */
   &.rpl-media-embed__image--portrait {
     &.rpl-media-embed__image--large {
-      max-width: none;
+      width: auto;
+      height: auto;
       max-height: 595px;
     }
   }
@@ -97,6 +98,7 @@
 
 .rpl-media-embed__actions-list {
   margin-top: var(--rpl-sp-3);
+  max-width: var(--rpl-content-max-width);
 
   li {
     margin-bottom: var(--rpl-sp-3);

packages/ripple-ui-core/src/styles/utilities/_aspect.css

@@ -1,15 +1,15 @@
 .rpl-u-aspect {
-  @each $name, $ratio in (square, full, wide, ultrawide, panorama),
-    (1/1, 4/3, 16/9, 21/9, 3/1)
+  @each $name, $ratio in (square, full, wide, ultrawide, panorama, portrait),
+    (1/1, 4/3, 16/9, 21/9, 3/1, 3/4)
   {
     &-$(name) {
       aspect-ratio: $(ratio);
     }
   }
 
   @each $size in (s, m, l, xl) {
-    @each $name, $ratio in (square, full, wide, ultrawide, panorama),
-      (1/1, 4/3, 16/9, 21/9, 3/1)
+    @each $name, $ratio in (square, full, wide, ultrawide, panorama, portrait),
+      (1/1, 4/3, 16/9, 21/9, 3/1, 3/4)
     {
       &-$(name)-$(size) {
         /* stylelint-disable-next-line media-query-no-invalid */

packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css

@@ -101,6 +101,7 @@
   max-height: calc(var(--local-max-items) * var(--local-item-height));
   overflow-y: auto;
   scroll-behavior: auto;
+  overscroll-behavior: contain;
 
   position: absolute;
   width: 100%;

packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts

@@ -0,0 +1,63 @@
+import RplFormDropDown from './RplFormDropdown.vue'
+import { RplFormDropdownOptions } from './fixtures/sample'
+
+const props = {
+  id: 'dropdown',
+  labelId: 'dropdown',
+  placeholder: 'Select',
+  options: RplFormDropdownOptions
+}
+
+describe('RplFormDropDown', () => {
+  it('mounts', () => {
+    cy.mount(RplFormDropDown, { props })
+
+    cy.get('.rpl-form-dropdown').should('be.visible')
+  })
+
+  it('can be toggled open and closed', () => {
+    cy.mount(RplFormDropDown, { props })
+
+    cy.get('.rpl-form-dropdown-input').click()
+    cy.get('.rpl-form-dropdown-menu').should('be.visible')
+    cy.get('.rpl-form-dropdown-input').click()
+    cy.get('.rpl-form-dropdown-menu').should('not.exist')
+  })
+
+  it('can be "searched" by typing from the input', () => {
+    cy.mount(RplFormDropDown, { props })
+
+    cy.get('.rpl-form-dropdown-input').type('b')
+    cy.focused().contains('Banana')
+
+    cy.get('.rpl-form-dropdown-input').type('bl')
+    cy.focused().contains('Blueberries')
+  })
+
+  it('can be "searched" by typing from an option', () => {
+    cy.mount(RplFormDropDown, { props })
+
+    cy.get('.rpl-form-dropdown-input').click()
+    cy.get('.rpl-form-dropdown-option').first().type('apr')
+    cy.focused().contains('Apricots')
+
+    cy.get('.rpl-form-dropdown-option').first().type('l')
+    cy.focused().contains('Lemon')
+  })
+
+  it('can be "traversed" by cycling through a single key stroke', () => {
+    cy.mount(RplFormDropDown, { props })
+
+    cy.get('.rpl-form-dropdown-input').type('a')
+    cy.focused().contains('Apple')
+
+    cy.focused().type('a')
+    cy.focused().contains('Apricots')
+
+    cy.focused().type('a')
+    cy.focused().contains('Avocado')
+
+    cy.focused().type('a')
+    cy.focused().contains('Apple')
+  })
+})

packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.stories.mdx

@@ -7,6 +7,7 @@ import {
 import RplFormDropdown from './RplFormDropdown.vue'
 import { RplButton } from '@dpc-sdp/ripple-ui-core/vue'
 import StorybookInputFixture from './../StorybookInputFixture/StorybookInputFixture.vue'
+import { RplFormDropdownOptions } from './fixtures/sample'
 import '@dpc-sdp/ripple-ui-core/style/components'
 import '../RplForm/RplForm.css'
 
@@ -74,11 +75,7 @@ export const SingleTemplate = (args) => ({
     args={{
       id: 'dropdown-single',
       multiple: false,
-      options: [...Array(10).keys()].map((i) => ({
-        id: `item-${i + 1}`,
-        value: `item-${i + 1}`,
-        label: `Value ${i + 1}`
-      }))
+      options: RplFormDropdownOptions
     }}
   >
     {SingleTemplate.bind()}
@@ -116,11 +113,7 @@ export const SingleTemplate = (args) => ({
     args={{
       id: 'dropdown-multi',
       multiple: true,
-      options: [...Array(10).keys()].map((i) => ({
-        id: `item-${i + 1}`,
-        value: `item-${i + 1}`,
-        label: `Value ${i + 1}`
-      }))
+      options: RplFormDropdownOptions
     }}
   >
     {SingleTemplate.bind()}

packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue

@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref, watch, nextTick, inject } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useDebounceFn } from '@vueuse/core'
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter'
 import MultiValueLabel from './MultiValueLabel.vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
@@ -32,7 +32,7 @@ export interface RplFormDropdownProps {
   }[]
   maxItemsDisplayed?: number
   pii?: boolean
-  unselectedValue: any
+  unselectedValue?: any
   /**
    * Only applicable when for single selects. If true, no 'placeholder' option
    * is added and the user can't deselect a value, only choose a different value.
@@ -77,6 +77,7 @@ const containerRef = ref(null)
 const inputRef = ref(null)
 const menuRef = ref(null)
 const optionRefs = ref([])
+const searchCache = ref('')
 
 const menuId = computed(() => `${props.id}__menu`)
 
@@ -127,6 +128,29 @@ const getUniqueOptionId = (optionId: string): string => {
   return optionId ? `${props.id}-${optionId}` : ''
 }
 
+const processSearch = useDebounceFn(() => {
+  let options = [...(props.options || [])]
+  if (activeOptionId.value) {
+    const index = options.map((o) => o.id).indexOf(activeOptionId.value)
+    options = options.slice(index + 1).concat(options.slice(0, index + 1))
+  }
+  let found = options.find((o) =>
+    o.label.toLowerCase().startsWith(searchCache.value)
+  )
+  if (found) {
+    handleOpen()
+    activeOptionId.value = found.id
+  }
+  searchCache.value = ''
+})
+
+const handleSearch = (event: KeyboardEvent): void => {
+  if (event.key?.length === 1) {
+    searchCache.value = searchCache.value + event.key.toLowerCase()
+    processSearch()
+  }
+}
+
 const handleToggle = (fromKeyboard = false): void => {
   if (isOpen.value) {
     handleClose(fromKeyboard)
@@ -322,6 +346,7 @@ const hasValue = computed((): boolean => {
     @keydown.esc.prevent="handleClose(true)"
     @keydown.exact.tab="handleClose(false)"
     @keydown.shift.tab="handleClose(false)"
+    @keydown.exact="handleSearch"
   >
     <div
       v-bind="$attrs"

packages/ripple-ui-forms/src/components/RplFormDropdown/fixtures/sample.ts

@@ -0,0 +1,15 @@
+export const RplFormDropdownOptions = [
+  { id: 'apple', value: 'apple', label: 'Apple' },
+  { id: 'banana', value: 'banana', label: 'Banana' },
+  { id: 'orange', value: 'orange', label: 'Orange' },
+  { id: 'strawberry', value: 'strawberry', label: 'Strawberry' },
+  { id: 'apricots', value: 'apricots', label: 'Apricots' },
+  { id: 'grapes', value: 'grapes', label: 'Grapes' },
+  { id: 'pineapple', value: 'pineapple', label: 'Pineapple' },
+  { id: 'sultana', value: 'sultana', label: 'Sultana' },
+  { id: 'blueberries', value: 'blueberries', label: 'Blueberries' },
+  { id: 'avocado', value: 'avocado', label: 'Avocado' },
+  { id: 'peach', value: 'peach', label: 'Peach' },
+  { id: 'lemon', value: 'lemon', label: 'Lemon' },
+  { id: 'watermelon', value: 'watermelon', label: 'Watermelon' }
+]