@mycause/ui 0.0.0-ce837d6b → 0.0.0-cf96d552

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,103 +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, 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>
-        {action ? (<div>
-            <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>
-          </div>) : null}
-      </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;
-        }
-
-        @media (min-width: 720px) {
-          .side-submenu {
-            display: initial;
-          }
-
-          .inline-submenu {
-            display: none;
-          }
-        }
-      `}</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;

package/dist/components/navigation/navigation-sign-in-control.jsx

@@ -1,14 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { Button } from "../button";
-import { IconButton, Icon } from "../icon";
-function NavigationSignInControl({ analyticsId, onRequestSignIn, compact, className, ...rest }) {
-    return (<div className={classnames("sign-in-control", className)} {...rest}>
-      {!compact ? (<Button analyticsId={analyticsId} className="sign-in-button" color="neutral" icon={<Icon icon="perm_identity" color="accent"/>} onClick={() => onRequestSignIn()} display>
-          Login
-        </Button>) : (<IconButton id={analyticsId} title="Sign in" color="accent" onClick={() => onRequestSignIn()}>
-          <Icon icon="perm_identity"/>
-        </IconButton>)}
-    </div>);
-}
-export default NavigationSignInControl;

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

@@ -1,36 +0,0 @@
-import React, { Fragment, useState } from "react";
-import Icon from "../icon/icon";
-import { MenuListItem, MenuListItemText, MenuListItemGraphic, MenuListItemMeta, } from "../menu";
-function NavigationUserMenuItem({ icon, label, onClick, submenu, isSubmenuOpen, ...rest }) {
-    return (<Fragment>
-      <MenuListItem onClick={onClick} {...rest}>
-        <MenuListItemGraphic graphic={<Icon color="primary" {...icon}/>}/>
-        <MenuListItemText primaryText={label}/>
-        {submenu ? (<MenuListItemMeta meta={<Icon color="primary" icon={isSubmenuOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}/>}/>) : null}
-      </MenuListItem>
-      {submenu && isSubmenuOpen
-        ? submenu.map(subItem => (<MenuListItem key={subItem.id || subItem.href} {...subItem}>
-              <MenuListItemText primaryText={subItem.label} className="icon-submenu"/>
-            </MenuListItem>))
-        : null}
-    </Fragment>);
-}
-function NavigationUserMenuItems({ items }) {
-    // To keep track of which submenu (if any) is open at any time
-    // There can be only one open at a time
-    const [activeSubmenu, setActiveSubmenu] = useState(-1);
-    const handleClick = (index, item) => {
-        if (item.submenu) {
-            setActiveSubmenu(activeSubmenu === index ? -1 : index);
-        }
-        else if (item.onClick) {
-            item.onClick();
-        }
-    };
-    return (<Fragment>
-      {items.map((item, i) => {
-        return (<NavigationUserMenuItem key={item.id || item.href || i} id={item.id || item.href} isSubmenuOpen={item.submenu && activeSubmenu === i} {...item} onClick={() => handleClick(i, item)}/>);
-    })}
-    </Fragment>);
-}
-export default NavigationUserMenuItems;

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

@@ -1,121 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-import useMedia from "use-media";
-import Avatar from "../avatar/avatar";
-import { useTheme } from "../../theme/theme";
-import { MenuList, MenuListItem, MenuListItemText } from "../menu";
-import NavigationUserMenuItems from "./navigation-user-menu-items";
-function NavigationUserMenu({ user, items, isOpen, onChangeOpen, }) {
-    const theme = useTheme();
-    // Allow users with pointing devices to open/close the menu by hovering in/out
-    const [isHovered, bind] = useHover();
-    useEffect(() => {
-        onChangeOpen(isHovered);
-    }, [onChangeOpen, isHovered]);
-    return (<div className={classnames("menu-anchor", {
-        compact: useMedia("screen and (max-width: 425px)"),
-    })} {...bind()}>
-      <div className={classnames("menu-trigger", { open: isOpen })}>
-        <Avatar name={user.name} src={user.avatar ? user.avatar.src : undefined} onClick={() => onChangeOpen(!isOpen)}/>
-      </div>
-      {items && isOpen && (<div className="user-menu">
-          <MenuList>
-            <MenuListItem>
-              <MenuListItemText primaryText={<strong>Hello {user.name}!</strong>}/>
-            </MenuListItem>
-            <NavigationUserMenuItems items={items}/>
-          </MenuList>
-        </div>)}
-      <style jsx>{`
-        .menu-trigger {
-          cursor: pointer;
-          width: 3rem;
-          height: 3rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 0.25rem;
-        }
-
-        .open {
-          background-color: #efefef;
-        }
-
-        .menu-anchor {
-          position: relative;
-          overflow: visible;
-        }
-
-        .menu-anchor.compact {
-          position: initial;
-        }
-
-        .user-menu {
-          position: absolute;
-          z-index: 1;
-          top: 100%;
-          right: 0;
-          background-color: white;
-          border-radius: 0.25rem;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
-            0 1px 4px rgba(0, 0, 0, 0.24);
-          overflow-x: scroll;
-          max-height: calc(100vh - 64px);
-        }
-
-        /* arrow */
-        .user-menu::before {
-          display: block;
-          content: "";
-          width: 0;
-          height: 0;
-          border-left: 8px solid transparent;
-          border-right: 8px solid transparent;
-          border-bottom: 8px solid white;
-          position: absolute;
-          top: -8px;
-          right: calc((3rem / 2) - 8px);
-        }
-
-        .compact .user-menu {
-          left: 8px;
-          right: 8px;
-          top: 3.5rem;
-        }
-
-        .compact .user-menu::before {
-          right: calc((3rem / 2) - 8px + 4.5rem);
-        }
-
-        .user-menu :global(.mdc-list-item__graphic) {
-          margin-right: 1rem;
-        }
-
-        .user-menu :global(.mdc-list-item:not(:last-of-type)) {
-          border-bottom: 1px solid #e0e0e0;
-        }
-      `}</style>
-      <style jsx>{`
-        .user-menu :global(.mdc-list) {
-          font-family: ${theme.typography.fontFamily.brand};
-        }
-
-        strong {
-          color: ${theme.color.foreground.primary};
-        }
-      `}</style>
-    </div>);
-}
-export default NavigationUserMenu;
-function useHover() {
-    const [isHovered, setIsHovered] = useState();
-    const bind = () => ({
-        onMouseOver: () => {
-            setIsHovered(true);
-        },
-        onMouseLeave: () => {
-            setIsHovered(false);
-        },
-    });
-    return [isHovered, bind];
-}