@ama-pt/agora-design-system 0.1.1

package/dist/esm/components/ui/atoms/input_password/input_password.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import './input_password.scss';
+export interface InputPasswordProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Input ID.
+     * @default ''
+     */
+    id: string;
+    /**
+     * Input descriptive label.
+     * @default 'Input Label'
+     */
+    label?: string;
+    /**
+     * Descritive attribute that labels the checkbox in terms of accessibility
+     * @default null
+     */
+    ariaLabel?: string;
+    /**
+     * Decides if display/hide label.
+     * @default false
+     */
+    hideLabel?: boolean | 'true' | 'false';
+    /**
+     * Text informative displayed below input text
+     * @default null
+     */
+    feedbackText?: string;
+    /**
+     * Icon displayed inside the Input Text on left center corner
+     * @default null
+     */
+    leadingIcon?: string;
+    /**
+     * Intial value
+     * @default null
+     */
+    initialValue?: string;
+    /**
+     * Indicates the feedback state of feedback text.
+     * This param will change the left feedback icon and dye it.
+     */
+    feedbackState?: 'info' | 'danger' | 'success' | 'warning';
+    /**
+     * Hightlight the input indicating some error
+     * @default false
+     */
+    hasError?: boolean | 'true' | 'false';
+    /**
+     * Indicates that this input char length limitation.
+     * @default -1
+     */
+    maxChars?: number;
+    /**
+     * Allow to show/hide the char counter on right button corner.
+     * @default false
+     */
+    showCharCounter?: boolean | 'true' | 'false';
+    /**
+     * Alternative text for improve clear text icon Accessibility
+     * @default null
+     */
+    togglePasswordAltIconText?: string;
+    /**
+     * Allow to show/hide the char counter on right button corner.
+     * @default false
+     */
+    isOptional?: boolean | 'true' | 'false';
+}
+export declare const InputPassword: React.FC<InputPasswordProps>;

package/dist/esm/components/ui/atoms/input_password/input_password.js

@@ -0,0 +1,109 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
+import { stringToBoolean } from '../../../utils';
+import { Icon } from '../icon';
+import './input_password.scss';
+export const InputPassword = (_a) => {
+    var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', leadingIcon, initialValue = '', togglePasswordAltIconText = '', className = '', isOptional, id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "leadingIcon", "initialValue", "togglePasswordAltIconText", "className", "isOptional", "id"]);
+    const propsClone = Object.assign({}, props);
+    const { onChange } = propsClone;
+    const inputRef = useRef(null);
+    const [showPassword, setShowPassword] = useState(false);
+    const [currentValue, setCurrentValue] = useState(initialValue);
+    /**
+     * Show/Hide password
+     * @param evt Event
+     */
+    const handleTogglePassword = () => {
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            inputRef.current.focus();
+        }
+        setShowPassword(!showPassword);
+    };
+    /**
+     * Local onChange event handler. This functions allow us
+     * set a limit for chars amount
+     * @param evt Event
+     */
+    const handleChangeEvent = (evt) => {
+        const { value } = evt.currentTarget;
+        if (maxChars === -1 || (value === null || value === void 0 ? void 0 : value.length) <= maxChars) {
+            setCurrentValue(value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(evt);
+    };
+    /**
+     * Dictionary of possible icons feedback.
+     * @var
+     */
+    const feedbackStateIconsMap = {
+        info: 'agora-solid-info',
+        danger: 'agora-solid-danger',
+        success: 'agora-solid-tick-circle',
+        warning: 'agora-solid-alert'
+    };
+    /**
+     * Builds main Classes for whole component
+     * @returns Object
+     */
+    const inputClassBuilder = () => {
+        return {
+            // main wrapper class
+            inputWrapperClasses: classNames('agora-input-password--wrapper', {
+                'input-disabled': disabled,
+                'input-has-error': stringToBoolean(hasError)
+            }),
+            // classes for above input sections [label and hint icon]
+            labelSectionClasses: classNames('input-label-wrapper', 'flex', 'items-end', {
+                'mb-8': label && !stringToBoolean(hideLabel),
+                'justify-end': !label || stringToBoolean(hideLabel),
+                'justify-between': label && !stringToBoolean(hideLabel)
+            }),
+            // text input component classes
+            inputClasses: classNames('agora-input-password', 'flex-1', {
+                'has-leading-icon': leadingIcon && leadingIcon.indexOf('agora-line') === 0,
+                'has-value': currentValue.length > 0
+            }, className),
+            leadigIconWrapperClasses: classNames('input-icon', 'input-leading--icon', {
+                'dye-as-solid': (leadingIcon === null || leadingIcon === void 0 ? void 0 : leadingIcon.indexOf('agora-solid')) === 0,
+                'dye-as-line': (leadingIcon === null || leadingIcon === void 0 ? void 0 : leadingIcon.indexOf('agora-solid')) !== 0
+            })
+        };
+    };
+    const { inputWrapperClasses, labelSectionClasses, inputClasses, leadigIconWrapperClasses } = inputClassBuilder();
+    if (stringToBoolean(isOptional)) {
+        delete propsClone.required;
+    }
+    else {
+        propsClone.required = true;
+    }
+    return (React.createElement("div", { className: inputWrapperClasses },
+        React.createElement("div", { className: labelSectionClasses },
+            React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-interaction-input-label" }, label)),
+        React.createElement("div", { className: "input-wrapper flex relative items-center" },
+            React.createElement("input", Object.assign({ type: showPassword ? 'text' : 'password', id: id, value: currentValue, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), ref: inputRef, onChange: handleChangeEvent }, propsClone)),
+            leadingIcon && leadingIcon.indexOf('agora-line') === 0 && (React.createElement("div", { className: leadigIconWrapperClasses },
+                React.createElement(Icon, { icon: leadingIcon, ariaHidden: true }))),
+            React.createElement("button", { type: "button", className: "input-icon input-btn--toggle bg-transparent", onClick: handleTogglePassword, "aria-label": togglePasswordAltIconText },
+                React.createElement(Icon, { icon: `agora-line-${showPassword ? 'eye-disable' : 'eye'}`, alt: togglePasswordAltIconText }))),
+        React.createElement("div", { className: "flex items-center justify-between" },
+            React.createElement("div", { className: "flex items-center input-feedback mt-8" },
+                feedbackText && (React.createElement("span", { className: `mr-8 feedback-icon-wrapper feedback-icon-wrapper--${feedbackState}` }, !stringToBoolean(hasError) ? (React.createElement(Icon, { icon: feedbackStateIconsMap[feedbackState], size: "s", alt: feedbackText })) : (React.createElement(Icon, { icon: "agora-solid-danger", size: "s", alt: feedbackText })))),
+                React.createElement("p", { className: "text-type-specs-caption text-neutral-700" }, feedbackText)),
+            stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-type-specs-caption text-neutral-700 mt-8 pl-16" },
+                currentValue.length,
+                " ",
+                maxChars !== -1 ? `/${maxChars}` : '')))));
+};
+//# sourceMappingURL=input_password.js.map

package/dist/esm/components/ui/atoms/input_password/input_password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_password.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/input_password/input_password.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ui/atoms/input_password/input_password.scss

@@ -0,0 +1,182 @@
+@mixin dyeLineIcon($colorClass) {
+  path {
+    fill: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+@mixin dyeSolidIcon($colorClass) {
+  path {
+    stroke: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+.agora-input-password--wrapper {
+  @apply flex flex-col relative;
+
+  .input-btn--toggle {
+    @include dyeLineIcon('stroke-neutral-900 opacity-50');
+    @apply cursor-pointer absolute flex items-center justify-center right-8 top-8;
+    height: 44px;
+    width: 44px;
+  }
+
+  // normal leading icons color on default status input text
+  .input-icon {
+    &.dye-as-solid {
+      @include dyeSolidIcon('fill-neutral-900 opacity-70');
+    }
+    &.dye-as-line {
+      @include dyeLineIcon('stroke-neutral-900 opacity-70');
+    }
+  }
+  //# end
+
+  & span.hint-icon-wrapper {
+    svg {
+      path {
+        stroke: transparent;
+        @apply fill-informative-500;
+      }
+    }
+  }
+
+  .feedback-icon-wrapper {
+    &--info {
+      path {
+        stroke: transparent;
+        @apply fill-informative-500;
+      }
+    }
+
+    &--success {
+      path {
+        stroke: transparent;
+        @apply fill-success-500;
+      }
+    }
+
+    &--danger {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500;
+      }
+    }
+
+    &--warning {
+      path {
+        stroke: transparent;
+        @apply fill-alert-700;
+      }
+    }
+  }
+
+  .input-leading--icon {
+    @apply absolute right-0 bottom-24 left-16 w-min;
+    top: 18px;
+  }
+
+  .agora-input-password {
+    @apply border-2 border-neutral-300 outline-none rounded-4 px-16 pr-48 transition-all ease-in-out text-interaction-input-text;
+    height: 60px;
+
+    &.has-leading-icon {
+      @apply pl-56;
+    }
+
+    &:hover:not(:focus):not(:disabled):not(:read-only) {
+      @apply border-neutral-800;
+
+      & ~ .input-btn--toggle {
+        @include dyeLineIcon('stroke-neutral-900 opacity-100');
+      }
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-neutral-900 opacity-100');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-neutral-900 opacity-100');
+        }
+      }
+      //# end
+    }
+
+    // disabled
+    &:disabled,
+    &:read-only {
+      @apply border-neutral-100 bg-neutral-100 cursor-not-allowed #{!important};
+
+      &:focus:read-only {
+        @apply border-primary-600 #{!important}; // force border
+      }
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-neutral-900  opacity-70');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-neutral-900  opacity-70');
+        }
+      }
+      //# end
+    }
+
+    & ~ .input-btn--toggle:active {
+      @apply visible;
+    }
+
+    &.has-value {
+      @apply border-neutral-500;
+      & ~ .input-btn--toggle {
+        @include dyeLineIcon('stroke-neutral-900 opacity-100');
+      }
+    }
+
+    &:not(:focus) {
+      @apply outline-0;
+    }
+
+    &:not(:disabled):focus {
+      @apply border-primary-600 pr-48 outline outline-2 outline-offset-2 outline-primary-600;
+
+      & ~ .input-btn--toggle {
+        @include dyeLineIcon('stroke-primary-600 opacity-100');
+      }
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-primary-600 opacity-100');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-primary-600  opacity-100');
+        }
+      }
+      //# end
+    }
+  }
+
+  &.input-has-error {
+    .input-btn--toggle {
+      path {
+        fill: transparent;
+        @apply stroke-neutral-900 #{!important};
+      }
+    }
+
+    .input-feedback {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500 #{!important};
+      }
+    }
+
+    .agora-input-password:not(:disabled):not(:read-only) {
+      @apply border-2 bg-danger-50 border-danger-500 #{!important};
+    }
+  }
+}

package/dist/esm/components/ui/atoms/input_password/input_password.stories.d.ts

@@ -0,0 +1,13 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { InputPasswordProps } from './input_password';
+declare const _default: ComponentMeta<React.FC<InputPasswordProps>>;
+export default _default;
+export declare const InputPasswordComp: Story<any>;
+export declare const InputPasswordFeedbackInfo: Story<any>;
+export declare const InputPasswordFeedbackSuccess: Story<any>;
+export declare const InputPasswordFeedbackWarning: Story<any>;
+export declare const InputPasswordFeedbackDanger: Story<any>;
+export declare const InputTextCompHasReadOnly: Story<any>;
+export declare const InputTextCompDisabled: Story<any>;
+export declare const InputTextCompHasError: Story<any>;

package/dist/esm/components/ui/atoms/input_password/input_password.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { InputPassword } from './input_password';
+import { argTypes } from './input_password.csf';
+export default {
+    title: 'Components/Atoms/Input Password',
+    component: InputPassword,
+    argTypes: Object.assign({}, argTypes)
+};
+export const InputPasswordComp = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password" }))));
+InputPasswordComp.storyName = 'Input Password';
+InputPasswordComp.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputPasswordFeedbackInfo = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password", feedbackText: "Some info feedback" }))));
+InputPasswordFeedbackInfo.storyName = 'Input Password Feedback Info';
+InputPasswordFeedbackInfo.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputPasswordFeedbackSuccess = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password", feedbackText: "Some success feedback", feedbackState: "success" }))));
+InputPasswordFeedbackSuccess.storyName = 'Input Password Feedback Success';
+InputPasswordFeedbackSuccess.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputPasswordFeedbackWarning = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password", feedbackText: "Some warning feedback", feedbackState: "warning" }))));
+InputPasswordFeedbackWarning.storyName = 'Input Password Feedback Warning';
+InputPasswordFeedbackWarning.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputPasswordFeedbackDanger = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password", feedbackText: "Some danger feedback", feedbackState: "danger" }))));
+InputPasswordFeedbackDanger.storyName = 'Input Password Feedback Danger';
+InputPasswordFeedbackDanger.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextCompHasReadOnly = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password" }))));
+InputTextCompHasReadOnly.storyName = 'Input Password Read Only';
+InputTextCompHasReadOnly.args = {
+    readOnly: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextCompDisabled = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password" }))));
+InputTextCompDisabled.storyName = 'Input Password Disabled';
+InputTextCompDisabled.args = {
+    disabled: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextCompHasError = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputPassword, Object.assign({}, args, { id: "input-password" }))));
+InputTextCompHasError.storyName = 'Input Password Error';
+InputTextCompHasError.args = {
+    hasError: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+//# sourceMappingURL=input_password.stories.js.map

package/dist/esm/components/ui/atoms/input_password/input_password.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_password.stories.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/input_password/input_password.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ui/atoms/input_text/index.d.ts

@@ -0,0 +1 @@
+export { InputText } from './input_text';

package/dist/esm/components/ui/atoms/input_text/index.js

@@ -0,0 +1,2 @@
+export { InputText } from './input_text';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ui/atoms/input_text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/input_text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/components/ui/atoms/input_text/input_text.csf.d.ts

@@ -0,0 +1,189 @@
+export declare const parameters: {
+    actions: {
+        handles: string[];
+    };
+    design: {
+        type: string;
+        url: string;
+    };
+};
+export declare const argTypes: {
+    label: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    ariaLabel: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+        };
+    };
+    hideLabel: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    placeholder: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    initialValue: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    feedbackText: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    feedbackState: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    leadingIcon: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: null;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    hasError: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    disabled: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    readOnly: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    showCharCounter: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    maxChars: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: number;
+    };
+    isOptional: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: boolean;
+    };
+};