hds-web 1.25.3 → 1.25.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.25.3",
+  "version": "1.25.5",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/BadgesCaption/badges.js

@@ -5,7 +5,7 @@ import { Icon } from '../common-components/Icon';
 import {Typography} from '../../foundation/Typography'
 import { HDSColor } from '../../foundation/ColorPalette';
 const sizeClasses = {
-  sm: 'py-0.5 px-2 hds-d-body3c',
+  sm: 'py-0.5 px-3 hds-d-body3c',
   default: 'py-1 px-3',
 };
 

package/src/HDS/components/Buttons/index.js

@@ -1 +1,2 @@
-export {default as HDSButton} from './button';
+export {default as HDSButton} from './button';
+export { default as HDSButtonVariants } from './specialBtn';

package/src/HDS/components/Buttons/specialBtn.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Typography } from "../../foundation/Typography";
+import { Icon } from "../common-components";
+
+export default function ButtonVariants(props) {
+    const {
+        variant,
+        label,
+        labelColor,
+        iconVariant,
+        iconStrokeClass,
+        onClick
+    } = props;
+    const addToCalendar = () => (
+        <div>
+            <button
+                onClick={onClick}
+                className=" border-2 border-blue-500 rounded-full hover:bg-blue-500 group">
+                <div className="flex py-2 pl-[18px] pr-3 items-center">
+                    <Typography textStyle='body3-medium' className={HDSColor(labelColor) + ' group-hover:text-neutral-0'}>
+                        {label}
+                    </Typography>
+                    <Icon variant={iconVariant} strokeClass={HDSColor(iconStrokeClass)} className='h-5 w-5 stroke-2 group-hover:stroke-neutral-0' />
+                </div>
+            </button>
+        </div>
+    )
+    return (
+        <>
+            {variant && variant === 'calendarButton' && 
+            <>
+                {addToCalendar()}
+            </>
+        }
+        </>
+    )
+}

package/src/HDS/components/Cards/InviteCard/index.js

@@ -0,0 +1 @@
+export { default as InviteCard } from './invitecard';

package/src/HDS/components/Cards/InviteCard/invitecard.js

@@ -0,0 +1,157 @@
+import React from "react";
+import { Typography } from "../../../foundation/Typography";
+import { InviteIF } from "../../InputFields";
+import { Icon } from "../../common-components";
+import { HDSButtonVariants } from "../../Buttons";
+export default function InviteCard(props) {
+
+    const inviteFunction = () => {
+        const numberOfInvites = props.invites || 0;
+        const inviteComponents = Array.from({ length: numberOfInvites }, (_, index) => (
+            <div className="" key={index} >
+                <InviteIF
+                    label={props.IFbuttonLabel}
+                    placeholder={props.IFbuttonPlaceholder}
+                />
+            </div>
+        ));
+        return <div className="flex flex-col gap-4">{inviteComponents}</div>;
+    };
+
+    return (
+        <div className="">
+            <div className={" flex " + ((props.cardType === 'primary') ? ' flex flex-col-reverse ' : 'pb-6 flex flex-col' )}>
+                {props.imgURL &&
+                    <div className={(props.cardType === 'primary') ? 'py-11' : 'pb-4'}>
+                        <img src={props.imgURL}
+                            loading="lazy"
+                            alt={props.title}
+                            className={" object-contain " + (props.cardType === 'primary') ? 'max-h-[200px]' : 'max-h-[144px]' }
+                        />
+                    </div>}
+                <div>
+                    {props.titleTag &&
+                        <div
+                            className=' text-hds-m-h6 text-neutral-500 uppercase'>
+                            {props.titleTag}
+                        </div>
+                    }
+                    {props.title &&
+                        <Typography
+                            textStyle='h4'
+                            className='text-neutral-1000'>
+                            {props.title}
+                        </Typography>
+                    }
+                    {props.schedule &&
+                        <div className="flex gap-4 pt-4 flex-wrap">
+                            {props.schedule.date &&
+                                <div
+                                    className="border border-neutral-200 rounded-2xl p-4 min-w-[152px] "
+                                >
+                                    {props.schedule.day &&
+                                        <Typography
+                                            textStyle='h6'
+                                            className='text-neutral-600'>
+                                            {props.schedule.day}
+                                        </Typography>}
+                                    {props.schedule.date
+                                        && <Typography
+                                            textStyle='h4'
+                                            className='text-neutral-1000'>
+                                            {props.schedule.date}
+                                        </Typography>}
+                                </div>}
+                            {props.schedule.time &&
+                                <div
+                                    className="border border-neutral-200 rounded-2xl p-4 min-w-[152px]"
+                                >
+                                    {props.schedule.timezone &&
+                                        <Typography
+                                            textStyle='h6'
+                                            className='text-neutral-600'>
+                                            {props.schedule.timezone}
+                                        </Typography>}
+                                    {props.schedule.time &&
+                                        <Typography
+                                            textStyle='h4'
+                                            className='text-neutral-1000'>
+                                            {props.schedule.time}
+                                        </Typography>}
+                                </div>}
+                        </div>
+                    }
+                </div>
+            </div>
+            <div className="pb-6 border-neutral-200">
+                {props.inviteTitle &&
+                    <Typography
+                        textStyle='h5'
+                        className='text-neutral-800 border-t border-neutral-200 pt-6'>
+                        {props.inviteTitle}
+                    </Typography>
+                }
+                {props.inviteTitle2 &&
+                    <Typography
+                        textStyle='h4'
+                        className='text-neutral-1000'>
+                        {props.inviteTitle2}
+                    </Typography>
+                }
+                {props.inviteSubtitle &&
+                    <Typography
+                        textStyle='body1'
+                        className='text-neutral-800'>
+                        {props.inviteSubtitle}
+                    </Typography>}
+
+            </div>
+            <div className="pb-6">
+                {inviteFunction()}
+            </div>
+            {(props.social || props.calendarLink) &&
+                <div className="border-t border-neutral-200 pt-6 flex gap-6 flex-wrap justify-center">
+                    {props.social &&
+                        <div className="flex flex-wrap items-center">
+                            {props.social &&
+                                props.social.twitter &&
+                                <a href={props.social.twitter}
+                                    className='w-[45px] flex justify-center'>
+                                    <Icon
+                                        variant='twitter'
+                                        className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300'
+                                    />
+                                </a>
+                            }
+                            {props.social &&
+                                props.social.linkedin &&
+                                <a href={props.social.linkedin}
+                                    className='w-[45px] flex justify-center'>
+                                    <Icon
+                                        variant='linkedin'
+                                        className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300'
+                                    />
+                                </a>
+                            }
+                            {props.social &&
+                                props.social.facebook &&
+                                <a href={props.social.facebook}
+                                    className='w-[45px] flex justify-center'>
+                                    <Icon
+                                        variant='facebookBlue'
+                                        className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
+                                </a>
+                            }
+                        </div>}
+                    <div>
+                        <HDSButtonVariants
+                            variant='calendarButton'
+                            label='Add to Calendar'
+                            labelColor='text-blue-500'
+                            iconStrokeClass='stroke-blue-500'
+                            iconVariant='calendarplus02'></HDSButtonVariants>
+                    </div>
+                </div>}
+        </div>
+    )
+}

package/src/HDS/components/Cards/index.js

@@ -10,4 +10,5 @@ export * from './Announcement';
 export * from './VideoCard';
 export * from './Testimonials';
 export * from './StoryCard';
-export * from './EventCards'
+export * from './EventCards'
+export * from './InviteCard'

package/src/HDS/components/InputFields/index.js

@@ -6,4 +6,5 @@ export {default as LeadingDropIF} from './leadingDrop';
 export {default as LeadingTextIF} from './leadingText';
 export {default as TextAreaIF} from './textArea';
 export {default as TrailingButtonIF} from './trailingButton';
-export {default as TrailingDropdownIF} from './trailingDropdown';
+export {default as TrailingDropdownIF} from './trailingDropdown';
+export {default as InviteIF} from './inviteIF';

package/src/HDS/components/InputFields/inviteIF.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useState } from 'react';
+import { HDSButton } from '../Buttons';
+export default function InviteIF({ disabled, label, helper, size, placeholder, onChange }) {
+    const [value, setValue] = useState('');
+
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    }
+
+    return (
+        <div>
+            <div className="flex bg-neutral-0 border border-neutral-300 rounded-full shadow-sm">
+                <div className="relative flex flex-grow items-stretch ">
+                    <input
+                        type="email"
+                        name="email"
+                        id="email"
+                        disabled={disabled}
+                        className="block w-full rounded-l-full border-0 text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c py-3 pl-5 placeholder:text-hds-m-body3c placeholder:tb:text-hds-t-body3c placeholder:db:text-hds-d-body3c placeholder:text-neutral-500 placeholder:bg-neutral-0
+                        focus:ring-0 active:bg-neutral-0 focus:bg-neutral-0 visited:bg-neutral-0 
+                        disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-neutral-200"
+                        placeholder={placeholder}
+                    />
+                </div>
+                <div className=' py-[3.5px] pr-[3px] z-20'>
+                    <HDSButton
+                        type='tonal'
+                        btnBgColorClass='bg-blue-100'
+                        btnbgHoverClass='hover:bg-blue-500'
+                        rightAnimatedArrowColor='#3970FD'
+                        label={label}
+                    />
+                </div>
+            </div>
+        </div>
+
+    )
+}

package/src/HDS/helpers/Algorithms/hdssearch.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+function LiveSearch({ wordArray }) {
+    const [input, setInput] = useState("");
+    const [filteredWords, setFilteredWords] = useState([]);
+
+    const handleInputChange = (event) => {
+        const inputValue = event.target.value.toLowerCase();
+        setInput(inputValue);
+
+        const newFilteredWords = searchWords(wordArray, inputValue);
+        setFilteredWords(newFilteredWords);
+    };
+
+    return (
+        <div>
+            <input
+                type="text"
+                placeholder="Search..."
+                value={input}
+                onChange={handleInputChange}
+            />
+            <div id="results">
+                {filteredWords.map((word, index) => (
+                    <div key={index}>{word}</div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function searchWords(words, inputLetter) {
+    return words.filter((word) => word.toLowerCase().includes(inputLetter));
+}
+
+export default LiveSearch;

package/src/HDS/helpers/Algorithms/index.js

@@ -0,0 +1,2 @@
+export { default as HDSSearch } from './hdssearch';
+export { default as TagFilter } from './invertedIndex';

package/src/HDS/helpers/Algorithms/invertedIndex.js

@@ -0,0 +1,47 @@
+function buildInvertedIndex(data) {
+    const invertedIndex = {};
+
+    for (const item of data) {
+        const key = Object.keys(item)[0];
+        const tags = item[key];
+
+        for (const tag of tags) {
+            if (!invertedIndex[tag]) {
+                invertedIndex[tag] = new Set();
+            }
+            invertedIndex[tag].add(key); 
+        }
+    }
+
+    return invertedIndex;
+}
+
+export default function getSimilarAndRemainingKeys(data, inputKey) {
+    const invertedIndex = buildInvertedIndex(data);
+    const inputTags = data.find(item => item[inputKey]);
+    const similarKeys = new Set();
+    const allKeys = new Set();
+
+    if (inputTags) {
+        for (const tag of inputTags[inputKey]) {
+            const keysWithSimilarTag = invertedIndex[tag];
+            if (keysWithSimilarTag) {
+                keysWithSimilarTag.forEach(key => {
+                    if (key !== inputKey) {
+                        similarKeys.add(key);
+                    }
+                });
+            }
+        }
+    }
+
+    for (const item of data) {
+        const key = Object.keys(item)[0];
+        allKeys.add(key);
+    }
+
+    const remainingKeys = [...allKeys].filter(key => !similarKeys.has(key));
+
+    return [...similarKeys, ...remainingKeys];
+}
+

package/src/HDS/helpers/index.js

@@ -3,4 +3,5 @@ export * from './Media';
 export * from './Effects';
 export * from './AlgoliaSearch';
 export * from './Paperform';
-export * from './MarketoForm';
+export * from './MarketoForm';
+export * from './Algorithms';