chore: update snapshots

dnbexperience · Jun 22, 2022 · 706b2ee · 706b2ee
1 parent a21373c
commit 706b2ee
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 16 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js
@@ -337,7 +337,6 @@ render(
     show_submit_button
     label="From account"
     label_direction="vertical"
-    suffix_sr_label="Sum:"
   />
 )
 `}

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md
@@ -67,15 +67,17 @@ Data is provided as such:
 const { locale } = React.useContext(Context)
 const data = [
   {
-    suffix_value: format(value, { currency: true, locale }),
+    suffix_value: (
+      <NumberFormat currency srLabel="Total:">
+        {12345678}
+      </NumberFormat>
+    ),
     selected_value: `Brukskonto (${ban})`,
     content: ['Brukskonto', ban],
   },
 ]
 ```
 
-**NB:** You have to have a properly defined `suffix_sr_label` when you have several "numbers" inside the selected area.
-
 <AutocompleteSuffix />
 
 ### Custom width

diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md b/...s/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md
@@ -40,7 +40,6 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 | `selected_sr`                                                    | _(optional)_ only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`.                                                                                                            |
 | `submit_button_title`                                            | _(optional)_ title on submit button. Defaults to `Vis alternativer`.                                                                                                                                                             |
 | `submit_button_icon`                                             | _(optional)_ the icon used in the submit button. Defaults to `chevron_down`.                                                                                                                                                     |
-| `suffix_sr_label`                                                | _(optional)_ if you use `suffix_value` in your data, you should provide a meaningful label to it. It is used for the selected item and only for screen readers.                                                                  |
 | `submit_element`                                                 | _(optional)_ replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`.                                          |
 | `opened`                                                         | _(optional)_ if set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.                                                                                                    |
 | `open_on_focus`                                                  | _(optional)_ use `true` to auto open the list once the user is entering the input field with the keyboard.                                                                                                                       |

diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -69,7 +69,6 @@ export default class Autocomplete extends React.PureComponent {
       PropTypes.string,
       PropTypes.node,
     ]),
-    suffix_sr_label: PropTypes.string,
     indicator_label: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.node,
@@ -260,7 +259,6 @@ export default class Autocomplete extends React.PureComponent {
     no_options: null,
     show_all: null,
     aria_live_options: null,
-    suffix_sr_label: null,
     indicator_label: null,
     show_options_sr: null,
     selected_sr: null,
@@ -1719,7 +1717,6 @@ class AutocompleteInstance extends React.PureComponent {
       selected_sr,
       submit_button_title,
       submit_button_icon,
-      suffix_sr_label,
       portal_class,
       drawer_class,
       input_ref, // eslint-disable-line

diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -89,6 +89,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
   submit_button_title="submit_button_title"
   submit_element="submit_element"
   suffix="suffix"
+  suffix_sr_label="suffix_sr_label"
   title="title"
   triangle_position={null}
   value={2}
@@ -197,6 +198,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
     submit_button_title="submit_button_title"
     submit_element="submit_element"
     suffix="suffix"
+    suffix_sr_label="suffix_sr_label"
     tagName="dnb-autocomplete"
     title="title"
     triangle_position={null}
@@ -292,6 +294,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
       submit_button_title="submit_button_title"
       submit_element="submit_element"
       suffix="suffix"
+      suffix_sr_label="suffix_sr_label"
       title="title"
       triangle_position={null}
       value={2}
@@ -1214,6 +1217,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                   "submit_button_title": "submit_button_title",
                   "submit_element": "submit_element",
                   "suffix": "suffix",
+                  "suffix_sr_label": "suffix_sr_label",
                   "title": "title",
                   "triangle_position": null,
                   "value": 2,
@@ -2890,6 +2894,33 @@ legend.dnb-form-label {
     transition: transform 400ms ease-out; }
     html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
       transition-duration: 1ms !important; }
+  .dnb-autocomplete .dnb-input__inner__element {
+    position: relative;
+    z-index: 3; }
+  @media screen and (min-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 0 !important; } }
+  @media screen and (max-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 2.5rem !important; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    pointer-events: none;
+    white-space: nowrap;
+    padding: 0 0.5rem; }
+    @media screen and (max-width: 40em) {
+      .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+        display: none; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p,
+  .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    margin: 0; }
+  .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
+    margin-right: 2.5rem !important; }
+  .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
+    padding-right: 3rem; }
+  .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
+    padding-right: 1rem; }
   .dnb-autocomplete__text {
     order: 1;
     position: relative;

diff --git a/...mplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png b/...mplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png
diff --git a/...st-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png b/...st-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png
diff --git a/...shot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png b/...shot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png
diff --git a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js
@@ -853,26 +853,41 @@ const WideStyle = styled.div`
 export function DataSuffix() {
   const { locale } = React.useContext(Context)
   const ban = format(21001234567, { ban: true, locale })
-  const suffix_value = format(12345678, { currency: true, locale })
   const numbers = [
     {
       selected_value: `Brukskonto (${ban})`,
-      suffix_value,
+      suffix_value: (
+        <NumberFormat lang="nb" currency srLabel="Total:">
+          {12345678}
+        </NumberFormat>
+      ),
       content: ['Brukskonto', ban],
     },
     {
       selected_value: `BSU (${ban})`,
-      suffix_value,
+      suffix_value: (
+        <NumberFormat currency srLabel="Total:">
+          {2223}
+        </NumberFormat>
+      ),
       content: ['BSU', ban],
     },
     {
       selected_value: `Sparekonto (${ban})`,
-      suffix_value,
+      suffix_value: (
+        <NumberFormat currency srLabel="Total:">
+          {876555.5}
+        </NumberFormat>
+      ),
       content: ['Sparekonto', ban],
     },
     {
       selected_value: `Brukskonto (${ban})`,
-      suffix_value,
+      suffix_value: (
+        <NumberFormat currency srLabel="Total:">
+          {34999.2}
+        </NumberFormat>
+      ),
       content: ['Brukskonto', ban],
     },
   ]
@@ -881,14 +896,14 @@ export function DataSuffix() {
     <WideStyle>
       <FormRow vertical>
         <Autocomplete
+          lang="nb"
           value={0}
           data={numbers}
           size="medium"
           input_icon={null}
           show_submit_button
           label="From account"
           label_direction="vertical"
-          suffix_sr_label="Sum:"
         />
       </FormRow>
     </WideStyle>

diff --git a/...ges/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/...ges/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
@@ -813,6 +813,12 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = `
             align-self: center; } }
       .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before {
         visibility: hidden; }
+    @media screen and (min-width: 40em) {
+      .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix {
+        z-index: 2;
+        background-color: inherit; }
+      .dnb-drawer-list__option:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__suffix.dnb-drawer-list__option__item:nth-of-type(n + 2) {
+        color: var(--color-black-80); } }
     html[data-whatinput='keyboard']
 .dnb-drawer-list__option--selected.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
       visibility: visible;
@@ -1067,6 +1073,12 @@ exports[`DrawerList scss have to match snapshot 1`] = `
         word-break: break-word;
         white-space: nowrap;
         font-size: inherit; }
+    @media screen and (min-width: 40em) {
+      .dnb-drawer-list__option__suffix {
+        grid-column: 2;
+        grid-row: 1 / -1;
+        justify-self: end;
+        align-self: center; } }
     .dnb-drawer-list__option--ignore {
       cursor: default;
       pointer-events: none; }

diff --git a/packages/dnb-eufemia/src/shared/locales/en-GB.js b/packages/dnb-eufemia/src/shared/locales/en-GB.js
@@ -62,7 +62,6 @@ export default {
     Autocomplete: {
       title: 'Type and select',
       submit_button_title: 'Show options',
-      suffix_sr_label: 'Addition: %s',
       no_options: 'No option',
       show_all: 'Show everything',
       show_options_sr: 'Browse options, close with esc button',

diff --git a/packages/dnb-eufemia/src/shared/locales/nb-NO.js b/packages/dnb-eufemia/src/shared/locales/nb-NO.js
@@ -62,7 +62,6 @@ export default {
     Autocomplete: {
       title: 'Skriv og velg',
       submit_button_title: 'Vis alternativer',
-      suffix_sr_label: 'Tillegg: %s',
       no_options: 'Ingen alternativer',
       show_all: 'Vis alt',
       show_options_sr: 'Bla gjennom alternativer, lukk med esc knappen',