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

package/src/components/InlineEditing/InlineEditingSelect/InlineSelect.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 { SingleSelectProps } from "../../Form/Select/Select.interfaces";
+import { Select } from "../../Form/Select/SingleSelect/Select";
+import { InlineEditingProvider } from "../InlineEditingContext";
+import selectClasses from "../../Form/Select/SingleSelect/Select.module.scss";
+
+export interface InlineSelectProps extends SingleSelectProps {
+  tooltipText?: string;
+}
+
+export const InlineSelect = (props: InlineSelectProps) => {
+  const { className, error, success, tooltipText, required, ...rest } = props;
+  const finalClassName = [className, selectClasses.inlineEditing].filter(Boolean).join(" ");
+  const inlineEditingValues = {
+    enabled: true,
+    error: error,
+    success: success,
+    required: required,
+    tooltipText: tooltipText,
+    inlineClassNames: finalClassName
+  };
+
+  return (
+    <InlineEditingProvider value={inlineEditingValues}>
+      <Select {...rest} />
+    </InlineEditingProvider>
+  );
+};

package/src/components/Layout/Card/Card.module.scss

@@ -0,0 +1,68 @@
+@use "../../../functions" as *;
+
+.main {
+  border-radius: relativeToBaseFontSize(0.25);
+  min-width: relativeToBaseFontSize(18.5);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: relativeToBaseFontSize(0.5) relativeToBaseFontSize(1.5);
+  justify-content: space-between;
+  gap: relativeToBaseFontSize(0.5);
+  background-color: var(--color-primary100);
+
+  .title-left {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin: 0;
+      font-weight: 500;
+      max-width: 100%;
+      display: block;
+    }
+
+    .description {
+      margin: 0;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  .title-right {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: relativeToBaseFontSize(0.5);
+    white-space: nowrap;
+  }
+}
+
+.body {
+  padding: relativeToBaseFontSize(1) relativeToBaseFontSize(1.5);
+
+  &.default-body-style {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &.white-body-style {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-blue-grey100);
+
+    &.without-header {
+      border-radius: relativeToBaseFontSize(0.25);
+    }
+
+    &.with-header {
+      border-top: none;
+      border-bottom-left-radius: relativeToBaseFontSize(0.25);
+      border-bottom-right-radius: relativeToBaseFontSize(0.25);
+    }
+  }
+}

package/src/components/Layout/Card/Card.tsx

@@ -0,0 +1,108 @@
+/*
+ * 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, { HTMLAttributes, ReactElement } from "react";
+import { Typography } from "../../Typography/Typography";
+
+import classes from "./Card.module.scss";
+import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
+
+export interface CardHeaderInfo {}
+
+export type CardStyle = "default" | "white";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  titleHeadingLevel?: number;
+  description?: string;
+  action?: ReactElement;
+  wrapHeaderText?: boolean;
+  headerContent?: ReactElement;
+  cardStyle?: CardStyle;
+  collapsed?: boolean;
+}
+
+export const CardComponent = ({
+  title,
+  titleHeadingLevel,
+  description,
+  action,
+  wrapHeaderText = false,
+  headerContent,
+  cardStyle = "default",
+  collapsed = false,
+  children,
+  ...rest
+}: CardProps) => {
+  const headerPresent = Boolean(title || description || action || headerContent);
+  return (
+    <div className={classes["main"]} {...rest}>
+      {headerPresent && (
+        <div className={classes["header"]}>
+          {headerContent}
+          {(title || description || action) && (
+            <>
+              {(title || description) && (
+                <div className={classes["title-left"]}>
+                  {title && (
+                    <Typography
+                      data-testid={"card-title"}
+                      className={classes["title"]}
+                      variant={"body"}
+                      role={titleHeadingLevel ? "heading" : undefined}
+                      aria-level={titleHeadingLevel}
+                    >
+                      {wrapHeaderText ? title : <TextEllipsis>{title}</TextEllipsis>}
+                    </Typography>
+                  )}
+                  {description && (
+                    <Typography
+                      data-testid={"card-description"}
+                      className={classes["description"]}
+                      variant="sub-text"
+                      spacing={{ margin: 0 }}
+                    >
+                      {wrapHeaderText ? description : <TextEllipsis>{description}</TextEllipsis>}
+                    </Typography>
+                  )}
+                </div>
+              )}
+              {action && (
+                <div data-testid={"card-action"} className={classes["title-right"]}>
+                  {action}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+      {!collapsed && (
+        <div
+          data-testid={"card-body"}
+          className={[
+            classes["body"],
+            classes[`${cardStyle}-body-style`],
+            classes[headerPresent ? "with-header" : "without-header"]
+          ].join(" ")}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Card = CardComponent;

package/src/components/Layout/ContentHeader/ContentHeader.module.scss

@@ -0,0 +1,95 @@
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 2rem;
+  z-index: 1;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  max-width: 105rem;
+
+  &.collapsed-header {
+    padding: 1rem 2rem 1rem 2rem;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+
+    align-items: center;
+  }
+
+  &-background-color {
+    background-color: var(--color-blue-grey25);
+  }
+
+  & button.back-arrow {
+    width: auto;
+    height: 1rem;
+    display: block;
+    gap: 0.5rem;
+  }
+}
+
+.hide-text {
+  display: none;
+}
+
+.header-text {
+  margin: 0;
+  font-weight: 500;
+  color: var(--color-blue-grey900);
+  line-height: 1.25;
+  display: flex;
+  align-items: center;
+  max-width: 65vw;
+
+  // This is a temporary solution making sure that the title is not gone on mobile.
+  @media screen and (max-width: 900px) {
+    max-width: unset;
+
+    div {
+      text-wrap: wrap;
+    }
+  }
+
+  div {
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  & button.back-arrow {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+.header-tags {
+  display: flex;
+
+  margin-left: 1rem;
+  gap: 0.5rem;
+}
+
+.header-subtitle {
+  color: var(--color-blue-grey400);
+  font-weight: 500;
+}
+
+.back-text {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 0.5rem;
+}
+
+.error-text {
+  color: var(--color-red500);
+  vertical-align: middle;
+  margin-left: 0.5rem;
+}
+
+.buttons-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  gap: 1rem;
+}

package/src/components/Layout/ContentHeader/ContentHeader.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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, { HTMLAttributes, ReactElement, useMemo } from "react";
+import { Button, Props as ButtonProps } from "../../Button/Button";
+import { Typography } from "../../Typography/Typography";
+
+import classes from "./ContentHeader.module.scss";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+import { NavigateFunction } from "react-router-dom";
+import { Tag, Props as TagProps } from "../../Tag/Tag";
+import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
+
+export interface ContentHeaderNavigationProps {
+  displayText?: string;
+  navigateFN: NavigateFunction;
+}
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  /**
+   * @deprecated pass text as children
+   */
+  subtitle?: string;
+  buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
+  collapsed?: boolean;
+  navigation?: ContentHeaderNavigationProps;
+  tags?: ReactElement<TagProps, typeof Tag>[];
+  error?: boolean;
+  errorMessage?: string;
+  errorTagText?: string;
+}
+
+export const ContentHeaderComponent = ({
+  title,
+  children,
+  buttons,
+  collapsed,
+  subtitle,
+  navigation,
+  tags,
+  error,
+  errorMessage,
+  errorTagText,
+  ...rest
+}: Props) => {
+  const errorTag = (
+    <Tag icon={Icons.Forbidden} backgroundColor="var(--color-red100)" color="var(--color-red900)">
+      {errorTagText || "Blocked"}
+    </Tag>
+  );
+
+  const getTags = () => tags ?? [];
+
+  const renderTags = useMemo(() => {
+    if (error && collapsed) {
+      return [errorTag, ...getTags().filter(tag => tag.props.variant !== "enabled")];
+    } else if (error) {
+      return getTags().filter(tag => tag.props.variant !== "enabled");
+    }
+    return getTags();
+  }, [tags, error, collapsed]);
+
+  return (
+    <div className={classes["header-background-color"]}>
+      <div
+        className={`${classes["header"]} ${rest.className} ${collapsed ? classes["collapsed-header"] : ""}`}
+        {...rest}
+      >
+        <div>
+          {navigation && !collapsed && (
+            <IconButton
+              onClick={() => {
+                navigation.navigateFN(-1);
+              }}
+              className={classes["back-arrow"]}
+              iconSize="s"
+            >
+              <Icon icon={Icons.ArrowLeft} />
+              <span className={classes["back-text"]}>
+                {navigation.displayText ? navigation.displayText : "Back"}
+              </span>
+            </IconButton>
+          )}
+          <Typography className={classes["header-text"]} variant={"h1"}>
+            {navigation && collapsed && (
+              <IconButton
+                onClick={() => {
+                  navigation.navigateFN(-1);
+                }}
+                className={classes["back-arrow"]}
+              >
+                <Icon icon={Icons.ArrowLeft} />
+              </IconButton>
+            )}
+            <TextEllipsis data-testid={"content-header-title"}>{title}</TextEllipsis>
+            <span className={classes["header-tags"]}>
+              {renderTags.map((tag, index) => (
+                <React.Fragment key={tag.key || index}>{tag}</React.Fragment>
+              ))}
+            </span>
+          </Typography>
+          {subtitle && !error && (
+            <Typography
+              className={`${classes["header-subtitle"]} ${collapsed ? classes["hide-text"] : ""}`}
+              variant="h4"
+            >
+              {subtitle}
+            </Typography>
+          )}
+          <Typography
+            className={`${collapsed ? classes["hide-text"] : ""}`}
+            variant="body"
+            spacing={{ margin: 0 }}
+          >
+            {error ? (
+              <>
+                {errorTag}
+                <span className={classes["error-text"]}>{errorMessage}</span>
+              </>
+            ) : (
+              children
+            )}
+          </Typography>
+        </div>
+        {buttons && <div className={classes["buttons-wrapper"]}>{buttons}</div>}
+      </div>
+    </div>
+  );
+};
+
+export const ContentHeader = ContentHeaderComponent;

package/src/components/Layout/FormPage/FormWithStepper/FormSection/FormSection.module.scss

@@ -0,0 +1,12 @@
+.section-wrapper {
+  padding-bottom: 4rem;
+}
+
+.section-header-wrapper {
+  margin-bottom: 1rem;
+}
+
+.section-header {
+  line-height: 1.6;
+  color: var(--color-primary500);
+}

package/src/components/Layout/FormPage/FormWithStepper/FormSection/FormSection.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import classes from "./FormSection.module.scss";
+import { Typography } from "../../../../Typography/Typography";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  header?: string;
+  subtext?: string;
+}
+
+export const FormSectionComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { header, subtext, children, ...rest },
+  ref
+) => {
+  return (
+    <div {...rest} className={classes["section-wrapper"]} ref={ref}>
+      {header && (
+        <div className={classes["section-header-wrapper"]}>
+          <Typography
+            variant="h4"
+            className={classes["section-header"]}
+            spacing={{ marginBottom: 0 }}
+          >
+            {header}
+          </Typography>
+          {subtext && (
+            <Typography variant="sub-text" spacing={{ marginBottom: 0 }}>
+              {subtext}
+            </Typography>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export const FormSection = React.forwardRef(FormSectionComponent);

package/src/components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper.module.scss

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+.stepper {
+  position: sticky;
+  top: 0;
+  & > div:first-child {
+    height: auto;
+    min-height: 15rem;
+    align-items: flex-start;
+  }
+}

package/src/components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 classes from "./FormStepper.module.scss";
+import { Stepper, Props as StepperProps } from "../../../../Stepper/Stepper";
+import { Props as StepProps } from "../../../../Stepper/Step";
+
+export interface FormStepProps extends StepProps {
+  targetScrollViewId?: string;
+}
+
+export interface Props extends StepperProps {
+  steps: FormStepProps[];
+}
+
+export const FormStepper = ({ steps, direction, textPosition, ...rest }: Props) => {
+  const stepper = steps.map(step => {
+    const { targetScrollViewId, ...stepRest } = step;
+
+    if (targetScrollViewId && !step.onClick) {
+      return {
+        ...stepRest,
+        onClick: () => {
+          try {
+            document.getElementById(targetScrollViewId)?.scrollIntoView();
+          } catch (e) {
+            throw new Error("Target element not found in the DOM.");
+          }
+        }
+      };
+    }
+    return step;
+  });
+
+  return (
+    <div className={classes["stepper"]}>
+      <Stepper {...rest} steps={stepper} direction={direction} textPosition={textPosition} />
+    </div>
+  );
+};

package/src/components/Layout/FormPage/FormWithStepper/FormWithStepper.module.scss

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+$header-height: 13.25rem;
+
+.content {
+  margin: 0 auto;
+  font-family: var(--font-family);
+  position: relative;
+  display: flex;
+  gap: 3.5rem;
+
+  background-color: var(--color-white);
+  height: calc(100vh - $header-height);
+  overflow: auto;
+  scroll-behavior: smooth;
+
+  .form-section {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 72%;
+  }
+}

package/src/components/Layout/FormPage/FormWithStepper/FormWithStepper.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 React, { HTMLAttributes, ReactElement } from "react";
+import { Props as FormStepperProps, FormStepper } from "./FormStepper/FormStepper";
+import classes from "./FormWithStepper.module.scss";
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  stepper?: ReactElement<FormStepperProps, typeof FormStepper>;
+}
+
+export const FormWithStepper = ({ children, stepper, ...rest }: Props) => {
+  return (
+    <div className={`${classes["content"]} ${rest.className}`} {...rest}>
+      {stepper}
+      <div className={classes["form-section"]}>{children}</div>
+    </div>
+  );
+};