feat: remove support for internet explorer

package.json

@@ -38,8 +38,7 @@
     "node-gyp": "8.4.0"
   },
   "resolutions": {
-    "svg2vectordrawable/svgo": "2.3.0",
-    "@storybook/preset-ie11@0.0.1": "patch:@storybook/preset-ie11@npm:0.0.1#.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898"
+    "svg2vectordrawable/svgo": "2.3.0"
   },
   "engines": {
     "node": "14.17.0",

packages/dnb-design-system-portal/.browserslistrc

@@ -1,6 +1,7 @@
 # Should reflect: https://eufemia.dnb.no/uilib/usage#supported-browsers-and-platforms
-ie 11
 edge >= 14
 firefox >= 52
 chrome >= 49
-safari >= 10
+safari >= 10
+not ie > 0
+not ie_mob > 0

packages/dnb-design-system-portal/babel.config.js

@@ -11,8 +11,4 @@ module.exports = {
       },
     ],
   ],
-  ignore: [
-    // Needed in order to run on IE11
-    '.*node_modules/(?!rewrite-pattern|ansi-regex|strip-ansi|regexpu-core|buble|react-live).*',
-  ],
 }

packages/dnb-design-system-portal/src/docs/icons/details.md

@@ -57,7 +57,7 @@ The reason why there are two sizes, is mainly due to the SVG artifact, that the
 
 ### Scalability in web
 
-To ensure that the relative size of the SVG icons is scalable by the inherited CSS font size, do not explicitly specify the SVG, unless for older browsers like Internet Explorer.
+To ensure that the relative size of the SVG icons is scalable by the inherited CSS font size, do not explicitly specify the SVG.
 
 **Example size definition by CSS**
 

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

@@ -62,11 +62,16 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 
 1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](https://eufemia.dnb.no/uilib/elements/lists/#definition-list-in-horizontal-direction).
 
+### [Stopped supporting Internet Explorer (IE)](/uilib/usage/#supported-browsers-and-platforms)
+
+Stopped supporting Internet Explorer (IE), as Microsoft formally ended support for IE in June, 2022.
+
 ### Deprecations
 
 - `use_scrollwheel` and `on_init` properties, as well as the `raw_value` event value from [Slider](/uilib/components/slider) was removed in order to support multiple buttons.
 - Helper class `.dnb-sr-only--inline` and SCSS mixin `srOnlyInline` was removed.
 - Helper class `.dnb-not-sr-only` and SCSS mixin `notSrOnly` was removed.
+- `isIE11` and `IS_IE11` is deprecated as we have stopped supporting Internet Explorer (IE).
 
 ## Install
 

packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.md

@@ -11,7 +11,7 @@ redirect_from:
 | `value` or `children`                       | _(required)_ a number.                                                                                                                                                                                                                                                                                                                                                                                |
 | `srLabel`                                   | _(optional)_ Will add a visually hidden label to give screen reader users the missing context to understand easier what the number represents.                                                                                                                                                                                                                                                        |
 | `locale`                                    | _(optional)_ Use a [2 Letter Language Codes](https://www.sitepoint.com/iso-2-letter-language-codes/) or an extended code such as `nb-NO`. Use `auto` to detect the locale from the browser (`navigator.language`). Defaults to the Norwegian locale: `nb-NO`.                                                                                                                                         |
-| `compact`                                   | _(optional)_ Shortens any number or currency including an abbreviation (no IE11 support). You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given.                                                                                                                                       |
+| `compact`                                   | _(optional)_ Shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given.                                                                                                                                                         |
 | `clean`                                     | _(optional)_ if set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`).                                                                                                                                                                                                                                                     |
 | `currency`                                  | _(optional)_ Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.                                                                                                                                                                                                                                                                                               |
 | `currency_display`                          | _(optional)_ Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`.                                                                                                                                                 |

packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md

@@ -108,11 +108,3 @@ const { InfinityMarker, endInfinity, resetInfinity } =
 
 render(<InfinityMarker>ReactComponent</InfinityMarker>)
 ```
-
-### Legacy browser support (Internet Explorer 11)
-
-The **infinity scroller** is using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This API is supported by all nowadays browsers. But if your applications need support for outdated browser, you can install e.g. [this IntersectionObserver polyfill](https://www.npmjs.com/package/intersection-observer) and import it:
-
-```js
-import 'intersection-observer'
-```

packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md

@@ -168,7 +168,7 @@ If you only want to change the colors, you can swap out `fill='%23007272'` with
 }
 ```
 
-To ensure compatibility for Internet Explorer and older Edge versions, you may still use **base64**. Use e.g. [this base64 converter](https://www.base64encode.org)
+To ensure compatibility for older Edge versions, you may still use **base64**. Use e.g. [this base64 converter](https://www.base64encode.org)
 
 ```css
 .dnb-anchor::after {

packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md

@@ -216,8 +216,6 @@ You can import Eufemia _mixins_ directly into your SCSS styles:
 } // .dnb-sr-only--inline
 
 /** Browser Checks */
-@include IS_IE {
-}
 @include IS_EDGE {
 }
 @include IS_FF {

packages/dnb-design-system-portal/src/docs/uilib/helpers/functions.md

@@ -278,7 +278,6 @@ copyToClipboard(string) // returns success: String|Boolean|Error
 
 | Function   | Description                                        | Parameters | Return    |
 | ---------- | -------------------------------------------------- | ---------- | --------- |
-| `isIE11`   | Returns true or false, depending on the detection. | none       | `Boolean` |
 | `isEdge`   | Returns true or false, depending on the detection. | none       | `Boolean` |
 | `isSafari` | Returns true or false, depending on the detection. | none       | `Boolean` |
 | `isiOS`    | Returns true or false, depending on the detection. | none       | `Boolean` |
@@ -290,7 +289,6 @@ copyToClipboard(string) // returns success: String|Boolean|Error
 
 | Constant    | Description                                                         | Value     |
 | ----------- | ------------------------------------------------------------------- | --------- |
-| `IS_IE11`   | Gives you true or false, depending on the detection during startup. | `Boolean` |
 | `IS_EDGE`   | Gives you true or false, depending on the detection during startup. | `Boolean` |
 | `IS_SAFARI` | Gives you true or false, depending on the detection during startup. | `Boolean` |
 | `IS_IOS`    | Gives you true or false, depending on the detection during startup. | `Boolean` |

packages/dnb-design-system-portal/src/docs/uilib/usage.md

@@ -38,6 +38,6 @@ Read more in the [First Steps](/uilib/usage/first-steps/) section.
 
 ## Supported Browsers and Platforms
 
-| IE                   | Edge                 | Firefox              | Chrome               | Safari               | Node                 |
-| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- | -------------------- |
-| <small>==</small> 11 | <small>>=</small> 14 | <small>>=</small> 45 | <small>>=</small> 49 | <small>>=</small> 10 | <small>>=</small> 10 |
+| Edge                 | Firefox              | Chrome               | Safari               | Node                 |
+| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- |
+| <small>>=</small> 14 | <small>>=</small> 45 | <small>>=</small> 49 | <small>>=</small> 10 | <small>>=</small> 10 |

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md

@@ -7,8 +7,6 @@ title: 'Polyfill'
 
 By using Eufemia properties, like [color names](/uilib/usage/customisation/colors) and [typography properties](/uilib/typography), instead of defining colors and typography directly as hard coded values, you make your code much more readable and future proof in terms of refactoring and new enhancements. [Maintainability](/uilib/getting-started/maintainability) is important. But it fits also better in thinking of the [Living system](/uilib/getting-started/living-system) terms.
 
-But as long as we have to support legacy browsers like [Internet Explorer](!/uilib/usage#supported-browsers-and-platforms) we have to deal with a fallback or polyfill.
-
 ## Post CSS
 
 Use [postcss-preset-env](https://github.com/csstools/postcss-preset-env). Example [webpack](https://webpack.js.org) loader config:
@@ -22,7 +20,7 @@ Use [postcss-preset-env](https://github.com/csstools/postcss-preset-env). Exampl
       postcssPresetEnv({
         stage: 0,
         preserve: true,
-        browsers: ['last 2 versions', 'explorer >= 11'],
+        browsers: ['last 2 versions', 'not ie > 0', 'not ie_mob > 0'],
         importFrom: [require.resolve('@dnb/eufemia/style/dnb-ui-properties.css')]
       })
     ]

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.md

@@ -195,4 +195,4 @@ If your applications only need new colors or other CSS properties, you could sim
 
 ### Using CSS (vars) Custom Properties
 
-This is for sure a very nice and powerful solution, but lacks Internet Explorer support.
+This is a very nice and powerful solution.

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/module-formats.md

@@ -109,7 +109,6 @@ import Button from '@dnb/eufemia/es/components/Button'
 Make sure your environment has a production build with:
 
 - Tree Shaking
-- Compile to ES5 for IE support
 - Minify and mangle the Output
 
 By default, [webpack v4](https://webpack.js.org) does this fine.

packages/dnb-design-system-portal/src/shared/menu/Card.js

@@ -7,7 +7,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import { Button } from '@dnb/eufemia/src'
-import { IS_IE11 } from '@dnb/eufemia/src/shared/helpers'
 import classnames from 'classnames'
 import { P, Span } from '@dnb/eufemia/src/elements'
 import {
@@ -36,33 +35,14 @@ export default class Card extends React.PureComponent {
   render() {
     const { url, title, about, icon: Svg } = this.props
 
-    // size is else defined in css
-    const svgParams = IS_IE11 ? { width: '48', height: '48' } : null
-
-    const Anchor = IS_IE11
-      ? ({ children, to, ...rest }) =>
-          to && (
-            <a
-              {...rest}
-              href={url}
-              onClick={(event) => {
-                event.preventDefault()
-                window.location.assign(url)
-              }}
-            >
-              {children}
-            </a>
-          )
-      : Link
-
     return (
       <li
         className={classnames(
           liItemStyle,
           this.isSelected() && 'is-selected'
         )}
       >
-        <Anchor
+        <Link
           className={classnames(
             linkStyle,
             'dnb-anchor--no-style',
@@ -73,7 +53,7 @@ export default class Card extends React.PureComponent {
         >
           <Span className={linkInnerStyle}>
             <Span className={boxStyle}>
-              {Svg && <Svg {...svgParams} />}
+              {Svg && <Svg />}
               <P style_type="lead">{title}</P>
               <P top="x-small">{about}</P>
             </Span>
@@ -88,7 +68,7 @@ export default class Card extends React.PureComponent {
               />
             </Span>
           </Span>
-        </Anchor>
+        </Link>
       </li>
     )
   }

packages/dnb-design-system-portal/src/shared/menu/Card.module.scss

@@ -58,18 +58,6 @@
       transform: scale3d(0.9, 0.9, 1) translate3d(0, -8%, 0);
     }
   }
-
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: none) {
-    &.show-cards {
-      opacity: 1;
-    }
-    overflow: hidden;
-    background-color: #fff;
-    p {
-      width: 20rem;
-    }
-  }
 }
 
 .linkStyle {

packages/dnb-design-system-portal/src/shared/menu/MainMenu.module.scss

@@ -12,11 +12,6 @@
 
   background-color: transparent;
   transition: background-color ease-out 0.8s;
-
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: none) {
-    background-color: var(--color-emerald-green);
-  }
 }
 
 .listStyle {
@@ -42,12 +37,6 @@
   justify-content: center;
   align-items: center;
 
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: none) {
-    width: auto;
-    color: #fff;
-  }
-
   @include allBelow(small) {
     .dnb-drawer-list__list {
       width: 90vw;

packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss

@@ -3,10 +3,6 @@
 :global {
   :root {
     --aside-width: calc(25vw + 5rem);
-
-    @include IS_IE {
-      --aside-width: 30vw;
-    }
   }
 
   .dnb-sidebar-menu {

packages/dnb-eufemia/.browserslistrc

@@ -1,5 +1,6 @@
-ie 11
 edge >= 14
 firefox >= 52
 chrome >= 49
 safari >= 10
+not ie > 0
+not ie_mob > 0

packages/dnb-eufemia/.storybook/main.js

@@ -3,5 +3,5 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: ['../src/**/*.stories.{js,tsx}'],
-  addons: ['@storybook/preset-ie11', '@storybook/preset-scss'],
+  addons: ['@storybook/preset-scss'],
 }

packages/dnb-eufemia/babel.config.js

@@ -99,7 +99,6 @@ const config = {
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-transform-object-assign', // for IE support
   ],
   sourceMaps: true,
   comments: false,

packages/dnb-eufemia/package.json

@@ -123,7 +123,6 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-typescript": "7.16.0",
     "@babel/plugin-transform-modules-commonjs": "7.16.0",
-    "@babel/plugin-transform-object-assign": "7.16.0",
     "@babel/plugin-transform-react-constant-elements": "7.16.0",
     "@babel/plugin-transform-runtime": "7.16.0",
     "@babel/preset-env": "7.16.0",
@@ -146,7 +145,6 @@
     "@storybook/addons": "6.5.12",
     "@storybook/builder-webpack5": "^6.5.12",
     "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/preset-ie11": "patch:@storybook/preset-ie11@0.0.1#../../.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898",
     "@storybook/preset-scss": "1.0.3",
     "@storybook/react": "6.5.12",
     "@storybook/theming": "6.5.12",

packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js

@@ -9,13 +9,13 @@ const sassBin = require('sass')
 const os = require('os')
 const path = require('path')
 
-module.exports = ({ IE11 = false, sass = sassBin, ...options } = {}) => {
+module.exports = ({ sass = sassBin, ...options } = {}) => {
   return [
     // preset-env processes the most of our old legacy browsers
     require('postcss-preset-env')({
-      stage: IE11 ? 0 : 2,
+      stage: 2,
       preserve: true, // so we get the calc from vars, to process for IE11 later with "postcss-calc"
-      browsers: ['last 2 versions', IE11 ? 'explorer >= 11' : null].filter(
+      browsers: ['last 2 versions', 'not ie > 0', 'not ie_mob > 0'].filter(
         (i) => i
       ),
       importFrom: [
@@ -27,35 +27,6 @@ module.exports = ({ IE11 = false, sass = sassBin, ...options } = {}) => {
       ],
       ...options,
     }),
-
-    // but for IE11, we also calculate all left over calc, and remove the originals
-    IE11
-      ? require('postcss-calc')({
-          // "preserve: true" will keep both the calculation version, the calc() and the variable (if available)
-          // but as we only use postcss-calc on IE11, it is kind of not needed, so we remove then the calc()
-          /*
-            border-radius: 1.25rem;
-            border-radius: calc(2.5rem / 2);
-            border-radius: var(--button-border-radius);
-           */
-          preserve: true,
-          warnWhenCannotResolve: false,
-        })
-      : null,
-
-    // In case we want to have all the plugins by their self
-    // IE11
-    //   ? require('postcss-custom-properties')({
-    //       preserve: true,
-    //       // importFrom: ['path/to/file.css'],
-    //       ...options
-    //     })
-    //   : null,
-    // require('autoprefixer')({
-    //   browsers: ['last 2 versions', IE11 ? 'explorer >= 11' : null].filter(
-    //     i => i
-    //   )
-    // })
   ].filter((i) => i)
 }
 

packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js

@@ -70,12 +70,7 @@ export const runFactory = (
             transformPaths('../../../../assets/', '../../../assets/')
           )
         )
-        .pipe(
-          transform(
-            'utf8',
-            transformPostcss(postcssConfig({ IE11: true, sass }))
-          )
-        )
+        .pipe(transform('utf8', transformPostcss(postcssConfig({ sass }))))
         .pipe(cloneSink)
         .pipe(transform('utf8', transformCssnano({ reduceIdents: false })))
         .pipe(rename({ suffix: '.min' }))

packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js

@@ -81,12 +81,7 @@ export const runFactory = (
             extname: '.css',
           })
         )
-        .pipe(
-          transform(
-            'utf8',
-            transformPostcss(postcssConfig({ IE11: true, sass }))
-          )
-        )
+        .pipe(transform('utf8', transformPostcss(postcssConfig({ sass }))))
         .pipe(cloneSink)
         .pipe(transform('utf8', transformCssnano({ reduceIdents: false })))
         .pipe(rename({ suffix: '.min' }))