initial commit

dev/routes/(shell)/modals.tsx

@@ -0,0 +1,103 @@
+import type { Component } from 'solid-js';
+import { createSignal } from 'solid-js';
+import {
+  SSAttrList,
+  SSButton,
+  SSCallout,
+  SSForm,
+  SSHeader,
+  SSModal,
+  SSSurface,
+  useSSModals,
+} from 'src';
+import { IconSpark } from '../../demo/content';
+
+const ModalsPage: Component = () => {
+  const modals = useSSModals();
+  const [open, setOpen] = createSignal(false);
+
+  return (
+    <div class="demo_page">
+      <SSHeader title="Modals" subtitle="Inline and managed modal flows." />
+
+      <SSSurface class="demo_surface">
+        <div class="demo_inline">
+          <SSButton onclick={() => setOpen(true)}>Open modal</SSButton>
+          <SSButton
+            class="secondary"
+            onclick={() =>
+              modals.showDefault({
+                content: () => (
+                  <div class="demo_stack">
+                    <strong>Delete pipeline?</strong>
+                    <span>This action will remove the pipeline and its history.</span>
+                  </div>
+                ),
+                modalProps: () => ({
+                  title: 'Delete confirmation',
+                  danger: true,
+                  primaryButtonText: 'Delete',
+                }),
+              })
+            }
+          >
+            Default modal
+          </SSButton>
+          <SSButton
+            class="tertiary"
+            onclick={() =>
+              modals.showForm({
+                content: ({ context }) => (
+                  <div class="demo_stack">
+                    <SSForm.Input label="Change label" name="label" required />
+                    <SSForm.Input label="Summary" name="summary" textArea />
+                    <SSForm.Checkbox label="Notify watchers" name="notify" />
+                    {context.hasError() && (
+                      <span class="demo_hint">Please fix the highlighted fields.</span>
+                    )}
+                  </div>
+                ),
+                modalProps: () => ({
+                  title: 'Edit release',
+                  primaryButtonText: 'Save',
+                }),
+                onSubmit: async ({ hide }) => {
+                  hide();
+                },
+              })
+            }
+          >
+            Form modal
+          </SSButton>
+        </div>
+      </SSSurface>
+
+      <SSModal
+        open={open()}
+        title="Launch overview"
+        onClose={() => setOpen(false)}
+        footer={
+          <>
+            <SSButton class="secondary" onclick={() => setOpen(false)}>
+              Cancel
+            </SSButton>
+            <SSButton onclick={() => setOpen(false)}>Confirm</SSButton>
+          </>
+        }
+      >
+        <div class="demo_stack">
+          <SSCallout color="blue" icon={<IconSpark />}>
+            Everything is ready to go. Confirm to publish.
+          </SSCallout>
+          <SSAttrList>
+            <SSAttrList.Attr name="Version" value="v1.18.0" />
+            <SSAttrList.Attr name="Owner" value="Release team" />
+            <SSAttrList.Attr name="Window" value="Tomorrow 09:00 CET" />
+          </SSAttrList>
+        </div>
+      </SSModal>
+    </div>
+  );
+};
+
+export default ModalsPage;