chore(DrawerList): add test and example for inline styling (#4513)

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx

@@ -151,6 +151,74 @@ export const DrawerListExampleDisabled = () => (
   </Wrapper>
 )
 
+export const DrawerListExampleInlineStyling = () => (
+  <Wrapper>
+    <ComponentBox>
+      <DrawerList
+        skip_portal
+        opened
+        prevent_close
+        observer_element=".dnb-live-preview" // prevents direction to change when scrolling in this example
+      >
+        <DrawerList.Options>
+          <DrawerList.Item
+            style={{ color: 'red' }}
+            key="A"
+            selected={false}
+            value="A"
+            on_click={() => {
+              console.log('on_click')
+            }}
+          >
+            Item 1
+          </DrawerList.Item>
+          <DrawerList.HorizontalItem
+            style={{ color: 'green' }}
+            key="B"
+            selected={false}
+            value="B"
+            on_click={() => {
+              console.log('on_click')
+            }}
+          >
+            Item 2
+          </DrawerList.HorizontalItem>
+        </DrawerList.Options>
+      </DrawerList>
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const DrawerListExampleInlineStylingData = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="drawer-list-inline-style">
+      <DrawerList
+        skip_portal
+        opened
+        prevent_close
+        data={[
+          {
+            content:
+              'They may be very large, like pneumonoultramicroscopicsilicovolcanoconiosis, a 45-letter hippopotomonstrosesquipedalian word for black lung disease.',
+            style: { hyphens: 'auto', color: 'red' },
+          },
+          {
+            content:
+              'The longest word in the Oxford English Dictionary is the 45-letter pneumonoultramicroscopicsilicovolcanoconiosis, which refers to a form of lung disease.',
+            style: { hyphens: 'none', color: 'green' },
+          },
+          {
+            content:
+              'According to the Oxford English Dictionary the longest word in the language is pneumonoultramicroscopicsilicovolcanoconiosis, with 45 letters.',
+            style: { hyphens: 'manual', color: 'blue' },
+          },
+        ]}
+        observer_element=".dnb-live-preview" // prevents direction to change when scrolling in this example
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const DrawerListExampleSingleItem = () => (
   <Wrapper>
     <ComponentBox scope={{ data }}>

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/_prop-data.mdx

@@ -108,6 +108,7 @@ type ARRAY_OBJECT = {
   selectedKey?: string | number
   selected_value?: string | React.Node
   suffix_value?: string | React.Node
+  style?: React.CSSProperties
 }
 
 // `data` as an array. A list of "ARRAY_OBJECT" types is preferred,

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/demos.mdx

@@ -9,6 +9,8 @@ import {
   DrawerListExampleDisabled,
   DrawerListExampleSingleItem,
   DrawerListExampleMarkup,
+  DrawerListExampleInlineStyling,
+  DrawerListExampleInlineStylingData,
 } from 'Docs/uilib/components/fragments/drawer-list/Examples'
 
 ## Demos
@@ -38,3 +40,11 @@ import {
 **NB:** By using this method you lose currently a lot of the core functionality like keyboard support and other accessibility features.
 
 <DrawerListExampleMarkup />
+
+### Inline styling using JSX
+
+<DrawerListExampleInlineStyling />
+
+### Inline styling using `data`
+
+<DrawerListExampleInlineStylingData />

packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts

@@ -24,6 +24,7 @@ export type DrawerListDataArrayObject = {
   content?: DrawerListContent;
   disabled?: boolean;
   search_content?: string | React.ReactNode | string[];
+  style?: React.CSSProperties;
 };
 /** @deprecated use `DrawerListDataArrayItem` */
 export type DrawerListDataObjectUnion = DrawerListDataArrayItem;
@@ -201,7 +202,7 @@ export type DrawerListItemProps = {
      */
     value: string;
   }) => void;
-};
+} & Omit<React.HTMLProps<HTMLElement>, 'children'>;
 export type DrawerListAllProps = DrawerListProps &
   SpacingProps &
   Omit<
@@ -215,6 +216,7 @@ export default class DrawerList extends React.Component<
   static defaultProps: object;
   static Options: (props: DrawerListOptionsProps) => JSX.Element;
   static Item: (props: DrawerListItemProps) => JSX.Element;
+  static HorizontalItem: (props: DrawerListItemProps) => JSX.Element;
   render(): JSX.Element;
 }
 export type ItemContentChildren =

packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js

@@ -311,6 +311,7 @@ class DrawerListInstance extends React.PureComponent {
           onClick: this.selectItemHandler,
           onKeyDown: this.preventTab,
           disabled: dataItem.disabled,
+          style: dataItem.style,
         }
 
         if (ignoreEvents) {

packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.screenshot.test.ts

@@ -33,4 +33,15 @@ describe.each(['ui', 'sbanken'])('DrawerList for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match the inline style example', async () => {
+    const screenshot = await makeScreenshot({
+      style: {
+        width: '14rem',
+        'padding-top': '3rem',
+      },
+      selector: '[data-visual-test="drawer-list-inline-style"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx

@@ -720,6 +720,80 @@ describe('DrawerList component', () => {
       await testDirectionObserver()
     })
   })
+
+  describe('inline style', () => {
+    it('sets correct styling using data object', () => {
+      render(
+        <DrawerList
+          {...props}
+          data={[
+            {
+              content: 'content',
+              style: { hyphens: 'auto' },
+            },
+          ]}
+        />
+      )
+
+      expect(
+        document
+          .querySelector('li.dnb-drawer-list__option')
+          .getAttribute('style')
+      ).toBe('hyphens: auto;')
+    })
+
+    it('sets correct style using DrawerList.Item', () => {
+      render(
+        <DrawerList {...props}>
+          <DrawerList.Options>
+            <DrawerList.Item
+              style={{ hyphens: 'auto' }}
+              key="A"
+              selected={false}
+              value="A"
+              on_click={() => {
+                console.log('on_click')
+              }}
+            >
+              Content
+            </DrawerList.Item>
+          </DrawerList.Options>
+        </DrawerList>
+      )
+
+      expect(
+        document
+          .querySelector('li.dnb-drawer-list__option')
+          .getAttribute('style')
+      ).toBe('hyphens: auto;')
+    })
+
+    it('sets correct style using DrawerList.HorizontalItem', () => {
+      render(
+        <DrawerList {...props}>
+          <DrawerList.Options>
+            <DrawerList.HorizontalItem
+              style={{ hyphens: 'auto' }}
+              key="A"
+              selected={false}
+              value="A"
+              on_click={() => {
+                console.log('on_click')
+              }}
+            >
+              Content
+            </DrawerList.HorizontalItem>
+          </DrawerList.Options>
+        </DrawerList>
+      )
+
+      expect(
+        document
+          .querySelector('span.dnb-drawer-list__option__item')
+          .getAttribute('style')
+      ).toBe('hyphens: auto;')
+    })
+  })
 })
 
 describe('DrawerList markup', () => {