@webiny/ui 0.0.0-mt-1

package/Accordion/Accordion.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { ListItem } from "../List";
+import { AccordionItem } from "./AccordionItem";
+export declare type AccordionProps = {
+    /**
+     * Element displayed when accordion is expanded.
+     */
+    children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem>[];
+    /**
+     * Elevation number, default set to 2
+     */
+    elevation?: number;
+    /**
+     * Append a class name
+     */
+    className?: string;
+};
+declare const Accordion: (props: AccordionProps) => JSX.Element;
+export { Accordion };

package/Accordion/Accordion.js

@@ -0,0 +1,30 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "elevation", "className"];
+import * as React from "react";
+import { List } from "../List";
+import { Elevation } from "../Elevation";
+import { css } from "emotion";
+import classNames from "classnames";
+var listStyle = /*#__PURE__*/css({
+  "&.mdc-list": {
+    padding: 0
+  }
+}, "label:listStyle;");
+
+var Accordion = function Accordion(props) {
+  var children = props.children,
+      _props$elevation = props.elevation,
+      elevation = _props$elevation === void 0 ? 2 : _props$elevation,
+      className = props.className,
+      other = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(Elevation, {
+    z: elevation,
+    className: classNames("webiny-ui-accordion", className)
+  }, /*#__PURE__*/React.createElement(List, Object.assign({
+    twoLine: true,
+    className: listStyle
+  }, other), children));
+};
+
+export { Accordion };

package/Accordion/Accordion.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Accordion/Accordion.stories.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { Accordion } from "./Accordion";
+import { AccordionItem } from "./AccordionItem";
+import { ReactComponent as SettingsIcon } from "@svgr/webpack!./icons/round-settings-24px.svg";
+var story = storiesOf("Components/Accordion", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Accordion"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItem, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    title: "Settings 1",
+    description: "Settings description",
+    open: true
+  }, /*#__PURE__*/React.createElement("div", null, "Inner child 1")), /*#__PURE__*/React.createElement(AccordionItem, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    title: "Settings 2",
+    description: "Settings description"
+  }, /*#__PURE__*/React.createElement("div", null, "Inner child 2")), /*#__PURE__*/React.createElement(AccordionItem, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    title: "Settings 3",
+    description: "Settings description"
+  }, /*#__PURE__*/React.createElement("div", null, "Inner child 3")))), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItem, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    title: "Settings 1",
+    description: "Settings description",
+    open: true
+  }, /*#__PURE__*/React.createElement("div", null, "Inner child 1")), /*#__PURE__*/React.createElement(AccordionItem, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    title: "Settings 2",
+    description: "Settings description"
+  }, /*#__PURE__*/React.createElement("div", null, "Inner child 2")), /*#__PURE__*/React.createElement(AccordionItem, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    title: "Settings 3",
+    description: "Settings description"
+  }, /*#__PURE__*/React.createElement("div", null, "Inner child 3")))))));
+}, {
+  info: {
+    propTables: [Accordion, AccordionItem]
+  }
+});

package/Accordion/AccordionItem.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export declare type AccordionItemProps = {
+    /**
+     * Left side icon
+     */
+    icon: React.ReactElement;
+    /**
+     * Accordion title
+     */
+    title?: React.ReactNode;
+    /**
+     * Optional description
+     */
+    description?: string;
+    /**
+     * Element displayed when accordion is expanded
+     */
+    children?: React.ReactNode;
+    /**
+     * Append a class name
+     */
+    className?: string;
+    /**
+     * Render item opened by default
+     */
+    open?: boolean;
+    /**
+     * For testing purpose
+     */
+    "data-testid"?: string;
+};
+declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
+export { AccordionItem };

package/Accordion/AccordionItem.js

@@ -0,0 +1,124 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useCallback, useEffect } from "react";
+import { ListItem, ListItemGraphic, ListItemMeta } from "../List";
+import Transition from "react-transition-group/Transition";
+import { Icon } from "../Icon";
+import styled from "@emotion/styled";
+import { css } from "emotion";
+import { Typography } from "../Typography";
+import { ReactComponent as UpArrow } from "@svgr/webpack!./icons/round-keyboard_arrow_up-24px.svg";
+import { ReactComponent as DownArrow } from "@svgr/webpack!./icons/round-keyboard_arrow_down-24px.svg";
+import classNames from "classnames";
+var Content = /*#__PURE__*/styled("div", {
+  target: "eypjd5u0",
+  label: "Content"
+})({
+  width: "100%",
+  borderRight: "1px solid var(--mdc-theme-background)",
+  borderBottom: "1px solid var(--mdc-theme-background)",
+  borderLeft: "1px solid var(--mdc-theme-background)",
+  boxSizing: "border-box"
+});
+var listItem = /*#__PURE__*/css({
+  padding: "15px 20px",
+  cursor: "pointer",
+  borderBottom: "1px solid var(--mdc-theme-background)",
+  "&:last-child": {
+    borderBottom: "none"
+  },
+  ".mdc-list-item__graphic": {
+    marginRight: 20
+  }
+}, "label:listItem;");
+var ListItemTitle = /*#__PURE__*/styled("div", {
+  target: "eypjd5u1",
+  label: "ListItemTitle"
+})({
+  fontWeight: 600,
+  marginBottom: 5
+});
+var ListItemDescription = /*#__PURE__*/styled("div", {
+  target: "eypjd5u2",
+  label: "ListItemDescription"
+})({});
+var TitleContent = /*#__PURE__*/styled("div", {
+  target: "eypjd5u3",
+  label: "TitleContent"
+})({
+  display: "flex",
+  flexDirection: "column"
+});
+var openedState = /*#__PURE__*/css({
+  backgroundColor: "var(--mdc-theme-on-background)"
+}, "label:openedState;");
+var duration = 150;
+var defaultStyle = {
+  transition: "all ".concat(duration, "ms ease-in-out"),
+  opacity: 0,
+  height: 0,
+  pointerEvents: "none",
+  overflow: "hidden"
+};
+var transitionStyles = {
+  entering: {
+    opacity: 0,
+    height: 0,
+    padding: "20px 20px 20px 65px",
+    pointerEvents: "auto",
+    overflow: "initial"
+  },
+  entered: {
+    opacity: 1,
+    height: "auto",
+    padding: "20px 20px 20px 65px",
+    pointerEvents: "auto",
+    overflow: "initial"
+  },
+  exiting: {
+    height: "auto",
+    padding: "20px 20px 20px 65px",
+    pointerEvents: "auto",
+    overflow: "initial"
+  }
+};
+
+var AccordionItem = function AccordionItem(props) {
+  var _useState = useState(props.open ? props.open : false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setState = _useState2[1];
+
+  var toggleState = useCallback(function () {
+    setState(!open);
+  }, [open]);
+  useEffect(function () {
+    setState(props.open);
+  }, [props.open]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("webiny-ui-accordion-item", props.className)
+  }, /*#__PURE__*/React.createElement(ListItem, {
+    className: classNames(listItem, _defineProperty({}, openedState, open), "webiny-ui-accordion-item__list-item"),
+    onClick: toggleState,
+    "data-testid": props["data-testid"]
+  }, props.icon && /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: props.icon
+  })), /*#__PURE__*/React.createElement(TitleContent, {
+    className: "webiny-ui-accordion-item__title"
+  }, /*#__PURE__*/React.createElement(ListItemTitle, null, props.title), props.description && /*#__PURE__*/React.createElement(ListItemDescription, null, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle2"
+  }, props.description))), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: !open ? /*#__PURE__*/React.createElement(DownArrow, null) : /*#__PURE__*/React.createElement(UpArrow, null)
+  }))), /*#__PURE__*/React.createElement(Transition, {
+    in: open,
+    timeout: duration
+  }, function (state) {
+    return /*#__PURE__*/React.createElement(Content, {
+      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]),
+      className: "webiny-ui-accordion-item__content"
+    }, props.children);
+  }));
+};
+
+export { AccordionItem };

package/Accordion/README.md

@@ -0,0 +1,11 @@
+# Accordion
+
+### Description
+
+Use `Accordion` component to display a set of `AccordionItems`.
+
+### Import
+
+```js
+import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
+```

package/Accordion/icons/round-keyboard_arrow_down-24px.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes" display="none">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="inline">
+	</g>
+	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_6">
+	</g>
+	<path fill="currentColor" d="M8.12,9.29L12,13.17l3.88-3.88c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41l-4.59,4.59
+		c-0.39,0.39-1.02,0.39-1.41,0l-4.59-4.59c-0.39-0.39-0.39-1.02,0-1.41l0,0C7.09,8.91,7.73,8.9,8.12,9.29z"/>
+</g>
+</svg>

package/Accordion/icons/round-keyboard_arrow_up-24px.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes" display="none">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="inline">
+	</g>
+	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_6">
+	</g>
+	<path fill="currentColor" d="M8.12,14.71L12,10.83l3.88,3.88c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41l-4.59-4.59
+		c-0.39-0.39-1.02-0.39-1.41,0l-4.59,4.59c-0.39,0.39-0.39,1.02,0,1.41l0,0C7.09,15.09,7.73,15.1,8.12,14.71z"/>
+</g>
+</svg>

package/Accordion/icons/round-settings-24px.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>round-settings-24px (2)</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Webiny---Site-Manager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Site-Settings" transform="translate(-291.000000, -161.000000)">
+            <g id="General-settings" transform="translate(264.000000, 151.000000)">
+                <g id="round-settings-24px-(2)" transform="translate(25.000000, 8.000000)">
+                    <g id="Bounding_Boxes">
+                        <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
+                    </g>
+                    <g id="Rounded" transform="translate(2.000000, 2.000000)" fill="#4A4A4A" fill-rule="nonzero">
+                        <path d="M17.43,10.98 C17.47,10.66 17.5,10.34 17.5,10 C17.5,9.66 17.47,9.34 17.43,9.02 L19.54,7.37 C19.73,7.22 19.78,6.95 19.66,6.73 L17.66,3.27 C17.54,3.05 17.27,2.97 17.05,3.05 L14.56,4.05 C14.04,3.65 13.48,3.32 12.87,3.07 L12.49,0.42 C12.46,0.18 12.25,0 12,0 L8,0 C7.75,0 7.54,0.18 7.51,0.42 L7.13,3.07 C6.52,3.32 5.96,3.66 5.44,4.05 L2.95,3.05 C2.72,2.96 2.46,3.05 2.34,3.27 L0.34,6.73 C0.21,6.95 0.27,7.22 0.46,7.37 L2.57,9.02 C2.53,9.34 2.5,9.67 2.5,10 C2.5,10.33 2.53,10.66 2.57,10.98 L0.46,12.63 C0.27,12.78 0.22,13.05 0.34,13.27 L2.34,16.73 C2.46,16.95 2.73,17.03 2.95,16.95 L5.44,15.95 C5.96,16.35 6.52,16.68 7.13,16.93 L7.51,19.58 C7.54,19.82 7.75,20 8,20 L12,20 C12.25,20 12.46,19.82 12.49,19.58 L12.87,16.93 C13.48,16.68 14.04,16.34 14.56,15.95 L17.05,16.95 C17.28,17.04 17.54,16.95 17.66,16.73 L19.66,13.27 C19.78,13.05 19.73,12.78 19.54,12.63 L17.43,10.98 Z M10,13.5 C8.07,13.5 6.5,11.93 6.5,10 C6.5,8.07 8.07,6.5 10,6.5 C11.93,6.5 13.5,8.07 13.5,10 C13.5,11.93 11.93,13.5 10,13.5 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export * from "./AccordionItem";

package/Accordion/index.js

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export * from "./AccordionItem";

package/Alert/Alert.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export declare type AlertType = "success" | "info" | "warning" | "danger";
+declare type AlertProps = {
+    title: string;
+    type: AlertType;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Use Alert component to display user's avatar.
+ */
+declare const Alert: (props: AlertProps) => JSX.Element;
+export { Alert };

package/Alert/Alert.js

@@ -0,0 +1,52 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "type", "children"];
+import * as React from "react";
+import { css } from "emotion";
+var alertStyles = /*#__PURE__*/css({
+  borderLeft: "3px solid red",
+  margin: "5px 0 15px 0",
+  padding: "2px 0 2px 10px",
+  ".webiny-ui-alert__title": {
+    fontWeight: 600,
+    lineHeight: "150%",
+    color: "var(--mdc-theme-on-surface)",
+    marginBottom: 5
+  },
+  ".webiny-ui-alert__message": {
+    lineHeight: "100%",
+    fontSize: 14,
+    color: "var(--mdc-theme-on-surface)"
+  },
+  "&.webiny-ui-alert--success": {
+    borderColor: "#21CEAF"
+  },
+  "&.webiny-ui-alert--info": {
+    borderColor: "#29A9DB"
+  },
+  "&.webiny-ui-alert--warning": {
+    borderColor: "#F45C3C"
+  },
+  "&.webiny-ui-alert--danger": {
+    borderColor: "#E4495C"
+  }
+}, "label:alertStyles;");
+
+/**
+ * Use Alert component to display user's avatar.
+ */
+var Alert = function Alert(props) {
+  var title = props.title,
+      type = props.type,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+    className: alertStyles + " webiny-ui-alert webiny-ui-alert--" + type
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "webiny-ui-alert__title"
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: "webiny-ui-alert__message"
+  }, children));
+};
+
+export { Alert };

package/Alert/Alert.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Alert/Alert.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { Alert } from "./Alert";
+var story = storiesOf("Components/Alert", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Info"
+  }, /*#__PURE__*/React.createElement(Alert, {
+    title: "Something went wrong!",
+    type: "info"
+  }, "We failed to fetch your data.")), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Alert, {
+    title: "Something went wrong!",
+    type: "info"
+  }, "We failed to fetch your data."))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Danger"
+  }, /*#__PURE__*/React.createElement(Alert, {
+    title: "Something went wrong!",
+    type: "danger"
+  }, "Please contact support!")), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Alert, {
+    title: "Something went wrong!",
+    type: "danger"
+  }, "Please contact support!"))));
+}, {
+  info: {
+    propTables: [Alert]
+  }
+});

package/Alert/README.md

@@ -0,0 +1,11 @@
+# Alert
+
+### Description
+
+Use `Alert` component to display inline messages.
+
+### Import
+
+```js
+import { Alert } from "@webiny/ui/Alert";
+```

package/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

package/Alert/index.js

@@ -0,0 +1 @@
+export * from "./Alert";

package/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { AutoCompleteBaseProps } from "./types";
+export declare enum Placement {
+    top = "top",
+    bottom = "bottom"
+}
+export declare type Props = AutoCompleteBaseProps & {
+    placement?: Placement;
+    onChange?: (value: any, selection: any) => void;
+    loading?: boolean;
+};
+declare type State = {
+    inputValue: string;
+};
+declare class AutoComplete extends React.Component<Props, State> {
+    static defaultProps: {
+        valueProp: string;
+        textProp: string;
+        options: any[];
+        placement: Placement;
+        renderItem(item: any): JSX.Element;
+    };
+    state: {
+        inputValue: string;
+    };
+    /**
+     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     */
+    downshift: any;
+    componentDidUpdate(previousProps: any): void;
+    /**
+     * Renders options - based on user's input. It will try to match input text with available options.
+     */
+    renderOptions({ options, isOpen, highlightedIndex, selectedItem, getMenuProps, getItemProps, placement }: any): JSX.Element;
+    render(): JSX.Element;
+}
+export { AutoComplete };