Skip to content

Commit 450b5ea

Browse files
ninanoletoninanoleto
committed
feat: WIP create more stories
1 parent 5fc09ab commit 450b5ea

File tree

6 files changed

+490
-0
lines changed

6 files changed

+490
-0
lines changed

‎src/pat/modal/modal.docs.mdx

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import { Meta, Story } from "@storybook/addon-docs";
2+
import {
3+
Modal,
4+
ModalWithButtons,
5+
ModalScrolling,
6+
ModalTinymce,
7+
ModalFullscreen,
8+
ModalLarge,
9+
} from "./modal.stories.js";
10+
11+
<Meta title="Patterns/Modal" />
12+
13+
# Modal
14+
15+
Show content in a modal.
16+
17+
## Configuration
18+
19+
```md
20+
| Option | Type | Default | Description |
21+
| :---------------------------: | :-----------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22+
| height | string | '' | Set the height of the modal, for example: 250px |
23+
| width | string | '' | Set the width of the modal, for example: 80% or 500px. |
24+
| modalSizeClass | string | '' | Set the modal size class, for example: modal-sm, modal-lg, modal-xl or modal-fullscreen. |
25+
| margin | function or integer | 20 | A function, Integer or String which will be used to set the margin of the modal in pixels. If a function is passed it must return an Integer. |
26+
| position | string | 'center middle' | Position the modal relative to the window with the format: "<horizontal> <vertical>" -- allowed values: top, bottom, left, right, center, middle. |
27+
| triggers | array | [] | Add event listeners to elements on the page which will open the modal when triggered. Pass an Array of strings with the format `["EVENT SELECTOR"]` or `["EVENT"]`. For example, `["click .someButton"]`. If you pass in only an event such as, `["change"]`, the event listener will be added to the element on which the modal was initiated, usually a link or button. |
28+
| title | string | null | A string to place in the modal header. If title is provided, titleSelector is not used. |
29+
| titleSelector | string | 'h1:first' | Selector for an element to extract from the content provided to the modal and place in the modal header. |
30+
| content | string | '#content' | Selector for an element within the content provided to the modal to use as the modal body. |
31+
| prependContent | string | '.portalMessage' | Selector for elements within the content provided to the modal which will be collected and inserted, by default above, the modal content. This is useful for extracting things like alerts or status messages on forms and displaying them to the user after an AJAX response. |
32+
| backdrop | string | 'body' | Selector for the element upon which the Backdrop pattern should be initiated. The Backdrop is a full width mask that will be apply above the content behind the modal which is useful for highlighting the modal dialog to the user. |
33+
| backdropOptions | object | { zIndex: "1040", opacity: "0.8", className: "backdrop", classActiveName: "backdrop-active", closeOnEsc: true, closeOnClick: true } | Look at options at backdrop pattern. |
34+
| buttons | string | '.formControls > input[type="submit"]' | Selector for matching elements, usually buttons, inputs or links, from the modal content to place in the modal footer. The original elements in the content will be hidden. |
35+
| automaticallyAddButtonActions | boolean | true | Automatically create actions for elements matched with the buttons selector. They will use the options provided in actionOptions. |
36+
| loadLinksWithinModal | boolean | true | Automatically load links inside of the modal using AJAX. |
37+
| actionOptions | object | {} | A hash of selector to options. Where options can include any of the defaults from actionOptions. Allows for the binding of events to elements in the content and provides options for handling ajax requests and displaying them in the modal. |
38+
| onSuccess | Function | string | | function which is called with parameters (modal, response, state, xhr, form) when form has been successfully submitted. if value is a string, this is the name of a function at window level |
39+
| onFormError | Function | string | | function which is called with parameters (modal, response, state, xhr, form) when backend has sent an error after form submission. if value is a string, this is the name of a function at window level |
40+
| onError | Function | string | | function which is called with parameters (xhr, textStatus, errorStatus) when form submission has failed. if value is a string, this is the name of a function at window level |
41+
```
42+
43+
## Examples
44+
45+
### Basic Modal
46+
47+
<br />
48+
<Story name="Modal" of={Modal} />
49+
50+
```html
51+
<a
52+
href="#modal1"
53+
class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
54+
data-pat-plone-modal="width: 400"
55+
>Modal basic</a
56+
>
57+
<div id="modal1" style="display: none">
58+
<h1>Basic modal!</h1>
59+
<p>Indeed. Whoa whoa whoa whoa. Wait.</p>
60+
</div>
61+
```
62+
63+
### Modal with Buttons
64+
65+
<br />
66+
<Story name="Modal With Buttons" of={ModalWithButtons} />
67+
68+
```html
69+
<a
70+
href="#modal2"
71+
class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
72+
data-pat-plone-modal="{'width': '400', 'buttons': ['.plone-btn']}"
73+
>Modal basic</a
74+
>
75+
<div id="modal2" style="display: none">
76+
<h1>Basic modal!</h1>
77+
<p>Indeed. Whoa whoa whoa whoa. Wait.</p>
78+
</div>
79+
```
80+
81+
### Modal scrolling
82+
83+
<br />
84+
<Story name="Modal Scrolling" of={ModalScrolling} />
85+
86+
```html
87+
<a
88+
href="#modal3"
89+
class="plone-btn plone-btn-lg plone-btn-primary pat-plone-modal"
90+
data-pat-plone-modal="width: 500"
91+
>Modal long scrolling</a
92+
>
93+
<div id="modal3" style="display: none">
94+
<h1>Basic with scrolling</h1>
95+
<p>
96+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
97+
incididunt ut labore et dolore magna aliqua
98+
</p>
99+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
100+
<p>
101+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
102+
incididunt ut labore et dolore magna aliqua
103+
</p>
104+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
105+
<p>
106+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
107+
incididunt ut labore et dolore magna aliqua
108+
</p>
109+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
110+
<p>
111+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
112+
incididunt ut labore et dolore magna aliqua
113+
</p>
114+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
115+
<p>
116+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
117+
incididunt ut labore et dolore magna aliqua
118+
</p>
119+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
120+
<p>
121+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
122+
incididunt ut labore et dolore magna aliqua
123+
</p>
124+
</div>
125+
```
126+
127+
### Modal with TinyMCE
128+
129+
<br />
130+
<Story name="Modal Tinymce" of={ModalTinymce} />
131+
132+
```html
133+
<a
134+
href="#modaltinymce"
135+
class="btn btn-lg btn-primary pat-plone-modal"
136+
data-pat-plone-modal="height: 600px; width: 80%"
137+
>
138+
Modal with TinyMCE</a
139+
>
140+
<div id="modaltinymce" style="display: none">
141+
<textarea class="pat-tinymce"></textarea>
142+
</div>
143+
```
144+
145+
### Modal Fullscreen
146+
147+
<br />
148+
<Story name="Modal Fullscreen" of={ModalFullscreen} />
149+
150+
```html
151+
<a
152+
href="#modal4"
153+
class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
154+
data-pat-plone-modal="modalSizeClass: modal-fullscreen; margin: 0;"
155+
>Modal fullscreen!</a
156+
>
157+
<div id="modal4" style="display: none">
158+
<h1>Basic screen modal!</h1>
159+
<p>Indeed. Whoa whoa whoa whoa. Wait.</p>
160+
</div>
161+
```
162+
163+
### Modal Large
164+
165+
<br />
166+
<Story name="Modal Large" of={ModalLarge} />
167+
168+
```html
169+
<a
170+
href="#modal5"
171+
class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
172+
data-pat-plone-modal="modalSizeClass: modal-lg;"
173+
>Modal large!</a
174+
>
175+
<div id="modal5" style="display: none">
176+
<h1>Basic screen modal!</h1>
177+
<p>Indeed. Whoa whoa whoa whoa. Wait.</p>
178+
</div>
179+
```

0 commit comments

Comments
 (0)