[ui] Add Hero Introbox stories. Fix Introbox tests.

libs/juno-ui-components/.storybook/main.js

@@ -30,9 +30,16 @@ module.exports = {
     fileLoaderRule.exclude = /\.svg$/;  
 
     config.module.rules.push({
-      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+      test: /\.svg$/i,
+      type: 'asset',
+      resourceQuery: /url/, // import filename: *.svg?url
+    })
+
+    config.module.rules.push({
+      test: /\.svg$/i,
       enforce: 'pre',
       issuer: /\.jsx?$/,
+      resourceQuery: { not: [/url/] }, // exclude react component if import filename *.svg?url
       loader: require.resolve('@svgr/webpack'),
       options: {
         svgo: false, 

libs/juno-ui-components/package.json

@@ -5,7 +5,7 @@
   "module": "lib/index.js",
   "source": "src/index.js",
   "style": "lib/esm/styles.css",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "files": [
     "src",
     "lib",

libs/juno-ui-components/src/components/IntroBox/IntroBox.component.js

@@ -64,10 +64,16 @@ export const IntroBox = ({
   children,
   ...props
 }) => {
+
+
+  const isHeroWithImage = React.useMemo(() => {
+    return heroImage && variant === "hero"
+  }, [variant, heroImage])
+
   return (
     <div
       className={`juno-introbox ${introbox(variant, heroImage)} ${className}`}
-      style={heroImage && {backgroundImage: `${heroImage}`}}
+      style={isHeroWithImage ? {backgroundImage: `${heroImage}`} : {}}
       {...props}
     >
       <div className={`${introboxBorder}`}></div>
@@ -86,7 +92,7 @@ IntroBox.propTypes = {
   text: PropTypes.string,
   /** Pass a custom class */
   variant: PropTypes.oneOf(["default", "hero"]),
-  /** optional "hero" flavor image for hero variant. Specify as tailwind bg image string pointing to an image in your app (see template app for an example). Will always be positioned top and right */
+  /** optional "hero" flavor image for hero variant. Specify as css bg image string pointing to an image in your app (see template app for an example). Will always be positioned top and right */
   heroImage: PropTypes.string,
   /** Pass a custom class */
   className: PropTypes.string,

libs/juno-ui-components/src/components/IntroBox/IntroBox.stories.js

@@ -1,5 +1,6 @@
 import React from "react"
 import { IntroBox } from "./index.js"
+import heroImage from "../../img/app_bg_example.svg?url"
 
 export default {
   title: "Components/IntroBox",
@@ -19,3 +20,18 @@ WithTitle.args = {
   title: "IntroBox",
   text: "IntroBox with title.",
 }
+
+export const Hero = Template.bind({})
+Hero.args = {
+  title: "IntroBox",
+  text: "Hero IntroBox has a larger font size and more padding",
+  variant: "hero",
+}
+
+export const HeroWithBGImage = Template.bind({})
+HeroWithBGImage.args = {
+  title: "IntroBox",
+  text: "Hero IntroBox with background image. Background image must be referenced as a css bg image string. Import svg images with query param ?url.",
+  variant: "hero",
+  heroImage: `url(${heroImage})`
+}

libs/juno-ui-components/src/components/IntroBox/IntroBox.test.js

@@ -13,26 +13,20 @@ describe("IntroBox", () => {
       <IntroBox
         data-testid="my-introbox"
         variant="hero"
-        heroImage="bg-fake-img"
+        heroImage="url('bg-fake-img')"
       />
     )
-    expect(screen.getByTestId("my-introbox")).toHaveAttribute(
-      "class",
-      expect.stringContaining("bg-fake-img")
-    )
+    expect(screen.getByTestId("my-introbox")).toHaveStyle({backgroundImage: "url('bg-fake-img')"})
   })
 
   test("renders an IntroBox without background image as passed if variant is not hero", async () => {
     render(
       <IntroBox
         data-testid="my-introbox"
-        heroImage="bg-fake-img"
+        heroImage="url('bg-fake-img')"
       />
     )
-    expect(screen.getByTestId("my-introbox")).not.toHaveAttribute(
-      "class",
-      expect.stringContaining("bg-fake-img")
-    )
+    expect(screen.getByTestId("my-introbox")).not.toHaveStyle({backgroundImage: "url('bg-fake-img')"})
   })
 
   test("renders a title as passed", async () => {