@pushwoosh/dumb-components 1.0.15 → 1.0.16

package/FieldBox/FieldBox.js

@@ -1,19 +1,50 @@
 import React from 'react';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
+import { Color, Spacing, Tag } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon, InfoRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
+import { Tooltip } from '../Tooltip';
+import { TitleBox, Link } from './styles';
 export function FieldBox(props) {
   const {
     title,
     description,
+    isOptional,
+    link,
+    tooltip,
+    actions,
     error,
     children
   } = props;
   return React.createElement(Vertical, {
     "$gap": Spacing.S1
-  }, React.createElement(Text, {
+  }, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$justifyContent": "space-between"
+  }, React.createElement(TitleBox, null, React.createElement(Text, {
     "$variant": "h5"
-  }, title), children, description && React.createElement(Text, {
+  }, title), isOptional && React.createElement(Text, {
+    "$color": Color.LOCKED,
+    "$variant": "footnote"
+  }, "(optional)"), tooltip && React.createElement(Tooltip, {
+    content: tooltip,
+    position: "right-middle"
+  }, React.createElement("div", null, React.createElement(InfoRoundIcon, {
+    color: Color.LOCKED,
+    size: "small",
+    view: "lined"
+  }))), link && React.createElement(Link, {
+    as: Tag.A,
+    href: link,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined"
+  }))), actions && React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": Spacing.S1
+  }, actions)), children, description && !error && React.createElement(Text, {
     "$variant": "h5",
     "$color": Color.LOCKED
   }, description), error && React.createElement(Text, {

package/FieldBox/styles.d.ts

@@ -0,0 +1,20 @@
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Link as LinkBase } from '../Link';
+export declare const TitleBox: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $gap: Spacing;
+}, "$gap" | "$gridAutoFlow" | "$alignItems" | "$justifyContent">;
+export declare const Link: import("styled-components").StyledComponent<typeof LinkBase, any, {}, never>;

package/FieldBox/styles.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Link as LinkBase } from '../Link';
+export const TitleBox = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'start',
+  $gap: Spacing.S1
+}).withConfig({
+  displayName: "TitleBox",
+  componentId: "sc-lzrphm-0"
+})(["text-transform:uppercase;"]);
+export const Link = styled(LinkBase).withConfig({
+  displayName: "Link",
+  componentId: "sc-lzrphm-1"
+})(["color:", ";&:hover{color:", ";}&:active{opacity:0.5;}"], Color.SOFT, Color.PRIMARY_HOVER);

package/FieldBox/types.d.ts

@@ -2,5 +2,9 @@ import { type PropsWithChildren, type ReactNode } from 'react';
 export type FieldBoxProps = PropsWithChildren<{
     title: ReactNode;
     description?: ReactNode;
+    isOptional?: boolean;
+    link?: string;
+    tooltip?: string;
+    actions?: ReactNode;
     error?: ReactNode;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",