@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Icon/Icon.module.scss

@@ -1,17 +1,17 @@
 @font-face {
-  font-family: 'icomoon';
-  src: url('../../font/icomoon.eot?9c63pa');
-  src: url('../../font/icomoon.eot?9c63pa#iefix') format('embedded-opentype'),
-    url('../../font/icomoon.ttf?9c63pa') format('truetype'),
-    url('../../font/icomoon.woff?9c63pa') format('woff'),
-    url('../../font/icomoon.svg?9c63pa#icomoon') format('svg');
+  font-family: "icomoon";
+  src: url("../../font/icomoon.eot?9c63pa");
+  src: url("../../font/icomoon.eot?9c63pa#iefix") format("embedded-opentype"),
+    url("../../font/icomoon.ttf?9c63pa") format("truetype"),
+    url("../../font/icomoon.woff?9c63pa") format("woff"),
+    url("../../font/icomoon.svg?9c63pa#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
 @mixin fontProperties() {
-  font-family: 'icomoon', sans-serif !important;
+  font-family: "icomoon", sans-serif !important;
   speak: never;
   font-style: normal;
   font-weight: normal;
@@ -29,258 +29,258 @@
 }
 
 .icon-image:before {
-  content: '\e900';
+  content: "\e900";
   @include fontProperties();
 }
 .icon-bookmark:before {
-  content: '\e901';
+  content: "\e901";
   @include fontProperties();
 }
 .icon-bookmark-alt:before {
-  content: '\e902';
+  content: "\e902";
   @include fontProperties();
 }
 .icon-equal:before {
-  content: '\e903';
+  content: "\e903";
   @include fontProperties();
 }
 .icon-build:before {
-  content: '\e904';
+  content: "\e904";
   @include fontProperties();
 }
 .icon-refresh:before {
-  content: '\e905';
+  content: "\e905";
   @include fontProperties();
 }
 .icon-calendar:before {
-  content: '\e906';
+  content: "\e906";
   @include fontProperties();
 }
 .icon-checkmark-circle:before {
-  content: '\e907';
+  content: "\e907";
   @include fontProperties();
 }
 .icon-checkmark-circle-alt:before {
-  content: '\e908';
+  content: "\e908";
   @include fontProperties();
 }
 .icon-clock:before {
-  content: '\e909';
+  content: "\e909";
   @include fontProperties();
 }
 .icon-trash:before {
-  content: '\e90a';
+  content: "\e90a";
   @include fontProperties();
 }
 .icon-heart:before {
-  content: '\e90b';
+  content: "\e90b";
   @include fontProperties();
 }
 .icon-search:before {
-  content: '\e90c';
+  content: "\e90c";
   @include fontProperties();
 }
 .icon-gearwheel:before {
-  content: '\e90d';
+  content: "\e90d";
   @include fontProperties();
 }
 .icon-star:before {
-  content: '\e90e';
+  content: "\e90e";
   @include fontProperties();
 }
 .icon-star-alt:before {
-  content: '\e90f';
+  content: "\e90f";
   @include fontProperties();
 }
 .icon-undo:before {
-  content: '\e910';
+  content: "\e910";
   @include fontProperties();
 }
 .icon-eye:before {
-  content: '\e911';
+  content: "\e911";
   @include fontProperties();
 }
 .icon-times-circle-alt:before {
-  content: '\e912';
+  content: "\e912";
   @include fontProperties();
 }
 .icon-info-circle:before {
-  content: '\e913';
+  content: "\e913";
   @include fontProperties();
 }
 .icon-info-bell:before {
-  content: '\e914';
+  content: "\e914";
   @include fontProperties();
 }
 .icon-checkmark-circle-breakout:before {
-  content: '\e915';
+  content: "\e915";
   @include fontProperties();
 }
 .icon-warning:before {
-  content: '\e916';
+  content: "\e916";
   @include fontProperties();
 }
 .icon-plus:before {
-  content: '\e917';
+  content: "\e917";
   @include fontProperties();
 }
 .icon-copy:before {
-  content: '\e918';
+  content: "\e918";
   @include fontProperties();
 }
 .icon-edit:before {
-  content: '\e919';
+  content: "\e919";
   @include fontProperties();
 }
 .icon-filter:before {
-  content: '\e91a';
+  content: "\e91a";
   @include fontProperties();
 }
 .icon-link:before {
-  content: '\e91b';
+  content: "\e91b";
   @include fontProperties();
 }
 .icon-change:before {
-  content: '\e91c';
+  content: "\e91c";
   @include fontProperties();
 }
 .icon-filter-alt-arrow:before {
-  content: '\e91d';
+  content: "\e91d";
   @include fontProperties();
 }
 .icon-filter-alt:before {
-  content: '\e91e';
+  content: "\e91e";
   @include fontProperties();
 }
 .icon-filter-alt-times:before {
-  content: '\e91f';
+  content: "\e91f";
   @include fontProperties();
 }
 .icon-grid:before {
-  content: '\e920';
+  content: "\e920";
   @include fontProperties();
 }
 .icon-triangle-down:before {
-  content: '\e921';
+  content: "\e921";
   @include fontProperties();
 }
 .icon-triangle-down-circle:before {
-  content: '\e922';
+  content: "\e922";
   @include fontProperties();
 }
 .icon-triangle-up:before {
-  content: '\e923';
+  content: "\e923";
   @include fontProperties();
 }
 .icon-triangle-right:before {
-  content: '\e924';
+  content: "\e924";
   @include fontProperties();
 }
 .icon-chevron-left:before {
-  content: '\e925';
+  content: "\e925";
   @include fontProperties();
 }
 .icon-chevron-right:before {
-  content: '\e926';
+  content: "\e926";
   @include fontProperties();
 }
 .icon-times:before {
-  content: '\e927';
+  content: "\e927";
   @include fontProperties();
 }
 .icon-times-circle:before {
-  content: '\e928';
+  content: "\e928";
   @include fontProperties();
 }
 .icon-times-thin:before {
-  content: '\e929';
+  content: "\e929";
   @include fontProperties();
 }
 .icon-chevron-up:before {
-  content: '\e92a';
+  content: "\e92a";
   @include fontProperties();
 }
 .icon-chevron-down:before {
-  content: '\e92b';
+  content: "\e92b";
   @include fontProperties();
 }
 .icon-navigation-first:before {
-  content: '\e92c';
+  content: "\e92c";
   @include fontProperties();
 }
 .icon-fullscreen:before {
-  content: '\e92d';
+  content: "\e92d";
   @include fontProperties();
 }
 .icon-fullscreen-exit:before {
-  content: '\e92e';
+  content: "\e92e";
   @include fontProperties();
 }
 .icon-navigation-last:before {
-  content: '\e92f';
+  content: "\e92f";
   @include fontProperties();
 }
 .icon-hamburger:before {
-  content: '\e930';
+  content: "\e930";
   @include fontProperties();
 }
 .icon-ellipsis:before {
-  content: '\e931';
+  content: "\e931";
   @include fontProperties();
 }
 .icon-triangle-left:before {
-  content: '\e932';
+  content: "\e932";
   @include fontProperties();
 }
 .icon-ellipsis-alt:before {
-  content: '\e933';
+  content: "\e933";
   @include fontProperties();
 }
 .icon-bell:before {
-  content: '\e934';
+  content: "\e934";
   @include fontProperties();
 }
 .icon-bell-alt:before {
-  content: '\e935';
+  content: "\e935";
   @include fontProperties();
 }
 .icon-share:before {
-  content: '\e936';
+  content: "\e936";
   @include fontProperties();
 }
 .icon-forbidden:before {
-  content: '\e937';
+  content: "\e937";
   @include fontProperties();
 }
 .icon-checkmark:before {
-  content: '\e938';
+  content: "\e938";
   @include fontProperties();
 }
 .icon-checkmark-square:before {
-  content: '\e939';
+  content: "\e939";
   @include fontProperties();
 }
 .icon-square:before {
-  content: '\e93a';
+  content: "\e93a";
   @include fontProperties();
 }
 .icon-minus-square:before {
-  content: '\e93b';
+  content: "\e93b";
   @include fontProperties();
 }
 .icon-radio:before {
-  content: '\e93c';
+  content: "\e93c";
   @include fontProperties();
 }
 .icon-error-circle:before {
-  content: '\e93d';
+  content: "\e93d";
   @include fontProperties();
 }
 .icon-circle:before {
-  content: '\e93e';
+  content: "\e93e";
   @include fontProperties();
 }
 .icon-table-search:before {
-  content: '\e93f';
+  content: "\e93f";
   @include fontProperties();
 }

package/src/Icon/Icon.test.tsx

@@ -1,38 +1,38 @@
-import React, { useEffect, useRef } from 'react';
-import { Icon, Props, Icons } from './Icon';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { Icon, Props, Icons } from "./Icon";
+import { render } from "@testing-library/react";
 
-interface PartialProps extends Omit<Props, 'ref'> {}
+interface PartialProps extends Omit<Props, "ref"> {}
 
 const initParams: PartialProps = {
   icon: Icons.Calendar,
-  color: 'rgb(26, 153, 60)',
+  color: "rgb(26, 153, 60)"
 };
 
 const createIcon = (params = initParams) => {
   const queries = render(
     <Icon {...params} data-testid="icon-component" color={params.color} icon={params.icon} />
   );
-  const icon = queries.getByTestId('icon-component');
+  const icon = queries.getByTestId("icon-component");
 
   return {
     ...queries,
-    icon,
+    icon
   };
 };
 
-describe('Icon', () => {
-  it('renders without crashing', () => {
+describe("Icon", () => {
+  it("renders without crashing", () => {
     const { icon } = createIcon();
 
     expect(icon).toBeDefined();
-    expect(icon).toHaveClass('icon-calendar');
-    expect(icon.tagName.toLowerCase()).toBe('span');
-    expect(icon.getAttribute('style')).toBe('color: rgb(26, 153, 60);');
+    expect(icon).toHaveClass("icon-calendar");
+    expect(icon.tagName.toLowerCase()).toBe("span");
+    expect(icon.getAttribute("style")).toBe("color: rgb(26, 153, 60);");
   });
 
-  it('should render icon with within div tag', () => {
-    const tag = 'div';
+  it("should render icon with within div tag", () => {
+    const tag = "div";
     const { icon } = createIcon({ ...initParams, tag });
 
     expect(icon).toBeDefined();
@@ -40,10 +40,10 @@ describe('Icon', () => {
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -59,7 +59,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Icon/Icon.tsx

@@ -1,76 +1,76 @@
-import React, { ComponentPropsWithRef } from 'react';
-import classes from './Icon.module.scss';
+import React, { 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',
-  Eye = 'eye',
-  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',
-  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',
+  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",
+  Eye = "eye",
+  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",
+  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"
 }
 
-type Tag = 'span' | 'div' | 'i';
+type Tag = "span" | "div" | "i";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   icon: Icons;
   color?: string;
   size?: string;
@@ -78,7 +78,7 @@ export interface Props extends ComponentPropsWithRef<'div'> {
 }
 
 export const Icon = React.forwardRef<HTMLDivElement, Props>(
-  ({ icon, color, className, style, size, tag = 'span', ...rest }: Props, ref) => {
+  ({ icon, color, className, style, size, tag = "span", ...rest }: Props, ref) => {
     const Component = tag;
 
     return (
@@ -88,7 +88,7 @@ export const Icon = React.forwardRef<HTMLDivElement, Props>(
         style={{ color: color, ...style, fontSize: size }}
         data-icon
         aria-hidden="true"
-        className={`${classes['icon']} ${classes['icon-' + icon]} ${className ? className : ''}`}
+        className={`${classes["icon"]} ${classes["icon-" + icon]} ${className ? className : ""}`}
       />
     );
   }

package/src/Link/Link.module.scss

@@ -1,4 +1,4 @@
-@import '../mixins.module.scss';
+@import "../mixins.module.scss";
 
 .link {
   font-family: var(--font-family);
@@ -48,19 +48,19 @@
 }
 
 .button {
-  @include buttonBase('link');
+  @include buttonBase("link");
 
   text-decoration: none;
 
   &.fill {
-    @include button('fill', 'link');
+    @include button("fill", "link");
   }
 
   &.outline {
-    @include button('outline', 'link');
+    @include button("outline", "link");
   }
 
   &.text {
-    @include button('text', 'link');
+    @include button("text", "link");
   }
 }