feat(Logo): Refactor Logo to ts

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -62,7 +62,7 @@ For more information on how to replace these, check out [these docs](/uilib/layo
 
 ## Tag
 
-- Find prop `onDelete` and replace with `onClick`, add prop `variant='removable'`
+- Find prop `onDelete` and replace with `onClick`, add prop `variant='removable'`.
 
 ## Definition lists
 
@@ -80,12 +80,12 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 
 ## ProgressIndicator
 
-- replace `no_animation` with `noAnimation`
-- replace `label_direction` with `labelDirection`
-- replace `show_label` with `showDefaultLabel`
-- replace `on_complete` with `onComplete`
-- replace `class` with `className`
-- replace `children` with `label`
+- replace `no_animation` with `noAnimation`.
+- replace `label_direction` with `labelDirection`.
+- replace `show_label` with `showDefaultLabel`.
+- replace `on_complete` with `onComplete`.
+- replace `class` with `className`.
+- replace `children` with `label`.
 
 ## Hr-line (Divider)
 
@@ -98,11 +98,19 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 
 ## Checkbox
 
-- replace `label_position` with `labelPosition`
-- replace `label_sr_only` with `labelSrOnly`
-- replace `status_state` with `statusState`
-- replace `status_props` with `statusProps`
-- replace `on_change` with `onChange`
-- replace `children` with `label`
+- replace `label_position` with `labelPosition`.
+- replace `label_sr_only` with `labelSrOnly`.
+- replace `status_state` with `statusState`.
+- replace `status_props` with `statusProps`.
+- replace `on_change` with `onChange`.
+- replace `children` with `label`.
+
+## Logo
+
+- remove `size`. replace it with `height` if it contains a numeric value and with `inheritSize` where `size='inherit'`.
+- remove the following props: `alt` and `ratio`.
+- replace `inherit_color` with `inheritColor`.
+- change `width` from number to string.
+- change `height`from number to string.
 
 _February, 6. 2024_

packages/dnb-design-system-portal/src/docs/uilib/components/logo/Examples.tsx

@@ -16,23 +16,23 @@ export const LogoDefaultExample = () => (
 export const LogoAutoSizeExample = () => (
   <ComponentBox data-visual-test="logo-auto-size">
     <span style={{ fontSize: '6rem' }}>
-      <Logo size="auto" />
+      <Logo />
     </span>
   </ComponentBox>
 )
 
 export const LogoInheritSizeExample = () => (
   <ComponentBox data-visual-test="logo-inherit-size">
     <span style={{ height: '6rem' }}>
-      <Logo size="inherit" />
+      <Logo inheritSize />
     </span>
   </ComponentBox>
 )
 
 export const LogoInheritColorExample = () => (
   <ComponentBox data-visual-test="logo-inherit-color">
     <span style={{ color: 'tomato' }}>
-      <Logo height="96" inherit_color />
+      <Logo height="96" inheritColor />
     </span>
   </ComponentBox>
 )

packages/dnb-design-system-portal/src/docs/uilib/components/logo/properties.mdx

@@ -2,15 +2,7 @@
 showTabs: true
 ---
 
-## Properties
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { LogoProperties } from '@dnb/eufemia/src/components/logo/LogoDocs'
 
-| Properties                              | Description                                                                                                                                                                                                |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `brand`                                 | _(optional)_ define which brand's logo to show. `ui` (DNB) or `sbanken`. Defaults to `ui`.                                                                                                                 |
-| `variant`                               | _(optional)_ define the logo variant, if there is more than one variant of a brand's logo. Currently the only option other than default is a `compact` variant of the Sbanken logo. Defaults to `default`. |
-| `size`                                  | _(optional)_ define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`.                                   |
-| `color`                                 | _(optional)_ define the color of the logo.                                                                                                                                                                 |
-| `inherit_color`                         | _(optional)_ set to `true` if you do not want to inherit the color by `currentColor`. Defaults to `false`.                                                                                                 |
-| `width`                                 | _(optional)_ define either the width of the logo.                                                                                                                                                          |
-| `height`                                | _(optional)_ or define the height of the logo.                                                                                                                                                             |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                      |
+<PropertiesTable props={LogoProperties} />