pds-dev-kit-web-test 0.0.1

package/dist/src/mobile/components/TextField/TextField.js

@@ -0,0 +1,280 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable react/jsx-no-bind */
+var react_1 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../common/components");
+var IconButton_1 = require("../IconButton");
+function TextField(_a) {
+    var _b;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var iconThemeColorNoneObj = {
+        normal: 'ui_cpnt_button_icon_default',
+        read_only: 'ui_cpnt_button_icon_default',
+        disabled: 'ui_cpnt_button_icon_disabled'
+    };
+    var iconThemeColorDarkObj = {
+        normal: 'ui_cpnt_textfield_icon_darktheme_default',
+        read_only: 'ui_cpnt_textfield_icon_darktheme_default',
+        disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
+    };
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var _r = (0, react_1.useState)(false), isFocused = _r[0], setIsFocused = _r[1];
+    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, trigger = _s.trigger, errors = _s.formState.errors;
+    var _t = register(name, validation), validateOnChange = _t.onChange, validateOnBlur = _t.onBlur;
+    var isError = Object.keys(errors).some(function (error) { return error === name; });
+    var handleClickIBtn1 = function () {
+        if (onClickIBtn1) {
+            onClickIBtn1();
+        }
+    };
+    var handleClickIBtn2 = function () {
+        if (onClickIBtn2) {
+            onClickIBtn2();
+        }
+    };
+    function handleFocus(e) {
+        if (state !== 'read_only') {
+            setIsFocused(true);
+        }
+        if (onFocus) {
+            onFocus(e);
+        }
+    }
+    function handleTarget() {
+        if (onTarget) {
+            onTarget();
+        }
+    }
+    function handleKeyUp(e) {
+        if (onKeyUp) {
+            onKeyUp(e);
+        }
+    }
+    function handleChange(e) {
+        if (validationPoint === 'onChange') {
+            validateOnChange(e);
+        }
+        if (onChange) {
+            onChange(e);
+        }
+    }
+    function handleBlur(e) {
+        if (validationPoint === 'onBlur') {
+            validateOnBlur(e);
+        }
+        if (onBlur) {
+            onBlur(e);
+        }
+        setIsFocused(false);
+        trigger(name);
+    }
+    var S_TextField = function () {
+        if (textLineType === 'multi') {
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+        }
+        if (textLineType === 'auto') {
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+        }
+        if (textLineType === 'single') {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, isFocused: isFocused, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(S_IconBox, null,
+                    iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
+                            {
+                                none: iconThemeColorNoneObj[state],
+                                dark: iconThemeColorDarkObj[state]
+                            }[colorTheme], iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })),
+                    iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
+                            {
+                                none: iconThemeColorNoneObj[state],
+                                dark: iconThemeColorDarkObj[state]
+                            }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
+        }
+    };
+    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
+}
+var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            small: 'width: 188px;',
+            medium: 'width: 188px;',
+            large: 'width: 432px;',
+            rlarge: 'width: 100%'
+        }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+});
+var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
+var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return (46 -
+        Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
+        2;
+}, function (_a) {
+    var theme = _a.theme;
+    return (46 -
+        Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
+        2;
+});
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var size = _a.size;
+    return (size === 'rlarge' ? '100%' : '432px');
+}, function (_a) {
+    var textLineType = _a.textLineType;
+    return textLineType === 'multi' && multi;
+}, function (_a) {
+    var textLineType = _a.textLineType;
+    return textLineType === 'auto' && auto;
+});
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_normal;
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
+    if (isError)
+        return theme.ui_cpnt_textfield_border_error;
+    if (isFocused)
+        return theme.ui_cpnt_textfield_border_focus;
+    return theme.ui_cpnt_textfield_border_normal;
+});
+var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_normal;
+});
+var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_disabled;
+});
+var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_normal;
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
+    if (isError)
+        return theme.ui_cpnt_textfield_border_darktheme_error;
+    if (isFocused)
+        return theme.ui_cpnt_textfield_border_darktheme_focus;
+    return theme.ui_cpnt_textfield_border_darktheme_normal;
+});
+var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_darktheme_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_darktheme_normal;
+});
+var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_darktheme_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_darktheme_normal;
+});
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            small: small,
+            medium: medium,
+            large: large,
+            rlarge: large
+        }[size];
+}, function (_a) {
+    var state = _a.state, colorTheme = _a.colorTheme;
+    return colorTheme === 'none' &&
+        state &&
+        {
+            normal: normal,
+            read_only: read_only,
+            disabled: disabled
+        }[state];
+}, function (_a) {
+    var state = _a.state, colorTheme = _a.colorTheme;
+    return colorTheme === 'dark' &&
+        state &&
+        {
+            normal: dark_normal,
+            read_only: dark_read_only,
+            disabled: dark_disabled
+        }[state];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+});
+var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'none'
+        ? theme.ui_cpnt_textfield_text_error
+        : theme.ui_cpnt_textfield_text_darktheme_error;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+exports.default = TextField;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/src/mobile/components/TextField/index.d.ts

@@ -0,0 +1 @@
+export { default as TextField } from './TextField';

package/dist/src/mobile/components/TextField/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = void 0;
+var TextField_1 = require("./TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return __importDefault(TextField_1).default; } });

package/dist/src/mobile/components/TextLabel/TextLabel.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { PDSTextType, UiColors } from '../../../common';
+export declare type TextLabelProps = {
+    text: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
+    styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
+    colorOverride?: UiColors;
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    singleLineMode?: 'none' | 'use';
+    ellipsisMode?: 'none' | 'use';
+    lineLimit?: number;
+    userSelectMode?: 'none' | 'use';
+    customFontSize?: string;
+    customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
+    requirementMode?: 'none' | 'use';
+    bulletPointMode?: 'none' | 'use';
+};
+export declare type TextStyleProps = {
+    textAlign?: 'left' | 'center' | 'right';
+    styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
+    colorOverride?: UiColors;
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    singleLineMode?: 'none' | 'use';
+    ellipsisMode?: 'none' | 'use';
+    lineLimit?: number;
+    userSelectMode?: 'none' | 'use';
+    customFontSize?: string;
+    customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
+    bulletPointMode?: 'none' | 'use';
+};
+declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode }: TextLabelProps): JSX.Element;
+export default TextLabel;