@mycause/ui 0.0.0-c7de8cef → 0.0.0-c7f1270a

package/dist/components/modal/modal.jsx

@@ -1,49 +0,0 @@
-import React, { Fragment } from "react";
-import Dialog, { DialogContent, DialogFooter } from "@material/react-dialog";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { useTheme, getColorToken } from "../../theme/theme";
-import { IconButton, Icon } from "../icon";
-import { Button } from "../button";
-import { Stack } from "../layout";
-const Modal = ({ id, isOpen, toggleModal, modalContent, modalTitle, onAccept, setWidth, buttonAlign = "right", buttonColor = "primary", noCancelButton, noCloseButton, acceptText = "Accept", cancelText = "Cancel", minimal, }) => {
-    const theme = useTheme();
-    const setColorButton = getColorToken(theme, "foreground", buttonColor);
-    const scope = css.resolve `
-    :global(.${id} > .mdc-dialog__container) {
-      width: ${setWidth && "100% !important"};
-    }
-    :global(.${id} > .mdc-dialog__container > .mdc-dialog__surface) {
-      width: ${setWidth && "100% !important"};
-      max-width: ${setWidth} !important;
-    }
-    .modal-footer {
-      justify-content: ${buttonAlign} !important;
-    }
-  `;
-    return (<Fragment>
-      <Dialog open={isOpen} className={id} onClose={() => toggleModal(false)}>
-        {!minimal ? (<Stack>
-            {modalTitle && (<div style={{ flexGrow: 1, padding: "20px 0px 24px 24px" }}>
-                {modalTitle}
-              </div>)}
-            <div>
-              {!noCancelButton && (<IconButton onClick={() => toggleModal(false)}>
-                  <Icon icon="close"/>
-                </IconButton>)}
-            </div>
-          </Stack>) : (<></>)}
-        <DialogContent>{modalContent}</DialogContent>
-        {!minimal ? (<DialogFooter className={classnames("modal-footer ", scope.className)}>
-            {!noCloseButton && (<Button color={{ foreground: setColorButton, background: "#ffffff" }} onClick={() => toggleModal(false)} outlined={true}>
-                {cancelText}
-              </Button>)}
-            {onAccept && (<Button onClick={onAccept} color={{ foreground: setColorButton, background: "#ffffff" }} outlined={true} style={{ marginLeft: "10px" }}>
-                {acceptText}
-              </Button>)}
-          </DialogFooter>) : (<></>)}
-      </Dialog>
-      {scope.styles}
-    </Fragment>);
-};
-export default Modal;

package/dist/components/modal/modal.stories.jsx

@@ -1,59 +0,0 @@
-import React, { useState, Fragment } from "react";
-import Modal from "./modal";
-import CenterDecorator from "../../utils/center-decorator";
-import { Button } from "../button";
-export default {
-    title: "Modal",
-    decorators: [CenterDecorator],
-};
-export const ModalStoriesDefault = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (<Fragment>
-      <Button onClick={() => setIsOpen(true)} outlined={true}>
-        Toggle Default Modal
-      </Button>
-      <Modal isOpen={isOpen} toggleModal={setIsOpen} modalContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud " modalTitle="My Modal" id="mainModal"/>
-    </Fragment>);
-};
-ModalStoriesDefault.story = {
-    name: "default",
-};
-export const ModalStoriesWithActoin = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (<Fragment>
-      <Button onClick={() => setIsOpen(true)} outlined={true}>
-        Toggle With Action Modal
-      </Button>
-      <Modal isOpen={isOpen} toggleModal={setIsOpen} modalContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud " modalTitle="My Modal" id="mainModal" onAccept={() => {
-        console.log("function was triggered");
-        setIsOpen(false);
-    }}/>
-    </Fragment>);
-};
-ModalStoriesWithActoin.story = {
-    name: "with action",
-};
-export const ModalStoriesNoButtons = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (<Fragment>
-      <Button onClick={() => setIsOpen(true)} outlined={true}>
-        Toggle No Buttons Modal
-      </Button>
-      <Modal isOpen={isOpen} toggleModal={setIsOpen} modalContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud " modalTitle="My Modal" id="mainModal" noCloseButton={true}/>
-    </Fragment>);
-};
-ModalStoriesNoButtons.story = {
-    name: "no buttons",
-};
-export const ModalStoriesMinimal = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (<Fragment>
-      <Button onClick={() => setIsOpen(true)} outlined={true}>
-        Toggle Minimal Modal
-      </Button>
-      <Modal minimal={true} isOpen={isOpen} toggleModal={setIsOpen} modalContent="Lorem ipsum dolor sit amet." id="mainModal"/>
-    </Fragment>);
-};
-ModalStoriesMinimal.story = {
-    name: "minimal",
-};

package/dist/components/navigation/index.js

@@ -1 +0,0 @@
-export { default as Navigation } from "./navigation";

package/dist/components/navigation/navigation-actions.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { Stack } from "../layout";
-function NavigationActions({ children }) {
-    return (<Stack gap="0.5rem" justify="end" align="center">
-      {children}
-    </Stack>);
-}
-export default NavigationActions;

package/dist/components/navigation/navigation-bar.jsx

@@ -1,42 +0,0 @@
-import React from "react";
-function NavigationBar({ isCompactHeight, children }) {
-    return (<div className="navigation-bar">
-      <div className="container">{children}</div>
-      <style jsx>{`
-        .navigation-bar {
-          width: 100%;
-        }
-
-        .container {
-          display: flex;
-          align-items: stretch;
-          max-width: 1024px;
-          padding: 0 1rem;
-          margin: 0 auto;
-          height: 4rem;
-        }
-
-        .container > :global(*:not(:last-child)) {
-          margin-right: 0.5rem;
-        }
-
-        .container > :global(*:last-child) {
-          flex-grow: 1;
-        }
-
-        @media (min-width: 720px) {
-          .container {
-            padding: 0 1rem;
-            margin: 0 auto;
-          }
-        }
-
-        @media (min-width: 960px) {
-          .container {
-            height: ${isCompactHeight ? "64px" : "6rem"};
-          }
-        }
-      `}</style>
-    </div>);
-}
-export default NavigationBar;

package/dist/components/navigation/navigation-call-to-action.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import Button from "../button/button";
-function NavigationCallToAction(props) {
-    return <Button raised display {...props}/>;
-}
-export default NavigationCallToAction;

package/dist/components/navigation/navigation-expanded.jsx

@@ -1,165 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { Icon } from "../icon";
-import IconButton from "../icon/icon-button";
-import { BACKGROUND_GREY, ON_BACKGROUND_GREY_GREY } from "../../theme/colors";
-import NavigationList from "./navigation-list";
-function NavigationExpanded({ links, children, onRequestClose, className, banner, }) {
-    return (<div className={classnames("navigation-menu", className)}>
-      <div className="content">
-        {children}
-        <div>
-          <hr />
-        </div>
-        <div className="columns">
-          <div className="navigation-list-container">
-            {links ? <NavigationList items={links}/> : null}
-          </div>
-          {banner ? <div className="banner">{banner}</div> : null}
-        </div>
-        <div className="close">
-          <IconButton className="close-button" onClick={onRequestClose}>
-            <Icon icon="close" size="100%" title="Close"/>
-          </IconButton>
-        </div>
-      </div>
-      <style jsx>{`
-        .navigation-menu {
-          background-color: ${BACKGROUND_GREY};
-        }
-
-        .navigation-list-container {
-          flex-grow: 1;
-        }
-
-        .content {
-          position: relative;
-          max-width: 1024px;
-          margin: 0 auto;
-          padding: 0rem 1rem 2rem 1rem;
-        }
-
-        .content > :global(*:not(:last-child)) {
-          margin-bottom: 1rem;
-        }
-
-        .content {
-          display: grid;
-          grid-gap: 1rem;
-        }
-
-        .content > :global(*:not(:last-child)) {
-          margin-bottom: initial;
-        }
-
-        .main-navigation {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .main-navigation > :global(*:not(:last-child)) {
-          margin-bottom: 2rem;
-        }
-
-        .main-navigation-menus {
-          display: flex;
-        }
-
-        .main-navigation-menus > :global(*:not(:last-child)) {
-          margin-right: 4rem;
-        }
-
-        .columns {
-          display: flex;
-          padding: 0;
-        }
-
-        .columns > :global(*:not(:last-child)) {
-          margin-right: 8rem;
-        }
-
-        .span-2 {
-          flex-grow: 1;
-        }
-
-        .columns > :global(:not:(:last-child)) {
-          margin-right: initial;
-        }
-
-        .span-2 {
-          grid-column-end: span 2;
-        }
-
-        .close {
-          display: none;
-        }
-
-        .navigation-menu :global(.close-button) {
-          padding: 6px !important;
-          font-size: 36px;
-        }
-
-        .banner {
-          display: none;
-        }
-
-        hr {
-          border: none;
-          border-top-style: solid;
-          border-top-width: 1px;
-          border-color: ${ON_BACKGROUND_GREY_GREY};
-          color: ${ON_BACKGROUND_GREY_GREY};
-          background-color: ${ON_BACKGROUND_GREY_GREY};
-          margin: 0;
-        }
-
-        @media (min-width: 720px) {
-          .content {
-            padding: 2rem;
-          }
-
-          .content > :global(*:not(:last-child)) {
-            margin-bottom: 1.5rem;
-          }
-
-          .content {
-            grid-gap: 1.5rem;
-          }
-
-          .columns {
-            display: flex;
-          }
-
-          .banner {
-            display: block;
-          }
-        }
-
-        @media (min-width: 960px) {
-          .content {
-            padding: 4rem;
-          }
-
-          .content > :global(*:not(:last-child)) {
-            margin-bottom: 3rem;
-          }
-
-          .content > :global(*:not(:last-child)) {
-            margin-bottom: 0;
-          }
-
-          .content {
-            grid-gap: 3rem;
-          }
-
-          .close {
-            display: block;
-            position: absolute;
-            top: 4rem;
-            right: 4rem;
-          }
-        }
-      `}</style>
-    </div>);
-}
-export default NavigationExpanded;

package/dist/components/navigation/navigation-list.jsx

@@ -1,126 +0,0 @@
-import React, { Fragment } from "react";
-import { BRAND_DARK_GREY, INACTIVE_GREY } from "../../theme/colors";
-import { BoldAnchor } from "../anchor/index";
-import { Icon } from "../icon/index";
-import { useTheme } from "../../theme/theme";
-function NavigationList({ items, onClickItem, active, size = "normal", }) {
-    const theme = useTheme();
-    return (<ul className={`size-${size}`}>
-      {items.map(item => {
-        const onClick = (e) => {
-            // href
-            if ("href" in item)
-                return;
-            e.preventDefault();
-            // combined handler
-            if (onClickItem)
-                onClickItem(item.id);
-            // individual handler
-            else if (item.onClick)
-                item.onClick();
-        };
-        const href = "href" in item ? item.href : "#";
-        const id = "id" in item ? item.id : null;
-        return (<Fragment key={"href" in item ? item.href : item.id}>
-            <li className="item">
-              <BoldAnchor analyticsId={item.analyticsId} href={href} onClick={onClick} active={id === active}>
-                {item.label}{" "}
-                {"id" in item && item.more ? (<span className="chevron">
-                    <span className="chevron-right">
-                      <Icon icon="chevron_right" size={size === "normal" ? "24px" : "36px"}/>
-                    </span>
-                    <span className="chevron-down">
-                      <Icon icon="expand_more" size={size === "normal" ? "16px" : "24px"}/>
-                    </span>
-                  </span>) : null}
-              </BoldAnchor>
-            </li>
-            {"children" in item ? item.children : null}
-          </Fragment>);
-    })}
-      <style jsx>{`
-        ul {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-        }
-
-        .item {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          font-family: ${theme.typography.fontFamily.brand};
-          color: ${BRAND_DARK_GREY};
-          font-weight: 500;
-        }
-
-        .size-large .item {
-          font-size: 1rem;
-          height: 2.5rem;
-        }
-
-        .size-normal .item {
-          font-size: 0.875rem;
-          height: 1.75rem;
-        }
-
-        .item :global(a:focus) {
-          outline: none;
-        }
-
-        .item:focus-within {
-          outline: -webkit-focus-ring-color auto 5px;
-        }
-
-        .chevron {
-          position: relative;
-          display: inline-block;
-          width: 1em;
-          height: 1em;
-          margin-left: 1rem;
-          vertical-align: middle;
-          line-height: 1;
-          transform: translateY(-5%);
-          color: ${INACTIVE_GREY};
-        }
-
-        .chevron-right {
-          display: none;
-        }
-
-        .item :global(a:hover) .chevron,
-        .item :global(a:focus) .chevron,
-        .item :global(a.active) .chevron {
-          color: inherit;
-        }
-
-        .chevron > :global(*) {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-
-        @media (min-width: 720px) {
-          .size-large .item {
-            font-size: 1.375rem;
-            min-height: 3rem;
-          }
-
-          .size-normal .item {
-            font-size: 1.125rem;
-            min-height: 2.5rem;
-          }
-
-          .chevron-right {
-            display: initial;
-          }
-
-          .chevron-down {
-            display: none;
-          }
-        }
-      `}</style>
-    </ul>);
-}
-export default NavigationList;

package/dist/components/navigation/navigation-menu-control.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { ON_BACKGROUND_GREY_GREY } from "../../theme/colors";
-import { ToggleButton, Icon } from "../icon";
-function NavigationMenuControl({ isMenuOpen, onChangeMenuOpen, className, ...rest }) {
-    return (<div className={classnames("menu-control", className)} {...rest}>
-      <ToggleButton active={<Icon icon="menu"/>} inactive={<Icon icon="close"></Icon>} value={isMenuOpen} onChange={onChangeMenuOpen}/>
-      <style jsx>{`
-        .menu-control {
-          display: flex;
-          align-items: center;
-        }
-
-        .menu-control::before {
-          content: "";
-          display: inline-block;
-          width: 1px;
-          height: 2rem;
-          border-left: 1px solid ${ON_BACKGROUND_GREY_GREY};
-          margin-right: calc(0.5rem - 1px);
-        }
-      `}</style>
-    </div>);
-}
-export default NavigationMenuControl;

package/dist/components/navigation/navigation-menu.jsx

@@ -1,126 +0,0 @@
-import React from "react";
-import Button from "../button/button";
-import { BACKGROUND_GREY, ON_BACKGROUND_GREY_GREY } from "../../theme/colors";
-import NavigationList from "./navigation-list";
-export function NavigationMenu({ links, sublinks, action, actionRaised, active, onClickItem, }) {
-    return (<div className="navigation-menu">
-      <div className="main-navigation">
-        <div className="main-navigation-menus">
-          <NavigationList items={links.map(link => ({
-        ...link,
-        children: sublinks && "id" in link && link.id === active ? (<div className="inline-submenu">
-                    <NavigationList items={sublinks} active={null}/>
-                  </div>) : null,
-    }))} onClickItem={onClickItem} active={active} size="large"/>
-          {sublinks ? (<div className="side-submenu">
-              <NavigationList items={sublinks} active={null}/>
-            </div>) : null}
-        </div>
-        <div>
-          {action ? (<Button display outlined color="primary" analyticsId={action.analyticsId} onClick={(e) => {
-        /**
-         * Prevent nav action button to turn into a hyperlink.
-         * This is so that google analytics will always be triggered.
-         * If we use a hyperlink instead of button clicks on the label
-         * wont be considered as a click on the hyperlink.
-         */
-        if ("href" in action)
-            window.location.href = action.href;
-        e.preventDefault();
-        if ("onClick" in action && action.onClick)
-            action.onClick();
-    }}>
-              {action.label}
-            </Button>) : null}
-          {actionRaised ? (<Button className="actionRaised-button" display outlined raised color="primary" analyticsId={actionRaised.analyticsId} onClick={(e) => {
-        /**
-         * Prevent nav actionRaised button to turn into a hyperlink.
-         * This is so that google analytics will always be triggered.
-         * If we use a hyperlink instead of button clicks on the label
-         * wont be considered as a click on the hyperlink.
-         */
-        if ("href" in actionRaised)
-            window.location.href = actionRaised.href;
-        e.preventDefault();
-        if ("onClick" in actionRaised && actionRaised.onClick)
-            actionRaised.onClick();
-    }}>
-              {actionRaised.label}
-            </Button>) : null}
-        </div>
-      </div>
-      <style jsx>{`
-        .navigation-menu {
-          background-color: ${BACKGROUND_GREY};
-        }
-
-        .side-submenu {
-          display: none;
-          padding-left: 3rem;
-          border-left: 1px solid ${ON_BACKGROUND_GREY_GREY};
-        }
-
-        .inline-submenu {
-          padding: 0 1rem 1rem 1rem;
-        }
-
-        .content {
-          position: relative;
-          max-width: 1024px;
-          margin: 0 auto;
-          padding: 4rem;
-        }
-
-        .content > :global(*:not(:last-child)) {
-          margin-bottom: 3rem;
-        }
-
-        @supports (display: grid) {
-          .content {
-            display: grid;
-            grid-gap: 3rem;
-          }
-
-          .content > :global(*:not(:last-child)) {
-            margin-bottom: initial;
-          }
-        }
-
-        .main-navigation {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .main-navigation > :global(*:not(:last-child)) {
-          margin-bottom: 2rem;
-        }
-
-        .main-navigation-menus {
-          display: flex;
-        }
-
-        .main-navigation-menus > :global(*:not(:last-child)) {
-          margin-right: 3rem;
-        }
-        :global(.actionRaised-button) {
-          float: right;
-        }
-        @media (min-width: 720px) {
-          .side-submenu {
-            display: initial;
-          }
-
-          .inline-submenu {
-            display: none;
-          }
-        }
-        @media (max-width: 579px) {
-          :global(.actionRaised-button) {
-            float: left !important;
-            margin-top: 15px;
-          }
-        }
-      `}</style>
-    </div>);
-}
-export default NavigationMenu;

package/dist/components/navigation/navigation-search-control.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { IconButton, Icon } from "../icon";
-function NavigationSearchControl({ onChangeSearchOpen, analyticsId, }) {
-    return (<IconButton id={analyticsId} onClick={() => onChangeSearchOpen(true)}>
-      <Icon icon="search"/>
-    </IconButton>);
-}
-export default NavigationSearchControl;

package/dist/components/navigation/navigation-search.jsx

@@ -1,63 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { TextField } from "../text-field";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import useMedia from "use-media";
-function NavigationSearch({ value, onChange, onSubmit, onCancel, }) {
-    // Focus the search bar when opened
-    const input = useRef(null);
-    useEffect(() => {
-        if (input.current) {
-            input.current.focus();
-        }
-    }, [input]);
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter") {
-            e.preventDefault();
-            onSubmit();
-        }
-    };
-    const handleChange = (e) => {
-        onChange(e.currentTarget.value);
-    };
-    const placeholder = "Try searching for a friend, campaign, or event";
-    const isMobile = useMedia("screen and (max-width: 719px)");
-    const isCompact = useMedia("screen and (max-width: 959px)");
-    return (<>
-      <div className="navigation-search">
-        {!isCompact ? (<TextField leadingIcon={<Icon icon="search"/>} trailingIcon={<Icon icon="close" title="close"/>} onTrailingIconSelect={() => onCancel()} onChange={handleChange} onKeyDown={handleKeyDown} value={value} placeholder={placeholder} ref={input} large/>) : (<>
-            <TextField leadingIcon={<Icon icon="search"/>} trailingIcon={value ? <Icon icon="cancel" title="clear"/> : undefined} onTrailingIconSelect={() => onChange("")} onChange={(e) => onChange(e.currentTarget.value)} onKeyDown={handleKeyDown} value={value} placeholder={!isMobile ? placeholder : "Search"} ref={input}/>
-            <div className="cancel">
-              <Button onClick={() => onCancel()}>Cancel</Button>
-            </div>
-          </>)}
-      </div>
-      <style jsx>{`
-        .navigation-search {
-          height: 100%;
-          width: 100%;
-          display: flex;
-          align-items: center;
-        }
-
-        .navigation-search > :global(*:first-child) {
-          flex-grow: 1;
-        }
-
-        .cancel {
-          margin-left: 0.5rem;
-        }
-
-        .cancel :global(.button) {
-          height: 3.5rem;
-        }
-
-        @media (min-width: 720px) {
-          .navigation-search {
-            padding: 0 1rem;
-          }
-        }
-      `}</style>
-    </>);
-}
-export default NavigationSearch;