@mycause/ui 0.0.0-c7de8cef → 0.0.0-c7f1270a

package/dist/components/date-picker/single-date-picker.jsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { SingleDatePicker } from "react-dates";
-import { useTheme, getColorToken } from "../../theme/theme";
-import { FieldLabel } from "../field-helpers";
-import { Stack } from "../layout";
-const CustomSingleDatePicker = ({ width, color = "primary", onDateChange, onFocusChange, numberOfMonths = 1, error, label, ...rest }) => {
-    const theme = useTheme();
-    const setColor = getColorToken(theme, "foreground", color);
-    return (<div className="calendar-container">
-      <Stack direction="column" gap="0.5rem 0">
-        <div>{label && <FieldLabel required>{label}</FieldLabel>}</div>
-        <SingleDatePicker numberOfMonths={numberOfMonths} onDateChange={onDateChange} onFocusChange={(e) => onFocusChange(e.focused)} {...rest}/>
-      </Stack>
-      <style jsx>{`
-        :global(.SingleDatePicker) {
-          width: ${width};
-        }
-        :global(.SingleDatePickerInput) {
-          width: 100%;
-        }
-        :global(.DateInput) {
-          width: 100%;
-        }
-        .calendar-container {
-          font-family: ${theme.typography.fontFamily.brand};
-        }
-        :global(.SingleDatePickerInput__withBorder) {
-          border-width: 2px !important;
-          border-radius: 4px !important;
-          border-color: ${error && "#b00020"};
-        }
-        :global(.SingleDatePickerInput__withBorder:hover) {
-          border-width: 1px !important;
-          border-color: #000000 !important;
-        }
-        :global(.SingleDatePickerInput__withBorder:focus-within) {
-          border-width: 2px !important;
-          border-color: ${setColor} !important;
-        }
-        :global(.DateInput_input) {
-          font-weight: 500 !important;
-          font-size: 15px;
-        }
-        :global(.DayPickerKeyboardShortcuts_show__bottomRight::before) {
-          border-right: 33px solid ${setColor} !important;
-        }
-        :global(.DateInput_input__focused) {
-          border: none;
-        }
-        :global(.CalendarDay__selected_span) {
-          background: ${setColor};
-          color: white;
-          opacity: 0.7;
-          border: 1px solid white;
-        }
-
-        :global(.CalendarDay__selected) {
-          background: ${setColor};
-          color: white;
-          border: 1px double white;
-        }
-
-        :global(.CalendarDay__selected:hover) {
-          background: ${setColor};
-          color: white;
-          border: 1px double white;
-        }
-
-        :global(.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover) {
-          background: ${setColor};
-          opacity: 0.5;
-        }
-
-        :global(.CalendarDay__hovered_span:hover, .CalendarDay__hovered_span) {
-          background: ${setColor};
-          color: white;
-        }
-      `}</style>
-    </div>);
-};
-export default CustomSingleDatePicker;

package/dist/components/elevation/elevation.jsx

@@ -1,24 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classnames from "classnames";
-import css from "styled-jsx/css";
-import Box from "../layout/box";
-import nanoid from "nanoid";
-const Elevation = ({ dp, id, radius = "4px", children, className, transition, ...res }) => {
-    const [mainId, setmainId] = useState("");
-    useEffect(() => {
-        setmainId(id ? id : nanoid());
-    }, [id, setmainId]);
-    const scope = css.resolve `
-    .elevation {
-      border-radius: ${radius};
-      overflow: hidden;
-    }
-  `;
-    return (<Box id={mainId} key={mainId} className={classnames("elevation", {
-        "mdc-elevation-transition": transition,
-    }, `mdc-elevation--z${dp ? dp : 0}`, scope.className, className)} {...res}>
-      {children}
-      {scope.styles}
-    </Box>);
-};
-export default Elevation;

package/dist/components/elevation/elevation.stories.jsx

@@ -1,31 +0,0 @@
-import React, { Fragment } from "react";
-import CenterDecorator from "../../utils/center-decorator";
-import Elevation from "./elevation";
-export default {
-    title: "Elevation",
-    decorators: [CenterDecorator],
-};
-export const ElevationExample = () => {
-    const elevationsArray = [];
-    for (let i = 0; i <= 24; i++) {
-        elevationsArray.push(<Elevation dp={i} key={i} transition={true} className="elevation-example">
-        Example {i} dp
-      </Elevation>);
-    }
-    return (<Fragment>
-      <div className="elevate-container">{elevationsArray}</div>
-      <style jsx>{`
-        :global(.elevation-example) {
-          padding: 20px;
-          margin: 20px;
-        }
-        .elevate-container {
-          display: grid;
-          grid-template-columns: auto auto auto auto auto;
-        }
-      `}</style>
-    </Fragment>);
-};
-ElevationExample.story = {
-    name: "default",
-};

package/dist/components/elevation/index.js

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

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

@@ -1,42 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTheme } from "../../theme";
-function FieldHelperText({ hidden, children, error }) {
-    const theme = useTheme();
-    return (<div className={classnames("field-helper-text")}>
-      <p className={classnames({ hidden, error })}>
-        {error ? error : children}
-      </p>
-      <style jsx>{`
-        .field-helper-text {
-          margin-bottom: 4px;
-          display: flex;
-          justify-content: space-between;
-        }
-
-        p {
-          color: rgba(0, 0, 0, 0.6);
-          font-size: 0.75rem;
-          letter-spacing: 0;
-          margin: 0;
-          line-height: 19px;
-          transition: opacity 150ms ease;
-        }
-
-        .hidden {
-          opacity: 0;
-        }
-
-        .error {
-          color: #b00020;
-        }
-      `}</style>
-      <style jsx>{`
-        p {
-          font-weight: 500;
-          font-family: ${theme.typography.fontFamily.brand};
-        }
-      `}</style>
-    </div>);
-}
-export default FieldHelperText;

package/dist/components/field-helpers/field-label.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useTheme } from "../../theme";
-function FieldLabel({ large, className, children, required, ...rest }) {
-    const theme = useTheme();
-    return (<label className={classnames("field-label", {
-        "field-label--dense": !large,
-    }, className)} {...rest}>
-      {children}
-      {required ? "*" : null}
-      <style jsx>{`
-        .field-label {
-          font-weight: 500;
-          font-family: ${theme.typography.fontFamily.brand};
-          font-size: 0.875rem;
-          margin: 0.5rem 0;
-          display: inline-block;
-          letter-spacing: 0.00937rem;
-          color: rgba(0, 0, 0, 0.6);
-          line-height: 1rem;
-        }
-
-        .field-label--dense {
-          font-size: 0.75rem;
-        }
-      `}</style>
-    </label>);
-}
-export default FieldLabel;

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

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

package/dist/components/icon/btn_google_light_normal_ios.svg.jsx

@@ -1,22 +0,0 @@
-// @ts-nocheck
-import React from "react";
-/**
- * Google logo for Google sign in
- *
- * Based on the file btn_google_light_normal_ios.svg but with the button background removed
- * See: https://developers.google.com/identity/branding-guidelines
- */
-export default function GoogleIconSvg(props) {
-    return (<svg height="24" width="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <title>btn_google_light_normal_ios</title>
-      <g id="Google-Button" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <g id="logo_googleg_48dp" transform="translate(4.000000, 4.000000)">
-          <path d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z" id="Shape" fill="#4285F4"></path>
-          <path d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z" id="Shape" fill="#34A853"></path>
-          <path d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z" id="Shape" fill="#FBBC05"></path>
-          <path d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z" id="Shape" fill="#EA4335"></path>
-          <path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape"></path>
-        </g>
-      </g>
-    </svg>);
-}

package/dist/components/icon/facebook_6.svg.jsx

@@ -1,14 +0,0 @@
-// @ts-nocheck
-import React from "react";
-/**
- * Facebook icon for Facebook login
- *
- * See: https://iconmonstr.com/facebook-6-svg/
- *
- * Only use with the color #3C5A99
- */
-export default function FacebookIconSVG(props) {
-    return (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
-      <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
-    </svg>);
-}

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,28 +0,0 @@
-/* Public component exports */
-/* Please keep these sorted alphabetically */
-export * from "./anchor";
-export * from "./avatar";
-export * from "./button";
-export * from "./button-select";
-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-input";
-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";