impact-ui 0.1.1 → 0.1.3

package/src/components/global-components/inputbox/inputbox.js

@@ -1,142 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  StyledHeadingCommon,
-  StyledMiscPara,
-  BoxContainer,
-  StyledDSHeader,
-  LeftLogoContainer,
-  StyledURLContainer,
-  StyledULHeaderList,
-  StyledHeaderLI,
-  StyledBodyMainContainer,
-  StyledCodeBoxContainer,
-  StyledCodeBoxMainContainer,
-  StyledCodeLineContainer,
-  StyledCodeLineContainerTag,
-  StyledCodeLineContainerTagContainer,
-} from "./../../../components/global-components/common-misc-components/common-misc-style";
-import {
-  SmPadding,
-  MedPadding,
-  LargePadding,
-} from "./../../../components/global-components/Grids-spacing/grid-spacing";
-import {
-  StyledInputBoxContainer,
-  StyledInputLabelContainer,
-  StyledInputBox,
-  StyledHelperText,
-  StyledErrorText,
-  StyledSuccessText,
-  StyledInputBoxDisabled,
-  StyledInputBoxError,
-  StyledInputBoxSuccess,
-} from "../../../lib";
-const InputBox = () => {
-  return (
-    <div>
-      <LargePadding>
-        <StyledHeadingCommon>02: INPUT BOX</StyledHeadingCommon>
-        <StyledMiscPara>
-          A text field is a basic text control that enables the user to type a
-          small amount of text. No matter what app you use, you’re bound to run
-          across some little text field requiring your personal information.
-          Even typing a question into Google is considered filling out a form
-          which has only one text field. This component is mainly used to enter
-          long or short form entries.
-        </StyledMiscPara>
-      </LargePadding>
-      <BoxContainer>
-        <LargePadding>
-          <StyledInputBoxContainer>
-            <StyledInputLabelContainer>
-              Inputbox Label
-            </StyledInputLabelContainer>
-            <StyledInputBox placeholder="Enter text" />
-          </StyledInputBoxContainer>
-        </LargePadding>
-        <LargePadding>
-          <StyledInputBoxContainer>
-            <StyledInputLabelContainer>
-              Inputbox with Helper text
-            </StyledInputLabelContainer>
-            <StyledInputBox placeholder="Enter text" />
-            <StyledHelperText>Please enter Helper Text</StyledHelperText>
-          </StyledInputBoxContainer>
-        </LargePadding>
-        <LargePadding>
-          <StyledInputBoxContainer>
-            <StyledInputLabelContainer>
-              Inputbox with Error text
-            </StyledInputLabelContainer>
-            <StyledInputBoxError placeholder="Enter text" />
-            <StyledErrorText>Please enter Error Text</StyledErrorText>
-          </StyledInputBoxContainer>
-        </LargePadding>
-        <LargePadding>
-          <StyledInputBoxContainer>
-            <StyledInputLabelContainer>
-              Inputbox with Success text
-            </StyledInputLabelContainer>
-            <StyledInputBoxSuccess placeholder="Enter text" />
-            <StyledSuccessText>Please enter Success Text</StyledSuccessText>
-          </StyledInputBoxContainer>
-        </LargePadding>
-        <LargePadding>
-          <StyledInputBoxContainer>
-            <StyledInputLabelContainer>
-              Inputbox with Disabled
-            </StyledInputLabelContainer>
-            <StyledInputBoxDisabled placeholder="Enter text" />
-          </StyledInputBoxContainer>
-        </LargePadding>
-      </BoxContainer>
-
-      <LargePadding>
-        <StyledCodeBoxMainContainer>
-          <StyledCodeBoxContainer>
-            <StyledCodeLineContainer>
-              import React from 'react';
-            </StyledCodeLineContainer>
-            <StyledCodeLineContainer>
-              import styled from 'styled-components';
-            </StyledCodeLineContainer>
-            <StyledCodeLineContainer>
-              import StyledInputBoxContainer,StyledInputLabelContainer,
-              StyledInputBox,StyledHelperText,
-              StyledErrorText,StyledSuccessText, StyledInputBoxDisabled from
-              './components';
-            </StyledCodeLineContainer>
-            <StyledCodeLineContainerTagContainer>
-              <StyledCodeLineContainerTag>
-                {`<StyledPrimaryButton>Primary Button</StyledPrimaryButton>`}
-              </StyledCodeLineContainerTag>
-              <StyledCodeLineContainerTag>
-                {` <StyledSecondaryButton>Secondary Button</StyledSecondaryButton>`}
-              </StyledCodeLineContainerTag>
-              <StyledCodeLineContainerTag>
-                {`<StyledSecondaryDiasabledButton>Secondary Disabled Button</StyledSecondaryDiasabledButton>`}
-              </StyledCodeLineContainerTag>
-              <StyledCodeLineContainerTag>
-                {`<StyledDisabledButton>Disabled Button</StyledDisabledButton>`}
-              </StyledCodeLineContainerTag>
-              <StyledCodeLineContainerTag>
-                {`<StyledURLButton>This is a Tertiary URL</StyledURLButton>`}
-              </StyledCodeLineContainerTag>
-              <StyledCodeLineContainerTag>
-                {`<StyledDisabledURLButton>This is a Tertiary URL</StyledDisabledURLButton>`}
-              </StyledCodeLineContainerTag>
-            </StyledCodeLineContainerTagContainer>
-            {/* <LargePadding>
-                <code>
-                 { `<StyledPrimaryButton>Primary Button</StyledPrimaryButton>`}
-                </code>
-             </LargePadding> */}
-          </StyledCodeBoxContainer>
-        </StyledCodeBoxMainContainer>
-      </LargePadding>
-    </div>
-  );
-};
-
-export default InputBox;

package/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-

package/src/lib/components/global-components/button/button-style.js

@@ -1,71 +0,0 @@
-import styled from 'styled-components';
-
-// export const StyledPrimaryButton = styled.button`
-//   background: red;
-//   border: none;
-// `
-
-export const StyledButton = styled.button`
-  background: #1d1d1d;
-  color: #fff;
-  border: none;
-  cursor: pointer;
-  border-radius: 3px;
-  height: 35px;
-  box-sizing: border-box;
-  padding: 0 20px;
-  font-size: 14px;
-  transition: all 300ms ease-in-out 0s;
-`
-
-export const StyledPrimaryButton = styled(StyledButton)`
-    background: #0055AF;
-    &:hover{
-        background: #033162;
-    }
-`;
-
-export const StyledSecondaryDiasabledButton = styled(StyledButton)`
-    background: #fff;
-    border: 1px solid #afafaf;
-    color: #AFAFAF;
-    cursor: default;
-`;
-
-export const StyledSecondaryButton = styled(StyledButton)`
-    background: #fff;
-    border: 1px solid #0055AF;
-    color: #0055AF;
-    &:hover{
-        border: 1px solid #033162;
-        color: #033162;
-    }
-`;
-
-export const StyledDisabledButton = styled(StyledButton)`
-    background: #AFAFAF;
-    cursor: default;
-`;
-
-export const StyledURLButton = styled(StyledButton)`
-    background: #fff;
-    color: #0055AF;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 0px;
-    height: auto;
-    &:hover{
-        color: #033162;
-    }
-`;
-
-export const StyledDisabledURLButton = styled(StyledButton)`
-    background: #fff;
-    color: #afafaf;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 0px;
-    height: auto;
-    cursor: default;
-`;
-

package/src/lib/components/global-components/button/button.js

@@ -1,20 +0,0 @@
-import React from "react";
-import {
-  StyledButton,
-  StyledPrimaryButton,
-  StyledSecondaryButton,
-  StyledDisabledButton,
-  StyledURLButton,
-  StyledSecondaryDiasabledButton,
-  StyledDisabledURLButton,
-} from "./button-style";
-
-export {
-  StyledButton,
-  StyledPrimaryButton,
-  StyledSecondaryButton,
-  StyledDisabledButton,
-  StyledURLButton,
-  StyledSecondaryDiasabledButton,
-  StyledDisabledURLButton,
-};

package/src/lib/components/global-components/inputbox/inputbox-style.js

@@ -1,70 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledInputBoxContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    position: relative;
-`;
-export const StyledInputLabelContainer = styled.label`
-    font-size: 12px;
-    color: #758490;
-    margin-bottom: 5px;
-    text-align: left;
-`;
-
-export const StyledInputBox = styled.input`
-    border: 1px solid #ACACAC;
-    border-radius: 3px;
-    padding: 0px 15px;
-    box-sizing: border-box;
-    height: 35px;
-    font-size: 14px;
-    color: #1d1d1d;
-    &:focus{
-        border: 1px solid #0055AF;
-    }
-`;
-export const StyledInputBoxError = styled(StyledInputBox)`
-    border: 1px solid #DA1E28;
-    &:focus{
-        border: 1px solid #DA1E28;
-    }
-`;
-
-export const StyledInputBoxSuccess = styled(StyledInputBox)`
-    border: 1px solid  #24A148;
-    &:focus{
-        border: 1px solid #24A148;
-    }
-`;
-
-export const StyledInputBoxDisabled = styled(StyledInputBox)`
-    background: #EFEFEF;
-    border: none;
-    cursor: no-drop;
-    pointer-events: none;
-    &:focus{
-        border: none;
-    }
-`;
-
-export const StyledHelperText = styled.span`
-    color: #758498;
-    font-size: 12px;
-    text-align: left;
-    margin-top: 2px;
-    position: absolute;
-    bottom: -15px;
-    left: 15px;
-    font-style: italic;
-`;
-
-export const StyledErrorText = styled(StyledHelperText)`
-    color: #DA1E28;
-    font-style: normal;
-`;
-
-export const StyledSuccessText = styled(StyledHelperText)`
-    color: #24A148;
-    font-style: normal;
-`;

package/src/lib/components/global-components/inputbox/inputbox.js

@@ -1,23 +0,0 @@
-import {
-  StyledInputBoxContainer,
-  StyledInputLabelContainer,
-  StyledInputBox,
-  StyledHelperText,
-  StyledErrorText,
-  StyledSuccessText,
-  StyledInputBoxDisabled,
-  StyledInputBoxError,
-  StyledInputBoxSuccess,
-} from "./inputbox-style";
-
-export {
-  StyledInputBoxContainer,
-  StyledInputLabelContainer,
-  StyledInputBox,
-  StyledHelperText,
-  StyledErrorText,
-  StyledSuccessText,
-  StyledInputBoxDisabled,
-  StyledInputBoxError,
-  StyledInputBoxSuccess,
-};

package/src/lib/index.js

@@ -1,40 +0,0 @@
-import {
-  StyledInputBoxContainer,
-  StyledInputLabelContainer,
-  StyledInputBox,
-  StyledHelperText,
-  StyledErrorText,
-  StyledSuccessText,
-  StyledInputBoxDisabled,
-  StyledInputBoxError,
-  StyledInputBoxSuccess,
-} from "./components/global-components/inputbox/inputbox";
-import {
-  StyledButton,
-  StyledPrimaryButton,
-  StyledSecondaryButton,
-  StyledDisabledButton,
-  StyledURLButton,
-  StyledSecondaryDiasabledButton,
-  StyledDisabledURLButton,
-} from "./components/global-components/button/button";
-
-export {
-  StyledInputBoxContainer,
-  StyledInputLabelContainer,
-  StyledInputBox,
-  StyledHelperText,
-  StyledErrorText,
-  StyledSuccessText,
-  StyledInputBoxDisabled,
-  StyledInputBoxError,
-  StyledInputBoxSuccess,
-  
-  StyledButton,
-  StyledPrimaryButton,
-  StyledSecondaryButton,
-  StyledDisabledButton,
-  StyledURLButton,
-  StyledSecondaryDiasabledButton,
-  StyledDisabledURLButton,
-};

package/webpack.config.js

@@ -1,26 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  mode: "production",
-  entry: path.resolve(__dirname, "src/lib/index.js"),
-  output: {
-    path: path.resolve(__dirname, "./build/lib"),
-    filename: "index.js",
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: "babel-loader",
-        options: {
-          presets: ["@babel/preset-env", "@babel/preset-react"],
-        },
-      },
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"],
-      },
-    ],
-  },
-};