@mycause/ui 0.0.0-ce837d6b → 0.0.0-cf802939

package/dist/components/text/text.jsx

@@ -1,138 +0,0 @@
-import React, { forwardRef } from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import { useTheme, getColorToken, } from "../../theme/theme";
-import { flags } from "../../utils/flags";
-import { wrap } from "../../utils/wrap";
-import Box from "../layout/box";
-// Wrap the text in modifier elements like bold or italic
-function addWrappers(node, { underline, strike, bold, italic }) {
-    let result = node;
-    result = wrap(result, "u", underline);
-    result = wrap(result, "s", strike);
-    result = wrap(result, "b", bold);
-    result = wrap(result, "i", italic);
-    return result;
-}
-const kinds = {
-    display1: `
-    font-size: 3rem;
-    line-height: 3.5rem;
-  `,
-    display2: `
-    font-size: 2.25rem;
-    line-height: 3rem;
-  `,
-    h1: `
-    font-size: 2.25rem;
-    line-height: 3rem;
-    font-weight: bold;
-  `,
-    h2: `
-    font-size: 1.75rem;
-    line-height: 2rem;
-    font-weight: bold;
-  `,
-    h3: `
-    font-size: 1.25rem;
-    line-height: 2rem;
-    font-weight: bold;
-  `,
-    h4: `
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: bold;
-  `,
-    h5: `
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    font-weight: bold;
-  `,
-    h6: `
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    font-weight: bold;
-  `,
-    p: `
-    font-size: 1rem;
-    line-height: 1.5rem;
-  `,
-    sub: `
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  `,
-    small: `
-    font-size: 0.75rem;
-    line-height: 1.25rem;
-  `,
-    fine: `
-    font-size: 0.675rem;
-    line-height: 1rem;
-  `,
-    span: ``,
-};
-const Text = forwardRef(function Text({ elem: element, kind, font, align, 
-// component types
-h1, h2, h3, h4, h5, h6, p, small, span, 
-// modifiers
-underline, strike, bold, italic, 
-// color
-color, invert, 
-//
-children, className, ...rest }, ref) {
-    const theme = useTheme();
-    // Process component type flags, defaulting to span
-    element = flags({ h1, h2, h3, h4, h5, h6, p, small, span }, element || "span");
-    // If no kind is specified, just use the kind named after the element
-    kind = kind || element;
-    // Headings are already bold so prevent wrapping an extra <b> element
-    if (isHeading(element) && bold) {
-        bold = false;
-    }
-    // The h6 style has a different color by default
-    if (kind === "h6") {
-        color = color || "muted";
-    }
-    const foreground = color || invert
-        ? getColorToken(theme, "foreground", color || "neutral", {
-            invert,
-        })
-        : "inherit";
-    const fontFamily = font
-        ? theme.typography.fontFamily[font]
-        : "inherit";
-    const scope = css.resolve `
-    ${element} {
-      font-weight: initial;
-      font-family: ${fontFamily};
-      color: ${foreground};
-      ${kinds[kind]}
-      margin: 0;
-    }
-
-    .unbold {
-      font-weight: 400;
-    }
-
-    .align {
-      text-align: ${align};
-    }
-  `;
-    return (<Box as={element} {...rest} className={classnames(className, {
-        unbold: isHeading(element) && bold === false,
-        align: align,
-    }, scope.className)} 
-    // The following error is caused by the fact that the element rendered
-    // could be either a HTMLElement or HTMLHeadingElement but it cannot know
-    // which at runtime. In practice the difference between the two elements
-    // never really arises as an issue.
-    // @ts-ignore
-    ref={ref}>
-      {addWrappers(children, { underline, strike, bold, italic })}
-      {scope.styles}
-    </Box>);
-});
-function isHeading(kind) {
-    return kind.startsWith("h");
-}
-export default Text;

package/dist/components/text/text.stories.jsx

@@ -1,262 +0,0 @@
-import React from "react";
-import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
-import Text from "./text";
-import { useTheme } from "../../theme/theme";
-import CenterDecorator from "../../utils/center-decorator";
-export default {
-    title: "Text",
-    decorators: [withKnobs],
-};
-export const TextStory = () => {
-    const contents = text("Contents", "Hello");
-    const elem = select("Element", {
-        Span: "span",
-        "Heading 1": "h1",
-        "Heading 2": "h2",
-        "Heading 3": "h3",
-        "Heading 4": "h4",
-        "Heading 5": "h5",
-        "Heading 6": "h6",
-        Paragraph: "p",
-        Small: "small",
-    }, "span");
-    const kind = select("Kind", [
-        "default",
-        "display1",
-        "display2",
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "p",
-        "sub",
-        "small",
-        "fine",
-    ], "default");
-    const align = select("Align", ["default", "left", "right", "center", "justify"], "default");
-    const underline = boolean("Underline", false);
-    const strike = boolean("Strike", false);
-    const bold = boolean("Bold", false);
-    const italic = boolean("Italic", false);
-    return (<div className="container">
-      <Text elem={elem} kind={kind !== "default" ? kind : undefined} align={align !== "default" ? align : undefined} underline={underline} strike={strike} bold={bold} italic={italic}>
-        {contents}
-      </Text>
-      <style jsx>{`
-        .container {
-          width: 100%;
-          max-width: 20rem;
-        }
-      `}</style>
-    </div>);
-};
-TextStory.story = {
-    name: "default",
-    decorators: [CenterDecorator],
-};
-function Article({ children }) {
-    const theme = useTheme();
-    return (<div className="article">
-      {children}
-      <style jsx>{`
-        .article {
-          font-family: ${theme.typography.fontFamily.default};
-        }
-      `}</style>
-      <style jsx>{`
-        .article {
-          max-width: 42rem;
-          margin: 2rem auto;
-        }
-
-        .article > :global(*:not(:last-child)) {
-          display: block;
-          margin-bottom: 1rem;
-        }
-      `}</style>
-    </div>);
-}
-export const kinds = () => (<Article>
-    <Text p kind="display1">
-      Display 1
-    </Text>
-    <Text p kind="display2">
-      Display 2
-    </Text>
-    <Text h1>Heading 1</Text>
-    <Text h2>Heading 2</Text>
-    <Text h3>Heading 3</Text>
-    <Text h4>Heading 4</Text>
-    <Text h5>Heading 5</Text>
-    <Text h6>Heading 6</Text>
-    <Text p>Para</Text>
-    <Text p kind="sub">
-      Sub
-    </Text>
-    <Text small>Small</Text>
-    <Text small kind="fine">
-      Fine
-    </Text>
-  </Article>);
-kinds.story = {
-    name: "all kinds",
-};
-export const titles = () => (<Article>
-    <Text p kind="display1">
-      Display 1
-    </Text>
-    <Text p kind="display2">
-      Display 2
-    </Text>
-    <Text h1>Heading 1</Text>
-    <Text h2>Heading 2</Text>
-    <Text h3>Heading 3</Text>
-    <Text h4>Heading 4</Text>
-    <Text h5>Heading 5</Text>
-    <Text h6>Heading 6</Text>
-  </Article>);
-titles.story = {
-    name: "title kinds",
-};
-export const paras = () => (<Article>
-    <Text h1>Body text</Text>
-    <Text h5>p (paragraph)</Text>
-    <Text p>
-      As the first Australian online fundraising platform, mycause has the most
-      experience in many aspects of crowdfunding, including annual Matched
-      Giving Days (MGDs). Many charities would benefit greatly from a giving day
-      but do not have the knowledge or resources to effectively run it. When you
-      hold your MGD with mycause, you get advice based on experience, project
-      management and resources, and so much more.
-    </Text>
-    <Text h5>sub (sub-paragraph)</Text>
-    <Text p kind="sub">
-      As the first Australian online fundraising platform, mycause has the most
-      experience in many aspects of crowdfunding, including annual Matched
-      Giving Days (MGDs). Many charities would benefit greatly from a giving day
-      but do not have the knowledge or resources to effectively run it. When you
-      hold your MGD with mycause, you get advice based on experience, project
-      management and resources, and so much more.
-    </Text>
-    <Text h5>small (small)</Text>
-    <Text small>
-      As the first Australian online fundraising platform, mycause has the most
-      experience in many aspects of crowdfunding, including annual Matched
-      Giving Days (MGDs). Many charities would benefit greatly from a giving day
-      but do not have the knowledge or resources to effectively run it. When you
-      hold your MGD with mycause, you get advice based on experience, project
-      management and resources, and so much more.
-    </Text>
-    <Text h5>fine (fine print)</Text>
-    <Text small kind="fine">
-      As the first Australian online fundraising platform, mycause has the most
-      experience in many aspects of crowdfunding, including annual Matched
-      Giving Days (MGDs). Many charities would benefit greatly from a giving day
-      but do not have the knowledge or resources to effectively run it. When you
-      hold your MGD with mycause, you get advice based on experience, project
-      management and resources, and so much more.
-    </Text>
-  </Article>);
-paras.story = {
-    name: "body text kinds",
-};
-export const modifiers = () => (<Article>
-    <Text p kind="sub" bold>
-      This is the bold modifier
-    </Text>
-    <Text p kind="sub" underline>
-      This is the underline modifier
-    </Text>
-    <Text p kind="sub" strike>
-      This is the strike modifier
-    </Text>
-    <Text p kind="sub" italic>
-      This is the italic modifier
-    </Text>
-  </Article>);
-modifiers.story = {
-    name: "modifiers",
-};
-export const textArticle = () => (<Article>
-    <Text h1>Why choose mycause for your next giving day?</Text>
-    <Text p>
-      As the first Australian online fundraising platform, mycause has the most
-      experience in many aspects of crowdfunding, including annual Matched
-      Giving Days (MGDs). Many charities would benefit greatly from a giving day
-      but do not have the knowledge or resources to effectively run it. When you
-      hold your MGD with mycause, you get advice based on experience, project
-      management and resources, and so much more.
-    </Text>
-    <Text h2>Getting started with your next MGD</Text>
-    <Text p>
-      mycause will manage your project end-to-end using the online tool
-      Basecamp, which we will teach your team to navigate so we can be in
-      constant communication and keep track of everything that needs to be done.
-      Your team will also have the assistance of their very own mycause account
-      manager and a dedicated project officer.
-    </Text>
-    <Text h2>Our great features</Text>
-    <Text p>
-      Whether your charity’s MGD consists of one campaign, or the increasingly
-      popular Multi-Campaign, mycause will work with you to create a beautifully
-      branded campaign page. Your multi-campaign solution will be created using
-      our drag and drop website builder for a properly designed parent landing
-      page and stand-alone campaign page per child campaign. Your campaign
-      website will include an embedded donation widget with Apple Pay capability
-      to make it even easier for your supporters to donate.
-    </Text>
-    <Text h3>Heading 3</Text>
-    <Text p>
-      If you have influencers who raise money on your behalf, we can create
-      branded fundraising pages for each of them connected directly to your
-      website so their donations appear in your total automatically. Using our
-      receipting system and receipt text and imagery of your choice, mycause
-      will automatically send receipts by email to anyone who donates through
-      any of your child campaigns, influencer fundraisers or the parent campaign
-      page.
-    </Text>
-    <Text h3>Heading 3</Text>
-    <Text p>
-      Your giving day campaign also features a branded URL with the option to
-      get a brand-new domain name that is redirected to your campaign site or
-      page. We recommend a short and memorable domain name that can be added to
-      your marketing collateral and told during a volunteer phone room on the
-      day of your MGD.
-    </Text>
-    <Text p>
-      In the lead up to your charity’s MGD it is important to get the word out
-      with digital marketing. mycause can set up your remarketing, domain
-      marketing, look alikes, Gmail and social media ads for a small extra fee.
-      We will also give recommendations for organic social media posting,
-      included in the project management fee.
-    </Text>
-    <Text h4>Heading 4</Text>
-    <Text h5>Heading 5</Text>
-    <Text h6>Heading 6</Text>
-    <Text p kind="sub">
-      This website is provided by The Giving Network Pty Ltd ACN 115 262 256
-      (trading as mycause) and Fribur Pty Ltd ACN 135 047 148, trustee of the My
-      Cause Gift Fund, hereinafter referred to as “mycause”, “we”, “our” and
-      “us” in these Terms of Use. The term “you” refers to the user or viewer of
-      the site.
-    </Text>
-    <Text small kind="small">
-      This website is provided by The Giving Network Pty Ltd ACN 115 262 256
-      (trading as mycause) and Fribur Pty Ltd ACN 135 047 148, trustee of the My
-      Cause Gift Fund, hereinafter referred to as “mycause”, “we”, “our” and
-      “us” in these Terms of Use. The term “you” refers to the user or viewer of
-      the site.
-    </Text>
-    <Text p kind="fine">
-      This website is provided by The Giving Network Pty Ltd ACN 115 262 256
-      (trading as mycause) and Fribur Pty Ltd ACN 135 047 148, trustee of the My
-      Cause Gift Fund, hereinafter referred to as “mycause”, “we”, “our” and
-      “us” in these Terms of Use. The term “you” refers to the user or viewer of
-      the site.
-    </Text>
-  </Article>);
-textArticle.story = {
-    name: "example",
-};

package/dist/components/text-field/index.js

@@ -1,2 +0,0 @@
-export { default as TextField } from "./text-field";
-export { default as TextFieldHelperText } from "./text-field-helper-text";

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { HelperText as MDCHelperText, } from "@material/react-text-field";
-function HelperText({ error, children, ...props }) {
-    return (<MDCHelperText isValid={!error} isValidationMessage={!!error} validation={!!error} {...props}>
-      {error ? error : children || null}
-    </MDCHelperText>);
-}
-export default HelperText;

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

@@ -1,124 +0,0 @@
-import React, { forwardRef, useCallback } from "react";
-import cn from "classnames";
-import css from "styled-jsx/css";
-import MDCTextField, { Input } from "@material/react-text-field";
-import { setRef } from "../../utils/set-ref";
-import { isInternetExplorer } from "../../utils/browser";
-import { useTheme } from "../../theme/theme";
-import HelperText from "./text-field-helper-text";
-const TextField = forwardRef(function TextField({ fullWidth, helperText, isHelperTextPersistent, characterCounter, label, leadingIcon, onLeadingIconSelect, onTrailingIconSelect, textarea, trailingIcon, large, error, externalLabel, id, required, placeholder, className, ...rest }, ref_) {
-    const theme = useTheme();
-    let noLabel = false; // nolabel turns the provided label into a placeholder
-    let externalLabelContents = null;
-    // The floating label has a visual bug in Internet Explorer so we use the external label instead
-    if (isInternetExplorer()) {
-        externalLabel = true;
-    }
-    // If helperText is passed as a string turn it into a HelperText
-    // If there is an error, it gets rendered into the HelperText
-    // use isHelperTextPersistent to ensure the HelperText is always
-    // rendered and takes up space for layout reasons.
-    if (typeof helperText === "string" ||
-        isHelperTextPersistent ||
-        (error && typeof error !== "boolean")) {
-        helperText = (<HelperText persistent={isHelperTextPersistent}>
-          {helperText}
-        </HelperText>);
-    }
-    // Override the HelperText when there is an error
-    // When error is a boolean that means we just update the styling of the field,
-    // the helper text does not change
-    if (error && typeof error !== "boolean") {
-        helperText = React.cloneElement(helperText, {
-            error,
-        });
-    }
-    // Apply externalLabel
-    if (externalLabel) {
-        externalLabelContents = label;
-        label = undefined;
-    }
-    // Add the placeholder
-    if (placeholder) {
-        if (!externalLabel) {
-            externalLabelContents = label; // you can't have a floating label and a placeholder at the same time
-        }
-        label = placeholder;
-        noLabel = true;
-    }
-    let props = {
-        outlined: true,
-        dense: !large,
-        fullWidth,
-        helperText: helperText,
-        characterCounter,
-        label,
-        leadingIcon,
-        onLeadingIconSelect,
-        onTrailingIconSelect,
-        textarea,
-        trailingIcon,
-        id,
-        noLabel,
-    };
-    // useCallback to ensure there is a stable ref
-    // The <Input> component has an `inputElement` property which holds
-    // the underlying input element node
-    let ref = useCallback(setRef(ref_, instance => instance.inputElement), [ref_]);
-    const scope = css.resolve `
-      .text-field {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .text-field :global(.mdc-text-field__input),
-      .text-field :global(.mdc-floating-label),
-      .text-field :global(.mdc-text-field-helper-text) {
-        font-weight: 500;
-        font-family: ${theme.typography.fontFamily.brand};
-      }
-    `;
-    return (<div className={cn("text-field", className, scope.className)}>
-        {externalLabelContents ? (<ExternalLabel id={id} required={required} dense={!large}>
-            {externalLabelContents}
-          </ExternalLabel>) : null}
-        <MDCTextField {...props}>
-          <Input inputType={textarea ? "textarea" : "input"} isValid={!error} id={id} required={required} ref={ref} {...rest}/>
-        </MDCTextField>
-        {scope.styles}
-      </div>);
-});
-function ExternalLabel({ id, dense, required, children }) {
-    const theme = useTheme();
-    const scope = css.resolve `
-    .text-field-label {
-      font-family: ${theme.typography.fontFamily.brand};
-      font-weight: 500;
-    }
-  `;
-    return (<label className={cn("text-field-label", {
-        "text-field-label--dense": dense,
-    }, scope.className)} htmlFor={id}>
-      {children}
-      {required ? "*" : ""}
-      <style jsx>{`
-        .text-field-label {
-          font-size: 0.875rem;
-          font-weight: 500;
-          margin: 0.5rem 0;
-          display: inline-block;
-          font-weight: 400;
-          letter-spacing: 0.00937em;
-          color: rgba(0, 0, 0, 0.6);
-          text-align: left;
-          line-height: 1rem;
-        }
-
-        .text-field-label--dense {
-          font-size: 0.75rem;
-        }
-      `}</style>
-      {scope.styles}
-    </label>);
-}
-export default TextField;

package/dist/components/text-field/text-field.stories.jsx

@@ -1,32 +0,0 @@
-import React, { useState } from "react";
-import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
-import CenterDecorator from "../../utils/center-decorator";
-import Icon from "../icon/icon";
-import TextField from "./text-field";
-export default {
-    title: "TextField",
-    decorators: [CenterDecorator, withKnobs],
-};
-export const TextFieldStory = () => {
-    const [value, setValue] = useState("");
-    const kind = select("Field Type", { Field: "field", TextArea: "textarea" }, "field");
-    const large = boolean("Large", false);
-    const label = text("Label", "Name");
-    const labelKind = select("Label Type", { External: "external", Floating: "floating" }, "floating");
-    const required = boolean("Required", false);
-    const helperText = text("Helper Text", "Your given name(s).");
-    const persistent = boolean("Persistent Helper Text", false);
-    const placeholder = text("Placeholder", "");
-    // eslint-disable-next-line
-    const error = select("Error State", {
-        None: undefined,
-        "Error with message": "Something is wrong here.",
-        "Error without message": true,
-    }, undefined);
-    const leadingIcon = boolean("Leading Icon", false);
-    const trailingIcon = boolean("Trailing Icon", false);
-    return (<TextField value={value} onChange={e => setValue(e.currentTarget.value)} label={label} placeholder={placeholder} helperText={helperText} isHelperTextPersistent={persistent} large={large} error={error} externalLabel={labelKind === "external"} required={required} leadingIcon={leadingIcon ? <Icon icon="account_circle"/> : undefined} trailingIcon={trailingIcon ? <Icon icon="visibility_off"/> : undefined} textarea={kind === "textarea"}/>);
-};
-TextFieldStory.story = {
-    name: "default",
-};

package/dist/components/uploader/index.js

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

package/dist/components/uploader/uploader.jsx

@@ -1,96 +0,0 @@
-import React, { Fragment } from "react";
-import Dropzone from "react-dropzone-uploader";
-import { Icon } from "../icon";
-import { Text } from "../text";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import * as html5FileSelector from "html5-file-selector";
-const { getDroppedOrSelectedFiles } = html5FileSelector;
-import { useTheme, getColorToken } from "../../theme/theme";
-const Uploader = ({ color = "primary", width, height, getUploadParams, onChangeStatus, multiple, maxFiles, fontSize, iconSize, accept, customIcon = "cloud_upload", dragAndDropMessage, hasBrowseButton, browsButtonMessage = {
-    noFiles: "Choose files",
-    hasFiles: "Add more files",
-}, }) => {
-    const theme = useTheme();
-    const setColor = getColorToken(theme, "foreground", color);
-    const brandFont = theme.typography.fontFamily.brand;
-    const scope = css.resolve `
-    .dropzone-custom-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: ${width ? width : "100%"};
-      min-height: ${height ? height : "120px"};
-      overflow: hidden;
-      margin: 0 auto;
-      position: relative;
-      box-sizing: border-box;
-      transition: all 0.15s linear;
-      border-radius: 4px;
-      border: none;
-      padding: 10px;
-    }
-    .dropzone-custom {
-      color: ${setColor} !important;
-      font-family: ${brandFont};
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      font-size: ${fontSize ? fontSize : "12px"};
-      font-weight: 600;
-      color: #2484ff;
-      cursor: pointer;
-    }
-    .dropzone-custom-submit {
-      background-color: ${setColor} !important;
-      color: white;
-      padding: 10px;
-      font-family: ${brandFont};
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-      font-weight: 600;
-    }
-  `;
-    const Input = ({ accept, onFiles, files, getFilesFromEvent, }) => {
-        const { noFiles, hasFiles } = browsButtonMessage;
-        const text = files.length > 0 ? hasFiles : noFiles;
-        return (<label className={classnames("dropzone-custom-submit", scope.className)}>
-        {text}
-        <input style={{ display: "none" }} type="file" accept={accept} multiple onChange={(e) => {
-            getFilesFromEvent(e).then((chosenFiles) => {
-                onFiles(chosenFiles);
-            });
-        }}/>
-      </label>);
-    };
-    const getFilesFromEvent = (e) => {
-        return new Promise((resolve) => {
-            getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-                resolve(chosenFiles.map((f) => f.fileObject));
-            });
-        });
-    };
-    return (<Fragment>
-      <Dropzone classNames={{
-        dropzone: classnames("dropzone-custom-wrapper", scope.className),
-        inputLabel: classnames("dropzone-custom", scope.className),
-        submitButton: classnames("dropzone-custom-submit", scope.className),
-        inputLabelWithFiles: classnames("dropzone-custom-submit", scope.className),
-    }} getUploadParams={getUploadParams} onChangeStatus={onChangeStatus} accept={accept} multiple={multiple} maxFiles={maxFiles} inputContent={<div style={{ textAlign: "center" }}>
-            {dragAndDropMessage && (<Text h3 font="brand">
-                {dragAndDropMessage}
-              </Text>)}
-            <div style={{ padding: "5px" }}>
-              <Icon icon={customIcon} size={iconSize} color={setColor}/>
-            </div>
-          </div>} InputComponent={hasBrowseButton ? Input : undefined} getFilesFromEvent={getFilesFromEvent}/>
-      {scope.styles}
-    </Fragment>);
-};
-export default Uploader;

package/dist/input.d.ts

@@ -1 +0,0 @@
-declare type Foo = {};

package/dist/input.js

@@ -1,4 +0,0 @@
-"use strict";
- || ;
-;
-foo;

package/dist/input.jsx

@@ -1,4 +0,0 @@
-"use strict";
- || ;
-;
-foo;