diff --git a/packages/elements/.storybook/webpack.config.js b/packages/elements/.storybook/webpack.config.js index 79d0e33e28..13c34df6eb 100644 --- a/packages/elements/.storybook/webpack.config.js +++ b/packages/elements/.storybook/webpack.config.js @@ -4,7 +4,29 @@ module.exports = ({ config }) => { config.module.rules.push( { test: /\.(ts|tsx)$/, - use: [require.resolve('awesome-typescript-loader'), require.resolve('react-docgen-typescript-loader')] + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + useBuiltIns: 'entry', + corejs: '3', + targets: { + esmodules: true, + chrome: '58', + ie: '11', + }, + }, + ], + ], + }, + }, + { loader: 'ts-loader', options: { happyPackMode: true, transpileOnly: true } }, + require.resolve('react-docgen-typescript-loader'), + ], }, { test: /\.stories\.tsx?$/, diff --git a/packages/elements/src/components/HelpGuide/vertical-timeline.tsx b/packages/elements/src/components/HelpGuide/vertical-timeline.tsx index efc2c18d36..a349c9bdf1 100644 --- a/packages/elements/src/components/HelpGuide/vertical-timeline.tsx +++ b/packages/elements/src/components/HelpGuide/vertical-timeline.tsx @@ -41,6 +41,9 @@ export const calculateElement = ({ if (circleRef.current && activeRef.current && lineRef.current) { const circlePosY = caculateCircleRef({ activeRef, circleRef }) circleRef.current.style.transform = `translateY(${circlePosY}px)` + if (window.matchMedia('(-ms-high-contrast:none)').matches) { + circleRef.current.style.transform = `translate(-20px, ${circlePosY}px)` + } const lineHeight = caculateLineRef({ activeRef }) lineRef.current.style.height = `${lineHeight}px` diff --git a/packages/elements/src/styles/components/help-guide.scss b/packages/elements/src/styles/components/help-guide.scss index 37a1660ddf..4a22e1db39 100644 --- a/packages/elements/src/styles/components/help-guide.scss +++ b/packages/elements/src/styles/components/help-guide.scss @@ -102,6 +102,9 @@ top: 50%; transform: translateX(-50%); z-index: -3; + @media all and (-ms-high-contrast:none) { + left: 50%; + } } li:last-child:after { @@ -119,6 +122,9 @@ background: white; transition: all 0.3s; text-align: center; + @media all and (-ms-high-contrast:none) { + transform: translate(-20px, 25px); + } } & .line-active { @@ -129,6 +135,9 @@ background-color: $reapit-mid-blue; transition: all 0.3s; z-index: -2; + @media all and (-ms-high-contrast:none) { + transform: translateX(-2px); + } } } diff --git a/packages/elements/src/styles/components/menu.scss b/packages/elements/src/styles/components/menu.scss index bc6307ea05..8686ce60b8 100644 --- a/packages/elements/src/styles/components/menu.scss +++ b/packages/elements/src/styles/components/menu.scss @@ -28,6 +28,7 @@ $nav-dimensions: 66px; overflow-x: scroll; overflow-y: hidden; height: $nav-dimensions; + -ms-overflow-style: -ms-autohiding-scrollbar; @media screen and (min-width: 768px) { height: 100%; @@ -69,7 +70,7 @@ $nav-dimensions: 66px; .nav-item-link { cursor: pointer; - + &.is-secondary { margin-left: auto; @@ -83,10 +84,16 @@ $nav-dimensions: 66px; .nav-item-icon { width: 50%; height: 100%; + @media all and (-ms-high-contrast:none) { + height: 23px; + } } .is-logo .nav-item-icon { width: 75%; + @media all and (-ms-high-contrast:none) { + height: 42px; + } } &.is-desktop { diff --git a/packages/elements/src/styles/vendor/bulma-overrides.scss b/packages/elements/src/styles/vendor/bulma-overrides.scss index 6f1c9160ef..2303fe1516 100644 --- a/packages/elements/src/styles/vendor/bulma-overrides.scss +++ b/packages/elements/src/styles/vendor/bulma-overrides.scss @@ -254,6 +254,31 @@ } } +.form-section { + .level-right { + .column { + @media all and (-ms-high-contrast:none) { + flex-basis: auto; + } + } + } +} + + +.level-right { + @media all and (-ms-high-contrast:none) { + justify-content: flex-start; + } +} + +.container-footer { + .level-right { + @media all and (-ms-high-contrast:none) { + justify-content: flex-start; + } + } +} + @media (max-width: 767px) { .reverse-columns { flex-direction: column-reverse; @@ -261,6 +286,8 @@ } } + + .content { & ul { margin: 0; diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap index f21a2cddd4..0284a8937c 100644 --- a/packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap +++ b/packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap @@ -12,6 +12,7 @@ exports[`DeveloperSubmitAppSuccessfully renders correctly 1`] = ` hasPadding={true} > diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/elements.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/elements.tsx.snap index 2957b65383..9fcc825718 100644 --- a/packages/marketplace/src/components/pages/__tests__/__snapshots__/elements.tsx.snap +++ b/packages/marketplace/src/components/pages/__tests__/__snapshots__/elements.tsx.snap @@ -16,7 +16,7 @@ exports[`Elements should match a snapshot 1`] = ` style={ Object { "border": "none", - "height": "auto", + "height": "100%", } } width="100%" diff --git a/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx b/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx index 7db654c930..2246537a2e 100644 --- a/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx +++ b/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx @@ -16,6 +16,7 @@ export const DeveloperSubmitAppSuccessfully: React.FC (