@mycause/ui 0.0.0-cb5efc7a → 0.0.0-cba5b1d7

package/dist/components/list/list.stories.jsx

@@ -1,135 +0,0 @@
-import React from "react";
-import List from "./list";
-import CenterDecorator from "../../utils/center-decorator";
-import Icon from "../icon/icon";
-import charityImage from "./charity_icon.jpg";
-import logo from "./causes-icon.svg";
-export default {
-    title: "List",
-    decorators: [CenterDecorator],
-};
-export const ListDefaultStory = () => {
-    return (<List divider={true} items={[
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-    ]}/>);
-};
-ListDefaultStory.story = {
-    name: "default",
-};
-export const ListDisabledtStory = () => {
-    return (<List divider={true} items={[
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-            disabled: true,
-        },
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-            disabled: true,
-        },
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-            disabled: true,
-        },
-    ]}/>);
-};
-ListDisabledtStory.story = {
-    name: "disabled",
-};
-export const ListNoIconStory = () => {
-    return (<List divider={true} items={[
-        {
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-        {
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-        {
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-    ]}/>);
-};
-ListNoIconStory.story = {
-    name: "no icon",
-};
-export const ListNoDividerStory = () => {
-    return (<List items={[
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-        {
-            icon: { icon: <img src={logo}/> },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-        },
-    ]}/>);
-};
-ListNoDividerStory.story = {
-    name: "no dividers",
-};
-export const ListCustomStory = () => {
-    return (<List divider={true} itemHeight="10rem" fullWidth={true} centerText={true} iconsNotRounded={true} overflowHidden={true} items={[
-        {
-            icon: {
-                icon: (<img src={logo} style={{ height: "100px", width: "100px" }}/>),
-            },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-            subtext: "lorem ipsum",
-            subTextAlign: "right",
-            metaNoSpace: true,
-            meta: <Icon color="primary" icon={"keyboard_arrow_down"}/>,
-        },
-        {
-            icon: {
-                icon: <img src={logo} style={{ height: "60px", width: "60px" }}/>,
-            },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-            subTextAlign: "left",
-            subtext: "lorem ipsum",
-            meta: <Icon color="primary" icon={"keyboard_arrow_down"}/>,
-        },
-        {
-            icon: {
-                icon: (<img src={charityImage} style={{ height: "60px", width: "60px" }}/>),
-            },
-            primaryText: "Lorem Ipsum",
-            secondaryText: "de utmon pro nubis",
-            subtext: "lorem ipsum",
-            meta: <Icon color="primary" icon={"keyboard_arrow_down"}/>,
-        },
-    ]}/>);
-};
-ListCustomStory.story = {
-    name: "custom",
-};

package/dist/components/logo/index.js

@@ -1 +0,0 @@
-export { default as LogoType } from "./logo-type";

package/dist/components/logo/logo-type.jsx

@@ -1,65 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { BRAND_DARK_GREY } from "../../theme/colors";
-import { useTheme } from "../../theme/theme";
-/**
- * A dummy mycause logo
- */
-function LogoType({ size }) {
-    const theme = useTheme();
-    return (<span className={classnames("logo-type", size && `size-${size}`)}>
-      <span className="logo"/>
-      <span className="type">
-        <span className="my">my</span>
-        <span className="cause">cause</span>
-      </span>
-      <style jsx>{`
-        .logo-type {
-          display: inline-flex;
-          align-items: center;
-          height: 2rem;
-        }
-
-        .logo {
-          display: inline-block;
-          background-color: ${theme.color.foreground.accent};
-          border-radius: 50%;
-          width: 1.5rem;
-          height: 1.5rem;
-          margin-right: 0.25rem;
-        }
-
-        .type {
-          display: inline-block;
-          font-family: ${theme.typography.fontFamily.alternate};
-          font-weight: 500;
-          font-size: 1rem;
-          /* the logotype is all lowercase so it needs to be adjusted to line up with normal text */
-          transform: translateY(-8%);
-          text-rendering: optimizeLegibility;
-        }
-
-        .my {
-          color: ${theme.color.foreground.accent};
-        }
-
-        .cause {
-          color: ${BRAND_DARK_GREY};
-        }
-
-        .size-large {
-          height: 3rem;
-        }
-
-        .size-large .logo {
-          width: 2.25rem;
-          height: 2.25rem;
-        }
-
-        .size-large .type {
-          font-size: 1.375rem;
-        }
-      `}</style>
-    </span>);
-}
-export default LogoType;

package/dist/components/menu/index.js

@@ -1,8 +0,0 @@
-export { default as Menu } from "./menu";
-export { default as MenuSurface, MenuCorner, MENU_ANCHOR_CLASS, } from "./menu-surface";
-export { default as MenuListItemMeta } from "./menu-list-item-meta";
-export { default as MenuList } from "./menu-list";
-export { default as MenuListItem } from "./menu-list-item";
-export { default as MenuListDivider } from "./menu-list-divider";
-export { default as MenuListItemText } from "./menu-list-item-text";
-export { default as MenuListItemGraphic } from "./menu-list-item-graphic";

package/dist/components/menu/menu-list-divider.jsx

@@ -1,2 +0,0 @@
-import { ListDivider as MenuListDivider } from "@material/react-list";
-export default MenuListDivider;

package/dist/components/menu/menu-list-item-graphic.jsx

@@ -1,2 +0,0 @@
-import { MenuListItemGraphic } from "@material/react-menu";
-export default MenuListItemGraphic;

package/dist/components/menu/menu-list-item-meta.jsx

@@ -1,2 +0,0 @@
-import { ListItemMeta as MenuListItemMeta } from "@material/react-list";
-export default MenuListItemMeta;

package/dist/components/menu/menu-list-item-text.jsx

@@ -1,2 +0,0 @@
-import { MenuListItemText } from "@material/react-menu";
-export default MenuListItemText;

package/dist/components/menu/menu-list-item.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { MenuListItem as MaterialMenuListItem, } from "@material/react-menu";
-function MenuListItem(props) {
-    let tag = undefined;
-    // If a href is provided, use an a tag instead
-    if (typeof props.href !== "undefined") {
-        tag = "a";
-    }
-    return <MaterialMenuListItem tag={tag} {...props}/>;
-}
-export default MenuListItem;

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

@@ -1,18 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { MenuList as MDCMenuList, } from "@material/react-menu";
-import css from "styled-jsx/css";
-import { useTheme } from "../../theme/theme";
-function MenuList({ className, children, ...rest }) {
-    const theme = useTheme();
-    const scope = css.resolve `
-    .mdc-list {
-      font-family: ${theme.typography.fontFamily.default};
-    }
-  `;
-    return (<MDCMenuList className={classnames(scope.className, className)} {...rest}>
-      {children}
-      {scope.styles}
-    </MDCMenuList>);
-}
-export default MenuList;

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

@@ -1,4 +0,0 @@
-import MenuSurface, { Corner } from "@material/react-menu-surface";
-const MENU_ANCHOR_CLASS = "mdc-menu-surface--anchor";
-export default MenuSurface;
-export { Corner as MenuCorner, MENU_ANCHOR_CLASS };

package/dist/components/menu/menu.jsx

@@ -1,2 +0,0 @@
-import Menu from "@material/react-menu";
-export default Menu;

package/dist/components/menu/menu.stories.jsx

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from "react";
-import MenuSurface, { MenuCorner } from "./menu-surface";
-import MenuList from "./menu-list";
-import MenuListItem from "./menu-list-item";
-import MenuListItemText from "./menu-list-item-text";
-import CenterDecorator from "../../utils/center-decorator";
-export default {
-    title: "MenuSurface",
-    decorators: [CenterDecorator],
-};
-export const menuSurface = function MenuSurfaceDemo() {
-    const [ref, setRef] = useState(null);
-    const [open, setOpen] = useState(false);
-    useEffect(() => {
-        let timeout = undefined;
-        if (!open) {
-            timeout = setTimeout(() => {
-                setOpen(true);
-            }, 1000);
-            return () => clearTimeout(timeout);
-        }
-    }, [open]);
-    return (<div className="surface-anchor mdc-menu-surface--anchor" ref={elem => setRef(elem)}>
-      <MenuSurface open={open} anchorElement={ref || undefined} anchorCorner={MenuCorner.BOTTOM_LEFT} onClose={() => setOpen(false)}>
-        <MenuList>
-          <MenuListItem>
-            <MenuListItemText primaryText="Hello"/>
-          </MenuListItem>
-        </MenuList>
-      </MenuSurface>
-      <style jsx>{`
-        .surface-anchor {
-          width: 100px;
-          height: 100px;
-          border: 1px solid #e0e0e0;
-        }
-      `}</style>
-    </div>);
-};
-menuSurface.story = {
-    name: "default",
-};

package/dist/components/modal/index.js

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

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", }) => {
-    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)}>
-        <Stack>
-          <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>
-        <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,47 +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",
-};

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;