feat(components): enhance Modal and migrate to TypeScript (#610)

* refactor(components): migrate ModalHeader to TypeScript * refactor(components): migrate ModalWrapper to TypeScript * refactor(components): migrate Modal and ModalProvider to TypeScript * feat(components): make ModalFooter sticky * feat(hooks): add useModal hook * docs(components): update Modal docs * perf(components): memoize Modal context values
sumup-oss · Jun 11, 2020 · 1668614 · 1668614
1 parent 045b297
commit 1668614
Show file tree

Hide file tree

Showing 27 changed files with 721 additions and 631 deletions.
diff --git a/package.json b/package.json
@@ -112,8 +112,11 @@
     "@types/jest-axe": "^3.2.2",
     "@types/jscodeshift": "^0.7.1",
     "@types/lodash": "^4.14.149",
+    "@types/no-scroll": "^2.1.0",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
+    "@types/react-modal": "^3.10.5",
+    "@types/recompose": "^0.30.7",
     "audit-ci": "^2.1.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.0.0",

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -6934,7 +6934,7 @@ exports[`Storyshots Components/Modal/Embedded Base 1`] = `
 }
 
 <div
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 >
   Hello World!
 </div>
@@ -6955,13 +6955,7 @@ exports[`Storyshots Components/Modal/Embedded With Custom Styles 1`] = `
   }
 }
 
-.circuit-7 {
-  width: 100%;
-  padding: 0;
-  height: 50vh;
-}
-
-.circuit-5 {
+.circuit-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6998,20 +6992,20 @@ exports[`Storyshots Components/Modal/Embedded With Custom Styles 1`] = `
   padding: 24px 18px;
 }
 
-.circuit-3 {
+.circuit-2 {
   height: 100%;
   width: 50%;
   background: no-repeat center / cover url('https://source.unsplash.com/random');
 }
 
 <div
-  class="circuit-7"
+  css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
 >
   <div
-    class="circuit-5 circuit-6"
+    class="circuit-3"
   >
     <div
-      class="circuit-1 circuit-2"
+      class="circuit-1"
     >
       <p
         class="circuit-0"
@@ -7020,7 +7014,7 @@ exports[`Storyshots Components/Modal/Embedded With Custom Styles 1`] = `
       </p>
     </div>
     <div
-      class="circuit-3 circuit-4"
+      class="circuit-2"
     />
   </div>
 </div>
@@ -7210,35 +7204,6 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
   }
 }
 
-.circuit-8 {
-  display: block;
-  width: 100%;
-  margin-top: 24px;
-}
-
-@media (min-width:480px) {
-  .circuit-8 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    margin-top: 16px;
-  }
-}
-
-@media (min-width:480px) {
-  .circuit-8 {
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-  }
-}
-
 .circuit-3 {
   font-weight: 400;
   margin-bottom: 16px;
@@ -7253,7 +7218,7 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
   }
 }
 
-.circuit-10 {
+.circuit-9 {
   background-color: #FFFFFF;
   border-radius: 4px;
   display: -webkit-box;
@@ -7273,16 +7238,52 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-10 {
+  .circuit-9 {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     min-width: initial;
     position: relative;
   }
 }
 
+.circuit-8 {
+  display: block;
+  width: 100%;
+  margin-top: 24px;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+  margin-top: 0;
+  padding-top: 24px;
+  padding-bottom: 12px;
+  background: #FFFFFF;
+}
+
+@media (min-width:480px) {
+  .circuit-8 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    margin-top: 16px;
+  }
+}
+
+@media (min-width:480px) {
+  .circuit-8 {
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
 <div
-  class="circuit-10 circuit-11"
+  class="circuit-9"
 >
   <header
     class="circuit-1 circuit-2"
@@ -7299,7 +7300,7 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
     Some text in the modal body.
   </p>
   <footer
-    class="circuit-8 circuit-9"
+    class="circuit-8"
   >
     <ul
       class="circuit-6 circuit-7"
@@ -7398,7 +7399,7 @@ exports[`Storyshots Components/Modal/Embedded With Title 1`] = `
 }
 
 <div
-  class="circuit-4 circuit-5"
+  class="circuit-4"
 >
   <header
     class="circuit-1 circuit-2"
@@ -7565,7 +7566,7 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] =
 }
 
 <div
-  class="circuit-6 circuit-7"
+  class="circuit-6"
 >
   <header
     class="circuit-3 circuit-4"
@@ -7654,7 +7655,7 @@ exports[`Storyshots Components/Modal/Embedded Without Close Button 1`] = `
 }
 
 <div
-  class="circuit-1 circuit-2"
+  class="circuit-1"
 >
   <p
     class="circuit-0"

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -52,10 +52,14 @@ export interface BaseProps {
    * The ref to the html dom element, it can be an anchor or a button
    */
   ref?: React.Ref<HTMLButtonElement & HTMLAnchorElement>;
+  /**
+   * The HTML button type
+   */
+  type?: 'button' | 'submit' | 'reset' | undefined;
 }
 
-type LinkElProps = Omit<HTMLProps<HTMLAnchorElement>, 'size' | 'type'>;
-type ButtonElProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+type LinkElProps = Omit<HTMLProps<HTMLAnchorElement>, 'size'>;
+type ButtonElProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
 
 export type ButtonProps = BaseProps & LinkElProps & ButtonElProps;
 

diff --git a/src/components/Card/components/Footer/Footer.js b/src/components/Card/components/Footer/Footer.js
@@ -43,9 +43,9 @@ const baseStyles = ({ theme }) => css`
  * Footer used in the Card component. Used for styling and aligment
  * purposes only.
  */
-const ModalFooter = styled('footer')(baseStyles, alignmentStyles);
+const CardFooter = styled('footer')(baseStyles, alignmentStyles);
 
-ModalFooter.propTypes = {
+CardFooter.propTypes = {
   /**
    * Buttons wrapped in a ButtonGroup.
    */
@@ -56,11 +56,11 @@ ModalFooter.propTypes = {
   align: PropTypes.oneOf(['left', 'right'])
 };
 
-ModalFooter.defaultProps = {
+CardFooter.defaultProps = {
   align: 'right'
 };
 
 /**
  * @component
  */
-export default ModalFooter;
+export default CardFooter;