Merge pull request #4 from DaPulse/stories/orr/cleanup-and-alignment

Stories/orr/cleanup and alignment

CNAME

@@ -1 +1 @@
-https://style.monday.beer
+https://style.monday.com

README.md

@@ -1,16 +1,15 @@
 # Monday UI React Core
->[monday.com](monday.com) React components library - [Storybook](style.monday.beer)
+>[monday.com](https://www.monday.com) React components library - [Storybook](https://style.monday.com)
 
 ## Installation
 Install the component library
 ```
-$ npm install @mondaydotcomorg/monday-ui-react-core
+$ npm install monday-ui-react-core
 ```
 
 ## Usage
-You can either ` import { Button } from "@mondaydotcomorg/monday-ui-react-core";`
-
-or you might want to import directly the component ` import Button from "@mondaydotcomorg/monday-ui-react-core/dist/Button";`   
+You can either ` import { Button } from "monday-ui-react-core";`
+or you might want to import directly the component ` import Button from "monday-ui-react-core/dist/Button";`   
 
 ## Storybook
 We are using storybook in order to develop the components independently from any consumer.
@@ -44,7 +43,7 @@ npm start
 We welcome every contributor, please read the [contribution guidelines](CONTRIBUTING.md) before submitting a PR 
 
 ## Themes
-We support theming from the library to the component level using css variables - for more info on theming please read the THEME_README.md file
+We support theming from the library to the component level using css variables - for more info on theming please read the [theme guidelines](THEME_README.md) file
 
 ## Release
 Perform the following steps to **release** a **new version**:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

plop/component/component-scss.txt

@@ -1,4 +1,4 @@
-@import "../../styles/colors.scss";
+@import "../../styles/themes.scss";
 
 {{dashCase componentName}}--wrapper {
 

src/StoryBookComponents/StoryWrapper/StoryWrapper.scss

@@ -1,4 +1,4 @@
 .monday-style-story-wrapper {
-  width: 1080px;
+  width: 920px;
   margin: 0 auto;
 }

src/components/Button-WIP/__stories__/ButtonWIP.stories.js → src/components/Button/__stories__/button.stories.js

@@ -257,17 +257,6 @@ export const ButtonsWithIcons = () => (
         Left Icon
       </Button>
     </StoryStateColumn>
-    <StoryStateColumn title="Both Icons">
-      <Button
-        size={Button.sizes.LARGE}
-        kind={Button.kinds.PRIMARY}
-        color={Button.colors.PRIMARY}
-        leftIcon="fa fa-check"
-        rightIcon="fa fa-check"
-      >
-        Both Icon
-      </Button>
-    </StoryStateColumn>
     <StoryStateColumn title="Right Icon">
       <Button
         size={Button.sizes.LARGE}
@@ -435,6 +424,6 @@ export const Loading = () => (
 );
 
 export default {
-  title: "Components (WIP)/Button",
+  title: "Components/Button",
   component: Button
 };

src/components/Dialog/DialogContent/DialogContent.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/colors.scss";
+@import "../../../styles/themes.scss";
 
 
 

src/components/FieldLabel/FieldLabel.scss

@@ -1,4 +1,5 @@
-@import "../../styles/colors.scss";
+@import "../../styles/themes.scss";
+@import "../../styles/typography.scss";
 
 .label-component--wrapper {
   display: flex;

src/components/FormattedNumber/FormattedNumber.scss

@@ -1,10 +1,10 @@
-@import "../../styles/variables.scss";
+@import "../../styles/typography.scss";
 
 .formatted-number-component {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-  font-family: $font-family-base;
+  font-family: $primary-font;
   width: 100%;
 
   &__number {

src/components/Icon/Icon.scss

@@ -1,4 +1,4 @@
-@import "../../styles/colors.scss";
+@import "../../styles/themes.scss";
 
 .icon_component {
   position: relative;

src/components/Loader/Loader.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import "./Loader.scss";
 
 const Loader = ({ svgClassName }) => {
@@ -21,4 +22,12 @@ const Loader = ({ svgClassName }) => {
   );
 };
 
+Loader.propTypes = {
+  svgClassName: PropTypes.string
+};
+
+Loader.defaultProps = {
+  svgClassName: ""
+};
+
 export default Loader;

src/components/Loader/__stories__/LoaderStoryLine.jsx

@@ -1,15 +1,13 @@
 import React from "react";
 import ComponentStateDescription from "../../storybook-helpers/component-state-description/ComponentStateDescription";
-import Loader from "../Loader";
+import "./LoaderStoryLine.scss";
 
-const LoaderStoryLine = ({ title, className = "", size = "md" }) => {
+const LoaderStoryLine = ({ title, children }) => {
   return (
     <>
       <ComponentStateDescription title={title} />
       <div className="width-35">
-        <div style={{ height: "40px", width: "40px" }}>
-          <Loader className={className} size={size} />
-        </div>
+        <div style={{ height: "40px", width: "40px" }}>{children}</div>
       </div>
     </>
   );

src/components/Loader/__stories__/LoaderStoryLine.scss

@@ -0,0 +1,12 @@
+.loader-size-sm {
+  width: 32px;
+  height: 32px;
+}
+.loader-size-md {
+  width: 40px;
+  height: 40px;
+}
+.loader-size-lg {
+  width: 48px;
+  height: 48px;
+}

src/components/Loader/__stories__/loader.stories.js

@@ -0,0 +1,33 @@
+import React from "react";
+import Loader from "../Loader";
+import LoaderStoryLine from "./LoaderStoryLine";
+import { FlexLayout } from "../../storybook-helpers";
+import StoryWrapper from "../../../StoryBookComponents/StoryWrapper/StoryWrapper";
+
+export const Sizes = () => {
+  return (
+    <StoryWrapper>
+      <div className="story-title">Sizes</div>
+      <FlexLayout spaceBetween>
+        <LoaderStoryLine title="Small - 32px">
+          <Loader svgClassName="loader-size-sm" />
+        </LoaderStoryLine>
+      </FlexLayout>
+      <FlexLayout spaceBetween>
+        <LoaderStoryLine title="Medium - 40px">
+          <Loader svgClassName="loader-size-md" />
+        </LoaderStoryLine>
+      </FlexLayout>
+      <FlexLayout spaceBetween>
+        <LoaderStoryLine title="Large - 48px">
+          <Loader svgClassName="loader-size-lg" />
+        </LoaderStoryLine>
+      </FlexLayout>
+    </StoryWrapper>
+  );
+};
+
+export default {
+  title: "Components/Loader",
+  component: Loader
+};

src/components/ProgressBars/LinearProgressBar/LinearProgressBar.scss

@@ -1,14 +1,15 @@
 @import "../../../styles/global-css-settings";
 @import "../../../styles/themes";
-@import "../../../styles/variables";
+@import "../../../styles/typography";
 
 .linear-progress-bar--wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
-  font-family: $font-family-base;
-  font-size: $font-size-xs;
+  font-family: $primary-font;
+  font-size: $font-size-input;
+  @include theme-prop(color, secondary-text-color);
 
   .linear-progress-bar__label {
     padding-left: $spacing-xs;
@@ -27,7 +28,7 @@
   .linear-progress-bar__container {
     position: relative;
     width: 100%;
-    background-color: $riverstone_gray;
+    @include theme-prop(background-color, ui-border-color);
     border-radius: $border-radius-small;
 
     .linear-progress-bar__secondary,
@@ -40,7 +41,7 @@
 
     .linear-progress-bar__secondary--animate,
     .linear-progress-bar--animate {
-      transition: width 0.1s ease-out
+      transition: width 0.1s $expand-animation-timing
     }
 
     .linear-progress-bar {

src/components/Search/Search.jsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import "./Search.scss";
 import InputField from "../TextField/InputField";
+import { SIZES, TYPES } from "./SearchConstats";
 
 const NOOP = () => {};
 
@@ -41,8 +42,7 @@ export const SearchComponent = ({
   id,
   validation,
   inputAriaLabel,
-  iconNames,
-  inputType
+  iconNames
 }) => {
   return (
     <InputField
@@ -70,11 +70,14 @@ export const SearchComponent = ({
       validation={validation}
       inputAriaLabel={inputAriaLabel}
       iconsNames={iconNames}
-      type={inputType}
+      type="search"
     />
   );
 };
 
+SearchComponent.sizes = SIZES;
+SearchComponent.types = TYPES;
+
 SearchComponent.propTypes = {
   secondaryIconName: PropTypes.string,
   iconName: PropTypes.string,
@@ -90,21 +93,23 @@ SearchComponent.propTypes = {
   wrapperClassName: PropTypes.string,
   setRef: PropTypes.func,
   autoComplete: PropTypes.bool,
-  size: PropTypes.oneOf(["s", "md", "l"]),
-  type: PropTypes.oneOf(["square", "round", "underline"]),
+  /* SIZES is exposed on the component itself */
+  size: PropTypes.oneOf([SIZES.SMALL, SIZES.MEDIUM, SIZES.LARGE]),
+  /* TYPES is exposed on the component itself */
+  type: PropTypes.oneOf([TYPES.SQUARE, TYPES.SQUARE, TYPES.UNDERLINE]),
   className: PropTypes.string,
   id: PropTypes.string,
   validation: PropTypes.shape({
     status: PropTypes.string,
     text: PropTypes.string
   }),
   inputAriaLabel: PropTypes.string,
+  /*  Icon names labels for a11y */
   iconNames: PropTypes.shape({
     layout: PropTypes.string,
     primary: PropTypes.string,
     secondary: PropTypes.string
-  }),
-  inputType: PropTypes.string
+  })
 };
 
 SearchComponent.defaultProps = {
@@ -122,14 +127,13 @@ SearchComponent.defaultProps = {
   wrapperClassName: "",
   setRef: NOOP,
   autoComplete: "off",
-  size: "md",
-  type: "square",
+  size: SIZES.MEDIUM,
+  type: TYPES.SQUARE,
   className: "",
   id: "search",
   validation: null,
   inputAriaLabel: "",
-  iconNames: ICON_NAMES,
-  inputType: "search"
+  iconNames: ICON_NAMES
 };
 
 export default SearchComponent;

src/components/Search/SearchConstats.js

@@ -0,0 +1,11 @@
+export const SIZES = {
+  SMALL: "s",
+  MEDIUM: "md",
+  LARGE: "l"
+};
+
+export const TYPES = {
+  SQUARE: "square",
+  ROUND: "round",
+  UNDERLINE: "underline"
+};