* Resolves Issue agama-project#1415

* Entire card is clickable, selection of card
  is still marked by blue boarder

* Add icon to structures, pass it to dbus, etc
  (please do not mix product icon with pattern icon)
  fallback to default.svg in case that no icon is set

* Rework button layout to clickable layout

* We might need to use table or similar in case that
  description is longer than the

* Supply icon for all products including default icon

…er text without wrap

Co-authored-by: José Iván López <joseivanlopez@gmail.com>

Co-authored-by: Josef Reidinger <jreidinger@suse.cz>

Co-authored-by: Josef Reidinger <jreidinger@suse.cz>

Co-authored-by: Josef Reidinger <jreidinger@suse.cz>

Breaks build

ERROR in ./src/components/product/ProductSelectionPage.jsx 107:22-63
Module not found: Error: Can't resolve '~/assets/products' in '/home/runn

This reverts commit e7e7b9d.

Since it's arguably that they might confuse users and also because of
consistent with the rest of the UI. They could be drop or hidden later,
but thinking globally in all selectors and implications of doing so.

Also, this commit improves a little the proposed layout by making use of
the label for "increasing" the clickable area instead of adding a
handler for the PF/Card component itself. Again, this can be refactored
later if really needed.

Read the reasoning at
agama-project#1550 (review)
and/or agama-project#1550 (comment).

As a result of an internal component defined in the body of the main
component (aka "render function"), the focus was lost each time the main
component got re-rendered because of a "selected product" changed.

This happens because these internal components are actually not
re-rendered but remounting since they were re-defined :/ A bit messy,
but there is a lot of documentation about it. To link a few,

  * https://react.dev/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state
    - Which contains a "Pitfall" warning that says: **This is why you
      should not nest component function definitions.**
  * https://www.developerway.com/posts/react-re-renders-guide#part3.1

To make them accessible.

For improving its a11y when using an screen reader.

Also makes the PF/Card element clickable as proposed by @lkocman
initially ease the selection for mouse users, but keeping the radio
inputs as both, visual and keyboard aid.

Kind of undoing some changes made at
ec57cc1 related to the clickable card.
It made a11y tools complain about "Clickable elements must be focusable
and should have interactive semantics" which makes sense.

Instead of start adding keyboard handlers to the PF/Card component too
this commit uses a CSS technique for "expanding" the area of the label
to the whole card and using the pointer cursor, while keeping the
details out of the label but the cursor: pointer. That way, the
component still accessible for keyboard and screen reader while improve
the mouse users experience too.

Which revealed that `pattern` property of `SoftwareConfig` type is
actually optional.