qlu-20-ui-library 1.0.0

package/src/components/IdealProfileConciseCard/style.scss

@@ -0,0 +1,31 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+
+.idealProfileConciseCard{
+    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;
+}
+.idealProfileConciseCardProfileDetails{
+ 
+    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/IdealProfileSelectionCard/IdealProfileSelectionCard.tsx

@@ -0,0 +1,83 @@
+import './style.scss'
+import { IconSize } from '../../utils';
+import CircularIcon from '../CircularIcon/CircularIcon';
+import ClickableText from '../ClickableText/ClickableText';
+import GetSvgIcon from '../GetSvgIcon/GetSvgIcon';
+import TertiaryButton from '../TertiaryButton/TertiaryButton';
+import TruncateText from '../TruncateText/TruncateText';
+
+interface IdealProfileSelectionCardProps{
+    iconUrl: string;
+    profileName: string;
+    profileCurrentRole: string;
+    profileCurrentCompany: string;
+    truncationLength?: number;
+    containerClassName?: string;
+    toolTipClassName?: string;
+    selected: boolean;
+    onSelectClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onViewMoreClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    iconSize?: IconSize;
+}
+
+const IdealProfileSelectionCard = ({
+    iconUrl= '',
+    profileName= '',
+    profileCurrentRole= '',
+    profileCurrentCompany= '',
+    truncationLength = 14,
+    iconSize= '48',
+    containerClassName= '',
+    toolTipClassName = '',
+    selected = false,
+    onSelectClick,
+    onViewMoreClick,
+}: IdealProfileSelectionCardProps) => {
+  return (
+    <div
+        className={`idealProfileSelectionCard ${containerClassName} ${selected ? 'idealProfileSelectionCardSelected' : 'idealProfileSelectionCardUnelected'}`}
+    >
+        <CircularIcon
+            iconPath={iconUrl}
+            iconSize={iconSize}
+        />
+        <span
+            className='idealProfileSelectionCardProfileDetails'
+        >
+            <span
+                className='idealProfileSelectionCardProfileName'
+            >
+                <h3>{profileName}</h3>
+                <span>
+                    <GetSvgIcon
+                        iconType='linkedinLogo'
+                        iconSize='12'
+                    />
+                </span>
+            </span>
+            <span
+                className='idealProfileSelectionCardProfileRole'
+            >
+                {profileCurrentRole} @ <TruncateText length={truncationLength} text={profileCurrentCompany} toolTipClassName={toolTipClassName}/>
+                <ClickableText
+                    text = 'View More'
+                    colorVariant='orange'
+                    sizeVariant='xs'
+                    onClick = {onViewMoreClick}
+                />
+            </span>
+            <span
+                className='idealProfileSelectionCardButton'
+            >
+                <TertiaryButton
+                    onClick={onSelectClick}
+                    text={selected ? 'Unselect' : 'Select'}
+                    sizeVariant='xs'
+                />
+            </span>
+        </span>
+    </div>
+  )
+}
+
+export default IdealProfileSelectionCard

package/src/components/IdealProfileSelectionCard/style.scss

@@ -0,0 +1,58 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+
+.idealProfileSelectionCard{
+    display: flex;
+    flex-direction: row;
+    border-radius: 8px;
+    
+    padding: 16px;
+    box-sizing: border-box;
+    gap: 12px;
+    width: 350px;
+}
+
+.idealProfileSelectionCardSelected{
+    border: 1px solid $orange-500;
+    background: linear-gradient(212.26deg, rgba(255, 141, 78, 0.2) 0%, rgba(73, 73, 73, 0) 99.04%);
+}
+
+.idealProfileSelectionCardUnelected{
+    border: 1px solid $gray-800;
+    background: linear-gradient(212.26deg, rgba(73, 73, 73, 0.2) 0%, rgba(73, 73, 73, 0) 99.04%);
+}
+
+.idealProfileSelectionCardProfileDetails{
+ 
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 85%;
+
+    .idealProfileSelectionCardProfileName{
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        >h3{
+            @include text-base($weight : 600 , $color: $gray-25);
+        }
+        >span{
+            @include svgFillStroke($color: $gray-400);
+            width: fit-content;
+            height: fit-content;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+    }
+    .idealProfileSelectionCardProfileRole{
+        @include text-sm($weight : 400 , $color: $gray-100);
+        display: inline;
+    }
+    .idealProfileSelectionCardButton{
+        width: fit-content;
+        align-self: flex-end;
+    }
+}

package/src/components/InputField/InputField.tsx

@@ -0,0 +1,28 @@
+import './style.scss'
+
+interface InputFieldProps{
+    placeholder ?: string;
+    disabled ?: boolean;
+    textSize?: 'xs' | 'sm' | 'base';
+    style?: object;
+    errorState: boolean;
+}
+
+const InputField = ({
+    placeholder = '',
+    textSize = 'sm',
+    style = {},
+    errorState = false
+} : InputFieldProps) => {
+  return (
+    <input
+        style={style}
+        className={`inputFieldGeneric ${errorState && 'errorInputField'} ${textSize}TextSize`}
+        placeholder={placeholder}
+    >
+        
+    </input>
+  )
+}
+
+export default InputField

package/src/components/InputField/style.scss

@@ -0,0 +1,44 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+.inputFieldGeneric{
+    padding: 8px 12px;
+    border: 1px solid;
+    border-radius: 8px;
+    height: fit-content;
+
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out;
+    
+    background-color: $gray-800;
+    border-color: $gray-600;
+    color: $white;
+    
+    &::placeholder:not(:disabled){
+        color: $gray-200;
+    }
+    &:hover:not(:disabled){
+        border-color: $gray-300;
+    }
+    &:focus:not(:disabled){
+        outline: none;
+        border-color: $orange-500;
+    }
+
+}
+
+.errorInputField{
+    background-color: $gray-800;
+    border-color: $red-500;
+    color: $white;
+    
+    &::placeholder:not(:disabled){
+        color: $red-500;
+    }
+    
+    &:focus:not(:disabled){
+        outline: none;
+        border-color: $orange-500;
+    }
+
+}

package/src/components/PrimaryButton/PrimaryButton.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import './style.scss'
+
+interface PrimaryButtonProps{
+
+    text: string;
+    primaryButtonClassName?: string;
+    sizeVariant?: 'xs' | 'sm' | 'base';
+    colorVariant: 'orange' | 'black' | 'gray' ;
+    isDisabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const PrimaryButton = ({
+    text = 'Button text',
+    primaryButtonClassName = '',
+    sizeVariant = 'xs',
+    colorVariant = 'orange',
+    isDisabled = false,
+    onClick,
+}: PrimaryButtonProps) => {
+
+    const className = clsx({
+        primaryButtonGeneric : true,
+        [`${sizeVariant}Size--PrimaryButton`]: true,
+        [`${colorVariant}--PrimaryButton`]: true
+    })
+    
+  return (
+    <button
+        className={`${className} ${primaryButtonClassName}`}
+        disabled = {isDisabled}
+        onClick={onClick}
+    >
+        {text}
+    </button>
+  )
+}
+
+export default PrimaryButton

package/src/components/PrimaryButton/style.scss

@@ -0,0 +1,65 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+@mixin mixin--PrimaryButton($tColor: $orange-990 , $bgColor:$orange-500 , $tColor-Hover: white , $bgColor-Hover : $orange-700 , $outlineColor: $orange-300){
+    color: $tColor;
+    background-color: $bgColor;
+    transition: color 300ms ease-in-out , background-color 300ms ease-in-out , border 300ms ease-in-out;
+
+    &:hover{
+        color: $tColor-Hover;
+        background-color: $bgColor-Hover; 
+    }
+    &:active:not(:disabled){ 
+        outline: 2px solid $outlineColor;
+    }
+    
+}
+
+.primaryButtonGeneric{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    min-width: 110px;
+    border: none;
+    outline: 0px;
+    height: fit-content;
+    &:hover{
+        cursor: pointer;
+    }
+    &:disabled{
+        cursor: not-allowed;
+    }
+}
+
+.orange--PrimaryButton{
+    @include mixin--PrimaryButton()
+}
+
+.black--PrimaryButton{
+    @include mixin--PrimaryButton($tColor: white , $bgColor:$gray-800 , $tColor-Hover: white , $bgColor-Hover : $gray-700 , $outlineColor: $gray-200)
+}
+
+.gray--PrimaryButton{
+    @include mixin--PrimaryButton($tColor: $gray-800 , $bgColor:$gray-200 , $tColor-Hover: $gray-800 , $bgColor-Hover : $gray-300 , $outlineColor: $gray-100)
+}
+
+
+.xsSize--PrimaryButton{
+    @include text-size-xs();
+    padding: 8px 12px;
+}
+
+.smSize--PrimaryButton{
+    @include text-size-sm();
+    padding: 8px 12px;
+}
+
+.baseSize--PrimaryButton{
+    @include text-size-base();
+    padding: 10px 20px;
+}
+

package/src/components/RangeComponent/RangeComponent.tsx

@@ -0,0 +1,40 @@
+import InputRange from 'react-input-range'
+import 'react-input-range/lib/css/index.css'
+import './style.scss'
+
+type range = {
+  min: number,
+  max: number
+}
+interface RangeComponentProps{
+  minValue : number;
+  maxValue : number;
+  value : {min: number , max: number};
+  step : number;
+  // staticMax : number;
+  onChange: (prop:range | number) => void;
+}
+
+const RangeComponent = ({
+  minValue,
+  maxValue,
+  value,
+  step,
+  onChange
+}: RangeComponentProps) => {
+
+
+  return (
+    <InputRange  
+      minValue={minValue}
+      // maxValue={getMax()}
+      maxValue={maxValue}
+      value={value}
+      step={step}
+      onChange={onChange}
+      // formatLabel={(value) => disabled?'':getLabel ? getLabel(value) : `${value} ${label}`}
+    />
+  )
+}
+
+export default RangeComponent

package/src/components/RangeComponent/style.scss

@@ -0,0 +1,4 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+

package/src/components/SecondaryButton/SecondaryButton.tsx

@@ -0,0 +1,41 @@
+import './style.scss'
+
+import clsx from 'clsx';
+import './style.scss'
+interface SecondaryButtonProps{
+
+    text: string;
+    secondaryButtonClassName?: string;
+    sizeVariant?: 'xs' | 'sm' | 'base';
+    colorVariant: 'orange' | 'black' | 'gray' ;
+    isDisabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const SecondaryButton = ({
+    text = 'Button text',
+    secondaryButtonClassName = '',
+    sizeVariant = 'xs',
+    colorVariant = 'orange',
+    isDisabled = false,
+    onClick,
+}: SecondaryButtonProps) => {
+
+    const className = clsx({
+        secondaryButtonGeneric : true,
+        [`${sizeVariant}Size--SecondaryButton`]: true,
+        [`${colorVariant}--SecondaryButton`]: true
+    })
+  return (
+
+    <button
+        className={`${className} ${secondaryButtonClassName}`}
+        disabled = {isDisabled}
+        onClick={onClick}
+    >
+        {text}
+    </button>
+  )
+}
+
+export default SecondaryButton

package/src/components/SecondaryButton/style.scss

@@ -0,0 +1,66 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+@mixin mixin--SecondaryButton($tColor: $orange-500 , $bgColor: transparent , $tColor-Hover: white , $bgColor-Hover : $orange-500 , $outlineColor: $orange-300){
+    color: $tColor;
+    background-color: $bgColor;
+    border: 1px solid $tColor;
+    transition: color 300ms ease-in-out , background-color 300ms ease-in-out;
+
+    &:hover{
+        color: $tColor-Hover;
+        background-color: $bgColor-Hover; 
+    }
+    &:active:not(:disabled){ 
+        outline: 2px solid $outlineColor;
+    }
+    
+}
+
+.secondaryButtonGeneric{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    min-width: 110px;
+    border: none;
+    outline: 0px;
+    height: fit-content;
+    &:hover{
+        cursor: pointer;
+    }
+    &:disabled{
+        cursor: not-allowed;
+    }
+}
+
+.orange--SecondaryButton{
+    @include mixin--SecondaryButton()
+}
+
+.black--SecondaryButton{
+    @include mixin--SecondaryButton($tColor: $gray-800 , $bgColor: transparent , $tColor-Hover: white , $bgColor-Hover : $gray-700 , $outlineColor: $gray-200)
+}
+
+.gray--SecondaryButton{
+    @include mixin--SecondaryButton($tColor: $gray-800 , $bgColor: transparent , $tColor-Hover: white , $bgColor-Hover : $gray-300 , $outlineColor: $gray-100)
+}
+
+
+.xsSize--SecondaryButton{
+    @include text-size-xs();
+    padding: 8px 12px;
+}
+
+.smSize--SecondaryButton{
+    @include text-size-sm();
+    padding: 8px 12px;
+}
+
+.baseSize--SecondaryButton{
+    @include text-size-base();
+    padding: 10px 20px;
+}
+

package/src/components/TertiaryButton/TertiaryButton.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import './style.scss'
+interface TertiaryButtonProps{
+
+    text: string;
+    tertiaryButtonClassName?: string;
+    sizeVariant?: 'xs' | 'sm' | 'base';
+    // colorVariant: 'orange' | 'black' | 'gray' ;
+    isDisabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const TertiaryButton = ({
+    text = 'Button text',
+    tertiaryButtonClassName = '',
+    sizeVariant = 'xs',
+    // colorVariant = 'orange',
+    isDisabled = false,
+    onClick,
+}: TertiaryButtonProps) => {
+
+    const className = clsx({
+        tertiaryButtonGeneric : true,
+        [`${sizeVariant}Size--TertiaryButton`]: true,
+        // [`${colorVariant}--TertiaryButton`]: true
+    })
+  return (
+
+    <button
+        className={`${className} ${tertiaryButtonClassName}`}
+        disabled = {isDisabled}
+        onClick={onClick}
+    >
+        {text}
+    </button>
+  )
+}
+
+export default TertiaryButton

package/src/components/TertiaryButton/style.scss

@@ -0,0 +1,55 @@
+@import '../../colors';
+@import '../../fonts';
+@import '../../svg';
+
+@mixin mixin--TertiaryButton($tColor: $gray-100 , $bgColor: $gray-800 , $tColor-Hover: white , $bgColor-Hover : $gray-700 , $outlineColor: $gray-500){
+    color: $tColor;
+    background-color: $bgColor;
+    border: 1px solid $gray-500;
+    transition: color 300ms ease-in-out , background-color 300ms ease-in-out , border-color 300ms ease-in-out;
+
+    &:hover{
+        color: $tColor-Hover;
+        background-color: $bgColor-Hover;
+        border-color: $gray-600;
+    }
+    &:active:not(:disabled){ 
+        outline: 2px solid $outlineColor;
+    }
+    
+}
+
+.tertiaryButtonGeneric{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    min-width: 110px;
+    border: none;
+    outline: 0px;
+    height: fit-content;
+    @include mixin--TertiaryButton();
+    &:hover{
+        cursor: pointer;
+    }
+    &:disabled{
+        cursor: not-allowed;
+    }
+}
+
+.xsSize--TertiaryButton{
+    @include text-size-xs();
+    padding: 8px 12px;
+}
+
+.smSize--TertiaryButton{
+    @include text-size-sm();
+    padding: 8px 12px;
+}
+
+.baseSize--TertiaryButton{
+    @include text-size-base();
+    padding: 10px 20px;
+}
+

package/src/components/TextButton/TextButton.tsx

@@ -0,0 +1,34 @@
+import './style.scss'
+
+interface TextButtonProps {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  isDisabled?: boolean;
+  text: string;
+  className?: string;
+  sizeVariant?: 'xs' | 'sm' | 'base' | 'l' | 'xl' ;
+  colorVariant: 'primaryOrange' | 'primaryOrangeBorder' | 'alternativeDarkBorder' ;
+}
+
+
+const TextButton = ({ 
+    onClick,
+    isDisabled = false, 
+    text = 'Button Text', 
+    // className = '',
+    sizeVariant = 'base',
+    colorVariant = 'primaryOrange',
+  }: TextButtonProps) => {
+
+  return (
+
+    <button
+      className={`textButtonGeneric ${sizeVariant}Size ${colorVariant}`}
+      onClick={onClick}
+      disabled={isDisabled}
+    >
+      {text}
+    </button>
+  )
+}
+
+export default TextButton