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

package/src/components/Icon/Icon.module.scss

@@ -0,0 +1,455 @@
+/*!
+ * 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.
+ */
+
+@font-face {
+  font-family: "icomoon";
+  src: url("../../font/icomoon.eot?66dkqw");
+  src:
+    url("../../font/icomoon.eot?66dkqw#iefix") format("embedded-opentype"),
+    url("../../font/icomoon.ttf?66dkqw") format("truetype"),
+    url("../../font/icomoon.woff?66dkqw") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@mixin fontProperties() {
+  font-family: "icomoon", sans-serif !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon {
+  line-height: 0;
+  font-size: var(--button-font-size);
+}
+
+.icon-save-outline:before {
+  content: "\e947";
+  @include fontProperties();
+}
+.icon-reply-outline:before {
+  content: "\e946";
+  @include fontProperties();
+}
+.icon-upload-outline:before {
+  content: "\e945";
+  @include fontProperties();
+}
+.icon-home-filled:before {
+  content: "\e940";
+  @include fontProperties();
+}
+.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();
+}
+.icon-bookmark:before {
+  content: "\e901";
+  @include fontProperties();
+}
+.icon-bookmark-alt:before {
+  content: "\e902";
+  @include fontProperties();
+}
+.icon-equal:before {
+  content: "\e903";
+  @include fontProperties();
+}
+.icon-build:before {
+  content: "\e904";
+  @include fontProperties();
+}
+.icon-refresh:before {
+  content: "\e905";
+  @include fontProperties();
+}
+.icon-calendar:before {
+  content: "\e906";
+  @include fontProperties();
+}
+.icon-checkmark-circle:before {
+  content: "\e907";
+  @include fontProperties();
+}
+.icon-checkmark-circle-alt:before {
+  content: "\e908";
+  @include fontProperties();
+}
+.icon-clock:before {
+  content: "\e909";
+  @include fontProperties();
+}
+.icon-trash:before {
+  content: "\e90a";
+  @include fontProperties();
+}
+.icon-heart:before {
+  content: "\e90b";
+  @include fontProperties();
+}
+.icon-search:before {
+  content: "\e90c";
+  @include fontProperties();
+}
+.icon-gearwheel:before {
+  content: "\e90d";
+  @include fontProperties();
+}
+.icon-star:before {
+  content: "\e90e";
+  @include fontProperties();
+}
+.icon-star-alt:before {
+  content: "\e90f";
+  @include fontProperties();
+}
+.icon-undo:before {
+  content: "\e910";
+  @include fontProperties();
+}
+.icon-eye:before {
+  content: "\e911";
+  @include fontProperties();
+}
+.icon-times-circle-alt:before {
+  content: "\e912";
+  @include fontProperties();
+}
+.icon-info-circle:before {
+  content: "\e913";
+  @include fontProperties();
+}
+.icon-info-bell:before {
+  content: "\e914";
+  @include fontProperties();
+}
+.icon-checkmark-circle-breakout:before {
+  content: "\e915";
+  @include fontProperties();
+}
+.icon-warning:before {
+  content: "\e916";
+  @include fontProperties();
+}
+.icon-plus:before {
+  content: "\e917";
+  @include fontProperties();
+}
+.icon-copy:before {
+  content: "\e918";
+  @include fontProperties();
+}
+.icon-edit:before {
+  content: "\e919";
+  @include fontProperties();
+}
+.icon-filter:before {
+  content: "\e91a";
+  @include fontProperties();
+}
+.icon-link:before {
+  content: "\e91b";
+  @include fontProperties();
+}
+.icon-change:before {
+  content: "\e91c";
+  @include fontProperties();
+}
+.icon-filter-alt-arrow:before {
+  content: "\e91d";
+  @include fontProperties();
+}
+.icon-filter-alt:before {
+  content: "\e91e";
+  @include fontProperties();
+}
+.icon-filter-alt-times:before {
+  content: "\e91f";
+  @include fontProperties();
+}
+.icon-grid:before {
+  content: "\e920";
+  @include fontProperties();
+}
+.icon-triangle-down:before {
+  content: "\e921";
+  @include fontProperties();
+}
+.icon-triangle-down-circle:before {
+  content: "\e922";
+  @include fontProperties();
+}
+.icon-triangle-up:before {
+  content: "\e923";
+  @include fontProperties();
+}
+.icon-triangle-right:before {
+  content: "\e924";
+  @include fontProperties();
+}
+.icon-chevron-left:before {
+  content: "\e925";
+  @include fontProperties();
+}
+.icon-chevron-right:before {
+  content: "\e926";
+  @include fontProperties();
+}
+.icon-times:before {
+  content: "\e927";
+  @include fontProperties();
+}
+.icon-times-circle:before {
+  content: "\e928";
+  @include fontProperties();
+}
+.icon-times-thin:before {
+  content: "\e929";
+  @include fontProperties();
+}
+.icon-chevron-up:before {
+  content: "\e92a";
+  @include fontProperties();
+}
+.icon-chevron-down:before {
+  content: "\e92b";
+  @include fontProperties();
+}
+.icon-navigation-first:before {
+  content: "\e92c";
+  @include fontProperties();
+}
+.icon-fullscreen:before {
+  content: "\e92d";
+  @include fontProperties();
+}
+.icon-fullscreen-exit:before {
+  content: "\e92e";
+  @include fontProperties();
+}
+.icon-navigation-last:before {
+  content: "\e92f";
+  @include fontProperties();
+}
+.icon-hamburger:before {
+  content: "\e930";
+  @include fontProperties();
+}
+.icon-ellipsis:before {
+  content: "\e931";
+  @include fontProperties();
+}
+.icon-triangle-left:before {
+  content: "\e932";
+  @include fontProperties();
+}
+.icon-ellipsis-alt:before {
+  content: "\e933";
+  @include fontProperties();
+}
+.icon-bell:before {
+  content: "\e934";
+  @include fontProperties();
+}
+.icon-bell-alt:before {
+  content: "\e935";
+  @include fontProperties();
+}
+.icon-share:before {
+  content: "\e936";
+  @include fontProperties();
+}
+.icon-forbidden:before {
+  content: "\e937";
+  @include fontProperties();
+}
+.icon-checkmark:before {
+  content: "\e938";
+  @include fontProperties();
+}
+.icon-checkmark-square:before {
+  content: "\e939";
+  @include fontProperties();
+}
+.icon-square:before {
+  content: "\e93a";
+  @include fontProperties();
+}
+.icon-minus-square:before {
+  content: "\e93b";
+  @include fontProperties();
+}
+.icon-radio:before {
+  content: "\e93c";
+  @include fontProperties();
+}
+.icon-error-circle-alt:before {
+  content: "\e93d";
+  @include fontProperties();
+}
+.icon-circle:before {
+  content: "\e93e";
+  @include fontProperties();
+}
+.icon-table-search:before {
+  content: "\e93f";
+  @include fontProperties();
+}
+.icon-error-circle:before {
+  content: "\e944";
+  @include fontProperties();
+}
+.icon-eye-blocked:before {
+  content: "\e9d1";
+  @include fontProperties();
+}
+.icon-warning-filled:before {
+  content: "\e948";
+  @include fontProperties();
+}
+.icon-download-file-outline:before {
+  content: "\e945";
+  @include fontProperties();
+}
+.icon-retry:before {
+  content: "\e949";
+  @include fontProperties();
+}
+.icon-cancel:before {
+  content: "\e94a";
+  @include fontProperties();
+}
+.icon-file-alt:before {
+  content: "\e94b";
+  @include fontProperties();
+}
+.icon-add-circle:before {
+  content: "\e94c";
+  @include fontProperties();
+}
+.icon-zoom-in:before {
+  content: "\e94e";
+  @include fontProperties();
+}
+.icon-zoom-out:before {
+  content: "\e94d";
+  @include fontProperties();
+}
+.icon-arrow-up:before {
+  content: "\e94f";
+  @include fontProperties();
+}
+.icon-arrow-left:before {
+  content: "\e954";
+  @include fontProperties();
+}
+.icon-external-link:before {
+  content: "\e950";
+  @include fontProperties();
+}
+.icon-sidesheet-handle:before {
+  content: "\e951";
+  @include fontProperties();
+}
+.icon-pending-circle:before {
+  content: "\e952";
+  @include fontProperties();
+}
+.icon-minus-circle:before {
+  content: "\e953";
+  @include fontProperties();
+}
+.icon-arrow-right:before {
+  content: "\e95a";
+  @include fontProperties();
+}
+.icon-perm-identity:before {
+  content: "\e955";
+  @include fontProperties();
+}
+.icon-cable:before {
+  content: "\e956";
+  @include fontProperties();
+}
+.icon-dashboard:before {
+  content: "\e957";
+  @include fontProperties();
+}
+.icon-fido-device:before {
+  content: "\e958";
+  @include fontProperties();
+}
+.icon-security:before {
+  content: "\e959";
+  @include fontProperties();
+}
+.icon-switch:before {
+  content: "\e95b";
+  @include fontProperties();
+}
+.icon-group:before {
+  content: "\e95c";
+  @include fontProperties();
+}
+.icon-devices:before {
+  content: "\e95d";
+  @include fontProperties();
+}
+.icon-download-circle:before {
+  content: "\e95e";
+  @include fontProperties();
+}
+.icon-key:before {
+  content: "\e95f";
+  @include fontProperties();
+}
+.icon-password:before {
+  content: "\e960";
+  @include fontProperties();
+}
+.icon-phone:before {
+  content: "\e961";
+  @include fontProperties();
+}
+.icon-envelope:before {
+  content: "\e962";
+  @include fontProperties();
+}
+.icon-badge:before {
+  content: "\e963";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,152 @@
+/*
+ * 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 React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
+import classes from "./Icon.module.scss";
+
+export enum Icons {
+  Bell = "bell",
+  BellAlt = "bell-alt",
+  Bookmark = "bookmark",
+  BookmarkAlt = "bookmark-alt",
+  Build = "build",
+  Calendar = "calendar",
+  Change = "change",
+  Checkmark = "checkmark",
+  CheckmarkCircle = "checkmark-circle",
+  CheckmarkCircleAlt = "checkmark-circle-alt",
+  CheckmarkCircleBreakout = "checkmark-circle-breakout",
+  CheckmarkSquare = "checkmark-square",
+  ChevronUp = "chevron-up",
+  ChevronDown = "chevron-down",
+  ChevronLeft = "chevron-left",
+  ChevronRight = "chevron-right",
+  Circle = "circle",
+  Clock = "clock",
+  Copy = "copy",
+  Edit = "edit",
+  Ellipsis = "ellipsis",
+  EllipsisAlt = "ellipsis-alt",
+  Equal = "equal",
+  Error = "error-circle",
+  ErrorAlt = "error-circle-alt",
+  Eye = "eye",
+  EyeBlocked = "eye-blocked",
+  Filter = "filter",
+  FilterAlt = "filter-alt",
+  FilterAltArrow = "filter-alt-arrow",
+  FilterAltTimes = "filter-alt-times",
+  Forbidden = "forbidden",
+  Fullscreen = "fullscreen",
+  FullscreenExit = "fullscreen-exit",
+  Gearwheel = "gearwheel",
+  Grid = "grid",
+  Hamburger = "hamburger",
+  HomeFilled = "home-filled",
+  Heart = "heart",
+  Image = "image",
+  InfoBell = "info-bell",
+  InfoCircle = "info-circle",
+  Link = "link",
+  MinusSquare = "minus-square",
+  NavigationFirst = "navigation-first",
+  NavigationLast = "navigation-last",
+  Plus = "plus",
+  Radio = "radio",
+  Refresh = "refresh",
+  Search = "search",
+  Share = "share",
+  Square = "square",
+  Star = "star",
+  StarAlt = "star-alt",
+  TableSearch = "table-search",
+  Times = "times",
+  TimesCircle = "times-circle",
+  TimesCircleAlt = "times-circle-alt",
+  TimesThin = "times-thin",
+  Trash = "trash",
+  TriangleDown = "triangle-down",
+  TriangleDownCircle = "triangle-down-circle",
+  TriangleLeft = "triangle-left",
+  TriangleRight = "triangle-right",
+  TriangleUp = "triangle-up",
+  Undo = "undo",
+  Warning = "warning",
+  WarningFilled = "warning-filled",
+  FileOutline = "file-outline",
+  FileUpload = "file-upload-outline",
+  FileDownload = "file-download-outline",
+  UploadOutline = "upload-outline",
+  ReplyOutline = "reply-outline",
+  SaveOutline = "save-outline",
+  DownloadFile = "download-file-outline",
+  RetryFile = "retry",
+  AbortFile = "cancel",
+  FileAltIcon = "file-alt",
+  AddCircle = "add-circle",
+  ZoomIn = "zoom-in",
+  ZoomOut = "zoom-out",
+  ArrowUp = "arrow-up",
+  ArrowLeft = "arrow-left",
+  ExternalLink = "external-link",
+  SideSheetHandle = "sidesheet-handle",
+  PendingCircle = "pending-circle",
+  MinusCircle = "minus-circle",
+  ArrowRight = "arrow-right",
+  PermIdentity = "perm-identity",
+  Cable = "cable",
+  Dashboard = "dashboard",
+  FidoDevice = "fido-device",
+  Security = "security",
+  Switch = "switch",
+  Group = "group",
+  Devices = "devices",
+  DownloadCircle = "download-circle",
+  Key = "key",
+  Password = "password",
+  Phone = "phone",
+  Envelope = "envelope",
+  Badge = "badge"
+}
+
+type Tag = "span" | "div" | "i";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  icon: Icons;
+  color?: string;
+  size?: string;
+  tag?: Tag;
+}
+
+const IconComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { icon, color, className, style, size, tag = "span", ...rest }: Props,
+  ref
+) => {
+  const Component = tag;
+
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      style={{ color: color, ...style, fontSize: size }}
+      data-icon
+      aria-hidden="true"
+      className={`${classes["icon"]} ${classes["icon-" + icon]} ${className ? className : ""}`}
+    />
+  );
+};
+
+export const Icon = React.forwardRef(IconComponent);

package/src/components/InlineEditing/InlineCheckbox/InlineCheckbox.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 React from "react";
+import { Checkbox, CheckboxProps } from "../../..";
+import { InlineEditingProvider } from "../InlineEditingContext";
+
+export interface InlineCheckboxProps extends CheckboxProps {
+  tooltipText?: string;
+}
+
+export const InlineCheckbox = (props: InlineCheckboxProps) => {
+  const { error, success, tooltipText, required, ...rest } = props;
+  const inlineEditingValues = {
+    enabled: true,
+    error: error,
+    success: success,
+    required: required,
+    tooltipText: tooltipText
+  };
+
+  return (
+    <InlineEditingProvider value={inlineEditingValues}>
+      <Checkbox {...rest} />
+    </InlineEditingProvider>
+  );
+};

package/src/components/InlineEditing/InlineEditingContext.tsx

@@ -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.
+ */
+
+import { createContext, useContext } from "react";
+
+export interface InlineEditingInterface {
+  enabled: boolean;
+  required?: boolean;
+  error?: boolean;
+  success?: boolean;
+  tooltipText?: string;
+  inlineClassNames?: string;
+}
+
+const InlineEditingContext = createContext<InlineEditingInterface>({ enabled: false });
+
+export const InlineEditingProvider = InlineEditingContext.Provider;
+
+export const useInlineEditing = () => useContext(InlineEditingContext);