@onewelcome/react-lib-components 0.2.6 → 1.0.0

package/src/Tabs/TabPanel.module.scss

@@ -1,6 +1,26 @@
+/*!
+ * 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.
+ */
+
 .tabpanel {
   display: none;
 
+  &:focus-visible {
+    outline-color: var(--color-focus);
+  }
+
   &.selected {
     display: block;
   }

package/src/Tabs/TabPanel.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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 { TabPanel, Props } from "./TabPanel";
 import { render } from "@testing-library/react";

package/src/Tabs/TabPanel.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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 } from "react";
 import classes from "./TabPanel.module.scss";
 

package/src/Tabs/Tabs.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * 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.
+ */
+
 $focus-width: 5px;
 
 .tabs {
@@ -22,8 +38,8 @@ $focus-width: 5px;
 
 .indicator {
   position: absolute;
-  height: 2px;
-  background-color: var(--color-primary);
+  height: var(--tab-active-border-height);
+  background-color: var(--tab-active-border-color);
   transition-property: left, width;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;

package/src/Tabs/Tabs.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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 { Tabs, Props } from "./Tabs";
 import { render } from "@testing-library/react";

package/src/Tabs/Tabs.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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,
   createRef,
@@ -143,7 +159,7 @@ export const Tabs = ({
           }}
         />
       </div>
-      <div className={classes["tabpanels"]}>{tabPanels}</div>
+      <div>{tabPanels}</div>
     </div>
   );
 };

package/src/TextEllipsis/TextEllipsis.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * 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.
+ */
+
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;

package/src/TextEllipsis/TextEllipsis.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, { useEffect, useRef } from "react";
 import { render } from "@testing-library/react";
 import user from "@testing-library/user-event";

package/src/TextEllipsis/TextEllipsis.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, { useRef, MouseEventHandler, useState, ComponentPropsWithRef } from "react";
 import { Popover } from "../Popover/Popover";
 import classes from "./TextEllipsis.module.scss";

package/src/Tiles/Tile.module.scss

@@ -1,11 +1,27 @@
+/*!
+ * 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 "../mixins.module.scss";
 
 .tile {
-  border: 1px solid #e9e9eb;
+  border: 1px solid var(--light-grey-border);
   border-radius: 8px;
   box-sizing: border-box;
   padding: 0 0 2rem;
-  background-color: #fff;
+  background-color: var(--light);
   transition: box-shadow 0.2s ease-in-out;
   font-family: var(--font-family);
 

package/src/Tiles/Tile.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, { useEffect, useRef } from "react";
 import { Tile, Props } from "./Tile";
 import { render } from "@testing-library/react";

package/src/Tiles/Tile.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,

package/src/Tiles/Tiles.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * 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.
+ */
+
 .tiles {
   display: grid;
   grid-gap: 1rem;

package/src/Tiles/Tiles.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, { useEffect, useRef } from "react";
 import { Tiles, Props } from "./Tiles";
 import { Tile } from "./Tile";

package/src/Tiles/Tiles.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, ReactNode } from "react";
 import classes from "./Tiles.module.scss";
 import { Tile } from "./Tile";

package/src/Tooltip/Tooltip.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * 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.
+ */
+
 .wrapper {
   display: flex;
   align-items: center;
@@ -19,7 +35,7 @@
   position: fixed;
   background-color: var(--default);
   padding: 0.1875rem 0.5rem;
-  color: #fff;
+  color: var(--light);
   max-width: 330px;
   opacity: 0;
   transform: scale(0);

package/src/Tooltip/Tooltip.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, { useEffect, useRef } from "react";
 import { Tooltip, Props } from "./Tooltip";
 import { render } from "@testing-library/react";
@@ -39,6 +55,16 @@ describe("Tooltip should render", () => {
     expect(tooltip).toBeTruthy();
   });
 
+  it("renders with label as ReactElement", () => {
+    const labelText = "llaabbeell";
+    const { getByText } = createTooltip(defaultParams => ({
+      ...defaultParams,
+      label: <div>{labelText}</div>
+    }));
+
+    expect(getByText(labelText)).toBeDefined();
+  });
+
   it("should override the default placement and offset values", () => {
     const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,

package/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,22 @@
+/*
+ * 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,
+  ReactElement,
   ReactNode,
   useEffect,
   useLayoutEffect,
@@ -83,7 +100,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
 
     const renderChildren = () => {
       if (React.isValidElement(label)) {
-        return React.cloneElement(label, {
+        return React.cloneElement(label as ReactElement, {
           onFocus: () => setVisible(true),
           onBlur: () => setVisible(false),
           "aria-describedby": identifier,

package/src/Typography/Typography.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * 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.
+ */
+
 @mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
   font-family: $fontFamily;
   font-size: $fontSize;

package/src/Typography/Typography.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, { useEffect, useRef } from "react";
 import { Typography, Props } from "./Typography";
 import { render } from "@testing-library/react";

package/src/Typography/Typography.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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, ReactNode } from "react";
 import classes from "./Typography.module.scss";
 import { Spacing, useSpacing } from "../hooks/useSpacing";

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

@@ -1,3 +1,19 @@
+/*!
+ * 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.
+ */
+
 @mixin clickable-element {
   &:enabled:hover,
   &:focus,
@@ -7,7 +23,7 @@
     .number-wrapper {
       .number {
         background-color: var(--color-primary);
-        color: #ffffff;
+        color: var(--light);
       }
     }
 
@@ -87,15 +103,11 @@
   &.current {
     .number-wrapper {
       .number {
-        color: #fff;
+        color: var(--light);
         border: 2px solid var(--color-primary);
         background-color: var(--color-primary);
       }
 
-      &:after {
-        border-bottom: 2px solidvar(--color-primary);
-      }
-
       &:before {
         border-bottom: 2px solid var(--color-primary);
       }
@@ -165,7 +177,7 @@
   height: 1.5rem;
   color: var(--greyed-out);
   line-height: 1.5rem;
-  background-color: #ffffff;
+  background-color: var(--light);
   box-sizing: content-box;
 }
 

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * 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 { BaseWizardSteps, Props } from "./BaseWizardSteps";
 import { getAllByRole, getByText, queryByText, render } from "@testing-library/react";
@@ -20,7 +36,6 @@ const initParams: Props = {
     }
   ],
   currentStepNo: 1,
-  stepScreenReaderLabel: "Step",
   onClick: jest.fn()
 };
 

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -1,6 +1,21 @@
+/*
+ * 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, Fragment } from "react";
 import classes from "./BaseWizardSteps.module.scss";
-import readyclasses from "../../readyclasses.module.scss";
 import { Icon, Icons } from "../../Icon/Icon";
 
 type StepState = "finished" | "current" | "future";
@@ -15,21 +30,10 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
   currentStepNo: number;
   onClick?: (stepNo: number) => void;
   futureStepsClickable?: boolean;
-  stepScreenReaderLabel: string;
 }
 
 export const BaseWizardSteps = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      steps,
-      currentStepNo,
-      onClick,
-      futureStepsClickable = false,
-      stepScreenReaderLabel,
-      ...rest
-    }: Props,
-    ref
-  ) => {
+  ({ steps, currentStepNo, onClick, futureStepsClickable = false, ...rest }: Props, ref) => {
     const getStepState = (stepNo: number): StepState => {
       if (currentStepNo === stepNo) {
         return "current";
@@ -44,12 +48,7 @@ export const BaseWizardSteps = React.forwardRef<HTMLDivElement, Props>(
       if (stepState === "finished") {
         return disabled ? null : <Icon className={classes["checkmark"]} icon={Icons.Checkmark} />;
       } else {
-        return (
-          <Fragment>
-            <span className={readyclasses["sr-only"]}>{stepScreenReaderLabel} </span>
-            {stepNumberString}
-          </Fragment>
-        );
+        return <Fragment>{stepNumberString}</Fragment>;
       }
     };