@ama-pt/agora-design-system 0.1.1

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

@@ -0,0 +1,244 @@
+@mixin dyeLineIcon($colorClass) {
+  path {
+    fill: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+@mixin dyeSolidIcon($colorClass) {
+  path {
+    stroke: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+.agora-input-number-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;
+  }
+
+  .input-number-controls {
+    width: 96px;
+    @apply absolute h-56 flex justify-between items-center right-8 bg-white;
+    &::before {
+      content: '';
+      @apply absolute h-24 bg-neutral-200;
+      left: 47px;
+      width: 2px;
+    }
+    button {
+      @apply flex justify-center items-center;
+      width: 44px;
+      height: 44px;
+
+      svg {
+        @apply pointer-events-none absolute transition-all ease-in-out;
+
+        &.icon-step--hover {
+          @apply translate-y-16 opacity-0 fill-primary-600;
+        }
+        &.icon-step--default {
+          @apply opacity-100 stroke-primary-600;
+        }
+      }
+
+      &:not(:disabled) {
+        &:active {
+          svg {
+            @apply scale-95;
+          }
+        }
+
+        &:hover {
+          svg {
+            @apply pointer-events-none absolute transition-all ease-in-out;
+
+            &.icon-step--hover {
+              @apply translate-y-0 opacity-100;
+            }
+            &.icon-step--default {
+              @apply -translate-y-16 opacity-0;
+            }
+          }
+        }
+      }
+      &:disabled {
+        @apply opacity-50 cursor-not-allowed;
+      }
+    }
+  }
+
+  &.is-hovered input:not(:disabled):not(:read-only):not(:focus) {
+    @apply border-neutral-800 border-2;
+  }
+
+  .agora-input-number {
+    @apply w-full 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;
+    padding-right: 100px;
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &.has-leading-icon {
+      @apply pl-56;
+    }
+
+    & ~ div {
+      button:focus,
+      button:focus-visible {
+        @apply outline-none border-2 border-primary-600 rounded-4 #{!important};
+      }
+    }
+
+    //# mouse over not focus, not disabled, not read only
+    &: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 ~ .input-number-controls,
+    &:read-only ~ .input-number-controls {
+      @apply bg-transparent pointer-events-none;
+      button svg {
+        @include dyeSolidIcon('stroke-neutral-900  opacity-50');
+      }
+    }
+
+    // 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
+    }
+
+    // filled
+    &.has-value:not(:read-only) {
+      @apply border-neutral-500;
+    }
+
+    &:not(:focus) {
+      @apply outline-0;
+    }
+    // focus
+    &:not(:disabled):focus {
+      @apply border-primary-600 outline outline-2 outline-offset-2 outline-primary-600;
+
+      // 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};
+      }
+    }
+    .input-number-controls {
+      @apply bg-danger-50;
+      button svg {
+        &.icon-step--default {
+          @include dyeLineIcon('stroke-neutral-900');
+        }
+        &.icon-step--hover {
+          @include dyeSolidIcon('fill-neutral-900');
+        }
+      }
+    }
+    // has error
+    .agora-input-number:not(:disabled):not(:read-only) {
+      @apply bg-danger-50 border-danger-500 #{!important};
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { InputNumberProps } from './input_number';
+declare const _default: ComponentMeta<React.FC<InputNumberProps>>;
+export default _default;
+export declare const InputTextComp: Story<InputNumberProps>;
+export declare const InputTextFeedbackInfo: Story<InputNumberProps>;
+export declare const InputTextFeedbackSuccess: Story<InputNumberProps>;
+export declare const InputTextFeedbackWarning: Story<InputNumberProps>;
+export declare const InputTextFeedbackDanger: Story<InputNumberProps>;
+export declare const InputTextCompHasReadOnly: Story<InputNumberProps>;
+export declare const InputTextCompDisabled: Story<InputNumberProps>;
+export declare const InputTextCompHasError: Story<InputNumberProps>;

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

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

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

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

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

@@ -0,0 +1 @@
+export { InputPassword } from './input_password';

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

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

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

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

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

@@ -0,0 +1,197 @@
+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;
+    };
+    togglePasswordAltIconText: {
+        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;
+    };
+};

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

@@ -0,0 +1,134 @@
+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: 'Label'
+    },
+    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: ''
+    },
+    togglePasswordAltIconText: {
+        type: { name: 'string', required: false },
+        description: 'Alternative text for toggle password/plain text icon button.',
+        defaultValue: 'Mask or unmask password'
+    },
+    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_password.csf.js.map

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

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