@hexure/ui 1.1.0 → 1.1.2

package/README.md

@@ -1,36 +1,84 @@
 # Getting Started
 
-InsTech UI is your basic UI Component library which makes development for the UI/UX projects easy and makes the User Interface common through out multiple web applications.
+InsTech UI is the source repository for the @hexure/ui npm package. This library of components is the React implementation of the Hexure Design System, and should be used across all Hexure React applications and projects.
+
+
+# Usage
+
+1. Run `npm i @hexure/ui --save`
+2. If needed, install/update any required peer dependencies: react, react-dom, @mdi/font, @mdi/js, @mdi/react, moment, numeral
+3. Refer to https://zeroheight.com/3b34634b9/p/57050e-itds for available components and how to use them.
+4. Import components as needed into your React project: `import { Button } from @hexure/ui`
 
-1. Installation process
-   a. Install nodeJS (preferably through NVS for windows and NVM for Linux/MacOS)
    b. To use the UI Library in your project `npx install @hexure/ui`
    Some common Commands:
    `npm run rollup` to run rollup and generate a dist folder
    `npm run storybook` to run storybook server and see components on storybook.
    `npm run test` to run all test cases.
 
-2. Usage: See `https://zeroheight.com/3b34634b9/p/57050e-itds`
 
 # Contribute
 
-    a. Pull the repo by writing `git clone https://InsuranceTechnologies@dev.azure.com/InsuranceTechnologies/Enterprise/_git/InsTech.UI.Library`
-    b. CD into the folder and type `npm i` in the terminal
-    c. VS Code is prefered but any suitable IDE can be used
+## Setting up your local environment
+
+1. Clone the repo to your machine
+2. Make sure you have Node and NPM install on your machine
+3. Navigate to the clone repo directory and install it's npm packages: `npm i`
+4. Run the storybook command to preview the components and your changes: `npm run storybook`
+
+## Creating a new component
+
+1. Pull down the latest version of main and create a new branch off it that corresponds with a Jira ticket: `git branch -b [your_name]/[FEE-#]`
+2. Create a new directory in `src/components` with the following files:
+    - index.ts
+    - ComponentName.tsx: This should match the name of the React component and the name of the component in the Design System
+    - ComponentName.stories.tsx: This should match the name of the tsx file above
+3. Add the following content to index.ts
+    - ```export { default } from './ComponentName';```
+4. Build out ComponentName.tsx and ComponentName.stories.tsx as needed.
+    - Be sure to follow our front-end guidelines and standards found at https://insurancetechnologies.atlassian.net/jira/software/projects/FEE/pages
+5. Make sure ESLint passes by before committing/pushing your changes `npm run eslint`. You can use `npm run eslint-fix` to auto-fix some of the ESLint errors
+6. Make sure you run Prettier before committing/pushing your changes: `npm run prettier`
+7. Once you're work is complete, create a new Pull Request in Azure DevOps against the main branch.
+8. Your Pull Request must be reviewed and approved by the lead over this repository.
+9. Once approved, merge your pull request into main and follow the steps under "Releasing a new version"
+
+## Modifying an existing component
 
-    Folder Structure:
-     Components are stored in the components folder. Each component has it's own folder, every component has it's own `index.ts` file that exports the component. There is another index.ts, inside the components folder that exports all components from the component directory to source. And there is another index.ts file inside the source directory which is the entry point and it exports all components for use.
+1. Pull down the latest version of main and create a new branch off it that corresponds with a Jira ticket: `git branch -b [your_name]/[FEE-#]`
+2. Modify ComponentName.tsx and ComponentName.stories.tsx as neeeded.
+    - Be sure to follow our front-end guidelines and standards found at https://insurancetechnologies.atlassian.net/jira/software/projects/FEE/pages
+3. Make sure ESLint passes by before committing/pushing your changes `npm run eslint`. You can use `npm run eslint-fix` to auto-fix some of the ESLint errors
+4. Make sure you run Prettier before committing/pushing your changes: `npm run prettier`
+5. Once you're work is complete, create a new Pull Request in Azure DevOps against the main branch.
+6. Your Pull Request must be reviewed and approved by the lead over this repository.
+7. Once approved, merge your pull request into main and follow the steps under "Releasing a new version"
 
-     Each component folder has 4 files.
-      Component Folder
-        |
-        |---> Component.tsx
-        |---> Component.test.tsx
-        |---> Component.stories.tsx
-        |---> index.ts
+## Releasing a new version
+You should release a new version of this package immediately after a Pull Request in approved.
 
-    Considerations Regarding state:
-     Since these are visual components, the only state we define with in them is visual purpopses. We pass in the state that contains values as props.
+1. Determine the new version number based on the following:
+    - Major: The only time this would be bumped is if we're making wholistic breaking changes, like doing a major upgrade to React.
+    - Minor: This should be bumped if we are:
+      - Adding a new component or utility
+      - Making breaking changes to an individual component or utility
+    - Patch: This should be bumped if we are:
+      - Making non-breaking changes to an indivdiual component or utility
+      - Making minor bumps to npm packages
+      - Fixing bugs with existing components
+2. Pull down the latest version of main and create a new branch off it that corresponds with the new version number: `git branch -b release/1.x.x`
+3. Make sure ESLint passes: `npm run eslint`
+    - Since ESLint passing is a requirement for all PRs, this should always pass
+4. Run Rollup to compile the src files into the dist directory for distribution: `npm run rollup`
+    - Sometimes rollup won't exit out the command after generating the files into dist. If this happens, just exit out of the process
+5. Verify the updates are seen in the dist directory: `git status` and/or `git diff`
+6. Add, commit, and push the changes: `git add .` then `git commit -m "v1.x.x"` then `git push origin release/1.x.x`
+7. Create a Pull Request in Azure DevOps against the main branch.
+8. Your Pull Request must be reviewed and approved by the lead over this repository.
+9. Once approved, merge your pull request into main.
+10. Pull down the updated main branch and run `npm publish`
+11. Go to the Azure DevOps repo and add a new Tag
+    - Tag Name: v1.x.x
+    - Description: Add details around what was added/changed
+    
 
-    Important Note:
-     It is  very important for you to generate a new dist folder each time you create a new component or make changes to the existing. Since we install the library through git we should have the dist folder because the project (React application) will look inside this folder for the components and styles. Since we are not creating an npm package or registry, this step is very important and the dist folder should not be added to .gitignore file.

package/dist/cjs/index.js

@@ -2037,6 +2037,23 @@ var Accordion = function (_a) {
 };
 var templateObject_1$j, templateObject_2$h;
 
+var button_type_mapping = {
+    primary: {
+        background_color: Colors.PRIMARY.Hex,
+        border_color: Colors.PRIMARY.Hex,
+        content_color: '#fff',
+    },
+    secondary: {
+        background_color: 'transparent',
+        border_color: Colors.PRIMARY.Hex,
+        content_color: Colors.PRIMARY.Hex,
+    },
+    red: {
+        background_color: Colors.RED.Hex,
+        border_color: Colors.RED.Hex,
+        content_color: '#fff',
+    },
+};
 var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"], ["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
     if (props.$hasChildren) {
         if (props.$small) {
@@ -2047,7 +2064,9 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
         }
     }
     return '0px';
-}, function (props) { return (props.$type === 'secondary' ? 'transparent' : Colors.PRIMARY.Hex); }, function (props) {
+}, function (props) {
+    return props.$type ? button_type_mapping[props.$type].background_color : Colors.PRIMARY.Hex;
+}, function (props) {
     if (props.$hasChildren) {
         return 'auto';
     }
@@ -2055,16 +2074,18 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
         return '30px';
     }
     return '40px';
-}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, Colors.PRIMARY.Hex, function (props) { return (props.$disabled ? 0.6 : 1); });
-var Label$3 = styled.span(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"])), function (props) { return (props.$type === 'secondary' ? Colors.PRIMARY.Hex : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
+}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
+    return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
+}, function (props) { return (props.$disabled ? 0.6 : 1); });
+var Label$3 = styled.span(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"])), function (props) { return (props.$type ? button_type_mapping[props.$type].content_color : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
 var StyledIcon = styled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
 var Button = function (_a) {
     var children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.margin, margin = _c === void 0 ? '' : _c, onClick = _a.onClick, _d = _a.small, small = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? 'primary' : _e, accessibleProps = __rest(_a, ["children", "disabled", "icon", "margin", "onClick", "small", "type"]);
     var has_children = children && children.length > 0;
-    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$onClick": disabled ? undefined : onClick, "$small": small, "$type": type }, accessibleProps),
+    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$small": small, "$type": type, onClick: disabled ? undefined : onClick }, accessibleProps),
         children ? (React.createElement(Label$3, { "$small": small, "$type": type }, children)) : null,
         icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
-            React.createElement(Icon, { color: type === 'secondary' ? Colors.PRIMARY.Hex : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
+            React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
 };
 var templateObject_1$i, templateObject_2$g, templateObject_3$b;
 
@@ -2324,7 +2345,7 @@ var Container = styled.dialog(templateObject_2$7 || (templateObject_2$7 = __make
 var Header$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"])));
 var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
 var CloseMsg = styled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
-var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
+var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
 var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"])));
 var Modal = function (_a) {
     var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);