@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -0,0 +1,94 @@
+.varClass {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+    --local_inputFieldLine_border_width: 1px;
+    --local_padding: 0;
+    --local_cursor: pointer;
+}
+
+.customContainer {
+    cursor: var(--local_cursor);
+    border-color: var(--local_inputFieldLine_border_color);
+}
+
+.disabled,
+.readonly {
+    --local_cursor: not-allowed;
+}
+
+.borderColor_default {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+}
+
+.borderColor_transparent {
+    --local_inputFieldLine_border_color: var(--dot_mirror);
+}
+
+.borderColor_dark {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_border);
+}
+
+.borderColor_error,
+.effect.borderColor_error:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_error_border);
+}
+
+.effect.borderColor_transparent:hover,
+.effect.borderColor_default:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_hover_border);
+}
+
+.active.borderColor_dark,
+.active.borderColor_dark:hover,
+.effect.borderColor_dark:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_active_border);
+}
+
+.active.borderColor_error,
+.active.borderColor_error:hover,
+.active.borderColor_default,
+.active.borderColor_default:hover,
+.active.borderColor_transparent,
+.active.borderColor_transparent:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_focus_border);
+}
+
+.hasBorder {
+    transition: border var(--zd_transition2) linear 0s;
+    border-style: solid;
+}
+
+.padding_small,
+.padding_xmedium {
+    --local_padding: 3px;
+}
+
+.padding_medium,
+.padding_large {
+    --local_padding: 8px;
+}
+
+.xmedium {
+    min-height: var(--zd_size30) ;
+}
+
+.small {
+    max-height: var(--zd_size200) ;
+}
+
+.medium {
+    max-height: var(--zd_size350) ;
+}
+
+.large {
+    max-height: var(--zd_size400) ;
+}
+
+.border_bottom {
+    border-width: 0 0 var(--local_inputFieldLine_border_width) 0;
+    padding-bottom: var(--local_padding);
+}
+
+.border_all {
+    border-width: var(--local_inputFieldLine_border_width);
+    padding: var(--local_padding);
+}

package/es/shared/InputFieldLine/__tests__/InputFieldLine.spec.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import InputFieldLine from "../InputFieldLine";
+describe('InputFieldLine', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      title: "InputFieldLine Test Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasPadding is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasPadding: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['medium', 'xmedium'];
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasPadding: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const border = ['bottom', 'all', 'none'];
+  test.each(border)('Should render border - %s', border => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      border: border
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const borderColor = ['default', 'dark', 'error', 'transparent'];
+  test.each(borderColor)('Should render borderColor - %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      borderColor: borderColor
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customProps', () => {
+    const customProps = {
+      'data-test': 'inputFieldLine-test'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      customClass: "inputFieldLine-custom-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      dataId: "inputFieldLine-test-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputFieldLine Should be render hasEffect is false 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render hasPadding is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render with title 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title="InputFieldLine Test Title"
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - all 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - bottom 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - none 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer    effect     flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - dark 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - default 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - error 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - transparent 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-test="inputFieldLine-test"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-id="inputFieldLine-test-id"
+    data-selector-id="container"
+    data-test-id="inputFieldLine-test-id"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - medium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;

package/es/shared/InputFieldLine/props/defaultProps.js

@@ -0,0 +1,16 @@
+export default {
+  isDisabled: false,
+  isReadOnly: false,
+  hasEffect: true,
+  isActive: false,
+  hasPadding: false,
+  title: '',
+  dataId: '',
+  customClass: '',
+  customProps: {},
+  borderColor: 'default',
+  border: 'bottom',
+  a11yAttributes: {},
+  tagAttributes: {},
+  size: 'auto'
+};

package/es/shared/InputFieldLine/props/propTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import { ContainerProps } from "../../../Layout/props/propTypes";
+export default {
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  hasEffect: PropTypes.bool,
+  hasPadding: PropTypes.bool,
+  title: PropTypes.string,
+  dataId: PropTypes.string,
+  customClass: PropTypes.string,
+  customProps: PropTypes.shape({ ...ContainerProps
+  }),
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(['auto', 'medium', 'xmedium']),
+  border: PropTypes.oneOf(['bottom', 'all', 'none']),
+  borderColor: PropTypes.oneOf(['default', 'dark', 'error', 'transparent']),
+  children: PropTypes.node,
+  onKeyDown: PropTypes.func,
+  a11yAttributes: PropTypes.object,
+  tagAttributes: PropTypes.object
+};