@mycause/ui 0.0.0-c7de8cef → 0.0.0-c7f1270a

package/dist/components/layout/box.jsx

@@ -1,58 +0,0 @@
-import React from "react";
-import cn from "classnames";
-import css from "styled-jsx/css";
-function Box({ as = "div", ma, mv, mh, mt, mr, mb, ml, pa, pv, ph, pt, pb, pl, pr, className, children, ...rest }) {
-    const margin = getSpacingStyles("margin", "m", {
-        ma,
-        mv,
-        mh,
-        mt,
-        mr,
-        mb,
-        ml,
-    });
-    const padding = getSpacingStyles("padding", "p", {
-        pa,
-        pv,
-        ph,
-        pt,
-        pb,
-        pl,
-        pr,
-    });
-    const scope = css.resolve `
-    .box {
-      ${margin}
-      ${padding}
-    }
-  `;
-    return React.createElement(as, { className: cn("box", className, scope.className), ...rest }, children, scope.styles);
-}
-export default Box;
-function getSpacingStyles(attr, prefix, obj) {
-    const result = [];
-    if (obj[prefix + "a"]) {
-        result.push(`${attr}: ${obj[prefix + "a"]};`);
-    }
-    if (obj[prefix + "v"]) {
-        result.push(`${attr}-top: ${obj[prefix + "v"]};`);
-        result.push(`${attr}-bottom: ${obj[prefix + "v"]};`);
-    }
-    if (obj[prefix + "h"]) {
-        result.push(`${attr}-left: ${obj[prefix + "h"]};`);
-        result.push(`${attr}-right: ${obj[prefix + "h"]};`);
-    }
-    if (obj[prefix + "t"]) {
-        result.push(`${attr}-top: ${obj[prefix + "t"]};`);
-    }
-    if (obj[prefix + "r"]) {
-        result.push(`${attr}-right: ${obj[prefix + "r"]};`);
-    }
-    if (obj[prefix + "b"]) {
-        result.push(`${attr}-bottom: ${obj[prefix + "b"]};`);
-    }
-    if (obj[prefix + "l"]) {
-        result.push(`${attr}-left: ${obj[prefix + "l"]};`);
-    }
-    return result.join("\n");
-}

package/dist/components/layout/flex.jsx

@@ -1,55 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import Box from "./box";
-function Flex({ direction = "row", justify = "start", align = "start", reverse = false, wrap = false, center, className, children, ...rest }) {
-    if (center) {
-        justify = "center";
-        align = "center";
-    }
-    const scope = css.resolve `
-    .flex {
-      display: flex;
-      flex-direction: ${getFlexDirection(direction, reverse)};
-      justify-content: ${getFlexJustifyContent(justify)};
-      align-items: ${getFlexAlignItems(align)};
-      flex-wrap: ${getFlexWrap(wrap)};
-    }
-  `;
-    return (<Box className={classnames("flex", className, scope.className)} {...rest}>
-      {children}
-      {scope.styles}
-    </Box>);
-}
-Flex.defaultProps = {
-    direction: "row",
-    justify: "start",
-    align: "start",
-    reverse: false,
-    wrap: false,
-};
-export default Flex;
-function getFlexDirection(direction, reverse) {
-    return reverse ? direction + "-reverse" : direction;
-}
-function getFlexJustifyContent(justify) {
-    switch (justify) {
-        case "start":
-        case "end":
-            return "flex-" + justify;
-        default:
-            return justify;
-    }
-}
-function getFlexAlignItems(align) {
-    switch (align) {
-        case "start":
-        case "end":
-            return "flex-" + align;
-        default:
-            return align;
-    }
-}
-function getFlexWrap(wrap) {
-    return wrap ? "wrap" : "nowrap";
-}

package/dist/components/layout/flex.stories.jsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { withKnobs, select, boolean, number } from "@storybook/addon-knobs";
-import CenterDecorator from "../../utils/center-decorator";
-import Flex from "./flex";
-export default {
-    title: "Flex",
-    decorators: [CenterDecorator],
-};
-function Placeholder({ children }) {
-    return (<div className="placeholder">
-      {children}
-      <style jsx>{`
-        .placeholder {
-          width: 120px;
-          height: 2.5rem;
-          border: 1px dotted #e0e0e0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      `}</style>
-    </div>);
-}
-export const FlexStory = () => (<div style={{
-    width: number("width", 300) + "px",
-    height: number("height", 300) + "px",
-    border: "1px dotted #e0e0e0",
-}}>
-    <Flex direction={select("direction", ["row", "column"], "row")} justify={select("justify", [
-    "center",
-    "start",
-    "end",
-    "space-between",
-    "space-around",
-    "space-evenly",
-    "stretch",
-], "center")} align={select("align", ["center", "start", "end", "stretch"], "start")} reverse={boolean("reverse", false)} wrap={boolean("wrap", false)}>
-      {[1, 2, 3, 4].map(n => (<Placeholder key={n}>{n}</Placeholder>))}
-    </Flex>
-  </div>);
-FlexStory.story = {
-    name: "default",
-    decorators: [withKnobs],
-};

package/dist/components/layout/grid.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import cn from "classnames";
-import css from "styled-jsx/css";
-import Box from "./box";
-function Grid({ columns = "auto", rows = "auto", gap = "0", className, children, ...rest }) {
-    const scope = css.resolve `
-    .grid {
-      display: grid;
-      grid-template-columns: ${columns};
-      grid-template-rows: ${rows};
-      grid-gap: ${gap};
-    }
-  `;
-    return (<Box className={cn("grid", scope.className, className)} {...rest}>
-      {children}
-      {scope.styles}
-    </Box>);
-}
-export default Grid;

package/dist/components/layout/grid.stories.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import Grid from "./grid";
-import CenterDecorator from "../../utils/grid-decorator";
-export default {
-    title: "Grid",
-    decorators: [CenterDecorator],
-};
-export const GridStory = () => {
-    return (<div>
-      <Grid columns="repeat(2, 1fr)" gap="1rem">
-        <div className="item"></div>
-        <div className="item"></div>
-        <div className="item"></div>
-        <div className="item"></div>
-        <div className="item"></div>
-      </Grid>
-      <style jsx>{`
-        .item {
-          width: 100px;
-          height: 100px;
-          border: 1px solid #e0e0e0;
-          background-color: white;
-        }
-      `}</style>
-    </div>);
-};
-GridStory.story = {
-    name: "default",
-};

package/dist/components/layout/index.js

@@ -1,4 +0,0 @@
-export { default as Box } from "./box";
-export { default as Flex } from "./flex";
-export { default as Grid } from "./grid";
-export { default as Stack } from "./stack";

package/dist/components/layout/stack.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import Flex from "./flex";
-import css from "styled-jsx/css";
-function Stack({ gap, direction, reverse, className, children, ...rest }) {
-    const scope = css.resolve `
-    .stack-row:not(.stack-reverse) > :global(*:not(:last-child)) {
-      margin-right: ${gap};
-    }
-
-    .stack-row.stack-reverse > :global(*:not(:last-child)) {
-      margin-left: ${gap};
-    }
-
-    .stack-column:not(.stack-reverse) > :global(*:not(:last-child)) {
-      margin-bottom: ${gap};
-    }
-
-    .stack-column.stack-everse > :global(*:not(:last-child)) {
-      margin-top: ${gap};
-    }
-  `;
-    return (<Flex className={classnames("stack", `stack-${direction}`, reverse && "stack-reverse", className, scope.className)} reverse={reverse} direction={direction} {...rest}>
-      {children}
-      {scope.styles}
-    </Flex>);
-}
-Stack.defaultProps = {
-    gap: "1rem",
-    direction: "row",
-    reverse: false,
-};
-export default Stack;

package/dist/components/layout/stack.stories.jsx

@@ -1,40 +0,0 @@
-import React from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Stack from "./stack";
-export default {
-    title: "Stack",
-    decorators: [CenterDecorator],
-};
-function Placeholder({ children }) {
-    return (<div className="placeholder">
-      {children}
-      <style jsx>{`
-        .placeholder {
-          width: 120px;
-          height: 2.5rem;
-          border: 1px dotted #e0e0e0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      `}</style>
-    </div>);
-}
-export const stack = () => (<Stack>
-    {[1, 2, 3, 4].map(n => (<Placeholder key={n}>{n}</Placeholder>))}
-  </Stack>);
-stack.story = {
-    name: "default",
-};
-export const reverse = () => (<Stack reverse>
-    {[1, 2, 3, 4].map(n => (<Placeholder key={n}>{n}</Placeholder>))}
-  </Stack>);
-reverse.story = {
-    name: "reverse",
-};
-export const vertical = () => (<Stack direction="column">
-    {[1, 2, 3, 4].map(n => (<Placeholder key={n}>{n}</Placeholder>))}
-  </Stack>);
-vertical.story = {
-    name: "vertical",
-};

package/dist/components/list/index.js

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

package/dist/components/list/list.jsx

@@ -1,55 +0,0 @@
-import React, { Fragment } from "react";
-import Icon from "../icon/icon";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { Text } from "../text";
-import MDCList, { ListItem, ListItemText, ListDivider, ListItemGraphic, ListItemMeta, } from "@material/react-list";
-const List = ({ items, divider, fullWidth, iconWidth, centerText, itemHeight, overflowHidden, breakspaces, iconsNotRounded, style, }) => {
-    const scope = css.resolve `
-    .main-list-meta {
-      margin-left: 10px;
-    }
-    .main-list-item {
-      height: ${itemHeight};
-      width: ${fullWidth && "100%"};
-    }
-    .main-list {
-      width: ${fullWidth && "100%"};
-    }
-    .main-list-text {
-      width: ${fullWidth && "100%"};
-      text-align: ${centerText && "center"};
-    }
-    .mdc-list-item__text {
-      white-space: ${breakspaces && "break-spaces !important"};
-    }
-  `;
-    return (<Fragment>
-      <MDCList className={classnames("main-list", scope.className)} avatarList={true}>
-        {items.map((res, key) => {
-        return (<div key={res.id ? res.id : key} style={style}>
-              <ListItem className={classnames("main-list-item", scope.className)} {...res}>
-                {res.icon && (<ListItemGraphic graphic={<div style={{
-            width: iconWidth ? iconWidth : "auto",
-            height: "auto",
-            overflow: overflowHidden ? "hidden" : "",
-            borderRadius: iconsNotRounded ? "0" : "",
-        }}>
-                        <Icon color="primary" {...res.icon}/>
-                      </div>}/>)}
-                <ListItemText className={classnames("main-list-text", { "main-list-text-left": res.subtextalign === "left" }, { "main-list-text-right": res.subtextalign === "right" }, scope.className)} primaryText={<div>
-                      {res.primarytext && (<Text bold={true}>{res.primarytext}</Text>)}
-                      {res.secondarytext && (<Text style={{ paddingLeft: "10px" }}>
-                          {res.secondarytext}
-                        </Text>)}
-                    </div>} secondaryText={res.subtext}/>
-                {res.meta && (<ListItemMeta className={classnames({ "main-list-meta": !res.metanospace }, scope.className)} meta={res.meta}/>)}
-              </ListItem>
-              {divider && key + 1 != items.length && <ListDivider tag="div"/>}
-            </div>);
-    })}
-      </MDCList>
-      {scope.styles}
-    </Fragment>);
-};
-export default List;

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";