@qiwi/pijma-mobile 1.137.0 → 1.139.2

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [1.139.2](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.139.1...@qiwi/pijma-mobile@1.139.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* fix build artifact prefix ([7ef78a5](https://github.com/qiwi/pijma/commit/7ef78a592e15069bbf86211d99e1bfa723cb2573))
+
+## [1.139.1](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.139.0...@qiwi/pijma-mobile@1.139.1) (2021-12-15)
+
+# [1.139.0](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.138.0...@qiwi/pijma-mobile@1.139.0) (2021-11-27)
+
+
+### Features
+
+* add inputMode prop to inputs ([#454](https://github.com/qiwi/pijma/issues/454)) ([41b9b31](https://github.com/qiwi/pijma/commit/41b9b31663982ab215764fdcb29b54f09ec23915))
+
+# [1.138.0](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.137.0...@qiwi/pijma-mobile@1.138.0) (2021-11-26)
+
+
+### Features
+
+* make auto-complete boolean or string in inputs ([#453](https://github.com/qiwi/pijma/issues/453)) ([9d706f3](https://github.com/qiwi/pijma/commit/9d706f32b98065fd65d33446651322a348803b3c))
+
 # [1.137.0](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.136.1...@qiwi/pijma-mobile@1.137.0) (2021-11-18)
 
 

package/lib/es6/actions/Actions.js

@@ -0,0 +1,18 @@
+import React, { Children } from "react";
+import { Box } from "@qiwi/pijma-core";
+export const Actions = (props) => {
+  const elements = Children.toArray(props.children).filter((child) => !!child);
+  if (elements.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Box, {
+    width: 1,
+    children: Children.map(elements, (child, key) => /* @__PURE__ */ React.createElement(Box, {
+      key,
+      width: 1,
+      maxWidth: 1,
+      mt: key === 0 ? void 0 : 4,
+      children: child
+    }))
+  });
+};

package/lib/es6/actions/index.js

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

package/lib/es6/alert/Alert.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { Flex, FlexItem, Icon, AlertControl, Box } from "@qiwi/pijma-core";
+import { Paragraph } from "../typography";
+import { Link } from "../link";
+const AlertIconColor = {
+  success: "#4bbd5c",
+  warning: "#ff8c00",
+  failure: "#d0021b",
+  general: "#666666"
+};
+const AlertIconName = {
+  success: "success",
+  warning: "warning",
+  failure: "attention",
+  general: "info"
+};
+export const Alert = ({
+  type = "general",
+  text,
+  action,
+  onHide,
+  onClick
+}) => /* @__PURE__ */ React.createElement(AlertControl, {
+  onHide,
+  children: (renderProps) => /* @__PURE__ */ React.createElement(Flex, {
+    minHeight: 14,
+    justify: "flex-start",
+    p: 4
+  }, /* @__PURE__ */ React.createElement(FlexItem, {
+    mr: 3
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: AlertIconName[type],
+    color: AlertIconColor[type]
+  })), /* @__PURE__ */ React.createElement(FlexItem, {
+    mr: onHide ? 4 : 0,
+    overflow: "hidden"
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    children: text
+  }), action ? /* @__PURE__ */ React.createElement(Box, {
+    mt: 1
+  }, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement(Link, {
+    bold: true,
+    onClick,
+    children: action
+  }))) : null), onHide ? /* @__PURE__ */ React.createElement(FlexItem, {
+    ml: "auto",
+    cursor: "pointer",
+    opacity: renderProps.hover ? 0.7 : 1,
+    transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+    onClick: renderProps.onClick,
+    onMouseMove: renderProps.onMouseEnter,
+    onMouseOut: renderProps.onMouseLeave
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "cross-small",
+    color: "#666666"
+  })) : null)
+});
+Alert.defaultProps = {
+  type: "general"
+};

package/lib/es6/alert/index.js

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

package/lib/es6/block-accordion/BlockAccordion.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { AccordionControl, Box, Card, Flex, FlexItem, Icon } from "@qiwi/pijma-core";
+import { Paragraph } from "../typography";
+export const BlockAccordion = ({ items, tabIndex = 0, opened, onChange }) => /* @__PURE__ */ React.createElement(AccordionControl, {
+  items,
+  opened,
+  onChange,
+  children: (renderProps) => /* @__PURE__ */ React.createElement(Box, {
+    py: 2
+  }, renderProps.items.map((item, index) => /* @__PURE__ */ React.createElement(Card, {
+    key: index,
+    s: index > 0 ? "0 -1px 0 #e6e6e6" : void 0,
+    transition: "box-shadow 100ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+    onMouseEnter: item.onMouseEnter,
+    onMouseLeave: item.onMouseLeave
+  }, /* @__PURE__ */ React.createElement(Flex, {
+    tabIndex,
+    wrap: "nowrap",
+    justify: "space-between",
+    align: "start",
+    cursor: "pointer",
+    px: 4,
+    pt: 4,
+    pb: item.opened ? 1 : 4,
+    onClick: item.onClick,
+    onFocus: item.onFocus,
+    onBlur: item.onBlur,
+    onKeyDown: renderProps.onKeyDown
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    bold: true,
+    size: "s"
+  }, item.title), /* @__PURE__ */ React.createElement(FlexItem, {
+    shrink: 0,
+    width: 6,
+    height: 6,
+    ml: 3,
+    transform: `rotate(${item.opened ? 180 : 0}deg)`,
+    transition: "transform 0.3s ease-in-out"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "angle-small-down"
+  }))), /* @__PURE__ */ React.createElement(Box, {
+    px: 4,
+    pb: 4,
+    display: item.opened ? "block" : "none"
+  }, typeof item.content === "string" ? /* @__PURE__ */ React.createElement(Paragraph, {
+    size: "s"
+  }, item.content) : item.content))))
+});
+BlockAccordion.defaultProps = {
+  tabIndex: 0
+};

package/lib/es6/block-accordion/index.js

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

package/lib/es6/block-content/BlockContent.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Box } from "@qiwi/pijma-core";
+const BlockContentIdent = {
+  m: 4,
+  l: 6
+};
+export const BlockContent = ({ indent = "m", children }) => /* @__PURE__ */ React.createElement(Box, {
+  p: BlockContentIdent[indent],
+  children
+});
+BlockContent.defaultProps = {
+  indent: "m"
+};

package/lib/es6/block-content/index.js

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

package/lib/es6/block-tabs/BlockTabs.js

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  TabsControl,
+  TabHeader,
+  Flex,
+  FlexItem,
+  Pos,
+  Card,
+  TabBorder,
+  styled
+} from "@qiwi/pijma-core";
+import { Paragraph } from "../typography";
+const BlockTabsIndent = {
+  m: [4, 4, 4, 4],
+  l: [6, 6, 6, 6]
+};
+const FlexOverflow = styled(Flex)({
+  "&::-webkit-scrollbar": {
+    display: "none"
+  },
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  position: "relative"
+});
+const TabContent = styled(FlexItem)();
+export const BlockTabs = ({
+  items,
+  select = 0,
+  tabIndex = 0,
+  vertical = false,
+  centered = false,
+  stub = false,
+  hr = true,
+  indent = "m",
+  pt,
+  pb,
+  onChange
+}) => stub ? /* @__PURE__ */ React.createElement(Pos, {
+  type: "relative"
+}, /* @__PURE__ */ React.createElement(Flex, {
+  direction: "column",
+  pt: pt !== void 0 ? pt : BlockTabsIndent[indent][0],
+  pr: BlockTabsIndent[indent][1],
+  pb: pb !== void 0 ? pb : BlockTabsIndent[indent][2],
+  pl: BlockTabsIndent[indent][3]
+}, /* @__PURE__ */ React.createElement(FlexOverflow, {
+  direction: "row",
+  overflow: "auto",
+  justify: centered ? "space-between" : "flex-start"
+}, (Array.isArray(stub) ? stub : [true, true, true]).map((icon, index, arr) => /* @__PURE__ */ React.createElement(TabHeader, {
+  key: index,
+  title: "stub",
+  indent: index === arr.length - 1 ? 0 : 5,
+  wrap: !centered,
+  tabIndex: -1,
+  icon: icon ? "qiwi" : void 0,
+  vertical,
+  select: false,
+  width: centered ? 1 : void 0,
+  stub: true
+})), /* @__PURE__ */ React.createElement(TabBorder, {
+  width: centered ? "calc(33% - 20px)" : vertical ? 13 : 21,
+  left: 0,
+  radius: hr,
+  stub: true
+})), /* @__PURE__ */ React.createElement(FlexItem, null, hr ? /* @__PURE__ */ React.createElement(Pos, {
+  type: "absolute",
+  width: 1,
+  left: 0,
+  zIndex: 0
+}, /* @__PURE__ */ React.createElement(Card, {
+  mt: "-1px",
+  bg: "#e6e6e6",
+  width: 1,
+  height: "1px"
+})) : null), /* @__PURE__ */ React.createElement(FlexItem, {
+  mt: 4
+}, /* @__PURE__ */ React.createElement(Paragraph, {
+  stub: true
+})))) : /* @__PURE__ */ React.createElement(TabsControl, {
+  select,
+  length: items.length,
+  onChange,
+  children: (renderProps) => /* @__PURE__ */ React.createElement(Pos, {
+    type: "relative"
+  }, /* @__PURE__ */ React.createElement(Flex, {
+    direction: "column",
+    pt: pt !== void 0 ? pt : BlockTabsIndent[indent][0],
+    pr: BlockTabsIndent[indent][1],
+    pb: pb !== void 0 ? pb : BlockTabsIndent[indent][2],
+    pl: BlockTabsIndent[indent][3]
+  }, /* @__PURE__ */ React.createElement(FlexOverflow, {
+    direction: "row",
+    overflow: "auto",
+    justify: centered ? "space-between" : "flex-start"
+  }, renderProps.items.map((item, index) => /* @__PURE__ */ React.createElement(TabHeader, {
+    key: index,
+    title: items[index].title,
+    indent: index === items.length - 1 ? 0 : 5,
+    wrap: !centered,
+    tabIndex,
+    icon: items[index].icon,
+    vertical,
+    select: item.select,
+    focus: item.focus,
+    width: centered ? 1 : void 0,
+    ref: item.ref,
+    onFocus: item.onFocus,
+    onBlur: item.onBlur,
+    onMouseEnter: item.onMouseEnter,
+    onMouseLeave: item.onMouseLeave,
+    onKeyDown: renderProps.onKeyDown,
+    onClick: item.onClick
+  })), /* @__PURE__ */ React.createElement(TabBorder, {
+    width: `${renderProps.borderWidth}px`,
+    left: `${renderProps.borderLeft}px`,
+    radius: hr
+  })), hr ? /* @__PURE__ */ React.createElement(FlexItem, null, /* @__PURE__ */ React.createElement(Pos, {
+    type: "absolute",
+    width: 1,
+    left: 0,
+    zIndex: 0
+  }, /* @__PURE__ */ React.createElement(Card, {
+    mt: "-1px",
+    bg: "#e6e6e6",
+    width: 1,
+    height: "1px"
+  }))) : null, items.map(({ content }, index) => /* @__PURE__ */ React.createElement(TabContent, {
+    key: index,
+    display: select === index ? "block" : "none",
+    pt: 4,
+    children: content
+  }))))
+});
+BlockTabs.defaultProps = {
+  select: 0,
+  tabIndex: 0,
+  vertical: false,
+  centered: false,
+  stub: false,
+  hr: true,
+  indent: "m"
+};

package/lib/es6/block-tabs/index.js

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

package/lib/es6/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import React, { Fragment } from "react";
+import { Box } from "@qiwi/pijma-core";
+import { NavLink } from "../nav-link";
+import { Paragraph } from "../typography";
+export const Breadcrumbs = ({
+  children = [],
+  stub = false
+}) => stub ? /* @__PURE__ */ React.createElement(Box, {
+  maxWidth: 12,
+  width: 1
+}, /* @__PURE__ */ React.createElement(NavLink, {
+  stub: true
+})) : /* @__PURE__ */ React.createElement(Paragraph, {
+  size: "s",
+  color: "support"
+}, children.map((item, i) => /* @__PURE__ */ React.createElement(Fragment, {
+  key: i
+}, i > 0 ? /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Box, {
+  as: "span",
+  mx: 2,
+  display: "inline"
+}, "\u2022"), "\xAD") : null, /* @__PURE__ */ React.createElement(NavLink, __spreadValues({}, item)))));

package/lib/es6/breadcrumbs/index.js

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

package/lib/es6/button/Button.js

@@ -0,0 +1,185 @@
+import React, { Fragment } from "react";
+import {
+  ButtonControl,
+  Spinner,
+  Card,
+  Pos,
+  Flex,
+  FlexItem,
+  Typo,
+  Btn,
+  Stub
+} from "@qiwi/pijma-core";
+const buttonSize = {
+  accent: 12,
+  normal: 10,
+  minor: 8
+};
+const buttonBackground = {
+  brand: "#ff8c00",
+  simple: "#fff padding-box"
+};
+const buttonHoverBackground = {
+  brand: "#ff8200",
+  simple: "#fff padding-box"
+};
+const buttonBorder = {
+  brand: "none",
+  simple: "1px solid rgba(0, 0, 0, 0.14)"
+};
+const buttonHoverBorder = {
+  brand: "none",
+  simple: "1px solid rgba(0, 0, 0, 0.28)"
+};
+const buttonRadius = {
+  accent: 24,
+  normal: 20,
+  minor: 16
+};
+const contextPaddingX = {
+  accent: 8,
+  normal: 6,
+  minor: 4
+};
+const iconSize = {
+  accent: 6,
+  normal: 6,
+  minor: 5
+};
+const iconMargin = {
+  accent: 3,
+  normal: 1.5,
+  minor: 1
+};
+const textSize = {
+  accent: 4,
+  normal: 3.5,
+  minor: 3.5
+};
+const textHeight = {
+  accent: 5,
+  normal: 4,
+  minor: 4
+};
+const textColor = {
+  brand: "#fff",
+  simple: "#000"
+};
+const stubHeight = {
+  accent: 3,
+  normal: 2,
+  minor: 2
+};
+const stubWidth = {
+  accent: 23,
+  normal: 21,
+  minor: 19
+};
+export const Button = (props) => props.stub ? /* @__PURE__ */ React.createElement(Card, {
+  width: !props.icon || props.text ? 1 : buttonSize[props.size],
+  height: buttonSize[props.size],
+  bg: buttonBackground.simple,
+  b: buttonBorder.simple,
+  r: buttonRadius[props.size]
+}, /* @__PURE__ */ React.createElement(Flex, {
+  align: "center",
+  justify: "center",
+  width: 1,
+  height: 1,
+  px: props.icon && !props.text ? 0 : contextPaddingX[props.size]
+}, /* @__PURE__ */ React.createElement(Fragment, null, props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
+  shrink: 0,
+  mr: props.text ? iconMargin[props.size] : 0,
+  width: iconSize[props.size],
+  height: iconSize[props.size]
+}, /* @__PURE__ */ React.createElement(Stub, {
+  top: 0.5,
+  right: 0.5,
+  bottom: 0.5,
+  left: 0.5,
+  width: iconSize[props.size] - 1,
+  height: iconSize[props.size] - 1,
+  r: (iconSize[props.size] - 1) * 2
+})) : null, props.text || !props.icon ? /* @__PURE__ */ React.createElement(Stub, {
+  width: stubWidth[props.size] - (props.icon ? 9 : 0),
+  height: stubHeight[props.size]
+}) : null))) : /* @__PURE__ */ React.createElement(ButtonControl, {
+  onClick: props.onClick,
+  onFocus: props.onFocus,
+  onBlur: props.onBlur,
+  children: (renderProps) => /* @__PURE__ */ React.createElement(Btn, {
+    disabled: props.disabled,
+    type: props.type,
+    width: !props.icon || props.text ? 1 : buttonSize[props.size],
+    height: buttonSize[props.size],
+    bg: props.disabled ? "#e6e6e6" : renderProps.hover || renderProps.focus ? buttonHoverBackground[props.kind] : buttonBackground[props.kind],
+    b: props.disabled ? "none" : renderProps.hover || renderProps.focus ? buttonHoverBorder[props.kind] : buttonBorder[props.kind],
+    r: buttonRadius[props.size],
+    transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+    onClick: renderProps.onClick,
+    onFocus: renderProps.onFocus,
+    onBlur: renderProps.onBlur,
+    onMouseEnter: renderProps.onMouseEnter,
+    onMouseLeave: renderProps.onMouseLeave,
+    children: /* @__PURE__ */ React.createElement(Pos, {
+      type: "relative",
+      width: 1,
+      height: 1,
+      cursor: props.disabled ? "not-allowed" : "pointer",
+      children: /* @__PURE__ */ React.createElement(Flex, {
+        align: "center",
+        justify: "center",
+        width: 1,
+        height: 1,
+        px: props.icon && !props.text ? 0 : contextPaddingX[props.size],
+        transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+        children: /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Pos, {
+          type: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          opacity: props.loading ? renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1 : 0,
+          transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+          children: /* @__PURE__ */ React.createElement(Flex, {
+            align: "center",
+            justify: "center",
+            width: 1,
+            height: 1,
+            children: /* @__PURE__ */ React.createElement(Spinner, {
+              paused: !props.loading,
+              width: iconSize[props.size],
+              height: iconSize[props.size],
+              color: props.disabled ? "#666" : textColor[props.kind]
+            })
+          })
+        }), props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
+          shrink: 0,
+          opacity: props.loading ? 0 : renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1,
+          mr: props.text ? iconMargin[props.size] : 0,
+          width: iconSize[props.size],
+          height: iconSize[props.size],
+          transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+          children: React.cloneElement(props.icon, {
+            color: props.disabled ? "#666" : props.kind === "brand" ? "#fff" : "#000",
+            size: 1
+          })
+        }) : null, props.text || !props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
+          opacity: props.loading ? 0 : renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1,
+          overflow: "hidden",
+          transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+          children: /* @__PURE__ */ React.createElement(Typo, {
+            nowrap: true,
+            display: "block",
+            weight: 500,
+            color: props.disabled ? "#666" : textColor[props.kind],
+            size: textSize[props.size],
+            height: textHeight[props.size],
+            transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+            children: props.text
+          })
+        }) : null)
+      })
+    })
+  })
+});

package/lib/es6/button/index.js

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

package/lib/es6/checkbox/Checkbox.js

@@ -0,0 +1,38 @@
+import React from "react";
+import {
+  Check,
+  OptionFieldItem,
+  SwitchControl,
+  OptionField,
+  Box
+} from "@qiwi/pijma-core";
+const Checkbox = (props) => /* @__PURE__ */ React.createElement(SwitchControl, {
+  disabled: props.disabled,
+  checked: props.checked,
+  onChange: props.onChange,
+  children: (renderProps) => /* @__PURE__ */ React.createElement(OptionField, {
+    tabIndex: props.tabIndex,
+    onFocus: renderProps.onFocus,
+    onBlur: renderProps.onBlur,
+    onKeyDown: renderProps.onKeyDown,
+    children: /* @__PURE__ */ React.createElement(OptionFieldItem, {
+      disabled: props.disabled,
+      label: props.label,
+      description: props.description,
+      icon: /* @__PURE__ */ React.createElement(Box, {
+        width: 6
+      }, /* @__PURE__ */ React.createElement(Check, {
+        disabled: props.disabled,
+        checked: props.checked,
+        focused: renderProps.focused
+      })),
+      onClick: renderProps.onClick,
+      onMouseEnter: renderProps.onMouseEnter,
+      onMouseLeave: renderProps.onMouseLeave
+    })
+  })
+});
+Checkbox.defaultProps = {
+  tabIndex: 0
+};
+export default Checkbox;

package/lib/es6/checkbox/index.js

@@ -0,0 +1,4 @@
+import Checkbox from "./Checkbox";
+export {
+  Checkbox
+};