feat(DatePicker): add size property to component

dnbexperience · Jun 10, 2022 · 40db891 · 40db891
1 parent 02f0993
commit 40db891
Show file tree

Hide file tree

Showing 24 changed files with 3,269 additions and 1,095 deletions.
diff --git a/packages/dnb-design-system-portal/babel.config.cjs b/packages/dnb-design-system-portal/babel.config.cjs
@@ -1,5 +1,12 @@
 module.exports = {
-  presets: ['babel-preset-gatsby'],
+  presets: [
+    [
+      'babel-preset-gatsby',
+      {
+        reactRuntime: 'automatic',
+      },
+    ],
+  ],
   ignore: [
     // Needed in order to run on IE11
     '.*node_modules/(?!rewrite-pattern|ansi-regex|strip-ansi|regexpu-core|buble|react-live).*',

diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -62,7 +62,7 @@
     "@babel/eslint-parser": "7.16.0",
     "@babel/node": "7.16.0",
     "@emotion/cache": "11.7.1",
-    "babel-preset-gatsby": "2.8.0",
+    "babel-preset-gatsby": "2.16.0",
     "camelcase": "6.2.0",
     "cross-env": "7.0.3",
     "current-git-branch": "1.1.0",
@@ -75,24 +75,24 @@
     "eslint-plugin-react-hooks": "next",
     "front-matter": "4.0.2",
     "fs-extra": "10.0.0",
-    "gatsby": "4.8.0",
-    "gatsby-link": "4.1.0",
+    "gatsby": "4.16.0",
+    "gatsby-link": "4.16.0",
     "gatsby-plugin-algolia": "0.26.0",
-    "gatsby-plugin-catch-links": "4.8.0",
+    "gatsby-plugin-catch-links": "4.16.0",
     "gatsby-plugin-emotion": "7.1.0",
-    "gatsby-plugin-gatsby-cloud": "4.8.0",
-    "gatsby-plugin-manifest": "4.8.0",
-    "gatsby-plugin-mdx": "3.1.1",
+    "gatsby-plugin-gatsby-cloud": "4.16.0",
+    "gatsby-plugin-manifest": "4.16.0",
+    "gatsby-plugin-mdx": "3.16.0",
     "gatsby-plugin-meta-redirect": "1.1.1",
-    "gatsby-plugin-offline": "5.8.0",
-    "gatsby-plugin-page-creator": "4.8.0",
-    "gatsby-plugin-react-helmet": "5.8.0",
+    "gatsby-plugin-offline": "5.16.0",
+    "gatsby-plugin-page-creator": "4.16.0",
+    "gatsby-plugin-react-helmet": "5.16.0",
     "gatsby-plugin-remove-serviceworker": "1.0.0",
-    "gatsby-plugin-sass": "5.1.1",
-    "gatsby-plugin-sharp": "4.8.0",
-    "gatsby-react-router-scroll": "5.8.0",
-    "gatsby-remark-images": "6.8.0",
-    "gatsby-source-filesystem": "4.8.0",
+    "gatsby-plugin-sass": "5.16.0",
+    "gatsby-plugin-sharp": "4.16.1",
+    "gatsby-react-router-scroll": "5.16.0",
+    "gatsby-remark-images": "6.16.0",
+    "gatsby-source-filesystem": "4.16.0",
     "github-slugger": "1.4.0",
     "is-absolute-url": "4.0.1",
     "jest": "28.0.2",

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.js
@@ -248,7 +248,7 @@ export const DatePickerCalendar = () => (
   </Wrapper>
 )
 
-export const ScreenshotTests = () => {
+export const DatePickerScreenshotTests = () => {
   if (!global.IS_TEST) {
     return null
   }

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.md
@@ -15,7 +15,7 @@ DatePickerNoInputStatus,
 DatePickerErrorMessage,
 DatePickerErrorStatus,
 DatePickerCalendar,
-ScreenshotTests,
+DatePickerScreenshotTests,
 } from 'Docs/uilib/components/date-picker/Examples'
 import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
 
@@ -82,4 +82,4 @@ Also used for screenshot tests.
 
 <DatePickerCalendar />
 
-<ScreenshotTests />
+<DatePickerScreenshotTests />
diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.js b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.js
@@ -197,6 +197,7 @@ class LiveCode extends React.PureComponent {
           theme={prismTheme}
           code={codeToUse}
           scope={scope}
+          language={language}
           transformCode={(code) =>
             !useRender && noFragments ? `<>${code}</>` : code
           }
@@ -252,7 +253,6 @@ class LiveCode extends React.PureComponent {
           {!global.IS_TEST && !hideCode && (
             <div
               className={classnames(
-                'dnb-pre',
                 'dnb-live-editor',
                 createSkeletonClass('code', this.context.skeleton)
               )}
@@ -262,12 +262,8 @@ class LiveCode extends React.PureComponent {
                 Code Editor
               </label>
               <LiveEditor
-                textareaId={this._id}
-                ignoreTabKey
-                padding={0}
-                style={{
-                  font: 'inherit',
-                }}
+                id={this._id}
+                className="dnb-live-editor__editable dnb-pre"
                 onChange={(code) => {
                   this.setState({ code })
                 }}
@@ -283,29 +279,6 @@ class LiveCode extends React.PureComponent {
                     )
                   }
                 }}
-                // make this wrap to get in the custom Prism
-                // This way we can reformat jsx css template-string
-                // language={language}
-                highlight={(code) => (
-                  <Highlight
-                    Prism={Prism}
-                    code={code}
-                    theme={prismTheme}
-                    language={language}
-                  >
-                    {({ tokens, getLineProps, getTokenProps }) => (
-                      <>
-                        {tokens.map((line, i) => (
-                          <div {...getLineProps({ line, key: i })}>
-                            {line.map((token, key) => (
-                              <span {...getTokenProps({ token, key })} />
-                            ))}
-                          </div>
-                        ))}
-                      </>
-                    )}
-                  </Highlight>
-                )}
               />
             </div>
           )}
@@ -355,7 +328,7 @@ const LiveCodeEditor = styled.div`
   }
   .dnb-live-editor {
     position: relative;
-    margin-bottom: 4rem;
+    cursor: text;
 
     transition: box-shadow 0.2s ease-out;
 
@@ -393,6 +366,11 @@ const LiveCodeEditor = styled.div`
     white-space: normal;
     line-height: var(--input-height);
   }
+
+  .prism-code {
+    padding: 0 !important; /* use important because of inline styles */
+    white-space: pre-wrap !important; /* use important because of inline styles */
+  }
 `
 
 const Toolbar = styled.div`

diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -1980,11 +1980,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2346,8 +2346,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   user-select: none;
@@ -2399,11 +2398,11 @@ html[data-dnb-modal-active] {
     height: 100%;
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     animation-delay: 0ms !important;
     animation-duration: 0ms !important; }

diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -1916,11 +1916,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2282,8 +2282,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   user-select: none;
@@ -2335,11 +2334,11 @@ html[data-dnb-modal-active] {
     height: 100%;
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     animation-delay: 0ms !important;
     animation-duration: 0ms !important; }

diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -1968,11 +1968,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -2334,8 +2334,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   user-select: none;
@@ -2387,11 +2386,11 @@ html[data-dnb-modal-active] {
     height: 100%;
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     animation-delay: 0ms !important;
     animation-duration: 0ms !important; }

diff --git a/packages/dnb-eufemia/src/components/modal/style/_modal-mixins.scss b/packages/dnb-eufemia/src/components/modal/style/_modal-mixins.scss
@@ -89,12 +89,12 @@
     opacity: 0;
   }
   to {
-    opacity: var(--modal-overlay-opacity);
+    opacity: 1;
   }
 }
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity);
+    opacity: 1;
   }
   to {
     opacity: 0;

diff --git a/packages/dnb-eufemia/src/components/modal/style/_modal.scss b/packages/dnb-eufemia/src/components/modal/style/_modal.scss
@@ -8,8 +8,7 @@
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32;
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32);
 }
 
 html[data-dnb-modal-active] {
@@ -84,17 +83,17 @@ html[data-dnb-modal-active] {
   }
 
   &-root__inner &__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration)
-      ease-in-out forwards;
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out
+      forwards;
   }
 
   &-root__inner:last-of-type &__overlay {
     animation: show-modal-overlay var(--modal-animation-duration) ease-out
-      forwards 0ms;
+      forwards;
 
     &--hide {
       animation: hide-modal-overlay var(--modal-animation-duration)
-        ease-in-out forwards;
+        ease-out forwards;
     }
   }