mixin section(h1) - const id = $helpers.toDashCase(h1) section.mp-panel(attrs={id, class: id, 'data-label': h1}) .mp-panel-section h1= h1 block mixin sub-section(h2, autoDoc=false) - const id = $helpers.toDashCase(h2) .sub-section.mp-panel-section(attrs={id, class: id, 'data-label': h2}) if h2 h2= h2 block if autoDoc auto-doc(attrs={'component': h2}) mixin color-pallete(colorGroups) .item-palette each colorGroup in colorGroups .example each color in colorGroup .list-block .color(style={'background-color': COLORS[color]}) .color-label= COLORS[color].toLowerCase() .label= color .design-system nav-col(attrs={sections: JSON.stringify(navSections)}) .content-col(hook={insert: vnode => $helpers.contentInserted(vnode.elm)}) +section(`Mixpanel Design System`) +sub-section(`Goals`) p.desc. At Mixpanel, we want to create a cohesive experience for our users. This system will enable teams to be more efficient, have a shared language across the company, and focus deeper on solving user problems. This is a constantly evolving project that seeks to improve composability and usability of Mixpanel's user interface. +sub-section(`Panel Components`) p.desc. This design system website and component library are built using our open source library #[a(attrs={href: `https:\/\/github.com/mixpanel/panel`, target: `_blank`}) Panel]. Panel is a thin layer on top of #[a(attrs={href: `https:\/\/developer.mozilla.org/en-US/docs/Web/Web_Components`, target: `_blank`}) Web Components] with React like virtual DOM rendering. You can install #[a(attrs={href: `https:\/\/chrome.google.com/webstore/detail/panel-components/mooaaejpdfdebnddpokcdimcobepahlg?hl=en`, target: `_blank`}) Panel Components Chrome extension] to peek under the hood. +section(`Colors`) +sub-section('UI Colors') p.desc. Mixpanel User Interface is primarily created with the blue and grey palettes. This limited selection provides constraint and visual continuity across our UI. When using lighter values (50-300) be especially conscious of creating contrast that is too low for visibility standards. - const uiColors = [ [`$blue-900`, `$blue-700`, `$blue-500`, `$mp-blue`, `$blue-100`], [`$grey-900`, `$grey-700`, `$grey-500`, `$grey-300`, `$grey-200`, `$grey-150`, `$grey-100`, `$grey-50`], [`$white`, `$mp-red`], ]; +color-pallete(uiColors) +sub-section('Data Visualization') p.desc. These colors have been selected for info-graphics based on their high visibility / contrast and adherance to accessibility standards. When necessary, these colors can be used in varying degrees of opacity to account for lack of gadiation in selection. Think: Retention and Signal heat maps. - const dataVizColors = [[ `$mp-navy`, `$mp-ultramarine`, `$mp-blue`, `$mp-turquoise`, `$mp-seafoam`, `$mp-aquamarine`, `$mp-orange`, `$mp-yellow`, ]]; +color-pallete(dataVizColors) +sub-section('Color Library') p.desc. Mixpanel Colors (mp-) are the 500 value from our color library, with the exception of mp-blue (300). Design recommends that you stick with the primary values (500), and utilize other values as accents, in order to maintain a consistent look and feel across all of our products. - const libColors = [ [`$red-700`, `$mp-red`, `$red-300`, `$red-200`, `$red-100`], [`$orange-700`, `$mp-orange`, `$orange-300`, `$orange-200`, `$orange-100`], [`$yellow-700`, `$mp-yellow`, `$yellow-300`, `$yellow-200`, `$yellow-100`], [`$green-700`, `$mp-green`, `$green-300`, `$green-200`, `$green-100`], [`$blue-900`, `$blue-700`, `$blue-500`, `$mp-blue`, `$blue-100`], [`$purple-700`, `$mp-purple`, `$purple-300`, `$purple-200`, `$purple-100`], ]; +color-pallete(libColors) +section(`Typography`) +sub-section(`Type Family`) p.desc. Currently Mixpanel UI is limited to one typeface: #[span.strong Helvetica Neue]. It was chosen because of its extensive inclusion across many operating systems. We have limited the weight selection to establish a clear information hierarchy. +sub-section(`Type Weights`) .example.block p.mp-font-weight-regular .mp-font-weight-regular | Mixpanel helps you learn from your data .example.block p.mp-font-weight-medium .mp-font-weight-medium | Mixpanel helps you learn from your data .example.block p.mp-font-weight-bold .mp-font-weight-bold | Mixpanel helps you learn from your data +sub-section(`Type Sizes`) p.desc. By limiting our font catalogue to just six sizes, we're able to reduce page load times and further reinforce UI patterns. Our baseline is 13px (default), and our smallest point size is ALL CAPS 11px. There will be instances where micro-copy is required, which has not been accounted for in common at this time. .example.block p.mp-font-size-xl .mp-font-size-xl | Mixpanel helps you learn from your data .example.block p.mp-font-size-large .mp-font-size-large | Mixpanel helps you learn from your data .example.block p.mp-font-size-medium .mp-font-size-medium | Mixpanel helps you learn from your data .example.block p.mp-font-size-default .mp-font-size-default | Mixpanel helps you learn from your data .example.block p.mp-font-size-xs .mp-font-size-xs | Mixpanel helps you learn from your data .example.block p.mp-font-paragraph .mp-font-paragraph | Mixpanel helps you learn from your data +sub-section(`mp-truncated-text`) p.desc Truncates long text to fit container width and adds an ellipses in the middle code-tip.example.block mp-truncated-text(attrs={title: `browser text measurement is used to truncate this text so it can even handle strangely-sized characters like ﷽﷽﷽﷽﷽﷽. Text will be re-truncated to fit the actual width of the containing element`}) +section(`Iconography`) +sub-section(`Icons`) p.desc. All SVG icons should measure 16x16 px, saved with 3px of padding (to account for a possible ascenders and descenders) resulting in a 22x22 viewbox. If you need a different size in your application, you should use the "svg-icon-style" stylus mixin instead of saving a differently sized SVG file. You should also clean up SVG files by removing editor-specific XML and explicitly defined fill colors (stroke colors can be replaced by the keyword "currentColor"). .example.block .item-palette each icon in Object.keys(SVG_ICONS) .list-block svg-icon(attrs={icon}) .label= icon +section(`Styles`) +sub-section(`.mp-panel`) p.desc. To create a panel styled container. .example.block .mp-panel.first-panel h2 Here is one main panel .mp-panel .mp-panel-section h3 Here is another one below it .mp-panel-section p This one has sections. .mp-panel-section p Multiple, multiple... .mp-panel-section p ...sections +sub-section(`.mp-table`) p.desc Just a simple styled table .example | TODO: 🚧 In construction +section(`Buttons`) +sub-section(`mp-button`, true) p.desc. These rectangle buttons are used when there is a clear CTA. Confirmation intents should always be placed to the right of cancellation buttons, when present. p .mp-button-primary code-tip.example mp-button.mp-button-primary Primary code-tip.example mp-button.mp-button-primary(attrs={icon: `plus`}) Primary code-tip.example mp-button.mp-button-primary(attrs={disabled: true}) Primary code-tip.example mp-button.mp-button-primary(attrs={icon: `caret-down`}) p .mp-button-secondary code-tip.example mp-button.mp-button-secondary Secondary code-tip.example mp-button.mp-button-secondary(attrs={icon: `plus`}) Secondary code-tip.example mp-button.mp-button-secondary(attrs={disabled: true}) Secondary code-tip.example mp-button.mp-button-secondary(attrs={icon: `plus-large`}) p .mp-red code-tip.example mp-button.mp-button-red Delete code-tip.example mp-button.mp-button-red(attrs={icon: `plus`}) Delete code-tip.example mp-button.mp-button-red(attrs={disabled: true}) Delete code-tip.example mp-button.mp-button-red(attrs={icon: `trashcan`}) p size: small code-tip.example mp-button.mp-button-primary(attrs={size: `small`}) Small code-tip.example mp-button.mp-button-secondary(attrs={size: `small`, icon: `plus`}) Small code-tip.example mp-button.mp-button-secondary(attrs={size: `small`, disabled: true}) Small code-tip.example mp-button.mp-button-red(attrs={size: `small`, icon: `trashcan`}) +sub-section(`mp-button-bar`, true) p.desc. Button bars could be used with ui-cards (modals and dialogs) to lead the user through a linear flow or to complete a form. code-tip.example mp-button-bar.mp-button-bar-secondary I'm a button bar code-tip.example mp-button-bar.mp-button-bar-secondary(attrs={disabled: true}) I'm a disabled button bar code-tip.example mp-button-bar.mp-button-bar-primary(attrs={'arrow-next': true}) Next step code-tip.example mp-button-bar.mp-button-bar-primary(attrs={'arrow-next': true, disabled: true}) Next step +sub-section(`mp-toggle`, true) p.desc. Toggle sets can be used to sort lists or to force a single selection from a finite list of viewing options. The basic toggle switch can be used to enable or disable settings / states from within menus. p Default code-tip.example mp-toggle( attrs={blue: true, selected: blueToggleValue} on={select: $helpers.blueToggleChanged} ) mp-toggle-option(attrs={value: `option1`}) Longer Option 1 mp-toggle-option(attrs={value: `option2`}) Opt2 span.toggle-val Selected: #{blueToggleValue} p .wide-toggle code-tip.example mp-toggle.wide-toggle(attrs={selected: `option1`}) mp-toggle-option(attrs={value: `option1`}) Super long option text mp-toggle-option(attrs={value: `option2`}) Short mp-toggle-option(attrs={value: `option3`}) Medium text here p large: true code-tip.example mp-toggle.wide-toggle(attrs={large: true, selected: `option2`}) mp-toggle-option(attrs={value: `option1`}) Longer Option 1 mp-toggle-option(attrs={value: `option2`}) Longer Option 2 p square: true code-tip.example mp-toggle(attrs={square: true, large: true, selected: `all`}) mp-toggle-option(attrs={value: `all`}) All mp-toggle-option(attrs={value: `events`}) Events mp-toggle-option(attrs={value: `people`}) People mp-toggle-option(attrs={value: `things`}) Things mp-toggle-option(attrs={value: `other`}) Other p square: true, small: true code-tip.example mp-toggle(attrs={square: true, small: true, selected: `people`}) mp-toggle-option(attrs={value: `all`}) All mp-toggle-option(attrs={value: `events`}) Events mp-toggle-option(attrs={value: `people`}) People mp-toggle-option(attrs={value: `things`}) Things mp-toggle-option(attrs={value: `other`}) Other p mp-toggle-option icon code-tip.example mp-toggle(attrs={square: true, small: true, selected: `table`, color: `grey`}) mp-toggle-option(attrs={value: `table`, icon: `table`}) mp-toggle-option(attrs={value: `line`, icon: `line`, 'icon-side': `left`}) Line mp-toggle-option(attrs={value: `bar`, icon: `bar`}) Bar p theme: lite code-tip.example mp-toggle(attrs={theme: `lite`, selected: `events`}) mp-toggle-option(attrs={value: `all`}) All mp-toggle-option(attrs={value: `events`}) Events mp-toggle-option(attrs={value: `accounts`, icon: `alert`}) Accounts mp-toggle-option(attrs={value: `contacts`, disabled: true}) Contacts mp-toggle-option(attrs={value: `leads`, disabled: true}) Leads p mp-toggle-option error: true code-tip.example mp-toggle(attrs={theme: `lite`, selected: `events`}) mp-toggle-option(attrs={value: `all`}) All mp-toggle-option(attrs={value: `events`}) Events mp-toggle-option(attrs={value: `accounts`, disabled: true, error: true}) Accounts mp-toggle-option(attrs={value: `contacts`, error: true}) Contacts mp-toggle-option(attrs={value: `leads`, error: true}) Leads +section(`Form Elements`) +sub-section(`input`) p.desc An input box. NOTE: this is a styled html input and not a component. code-tip.example input(attrs={type: `text`, placeholder: `A placeholder`}) +sub-section(`mp-icon-input`, true) p.desc Input with context .e.g. Search code-tip.example mp-icon-input(attrs={icon: `search`, rounded: true, placeholder: `Some placeholder text`}) +sub-section(`mp-input-group`, true) p.desc. The field with button combination is used when space is limited, or when the CTA is strictly associated with the input string. code-tip.example mp-input-group( attrs={placeholder: `Type a name...`, busy: inputGroupSaving} on={ change: $helpers.handleNamerChange, submit: $helpers.handleNamerSubmit, } ) +sub-section(`mp-autoresizing-input`, true) code-tip.example mp-autoresizing-input( attrs={ 'initial-width': 150, placeholder: `Selected event`, 'input-style-overrides': JSON.stringify({ 'font-weight': 400, 'font-size': `16px`, }), } ) +sub-section(`mp-clickable-input`, true) code-tip.example mp-clickable-input( attrs={ error: clickableInputError, pattern: `(This).*`, placeholder: `Untitled dashboard`, 'select-on-focus': true, 'min-input-width': `500px`, required: true, tabindex: 0, } on={save: $helpers.handleClickableInputSave} props={value: clickableInputValue} ) p This text field is disabled code-tip.example mp-clickable-input( attrs={disabled: true} props={value: `This text field is disabled`} ) p Field is required, max length is 60 chars, expects numbers code-tip.example mp-clickable-input( attrs={ autocomplete: `off`, required: true, maxlength: 60, pattern: `\\d*`, placeholder: `placeholder`, name: `mymobile`, tabindex: 0, type: `tel`, } on={save: $helpers.handleClickableInputSaveTel} props={value: clickableInputValueTel} ) p These are the different sizes code-tip.example mp-clickable-input( attrs={size: `xxl`} props={value: `Size 'xxl'`} ) code-tip.example mp-clickable-input( attrs={size: `xl`} props={value: `Size 'xl'`} ) code-tip.example mp-clickable-input( attrs={size: `large`} props={value: `Size 'large'`} ) code-tip.example mp-clickable-input( attrs={size: `medium`} props={value: `Size 'medium'`} ) +sub-section(`mp-switch`, true) p.desc To switch on/off or true/false code-tip.example mp-switch(attrs={on: true}) +sub-section(`mp-checkbox`, true) p.desc When selecting many of many options code-tip.example mp-checkbox(attrs={checked: true}) 🐙 Checked code-tip.example mp-checkbox(attrs={'checked': true, 'checked-color': COLORS[`$mp-purple`]}) 🐯 Custom color code-tip.example mp-checkbox(attrs={'unchecked-icon': `dash`, 'checked-color': `none`}) 🐨 Custom unchecked icon code-tip.example mp-checkbox(attrs={'disabled': true}) 🐼 Disabled code-tip.example mp-checkbox(attrs={focused: true}) 🦁 Focused +sub-section(`mp-radio-button`, true) p.desc To select one out of multiple options code-tip.example mp-radio-button(attrs={selected: false}) Tigers mp-radio-button(attrs={selected: true}) Panda mp-radio-button(attrs={selected: false}) Giraffe mp-radio-button(attrs={selected: false}) Lion +sub-section(`mp-select`, true) p.desc To select an item from a list of items in a dropdown. Like the html select code-tip.example mp-select( attrs={ options: JSON.stringify([`All Tags`, `Tag1`, `Tag2`, `Tag3`, `Tag4`, `Tag5`, `Tag6`, `Tag7`, `Tag8`, `Tag9`, `Tag10`, `This is a super long tag`]), 'menu-width': 300, 'menu-height': 200, 'text-transform': `none`, 'selected-option': ``, }) +sub-section(`mp-file-uploader`, true) p.desc Use this to ask user to upload a file code-tip.example mp-file-uploader( attrs={ accept: `text/csv`, placeholder: `Please select a CSV file`, label: `Select CSV file`, } ) +sub-section(`mp-spinner`, true) p.desc When waiting for a network response or some other task that usually completes in a few seconds code-tip.example mp-spinner +sub-section(`mp-user-icon`, true) code-tip.example mp-user-icon(attrs={name: `Hello World`}) +sub-section(`mp-tag`, true) code-tip.example mp-tag(attrs={clickable: true, 'tag-name': `Segmentation`, removable: true}) code-tip.example mp-tag(attrs={clickable: true, 'tag-name': `Retention`, removable: false}) code-tip.example mp-tag(attrs={clickable: false, 'tag-name': `Funnels`, removable: false}) +sub-section(`mp-tag-input`, true) code-tip.example mp-tag-input( attrs={tags: JSON.stringify([{label: `tag1`, attrs: {icon: `profile`}}, {label: `tag2`}])} ) +sub-section(`mp-tag-selector`, true) code-tip.example mp-button( attrs={size: `small`, color: `grey`, icon: `edit`} on={click: $helpers.toggleTagSelector} ) Edit tags mp-drop-menu(attrs={open: open.tagSelector} on={change: $helpers.handleTagSelectorDropMenuChange}) .title .header svg-icon(attrs={icon: `check-success`}) .header-text Added to company dashboard .subtext Viewed report by type mp-tag-selector( attrs={ 'options': JSON.stringify(tagSelectorData.options), 'saving': tagSelectorData.saving, } on={ change: $helpers.handleTagSelectorChange, save: $helpers.handleTagSelectorSave, } ) +sub-section(`mp-settings-section`, true) p.desc A group of related settings code-tip.example.block mp-settings-section(attrs={title: `This is an optional title`}) mp-settings-li( attrs={ label: `Tags`, editable: true, type: `tag`, 'all-tags': JSON.stringify(tagSelectorData.allTags), 'selected-tags': JSON.stringify(tagSelectorData.selectedTags), 'hide-buttons': true, } props={ updateFunc: $helpers.saveTags, } ) mp-settings-li( attrs={ label: `Token`, value: `mixpanel-3`, editable: false, type: `text`, placeholder: `Your project token`, } ) mp-settings-li( attrs={ label: `E-mail`, value: $helpers.email(), editable: true, emptiable: true, placeholder: `Enter your e-mail`, } props={ updateFunc: $helpers.updateEmail, } ) mp-settings-li( attrs={ label: `Delete events`, value: `Delete all your events`, button: `Delete`, 'delete-button': true, disabled: false, } on={ 'button-click': () => $helpers.openModal('confirmDelete'), } ) mp-settings-li(attrs={label: `Link`, type: `slot`}) a(attrs={href: `https:\/\/www.mixpanel.com`}) Link to mixpanel auto-doc(attrs={component: `mp-settings-li`}) +section(`Menus, Toasts & Tooltips`) +sub-section(`mp-drop-menu`, true) p.desc. Use drop menu to show a contextual sub view when a button is clicked. A number of other components use this as a base component for composition code-tip.example mp-button( attrs={size: `small`, color: `blue`}, on={click: $helpers.toggleMenu}, ) Drop Menu .drop-menu-container mp-drop-menu( attrs={open: open.menu} on={change: e => $helpers.handleMenuChange('menu', e.detail.state)} ) .emoji 🦊 code-tip.example mp-button( attrs={size: `small`, color: `blue`, icon: `caret-up`}, on={click: $helpers.toggleMenuUp}, ) Up Menu .drop-menu-container(style={bottom: `175px`}) mp-drop-menu( attrs={ open: open.menuUp, direction: `up`, 'with-caret': true, } on={change: e => $helpers.handleMenuChange('menuUp', e.detail.state)} ) .emoji 🐣 code-tip.example mp-button( attrs={size: `small`, color: `blue`, icon: `caret-down`}, on={click: $helpers.toggleCaretMenu}, ) Caret Position .drop-menu-container mp-drop-menu( attrs={ open: open.caretMenu, 'with-caret': true, 'caret-pos': JSON.stringify({left: `18px`}) } on={change: e => $helpers.handleModalChange('caretMenu', e.detail.state)} ) .emoji 🦄 +sub-section(`mp-tooltip`, true) p.desc. Use tooltips for providing extra descriptions on hover. #[br] NOTE: Tooltips are absolutely positioned relative to the closest relatively positioned ancestor. The tooltip placement behaves wonky if the relative ancestor is an inline element, so use inline-flex or inline-block. code-tip.example svg-icon(attrs={icon: `caret-left`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={placement: `bottom`}) Left code-tip.example svg-icon(attrs={icon: `caret-right`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={placement: `right`}) Right code-tip.example svg-icon(attrs={icon: `caret-up`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={placement: `top`}) Top code-tip.example svg-icon(attrs={icon: `caret-down`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={placement: `bottom`}) Bottom code-tip.example svg-icon(attrs={icon: `thumbs-down`, color: COLORS[`$mp-red`]}) mp-tooltip(attrs={ type: `error`}) Error code-tip.example svg-icon(attrs={icon: `x`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={'hide-arrow': true}) No Arrow code-tip.example svg-icon(attrs={icon: `dash`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={'max-width': `300px`}) This is a long tooltip with a lot of text that spans over multiple lines code-tip.example svg-icon(attrs={icon: `eye-on`, color: COLORS[`$grey-500`]}) mp-tooltip(attrs={'always-show': true, 'max-width': `200px`}) Always Show +sub-section(`mp-toast`, true) p.desc. To indicate success after a user action that involves a network call, or an unobtrusive notification e.g new data is available. p.controls mp-button( attrs={size: `small`, color: `grey`, icon: `plus`}, on={click: $helpers.addToast}, ) Normal Toast mp-button( attrs={size: `small`, color: `grey`, icon: `plus`}, on={click: $helpers.addErrorToast}, ) Error Toast code-tip.example(style={minHeight: `192px`}) for toast in toasts mp-toast( attrs={cta: toast.cta, hide: toast.closed, 'is-error': toast.isError} on={close: () => $helpers.closeToast(toast)} )= toast.message +sub-section(`mp-tutorial-tooltip`, true) code-tip.example mp-button( attrs={size: `small`, color: `grey`, icon: `help`} on={click: () => $helpers.toggleTutorialTooltip('top')} ) Default mp-tutorial-tooltip( attrs={hide: !open.tutorialTooltip.top} ) Default code-tip.example mp-button( attrs={size: `small`, color: `grey`, icon: `type-number`} on={click: () => $helpers.toggleTutorialTooltip('next')} ) Right w/ Steps mp-tutorial-tooltip( attrs={hide: !open.tutorialTooltip.next, 'num-steps': 4, 'curr-step': tooltipStep, 'next-button': true, placement: `right`} on={next: $helpers.incrementTooltipStep, close: $helpers.closeTutorialNextTooltip} ) mp-button( attrs={size: `small`, color: `red`} on={click: $helpers.resetTooltipStep} ) Reset p You are on step #{tooltipStep}. Press NEXT to go to the next step. code-tip.example mp-button( attrs={size: `small`, color: `grey`, icon: `x`} on={click: () => $helpers.toggleTutorialTooltip('bottom')} ) Bottom & Closeable mp-tutorial-tooltip( attrs={hide: !open.tutorialTooltip.bottom, closeable: true, placement: `bottom`} on={close: () => $helpers.toggleTutorialTooltip('bottom')} ) Closeable code-tip.example mp-button( attrs={size: `small`, color: `grey`, icon: `dash`} on={click: () => $helpers.toggleTutorialTooltip('left')} ) Left w/ No Footer mp-tutorial-tooltip( attrs={hide: !open.tutorialTooltip.left, placement: `left`, 'hide-footer': true} ) No Footer +sub-section(`mp-upsell-popup`, true) - const features = [`default`, `custom-events`, `date-range`, `export-csv`, `filter-levels`, `bookmark-maximum`] each feature in features code-tip.example mp-upsell-popup(attrs={feature, open: true}) +section(`Modals & Dialogs`) +sub-section(`mp-modal`, true) p.desc. Modals should be presented when the user needs to complete a task that the current interface does not support. For example: a button to invite teammates might present a modal including a search field and a list of names to choose from. These are specifically great for presenting new flows while preserving the state of content. code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('modal')} ) Open modal mp-modal.wide-modal( attrs={closeable: true, open: open.modal} on={change: e => $helpers.handleModalChange('modal', e.detail.state)} ) div .mp-modal-content .mp-modal-title Easily track events .mp-modal-subtitle Click on any element on your page (e.g. the buy button) to create an event and access all historical data for that event. mp-button-bar.mp-button-bar-primary( on={click: () => $helpers.closeModal('modal')} attrs={'arrow-next': true} ) Create your first event code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('largeModal')} ) Open large modal mp-modal.modal( attrs={ 'closeable': true, 'grow-to-content': true, open: open.largeModal } on={change: e => $helpers.handleModalChange('largeModal', e.detail.state)} ) div .mp-modal-large-content .emoji 🙋 .mp-modal-text We can do it! code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('popup')} ) Open popup mp-modal( attrs={'modal-type': `popup`, closeable: true, open: open.popup} on={change: e => $helpers.handleModalChange('popup', e.detail.state)} ) div .mp-modal-content .mp-modal-title Easily track events .mp-modal-subtitle Click on any element on your page (e.g. the buy button) to create an event and access all historical data for that event. mp-button-bar.mp-button-bar-primary( on={click: () => $helpers.closeModal('popup')} ) Create your first event +sub-section(`mp-dialog`, true) p.desc. Dialogs are used when a decision is required. An example would be any time a user makes a potentially irreversable action, you could display a dialog to get confirmation and explain the repercussions. code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('dialog')} ) Open dialog mp-dialog.dialog( attrs={closeable: true, open: open.dialog} on={change: e => $helpers.handleModalChange('dialog', e.detail.state)} ) div .mp-dialog-container .mp-dialog-body .mp-dialog-text .mp-dialog-title Take an action .mp-dialog-subtitle Click on any element on your page (e.g. the buy button) to take an action. .mp-dialog-buttons mp-button.mp-button-secondary(attrs={size: `small`} on={click: () => $helpers.closeModal('dialog')}) Cancel mp-button.mp-button-primary(attrs={size: `small`} on={click: () => $helpers.closeModal('dialog')}) Ok +sub-section(`mp-confirm`, true) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('confirm')} ) Open confirm mp-confirm( attrs={open: open.confirm} on={ change: e => $helpers.handleModalChange('confirm', e.detail.state), submit: e => console.log(e.detail), } ) div .mp-confirm-title Unsaved changes .mp-confirm-description If you navigate away from this page you will lose your changes. Would you like to continue? +sub-section(`mp-confirm-delete`, true) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('confirmDelete')} ) Open confirm-delete mp-confirm-delete( attrs={id: `confirmDelete`, 'delete-button-label': `Delete it`, closeable: true, open: open.confirmDelete} on={ change: e => $helpers.handleModalChange('confirmDelete', e.detail.state), submit: e => console.log(e.detail), } ) div .mp-confirm-delete-title Delete Universe? .mp-confirm-delete-description Are you sure you want to delete the universe? The answer is 42 +sub-section(`mp-alert`, true) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('alert')} ) Open alert mp-alert( attrs={closeable: true, open: open['alert']} on={change: e => $helpers.handleModalChange('alert', e.detail.state)} ) div .text AHHH DANGER DANGER There is currently an error code-tip.example.relative-position mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('alert-not-fullscreen')} ) Open not-fullscreen alert mp-alert( attrs={closeable: true, open: open['alert-not-fullscreen'], 'not-fullscreen': true} on={change: e => $helpers.handleModalChange('alert-not-fullscreen', e.detail.state)} ) div .text I am not fixed position! code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal('alert-large-icon')} ) Open large icon alert mp-alert( attrs={closeable: true, open: open['alert-large-icon'], 'large-icon': true} on={change: e => $helpers.handleModalChange('alert-large-icon', e.detail.state)} ) div .text Oh oh, 👶 made 💩. #[br] Who will clean it? +sub-section(`mp-drawer`, true) p.desc. Drawers are used to takeover part of the screen and provide contextual content. For example: revealing a list of saved reports or showing global settings for a notification campaign. code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: () => $helpers.openModal(`drawer`)} ) Open drawer mp-drawer( attrs={open: open[`drawer`]} on={close: e => $helpers.handleModalChange(`drawer`, e.detail)} ) .drawer-content(style={marginTop: `60%`, fontSize: `50px`, textAlign: `center`}) | 🌃 Hey Space 🌌, #[br]#[br] 🚀 I'm coming! 👩‍🚀 +section(`Item Lists`) +sub-section(`mp-checkbox-list`, true) p.desc. For displaying a scrollable, searchable, and keyboard navigable checkbox list of items, with the ability to select/deselect all items. code-tip.example mp-checkbox-list( attrs={ 'items': JSON.stringify($helpers.getCheckboxListItems()), 'progressive': true, 'show-select-all': true, 'num-columns': 3, } ) +sub-section(`mp-items-menu`, true) p.desc For displaying a scrollable, searchable, and keyboard navigable list of items. p Turn switch on to enable multi select mode. code-tip.example mp-switch( attrs={on: itemsMenuMultiSelect} on={change: $helpers.toggleItemsMenuMultiSelect} ) p Helper mp-icon-input search. Keyboard accessibility provided via `keydownProxyEl` prop code-tip.example mp-icon-input( attrs={icon: `search`, placeholder: `Search items`} on={input: $helpers.handleItemsMenuSearchInput} hook={insert: ({elm}) => $component.setElRef(`itemsMenuSearch`, elm)} ) p Example also includes 'mp-item-tooltip' to show context for hovered items code-tip.example mp-items-menu( attrs={ 'multiple': itemsMenuMultiSelect, 'progressive': true, 'search-filter': itemsMenuSearchFilter, 'sections': JSON.stringify($helpers.getItemsMenuSections()), }, props={keydownProxyEl: $component.elRefs.itemsMenuSearch} on={focusItem: $helpers.populateTooltip} ) mp-item-tooltip( attrs={ 'tooltip-data': JSON.stringify(tooltipData), 'position-parent-selector': `.example`, open: !!tooltipData, } ) +section(`Calendar & Date Picker`) +sub-section(`mp-calendar`, true) p.desc For choosing dates and date ranges. Usually embedded in drop menus, card elements, and modals. code-tip.example mp-calendar( attrs={ 'min-date': `2015-06-10`, 'max-date': `2016-01-20`, 'selected-date': `2016-01-15`, } ) code-tip.example mp-calendar( attrs={ 'is-double-calendar': true, 'is-range': true, 'min-date': `2015-12-10`, 'max-date': `2016-01-20`, 'is-from-date-focused': true, 'selected-from-date': `2015-12-25`, 'selected-to-date': `2016-01-16`, } ) +sub-section(`mp-date-range-picker`, true) .calendar-group code-tip.example mp-date-range-picker( attrs={ 'display-context': `default`, 'date-range': JSON.stringify($helpers.getDateRangeAttributes()), }, on={ 'changeDateRange': $helpers.updateDateRange }, ) +section(`Charts`) +sub-section(`mp-pie-chart`, true) p.desc. A basic pie chart. Pie chart data is passed in via `chartData` prop. code-tip(attrs={'target-component': `mp-pie-chart`}).example mp-pie-chart( props={ 'chartData': [ { 'name': `funnels query`, 'value': 434861, }, { 'name': `insights query`, 'value': 424843, }, { 'name': `segmentation query`, 'value': 325916, }, { 'name': `$opt_in`, 'value': 287461, }, { 'name': `other`, 'value': 202736, }, { 'name': `updated selected dashboard`, 'value': 92863, } ], } attrs={ 'tooltip-show-label': true, 'tooltip-show-percentage': true, 'tooltip-show-value': true, } ) +section(`Bookmarks Widget`) +sub-section(`mp-bookmarks-widget`, true) p.desc A drop menu that accomodates search, browse, removal, and creation of bookmarked reports. code-tip.example mp-bookmarks-widget( attrs={ 'bookmarks': JSON.stringify(bookmarks), 'create-disabled': false, 'saving': savingBookmark, 'selected-bookmark-id': selectedBookmarkId, 'user-id': 1, 'has-write-permissions': true, } on={ change: $helpers.handleBookmarksMenuChange, submit: $helpers.handleBookmarksMenuSubmit, } ) code-tip.example mp-bookmarks-widget( attrs={ 'bookmarks': JSON.stringify(bookmarks), 'create-disabled': false, 'saving': savingBookmark, 'selected-bookmark-id': selectedBookmarkId, 'user-id': 1, 'has-write-permissions': true, 'over-free-limit': true, } on={ change: $helpers.handleBookmarksMenuChange, submit: $helpers.handleBookmarksMenuSubmit, } ) +section(`Dashboard Selector`) +sub-section(`mp-dashboard-selector`, true) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: ev => $helpers.openModal(`dashboardSelector`)} ) =`Open dashboard selector` mp-dashboard-selector( attrs={open: open.dashboardSelector} on={ select: $helpers.handleDashboardSelectorSelect, menuchange: ev => $helpers.handleMenuChange(`dashboardSelector`, ev.detail.state), } props={controller: dashboardController} ) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: ev => $helpers.openModal(`dashboardMultiSelector`)} ) =`Open multiselect` mp-dashboard-selector( attrs={open: open.dashboardMultiSelector, multiselect: true} on={ multiselect: $helpers.handleDashboardSelectorMultiselect, menuchange: ev => $helpers.handleMenuChange(`dashboardMultiSelector`, ev.detail.state), } props={controller: dashboardController} ) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: ev => $helpers.openModal(`restrictedDashboardMultiSelector`)} ) =`Open permission-restricted` mp-dashboard-selector( attrs={ open: open.restrictedDashboardMultiSelector, 'disable-deselect-public': true, multiselect: true, } on={ multiselect: $helpers.handleDashboardSelectorMultiselect, menuchange: ev => $helpers.handleMenuChange(`restrictedDashboardMultiSelector`, ev.detail.state), } props={controller: dashboardController} ) code-tip.example mp-button( attrs={size: `small`, color: `grey`} on={click: ev => $helpers.openModal(`restrictCreatingDashboard`)} ) =`Open create dashboard disabled` mp-dashboard-selector( attrs={ open: open.restrictCreatingDashboard, 'disable-create-dashboard': true, multiselect: false, } on={ select: $helpers.handleDashboardSelectorSelect, menuchange: ev => $helpers.handleMenuChange(`restrictCreatingDashboard`, ev.detail.state), } props={controller: dashboardController} ) +section(`Smart Hub`) +sub-section(`mp-smart-hub-data-point`, true) p.desc For displaying alerts surfaced by our machine learning endpoints, used in reports and as smarthub global. each alertsData in $helpers.getAlertsByType() p= `mp-smart-hub-data-point ${alertsData.type}` .smart-hub-data-points each alert, index in alertsData.alerts code-tip.example mp-smart-hub-data-point( attrs={ 'placement': [`top`, `bottom`, `left`, `right`][index % 4], 'project-id': 3, 'alert': JSON.stringify(alert), } on={ change: $helpers.handleSmartHubDataPointChange, } ) +sub-section(`mp-smart-hub-dropdown`, true) code-tip.example svg-icon( attrs={icon: `hubs-notif`} on={click: $helpers.toggleSmartHubDropdown} ) mp-smart-hub-dropdown( attrs={ 'open': open.smartHubDropdown, 'placement': `left`, 'project-id': 3, 'with-caret': true, 'caret-pos-left': `13%`, } on={change: $helpers.handleSmartHubDropdownChange} hook={insert: vnode => $helpers.handleSmartHubDropdownInsert(vnode.elm)} ) +section(`Data Group Selector`) +sub-section(`mp-data-group-selector`, true) code-tip.example.block mp-data-group-selector( attrs={ 'project-id': 3, 'selected-data-group-id': dataGroupID, } on={selectDataGroup: $helpers.selectDataGroup} props={dataGroups: $helpers.getDataGroups()} ) +section(`Custom Event Modal`) +sub-section(`mp-custom-event-modal`, true) p.desc | Custom event modal allows a user to add/edit/delete a custom event. #[br] | NOTE: There is a bug that puts the modal at top of the page rather than top of the viewport. code-tip.example .editable-custom-event span.custom-event-icon svg-icon(attrs={icon: `custom-events`}) span.edit-label= customEvent.name span.edit-custom-event-icon(on={click: $helpers.clickEditCustomEvent}) svg-icon(attrs={icon: `edit`}) mp-custom-event-tooltip( attrs={'custom-event-id': customEvent.id} props={customEvents: $helpers.getEvents().filter(ev => ev.custom)} ) mp-button( attrs={size: `small`, color: `grey`, icon: `plus`} on={click: $helpers.createNewCustomEvent} ) Custom Event mp-custom-event-modal( attrs=$helpers.filterAttributes({ 'events': JSON.stringify($helpers.getEvents()), 'is-blocked-people': false, 'open': !!stagedCustomEvent, 'project-has-people': true, 'project-id': 4, 'selected-custom-event-id': stagedCustomEvent && stagedCustomEvent.id, }) on={ modalClosed: $helpers.customEventsModalClosed, cancelEditingCustomEvent: $helpers.customEventsModalClosed, deletedCustomEvent: $helpers.customEventsModalClosed, savedCustomEvent: $helpers.savedCustomEvent, } ) auto-doc(attrs={component: `mp-custom-event-tooltip`})