release of v10.23 (#3391)

dnbexperience · Mar 19, 2024 · ddf277e · ddf277e
2 parents 7a0716c + 55bb817
commit ddf277e
Show file tree

Hide file tree

Showing 619 changed files with 14,684 additions and 5,795 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md
@@ -28,7 +28,9 @@ Paste the results here:
 
 ## Eufemia Version
 
-**Browser:** Type `Eufemia.version` in your browser console.
+**Browser JS:** Type `Eufemia.version` in your browser console.
+
+**Browser CSS:** Type `window.getComputedStyle(document.body).getPropertyValue('--eufemia-version')` in your browser console.
 
 **Node.js:** Use import or require to find out what Eufemia version is imported:
 

diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,6 @@ yarn-error.log*
 # enviroment
 .env
 .env.*
+
+# IDE
+.idea
diff --git a/README.md b/README.md
@@ -26,6 +26,10 @@ This is a monorepo and uses **yarn workspaces** to manage the sub packages/works
 yarn add @dnb/eufemia
 ```
 
+## FAQ
+
+More information can be found in the [faq](https://eufemia.dnb.no/contribute/faq/).
+
 ## Contribution
 
 Find more information about how to contribute in [Eufemia Portal - Contribute](https://eufemia.dnb.no/contribute).

diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -57,7 +57,7 @@
     "@babel/eslint-parser": "7.22.5",
     "@babel/node": "7.22.5",
     "@emotion/cache": "11.11.0",
-    "@playwright/test": "1.38.1",
+    "@playwright/test": "1.42.1",
     "@types/json-schema": "7.0.12",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",

diff --git a/packages/dnb-design-system-portal/src/docs/contribute/faq.mdx b/packages/dnb-design-system-portal/src/docs/contribute/faq.mdx
@@ -84,6 +84,38 @@ This is due to the `JavaScript heap out of memory` error when using templates.
 
 Jest does start several works at the same time. When we simulate states on e.g. ToggleButton and Button – Playwright (v1.31.2) struggles to handle this. Some of the hover or focus tests will fail. To ensure Jest we never execute several workers as the same time, we set `--maxWorkers=1`.
 
+### Installing screenshot browser
+
+For running screenshot tests (visual tests), a headless Firefox browser is needed.
+
+In normal circumstances, the browser will be installed automatically via yarn install – but to either upgrade to a newer version, or to wipe out existing versions and run the install manually, you can run this commands, depending on your needs:
+
+```
+yarn workspace @dnb/eufemia playwright uninstall --all
+yarn workspace @dnb/eufemia add -D @playwright/test
+yarn workspace @dnb/eufemia playwright install firefox
+
+yarn workspace dnb-design-system-portal playwright uninstall --all
+yarn workspace dnb-design-system-portal add -D @playwright/test
+yarn workspace dnb-design-system-portal playwright install firefox
+```
+
+#### Alternative install: skip authentication
+
+But, since Node.js and corporate proxy do not enjoy each other's company, this might
+fail with a `Error: unable to get local issuer certificate`. In that case, your only
+option might be to disable all authentication for this command.
+
+```
+NODE_TLS_REJECT_UNAUTHORIZED=0 yarn workspace @dnb/eufemia playwright install firefox
+```
+
+#### Alternative install: manually
+
+Or, in the very worst case, you can manually download the zip file that `yarn workspace 
+@dnb/eufemia playwright install firefox` attempts to download, and extract the file
+("Nightly" for Firefox) to the folder indicated when `yarn test:screenshots` fails.
+
 ## How can I make faster builds?
 
 This is only meant for "setup testing" purposes! In order to make faster local builds, you can:

diff --git a/packages/dnb-design-system-portal/src/docs/contribute/style-guides/issues.mdx b/packages/dnb-design-system-portal/src/docs/contribute/style-guides/issues.mdx
@@ -40,7 +40,9 @@ These will each have a prepared template you need to fill out in order to submit
 
 ## Eufemia Version
 
-**Browser:** Type `Eufemia.version` in your browser console.
+**Browser JS:** Type `Eufemia.version` in your browser console.
+
+**Browser CSS:** Type `window.getComputedStyle(document.body).getPropertyValue('--eufemia-version')` in your browser console.
 
 **Node.js:** Use import or require to find out what Eufemia version is imported:
 

diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/spatial-system.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/spatial-system.mdx
@@ -216,8 +216,6 @@ For those familiar with CSS, we establish typographic rules in the following way
     - margin-**bottom** should be set with **rem**
 
     Use a calculator to calculate the **rem** and **em**.
-    Alternatively, refer to these test pages which show various font sizes embedded in various body font sizes.
-    Here is a good one: http://pxtoem.com/
 
 ## Eufemia Spatial System ≠ A Grid System
 

diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx b/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx
@@ -60,6 +60,10 @@ For more information on how to replace these, check out [these docs](/uilib/layo
 - Find `for_id` and replace with `forId`.
 - Find `sr_only` and replace with `srOnly`.
 
+## Tag
+
+- Find prop `onDelete` and replace with `onClick`, add prop `variant='removable'`
+
 ## Definition lists
 
 - Find `direction` in `<Dl>` and replace with `layout`.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx
@@ -35,6 +35,18 @@ const ContrastExample = styled(Example)`
   background-color: var(--color-ocean-green);
 `
 
+export const AnchorBasicUse = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="anchor-basic">
+      <P>
+        This is a regular paragraph with a{' '}
+        <Anchor href="https://dnb.no/">link to a website</Anchor> in the
+        middle of some text.
+      </P>
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const AnchorExampleInSection = () => (
   <Wrapper>
     <ComponentBox data-visual-test="anchor-in-section">
@@ -53,7 +65,7 @@ export const AnchorExampleInSection = () => (
 export const AnchorExampleStates = () => (
   <Wrapper>
     <ComponentBox scope={{ Example }} data-visual-test="anchor-states">
-      <Example data-visual-test="anchor-default">
+      <Example>
         <Anchor href="/uilib/components/anchor">Default Style</Anchor>
       </Example>
       <Example>
@@ -224,39 +236,37 @@ export const AnchorExampleIcons = () => (
       <Example data-visual-test="anchor-icon-right">
         <Anchor
           href="/uilib/components/anchor"
-          icon="chevron_right"
+          icon="arrow_right"
           iconPosition="right"
         >
-          Anchor with Icon right
+          Anchor with icon right
         </Anchor>
       </Example>
       <Example data-visual-test="anchor-icon-left">
-        <Anchor href="/uilib/components/anchor" icon="question">
-          Anchor with Icon left
+        <Anchor href="/uilib/components/anchor" icon="chevron_right">
+          Anchor with icon left
         </Anchor>
       </Example>
       <Example data-visual-test="anchor-icon-node">
         <Anchor
           href="/uilib/components/anchor"
           icon={<IconPrimary icon="question" />}
         >
-          Anchor with Icon left using a html/react element
+          Anchor with icon left using a html/react element
         </Anchor>
       </Example>
       <Example data-visual-test="anchor-paragraph">
         <P>
-          text
-          {' '}
+          A text paragraph with an{' '}
           <Anchor
             href="/uilib/components/anchor"
             icon="bell"
             iconPosition="right"
             className="dnb-anchor--inline"
           >
-            Inside a Paragraph
-          </Anchor>
-          {' '}
-          text
+            anchor with icon
+          </Anchor>{' '}
+          in it.
         </P>
       </Example>
     </ComponentBox>
@@ -348,110 +358,6 @@ export const AnchorExampleHeadings = () => (
   </Wrapper>
 )
 
-export const AnchorSbankenRegular = () => (
-  <Wrapper>
-    <ComponentBox hideCode scope={{ Example }}>
-      <Example>
-        <Anchor href="/uilib/components/anchor" icon="chevron_right">
-          Default
-        </Anchor>
-      </Example>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="chevron_right"
-          className="dnb-anchor--hover"
-        >
-          Hover
-        </Anchor>
-      </Example>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="chevron_right"
-          className="dnb-anchor--active"
-        >
-          Active
-        </Anchor>
-      </Example>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="chevron_right"
-          className="dnb-anchor--focus"
-        >
-          Focus
-        </Anchor>
-      </Example>
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const AnchorSbankenGoto = () => (
-  <Wrapper>
-    <ComponentBox hideCode scope={{ Example }}>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="arrow_right"
-          iconPosition="right"
-        >
-          Default
-        </Anchor>
-      </Example>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="arrow_right"
-          iconPosition="right"
-          className="dnb-anchor--hover"
-        >
-          Hover
-        </Anchor>
-      </Example>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="arrow_right"
-          iconPosition="right"
-          className="dnb-anchor--active"
-        >
-          Active
-        </Anchor>
-      </Example>
-      <Example>
-        <Anchor
-          href="/uilib/components/anchor"
-          icon="arrow_right"
-          iconPosition="right"
-          className="dnb-anchor--focus"
-        >
-          Focus
-        </Anchor>
-      </Example>
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const AnchorSbankenInline = () => (
-  <Wrapper>
-    <ComponentBox hideCode scope={{ Example }}>
-      <Example data-visual-test="anchor-inline">
-        <P>
-          A paragraph with an{' '}
-          <Anchor
-            href="/uilib/components/anchor"
-            className="dnb-anchor--inline"
-          >
-            inline anchor
-          </Anchor>{' '}
-          uses a different styling.
-        </P>
-      </Example>
-    </ComponentBox>
-  </Wrapper>
-)
-
 export const AnchorLegacyUsage = () => {
   return (
     <Wrapper>
@@ -479,3 +385,42 @@ export const AnchorLegacyUsage = () => {
     </Wrapper>
   )
 }
+
+const WidthMarkers = () => (
+  <>
+    {/* eslint-disable-next-line no-irregular-whitespace*/}
+    |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
+  </>
+)
+export const AnchorIconWordBreak = () => (
+  <Wrapper>
+    <ComponentBox hideCode scope={{ Example, WidthMarkers }}>
+      <Example data-visual-test="anchor-icon-break">
+        <P>
+          Some space{' '}
+          <Anchor
+            href="/uilib/components/anchor"
+            icon="bell"
+            className="dnb-anchor--inline"
+          >
+            wordAttachedToIcon longFinalWord
+          </Anchor>{' '}
+          <WidthMarkers />
+        </P>
+
+        <P>
+          Some{' '}
+          <Anchor
+            href="/uilib/components/anchor"
+            icon="bell"
+            iconPosition="right"
+            className="dnb-anchor--inline"
+          >
+            space wordAttachedToIcon
+          </Anchor>{' '}
+          longFinalWord <WidthMarkers />
+        </P>
+      </Example>
+    </ComponentBox>
+  </Wrapper>
+)
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,3 +29,6 @@ yarn-error.log* @@
     # enviroment
     .env
     .env.*
+    # IDE
+    .idea