@onewelcome/react-lib-components 8.1.2 → 8.3.0

package/src/components/Notifications/Alert/alertVariables.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+$alert-item-width: 25rem;

package/src/components/Notifications/SlideInModal/SlideInModal.module.scss

@@ -21,8 +21,8 @@
 
   visibility: visible;
 
-  @include mixins.transition(transform, 0.5s, ease-in-out);
   transform: translate(120%);
+  @include mixins.transition(transform, 0.5s, ease-in-out);
 
   &.hide {
     visibility: hidden;

package/src/components/Tiles/Tile.module.scss

@@ -22,9 +22,10 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
+
   &:hover {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
   }
@@ -71,18 +72,20 @@
 
     .image {
       margin-top: 2.5rem;
-      @include mixins.skeletonLoading();
       border-radius: 0.5rem;
       width: 3rem;
       height: 3rem;
+
+      @include mixins.skeletonLoading();
     }
 
     .title {
-      @include mixins.skeletonLoading();
       color: transparent;
       display: inline-block;
       width: 70%;
       border-radius: 0.5rem;
+
+      @include mixins.skeletonLoading();
     }
   }
 }

package/src/components/Tooltip/Tooltip.module.scss

@@ -150,8 +150,8 @@
 .tooltip-wrapper {
   .icon {
     margin-left: 0.5rem;
-    @include mixins.transition(all, 0.2s, ease-in-out);
     color: var(--greyed-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
 
     &:hover {
       color: var(--default);

package/src/components/Typography/Typography.module.scss

@@ -14,49 +14,48 @@
  *    limitations under the License.
  */
 
-@mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
-  font-family: $fontFamily;
-  font-size: $fontSize;
-  font-style: normal;
-  font-variant: normal;
-  line-height: $lineHeight;
-  font-weight: $fontWeight;
-  text-transform: none;
-  letter-spacing: 0;
-  color: var(--default);
-  margin: 0 0 1rem 0;
-}
+@use "src/mixins.module";
 
 .typography_style_ {
   &h1 {
-    @include fontProperties(var(--font-family), var(--font-size-h1), 700, 1.2);
+    @include mixins.fontProperties(var(--font-family), var(--font-size-h1), 700, 1.2);
   }
 
   &h2 {
-    @include fontProperties(var(--font-family), var(--font-size-h2), 700, 1.42857);
+    @include mixins.fontProperties(var(--font-family), var(--font-size-h2), 700, 1.42857);
   }
 
   &h3 {
-    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
+    @include mixins.fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
   }
 
   &h4 {
-    @include fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
+    @include mixins.fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
   }
 
   &body {
-    @include fontProperties(var(--font-family), var(--font-size), 400, var(--default-line-height));
+    @include mixins.fontProperties(
+      var(--font-family),
+      var(--font-size),
+      400,
+      var(--default-line-height)
+    );
   }
 
   &body-bold {
-    @include fontProperties(var(--font-family), var(--font-size), 700, var(--default-line-height));
+    @include mixins.fontProperties(
+      var(--font-family),
+      var(--font-size),
+      700,
+      var(--default-line-height)
+    );
   }
 
   &sub-text {
-    @include fontProperties(var(--font-family), var(--font-size-sub), 400, 1rem);
+    @include mixins.fontProperties(var(--font-family), var(--font-size-sub), 400, 1rem);
   }
 
   &code {
-    @include fontProperties(var(--font-family-code), var(--font-size-code), 400, 1.5);
+    @include mixins.fontProperties(var(--font-family-code), var(--font-size-code), 400, 1.5);
   }
 }

package/src/components/Typography/Typography.tsx

@@ -57,8 +57,8 @@ export interface Props extends ComponentPropsWithRef<any> {
   align?: "left" | "center" | "right";
 }
 
-const TypographyComponent: ForwardRefRenderFunction<any, Props> = (
-  { children, variant, tag, style, spacing, align, className = "", ...rest }: Props,
+const TypographyComponent: ForwardRefRenderFunction<any, Omit<Props, "ref">> = (
+  { children, variant, tag, style, spacing, align, className = "", ...rest },
   ref
 ) => {
   if (!validVariants.includes(variant)) {

package/src/index.ts

@@ -176,9 +176,15 @@ export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/Dat
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
+
+/** Banner */
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
 
+/** DatePicker */
+export { DatePicker } from "./components/DatePicker/DatePicker";
+export type { Props as DatePickerProps } from "./components/DatePicker/DatePicker";
+
 /** Admin */
 export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";

package/src/mixins.module.scss

@@ -176,10 +176,10 @@
   min-height: 2.5rem;
   cursor: pointer;
 
-  @include transition($transition-property, 0.2s, ease-in-out);
-
   font-family: var(--font-family);
 
+  @include transition($transition-property, 0.2s, ease-in-out);
+
   &#{$disabledSelector} {
     color: var(--greyed-out);
     cursor: not-allowed;
@@ -312,3 +312,28 @@
   border-color: $border-color;
   padding-left: calc(1rem - var(--alert-border-width));
 }
+
+@mixin searchInputPointer($inputType, $selector) {
+  @if $selector {
+    #{$selector} {
+      @if $inputType == "search" {
+        input[type="search"]::-webkit-search-cancel-button {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+@mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
+  font-family: $fontFamily;
+  font-size: $fontSize;
+  font-style: normal;
+  font-variant: normal;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--default);
+  margin: 0 0 1rem 0;
+}