@mycause/ui 0.0.0-c7de8cef → 0.0.0-c7f1270a

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];
-}

package/dist/components/navigation/navigation.jsx

@@ -1,137 +0,0 @@
-import React, { useState } from "react";
-import useMedia from "use-media";
-import { WHITE } from "../../theme/colors";
-import Tabs from "../tabs/tabs";
-import NavigationMenu from "./navigation-menu";
-import NavigationBar from "./navigation-bar";
-import NavigationExpanded from "./navigation-expanded";
-import { Statistics } from "../statistics";
-import NavigationActions from "./navigation-actions";
-import NavigationSearch from "./navigation-search";
-import NavigationSearchControl from "./navigation-search-control";
-import NavigationSignInControl from "./navigation-sign-in-control";
-import NavigationCallToAction from "./navigation-call-to-action";
-import NavigationMenuControl from "./navigation-menu-control";
-import NavigationUserMenu from "./navigation-user-menu";
-function Navigation({ logo, menus, links, stats, cta, user, userMenu, search, login, isSticky, isCompactHeight, }) {
-    const [isSearchOpen, setSearchOpen] = useState(false);
-    const [isUserMenuOpen, setUserMenuOpen] = useState();
-    const [query, setQuery] = useState("");
-    const [active, setActive] = useState([null, null]);
-    const isCompact = useMedia("screen and (max-width: 720px)");
-    const isMedium = useMedia("screen and (max-width: 960px)");
-    const menu = active[0] && menus ? menus.find(menu => menu.id === active[0]) : null;
-    const submenu = active[1]
-        ? menu.items.find(item => "id" in item && item.id === active[1]) &&
-            menu.items.find(item => "id" in item && item.id === active[1]).submenu
-        : null;
-    const handleChangeMenuOpen = (isOpen) => {
-        if (isOpen) {
-            setActive(replace(active, 0, menus[0].id));
-        }
-        else {
-            setActive([null, null]);
-        }
-    };
-    return (<nav className="navigation">
-      <NavigationBar isCompactHeight={isCompactHeight}>
-        {!(isCompact && isSearchOpen) ? (<div className="logo-wrap">{logo}</div>) : null}
-        {isSearchOpen && search ? (<>
-            <NavigationSearch value={query} onChange={setQuery} onSubmit={() => search.onSearch(query)} onCancel={() => setSearchOpen(false)}/>
-          </>) : (<>
-            <div className="desktop-tabs">
-              <Tabs tabs={menus
-        ? menus.map(item => ({
-            key: item.id,
-            label: item.label,
-            analyticsId: item.analyticsId,
-        }))
-        : []} active={active[0]} isCompactHeight={isCompactHeight} onActiveUpdate={id => setActive(replace(active, 0, id))} isMinWidth isMinWidthIndicator large/>
-            </div>
-            <NavigationActions>
-              {search && (<NavigationSearchControl onChangeSearchOpen={setSearchOpen} analyticsId={search.analyticsId}/>)}
-              {user ? (<NavigationUserMenu user={user} items={userMenu} isOpen={isUserMenuOpen} onChangeOpen={setUserMenuOpen} isCompact={isCompact}/>) : (login && (<NavigationSignInControl compact={isCompact} onRequestSignIn={login.onLogin} analyticsId={login.analyticsId}/>))}
-              {!isMedium && cta ? <NavigationCallToAction {...cta}/> : null}
-              {isMedium && menus ? (<NavigationMenuControl isMenuOpen={!!menu} onChangeMenuOpen={handleChangeMenuOpen}/>) : null}
-            </NavigationActions>
-          </>)}
-      </NavigationBar>
-      {menu ? (<NavigationExpanded links={links} onRequestClose={() => setActive([null, null])} className="navigation-float" banner={stats ? (<Statistics stats={stats} title="We support your cause"/>) : null}>
-          <div className="mobile-tabs">
-            <Tabs tabs={menus
-        ? menus.map(item => ({ key: item.id, label: item.label }))
-        : []} active={active[0]} onActiveUpdate={id => setActive(replace(active, 0, id))}/>
-          </div>
-          <NavigationMenu key={menu.id} links={menu.items.map(item => ({
-        ...item,
-        more: !!item.submenu,
-    }))} sublinks={submenu || null} action={menu.action || null} actionRaised={menu.actionRaised || null} active={active[1]} onClickItem={id => setActive(() => {
-        if (active[1])
-            return [active[0], null];
-        else
-            return replace(active, 1, id);
-    })}/>
-        </NavigationExpanded>) : null}
-      <style jsx>{`
-        .navigation {
-          background-color: ${WHITE};
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
-            0 1px 4px rgba(0, 0, 0, 0.24);
-          top: 0;
-          z-index: 10;
-          position: ${isSticky ? "fixed" : "relative"};
-          width: 100%;
-        }
-
-        .logo-wrap {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 1rem;
-        }
-
-        .desktop-tabs {
-          margin-left: 1rem;
-          display: none;
-        }
-
-        .mobile-tabs {
-          margin: 0 -1rem;
-        }
-
-        .navigation :global(.navigation-float) {
-          position: absolute;
-          top: 100%;
-          left: 0;
-          right: 0;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
-            0 1px 4px rgba(0, 0, 0, 0.24);
-        }
-
-        @media (min-width: 960px) {
-          .navigation {
-            position: relative;
-          }
-
-          .mobile-tabs {
-            display: none;
-          }
-
-          .desktop-tabs {
-            display: block;
-          }
-        }
-      `}</style>
-    </nav>);
-}
-function replace(arr, x, val) {
-    return arr.map((item, i) => {
-        if (i === x)
-            return val;
-        if (x > 0)
-            return item;
-        else
-            return null;
-    });
-}
-export default Navigation;

package/dist/components/navigation/navigation.stories.jsx

@@ -1,270 +0,0 @@
-import React, { useState } from "react";
-import { action } from "@storybook/addon-actions";
-import useMedia from "use-media";
-import { LogoType } from "../logo";
-import Navigation from "./navigation";
-import NavigationList from "./navigation-list";
-import NavigationMenu from "./navigation-menu";
-import NavigationExpanded from "./navigation-expanded";
-import NavigationSearch from "./navigation-search";
-import avatar from "../avatar/ipet-photo-CfDAo3C3bvQ-unsplash.jpg";
-import circle from "../statistics/circle.svg";
-function Logo() {
-    return (<LogoType size={useMedia("screen and (min-width: 720px") ? "large" : undefined}/>);
-}
-function BackgroundContainer({ children }) {
-    return (<div className="container">
-      <div className="content">{children}</div>
-      <style jsx>{`
-        .container {
-          min-height: 100vh;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .content {
-          width: 100%;
-          max-width: 1024px;
-          padding: 2rem 1rem;
-          background-color: rgba(0, 0, 0, 0.01);
-        }
-
-        @media (min-width: 720px) {
-          .content {
-            padding: 4rem;
-          }
-        }
-      `}</style>
-    </div>);
-}
-export default {
-    title: "Navigation",
-};
-function NavigationSearchDemo() {
-    const [value, setValue] = useState("");
-    return (<NavigationSearch value={value} onChange={setValue} onSubmit={action("search")} onCancel={action("cancel")}/>);
-}
-function NavigationDemo() {
-    const [isSignedIn, setSignedIn] = useState(false);
-    return (<Navigation logo={<Logo />} isSticky={true} menus={[
-        {
-            label: "Fundraise",
-            id: "fundraise",
-            analyticsId: "fundraise",
-            items: [
-                { label: "For a person", id: "person", analyticsId: "person" },
-                { label: "For a charity", id: "charity" },
-                { label: "Find a charity", id: "find_charity" },
-                {
-                    label: "Fundraising ideas",
-                    id: "fundraising_ideas",
-                    submenu: [
-                        { label: "Schools", id: "schools" },
-                        { label: "Cancer", id: "cancer" },
-                        { label: "Pets & animals", id: "pets_animals" },
-                        { label: "Help a friend", id: "help_friend" },
-                        { label: "Marathon runs", id: "marathon" },
-                        { label: "See all fundraising ideas", id: "see all" },
-                    ],
-                },
-                { label: "Team fundraising", id: "team_fundraising" },
-                { label: "How it works", id: "how_it_works" },
-            ],
-            actionRaised: {
-                label: "Are you a charity? Learn More",
-                id: "expandedRedirect",
-                analyticsId: "expandedRedirect",
-            },
-        },
-        {
-            label: "Donate",
-            id: "donate",
-            analyticsId: "donate",
-            items: [
-                { label: "Donate to a charity", id: "donate" },
-                { label: "Send a gift card/voucher", id: "gift_card" },
-                { label: "Pledge your birthday", id: "birthday" },
-                { label: "Start a giving portfolio", id: "giving_portfolio" },
-            ],
-            actionRaised: {
-                label: "Are you a charity? Learn More",
-                id: "expandedRedirect",
-                analyticsId: "expandedRedirect",
-            },
-        },
-        {
-            label: "Organisation",
-            id: "organisation",
-            analyticsId: "organisation",
-            items: [
-                {
-                    label: "For your organisation",
-                    id: "organisation",
-                    submenu: [
-                        { label: "Schools", id: "schools" },
-                        { label: "Clubs", id: "clubs" },
-                        { label: "Charity", id: "charity" },
-                        { label: "Event manager", id: "event_manager" },
-                        { label: "Corporate", id: "corporate" },
-                    ],
-                },
-                { label: "Fundraising events", id: "events" },
-                { label: "Donating services", id: "donating_services" },
-                { label: "Giving days", id: "giving_days" },
-                { label: "Crowdfunding & appeals", id: "crowdfunding" },
-                { label: "Peer 2 peer fundraising", id: "peer_fundraising" },
-            ],
-            action: {
-                label: "Become a partner (free)",
-                id: "become_a_partner",
-                analyticsId: "becomeAPartner",
-            },
-        },
-    ]} links={[
-        { label: "About", id: "about" },
-        { label: "Help", id: "help" },
-        { label: "Blog & Press", id: "blog-press" },
-    ]} stats={[
-        {
-            label: "Members",
-            id: "nav-expand-members",
-            value: "302, 657",
-            logo: circle,
-        },
-        {
-            label: "Causes",
-            id: "nav-expand-causes",
-            value: "68, 553",
-            logo: circle,
-        },
-        {
-            label: "Raised",
-            id: "nav-expand-raised",
-            value: "$100 Million +",
-            logo: circle,
-        },
-    ]} cta={{
-        color: "primary",
-        onClick: action("onClick"),
-        children: "Start fundraising",
-        analyticsId: "startFundraising",
-    }} user={isSignedIn
-        ? {
-            name: "Adorable Puppy",
-            avatar: {
-                src: avatar,
-            },
-        }
-        : null} search={{ onSearch: action("search") }} login={{ onLogin: () => setSignedIn(true) }} userMenu={[
-        {
-            icon: { icon: "perm_identity" },
-            label: "My dashboard",
-            onClick: action("dashboard"),
-        },
-        {
-            icon: { icon: "favorite_border" },
-            label: "Activity",
-            onClick: action("activity"),
-            submenu: [
-                {
-                    label: "Fundraising pages",
-                },
-                {
-                    label: "Favourite charities",
-                },
-            ],
-        },
-        {
-            icon: { icon: "favorite_border" },
-            label: "My campaigns",
-            onClick: action("my campaigns"),
-        },
-        {
-            icon: { icon: "settings", iconSet: "material-icons-outlined" },
-            label: "Account settings",
-            onClick: action("settings"),
-            submenu: [
-                {
-                    label: "Profile",
-                },
-                {
-                    label: "Manage Connections",
-                },
-            ],
-        },
-        {
-            icon: { icon: "exit_to_app" },
-            label: "Sign out",
-            onClick: () => setSignedIn(false),
-        },
-    ]}/>);
-}
-export const full = () => <NavigationDemo />;
-full.story = {
-    name: "full navigation",
-};
-export const list = () => (<BackgroundContainer>
-    <NavigationList items={[
-    { label: "Schools", id: "schools" },
-    { label: "Cancer", id: "cancer" },
-    { label: "Pets & animals", id: "pets_animals" },
-    { label: "Help a friend", id: "help_friend" },
-    { label: "Marathon runs", id: "marathon" },
-    { label: "See all fundraising ideas", id: "see all" },
-].map(item => ({ ...item, onClick: () => action("click")(item.id) }))}/>
-  </BackgroundContainer>);
-list.story = {
-    name: "navigation list",
-};
-export const listLarge = () => (<BackgroundContainer>
-    <NavigationList size="large" items={[
-    { label: "Schools", id: "schools" },
-    { label: "Cancer", id: "cancer" },
-    { label: "Pets & animals", id: "pets_animals" },
-    { label: "Help a friend", id: "help_friend" },
-    { label: "Marathon runs", id: "marathon" },
-    { label: "See all fundraising ideas", id: "see all" },
-].map(item => ({ ...item, onClick: () => action("click")(item.id) }))}/>
-  </BackgroundContainer>);
-listLarge.story = {
-    name: "navigation list (large)",
-};
-export const menu = () => (<BackgroundContainer>
-    <NavigationMenu links={[
-    { label: "For a person", id: "person" },
-    { label: "For a charity", id: "charity" },
-    { label: "Find a charity", id: "find_charity" },
-    { label: "Fundraising ideas", id: "fundraising_ideas", more: true },
-    { label: "Team fundraising", id: "team_fundraising" },
-    { label: "How it works", id: "how_it_works" },
-].map(link => ({ ...link, onClick: () => action("click")(link.id) }))} sublinks={[
-    { label: "Schools", id: "schools" },
-    { label: "Cancer", id: "cancer" },
-    { label: "Pets & animals", id: "pets_animals" },
-    { label: "Help a friend", id: "help_friend" },
-    { label: "Marathon runs", id: "marathon" },
-    { label: "See all fundraising ideas", id: "see all" },
-].map(link => ({ ...link, onClick: () => action("click")(link.id) }))} action={{
-    label: "Start fundraising",
-    id: "start_fundraising",
-    onClick: () => action("click")("start_fundraising"),
-}} active="fundraising_ideas" onClickItem={action("click")}/>
-  </BackgroundContainer>);
-menu.story = {
-    name: "navigation menu",
-};
-export const expanded = () => (<NavigationExpanded links={[
-    { label: "About", id: "about" },
-    { label: "Help", id: "help" },
-    { label: "Blog & Press", id: "blog-press" },
-].map(link => ({ ...link, onClick: () => action("click")(link.id) }))} onRequestClose={() => { }}/>);
-expanded.story = {
-    name: "navigation expanded",
-};
-export const search = () => (<BackgroundContainer>
-    <NavigationSearchDemo />
-  </BackgroundContainer>);
-search.story = {
-    name: "navigation search",
-};

package/dist/components/phone-number-field/index.d.ts

@@ -1,2 +0,0 @@
-export { default as PhoneNumberField } from "./phone-number-field";
-export * from "./util";

package/dist/components/phone-number-field/index.js

@@ -1,2 +0,0 @@
-export { default as PhoneNumberField } from "./phone-number-field";
-export * from "./util";

package/dist/components/phone-number-field/phone-number-field.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-import { CountryCode } from "libphonenumber-js";
-declare type PhoneNumberFieldProps = {
-    values: {
-        number: string;
-        countryCallingCode: string;
-        country: string;
-    };
-    names?: {
-        number: string;
-        countryCallingCode: string;
-        country: string;
-    };
-    onChange: (value: string, name: string) => void;
-    label?: React.ReactNode;
-    error?: string | null;
-    onBlur?: (e: React.FocusEvent) => void;
-    helperText?: React.ReactNode;
-    required?: boolean;
-    defaultCountry?: CountryCode;
-};
-declare function PhoneNumberField({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, }: PhoneNumberFieldProps): JSX.Element;
-export default PhoneNumberField;

package/dist/components/phone-number-field/phone-number-field.jsx

@@ -1,50 +0,0 @@
-import React from "react";
-import countries from "i18n-iso-countries";
-import en from "i18n-iso-countries/langs/en.json";
-import { AsYouType } from "libphonenumber-js";
-import { FieldLabel, FieldHelperText } from "../field-helpers";
-import { ComboField, ComboFieldExpander } from "../combo-field";
-import { Box } from "../layout";
-import { Select } from "../select";
-import { TextField } from "../text-field";
-countries.registerLocale(en);
-const COUNTRY_CODES = Object.keys(countries.getAlpha2Codes()).sort();
-function PhoneNumberField({ onChange, values, names = {
-    number: "number",
-    countryCallingCode: "countryCallingCode",
-    country: "country",
-}, error, onBlur, helperText, label, required, defaultCountry = "AU", }) {
-    const format = (text, c) => {
-        const typer = new AsYouType(c || defaultCountry);
-        const formatted = typer.input(text);
-        let result = typer.getNumber();
-        if (result && result.isValid()) {
-            // When the user has typed in a full valid number,
-            // emit the country calling code and set the country explicitly
-            onChange(result.country, names.country);
-            onChange(result.format("NATIONAL"), names.number);
-            onChange(result.countryCallingCode, names.countryCallingCode);
-        }
-        else {
-            onChange(formatted, names.number);
-        }
-    };
-    const handleCountryChange = (e) => {
-        onChange(e.target.value || "", names.country);
-        format(values.number, e.target.value);
-    };
-    const handleTextChange = (e) => {
-        format(e.target.value, values.country);
-    };
-    return (<Box>
-      {label ? <FieldLabel required={required}>{label}</FieldLabel> : null}
-      <ComboField>
-        <Select options={COUNTRY_CODES} value={values.country} onChange={handleCountryChange} noArrow onBlur={onBlur} required={required}/>
-        <ComboFieldExpander>
-          <TextField type="tel" value={values.number} onChange={handleTextChange} name={names.number} onBlur={onBlur} error={!!error} required={required}/>
-        </ComboFieldExpander>
-      </ComboField>
-      {helperText ? (<FieldHelperText error={error}>{helperText}</FieldHelperText>) : null}
-    </Box>);
-}
-export default PhoneNumberField;