;
+ /**
+ * The HTML button type
+ */
+ type?: 'button' | 'submit' | 'reset' | undefined;
}
-type LinkElProps = Omit, 'size' | 'type'>;
-type ButtonElProps = Omit, 'size' | 'type'>;
+type LinkElProps = Omit, 'size'>;
+type ButtonElProps = Omit, '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
index d7a470098f..3791f93609 100644
--- 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;
diff --git a/src/components/Modal/Modal.docs.mdx b/src/components/Modal/Modal.docs.mdx
index 83fa49e700..f174752ff4 100644
--- a/src/components/Modal/Modal.docs.mdx
+++ b/src/components/Modal/Modal.docs.mdx
@@ -1,27 +1,20 @@
import { Status, Props, Story } from '../../../.storybook/components';
-import {
- ModalWrapper,
- ModalHeader,
- ModalFooter
-} from '../../../src/components/Modal';
+import { ModalWrapper, ModalHeader, ModalFooter } from '.';
# Modal
-Modals are floating cards which overlay the primary UI. All content in a single
-modal should be related to completing one single task. Modals are heavy UI
-elements which obscure the primary user interface — avoid them where possible.
+Modals are floating cards which overlay the primary UI. All content in a single modal should be related to completing one single task. Modals are heavy UI elements which obscure the primary user interface — avoid them where possible.
-
## When to use it
-Use it when you want the user to focus on a single and perhaps more complex task
+Use it when you want the user to focus on a single and perhaps more complex task.
## Usage guidelines
@@ -56,73 +49,76 @@ There are a number of ways to use a modal in code. In some codebases, you
may opt to create a helper higher-order component that complements the
`ModalConsumer`.
-### Using the modal provider and consumer
+### Using the ModalProvider
-The benefit of using the modal provider and consumer is that the modal provider
-can be delcared once at the application root, and you do not need to manage
-to open/closed state of the modal yourself.
+The benefit of using the ModalProvider is that it can be declared once at the application root, and you do not need to manage the open/closed state of the modal yourself.
-```javascript
-import React, { Component } from 'react';
-import { ModalProvider, ModalConsumer, ModalWrapper } from '@sumup/circuit-ui';
+```js
+import React from 'react';
+import {
+ useModal,
+ ModalProvider,
+ ModalWrapper,
+ ModalHeader,
+ Button
+} from '@sumup/circuit-ui';
-class MyComponent extends Component {
- trigger(setModal) {
+const SayHello = ({ name }) => {
+ const { setModal } = useModal();
+ const showModal = () => {
setModal({
- children: ({ onClose }) => I am in a modal!
+ children: ({ onClose }) => (
+
+
+ Hello {name}
+
+ )
});
- }
-
- render() {
- return (
-
-
- {({ setModal }) => (
-
- )}
-
-
- );
- }
-}
+ };
+ return ;
+};
+
+const Page = () => {
+ return (
+
+
+
+ );
+};
```
- `ModalWrapper` This is the wrapper for the body of a modal.
- `ModalHeader` This contains the title and the `X` close button.
-- `ModalFooter` This component right-aligns its content.
+- `ModalFooter` This component aligns its content.
### Embedding the modal in code
-If you prefer to embed the code declaratively inside the component, you can
-do it as such:
+If you prefer to embed the code declaratively inside the component, you can do it as such:
-```javascript
-import React, { Component } from 'react';
-import { Modal } from '@sumup/circuit-ui';
+```js
+import React from 'react';
+import { Modal, ModalWrapper, ModalHeader, Button } from '@sumup/circuit-ui';
-class Page extends Component {
- constructor() {
- this.state = { isModalOpen: false };
- }
+const Page = () => {
+ const [isModalOpen, setModalOpen] = useState(false);
- toggleModal = () => {
- this.setState(state => ({ isModalOpen: !state.isModalOpen }));
+ const toggleModal = () => {
+ setModalOpen(prev => !prev);
};
- render() {
- return (
-
- );
- }
-}
+
+
+ )}
+
+ );
+};
```
diff --git a/src/components/Modal/Modal.embed.story.js b/src/components/Modal/Modal.embed.story.tsx
similarity index 97%
rename from src/components/Modal/Modal.embed.story.js
rename to src/components/Modal/Modal.embed.story.tsx
index db3302942b..6b34887db8 100644
--- a/src/components/Modal/Modal.embed.story.js
+++ b/src/components/Modal/Modal.embed.story.tsx
@@ -18,10 +18,10 @@ import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { action } from '@storybook/addon-actions';
-import { ModalWrapper, ModalHeader, ModalFooter } from './components';
import Button from '../Button';
import ButtonGroup from '../ButtonGroup';
import Text from '../Text';
+import { ModalWrapper, ModalHeader, ModalFooter } from './components';
export default {
title: 'Components/Modal/Embedded',
@@ -58,7 +58,7 @@ export const withFooter = () => (
Some text in the modal body.
-