@mycause/ui 0.0.0-ce837d6b → 0.0.0-ceed63b4

package/dist/components/icon/icon-button-group.jsx

@@ -1,51 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTheme } from "../../theme/theme";
-import css from "styled-jsx/css";
-function IconButtonGroup({ children, size, isOutlinedOnFocus, }) {
-    const theme = useTheme();
-    children = React.Children.map(children, (child) => React.cloneElement(child, { size }));
-    const scope = css.resolve `
-    .icon-button-group.icon-button-group--outline-on-focus:focus-within::after {
-      border-color: ${theme.color.foreground.primary};
-      border-radius: 4px;
-    }
-  `;
-    return (<div className={classnames("icon-button-group", {
-        "icon-button-group--outline-on-focus": !!isOutlinedOnFocus,
-    }, scope.className)}>
-      {children}
-      <style jsx>{`
-        .icon-button-group {
-          position: relative;
-          display: flex;
-          flex-direction: row;
-        }
-
-        .icon-button-group::after {
-          content: "";
-          position: absolute;
-          display: block;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          border: 1px solid #9e9e9e;
-          border-radius: 4px;
-          pointer-events: none;
-        }
-
-        .icon-button-group:hover::after {
-          border: 1px solid rgba(0, 0, 0, 0.87);
-        }
-
-        .icon-button-group.icon-button-group--outline-on-focus:focus-within::after {
-          border-width: 2px;
-          border-style: solid;
-          border-radius: 4px;
-        }
-      `}</style>
-      {scope.styles}
-    </div>);
-}
-export default IconButtonGroup;

package/dist/components/icon/icon-button-group.stories.jsx

@@ -1,26 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import IconButton from "./icon-button";
-import IconButtonGroup from "./icon-button-group";
-import Icon from "./icon";
-export default {
-    title: "IconButtonGroup",
-    decorators: [CenterDecorator],
-};
-const options = [
-    { value: "left", icon: "format_align_left" },
-    { value: "center", icon: "format_align_center" },
-    { value: "right", icon: "format_align_right" },
-    { value: "justify", icon: "format_align_justify" },
-];
-export const IconButtonGroupStory = () => {
-    const [alignment, setAlignment] = useState("center");
-    return (<IconButtonGroup>
-      {options.map(option => (<IconButton pressed={option.value === alignment} onClick={() => setAlignment(option.value)} key={option.value}>
-          <Icon icon={option.icon}/>
-        </IconButton>))}
-    </IconButtonGroup>);
-};
-IconButtonGroupStory.story = {
-    name: "default",
-};

package/dist/components/icon/icon-button.jsx

@@ -1,48 +0,0 @@
-import React, { forwardRef, useState } from "react";
-import css from "styled-jsx/css";
-import classnames from "classnames";
-import MDCIconButton from "@material/react-icon-button";
-import { tapEvent } from "../../utils/tap-event";
-const IconButton = forwardRef(function IconButton({ children, size, className, pressed, onBlur, ...rest }, ref) {
-    const [count, update] = useState(0);
-    // MDCIconButton currently makes all icon buttons toggle buttons
-    // by toggling aria-pressed, and there is no way to make them
-    // normal single trigger buttons.
-    // By forcing a remount when the component blurs (by changing the key),
-    // we the button's aria-pressed will be reset to false upon leaving the button.
-    const handleBlur = tapEvent(() => {
-        if (typeof pressed === "undefined") {
-            update(c => c + 1);
-        }
-    }, onBlur);
-    const scope = css.resolve `
-    .mdc-icon-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .toggle {
-      transition: background-color 200ms ease;
-    }
-
-    .toggle--active {
-      background-color: rgba(0, 0, 0, 0.1);
-      border-radius: 4px;
-    }
-
-    .size {
-      width: ${size || ""};
-      height: ${size || ""};
-    }
-  `;
-    return (<MDCIconButton key={count} className={classnames(className, scope.className, {
-        toggle: typeof pressed !== "undefined",
-        "toggle--active": pressed === true,
-        size,
-    })} ref={ref} onBlur={handleBlur} {...rest}>
-      {children}
-      {scope.styles}
-    </MDCIconButton>);
-});
-export default IconButton;

package/dist/components/icon/icon-button.stories.jsx

@@ -1,33 +0,0 @@
-import React, { useState } from "react";
-import Matrix from "../../utils/component-matrix";
-import CenterDecorator from "../../utils/center-decorator";
-import IconButton from "./icon-button";
-import Icon from "./icon";
-export default {
-    title: "IconButton",
-    decorators: [CenterDecorator],
-};
-export const iconButton = () => {
-    const props = {
-        primary: [{ icon: "close" }, { icon: "today" }, { icon: "delete" }],
-    };
-    return (<Matrix {...props}>
-      {props => (<IconButton>
-          <Icon {...props}/>
-        </IconButton>)}
-    </Matrix>);
-};
-iconButton.story = {
-    name: "default",
-};
-export const Toggle = () => {
-    const [isPressed, setIsPressed] = useState(false);
-    return (<>
-      <IconButton pressed={isPressed} onClick={() => setIsPressed(!isPressed)}>
-        <Icon icon="format_align_left"/>
-      </IconButton>
-    </>);
-};
-Toggle.story = {
-    name: "toggle",
-};

package/dist/components/icon/icon.jsx

@@ -1,49 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { useTheme, getColorToken } from "../../theme/theme";
-import MaterialIcon from "./material-icon";
-function Icon({ icon, iconSet, color = "neutral", invert, className, size, ...rest }) {
-    const theme = useTheme();
-    const foreground = getColorToken(theme, "foreground", color, { invert });
-    const scope = css.resolve `
-    .icon,
-    :global(.mdc-text-field):not(.mdc-text-field--disabled)
-      .mdc-text-field__icon {
-      color: ${foreground};
-    }
-
-    svg {
-      width: 24px;
-      height: 24px;
-      fill: currentColor;
-    }
-
-    .icon--sized {
-      width: ${size};
-      height: ${size};
-      font-size: ${size};
-    }
-  `;
-    const props = {
-        className: classnames("icon", className, scope.className, {
-            sized: !!size,
-        }),
-        ...rest,
-    };
-    if (typeof icon === "string") {
-        return (<>
-        <MaterialIcon icon={icon} iconSet={iconSet} size={size} {...props}/>
-        {scope.styles}
-      </>);
-    }
-    let elem = icon;
-    return (<>
-      {React.cloneElement(elem, {
-        ...props,
-        className: classnames(elem.props.className, props.className, "svg-icon"),
-    })}
-      {scope.styles}
-    </>);
-}
-export default Icon;

package/dist/components/icon/icon.stories.jsx

@@ -1,78 +0,0 @@
-import React from "react";
-import Matrix from "../../utils/component-matrix";
-import CenterDecorator from "../../utils/center-decorator";
-import Icon from "./icon";
-import Google from "./btn_google_light_normal_ios.svg";
-import Facebook from "./facebook_6.svg";
-export default {
-    title: "Icon",
-    decorators: [CenterDecorator],
-};
-export const material = () => {
-    const props = {
-        primary: [
-            { icon: "card_giftcard" },
-            { icon: "favorite" },
-            { icon: "favorite_border" },
-            { icon: "close" },
-            { icon: "chevron_right" },
-        ],
-    };
-    return (<Matrix {...props}>
-      {props => <Icon {...props}/>}
-    </Matrix>);
-};
-material.story = {
-    name: "material icons",
-};
-export const colors = () => {
-    const props = {
-        primary: [
-            { icon: "card_giftcard" },
-            { icon: "favorite" },
-            { icon: "favorite_outline" },
-            { icon: "close" },
-            { icon: "chevron_right" },
-        ],
-        secondary: [
-            { color: "neutral" },
-            { color: "primary" },
-            { color: "secondary" },
-            { color: "accent" },
-            { color: "#e0e0e0" },
-        ],
-    };
-    return (<Matrix {...props}>
-      {props => <Icon {...props}/>}
-    </Matrix>);
-};
-colors.story = {
-    name: "colors",
-};
-export const svg = () => {
-    const props = {
-        primary: [
-            {
-                color: "accent",
-                icon: (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-            <path d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-          </svg>),
-            },
-            {
-                color: { foreground: "#3C5A99", background: "white" },
-                icon: <Facebook />,
-            },
-            {
-                color: "neutral",
-                icon: <Google />,
-            },
-        ],
-    };
-    return (<Matrix {...props}>
-      {props => <Icon {...props}/>}
-    </Matrix>);
-};
-svg.story = {
-    name: "svg icons",
-};

package/dist/components/icon/index.js

@@ -1,4 +0,0 @@
-export { default as Icon } from "./icon";
-export { default as IconButton } from "./icon-button";
-export { default as IconButtonGroup } from "./icon-button-group";
-export { default as ToggleButton } from "./toggle-button";

package/dist/components/icon/material-icon.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-function MaterialIcon({ icon, iconSet, className, size = "24px", ...rest }) {
-    const scope = css.resolve `
-    i {
-      font-size: ${size};
-    }
-  `;
-    return (<i className={classnames(className, iconSet, scope.className)} {...rest}>
-      {icon}
-      {scope.styles}
-    </i>);
-}
-MaterialIcon.defaultProps = {
-    iconSet: "material-icons",
-};
-export default MaterialIcon;

package/dist/components/icon/toggle-button.jsx

@@ -1,29 +0,0 @@
-import React, { forwardRef, useState } from "react";
-import MDCIconButton, { IconToggle, } from "@material/react-icon-button";
-const ToggleButton = forwardRef(function ToggleButton({ active, inactive, value, onChange, onClick, ...rest }, ref) {
-    const [initialValue] = useState(value);
-    const handleClick = (e) => {
-        if (onChange) {
-            e.preventDefault();
-            onChange(!value);
-        }
-        else {
-            onClick(e);
-        }
-    };
-    const props = {
-        onClick: handleClick,
-        ref,
-        // aria-pressed controls whether or not the button is in the 'pressed' state
-        // however the icon that shows does not respect this, the icon that is set to isOn will always show first,
-        // regardless of the aria-pressed state
-        // as a workaround the initial value is captured and used to decide which IconToggle represents the 'on' state
-        "aria-pressed": value,
-        ...rest,
-    };
-    return (<MDCIconButton {...props}>
-      <IconToggle isOn={initialValue}>{active}</IconToggle>
-      <IconToggle isOn={!initialValue}>{inactive}</IconToggle>
-    </MDCIconButton>);
-});
-export default ToggleButton;

package/dist/components/icon/toggle-button.stories.jsx

@@ -1,16 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import ToggleButton from "./toggle-button";
-import Icon from "./icon";
-function StatefulToggleButton(props) {
-    const [state, setState] = useState(true);
-    return <ToggleButton value={state} onChange={setState} {...props}/>;
-}
-export default {
-    title: "ToggleButton",
-    decorators: [CenterDecorator],
-};
-export const toggleButton = () => (<StatefulToggleButton active={<Icon icon="favorite_outline"/>} inactive={<Icon icon="favorite"/>}/>);
-toggleButton.story = {
-    name: "default",
-};

package/dist/components/index.js

@@ -1,27 +0,0 @@
-/* Public component exports */
-/* Please keep these sorted alphabetically */
-export * from "./anchor";
-export * from "./avatar";
-export * from "./button";
-export * from "./chips";
-export * from "./checkbox";
-export * from "./cropper";
-export * from "./combo-field";
-export * from "./date-picker";
-export * from "./elevation";
-export * from "./field-helpers";
-export * from "./icon";
-export * from "./layout";
-export * from "./list";
-export * from "./menu";
-export * from "./modal";
-export * from "./navigation";
-export * from "./phone-number-field";
-export * from "./radio";
-export * from "./select";
-export * from "./statistics";
-export * from "./switch";
-export * from "./tabs";
-export * from "./text-field";
-export * from "./text";
-export * from "./uploader";

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