@onewelcome/react-lib-components 0.1.0-alpha

package/src/readyclasses.module.scss

@@ -0,0 +1,77 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+@mixin skeletonLoading() {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--disabled);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(#fff, 0) 0,
+      rgba(#fff, 0.2) 20%,
+      rgba(#fff, 0.5) 60%,
+      rgba(#fff, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.slide-in {
+  animation: slide-in 0.5s forwards;
+}
+
+.slide-out {
+  animation: slide-out 0.5s forwards;
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(100vh);
+  }
+}
+
+@mixin focusOutline($color) {
+  &:focus-visible {
+    outline: 1px solid $color;
+    outline-offset: 1px;
+  }
+}

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}

package/src/util/helper.test.tsx

@@ -0,0 +1,15 @@
+import { generateID } from './helper';
+
+/* Generate an ID of 20 characters with a string woven in */
+
+describe('generateID should correctly generate IDs in the correct way', () => {
+  it('generates an ID of length 20 with a string woven in', () => {
+    const ID1 = generateID(20, 'thistestingstring');
+    expect(ID1.length).toBe(20);
+  });
+
+  it('genereates an ID without a string woven in', () => {
+    const ID2 = generateID(20);
+    expect(ID2.length).toBe(20);
+  });
+});

package/src/util/helper.tsx

@@ -0,0 +1,80 @@
+export const generateID = (length = 15, stringToWeaveIn?: string) => {
+  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
+  let hashCharacters = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '0',
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'N',
+    'O',
+    'P',
+    'Q',
+    'R',
+    'S',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z',
+    'a',
+    'b',
+    'c',
+    'd',
+    'e',
+    'f',
+    'g',
+    'h',
+    'i',
+    'j',
+    'k',
+    'l',
+    'm',
+    'n',
+    'o',
+    'p',
+    'q',
+    'r',
+    's',
+    't',
+    'u',
+    'v',
+    'w',
+    'x',
+    'y',
+    'z',
+  ];
+
+  let id = '';
+
+  /** Generate an id of x characters in length */
+  for (let i = 0; i < length && id.length < length; i++) {
+    let stringCharacter =
+      stringToWeaveIn && stringToWeaveIn[i] !== undefined && !/\s/.test(stringToWeaveIn[i])
+        ? stringToWeaveIn[i]
+        : '';
+    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];
+  }
+
+  return id.slice(0, length);
+};