@mycause/ui 0.0.0-ce837d6b → 0.0.0-cf96d552

package/dist/theme/colors.js

@@ -1,9 +0,0 @@
-export const WHITE = "#ffffff";
-export const BLACK = "#000000";
-export const BRAND_GREEN_ACCENT = "#42ccae";
-export const BRAND_GREEN = "#358b76";
-export const BRAND_CORAL = "#f05c6a";
-export const BRAND_DARK_GREY = "#3e3e3f";
-export const INACTIVE_GREY = "#9e9e9e";
-export const BACKGROUND_GREY = "#efefef";
-export const ON_BACKGROUND_GREY_GREY = "#dbdbdb";

package/dist/theme/index.js

@@ -1,2 +0,0 @@
-export * from "./theme";
-export { default as MyCauseTheme } from "./mycause-theme";

package/dist/theme/mycause-theme.js

@@ -1,33 +0,0 @@
-const WHITE = "#ffffff";
-const BRAND_GREEN_ACCESSIBLE = "#358b76";
-const BRAND_GREEN_ACCENT = "#42ccae";
-const BRAND_CORAL = "#f05c6a";
-const BRAND_DARK_GREY = "#3e3e3f";
-const MyCauseTheme = {
-    typography: {
-        fontFamily: {
-            brand: "'Montserrat', sans-serif",
-            default: "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-            alternate: "'Montserrat Alternates', Montserrat, sans-serif",
-        },
-    },
-    color: {
-        foreground: {
-            neutral: BRAND_DARK_GREY,
-            primary: BRAND_GREEN_ACCESSIBLE,
-            accent: BRAND_GREEN_ACCENT,
-            secondary: BRAND_CORAL,
-            muted: "rgba(0, 0, 0, 0.6)",
-            inactive: "rgba(0, 0, 0, 0.37)",
-        },
-        background: {
-            neutral: WHITE,
-            primary: WHITE,
-            accent: WHITE,
-            secondary: WHITE,
-            muted: WHITE,
-            inactive: "rgba(0, 0, 0, 0.12)",
-        },
-    },
-};
-export default MyCauseTheme;

package/dist/theme/theme.jsx

@@ -1,36 +0,0 @@
-/**
- * Context based theming system
- *
- * Loosely based on https://github.com/seek-oss/braid-design-system
- */
-import React, { createContext, useContext } from "react";
-import MyCauseTheme from "./mycause-theme";
-export const ThemeContext = createContext(MyCauseTheme);
-export function ThemeProvider({ value, children }) {
-    return (<React.Fragment>
-      <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-      <style jsx global>{`
-        body {
-          font-family: ${value.typography.fontFamily.default};
-        }
-      `}</style>
-    </React.Fragment>);
-}
-export function useTheme() {
-    return useContext(ThemeContext);
-}
-export function getColorToken(theme, kind, color, options = {}) {
-    if (options.invert) {
-        kind = kind === "foreground" ? "background" : "foreground";
-    }
-    if (typeof color === "object") {
-        return color[kind];
-    }
-    else if (color in theme.color.foreground) {
-        return theme.color[kind][color];
-    }
-    else {
-        return color;
-    }
-}
-export { MyCauseTheme };

package/dist/utils/browser.js

@@ -1,19 +0,0 @@
-// Checks whether the current browser is Internet Explorer
-export function isInternetExplorer() {
-    if (typeof window !== "undefined") {
-        let ua = window.navigator.userAgent;
-        let re = /MSIE|Trident/;
-        return !!ua.match(re);
-    }
-    return false;
-}
-// Checks whether the current browser is a mobile browser
-// Caution, do not use this as a replacement for screen size based media queries
-export function isMobileBrowser() {
-    if (typeof window !== "undefined") {
-        let ua = window.navigator.userAgent;
-        let re = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/;
-        return !!ua.match(re);
-    }
-    return false;
-}

package/dist/utils/center-decorator.jsx

@@ -1,15 +0,0 @@
-import React from "react";
-function CenterDecorator(story) {
-    return (<div className="center-decorator">
-      {story()}
-      <style jsx>{`
-        .center-decorator {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 100vh;
-        }
-      `}</style>
-    </div>);
-}
-export default CenterDecorator;

package/dist/utils/component-matrix.jsx

@@ -1,39 +0,0 @@
-import React from "react";
-function Matrix({ primary, secondary = [{}], children }) {
-    return (<div className="table" style={{
-        gridTemplateColumns: `repeat(${primary.length}, 1fr)`,
-        gridTemplateRows: `repeat(${secondary.length}, 1fr)`,
-    }}>
-      {secondary.map((props, i) => primary.map((props1, i1) => (<div key={i + "," + i1} className="item">
-            {children({ ...props, ...props1 })}
-          </div>)))}
-      <style jsx>{`
-        .table {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .table > *:not(:last-child) {
-          margin-bottom: 1rem;
-        }
-
-        @supports (display: grid) {
-          .table {
-            display: grid;
-            grid-gap: 1rem;
-          }
-
-          .table > *:not(:last-child) {
-            margin-bottom: 0;
-          }
-        }
-
-        .item {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      `}</style>
-    </div>);
-}
-export default Matrix;

package/dist/utils/flags.js

@@ -1,18 +0,0 @@
-/* takes an object with flags and returns the key of the first flag set to true */
-export function flags(flags, def) {
-    let result = undefined;
-    for (const [flag, value] of Object.entries(flags)) {
-        if (value) {
-            if (process.env.NODE_ENV !== "production") {
-                if (result) {
-                    console.warn(`[Warning] multiple clashing flags specified ${result}, ${flag}. You must only pass one.`);
-                }
-            }
-            result = flag;
-            if (process.env.NODE_ENV === "production") {
-                break;
-            }
-        }
-    }
-    return result || def;
-}

package/dist/utils/grid-decorator.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { BACKGROUND_GREY } from "../theme/colors";
-function GridDecorator(story) {
-    return (<div className="grid-decorator">
-      <div className="grid">{story()}</div>
-      <style jsx>{`
-        .grid-decorator {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 100vh;
-          background-color: ${BACKGROUND_GREY};
-        }
-
-        .grid {
-          display: grid;
-          align-items: center;
-          justify-content: center;
-          grid-auto-flow: row;
-          grid-template-columns: auto auto;
-          grid-auto-rows: auto;
-          grid-gap: 1rem;
-        }
-      `}</style>
-    </div>);
-}
-export default GridDecorator;

package/dist/utils/tap-event.js

@@ -1,11 +0,0 @@
-/* Perform an action on event, but also forward the event to
- * the optionally passed event handler */
-export function tapEvent(op, forwardTo) {
-    const handler = (e) => {
-        op(e);
-        if (forwardTo) {
-            forwardTo(e);
-        }
-    };
-    return handler;
-}

package/dist/utils/wrap.js

@@ -1,8 +0,0 @@
-import React from "react";
-// Conditionally wrap a React element with another
-export function wrap(children, Component, isNeeded) {
-    if (!isNeeded) {
-        return children;
-    }
-    return React.createElement(Component, {}, children);
-}