@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/utils/statusUtils.ts

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+import { Icons } from "../components/Icon/Icon";
+
+interface StatusProps {
+  error?: boolean;
+  success?: boolean;
+  info?: boolean;
+}
+
+type StatusState = "error" | "success" | "info";
+
+export function getStatusIcon({ error, success, info }: StatusProps): Icons {
+  if (error) {
+    return Icons.Error;
+  }
+  if (success) {
+    return Icons.CheckmarkCircleAlt;
+  }
+  return Icons.InfoCircle;
+}
+
+export function getStatusState(
+  { error, success, info }: StatusProps,
+  defaultToInfo = false
+): StatusState | undefined {
+  if (error) {
+    return "error";
+  }
+  if (success) {
+    return "success";
+  }
+  if (info || defaultToInfo) {
+    return "info";
+  }
+  return undefined;
+}

package/src/variables.scss

@@ -0,0 +1,38 @@
+/*!
+ * 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.
+ */
+
+$form-element-horizontal-padding-ratio-mobile: 0.5;
+$form-element-horizontal-padding-ratio-desktop: 0.5;
+$form-element-vertical-padding-ratio-mobile: 0.625;
+$form-element-vertical-padding-ratio-desktop: 0.625;
+
+$popover-z-index: 100;
+$select-z-index: 11;
+$toggle-z-index: 10;
+$modal-z-index: 10;
+$snackbar-z-index: 20;
+$alert-z-index: 20;
+
+/** Breakpoints **/
+$small: 30em; // 480px
+$medium: 50em; // 800px
+$large: 90em; //1440px
+
+$breakpoints: (
+  "small": $small,
+  "medium": $medium,
+  "large": $large
+) !default;

package/src/variables.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/** Breakpoints **/
+const small = 30 as const; //em = 480px
+const medium = 50 as const; //em = 800px
+const large = 90 as const; //em = 1440px
+
+export enum ScreenSize {
+  SMALL,
+  MEDIUM,
+  LARGE
+}
+
+export const breakpoints: { [key in ScreenSize]: number } = {
+  [ScreenSize.SMALL]: small,
+  [ScreenSize.MEDIUM]: medium,
+  [ScreenSize.LARGE]: large
+} as const;