@onewelcome/react-lib-components 1.6.0 → 1.8.0

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -25,6 +25,7 @@ import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../hooks/useWrapper";
+import { remToPx } from "../../../util/helper";
 
 interface PartialInputProps extends Partial<InputProps> {}
 
@@ -95,6 +96,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const { prefix, suffix } = inputProps || {};
   const input = useRef<HTMLInputElement>(null);
   const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
+  const helperIndent = window.innerWidth >= remToPx(30) ? remToPx(1.25) : remToPx(1);
   const { labelOffset } = useLabelOffset(
     (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
     floatingLabelActive,
@@ -130,7 +132,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         ...helperProps,
         className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
       }}
-      helperIndent={20}
+      helperIndent={helperIndent}
       disabled={disabled}
     >
       <Input

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/variables";
+
 .select-label {
   left: calc(
     1.25rem + 2px
@@ -22,9 +24,15 @@
 
 .select-helper-text {
   margin-top: 0.25rem;
-  margin-left: 1.25rem;
+  margin-left: variables.$form-element-horizontal-padding-mobile;
 }
 
 .floating-label-active [data-display] {
   top: calc(50% + 0.5rem);
 }
+
+@media only screen and (min-width: 30em) {
+  .select-helper-text {
+    margin-left: variables.$form-element-horizontal-padding-desktop;
+  }
+}

package/src/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-@use "../../../mixins.module.scss";
+@use "src/mixins.module";
+@use "src/variables";
 
 .floating-wrapper {
   position: relative;
@@ -25,7 +26,7 @@
     position: absolute;
     z-index: 2;
     top: 1.3125rem;
-    left: 1.25rem;
+    left: variables.$form-element-horizontal-padding-mobile;
     transform-origin: left top;
     @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
@@ -56,3 +57,11 @@
     content: " *";
   }
 }
+
+@media only screen and (min-width: 30em) {
+  .floating-wrapper {
+    .floating-label {
+      left: variables.$form-element-horizontal-padding-desktop;
+    }
+  }
+}

package/src/Icon/Icon.module.scss

@@ -45,6 +45,18 @@
   font-size: 0.875rem;
 }
 
+.icon-file-outline:before {
+  content: "\e941";
+  @include fontProperties();
+}
+.icon-file-upload-outline:before {
+  content: "\e942";
+  @include fontProperties();
+}
+.icon-file-download-outline:before {
+  content: "\e943";
+  @include fontProperties();
+}
 .icon-image:before {
   content: "\e900";
   @include fontProperties();

package/src/Icon/Icon.tsx

@@ -81,7 +81,10 @@ export enum Icons {
   TriangleRight = "triangle-right",
   TriangleUp = "triangle-up",
   Undo = "undo",
-  Warning = "warning"
+  Warning = "warning",
+  FileOutline = "file-outline",
+  FileUpload = "file-upload-outline",
+  FileDownload = "file-download-outline"
 }
 
 type Tag = "span" | "div" | "i";

package/src/Link/Link.module.scss

@@ -21,7 +21,7 @@
   font-size: var(--font-size);
   font-style: normal;
   font-variant: normal;
-  line-height: 1.5;
+  line-height: var(--default-line-height);
   font-weight: normal;
   text-transform: none;
   letter-spacing: 0;

package/src/Notifications/Banner/Banner.module.scss

@@ -18,7 +18,7 @@
   padding: 1rem 1.25rem;
   background-color: var(--light);
   display: flex;
-  border-width: 1px;
+  border-width: var(--banner-border-width);
   border-style: solid;
   flex-grow: 0;
   border-radius: var(--banner-border-radius);
@@ -54,7 +54,7 @@
   }
 
   &.warning {
-    border-color: var(--error);
+    border-color: var(--warning);
     .icon {
       color: var(--warning);
     }

package/src/Pagination/Pagination.module.scss

@@ -17,6 +17,7 @@
 .pagination-wrapper {
   font-family: var(--font-family);
   font-size: var(--font-size);
+  line-height: var(--default-line-height);
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;

package/src/ProgressBar/ProgressBar.module.scss

@@ -13,6 +13,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@import "../mixins.module.scss";
 
 .progress-bar {
   position: relative;
@@ -30,18 +31,19 @@
   .bar {
     position: absolute;
     height: 0.5rem;
-    width: 50%;
     border-radius: 0.25rem;
     background-color: var(--color-primary);
-    animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
+    &.loading-state {
+      width: 50%;
+      animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
+      @keyframes slide-in {
+        0% {
+          left: -50%;
+        }
 
-    @keyframes slide-in {
-      0% {
-        left: -50%;
-      }
-
-      100% {
-        left: 100%;
+        100% {
+          left: 100%;
+        }
       }
     }
   }

package/src/ProgressBar/ProgressBar.test.tsx

@@ -56,3 +56,24 @@ describe("ref should work", () => {
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });
+
+describe("ProgressBar should change styles depending on props", () => {
+  it("should show a progress when 'completed' prop is provided", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams,
+      completed: 40
+    }));
+
+    const bar = ProgressBarComponent.querySelector(".bar");
+    expect(bar).toHaveClass("w-40");
+  });
+
+  it("should show a loading effect when 'completed' prop is not provided", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams
+    }));
+
+    const bar = ProgressBarComponent.querySelector(".bar");
+    expect(bar).toHaveClass("loading-state");
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -20,16 +20,21 @@ import classes from "./ProgressBar.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
   placeholderText: string;
+  completed?: number;
 }
 
 const ProgressBarComponent: ForwardRefRenderFunction<HTMLSpanElement, Props> = (
-  { placeholderText, ...rest }: Props,
+  { placeholderText, completed, ...rest }: Props,
   ref
 ) => {
   return (
     <span {...rest} ref={ref} role="progressbar">
       <span className={classes["progress-bar"]}>
-        <span className={classes["bar"]} />
+        <span
+          className={`${classes["bar"]} ${
+            completed ? classes[`w-${5 * Math.round(completed / 5)}`] : classes["loading-state"]
+          }`}
+        />
       </span>
       <Typography className={classes["placeholder"]} spacing={{ marginBottom: 0 }} variant="body">
         {placeholderText}

package/src/Tabs/TabButton.module.scss

@@ -18,7 +18,7 @@
   border: 0;
   border-radius: 0;
   font-size: var(--font-size);
-  line-height: 1.5;
+  line-height: var(--default-line-height);
   margin: 0;
   padding: 0.25rem 0 1rem 0;
   min-height: 2.5rem;
@@ -27,7 +27,7 @@
   background-color: transparent;
   white-space: nowrap;
   position: relative;
-  font-weight: bold;
+  font-weight: normal;
   color: transparent;
 
   &:focus-visible {
@@ -42,7 +42,7 @@
   }
 
   &.selected {
-    color: var(--tab-text-color);
+    color: var(--color-primary);
 
     span {
       color: transparent;

package/src/Tabs/Tabs.module.scss

@@ -43,6 +43,7 @@ $focus-width: 5px;
 
   position: absolute;
   height: var(--tab-active-border-height);
+  border-radius: 2px 2px 0 0;
   background-color: var(--tab-active-border-color);
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);

package/src/Typography/Typography.module.scss

@@ -37,19 +37,19 @@
   }
 
   &h3 {
-    @include fontProperties(var(--font-family), var(--font-size-h3), 400, 1.16666);
+    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
   }
 
   &h4 {
-    @include fontProperties(var(--font-family), var(--font-size-h4), 700, 1.2);
+    @include fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
   }
 
   &body {
-    @include fontProperties(var(--font-family), var(--font-size), 400, 1.5);
+    @include fontProperties(var(--font-family), var(--font-size), 400, var(--default-line-height));
   }
 
   &body-bold {
-    @include fontProperties(var(--font-family), var(--font-size), 700, 1.5);
+    @include fontProperties(var(--font-family), var(--font-size), 700, var(--default-line-height));
   }
 
   &sub-text {

package/src/Typography/Typography.tsx

@@ -28,7 +28,7 @@ export const validVariants = [
   "sub-text",
   "code"
 ] as const;
-export type Variant = typeof validVariants[number];
+export type Variant = (typeof validVariants)[number];
 
 type Tags =
   | "h1"

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -46,8 +46,8 @@
   &:disabled {
     .number-wrapper {
       .number {
-        border: 2px solid var(--greyed-out);
-        color: var(--greyed-out);
+        border: 2px solid var(--disabled);
+        color: var(--disabled);
       }
     }
 
@@ -117,6 +117,10 @@
       font-weight: 700;
       color: var(--color-primary);
     }
+
+    .two-line-text-overflow {
+      display: unset;
+    }
   }
 
   //Future state for clickable elements - future state is a default one
@@ -165,17 +169,17 @@
 .number {
   font-family: var(--font-family);
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: normal;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--greyed-out);
+  border: 2px solid var(--wizard-step-indicator-future-color);
   border-radius: 50%;
   min-width: 1.5rem;
   min-height: 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
-  color: var(--greyed-out);
+  color: var(--wizard-step-indicator-future-color);
   line-height: 1.5rem;
   background-color: var(--light);
   box-sizing: content-box;
@@ -183,7 +187,7 @@
 
 .two-line-text-overflow {
   max-height: 2rem;
-  display: -webkit-box;
+  display: none;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -195,10 +199,16 @@
   font-size: 0.75rem;
   line-height: 1rem;
   overflow: hidden;
-  color: var(--greyed-out);
+  color: var(--default);
   text-align: center;
 }
 
 .checkmark {
   font-size: 0.875rem;
 }
+
+@media only screen and (min-width: 30em) {
+  .two-line-text-overflow {
+    display: unset;
+  }
+}

package/src/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,25 @@ interface CSSProperties {
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
+  lightPink?: string;
+  vividViolet?: string;
+  colorPrimary300?: string;
+  colorPrimary500?: string;
+  colorPrimary600?: string;
+  colorPrimary700?: string;
+  colorPrimary900?: string;
+  colorBlueGrey100?: string;
+  colorBlueGrey200?: string;
+  colorBlueGrey400?: string;
+  colorBlueGrey25?: string;
+  colorBlueGrey500?: string;
+  colorBlueGrey700?: string;
+  colorBlueGrey900?: string;
+  colorGreen500?: string;
+  colorLightBlue500?: string;
+  colorLightBlue600?: string;
+  colorOrange500?: string;
+  colorRed500?: string;
   defaultLineHeight?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -39,6 +58,8 @@ interface CSSProperties {
   inputBorderWidthFocus?: string;
   inputBorderStyle?: string;
   inputBackgroundColor?: string;
+  dragBackgroundColor?: string;
+  dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
@@ -50,6 +71,7 @@ interface CSSProperties {
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
   bannerBorderRadius?: string;
+  bannerBorderWidth?: string;
   dataGridRowBackgroundColor?: string;
   dataGridRowHoverBackgroundColor?: string;
   tabsBackgroundColor?: string;
@@ -59,6 +81,7 @@ interface CSSProperties {
   tablistBorderStyle?: string;
   tablistBorderColor?: string;
   tabTextColor?: string;
+  wizardStepIndicatorFutureColor?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -87,55 +110,78 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
-    colorFocus: "var(--color-primary)",
-    colorPrimary: "#9e006b",
-    colorSecondary: "#003b5e",
-    colorTertiary: "#ff1e4e",
-    defaultLineHeight: "26px",
-    buttonBorderRadius: "20px",
+    colorPrimary300: "#6871BF",
+    colorPrimary500: "#041295",
+    colorPrimary600: "#030F77",
+    colorPrimary700: "#020B59",
+    colorPrimary900: "#01041E",
+    colorBlueGrey25: "#F7F7F9",
+    colorBlueGrey100: "#DEDEE6",
+    colorBlueGrey200: "#BCBECE",
+    colorBlueGrey400: "#797D9C",
+    colorBlueGrey500: "#5D607E",
+    colorBlueGrey700: "#383A4B",
+    colorBlueGrey900: "#131319",
+    colorGreen500: "#178244",
+    colorLightBlue500: "#00BCDD",
+    colorLightBlue600: "#0096B1",
+    colorOrange500: "#E07900",
+    colorRed500: "#E01E00",
+    colorFocus: "var(--color-primary300)",
+    colorPrimary: "var(--color-primary500)",
+    colorSecondary: "var(--color-blue-grey700)",
+    colorTertiary: "var(--color-light-blue600)",
+    lightPink: "#9E006B1A",
+    vividViolet: "#9E006B",
+    defaultLineHeight: "1.5",
+    buttonBorderRadius: "2px",
     buttonBorderWidth: "2px",
     buttonFontSize: "1rem",
     buttonBorderStyle: "solid",
     buttonFillTextColor: "var(--light)",
     buttonFillHoverBackgroundColor: "var(--light)",
     buttonOutlineHoverTextColor: "var(--light)",
-    inputBorderRadius: "8px",
+    inputBorderRadius: "2px",
     inputBorderWidth: "1px",
     inputBorderWidthFocus: "2px",
     inputBorderStyle: "solid",
     inputBackgroundColor: "var(--light)",
+    dragBackgroundColor: "#1313191A",
+    dragBorderStyle: "dashed",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
-    modalBackgroundColor: "#f5f8f8",
+    modalBackgroundColor: "var(--color-blue-grey25)",
     modalHeaderBackgroundColor: "var(--light)",
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
     snackbarTextColor: "var(--light)",
-    snackbarInfoBackgroundColor: "#003b5e",
-    snackbarSuccessBackgroundColor: "#008a28",
-    snackbarErrorBackgroundColor: "#d9291c",
-    snackbarBorderRadius: "8px",
-    bannerBorderRadius: "8px",
+    snackbarInfoBackgroundColor: "var(--color-primary500)",
+    snackbarSuccessBackgroundColor: "var(--color-green500)",
+    snackbarErrorBackgroundColor: "var(--color-red500)",
+    snackbarBorderRadius: "2px",
+    bannerBorderRadius: "2px",
+    bannerBorderWidth: "0 0 0 4px",
     dataGridRowBackgroundColor: "transparent",
-    dataGridRowHoverBackgroundColor: "#f5e6f0",
+    dataGridRowHoverBackgroundColor: "var(--color-blue-grey25)",
     tabsBackgroundColor: "var(--light)",
-    tabActiveBorderHeight: "2px",
+    tabActiveBorderHeight: "4px",
     tabActiveBorderColor: "var(--color-primary)",
     tablistBorderWidth: "1px",
     tablistBorderStyle: "solid",
-    tablistBorderColor: "#C3C3C7",
-    tabTextColor: "#0f0f1e",
-    default: "#0f0f1e",
-    success: "#008a28",
-    error: "#d9291c",
-    info: "var(--color-secondary)",
-    disabled: "#e9e9eb",
-    greyedOut: "#6f6f76",
-    lightGreyBorder: "#e9e9eb",
-    warning: "#ff6105",
+    tablistBorderColor: "var(--color-blue-grey100)",
+    tabTextColor: "var(--color-blue-grey900)",
+    wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
+    default: "var(--color-blue-grey900)",
+    success: "var(--color-green500)",
+    error: "var(--color-red500)",
+    info: "var(--color-primary500)",
+    disabled: "var(--color-blue-grey100)",
+    greyedOut: "var(--color-blue-grey500)",
+    lightGreyBorder: "var(--color-blue-grey100)",
+    warning: "var(--color-orange500)",
     light: "#FFF",
     grey: "#c3c3c7",
-    fontFamily: "'Red Hat Display', sans-serif",
-    fontFamilyCode: "'Red Hat Mono', monospace",
+    fontFamily: "Roboto, sans-serif",
+    fontFamilyCode: "'Roboto Mono', monospace",
     fontSize: "1rem",
     fontSizeH1: "2.5rem",
     fontSizeH2: "1.625rem",