@mycause/ui 0.0.0-cb5efc7a → 0.0.0-cba5b1d7

package/dist/components/select/select-helper-text.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import { SelectHelperText as MaterialSelectHelperText, } from "@material/react-select";
-function SelectHelperText(props) {
-    return <MaterialSelectHelperText {...props}/>;
-}
-export default SelectHelperText;

package/dist/components/select/select.jsx

@@ -1,152 +0,0 @@
-import React, { forwardRef, useCallback } from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import MDCSelect, { Option, SelectIcon, } from "@material/react-select";
-import { setRef } from "../../utils/set-ref";
-import { useTheme } from "../../theme/theme";
-import SelectHelperText from "./select-helper-text";
-import { FieldLabel, FieldHelperText } from "../field-helpers";
-const Select = forwardRef(function Select({ label = "", value, onChange, helperText, isHelperTextPersistent, externalLabel, id, className, options, large = false, required, leadingIcon, noArrow, error = false, ...rest }, ref_) {
-    const theme = useTheme();
-    let errorMessage = null;
-    // If options has been provided as an array of strings, convert it into an array of objects
-    if (isStringArray(options)) {
-        options = options.map((option) => ({
-            value: option,
-            label: option,
-        }));
-    }
-    // Add an empty default value
-    if (value === "" && !options.find(option => option.value === "")) {
-        options = [
-            {
-                value: "",
-                label: "",
-                disabled: true,
-            },
-            ...options,
-        ];
-    }
-    if (leadingIcon) {
-        leadingIcon = <SelectIcon tag="span">{leadingIcon}</SelectIcon>;
-    }
-    // If helperText is passed as a string turn it into a HelperText
-    // helperText=null or helperText="" indicates that there should be empty helper text (for layout reasons)
-    if (typeof helperText === "string" || helperText === null) {
-        helperText = (<SelectHelperText persistent={isHelperTextPersistent}>
-        {helperText}
-      </SelectHelperText>);
-    }
-    if (typeof error === "string") {
-        errorMessage = <FieldHelperText error={error}/>;
-    }
-    const ref = useCallback(setRef(ref_, (instance) => instance.nativeControl.current), [ref_]);
-    const scope = css.resolve `
-    .select :global(.mdc-select__native-control) {
-      border: ${error && "2px solid #b00020 !important"};
-    }
-    .select :global(.mdc-select__native-control),
-    .select :global(.mdc-floating-label) {
-      font-weight: 500;
-      font-family: ${theme.typography.fontFamily.brand};
-    }
-  `;
-    /**
-     * This is a fix for the Material Component Bug in firefox
-     * untill they address this we have to handle the onChange
-     * of select with onClick.
-     */
-    const handler = getFirefoxSelectBugHHandler(value, onChange);
-    return (<div className={classnames("select", scope.className)}>
-      {externalLabel && label ? (<FieldLabel large={large} htmlFor={id} required={required}>
-          {label}
-        </FieldLabel>) : null}
-      <MDCSelect ref={ref} label={externalLabel ? "" : label} value={value} enhanced={false} onChange={handler} onClick={handler} id={id} outlined required={required} className={classnames(className, {
-        "mdc-select--dense": !large,
-        "mdc-select--no-arrow": noArrow,
-    })} leadingIcon={leadingIcon} helperText={!error ? helperText : undefined} {...rest}>
-        {options.map(option => (<Option key={option.value} {...option}>
-            {option.label}
-          </Option>))}
-      </MDCSelect>
-      {errorMessage}
-      <style jsx>{`
-        .select {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .select-label {
-          font-size: 0.875rem;
-          margin: 0.5rem 0;
-          display: inline-block;
-          font-weight: 400;
-          letter-spacing: 0.00937em;
-          color: rgba(0, 0, 0, 0.6);
-          text-align: left;
-        }
-
-        .select-label--dense {
-          font-size: 0.75rem;
-        }
-      `}</style>
-      {scope.styles}
-    </div>);
-});
-export default Select;
-function isStringArray(arr) {
-    // Note this only tests that at least one item in the array is a string
-    // This only works under the assumption that the array does not contain mixed types
-    return arr.some((option) => typeof option === "string");
-}
-function getFirefoxSelectBugHHandler(value, handler) {
-    let events = {
-        click: null,
-        change: null,
-    };
-    let values = {
-        click: "",
-        change: "",
-    };
-    let flushed = false;
-    let handle = null;
-    const flush = () => {
-        if (events.change && !events.click) {
-            events.change.target.value = values.change;
-            handler(events.change);
-        }
-        else if (events.change && values.change && values.change !== value) {
-            handler(events.change);
-        }
-        else if (events.click && values.click && values.click !== value) {
-            handler(events.click);
-        }
-        else if (events.change && !values.click && !values.change && value) {
-            handler(events.change);
-        }
-    };
-    return (e) => {
-        switch (e.type) {
-            case "click":
-                values.click = e.target.value;
-                events.click = e;
-                break;
-            case "change":
-                values.change = e.currentTarget.value;
-                events.change = e;
-                break;
-        }
-        if (events.click && events.change) {
-            flush();
-        }
-        if (!handle) {
-            // This flush is required if the user used the keyboard to select
-            // as no click event would have been dispatched
-            handle = requestAnimationFrame(() => {
-                if (!flushed) {
-                    flush();
-                }
-            });
-        }
-    };
-}

package/dist/components/select/select.stories.jsx

@@ -1,40 +0,0 @@
-import React, { useState } from "react";
-import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
-import CenterDecorator from "../../utils/center-decorator";
-import Select from "./select";
-import { Icon } from "../icon";
-export default {
-    title: "Select",
-    decorators: [CenterDecorator, withKnobs],
-};
-let options = [
-    "",
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
-export const SelectStory = () => {
-    const [value, setValue] = useState("");
-    const large = boolean("Large", false);
-    const label = text("Label", "Month");
-    const labelKind = select("Label Type", { External: "external", Floating: "floating" }, "Floating");
-    const required = boolean("Required", false);
-    const helperText = text("Helper Text", "A month in the year");
-    const persistent = boolean("Persistent Helper Text", false);
-    const leadingIcon = boolean("Leading Icon", false);
-    const arrow = boolean("Arrow", true);
-    const error = text("error message", "");
-    return (<Select value={value} options={options} onChange={e => setValue(e.target.value)} label={label} large={large} helperText={helperText} isHelperTextPersistent={persistent} externalLabel={labelKind === "external"} required={required} color="secondary" leadingIcon={leadingIcon ? <Icon icon="account_circle"/> : undefined} noArrow={!arrow} error={error}/>);
-};
-SelectStory.story = {
-    name: "default",
-};

package/dist/components/statistics/index.js

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

package/dist/components/statistics/statistics.jsx

@@ -1,61 +0,0 @@
-import React from "react";
-import cn from "classnames";
-import { Text } from "../text";
-import { Flex, Stack } from "../layout";
-function Statistics({ title, stats, className, ...rest }) {
-    return (<div className={cn("statistics", className)} {...rest}>
-      <Stack direction="column">
-        <Text p kind="h3" font="brand" color="primary">
-          {title}
-        </Text>
-        <Stack gap="1.5rem">
-          {stats.map(stat => {
-        let { id, label, logo, value } = stat;
-        return (<Stack key={id} align="stretch" className="statistics-item">
-                <div className="statistics-logo" style={{
-            backgroundImage: `url(${logo})`,
-        }}/>
-                <Flex className="statistics-text" direction="column" justify="space-around" align="stretch">
-                  <Text span kind="h4" font="brand" className="statistics-text-title">
-                    {label}
-                  </Text>
-                  <Text span kind="p" font="brand" className="statistics-text-value">
-                    {value}
-                  </Text>
-                </Flex>
-              </Stack>);
-    })}
-        </Stack>
-      </Stack>
-      <style jsx>{`
-        .statistics {
-        }
-
-        .statistics-logo {
-          width: 3rem;
-          height: 3rem;
-          background-position: center;
-          background-size: contain;
-          background-repeat: no-repeat;
-        }
-
-        .statistics :global(.statistics-text) {
-          height: 100%;
-          min-width: max-content;
-        }
-
-        .statistics :global(.statistics-item) {
-          height: 3rem;
-        }
-
-        .statistics :global(.statistics-text) {
-          height: 100%;
-        }
-
-        .statistics :global(.statistics-text-value) {
-          line-height: 1;
-        }
-      `}</style>
-    </div>);
-}
-export default Statistics;

package/dist/components/statistics/statistics.stories.jsx

@@ -1,34 +0,0 @@
-import React from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Statistics from "./statistics";
-import placeholder from "./circle.svg";
-export default {
-    title: "Statistics",
-    decorators: [CenterDecorator],
-};
-export const StatisticsStory = () => {
-    const stats = [
-        {
-            label: "Members",
-            id: "nav-expand-members",
-            value: "302, 657",
-            logo: placeholder,
-        },
-        {
-            label: "Causes",
-            id: "nav-expand-causes",
-            value: "68, 553",
-            logo: placeholder,
-        },
-        {
-            label: "Raised",
-            id: "nav-expand-raised",
-            value: "$100 Million +",
-            logo: placeholder,
-        },
-    ];
-    return <Statistics stats={stats} title="We support your cause"/>;
-};
-StatisticsStory.story = {
-    name: "default",
-};

package/dist/components/switch/index.js

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

package/dist/components/switch/switch.jsx

@@ -1,32 +0,0 @@
-import React, { Fragment, useState, useEffect } from "react";
-import MDCSwitch from "@material/react-switch";
-import nanoid from "nanoid";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { useTheme, getColorToken } from "../../theme/theme";
-const Switch = ({ id, label, color = "primary", className, ...rest }) => {
-    const [mainId, setmainId] = useState("");
-    const theme = useTheme();
-    const setColor = getColorToken(theme, "foreground", color);
-    useEffect(() => {
-        setmainId(id ? id : nanoid());
-    }, [id, setmainId]);
-    const scope = css.resolve `
-    .switchStyle {
-      --mdc-theme-secondary: ${setColor};
-    }
-    .switch-label {
-      font-family: ${theme.typography.fontFamily.brand} !important;
-      margin-right: 10px;
-      cursor: pointer;
-    }
-  `;
-    return (<Fragment>
-      {label && (<label className={classnames("switch-label", scope.className)} htmlFor={mainId}>
-          {label}
-        </label>)}
-      <MDCSwitch className={classnames(className, "switchStyle", scope.className)} nativeControlId={mainId} checked={true} {...rest}/>
-      {scope.styles}
-    </Fragment>);
-};
-export default Switch;

package/dist/components/switch/switch.stories.jsx

@@ -1,41 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import { Stack } from "../layout";
-import Switch from "./switch";
-export default {
-    title: "Switch",
-    decorators: [CenterDecorator],
-};
-export const SwitchDefault = () => {
-    const [switchChecked, setSwitchChecked] = useState(false);
-    const handleClick = (event) => {
-        setSwitchChecked(event.target.checked);
-    };
-    return (<Stack>
-      <Switch checked={switchChecked} onChange={handleClick}/>
-      <Switch checked={switchChecked} onChange={handleClick} color="secondary"/>
-      <Switch checked={switchChecked} onChange={handleClick} color="muted"/>
-    </Stack>);
-};
-SwitchDefault.story = {
-    name: "default",
-};
-export const SwitchWithLabel = () => {
-    const [switchChecked, setSwitchChecked] = useState(false);
-    const handleClick = (event) => {
-        setSwitchChecked(event.target.checked);
-    };
-    return (<Switch checked={switchChecked} onChange={handleClick} label="With Label"/>);
-};
-SwitchWithLabel.story = {
-    name: "with label",
-};
-export const SwitchDisabled = () => {
-    return (<Stack>
-      <Switch checked={false} disabled={true}/>
-      <Switch checked={true} disabled={true}/>
-    </Stack>);
-};
-SwitchDisabled.story = {
-    name: "disabled",
-};

package/dist/components/tabs/index.js

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

package/dist/components/tabs/tab-bar.jsx

@@ -1,35 +0,0 @@
-import React, { forwardRef, useCallback } from "react";
-import css from "styled-jsx/css";
-import classnames from "classnames";
-import MDCTabBar from "@material/react-tab-bar";
-import { setRef } from "../../utils/set-ref";
-const scope = css.resolve `
-  * :global(.mdc-tab) {
-    padding: 0 1rem;
-  }
-
-  * :global(.mdc-tab__text-label) {
-    font-weight: 600;
-  }
-
-  .mdc-tab-bar--large :global(.mdc-tab) {
-    height: 6rem;
-  }
-
-  .mdc-tab-bar--large :global(.mdc-tab__text-label) {
-    font-size: 1rem;
-  }
-`;
-const TabBar = forwardRef(function TabBar({ large, className, ...props }, ref_) {
-    // useCallback to ensure there is a stable ref
-    // The <MDCTabBar> component has a `tabBarRef` property which
-    // is a ref to the tab bar element
-    let ref = useCallback(setRef(ref_, instance => instance.tabBarRef.current), [ref_]);
-    return (<>
-      <MDCTabBar className={classnames(scope.className, className, {
-        "mdc-tab-bar--large": large,
-    })} ref={ref} {...props}/>
-      {scope.styles}
-    </>);
-});
-export default TabBar;

package/dist/components/tabs/tab-text-label.jsx

@@ -1,5 +0,0 @@
-import React from "react";
-function TabTextLabel({ children }) {
-    return <span className="mdc-tab__text-label">{children}</span>;
-}
-export default TabTextLabel;

package/dist/components/tabs/tab.jsx

@@ -1,50 +0,0 @@
-import React, { forwardRef, useState, useEffect, useRef } from "react";
-import MDCTab from "@material/react-tab";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { tapRef } from "../../utils/tap-ref";
-const Tab = forwardRef(function Tab({ children, className, isCompactHeight, isMinWidth, id, analyticsId, ...props }, ref) {
-    const [mounted, setMounted] = useState(false);
-    const scope = css.resolve `
-    .mdc-tab--min-width {
-      flex-grow: 0;
-    }
-    .mdc-tab--compact-height {
-      height: 64px !important;
-    }
-  `;
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const intermediateRef = useRef(null);
-    const finalRef = tapRef(ref, intermediateRef);
-    // Because the ripple is the element that gets clicked (not the button)
-    // we need to put the analyticsId onto the ripple instead.
-    // there is no way to get to the ripple supported by @material/react-tab
-    // so we have to do it manually
-    useEffect(() => {
-        if (mounted) {
-            if (intermediateRef.current && intermediateRef.current.tabRef.current) {
-                const tabNode = intermediateRef.current.tabRef.current;
-                let rippleNode = tabNode.querySelector(".mdc-tab__ripple");
-                setAttribute(rippleNode, "id", analyticsId);
-            }
-        }
-    }, [mounted, analyticsId]);
-    return (<MDCTab className={classnames(className, scope.className, {
-        "mdc-tab--min-width": isMinWidth,
-        "mdc-tab--compact-height": isCompactHeight,
-    })} id={id} ref={finalRef} {...props}>
-      {children}
-      {scope.styles}
-    </MDCTab>);
-});
-export default Tab;
-function setAttribute(node, attr, val) {
-    if (typeof val !== "undefined") {
-        node.setAttribute(attr, val);
-    }
-    else {
-        node.removeAttribute(attr);
-    }
-}

package/dist/components/tabs/tabs.jsx

@@ -1,65 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import TabBar from "./tab-bar";
-import Tab from "./tab";
-import TabTextLabel from "./tab-text-label";
-const scope = css.resolve `
-  .tab--noselect {
-    width: 0;
-    padding: 0;
-    flex-grow: 0;
-  }
-
-  /**
-    when the invisible tab is selected (meaning no actual tab is selected)
-    show that the whole tab bar is focused
-   */
-  .tab-bar--none-selected:focus-within {
-    background-color: rgba(0, 0, 0, 0.02);
-  }
-`;
-function Tabs({ tabs, active, onActiveUpdate, isMinWidth, isMinWidthIndicator, isCompactHeight, className, ...props }) {
-    if (!active) {
-        // In the case that no tab is selected, an invisible tab will be added and be set to active
-        tabs = [
-            {
-                key: "",
-                label: null,
-            },
-            ...tabs,
-        ];
-    }
-    let activeIndex = active ? tabs.findIndex(tab => tab.key === active) : 0;
-    const handleActiveIndexUpdate = (i) => {
-        onActiveUpdate(tabs[i].key);
-    };
-    // When the component first mounts and active is set to null, the first
-    // (hidden) tab is selected. When this happens the tab bar gains focus
-    // and we can see the focus styling. The user didn't intend to focus the
-    // tab bar, so we unselect it by calling blur on the tab.
-    const ref = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        if (!mounted && !active && ref.current) {
-            let elem = ref.current;
-            let tab = elem.querySelector(".tab--noselect");
-            tab.blur();
-        }
-        setMounted(true);
-    }, [ref, active, mounted]);
-    return (<>
-      <TabBar key={(!!active).toString()} // TabBar crashes if the active index changes to -1 from non -1 or vice versa
-     activeIndex={activeIndex} handleActiveIndexUpdate={handleActiveIndexUpdate} className={classnames(scope.className, className, {
-        "tab-bar--none-selected": !active,
-    })} ref={ref} {...props}>
-        {tabs.map(({ key, label, className, ...tab }) => (<Tab key={key} isCompactHeight={isCompactHeight} isMinWidth={isMinWidth} isMinWidthIndicator={isMinWidthIndicator} className={classnames(scope.className, className, {
-        "tab--noselect": !key,
-    })} {...tab}>
-            <TabTextLabel>{label}</TabTextLabel>
-          </Tab>))}
-      </TabBar>
-      {scope.styles}
-    </>);
-}
-export default Tabs;

package/dist/components/tabs/tabs.stories.jsx

@@ -1,27 +0,0 @@
-import React, { useState } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Tabs from "./tabs";
-import "./tabs.scss";
-export default {
-    title: "Tabs",
-    decorators: [CenterDecorator],
-};
-export const tabs = function TabsDemo() {
-    const [active, setActive] = useState(null);
-    return (<div className="container">
-      <Tabs active={active} onActiveUpdate={setActive} tabs={[
-        { key: "fundraise", label: "Fundraise" },
-        { key: "donate", label: "Donate" },
-        { key: "organisation", label: "Organisation" },
-    ]}/>
-      <style jsx>{`
-        .container {
-          max-width: 680px;
-          width: 100%;
-        }
-      `}</style>
-    </div>);
-};
-tabs.story = {
-    name: "default",
-};

package/dist/components/text/index.js

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