@qiwi/pijma-desktop 1.138.0 → 1.139.3

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [1.139.3](https://github.com/qiwi/pijma/compare/@qiwi/pijma-desktop@1.139.2...@qiwi/pijma-desktop@1.139.3) (2021-12-21)
+
+## [1.139.2](https://github.com/qiwi/pijma/compare/@qiwi/pijma-desktop@1.139.1...@qiwi/pijma-desktop@1.139.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* fix build artifact prefix ([7ef78a5](https://github.com/qiwi/pijma/commit/7ef78a592e15069bbf86211d99e1bfa723cb2573))
+
+## @qiwi/pijma-desktop [1.139.1](https://github.com/qiwi/pijma/compare/@qiwi/pijma-desktop@1.139.0...@qiwi/pijma-desktop@1.139.1) (2021-12-15)
+
+
+
+
+
+### Dependencies
+
+* **@qiwi/pijma-core:** upgraded to 1.141.1
+
+# [1.139.0](https://github.com/qiwi/pijma/compare/@qiwi/pijma-desktop@1.138.0...@qiwi/pijma-desktop@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-desktop@1.137.0...@qiwi/pijma-desktop@1.138.0) (2021-11-26)
 
 

package/lib/es6/actions/Actions.js

@@ -0,0 +1,34 @@
+import React, { Children } from "react";
+import { Box, Flex } from "@qiwi/pijma-core";
+const margin = {
+  accent: 6,
+  normal: 5,
+  minor: 4
+};
+export const Actions = (props) => {
+  const elements = Children.toArray(props.children).filter((child) => !!child);
+  if (elements.length === 0) {
+    return null;
+  }
+  const content = Children.map(elements, (child, key) => /* @__PURE__ */ React.createElement(Box, {
+    key,
+    width: 1,
+    maxWidth: 1,
+    mt: key === 0 || !props.vertical ? void 0 : margin[props.size],
+    ml: key === 0 || props.vertical ? void 0 : margin[props.size],
+    children: child
+  }));
+  if (props.vertical) {
+    return /* @__PURE__ */ React.createElement(Box, {
+      display: "inline-block",
+      maxWidth: 1,
+      children: content
+    });
+  }
+  return /* @__PURE__ */ React.createElement(Flex, {
+    display: "inline-flex",
+    align: "center",
+    maxWidth: 1,
+    children: content
+  });
+};

package/lib/es6/actions/index.js

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

package/lib/es6/alert/Alert.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { Flex, FlexItem, Icon, AlertControl, Box } from "@qiwi/pijma-core";
+import { Paragraph } from "../typography/index.js";
+import { Link } from "../link/index.js";
+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: 16,
+    py: 5
+  }, /* @__PURE__ */ React.createElement(FlexItem, null, /* @__PURE__ */ React.createElement(Icon, {
+    name: AlertIconName[type],
+    color: AlertIconColor[type]
+  })), /* @__PURE__ */ React.createElement(FlexItem, {
+    overflow: "hidden",
+    mx: 4
+  }, /* @__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.js";

package/lib/es6/annotation/Annotation.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Card } from "@qiwi/pijma-core";
+export const Annotation = ({ children }) => /* @__PURE__ */ React.createElement(Card, {
+  px: 11,
+  pt: 11,
+  pb: 12,
+  r: 10,
+  b: "solid 1px #e6e6e6"
+}, children);

package/lib/es6/annotation/index.js

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

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { AccordionControl, Box, Card, Flex, FlexItem, Icon } from "@qiwi/pijma-core";
+import { Paragraph } from "../typography/index.js";
+const BlockAccordionIndent = {
+  s: 8,
+  m: 11,
+  l: 17
+};
+export const BlockAccordion = ({ items, indent = "m", tabIndex = 0, opened, onChange }) => /* @__PURE__ */ React.createElement(AccordionControl, {
+  items,
+  opened,
+  onChange,
+  children: (renderProps) => /* @__PURE__ */ React.createElement(Box, {
+    py: 3
+  }, renderProps.items.map((item, index) => /* @__PURE__ */ React.createElement(Card, {
+    key: index,
+    s: item.hovered || item.focused ? "0 0 16px 0 rgba(0, 0, 0, 0.12)" : index > 0 && !(renderProps.items[index - 1].hovered || renderProps.items[index - 1].focused) ? "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: BlockAccordionIndent[indent],
+    pt: 4,
+    pb: item.opened ? 2 : 4,
+    onClick: item.onClick,
+    onFocus: item.onFocus,
+    onBlur: item.onBlur,
+    onKeyDown: renderProps.onKeyDown
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    bold: true,
+    size: "m"
+  }, 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: BlockAccordionIndent[indent],
+    pb: 4,
+    display: item.opened ? "block" : "none"
+  }, typeof item.content === "string" ? /* @__PURE__ */ React.createElement(Paragraph, {
+    size: "m"
+  }, item.content) : item.content))))
+});
+BlockAccordion.defaultProps = {
+  indent: "m",
+  tabIndex: 0
+};

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

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

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Box } from "@qiwi/pijma-core";
+const BlockContentIdent = {
+  s: 8,
+  m: "44px 44px 48px",
+  l: "44px 68px 48px"
+};
+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.js";

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

@@ -0,0 +1,149 @@
+import React from "react";
+import {
+  TabsControl,
+  TabHeader,
+  Flex,
+  FlexItem,
+  Pos,
+  Card,
+  TabBorder,
+  styled
+} from "@qiwi/pijma-core";
+import { Paragraph } from "../typography/index.js";
+const BlockTabsIndent = {
+  s: [8, 8, 8, 8],
+  m: [11, 11, 12, 11],
+  l: [11, 17, 12, 17]
+};
+const ContentIndent = {
+  s: 4,
+  m: 6,
+  l: 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: ContentIndent[indent],
+    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.js";

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/index.js";
+import { Paragraph } from "../typography/index.js";
+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.js";

package/lib/es6/button/Button.js

@@ -0,0 +1,195 @@
+import React, { Fragment } from "react";
+import {
+  ButtonControl,
+  Spinner,
+  Card,
+  Pos,
+  Flex,
+  FlexItem,
+  Typo,
+  Btn,
+  Stub
+} from "@qiwi/pijma-core";
+const buttonBackground = {
+  brand: "#ff8c00",
+  simple: "#fff padding-box"
+};
+const buttonHoverBackground = {
+  brand: "#ff8200",
+  simple: "#fff padding-box"
+};
+const accentButtonBackground = {
+  brand: "linear-gradient(to bottom, #ff9810, #ff8300)",
+  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: 30,
+  normal: 24,
+  minor: 20
+};
+const buttonSize = {
+  accent: 15,
+  normal: 12,
+  minor: 10
+};
+const buttonMinWith = {
+  accent: 50,
+  normal: 37.5,
+  minor: 25
+};
+const contextPaddingX = {
+  accent: 9,
+  normal: 8,
+  minor: 7
+};
+const textColor = {
+  brand: "#fff",
+  simple: "#000"
+};
+const textSize = {
+  accent: 5,
+  normal: 4,
+  minor: 3.5
+};
+const textHeight = {
+  accent: 7,
+  normal: 5,
+  minor: 4
+};
+const shadow = {
+  brand: "0 15px 50px -10px rgb(255, 206, 135)",
+  simple: "0 15px 50px -10px rgba(0, 0, 0, 0.15)"
+};
+const hoverShadow = {
+  brand: "0 25px 50px -10px rgb(255, 206, 135)",
+  simple: "0 25px 50px -10px rgba(0, 0, 0, 0.15)"
+};
+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],
+  minWidth: props.text ? buttonMinWith[props.size] : void 0,
+  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 ? 3 : 0,
+  width: 6,
+  height: 6
+}, /* @__PURE__ */ React.createElement(Stub, {
+  top: 0.5,
+  right: 0.5,
+  bottom: 0.5,
+  left: 0.5,
+  width: 5,
+  height: 5,
+  r: 10
+})) : 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],
+    minWidth: props.text ? buttonMinWith[props.size] : void 0,
+    bg: props.disabled ? "#e6e6e6" : renderProps.hover || renderProps.focus ? buttonHoverBackground[props.kind] : props.size === "accent" ? accentButtonBackground[props.kind] : buttonBackground[props.kind],
+    b: props.disabled ? "none" : renderProps.hover || renderProps.focus ? buttonHoverBorder[props.kind] : buttonBorder[props.kind],
+    r: buttonRadius[props.size],
+    s: props.disabled ? "none" : (renderProps.hover || renderProps.focus) && props.size === "accent" ? hoverShadow[props.kind] : props.size === "accent" ? shadow[props.kind] : "none",
+    transition: "box-shadow 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: 6,
+              height: 6,
+              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 ? 3 : 0,
+          width: 6,
+          height: 6,
+          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.js";