@synerise/ds-form-field 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+---
+id: form-field
+title: FormField
+---
+
+FormField UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-form-field
+or
+yarn add @synerise/ds-form-field
+```
+
+## Usage
+
+```
+import FormField from '@synerise/ds-form-field'
+
+<FormField />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-form-field--default"></iframe>
+
+## API
+
+| Property      | Description                                     | Type         | Default |
+| ------------- | ----------------------------------------------- | ------------ | ------- |
+| id            | Element id to match label for attribute         | string       | -       |
+| label         | Element label                                   | ReactNode    | -       |
+| tooltip       | Label tooltip text                              | ReactNode    | -       |
+| tooltipConfig | Label tooltip extra config                      | TooltipProps | -       |
+| rightSide     | Content rendered to the right side of the label | ReactNode    | -       |
+| description   | Element description                             | ReactNode    | -       |
+| errorText     | Error message                                   | ReactNode    | -       |

package/dist/FormField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FormFieldProps } from './FormField.types';
+declare const FormField: ({ label, tooltip, id, rightSide, tooltipConfig, description, errorText, children, ...rest }: FormFieldProps) => React.JSX.Element;
+export default FormField;

package/dist/FormField.js

@@ -0,0 +1,33 @@
+var _excluded = ["label", "tooltip", "id", "rightSide", "tooltipConfig", "description", "errorText", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useId } from 'react';
+import * as S from './FormField.styles';
+import { ContentAboveElement } from './components/ContentAboveElement';
+import { ContentBelowElement } from './components/ContentBelowElement';
+var FormField = function FormField(_ref) {
+  var label = _ref.label,
+    tooltip = _ref.tooltip,
+    id = _ref.id,
+    rightSide = _ref.rightSide,
+    tooltipConfig = _ref.tooltipConfig,
+    description = _ref.description,
+    errorText = _ref.errorText,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var uniqueId = useId();
+  var hasContent = Boolean(label || rightSide || description || errorText);
+  return /*#__PURE__*/React.createElement(S.FormFieldWrapper, _extends({
+    hasContent: hasContent
+  }, rest), /*#__PURE__*/React.createElement(ContentAboveElement, {
+    label: label,
+    rightSide: rightSide,
+    id: id || uniqueId,
+    tooltip: tooltip,
+    tooltipConfig: tooltipConfig
+  }), /*#__PURE__*/React.createElement(S.FormFieldComponent, null, children), /*#__PURE__*/React.createElement(ContentBelowElement, {
+    description: description,
+    errorText: errorText
+  }));
+};
+export default FormField;

package/dist/FormField.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const FormFieldWrapper: import("styled-components").StyledComponent<"div", any, {
+    hasContent?: boolean | undefined;
+}, never>;
+export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const FormFieldLabelWrapper: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const FormFieldComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FormField.styles.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { ErrorText as BaseErrorText, Description as BaseDescription, Label, macro } from '@synerise/ds-typography';
+export var FormFieldWrapper = styled.div.withConfig({
+  displayName: "FormFieldstyles__FormFieldWrapper",
+  componentId: "sc-584zv-0"
+})(["", ""], function (props) {
+  return props.hasContent && "display: flex;\n      flex-direction: column;\n      gap: 8px;\n      align-items: stretch;\n      justify-content: flex-start;\n    ";
+});
+export var ErrorText = styled(BaseErrorText).withConfig({
+  displayName: "FormFieldstyles__ErrorText",
+  componentId: "sc-584zv-1"
+})(["margin:0;"]);
+export var Description = styled(BaseDescription).withConfig({
+  displayName: "FormFieldstyles__Description",
+  componentId: "sc-584zv-2"
+})([""]);
+export var FormFieldLabelWrapper = styled(Label).withConfig({
+  displayName: "FormFieldstyles__FormFieldLabelWrapper",
+  componentId: "sc-584zv-3"
+})(["", ";height:17px;display:flex;align-items:center;cursor:pointer;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;"], macro.heading);
+export var IconWrapper = styled.span.withConfig({
+  displayName: "FormFieldstyles__IconWrapper",
+  componentId: "sc-584zv-4"
+})(["display:inline-block;.ds-icon > svg{margin-top:-1px;fill:", ";}"], function (props) {
+  return props.theme.palette['grey-400'];
+});
+export var FormFieldComponent = styled.div.withConfig({
+  displayName: "FormFieldstyles__FormFieldComponent",
+  componentId: "sc-584zv-5"
+})([""]);
+export var ContentAbove = styled.div.withConfig({
+  displayName: "FormFieldstyles__ContentAbove",
+  componentId: "sc-584zv-6"
+})(["display:flex;justify-content:space-between;min-height:18px;"]);
+export var ContentBelow = styled.div.withConfig({
+  displayName: "FormFieldstyles__ContentBelow",
+  componentId: "sc-584zv-7"
+})(["display:flex;flex-direction:column;gap:4px;"]);
+export var RightSide = styled.div.withConfig({
+  displayName: "FormFieldstyles__RightSide",
+  componentId: "sc-584zv-8"
+})(["font-weight:500;flex:1 0 auto;text-align:end;color:", ";"], function (props) {
+  return props.theme.palette['grey-500'];
+});

package/dist/FormField.types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import type { TooltipProps } from '@synerise/ds-tooltip';
+export type ContentAboveProps = BaseLabelProps & {
+    rightSide?: ReactNode;
+};
+type BaseLabelProps = {
+    label?: ReactNode;
+    tooltip?: ReactNode;
+    tooltipConfig?: TooltipProps;
+    id?: string;
+};
+export type FormFieldCommonProps = Omit<ContentAboveProps, 'id' | 'rightSide'> & ContentBelowProps;
+export type FormFieldProps = WithHTMLAttributes<HTMLDivElement, {
+    children?: ReactNode;
+} & ContentAboveProps & ContentBelowProps>;
+export type ContentBelowProps = {
+    errorText?: ReactNode;
+    description?: ReactNode;
+};
+export type FormFieldLabelProps = WithHTMLAttributes<HTMLLabelElement, BaseLabelProps & {
+    children?: ReactNode;
+}>;
+export {};

package/dist/FormField.types.js

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

package/dist/components/ContentAboveElement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ContentAboveProps } from '../FormField.types';
+export declare const ContentAboveElement: ({ label, id, tooltip, tooltipConfig, rightSide }: ContentAboveProps) => React.JSX.Element;

package/dist/components/ContentAboveElement.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as S from '../FormField.styles';
+import { FormFieldLabel } from './FormFieldLabel';
+export var ContentAboveElement = function ContentAboveElement(_ref) {
+  var label = _ref.label,
+    id = _ref.id,
+    tooltip = _ref.tooltip,
+    tooltipConfig = _ref.tooltipConfig,
+    rightSide = _ref.rightSide;
+  return label || rightSide ? /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(FormFieldLabel, {
+    label: label,
+    id: id,
+    tooltip: tooltip,
+    tooltipConfig: tooltipConfig
+  }), /*#__PURE__*/React.createElement(S.RightSide, null, rightSide)) : /*#__PURE__*/React.createElement(React.Fragment, null);
+};

package/dist/components/ContentBelowElement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ContentBelowProps } from '../FormField.types';
+export declare const ContentBelowElement: ({ description, errorText }: ContentBelowProps) => React.JSX.Element | null;

package/dist/components/ContentBelowElement.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as S from '../FormField.styles';
+export var ContentBelowElement = function ContentBelowElement(_ref) {
+  var description = _ref.description,
+    errorText = _ref.errorText;
+  if (!errorText && !description) {
+    return null;
+  }
+  var hasErrorMessage = Boolean(errorText);
+  return /*#__PURE__*/React.createElement(S.ContentBelow, null, hasErrorMessage && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, null, description));
+};

package/dist/components/FormFieldLabel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FormFieldLabelProps } from '../FormField.types';
+export declare const FormFieldLabel: ({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: FormFieldLabelProps) => React.JSX.Element;

package/dist/components/FormFieldLabel.js

@@ -0,0 +1,33 @@
+var _excluded = ["id", "label", "tooltip", "tooltipConfig", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import Tooltip from '@synerise/ds-tooltip';
+import Icon, { InfoFillS } from '@synerise/ds-icon';
+import { Text } from '@synerise/ds-typography';
+import * as S from '../FormField.styles';
+export var FormFieldLabel = function FormFieldLabel(_ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    tooltip = _ref.tooltip,
+    tooltipConfig = _ref.tooltipConfig,
+    children = _ref.children,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (label || children) && /*#__PURE__*/React.createElement(S.FormFieldLabelWrapper, _extends({
+    htmlFor: id
+  }, htmlAttributes), /*#__PURE__*/React.createElement(Text, {
+    ellipsis: {
+      tooltip: label || children
+    }
+  }, label || children), (tooltip || tooltipConfig) && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    title: tooltip,
+    placement: "top",
+    trigger: "hover",
+    transitionName: "zoom-big-fast"
+  }, tooltipConfig), /*#__PURE__*/React.createElement(S.IconWrapper, {
+    "data-testid": "label-tooltip-trigger"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: 24,
+    component: /*#__PURE__*/React.createElement(InfoFillS, null)
+  })))));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { FormFieldLabel } from './FormFieldLabel';
+export { ContentAboveElement } from './ContentAboveElement';
+export { ContentBelowElement } from './ContentBelowElement';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { FormFieldLabel } from './FormFieldLabel';
+export { ContentAboveElement } from './ContentAboveElement';
+export { ContentBelowElement } from './ContentBelowElement';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './FormField';
+export * from './components';
+export type { FormFieldProps, FormFieldCommonProps, FormFieldLabelProps, ContentAboveProps, ContentBelowProps, } from './FormField.types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default } from './FormField';
+export * from './components';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@synerise/ds-form-field",
+  "version": "1.0.0",
+  "description": "FormField UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^1.3.0",
+    "@synerise/ds-tooltip": "^1.1.3",
+    "@synerise/ds-typography": "^1.0.4",
+    "@synerise/ds-utils": "^1.0.1"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "1682edec2e4b03e3960c3de671cd7d3f3a2e01e4"
+}