Skip to main content

Image Library

Proposed change​

Create a component for every image in our application

How it looks now​


import BananaImage from '../../images/banana.svg';
import AppleImage from '../../images/apple.svg';
import Img from '@dnb/eufemia'
import { translationKeys } from '../../services/i18n';

<Img
    src={BananaImage}
    alt={<FormattedMessage id={translationKeys.banana_image_alt_text} />}
    data-testid='banana-image-test-id'
    //... props
/>
<Img
    src={AppleImage}
    alt={<FormattedMessage id={translationKeys.apple_image_alt_text} />}
    data-testid='apple-image-test-id'
    //... props
/>

Alternative​

The idea is to store all the .svg files in one place as well as the alt-texts. We could remove the images in the /images/ folder in all the apps, and the alt-texts from the individual components. Instead, we can store everything in one location.

My suggestion



import {BananaImage, AppleImage} from '@pm-netbank/components/image'

<BananaImage
    //... props
/>

<AppleImage
    //... props
/>

Testing

We do not have to test the alt tests because they will be tested in the components themselves

it('renders the banana image', () => {
  const { queryByTestId } = renderComponent();

  expect(queryByTestId('image-banana')).not.toBeNull();
});
it('renders the apple image', () => {
  const { queryByTestId } = renderComponent();

  expect(queryByTestId('image-apple')).not.toBeNull();
});

With this alternative this will be the steps for adding a new image to PM Netbank:

  1. Save the SVG file in the correct folder (under shared components)
  2. Add a Lokalise key for the alt-text.
  3. Create the image component, with tests.
  4. Use the component.

Motivation​

The motivation for making this change is to store all the images we use in one place, together with all the alt texts. This will make sure we don't have any duplicate images, or duplicate alt texts, as well as reduce the number of tests we need in the apps when adding an image.

We will need to go through all the apps and update the usage of images, but this is a relatively small change.

Proposed transition strategy​

Step 1: Create the image components we use today and use them all the places we use the Eufemia <Img> component today Step 2: When adding a new image to PM Netbank, add it as a component.