fix: fix reset_button_text property of DatePicker (#1196)

dnbexperience · Jan 14, 2022 · e50fb6f · e50fb6f
1 parent 6a30523
commit e50fb6f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js
@@ -519,6 +519,7 @@ export default class DatePicker extends React.PureComponent {
       mask_order,
       mask_placeholder,
       align_picker,
+      reset_button_text,
 
       hide_navigation: _hide_navigation, // eslint-disable-line
       return_format: _return_format, // eslint-disable-line
@@ -710,6 +711,7 @@ export default class DatePicker extends React.PureComponent {
                         onSubmit={this.onSubmitHandler}
                         onCancel={this.onCancelHandler}
                         onReset={this.onResetHandler}
+                        resetButtonText={reset_button_text}
                       />
                     </>
                   )}

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.js
@@ -19,12 +19,15 @@ export default class DatePickerFooter extends React.PureComponent {
     onSubmit: PropTypes.func,
     onCancel: PropTypes.func,
     onReset: PropTypes.func,
+
+    resetButtonText: PropTypes.string,
   }
 
   static defaultProps = {
     onSubmit: null,
     onCancel: null,
     onReset: null,
+    resetButtonText: null,
   }
 
   onSubmitHandler = (args) => {
@@ -87,7 +90,7 @@ export default class DatePickerFooter extends React.PureComponent {
   }
 
   render() {
-    const { isRange } = this.props
+    const { isRange, resetButtonText } = this.props
 
     const { show_reset_button, show_cancel_button, show_submit_button } =
       this.context.props
@@ -100,8 +103,11 @@ export default class DatePickerFooter extends React.PureComponent {
       return <></>
     }
 
-    const { submit_button_text, cancel_button_text, reset_button_text } =
-      this.context.translation.DatePicker
+    const {
+      submit_button_text,
+      cancel_button_text,
+      reset_button_text: reset_button_text_translation,
+    } = this.context.translation.DatePicker
 
     return (
       <div className="dnb-date-picker__footer">
@@ -116,7 +122,7 @@ export default class DatePickerFooter extends React.PureComponent {
         <span>
           {(isTrue(show_reset_button) && (
             <Button
-              text={reset_button_text}
+              text={resetButtonText || reset_button_text_translation}
               icon="reset"
               icon_position="left"
               variant="tertiary"

diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.js b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.js
@@ -311,12 +311,15 @@ describe('DatePicker component', () => {
 
     const resetElem = Comp.find('button[data-visual-test="reset"]')
     expect(resetElem.exists()).toBe(true)
+    expect(resetElem.text()).toMatch('Tilbakestill')
 
     const cancelElem = Comp.find('button[data-visual-test="cancel"]')
     expect(cancelElem.exists()).toBe(true)
+    expect(cancelElem.text()).toMatch('Avbryt')
 
     const submitElem = Comp.find('button[data-visual-test="submit"]')
     expect(submitElem.exists()).toBe(true)
+    expect(submitElem.text()).toMatch('Ok')
 
     expect(
       Comp.find('input.dnb-date-picker__input--year').instance().value
@@ -353,7 +356,25 @@ describe('DatePicker component', () => {
     expect(on_submit.mock.calls[0][0].date).toBe(date)
   })
 
-  it('has a warking month correction', () => {
+  it('footers reset button text is set by prop reset_button_text', () => {
+    const reset_button_text = 'custom reset button text'
+
+    const Comp = mount(
+      <Component
+        range
+        opened
+        no_animation
+        show_reset_button
+        reset_button_text={reset_button_text}
+      />
+    )
+
+    const resetElem = Comp.find('button[data-visual-test="reset"]')
+    expect(resetElem.exists()).toBe(true)
+    expect(resetElem.text()).toMatch(reset_button_text)
+  })
+
+  it('has a working month correction', () => {
     const Comp = mount(<Component show_input />)
 
     const dayElem = Comp.find('input.dnb-date-picker__input--day').at(0)