qlu-20-ui-library 1.0.0

package/src/_svg.scss

@@ -0,0 +1,27 @@
+@import './colors';
+
+@mixin svgFillStroke($color: $gray-300){
+    >svg{
+        >path{
+            transition: fill 300ms ease-in-out, stroke 300ms ease-in-out;
+            fill: $color;
+            stroke: $color;
+        }
+    }
+}
+@mixin svgStroke($color: $gray-300){
+    >svg{
+        >path{
+            transition: stroke 300ms ease-in-out;
+            stroke: $color;
+        }
+    }
+}
+@mixin svgFill($color: $gray-300){
+    >svg{
+        >path{
+            transition: fill 300ms ease-in-out;
+            fill: $color;
+        }
+    }
+}

package/src/components/AddAdditionalIdealProfileCard/AddAdditionalIdealProfileCard.tsx

@@ -0,0 +1,52 @@
+import './style.scss'
+import { IconSize } from '../../utils';
+import CircularIcon from '../CircularIcon/CircularIcon';
+import CircularSvgButton from '../CircularSvgButton/CircularSvgButton';
+
+interface AddTribeMemberCardProps{
+    iconUrl: string;
+    tribeMemberName: string;
+    tribeMemberMail: string;
+    containerClassName?: string;
+    iconSize?: IconSize;
+    onAddClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+const AddTribeMemberCard = ({
+    iconUrl= '',
+    tribeMemberName= '',
+    tribeMemberMail= '',
+    iconSize= '48',
+    containerClassName= '',
+    onAddClick,
+}: AddTribeMemberCardProps) => {
+  return (
+    <div
+        className={`addTribeMemberCard ${containerClassName}`}
+    >
+        <CircularIcon
+            iconPath={iconUrl}
+            iconSize={iconSize}
+        />
+        <span>
+            <span
+                className='addTribeMemberCard--Details'
+            >
+                <span>
+                    <h3>{tribeMemberName}</h3>
+                    <p>{tribeMemberMail}</p>
+                </span>
+            </span>
+            <CircularSvgButton
+                color='gray'
+                variant='tertiary'
+                iconType='plus'
+                onClick={onAddClick}
+                sizeVariant='xs'
+            />
+        </span>
+    </div>
+  )
+}
+
+export default AddTribeMemberCard

package/src/components/AddAdditionalIdealProfileCard/style.scss

@@ -0,0 +1,42 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+
+.addTribeMemberCard{
+    display: flex;
+    flex-direction: row;
+    border: 1px solid $gray-800;
+    border-radius: 8px;
+    background: linear-gradient(212.26deg, rgba(73, 73, 73, 0.2) 0%, rgba(73, 73, 73, 0) 99.04%);
+    
+    padding: 16px;
+    box-sizing: border-box;
+    gap: 12px;
+
+    width: 350px;
+
+    >span{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 85%;
+        .addTribeMemberCard--Details{
+        
+            display: flex;
+            flex-direction: column;
+            
+            >span{
+                >h3{
+                    @include text-base($weight : 600 , $color: $gray-25);
+                }
+                >p{
+                    @include text-sm($weight : 400 , $color: $gray-100);
+                    display: inline;
+                }
+            }
+        }
+
+    }
+}

package/src/components/CircularIcon/CircularIcon.tsx

@@ -0,0 +1,24 @@
+
+import './style.scss'
+import { IconSize } from '../../utils'
+
+interface CircularIconProps{
+    iconPath : string
+    iconSize?: IconSize
+}
+
+const CircularIcon = ({
+    iconPath = '',
+    iconSize = '24',
+} : CircularIconProps) => {
+  return (
+    <img
+        className='circularIcon'
+        width={iconSize}
+        height={iconSize}
+        src={iconPath}
+    />
+  )
+}
+
+export default CircularIcon

package/src/components/CircularIcon/style.scss

@@ -0,0 +1,3 @@
+.circularIcon{
+    border-radius: 50%;
+}

package/src/components/CircularSvgButton/CircularSvgButton.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import './style.scss'
+import { IconSize, IconType } from "../../utils";
+import GetSvgIcon from "../GetSvgIcon/GetSvgIcon";
+
+interface CircularSvgButtonProps{
+
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  isDisabled?: boolean;
+  className?: string;
+  sizeVariant: 'xxs' | 'xs' | 'sm' | 'base' | 'l' | 'xl' ;
+  color: 'orange' | 'gray' | 'black';
+  variant: 'primary' | 'secondary' | 'tertiary';
+  style?: object;
+  iconType: IconType
+  iconSize?: IconSize
+}
+
+const CircularSvgButton = ({
+  isDisabled = false,
+  // className = '',
+  sizeVariant = 'xs',
+  variant = 'primary',
+  color = 'orange',
+  style = {},
+  iconType = 'cross',
+  iconSize = '24',
+  onClick,
+} : CircularSvgButtonProps) => {
+
+
+  const className = clsx({
+    circularSvgButtonGeneric : true,
+    [`${sizeVariant}Size--CircularSvgButton`]: true,
+    [`${variant}-${color}--CircularSvgButton`]: true
+})
+
+
+  return (
+    <button
+      style={style}
+      disabled = {isDisabled}
+      onClick={onClick}
+      className={className}
+    >
+      <GetSvgIcon
+        iconType={iconType}        
+        iconSize={iconSize}        
+      />
+    </button>
+  )
+}
+
+export default CircularSvgButton

package/src/components/CircularSvgButton/style.scss

@@ -0,0 +1,105 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+@mixin primaryCircular ($fcolor: $orange-990 , $bgColor: $orange-500 , $fColor-hover: white , $bgColor-hover: $orange-700 , $outlineColor: $orange-300){
+    @include svgFillStroke($color: $fcolor);
+    background-color: $bgColor;
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+    border: none;
+    &:hover{
+        @include svgFillStroke($color: $fColor-hover);
+        background-color: $bgColor-hover;    
+    }
+    &:active:not(:disabled){
+        outline: 2px solid $outlineColor;    
+    }
+}
+
+@mixin secondaryCircular ($fcolor: $orange-990 , $bgColor: transparent , $fColor-hover: white , $bgColor-hover: $orange-500 , $outlineColor: $orange-300){
+    @include svgFillStroke($color: $fcolor);
+    background-color: $bgColor;
+    border: 1px solid $bgColor-hover;
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+    
+    &:hover{
+        @include svgFillStroke($color: $fColor-hover);
+        background-color: $bgColor-hover;    
+    }
+    &:active:not(:disabled){
+        outline: 2px solid $outlineColor;    
+    }
+}
+
+@mixin tertiaryCircular (){
+    @include svgFillStroke($color: $gray-25);
+    background-color: $gray-700;
+    border: none;
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+    
+    &:hover{
+        background-color: $gray-600;   
+    }
+    &:active:not(:disabled){
+        outline: 2px solid $gray-400;  
+    }
+}
+
+.primary-orange--CircularSvgButton{
+    @include primaryCircular();
+}
+.primary-gray--CircularSvgButton{
+    @include primaryCircular($fcolor: $gray-900 , $bgColor: $gray-200 , $fColor-hover: $gray-900 , $bgColor-hover: $gray-300 , $outlineColor: $gray-100);
+}
+.primary-black--CircularSvgButton{
+    @include primaryCircular($fcolor: white , $bgColor: $gray-800 , $fColor-hover: white , $bgColor-hover: $gray-700 , $outlineColor: $gray-200);
+}
+
+.secondary-orange--CircularSvgButton{
+    @include secondaryCircular();
+}
+.secondary-gray--CircularSvgButton{
+    @include secondaryCircular($fcolor: $gray-900 , $bgColor: transparent , $fColor-hover: white , $bgColor-hover: $gray-300 , $outlineColor: $gray-100);
+}
+.secondary-black--CircularSvgButton{
+    @include secondaryCircular($fcolor: $gray-900 , $bgColor: transparent , $fColor-hover: white , $bgColor-hover: $gray-800 , $outlineColor: $gray-200);
+}
+
+.tertiary-gray--CircularSvgButton{
+    @include tertiaryCircular();
+}
+
+.circularSvgButtonGeneric{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50vh;
+    height: fit-content;
+    &:hover{
+        cursor: pointer;
+    }
+}
+
+.xxsSize--CircularSvgButton{
+    padding: 0px;
+}
+
+.xsSize--CircularSvgButton{
+    padding: 6px;
+}
+
+.smSize--CircularSvgButton{
+    padding: 8px;
+}
+
+.baseSize--CircularSvgButton{
+    padding: 10px;
+}
+
+.lSize--CircularSvgButton{
+    padding: 12px;
+}
+
+.xlSize--CircularSvgButton{
+    padding: 14px;
+}

package/src/components/ClickableText/ClickableText.tsx

@@ -0,0 +1,50 @@
+import clsx from "clsx";
+import { IconType } from "../../utils";
+import GetSvgIcon from "../GetSvgIcon/GetSvgIcon";
+import './style.scss'
+
+interface ClickableTextProps{
+    text: string;
+    showIcon?: boolean;
+    iconOnLeft?: boolean;
+    iconType?: IconType;
+    sizeVariant?: 'xs' | 'sm' | 'base';
+    colorVariant?: 'orange' | 'gray';
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ClickableText = ({
+    text = 'String of Button',
+    showIcon = false,
+    iconOnLeft = false,
+    iconType = 'plus',
+    sizeVariant = 'xs',
+    colorVariant = 'orange',
+    onClick
+}: ClickableTextProps) => {
+
+  const clickableTextClassName = clsx({
+    clickableTextGeneric: true,
+    [`${sizeVariant}SizeClickableText`]: true,
+    [`${colorVariant}ClickableText`]: true,
+    iconOnLeftClickableText: iconOnLeft,
+  });
+    
+  return (
+    <button
+        onClick={onClick}
+        className={clickableTextClassName}
+    >
+        {text}
+        {
+            showIcon && 
+            <GetSvgIcon
+                iconType={iconType}
+                iconSize={sizeVariant === 'xs' ? '16' : sizeVariant === 'sm' ? '20' : sizeVariant === 'base' ? '24' : '28'}
+            />
+        }
+    </button>
+  )
+}
+
+export default ClickableText

package/src/components/ClickableText/style.scss

@@ -0,0 +1,68 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+// const clickableTextClassName = clsx({
+//     clickableTextGeneric: true,
+//     [`${sizeVariant}SizeClickableText`]: true,
+//     [`${colorVariant}ClickableText`]: true,
+//     iconOnLeftClickableText: iconOnLeft,
+//   });
+
+
+@mixin clickableTextColorVar($textColorVar : $gray-200 , $hoverColorVar : $gray-50){
+    @include svgFillStroke($color: $textColorVar);
+    color: $textColorVar;
+    transition: color 300ms ease-in-out , background-color 300ms ease-in-out , border 300ms ease-in-out , outline 300ms ease-in-out;
+    &:hover{
+        @include svgFillStroke($color: $hoverColorVar);
+        // background-color: pink;
+        // border-color: $hoverColorVar;
+        color: $hoverColorVar;
+    }
+}
+
+.clickableTextGeneric{
+    display: flex;
+    flex-direction: row;
+    background: transparent;
+    border-radius: 8px;
+    gap: 8px;
+
+    width: fit-content;
+    height: fit-content;
+    
+    outline: none;
+    border: 1px solid transparent;
+    &:hover{
+        cursor: pointer;
+    }
+}
+
+.iconOnLeftClickableText{
+    flex-direction: row-reverse;
+}
+
+.orangeClickableText{
+    @include clickableTextColorVar($hoverColorVar : $orange-400 , $textColorVar : $orange-500)
+}
+
+.grayClickableText{
+    @include clickableTextColorVar();
+}
+
+
+.xsSizeClickableText{
+    @include text-size-xs();
+    padding: 2px 4px;
+}
+
+.smSizeClickableText{
+    @include text-size-sm();
+    padding: 4px 8px;
+}
+
+.baseSizeClickableText{
+    @include text-size-base();
+    padding: 6px 12px;
+}

package/src/components/CompanyPillNotClicakble/CompanyPillNotClicakble.tsx

@@ -0,0 +1,32 @@
+import './style.scss'
+import { IconSize } from '../../utils'
+import CircularIcon from '../CircularIcon/CircularIcon'
+
+interface CompanyPillNotClicakbleProps{
+    companyName: string
+    companyIconPath: string
+    style?: object
+    companyIconSize?: IconSize
+}
+
+const CompanyPillNotClicakble = ({
+    companyName = '',
+    companyIconPath = '',
+    style={},
+    companyIconSize = '24'
+}: CompanyPillNotClicakbleProps) => {
+  return (
+    <div
+        style={style}
+        className='companyPillNotClickable'
+    >
+        <CircularIcon
+            iconPath={companyIconPath}
+            iconSize={companyIconSize}
+        />
+        <p>{companyName}</p>
+    </div>
+  )
+}
+
+export default CompanyPillNotClicakble

package/src/components/CompanyPillNotClicakble/style.scss

@@ -0,0 +1,21 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+
+.companyPillNotClickable{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px 8px 8px;
+    border-radius: 50vh;
+    gap: 8px;
+    height: fit-content;
+    background-color: $gray-800;
+
+    
+    >p{
+        @include text-sm($color: $gray-25 , $weight: 400);
+    }
+}

package/src/components/GetSvgIcon/GetSvgIcon.tsx

@@ -0,0 +1,65 @@
+import Clock from "../../svg/Clock";
+import Cross from "../../svg/Cross";
+import LinkedinLogo from "../../svg/LinkedinLogo";
+import Plus from "../../svg/Plus";
+import Thumb from "../../svg/Thumb";
+import Tick from "../../svg/Tick";
+import { IconSize, IconType } from "../../utils";
+
+interface GetSvgIcon {
+  iconType: IconType,
+  iconSize?: IconSize;
+}
+
+const GetSvgIcon = ({
+  iconType = 'cross',
+  iconSize = '24'
+}: GetSvgIcon) => {
+  return(
+      iconType === 'cross' ? 
+      (
+          <Cross
+              crossHeight={iconSize}
+              crossWidth={iconSize}
+          />
+      ) : 
+      iconType === 'plus' ? 
+      (
+          <Plus
+              plusWidth={iconSize}
+              plusHeight={iconSize}
+          />
+      ) : 
+      iconType === 'thumb' ? 
+      (
+          <Thumb
+              thumbHeight={iconSize}
+              thumbWidth={iconSize}
+          />
+      ) : 
+      iconType === 'clock' ? 
+      (
+          <Clock
+              clockHeight={iconSize}
+              clockWidth={iconSize}
+          />
+      ) : 
+      iconType === 'tick' ? 
+      (
+          <Tick
+              tickHeight={iconSize}
+              tickWidth={iconSize}
+          />
+      ) : 
+      iconType === 'linkedinLogo' ? 
+      (
+          <LinkedinLogo
+              linkedinLogoHeight={iconSize}
+              linkedinLogoWidth={iconSize}
+          />
+      ) : 
+      null
+  )
+};
+
+export default GetSvgIcon

package/src/components/HiringCompanyConciseCard/HiringCompanyConciseCard.tsx

@@ -0,0 +1,42 @@
+import './style.scss'
+import { IconSize } from '../../utils';
+import CircularIcon from '../CircularIcon/CircularIcon';
+
+interface HiringCompanyConciseCardProps{
+    iconUrl: string;
+    companyName: string;
+    companyBusiness: string;
+    numberOfEmployees: number;
+    containerClassName?: string;
+    iconSize?: IconSize;
+}
+
+const HiringCompanyConciseCard = ({
+    iconUrl= '',
+    companyName= '',
+    companyBusiness= '',
+    numberOfEmployees= 0,
+    iconSize= '48',
+    containerClassName= '',
+}: HiringCompanyConciseCardProps) => {
+  return (
+    <div
+        className={`hiringCompanyConciseCard ${containerClassName}`}
+    >
+        <CircularIcon
+            iconPath={iconUrl}
+            iconSize={iconSize}
+        />
+        <span
+            className='hiringCompanyConciseCardCompanyDetails'
+        >
+            <h3>{companyName}</h3>
+            <span>
+                {companyBusiness}• {numberOfEmployees} employees
+            </span>
+        </span>
+    </div>
+  )
+}
+
+export default HiringCompanyConciseCard

package/src/components/HiringCompanyConciseCard/style.scss

@@ -0,0 +1,31 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+
+.hiringCompanyConciseCard{
+    display: flex;
+    flex-direction: row;
+    border: 1px solid $gray-800;
+    border-radius: 8px;
+    background: linear-gradient(212.26deg, rgba(73, 73, 73, 0.2) 0%, rgba(73, 73, 73, 0) 99.04%);
+    
+    padding: 16px;
+    box-sizing: border-box;
+    gap: 12px;
+
+    width: 350px;
+}
+.hiringCompanyConciseCardCompanyDetails{
+
+    display: flex;
+    flex-direction: column;
+    
+    >h3{
+        @include text-base($weight : 600 , $color: $gray-25);
+    }
+    >span{
+        @include text-sm($weight : 400 , $color: $gray-100);
+        display: inline;
+    }
+}

package/src/components/IdealProfileConciseCard/IdealProfileConciseCard.tsx

@@ -0,0 +1,47 @@
+import './style.scss'
+import { IconSize } from '../../utils';
+import CircularIcon from '../CircularIcon/CircularIcon';
+import TruncateText from '../TruncateText/TruncateText';
+
+interface IdealProfileConciseCardProps{
+    iconUrl: string;
+    profileName: string;
+    profileCurrentRole: string;
+    profileCurrentCompany: string;
+    truncationLength?: number;
+    containerClassName?: string;
+    toolTipClassName?: string;
+    iconSize?: IconSize;
+}
+
+const IdealProfileConciseCard = ({
+    iconUrl= '',
+    profileName= '',
+    profileCurrentRole= '',
+    profileCurrentCompany= '',
+    truncationLength = 14,
+    iconSize= '48',
+    containerClassName= '',
+    toolTipClassName = '',
+}: IdealProfileConciseCardProps) => {
+  return (
+    <div
+        className={`idealProfileConciseCard ${containerClassName}`}
+    >
+        <CircularIcon
+            iconPath={iconUrl}
+            iconSize={iconSize}
+        />
+        <span
+            className='idealProfileConciseCardProfileDetails'
+        >
+            <h3>{profileName}</h3>
+            <span>
+                {profileCurrentRole} @ <TruncateText length={truncationLength} text={profileCurrentCompany} toolTipClassName={toolTipClassName}/>
+            </span>
+        </span>
+    </div>
+  )
+}
+
+export default IdealProfileConciseCard