From 450b5ea408c2abbfb61d16c7837521a9f127aee6 Mon Sep 17 00:00:00 2001 From: ninanoleto Date: Thu, 13 Feb 2025 12:48:16 +0100 Subject: [PATCH] feat: WIP create more stories --- src/pat/modal/modal.docs.mdx | 179 ++++++++++++++++++ src/pat/modal/modal.stories.js | 133 +++++++++++++ .../preventdoublesubmit.docs.mdx | 37 ++++ .../preventdoublesubmit.stories.js | 19 ++ src/pat/sortable/sortable.docs.mdx | 70 +++++++ src/pat/sortable/sortable.stories.js | 52 +++++ 6 files changed, 490 insertions(+) create mode 100644 src/pat/modal/modal.docs.mdx create mode 100644 src/pat/modal/modal.stories.js create mode 100644 src/pat/preventdoublesubmit/preventdoublesubmit.docs.mdx create mode 100644 src/pat/preventdoublesubmit/preventdoublesubmit.stories.js create mode 100644 src/pat/sortable/sortable.docs.mdx create mode 100644 src/pat/sortable/sortable.stories.js diff --git a/src/pat/modal/modal.docs.mdx b/src/pat/modal/modal.docs.mdx new file mode 100644 index 000000000..da91d8c30 --- /dev/null +++ b/src/pat/modal/modal.docs.mdx @@ -0,0 +1,179 @@ +import { Meta, Story } from "@storybook/addon-docs"; +import { + Modal, + ModalWithButtons, + ModalScrolling, + ModalTinymce, + ModalFullscreen, + ModalLarge, +} from "./modal.stories.js"; + + + +# Modal + +Show content in a modal. + +## Configuration + +```md +| Option | Type | Default | Description | +| :---------------------------: | :-----------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| height | string | '' | Set the height of the modal, for example: 250px | +| width | string | '' | Set the width of the modal, for example: 80% or 500px. | +| modalSizeClass | string | '' | Set the modal size class, for example: modal-sm, modal-lg, modal-xl or modal-fullscreen. | +| 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. | +| position | string | 'center middle' | Position the modal relative to the window with the format: " " -- allowed values: top, bottom, left, right, center, middle. | +| 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. | +| title | string | null | A string to place in the modal header. If title is provided, titleSelector is not used. | +| titleSelector | string | 'h1:first' | Selector for an element to extract from the content provided to the modal and place in the modal header. | +| content | string | '#content' | Selector for an element within the content provided to the modal to use as the modal body. | +| 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. | +| 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. | +| backdropOptions | object | { zIndex: "1040", opacity: "0.8", className: "backdrop", classActiveName: "backdrop-active", closeOnEsc: true, closeOnClick: true } | Look at options at backdrop pattern. | +| 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. | +| automaticallyAddButtonActions | boolean | true | Automatically create actions for elements matched with the buttons selector. They will use the options provided in actionOptions. | +| loadLinksWithinModal | boolean | true | Automatically load links inside of the modal using AJAX. | +| 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. | +| 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 | +| 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 | +| 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 | +``` + +## Examples + +### Basic Modal + +
+ + +```html +Modal basic + +``` + +### Modal with Buttons + +
+ + +```html +Modal basic + +``` + +### Modal scrolling + +
+ + +```html +Modal long scrolling + +``` + +### Modal with TinyMCE + +
+ + +```html + + Modal with TinyMCE + +``` + +### Modal Fullscreen + +
+ + +```html +Modal fullscreen! + +``` + +### Modal Large + +
+ + +```html +Modal large! + +``` diff --git a/src/pat/modal/modal.stories.js b/src/pat/modal/modal.stories.js new file mode 100644 index 000000000..21daae62b --- /dev/null +++ b/src/pat/modal/modal.stories.js @@ -0,0 +1,133 @@ +import $ from "jquery"; +import { RenderHTML } from "../../../.storybook/setup.js"; +import ModalComponent from "./modal.js"; + +export default { + title: "Patterns/Modal", + argTypes: { + id: { + control: "text", + description: "Modal ID", + table: { + category: "Attributes", + disable: true, + }, + }, + dataPat: { + control: "text", + description: "Data-pat-plone-modal value", + table: { + category: "Attributes", + disable: true, + }, + }, + title: { + control: "text", + description: "Modal title", + table: { + category: "Content", + disable: true, + }, + }, + content: { + control: "text", + description: "Modal content", + table: { + category: "Content", + disable: true, + }, + }, + }, +}; + +const getModal = ({ id, dataPat, title, content }) => ` + ${title} + + +`; + +export const Modal = { + render: (args) => RenderHTML(args, getModal), + args: { + id: "modal1", + dataPat: "width: 400", + title: "Modal basic", + content: ` +

Basic modal!

+

Indeed. Whoa whoa whoa whoa. Wait.

`, + }, +}; + +export const ModalWithButtons = { + render: (args) => RenderHTML(args, getModal), + args: { + id: "modal2", + dataPat: "{'width': '400', 'buttons': ['.plone-btn']}", + title: "Modal with buttons", + content: ` +

Modal With Buttons!

+

Indeed. Whoa whoa whoa whoa. Wait.

+ + `, + }, +}; + +export const ModalScrolling = { + render: (args) => RenderHTML(args, getModal), + args: { + id: "modal3", + dataPat: "width: 500", + title: "Modal long scrolling", + content: ` +

Modal with scrolling

+ ${`

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua +

+




+




`.repeat(5)} +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua +

`, + }, +}; + +// TODO: Fix Tinymce implementation +export const ModalTinymce = { + render: (args) => RenderHTML(args, getModal), + args: { + id: "modaltinymce", + dataPat: "height: 600px; width: 80%", + title: "Modal with TinyMCE", + content: ``, + }, +}; + +export const ModalFullscreen = { + render: (args) => RenderHTML(args, getModal), + args: { + id: "modal4", + dataPat: "{'modalSizeClass': 'modal-fullscreen', 'margin': '0'}", + title: "Modal fullscreen!", + content: ` +

Full screen modal!

+

Indeed. Whoa whoa whoa whoa. Wait.

`, + }, +}; + +export const ModalLarge = { + render: (args) => RenderHTML(args, getModal), + args: { + id: "modal5", + dataPat: "{'modalSizeClass': 'modal-lg;'}", + title: "Modal large!", + content: ` +

Modal Large

+

Indeed. Whoa whoa whoa whoa. Wait.

`, + }, +}; diff --git a/src/pat/preventdoublesubmit/preventdoublesubmit.docs.mdx b/src/pat/preventdoublesubmit/preventdoublesubmit.docs.mdx new file mode 100644 index 000000000..0aa0c9bab --- /dev/null +++ b/src/pat/preventdoublesubmit/preventdoublesubmit.docs.mdx @@ -0,0 +1,37 @@ +import { Meta, Story } from "@storybook/addon-docs"; +import { PreventDoubleSubmit } from "./preventdoublesubmit.stories.js"; + + + +# Prevent double submit pattern. + +Prevent multiple submissions of the same form. + +## Configuration + +```md +| Option | Type | Default | Description | +| :-------------: | :----: | :------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | +| guardClassName | string | "submitting" | Class applied to submit button after it is clicked once. | +| optOutClassName | string | "allowMultiSubmit" | Class used to opt-out a submit button from double-submit prevention. | +| message | string | "You already clicked the submit button. Do you really want to submit this form again?" | Message to be displayed when "opt-out" submit button is clicked a second time. | +``` + +## Example + +### Basic Modal + +
+ + +```html +
+ + + +
+``` diff --git a/src/pat/preventdoublesubmit/preventdoublesubmit.stories.js b/src/pat/preventdoublesubmit/preventdoublesubmit.stories.js new file mode 100644 index 000000000..bb9424ca1 --- /dev/null +++ b/src/pat/preventdoublesubmit/preventdoublesubmit.stories.js @@ -0,0 +1,19 @@ +import $ from "jquery"; +import { RenderHTML } from "../../../.storybook/setup.js"; +import PreventDoubleSubmitComponent from "./preventdoublesubmit.js"; + +export default { + title: "Patterns/Prevent Double Submit", +}; + +const getPreventDoubleSubmit = () => ` +
+ + + +
+`; + +export const PreventDoubleSubmit = { + render: () => RenderHTML({}, getPreventDoubleSubmit), +}; diff --git a/src/pat/sortable/sortable.docs.mdx b/src/pat/sortable/sortable.docs.mdx new file mode 100644 index 000000000..97eb46201 --- /dev/null +++ b/src/pat/sortable/sortable.docs.mdx @@ -0,0 +1,70 @@ +import { Meta, Story } from "@storybook/addon-docs"; +import { Sortable, SortableTable } from "./sortable.stories.js"; + + + +# Sortable pattern. + +A pattern to make listings sortable. + +## Configuration + +```md +| Option | Type | Default | Description | +| :--------: | :--------------: | :-------------: | :---------------------------------------------------------------------------------------------------: | +| selector | string | "li" | Selector to use to draggable items in pattern. | +| dragClass | string | "item-dragging" | Class to apply to original item that is being dragged. | +| cloneClass | string | "dragging" | Class to apply to cloned item that is dragged. | +| drop | function, string | "" | Callback function or name of callback function in global namespace to be called when item is dropped. | +``` + +## Examples + +### Default + +
+ + +```html + +
    +
  • One
  • +
  • Two
  • +
  • Three
  • +
+``` + +### Table + +The patttern needs to be defined on the direct parent element of the elements to be sorted. +Heads up: A `` would be added to the table by browser automatically. +The pattern needs to be defined on the `` then. + +
+ + +```html + + + + + + + + + + + + + + + +
One OneOne Two
Two OneTwo Two
Three OneThree Two
+``` diff --git a/src/pat/sortable/sortable.stories.js b/src/pat/sortable/sortable.stories.js new file mode 100644 index 000000000..7a159d79d --- /dev/null +++ b/src/pat/sortable/sortable.stories.js @@ -0,0 +1,52 @@ +import $ from "jquery"; +import { RenderHTML } from "../../../.storybook/setup.js"; +import SortableComponent from "./sortable.js"; + +export default { + title: "Patterns/Sortable", +}; + +// Sortable +const getSortable = () => ` + +
    +
  • One
  • +
  • Two
  • +
  • Three
  • +
+`; + +export const Sortable = { + render: () => RenderHTML({}, getSortable), +}; + +// Sortable Table +const getSortableTable = () => ` + + + + + + + + + + + + + + + +
One OneOne Two
Two OneTwo Two
Three OneThree Two
+`; + +export const SortableTable = { + render: () => RenderHTML({}, getSortableTable), +};