-
Sort by
+
+ Sort by
+
{
case 'landscape':
return 'wide'
case 'portrait':
- return 'full'
+ return 'portrait'
case 'square':
return 'square'
case 'avatar':
diff --git a/packages/ripple-ui-core/src/styles/components/_embed.css b/packages/ripple-ui-core/src/styles/components/_embed.css
index aa52f20dc8..09632a7ba4 100644
--- a/packages/ripple-ui-core/src/styles/components/_embed.css
+++ b/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);
diff --git a/packages/ripple-ui-core/src/styles/utilities/_aspect.css b/packages/ripple-ui-core/src/styles/utilities/_aspect.css
index c49c89a204..5d3f2222b4 100644
--- a/packages/ripple-ui-core/src/styles/utilities/_aspect.css
+++ b/packages/ripple-ui-core/src/styles/utilities/_aspect.css
@@ -1,6 +1,6 @@
.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);
@@ -8,8 +8,8 @@
}
@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 */
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
index 52615cb987..76bd5f11d1 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
+++ b/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%;
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts
new file mode 100644
index 0000000000..85d7adc907
--- /dev/null
+++ b/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')
+ })
+})
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.stories.mdx b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.stories.mdx
index 017aab2863..17409ee3ff 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.stories.mdx
+++ b/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()}
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
index 15cbd825b8..963e70ed20 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
+++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
@@ -6,7 +6,7 @@ export default {