@mycause/ui 0.0.0-ce837d6b → 0.0.0-cec05abe

package/dist/theme/theme.d.ts

@@ -21,6 +21,8 @@ export declare type Theme = {
             secondary: string;
             muted: string;
             inactive: string;
+            partner: string;
+            coral: string;
         };
         background: {
             neutral: string;
@@ -29,6 +31,8 @@ export declare type Theme = {
             secondary: string;
             muted: string;
             inactive: string;
+            partner: string;
+            coral: string;
         };
     };
 };

package/dist/utils/parse-numbers.d.ts

@@ -0,0 +1,2 @@
+declare const intToString: (value: number) => string | number;
+export { intToString };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mycause/ui",
-  "version": "0.0.0-ce837d6b",
+  "version": "0.0.0-cec05abe",
   "author": "Marc Porciuncula <marc@mycause.com.au>",
   "license": "MIT",
   "main": "dist/index.js",
@@ -29,9 +29,11 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
+    "@rollup/plugin-image": "^2.0.4",
     "@rollup/plugin-json": "^4.0.0",
     "@storybook/addon-actions": "^5.2.1",
     "@storybook/addon-knobs": "^5.2.5",
+    "@storybook/addon-storysource": "^5.3.14",
     "@storybook/react": "^5.2.1",
     "@types/classnames": "^2.2.9",
     "@types/node": "^12.7.5",
@@ -100,6 +102,7 @@
     "classnames": "^2.2.6",
     "html5-file-selector": "^2.1.0",
     "i18n-iso-countries": "^4.3.1",
+    "js-cookie": "^2.2.1",
     "libphonenumber-js": "^1.7.29",
     "nanoid": "^2.1.6",
     "ramda": "^0.26.1",

package/styles/index.css

@@ -1,3 +1,4 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/css/flag-icon.min.css");
 :root {
   --mdc-theme-primary: #358b76;
   --mdc-theme-secondary: #f05c6a;
@@ -490,6 +491,10 @@ svg.mdc-button__icon {
 .mdc-button--raised.mdc-button--display {
   padding: 0 1.75rem; }
 
+.mdc-button {
+  background: #358b76;
+  background: var(--mdc-theme-primary); }
+
 .mdc-button--outlined.mdc-button--display {
   padding: 0 calc(1.75rem - 2px); }
 

package/dist/components/anchor/anchor.jsx

@@ -1,35 +0,0 @@
-import React, { forwardRef } from "react";
-import cn from "classnames";
-import css from "styled-jsx/css";
-import { useTheme, getColorToken } from "../../theme/theme";
-/* A standard text anchor */
-const Anchor = forwardRef(function Anchor({ href, children, color = "primary", invert, className, ...rest }, ref) {
-    const theme = useTheme();
-    const foreground = getColorToken(theme, "foreground", color, { invert });
-    const scope = css.resolve `
-    a,
-    a:visited {
-      color: ${foreground};
-    }
-  `;
-    return (<a href={href || "#"} className={cn(className, scope.className)} {...rest} ref={ref}>
-      {children}
-      <style jsx>{`
-        a:hover,
-        a:focus {
-          text-decoration: underline;
-        }
-
-        a:focus,
-        a:active {
-          outline: none;
-        }
-
-        a:active {
-          text-decoration: none;
-        }
-      `}</style>
-      {scope.styles}
-    </a>);
-});
-export default Anchor;

package/dist/components/anchor/anchor.stories.jsx

@@ -1,12 +0,0 @@
-import React from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import { Anchor } from "./index";
-export default {
-    title: "Anchor",
-    decorators: [CenterDecorator],
-    component: Anchor,
-};
-export const anchor = () => <Anchor href="#">Start fundraising</Anchor>;
-anchor.story = {
-    name: "default",
-};

package/dist/components/anchor/bold-anchor.jsx

@@ -1,33 +0,0 @@
-import React, { forwardRef } from "react";
-import cn from "classnames";
-import { useTheme, getColorToken } from "../../theme/theme";
-import css from "styled-jsx/css";
-/* A bold anchor that turns green when active/focused */
-const BoldAnchor = forwardRef(function EmboldenAnchor({ className, href, children, active, color = "primary", invert, analyticsId, id, ...rest }, ref) {
-    const theme = useTheme();
-    if (process.env.NODE_ENV !== "production") {
-        if (id && analyticsId) {
-            console.warn("[BoldAnchor] only one of the `id` and `analyticsId` props can be passed. Please remove one as `analyticsId` will override the id.");
-        }
-    }
-    const scope = css.resolve `
-    a {
-      position: relative;
-      text-decoration: none;
-      color: inherit;
-      font-weight: 500;
-    }
-
-    a:hover,
-    a:focus,
-    a:active,
-    a.active {
-      color: ${getColorToken(theme, "foreground", color, { invert })};
-    }
-  `;
-    return (<a ref={ref} href={href || "#"} className={cn("bold-anchor", className, scope.className, { active })} id={analyticsId || id} {...rest}>
-      {children}
-      {scope.styles}
-    </a>);
-});
-export default BoldAnchor;

package/dist/components/anchor/bold-anchor.stories.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import { BoldAnchor } from "./index";
-export default {
-    title: "BoldAnchor",
-    decorators: [CenterDecorator],
-};
-export const boldAnchor = () => (<BoldAnchor href="#">Start fundraising</BoldAnchor>);
-boldAnchor.story = {
-    name: "default",
-};

package/dist/components/anchor/index.js

@@ -1,2 +0,0 @@
-export { default as Anchor } from "./anchor";
-export { default as BoldAnchor } from "./bold-anchor";

package/dist/components/avatar/avatar.jsx

@@ -1,14 +0,0 @@
-import React from "react";
-import ImageAvatar from "./image-avatar";
-import TextAvatar from "./text-avatar";
-/* Used to represent a user */
-function Avatar(props) {
-    if (isImageAvatar(props)) {
-        return <ImageAvatar {...props}/>;
-    }
-    return <TextAvatar {...props}/>;
-}
-function isImageAvatar(props) {
-    return "src" in props && typeof props.src !== "undefined";
-}
-export default Avatar;

package/dist/components/avatar/avatar.stories.jsx

@@ -1,17 +0,0 @@
-import React from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import ImageAvatar from "./image-avatar";
-import TextAvatar from "./text-avatar";
-import src from "./ipet-photo-CfDAo3C3bvQ-unsplash.jpg";
-export default {
-    title: "Avatar",
-    decorators: [CenterDecorator],
-};
-export const imageAvatar = () => (<ImageAvatar name="Adorable Puppy" src={src}/>);
-imageAvatar.story = {
-    name: "image avatar",
-};
-export const textAvatar = () => <TextAvatar name="Adorable Puppy"/>;
-textAvatar.story = {
-    name: "text avatar",
-};

package/dist/components/avatar/image-avatar.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import css from "styled-jsx/css";
-import cn from "classnames";
-import { ON_BACKGROUND_GREY_GREY } from "../../theme/colors";
-/* An avatar with an image */
-function ImageAvatar({ name, src, size = "2.5rem", ...rest }) {
-    const scope = css.resolve `
-    .avatar {
-      border-radius: 100%;
-      display: inline-block;
-      overflow: hidden;
-      border: 1px solid ${ON_BACKGROUND_GREY_GREY};
-      line-height: 0;
-      vertical-align: top;
-      width: ${size};
-      height: ${size};
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  `;
-    return (<span className={cn("avatar", scope.className)} title={name} {...rest}>
-      <img className={scope.className} alt={name} src={src}/>
-      {scope.styles}
-    </span>);
-}
-export default ImageAvatar;

package/dist/components/avatar/index.js

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

package/dist/components/avatar/text-avatar.jsx

@@ -1,47 +0,0 @@
-import React from "react";
-import css from "styled-jsx/css";
-import cn from "classnames";
-import { useTheme, getColorToken } from "../../theme/theme";
-/* An avatar that shows initials, usually for when there is no photo available */
-function TextAvatar({ name, initials, color = "primary", invert, size = "2.5rem", ...rest }) {
-    const theme = useTheme();
-    if (!initials) {
-        initials = name
-            .split(/\s+/)
-            .filter(str => str.length)
-            .map(str => str[0].toUpperCase())
-            .join("");
-    }
-    const foreground = getColorToken(theme, "foreground", color, { invert });
-    const background = getColorToken(theme, "background", color, { invert });
-    const scope = css.resolve `
-    .text-avatar {
-      width: ${size};
-      height: ${size};
-      background-color: ${foreground};
-      color: ${background};
-    }
-  `;
-    return (<span className={cn("text-avatar", scope.className)} title={name} {...rest}>
-      <span className="name">{initials}</span>
-      <style jsx>{`
-        .text-avatar {
-          border-radius: 100%;
-          display: inline-flex;
-          overflow: hidden;
-          line-height: 0;
-          vertical-align: top;
-
-          justify-content: center;
-          align-items: center;
-        }
-
-        .name {
-          font-size: 1rem;
-          user-select: none;
-        }
-      `}</style>
-      {scope.styles}
-    </span>);
-}
-export default TextAvatar;

package/dist/components/button/button.jsx

@@ -1,85 +0,0 @@
-import React, { useState } from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import MDCButton from "@material/react-button";
-import { useTheme, getColorToken } from "../../theme/theme";
-import { tapEvent } from "../../utils/tap-event";
-/**
- * Button
- *
- * Customised version of @material/react-button
- * see: https://github.com/material-components/material-components-web-react/tree/master/packages/button
- *
- * When using this button you must also include the accompanying `button.scss`.
- */
-function Button({ control, display, large, color = "primary", invert, raised, unelevated, outlined, className, icon, trailingIcon, onMouseOver, onMouseOut, analyticsId, id, ...rest }) {
-    const theme = useTheme();
-    if (process.env.NODE_ENV !== "production") {
-        if (id && analyticsId) {
-            console.warn("[Button] only one of the `id` and `analyticsId` props can be passed. Please remove one as `analyticsId` will override the id.");
-        }
-    }
-    const [hovered, setHovered] = useState();
-    const handleMouseOver = tapEvent(() => setHovered(true), onMouseOver);
-    const handleMouseOut = tapEvent(() => setHovered(false), onMouseOut);
-    // Handle icon colors
-    const foreground = getColorToken(theme, "foreground", color, {
-        invert,
-    });
-    const background = getColorToken(theme, "background", color, {
-        invert,
-    });
-    icon = setIconColor(icon, {
-        color,
-        invert,
-        unelevated,
-        raised,
-        outlined,
-        hovered,
-    });
-    trailingIcon = setIconColor(trailingIcon, {
-        color,
-        invert,
-        unelevated,
-        raised,
-        outlined,
-        hovered,
-    });
-    const scope = css.resolve `
-    .button {
-      --mdc-theme-primary: ${foreground};
-      --mdc-theme-on-primary: ${background};
-    }
-  `;
-    const props = {
-        className: classnames("button", {
-            "mdc-button--display": display,
-            "mdc-button--large": large,
-            "mdc-button--control": control,
-        }, className, scope.className),
-        id: analyticsId || id,
-        raised,
-        unelevated,
-        outlined: outlined,
-        icon: icon,
-        trailingIcon: trailingIcon,
-        onMouseOver: handleMouseOver,
-        onMouseOut: handleMouseOut,
-        ...rest,
-    };
-    return (<>
-      <MDCButton {...props}/>
-      {scope.styles}
-    </>);
-}
-export default Button;
-function setIconColor(icon, { color, invert, unelevated, raised, outlined, hovered, }) {
-    if (!icon) {
-        return icon;
-    }
-    icon = React.cloneElement(icon, { color: icon.props.color || color });
-    if (unelevated || raised || (hovered && outlined)) {
-        icon = React.cloneElement(icon, { invert: !invert });
-    }
-    return icon;
-}

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

@@ -1,118 +0,0 @@
-import React from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Matrix from "../../utils/component-matrix";
-import Button from "./button";
-import Icon from "../icon/icon";
-export default {
-    title: "Button",
-    decorators: [CenterDecorator],
-};
-export const types = () => {
-    let props = {
-        primary: [
-            { children: "Text button" },
-            { children: "Outlined button", outlined: true },
-            { children: "Unelevated button", unelevated: true },
-            { children: "Raised button", raised: true },
-        ],
-        secondary: [{}],
-    };
-    return (<Matrix {...props}>
-      {props => <Button {...props}/>}
-    </Matrix>);
-};
-types.story = {
-    name: "types",
-};
-export const disabled = () => {
-    let props = {
-        primary: [
-            { children: "Text button" },
-            { children: "Outlined button", outlined: true },
-            { children: "Unelevated button", unelevated: true },
-            { children: "Raised button", raised: true },
-        ],
-        secondary: [{ disabled: true }],
-    };
-    return (<Matrix {...props}>
-      {props => <Button {...props}/>}
-    </Matrix>);
-};
-disabled.story = {
-    name: "disabled",
-};
-export const sizes = () => {
-    let props = {
-        primary: [
-            { children: "Dense", dense: true },
-            { children: "Normal" },
-            { children: "Display", display: true },
-            { children: "Large", large: true },
-        ],
-        secondary: [{}, { outlined: true }, { unelevated: true }, { raised: true }],
-    };
-    return (<Matrix {...props}>
-      {props => <Button {...props}/>}
-    </Matrix>);
-};
-sizes.story = {
-    name: "sizes",
-};
-export const colors = () => {
-    let props = {
-        primary: [
-            { children: "Neutral", color: "neutral" },
-            { children: "Primary", color: "primary" },
-            { children: "Secondary", color: "secondary" },
-            { children: "Accent", color: "accent" },
-            {
-                children: "Custom",
-                color: { foreground: "#3C5A99", background: "#ffffff" },
-            },
-        ],
-        secondary: [{}, { outlined: true }, { unelevated: true }, { raised: true }],
-    };
-    return (<Matrix {...props}>
-      {props => <Button {...props}/>}
-    </Matrix>);
-};
-colors.story = {
-    name: "colors",
-};
-export const icon = () => {
-    let props = {
-        primary: [
-            { icon: <Icon icon="card_giftcard"/>, children: "Voucher" },
-            { trailingIcon: <Icon icon="favorite_border"/>, children: "Thanks" },
-        ],
-        secondary: [{}, { outlined: true }, { unelevated: true }, { raised: true }],
-    };
-    return (<Matrix {...props}>
-      {props => <Button {...props}/>}
-    </Matrix>);
-};
-icon.story = {
-    name: "with icon",
-};
-export const controlButton = () => <Button control>Control</Button>;
-controlButton.story = {
-    name: "control button",
-};
-export const controlButtonDense = () => (<Button control dense>
-    Control
-  </Button>);
-controlButtonDense.story = {
-    name: "control button dense",
-};
-export const example1 = () => (<Button raised display color="secondary">
-    Start fundraising
-  </Button>);
-example1.story = {
-    name: "start fundraising",
-};
-export const example2 = () => (<Button outlined display color="primary">
-    Become a partner (free)
-  </Button>);
-example2.story = {
-    name: "become a partner",
-};

package/dist/components/button/index.js

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

package/dist/components/checkbox/checkbox.jsx

@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import nanoid from "nanoid";
-import { useTheme, getColorToken } from "../../theme/theme";
-import { Flex } from "../layout";
-import { Text } from "../text";
-import MDCCheckbox from "@material/react-checkbox";
-const Checkbox = ({ id, label, color = "primary", checked, className, ...rest }) => {
-    const theme = useTheme();
-    const [mainId, setmainId] = useState("");
-    const setColor = getColorToken(theme, "foreground", color);
-    useEffect(() => {
-        setmainId(id ? id : nanoid());
-    }, [id, setmainId]);
-    const scope = css.resolve `
-    .checkbox {
-      --mdc-theme-primary: ${setColor};
-      --mdc-theme-secondary: ${setColor};
-    }
-
-    .checkbox-label {
-      flex-grow: 1;
-      flex-shrink: 1;
-      margin-left: 0.25rem;
-      cursor: pointer;
-    }
-  `;
-    return (<Flex align="center">
-      <MDCCheckbox className={classnames(className, "checkbox", scope.className)} checked={checked} nativeControlId={mainId} {...rest}/>
-      {label && (<label className={classnames(scope.className, "checkbox-label")} htmlFor={mainId}>
-          <Text font="brand" kind="sub" span>
-            {label}
-          </Text>
-        </label>)}
-      {scope.styles}
-    </Flex>);
-};
-export default Checkbox;

package/dist/components/checkbox/checkbox.stories.jsx

@@ -1,42 +0,0 @@
-import React, { useState, Fragment } from "react";
-import CheckBox from "./checkbox";
-import CenterDecorator from "../../utils/center-decorator";
-export default {
-    title: "CheckBox",
-    decorators: [CenterDecorator],
-};
-export const CheckBoxStoriesDefault = () => {
-    const [isChecked, setChecked] = useState(true);
-    const handleClick = (event) => {
-        setChecked(event.target.checked);
-    };
-    return (<Fragment>
-      <CheckBox onChange={handleClick} checked={isChecked} color="primary"/>
-      <CheckBox onChange={handleClick} checked={isChecked} color="secondary"/>
-      <CheckBox onChange={handleClick} checked={isChecked} color="muted"/>
-    </Fragment>);
-};
-CheckBoxStoriesDefault.story = {
-    name: "default",
-};
-export const CheckBoxStoriesLabel = () => {
-    const [isChecked, setChecked] = useState(true);
-    const handleClick = (event) => {
-        setChecked(event.target.checked);
-    };
-    return (<Fragment>
-      <CheckBox label="Checkbox Story" onChange={handleClick} checked={isChecked}/>
-    </Fragment>);
-};
-CheckBoxStoriesLabel.story = {
-    name: "with label",
-};
-export const CheckBoxStoriesDisabled = () => {
-    return (<Fragment>
-      <CheckBox disabled={true} checked={false}/>
-      <CheckBox disabled={true} checked={true}/>
-    </Fragment>);
-};
-CheckBoxStoriesDisabled.story = {
-    name: "disabled",
-};

package/dist/components/checkbox/index.js

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

package/dist/components/chips/chip.jsx

@@ -1,30 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { Chip as MDCChip, } from "@material/react-chips";
-import { useTheme } from "../../theme/theme";
-function Chip({ className, leadingIcon, trailingIcon, ...props }) {
-    const theme = useTheme();
-    const scope = css.resolve `
-    .mdc-chip {
-      font-family: ${theme.typography.fontFamily.brand};
-    }
-  `;
-    // default icon sizes to 18px
-    if (leadingIcon) {
-        leadingIcon = React.cloneElement(leadingIcon, {
-            size: leadingIcon.props.size || "18px",
-        });
-    }
-    if (trailingIcon) {
-        trailingIcon = React.cloneElement(trailingIcon, {
-            size: trailingIcon.props.size || "18px",
-        });
-    }
-    return (<>
-      <MDCChip className={classnames(scope.className, className)} leadingIcon={leadingIcon} trailingIcon={trailingIcon} {...props}/>
-      {scope.styles}
-    </>);
-}
-Chip.defaultProps = MDCChip.defaultProps;
-export default Chip;

package/dist/components/chips/chips.jsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { ChipSet } from "@material/react-chips";
-import Chip from "./chip";
-function Chips({ value, onChange, options, children, ...rest }) {
-    if (options) {
-        children = options.map(option => <Chip key={option.id} {...option}/>);
-    }
-    const props = {
-        selectedChipIds: value,
-        handleSelect: onChange,
-        children: children,
-        ...rest,
-    };
-    return <ChipSet {...props}/>;
-}
-export default Chips;

package/dist/components/chips/chips.stories.jsx

@@ -1,35 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Chips from "./chips";
-import Chip from "./chip";
-export default {
-    title: "Chips",
-    decorators: [CenterDecorator],
-};
-export const chips = () => (<Chips>
-    <Chip id="summer" label="Summer"/>
-    <Chip id="winter" label="Winter"/>
-  </Chips>);
-chips.story = {
-    name: "default",
-};
-export const ChoiceChips = () => {
-    const [selected, setSelected] = useState(["summer"]);
-    return (<Chips choice value={selected} onChange={setSelected} options={[
-        { id: "summer", label: "Summer" },
-        { id: "winter", label: "Winter" },
-    ]}></Chips>);
-};
-ChoiceChips.story = {
-    name: "choice",
-};
-export const FilterChips = () => {
-    const [selected, setSelected] = useState(["summer"]);
-    return (<Chips filter value={selected} onChange={setSelected}>
-      <Chip id="summer" label="Summer"/>
-      <Chip id="winter" label="Winter"/>
-    </Chips>);
-};
-FilterChips.story = {
-    name: "filter",
-};

package/dist/components/chips/index.js

@@ -1,3 +0,0 @@
-export { default as Chips } from "./chips";
-export { default as InputChips } from "./input-chips";
-export { default as Chip } from "./chip";