feat(GlobalError): add new styles (no illustrations anymore) (#2381)

packages/dnb-design-system-portal/src/docs/404.tsx

@@ -0,0 +1,27 @@
+/**
+ * Page not found
+ *
+ */
+
+import React from 'react'
+import { GlobalError } from '@dnb/eufemia/src/components'
+import Layout from '../shared/parts/Layout'
+
+export default function PageNotFound({ location }) {
+  const { pathname } = location
+
+  return (
+    <Layout key="layout" location={location} hideSidebar>
+      <GlobalError
+        center
+        status="404"
+        title="We couldn't find that page!"
+        text={
+          <>
+            There's not a page at <code>{pathname}</code>
+          </>
+        }
+      />
+    </Layout>
+  )
+}

packages/dnb-design-system-portal/src/docs/500.tsx

@@ -0,0 +1,18 @@
+/**
+ * Page not found
+ *
+ */
+
+import React from 'react'
+import { GlobalError } from '@dnb/eufemia/src/components'
+
+export default function Error500() {
+  return (
+    <GlobalError
+      center
+      status="500"
+      title="Sorry, we got a technical issue!"
+      text="The service is not working properly at the moment. Please try again later."
+    />
+  )
+}

packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx

@@ -3,6 +3,7 @@
 - [New major version 10](/uilib/about-the-lib/releases/eufemia/v10-info/)
 - New components released:
   - [SkipContent](/uilib/components/skip-content)
+- [GlobalError](/uilib/components/global-error) got new styles (without illustrations).
 - New [Icons](/icons/secondary):
   - `handshake`
   - `heavy_equipment`

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

@@ -44,6 +44,7 @@ import { Accordion } from '@dnb/eufemia/src'
     - [Radio](#radio)
     - [Textarea](#textarea)
     - [ToggleButton](#togglebutton)
+    - [GlobalError](#globalerror)
   - [Element changes](#element-changes)
     - [Paragraph](#paragraph)
     - [Img](#img)
@@ -438,6 +439,10 @@ The Anchor was moved form `/elements` to `/components`.
 1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
    Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
 
+### [GlobalError](/uilib/components/global-error)
+
+- Removed the `href`, `back`, `status_content` properties as well as the SVG illustrations.
+
 ## Element changes
 
 ### [Paragraph](/uilib/elements/paragraph/)

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

@@ -19,3 +19,30 @@ export const GlobalError500Example = () => (
     <GlobalError status="500" />
   </ComponentBox>
 )
+
+export const GlobalErrorCustomStatusExample = () => (
+  <ComponentBox data-visual-test="global-error-custom">
+    {() => {
+      const links = [
+        { text: 'Forside', url: 'https://www.dnb.no/' },
+        { text: 'Forsikring', url: 'https://www.dnb.no/forsikring/' },
+        { text: 'Sparing', url: 'https://www.dnb.no/sparing/' },
+        { text: 'Lån', url: 'https://www.dnb.no/lan/' },
+        {
+          text: 'Kontakt',
+          url: 'https://www.dnb.no/hjelp-og-veiledning/',
+        },
+      ]
+      return (
+        <GlobalError
+          status="403"
+          title="Access Denied"
+          text="More related text"
+          links={links}
+        >
+          Additional Content
+        </GlobalError>
+      )
+    }}
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/global-error/demos.mdx

@@ -5,6 +5,7 @@ showTabs: true
 import {
   GlobalError404Example,
   GlobalError500Example,
+  GlobalErrorCustomStatusExample,
 } from 'Docs/uilib/components/global-error/Examples'
 
 ## Demos
@@ -16,3 +17,7 @@ import {
 ### To showcase the 500 status component
 
 <GlobalError500Example />
+
+### To showcase a custom status code
+
+<GlobalErrorCustomStatusExample />

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

@@ -4,32 +4,15 @@ showTabs: true
 
 ## Properties
 
-| Properties       | Description                                                                                                                 |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `status`         | _(optional)_ status code defines the view showing up.                                                                       |
-| `status_content` | _(optional)_ a JSON object or a JS object providing the status texts. More details below.                                   |
-| `title`          | _(optional)_ defining a `title` will overwrite the default provided by `status_content`.                                    |
-| `text`           | _(optional)_ defining a `text` will overwrite the default provided by `status_content`.                                     |
-| `alt`            | _(optional)_ defining a `alt` text for the SVG graphic will overwrite the default provided by `status_content`.             |
-| `back`           | _(optional)_ the text of the back button. Defaults to `Tilbake`. Can also be a React component.                             |
-| `href`           | _(optional)_ instead of using the default `window.history.back()` you can provide the back button and text link with a url. |
-| `children`       | _(optional)_ if needed, add additional content under the main content.                                                      |
-
-## Status Content
-
-The structure for the `status_content` property.
-
-```js
-{
-  404: {
-    title: ...,
-    text: ...,
-    alt: ...,
-  },
-  500: {
-    title: ...,
-    text: ...,
-    alt: ...
-  }
-}
-```
+| Properties | Description                                                                                                                      |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `status`   | _(optional)_ define a status code as a string. When `404` or `500` is given, a predefined text will be shown. Defaults to `400`. |
+| `title`    | _(optional)_ will overwrite the default title.                                                                                   |
+| `text`     | _(optional)_ will overwrite the default text.                                                                                    |
+| `code`     | _(optional)_ will overwrite the default error message code.                                                                      |
+| `help`     | _(optional)_ will overwrite the default additional help text.                                                                    |
+| `links`    | _(optional)_ provide an array with objects `{ text: 'Text', url: 'https://...' }` to display a list of anchor links.             |
+| `center`   | _(optional)_ if true, it will use `80vh` as the height and center its content.                                                   |
+| `skeleton` | _(optional)_ applies a loading skeleton to all included elements.                                                                |
+| `locale`   | _(optional)_ set a [supported locale](/uilib/usage/customisation/localization/) if needed.                                       |
+| `children` | _(optional)_ to display additional related content, like useful links etc.                                                       |