feat: dialog component (#306)

* feat(dialog): create component structure * feat(dialog): improve dialog component * style(dialog): fix content box-shadow * refactor(dialog): refactor open-close dialog operations * style(dialog): add truncate to title * test(dialog): add unit tests * test(dialog): fix close btn test * docs(dialog): add storybook * test(dialog): complete uncovered test blogs * style(dialog): fix container size * docs(dialog): refactor storybook * style(dialog): fix content max height on mobile view * fix(dialog): storybook bug fix * fix(dialog): fix storybook bug and add layout center * fix(dialog): change viewport for chromatic * refactor(dialog): revert story parameters * fix(dialog): fix dialog dimensions * docs(dialog): remove content margin Co-authored-by: olkeoguz <[email protected]>
Trendyol · Oct 27, 2022 · 246fda5 · 246fda5
1 parent 68cd1b2
commit 246fda5
Show file tree

Hide file tree

Showing 6 changed files with 653 additions and 1 deletion.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -18,7 +18,8 @@ module.exports = {
         'checkbox',
         'alert',
         'select',
-        'pagination'
+        'pagination',
+        'dialog'
       ],
     ],
   },

diff --git a/src/baklava.ts b/src/baklava.ts
@@ -12,4 +12,5 @@ export { default as BlAlert } from './components/alert/bl-alert';
 export { default as BlSelect } from './components/select/bl-select';
 export { default as BlSelectOption } from './components/select/option/bl-select-option';
 export { default as BlPagination } from './components/pagination/bl-pagination';
+export { default as BlDialog } from './components/dialog/bl-dialog';
 export { getIconPath, setIconPath } from './utilities/asset-paths';
diff --git a/src/components/dialog/bl-dialog.css b/src/components/dialog/bl-dialog.css
@@ -0,0 +1,77 @@
+dialog {
+  padding: 0;
+  border: 0;
+  background: var(--bl-color-primary-background);
+  border-radius: var(--bl-border-radius-l);
+  max-width: calc(100vw - var(--bl-size-4xl));
+  max-height: calc(100vh - var(--bl-size-4xl));
+  overflow: hidden;
+}
+
+dialog::backdrop {
+  background: #273142;
+  opacity: 0.7;
+}
+
+dialog .container {
+  min-width: 424px;
+  min-height: 178px;
+}
+
+dialog header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bl-size-2xs);
+  padding: var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl);
+}
+
+dialog header bl-button {
+  margin-left: auto;
+}
+
+dialog header h2 {
+  font: var(--bl-font-title-1-medium);
+  color: var(--bl-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  padding: 0;
+}
+
+dialog .content {
+  padding: var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);
+  overflow: auto;
+}
+
+dialog footer {
+  padding: var(--bl-size-xl);
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--bl-size-m);
+}
+
+dialog footer.sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 999; /* FIXME */
+  background-color: var(--bl-color-primary-background);
+  box-shadow: 0 -4px 15px #27314226;
+}
+
+@media only screen and (max-width: 469px) {
+  dialog {
+    max-width: calc(100vw - var(--bl-size-2xl));
+    max-height: calc(100vh - var(--bl-size-2xl));
+  }
+
+  dialog .container {
+    min-width: auto;
+    min-height: auto;
+  }
+
+  dialog footer {
+    flex-flow: column wrap;
+  }
+}
diff --git a/src/components/dialog/bl-dialog.stories.mdx b/src/components/dialog/bl-dialog.stories.mdx
@@ -0,0 +1,181 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
+import { userEvent } from '@storybook/testing-library';
+
+<Meta
+  title="Components/Dialog"
+  component="bl-dialog"
+  argTypes={{
+    open: {
+      control: "boolean",
+      default: false
+    },
+    caption: {
+      control: "text"
+    },
+  }}
+/>
+
+export const dialogOpener = async (event,dialogClass) => {
+  const target= event.target;
+  const isCanvas = !event.target || target.parentNode.parentNode.getAttribute("id") === "root";
+  let selector=`#docs-root .${dialogClass}`;
+  if(isCanvas){
+    selector = `#root .${dialogClass}`;
+  }
+  const dialog = document.querySelector(selector);
+  dialog.setAttribute("open",true);
+}
+
+export const closeAllDialog = async () => {
+  const dialog = document.querySelector(`#root bl-dialog[open]`);
+  dialog?.removeAttribute("open");
+}
+
+export const BasicTemplate = (args) => html`
+<bl-button @click="${(event) => dialogOpener(event,"basic-dialog")}" variant="secondary">Open Dialog</bl-button>
+<bl-dialog class="basic-dialog"
+caption="${ifDefined(args.caption)}"
+open="${ifDefined(args.open)}"
+style = "font: var(--bl-font-body-text-2)">
+  Let us help determine location. This means sending anonymous location data to us.
+  <bl-button slot="primary-action" variant="primary" size="large">Agree</bl-button>
+  <bl-button slot="secondary-action" variant="secondary" kind="danger" size="large">Disagree</bl-button>
+  <bl-button slot="tertiary-action" variant="tertiary" kind="neutral" size="large">Cancel</bl-button>
+</bl-dialog>
+<script>${closeAllDialog()}</script>
+`
+
+export const TemplateWithStickyFooter = (args) => html`
+<bl-button @click="${(event) => dialogOpener(event,"dialog-with-sticky-footer")}" variant="secondary" kind="success">Open Dialog</bl-button>
+<bl-dialog class="dialog-with-sticky-footer"
+caption="${ifDefined(args.caption)}"
+open="${ifDefined(args.open)}"
+style = "font: var(--bl-font-body-text-2)">
+  <bl-alert icon>Please read all terms and conditions.</bl-alert>
+  <h4>Lorem ipsum dolor sit amet</h4>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+   Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <ul>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+  </ul>
+  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced  <br/> below for those interested.
+  Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et  <br/> Malorum" by Cicero are also reproduced in their exact original form, <br/>
+  accompanied by English versions from the 1914 translation by H. Rackham.</p>
+  <h4>Quis autem vel eum iure reprehenderit qui</h4>
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>
+  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br/> when an unknown printer took a galley of type and scrambled <br/>
+  it to make a type specimen book.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <ul>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+  </ul>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <bl-button slot="primary-action" kind='success' variant="primary" size="large">Got It</bl-button>
+  <bl-button slot="secondary-action" variant="secondary" kind="neutral" size="large">Cancel</bl-button>
+</bl-dialog>
+`
+
+export const SizingTemplate = (args) => html`
+<bl-button @click="${(event) => dialogOpener(event,"dialog-sizing")}" variant="tertiary" kind="neutral">Open Dialog</bl-button>
+<bl-dialog class="dialog-sizing"
+caption="${ifDefined(args.caption)}"
+open="${ifDefined(args.open)}"
+style = "font: var(--bl-font-body-text-2)">
+  <p style="width:400px; height:200px; margin:0; padding:0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+  remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+  software like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.
+  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
+  a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites
+  of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
+  (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
+  "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+  </p>
+  <bl-button slot="primary-action" variant="primary" size="large">Agree</bl-button>
+  <bl-button slot="secondary-action" variant="secondary" kind="danger" size="large">Disagree</bl-button>
+  <bl-button slot="tertiary-action" variant="tertiary" kind="neutral" size="large">Cancel</bl-button>
+</bl-dialog>
+`
+
+# Dialog
+
+Dialogs inform users about a task ansd can contain critical information, require decisions, or involve multiple tasks.
+
+<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+
+### Design Rules
+
+* By default a dialog contains a close button.
+* A dialog should contain at least one content (text, image etc.).
+* Dialogs are always centered on the page, with an overlay behind them that hides the page content.
+* Only large buttons can be used in the action bar and there can be maximum 3 buttons (**primary**, **secondary** and **tertiary**).
+To maintain usability level of dialog component:
+* When the dialog sticks to the page edges and does not fit in its minimum size, it switches to mobile view and the buttons are lined up one after.
+* Dialog can be dismissed by clicking backdrop or pressing Esc.
+
+
+## Basic Usage
+
+<Canvas>
+  <Story name="Basic Usage" play={(event) => dialogOpener(event,"basic-dialog")}
+   args={{ caption: "Use location service?"}}>
+    {BasicTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Dialog With Sticky Footer
+
+For long content that does not fit on the page, the dialog action area remains sticky at the bottom of the dialog so that it appears on the page.
+
+<Canvas>
+  <Story name="Dialog With Sticky Footer" play={(event) => dialogOpener(event,"dialog-with-sticky-footer")}
+   args={{ caption: "Terms And Conditions"}}>
+    {TemplateWithStickyFooter.bind({})}
+  </Story>
+</Canvas>
+
+## Dialog Sizing
+
+The dialog doesn't have any size, it will be fluidly sized regarding its content. You can give your own width and height style to your content.
+
+<Canvas>
+  <Story name="Dialog Sizing" play={(event) => dialogOpener(event,"dialog-sizing")}>
+    {SizingTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Reference
+
+<ArgsTable of="bl-dialog" />