@ama-pt/agora-design-system 0.1.1

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

@@ -0,0 +1,129 @@
+import { allIcons } from '../icon';
+export const parameters = {
+    actions: {
+        handles: ['mouseenter', 'click', 'focusin', 'focusout']
+    },
+    design: {
+        type: 'zeroheight',
+        url: 'https://zeroheight.com/1be481dc2/p/489b41-buttons/b/026ea1'
+    }
+};
+export const argTypes = {
+    label: {
+        type: { name: 'string', required: true },
+        description: 'Label to display above input. ',
+        defaultValue: ''
+    },
+    ariaLabel: {
+        type: { name: 'string', required: false },
+        description: 'Descritive attribute that labels the checkbox in terms of accessibility',
+        defaultValue: '',
+        control: {
+            type: 'text'
+        }
+    },
+    hideLabel: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether to show/hide input field label',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    placeholder: {
+        type: { name: 'string', required: false },
+        description: 'Placeholder to display when no text.',
+        defaultValue: ''
+    },
+    initialValue: {
+        type: { name: 'string', required: false },
+        description: 'Default value.',
+        defaultValue: ''
+    },
+    feedbackText: {
+        type: { name: 'string', required: false },
+        description: 'Feedback to display',
+        defaultValue: ''
+    },
+    feedbackState: {
+        type: { name: 'string', required: false },
+        description: 'Feedback message state.',
+        defaultValue: 'info',
+        control: {
+            type: 'select',
+            options: ['info', 'success', 'danger', 'warning']
+        }
+    },
+    leadingIcon: {
+        type: { name: 'string', required: false },
+        description: 'Icon to display on the left side',
+        defaultValue: null,
+        control: {
+            type: 'select',
+            options: ['no-icon', ...allIcons.filter((icon) => icon.indexOf('agora-line') === 0)] // allowing only line family icon
+        }
+    },
+    hasError: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Input has any validation error',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    disabled: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Input is disabled.',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    readOnly: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Input is Read only.',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    showCharCounter: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether show char counter.',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    maxChars: {
+        type: { name: 'number', required: false },
+        description: 'Maximum chars allowed.',
+        defaultValue: -1
+    },
+    isOptional: {
+        type: { name: 'boolean', required: false },
+        description: 'Decides if this field could be optional',
+        defaultValue: false
+    }
+};
+//# sourceMappingURL=input_text.csf.js.map

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

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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import './input_text.scss';
+export interface InputTextProps 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';
+    /**
+     * Allow to show/hide the char counter on right button corner.
+     * @default false
+     */
+    isOptional?: boolean | 'true' | 'false';
+}
+export declare const InputText: React.FC<InputTextProps>;

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

@@ -0,0 +1,96 @@
+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_text.scss';
+export const InputText = (_a) => {
+    var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', leadingIcon, initialValue, isOptional, className = '', id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "leadingIcon", "initialValue", "isOptional", "className", "id"]);
+    const propsClone = Object.assign({}, props);
+    const { onChange } = propsClone;
+    const inputRef = useRef(null);
+    const [currentValue, setCurrentValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
+    /**
+     * 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-text--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-text', '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: "text", 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("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_text.js.map

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

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

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

@@ -0,0 +1,160 @@
+@mixin dyeLineIcon($colorClass) {
+  path {
+    fill: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+@mixin dyeSolidIcon($colorClass) {
+  path {
+    stroke: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+.agora-input-text--wrapper {
+  @apply flex flex-col relative;
+
+  // 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 right-0 bottom-24 left-16 absolute w-min;
+    top: 18px;
+  }
+
+  .agora-input-text {
+    @apply border-2  border-neutral-300 outline-none rounded-4 px-16 transition-all ease-in-out text-interaction-input-text text-neutral-900;
+    height: 60px;
+
+    &.has-leading-icon {
+      @apply pl-56;
+    }
+
+    // hover
+    &:hover:not(:focus):not(:disabled):not(:read-only) {
+      @apply border-neutral-800;
+
+      // 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 cursor-not-allowed bg-neutral-100 #{!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--clear:active {
+      @apply visible #{!important};
+    }
+
+    // has content
+    &.has-value:not(:read-only) {
+      @apply border-neutral-500;
+    }
+
+    &:not(:focus) {
+      @apply outline-0;
+    }
+
+    // focus
+    &:not(:disabled):focus {
+      @apply border-primary-600 outline-2 outline  outline-primary-600 outline-offset-2;
+
+      // 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-feedback {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500 #{!important};
+      }
+    }
+
+    .agora-input-text:not(:disabled):not(:read-only) {
+      @apply bg-danger-50 border-danger-500 #{!important};
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { InputTextProps } from './input_text';
+declare const _default: ComponentMeta<React.FC<InputTextProps>>;
+export default _default;
+export declare const InputTextComp: Story<any>;
+export declare const InputTextFeedbackInfo: Story<any>;
+export declare const InputTextFeedbackSuccess: Story<any>;
+export declare const InputTextFeedbackWarning: Story<any>;
+export declare const InputTextFeedbackDanger: 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_text/input_text.stories.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { InputText } from './input_text';
+import { argTypes } from './input_text.csf';
+export default {
+    title: 'Components/Atoms/Input Text',
+    component: InputText,
+    argTypes: Object.assign({}, argTypes)
+};
+export const InputTextComp = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text" }))));
+InputTextComp.storyName = 'Input Text';
+InputTextComp.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextFeedbackInfo = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text", feedbackText: "Some info feedback" }))));
+InputTextFeedbackInfo.storyName = 'Input Text Feedback Info';
+InputTextFeedbackInfo.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextFeedbackSuccess = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text", feedbackText: "Some success feedback", feedbackState: "success" }))));
+InputTextFeedbackSuccess.storyName = 'Input Text Feedback Success';
+InputTextFeedbackSuccess.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextFeedbackWarning = (args) => (React.createElement("div", { className: "p-8" },
+    ' ',
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text", feedbackText: "Some warning feedback", feedbackState: "warning" }))));
+InputTextFeedbackWarning.storyName = 'Input Text Feedback Warning';
+InputTextFeedbackWarning.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextFeedbackDanger = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text", feedbackText: "Some danger feedback", feedbackState: "danger" }))));
+InputTextFeedbackDanger.storyName = 'Input Text Feedback Danger';
+InputTextFeedbackDanger.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextCompHasReadOnly = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text" }))));
+InputTextCompHasReadOnly.storyName = 'Input Text Read Only';
+InputTextCompHasReadOnly.args = {
+    readOnly: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextCompDisabled = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text" }))));
+InputTextCompDisabled.storyName = 'Input Text Disabled';
+InputTextCompDisabled.args = {
+    disabled: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+export const InputTextCompHasError = (args) => (React.createElement("div", { className: "p-8" },
+    React.createElement(InputText, Object.assign({}, args, { id: "input-text" }))));
+InputTextCompHasError.storyName = 'Input Text Error';
+InputTextCompHasError.args = {
+    hasError: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+//# sourceMappingURL=input_text.stories.js.map

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

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

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

@@ -0,0 +1 @@
+export { InputTextArea } from './input_textarea';

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

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

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

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