-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[SDPL-88] Field select letter (#565)
* [SDPL-88] Added Option Button field to RplForm. * [SDPL-88] Update snapshot. * [SDPL-88] Add test for Option Button.
- Loading branch information
Showing
5 changed files
with
851 additions
and
12 deletions.
There are no files selected for viewing
89 changes: 89 additions & 0 deletions
89
packages/components/Molecules/Form/__tests__/fieldRplOptionbutton.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { mount } from '@vue/test-utils' | ||
| import RplOptionButton from './../fields/fieldRploptionbutton' | ||
|
|
||
| describe('RplOptionButton', () => { | ||
| it('has A-Z for default options', () => { | ||
| const wrapper = mount(RplOptionButton, { | ||
| propsData: { | ||
| schema: { | ||
| type: 'rploptionbutton', | ||
| label: 'Option button default', | ||
| hint: 'Option button test', | ||
| model: 'optionsButton' | ||
| } | ||
| } | ||
| }) | ||
| expect(wrapper.isVueInstance()).toBeTruthy() | ||
| const alphabet = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ] | ||
| wrapper.findAll('.rpl-option-button__label').wrappers.forEach((item, idx) => { | ||
| expect(item.text()).toBe(alphabet[idx]) | ||
| }) | ||
| }) | ||
|
|
||
| it('sets the value "D" when 4th option clicked', () => { | ||
| const wrapper = mount(RplOptionButton, { | ||
| propsData: { | ||
| model: { | ||
| optionsButton: null | ||
| }, | ||
| schema: { | ||
| type: 'rploptionbutton', | ||
| label: 'Option button default', | ||
| hint: 'Option button test', | ||
| model: 'optionsButton' | ||
| } | ||
| } | ||
| }) | ||
| wrapper.find('.rpl-option-button__label:nth-child(4)').trigger('click') | ||
| expect(wrapper.props().model.optionsButton).toBe('D') | ||
| }) | ||
|
|
||
| it('has custom text for options when defined', () => { | ||
| const customOptions = [ | ||
| 'Option one', | ||
| 'Option two', | ||
| 'Option three' | ||
| ] | ||
| const wrapper = mount(RplOptionButton, { | ||
| propsData: { | ||
| model: { | ||
| optionsButton: null | ||
| }, | ||
| schema: { | ||
| type: 'rploptionbutton', | ||
| label: 'Option button default', | ||
| hint: 'Option button test', | ||
| model: 'optionsButton', | ||
| optionValues: customOptions | ||
| } | ||
| } | ||
| }) | ||
| expect(wrapper.isVueInstance()).toBeTruthy() | ||
| wrapper.findAll('.rpl-option-button__label').wrappers.forEach((item, idx) => { | ||
| expect(item.text()).toBe(customOptions[idx]) | ||
| }) | ||
| }) | ||
|
|
||
| it('sets the value "Option three" when 3rd option clicked', () => { | ||
| const wrapper = mount(RplOptionButton, { | ||
| propsData: { | ||
| model: { | ||
| optionsButton: null | ||
| }, | ||
| schema: { | ||
| type: 'rploptionbutton', | ||
| label: 'Option button default', | ||
| hint: 'Option button test', | ||
| model: 'optionsButton', | ||
| optionValues: [ | ||
| 'Option one', | ||
| 'Option two', | ||
| 'Option three' | ||
| ] | ||
| } | ||
| } | ||
| }) | ||
| wrapper.find('.rpl-option-button__label:nth-child(3)').trigger('click') | ||
| expect(wrapper.props().model.optionsButton).toBe('Option three') | ||
| }) | ||
| }) |
98 changes: 98 additions & 0 deletions
98
packages/components/Molecules/Form/fields/fieldRploptionbutton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <template> | ||
| <div class="rpl-option-button" :disabled="disabled" v-attributes="'wrapper'"> | ||
| <label v-for="(item, index) in optionValues" :key="index" class="rpl-option-button__label" :class="{ 'rpl-option-button__label--checked': isItemChecked(item) }"> | ||
| <input :id="getFieldID(schema, true)" type="radio" :name="id" class="rpl-option-button__radio" @click="onSelection(item)" :value="item" :class="schema.fieldClasses" :required="schema.required" /> | ||
| <span class="rpl-option-button__text">{{ item }}</span> | ||
| </label> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { abstractField } from 'vue-form-generator' | ||
| export default { | ||
| name: 'RplOptionButton', | ||
| mixins: [abstractField], | ||
| data () { | ||
| return { | ||
| optionValues: this.schema.optionValues || [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ] | ||
| } | ||
| }, | ||
| computed: { | ||
| id () { | ||
| return this.schema.model | ||
| } | ||
| }, | ||
| methods: { | ||
| onSelection (item) { | ||
| this.value = item | ||
| }, | ||
| isItemChecked (item) { | ||
| return (item === this.value) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| @import "~@dpc-sdp/ripple-global/scss/settings"; | ||
| @import "~@dpc-sdp/ripple-global/scss/tools"; | ||
| $rpl-option-button-label-background-color: rpl-color('white') !default; | ||
| $rpl-option-button-label-color: rpl-color('extra_dark_neutral') !default; | ||
| $rpl-option-button-label-border-width: 1px !default; | ||
| $rpl-option-button-label-border: $rpl-option-button-label-border-width solid rpl-color('mid_neutral_1') !default; | ||
| $rpl-option-button-label-checked-border: $rpl-option-button-label-border-width solid rpl-color('primary') !default; | ||
| $rpl-option-button-text-focused-color: rpl-color('primary') !default; | ||
| $rpl-option-button-text-focused-border: $rpl-option-button-label-border-width solid rpl-color('primary') !default; | ||
| .rpl-option-button { | ||
| $root: &; | ||
| margin-left: $rpl-option-button-label-border-width; | ||
| margin-top: $rpl-option-button-label-border-width; | ||
| &__label { | ||
| position: relative; | ||
| display: inline-block; | ||
| background-color: $rpl-option-button-label-background-color; | ||
| color: $rpl-option-button-label-color; | ||
| border: $rpl-option-button-label-border; | ||
| padding: $rpl-space-2; | ||
| min-width: rem(40px); | ||
| box-sizing: border-box; | ||
| text-align: center; | ||
| margin-left: -$rpl-option-button-label-border-width; | ||
| margin-top: -$rpl-option-button-label-border-width; | ||
| &:focus-within { | ||
| border: $rpl-option-button-text-focused-border; | ||
| z-index: 1; | ||
| #{$root}__text { | ||
| text-decoration: underline; | ||
| color: $rpl-option-button-text-focused-color; | ||
| } | ||
| } | ||
| &--checked { | ||
| border: $rpl-option-button-label-checked-border; | ||
| z-index: 1; | ||
| #{$root}__text { | ||
| text-decoration: none; | ||
| } | ||
| } | ||
| } | ||
| &__radio { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.