@popsure/dirty-swan 0.59.0-alpha → 0.59.0-beta-2

package/src/lib/components/cards/infoCard/index.stories.tsx

@@ -1,5 +1,6 @@
 import { InfoCard, InfoCardProps } from '.';
 import { images } from '../../../util/images';
+import { BookOpenIcon, HeartIcon, StarIcon, ShieldIcon } from '../../icon';
 
 const story = {
   title: 'JSX/Cards/InfoCard',
@@ -7,64 +8,187 @@ const story = {
   argTypes: {
     title: {
       description: 'Title text that needs to be displayed',
+      control: 'text',
     },
     children: {
-      type: 'text',
       description: 'Content that is displayed inside the card',
-    },
-    state: {
-      description: 'State that describe the interation with the card',
+      control: 'text',
     },
     topIcon: {
-      description: 'Icon displayed on the top of the card, inside the circle',
+      description: 'Icon displayed on the top of the card',
+    },
+    topIconType: {
+      description: 'Type of top icon display',
+      control: 'select',
+      options: ['icon', 'image', 'banner'],
+    },
+    showIcon: {
+      description: 'Whether to show the arrow icon in the title',
+      control: 'boolean',
     },
-    rightIcon: {
-      description: 'Icon displayed on the top right corner of the card',
+    disabled: {
+      description: 'Whether the card is disabled',
+      control: 'boolean',
     },
-    dropshadow: {
-      description: 'If the card should have a box-shadow or not',
+    onClick: {
+      description: 'Click handler for the card',
     },
     className: {
       description: 'Class name for most top parent element',
+      control: 'text',
     },
   },
   args: {
-    title: 'Lorem Ipsum',
-    children: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
-    state: 'actionable',
-    topIcon: {
-      src: images.mortgage,
-      alt: 'Image alt'
-    },
-    rightIcon: {
-       src: images.washingMachine,
-       alt: 'Icon alt'
-    },
-    dropshadow: true,
+    title: 'Knowledge Base',
+    children: 'Find the answers you\'re looking for in our comprehensive, fact-checked library of articles and resources.',
+    topIcon: <BookOpenIcon size={40} />,
+    topIconType: 'icon',
+    showIcon: true,
+    disabled: false,
     className: '',
   }
 };
 
-export const InfoCardStory = ({
-  title,
-  dropshadow,
-  children,
-  className,
-  rightIcon,
-  state,
-  topIcon
-}: InfoCardProps) => {
+export const InfoCardStory = (args: InfoCardProps) => {
+  return (
+    <div className='bg-neutral-50 p32'>
+      <div className='wmx4'>
+        <InfoCard
+          {...args}
+          onClick={() => console.log('InfoCard clicked!')}
+        >
+          {args.children}
+        </InfoCard>
+      </div>
+    </div>
+  );
+}
+
+export const IconTypes = () => {
+  return (
+    <div className='bg-neutral-50 p32'>
+      <div className='d-flex gap32 flex-wrap'>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Book Icon</div>
+          <InfoCard
+            title='Knowledge Base'
+            topIcon={<BookOpenIcon size={40} />}
+            topIconType='icon'
+            onClick={() => console.log('Book clicked!')}
+          >
+            Find answers in our comprehensive library of articles.
+          </InfoCard>
+        </div>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Heart Icon</div>
+          <InfoCard
+            title='Favorites'
+            topIcon={<HeartIcon size={40} />}
+            topIconType='icon'
+            onClick={() => console.log('Heart clicked!')}
+          >
+            Save and organize your favorite items.
+          </InfoCard>
+        </div>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Star Icon</div>
+          <InfoCard
+            title='Premium Features'
+            topIcon={<StarIcon size={40} />}
+            topIconType='icon'
+            onClick={() => console.log('Star clicked!')}
+          >
+            Unlock advanced features with premium.
+          </InfoCard>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const TopIconTypes = () => {
+  return (
+    <div className='bg-neutral-50 p32'>
+      <div className='d-flex gap32 flex-wrap'>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Icon Type</div>
+          <InfoCard
+            title='Help Center'
+            topIcon={<BookOpenIcon size={40} />}
+            topIconType='icon'
+            onClick={() => console.log('Icon type clicked!')}
+          >
+            Icon is displayed in a circular background.
+          </InfoCard>
+        </div>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Image Type</div>
+          <InfoCard
+            title='Image Gallery'
+            topIcon={<img src="https://placehold.co/80x80" alt="Image" style={{borderRadius: '8px'}} />}
+            topIconType='image'
+            onClick={() => console.log('Image type clicked!')}
+          >
+            Image is displayed as-is without background.
+          </InfoCard>
+        </div>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Banner Type</div>
+          <InfoCard
+            title='Featured Content'
+            topIcon={<img src="https://placehold.co/600x200" alt="Banner" />}
+            topIconType='banner'
+            onClick={() => console.log('Banner type clicked!')}
+          >
+            Banner spans the full width of the card.
+          </InfoCard>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const States = () => {
   return (
-    <InfoCard
-      className={className}
-      dropshadow={dropshadow}
-      state={state}
-      rightIcon={rightIcon}
-      title={title}
-      topIcon={topIcon}
-    >
-      {children}
-    </InfoCard>
+    <div className='bg-neutral-50 p32'>
+      <div className='d-flex gap32 flex-wrap'>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Default State</div>
+          <InfoCard
+            title='Default Card'
+            topIcon={<BookOpenIcon size={40} />}
+            topIconType='icon'
+            onClick={() => console.log('Default clicked!')}
+          >
+            This is a default interactive card.
+          </InfoCard>
+        </div>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Disabled State</div>
+          <InfoCard
+            title='Disabled Card'
+            topIcon={<BookOpenIcon size={40} />}
+            topIconType='icon'
+            disabled={true}
+            onClick={() => console.log('This should not fire')}
+          >
+            This card is disabled and non-interactive.
+          </InfoCard>
+        </div>
+        <div className='wmx4'>
+          <div className='mb16 fw-bold'>Without Arrow Icon</div>
+          <InfoCard
+            title='No Arrow'
+            topIcon={<BookOpenIcon size={40} />}
+            topIconType='icon'
+            showIcon={false}
+            onClick={() => console.log('No arrow clicked!')}
+          >
+            This card has no arrow icon in the title.
+          </InfoCard>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/lib/components/cards/infoCard/index.tsx

@@ -1,49 +1,84 @@
-import { associatedClassForCardState, CardProps } from '..';
-import { Icon, info } from '../icons';
+import { ReactNode } from 'react';
+import ArrowRight from '../../icon/icons/ArrowRight';
+import { Card, CardProps } from '../card';
 
 import styles from './style.module.scss';
+import classNames from 'classnames';
 
-export type InfoCardProps = CardProps & {
-  topIcon: Icon;
-  rightIcon?: 'info' | Icon;
+export interface InfoCardProps extends CardProps {
+  topIcon: ReactNode;
+  showIcon?: boolean;
+  topIconType?: 'image' | 'icon' | 'banner';
+  disabled?: boolean;
 };
 
 export const InfoCard = ({
   className,
+  showIcon = true,
   title,
   children,
   topIcon,
-  rightIcon,
-  state = 'actionable',
-  dropshadow = true,
-  ...props
+  topIconType,
+  disabled = false,
+  onClick,
+  ...cardProps
 }: InfoCardProps) => (
-  <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>
-    <img
-      src={topIcon.src}
-      alt={topIcon.alt}
-      className={`${styles['top-icon']} ${
-        state === 'muted' ? styles['top-icon--muted'] : ''
-      } `}
-      width="80px"
-      height="80px"
-    />
-    <div
-      className={`${associatedClassForCardState(state, dropshadow)} ${
-        styles.container
-      }`}
-    >
-      {rightIcon && (
-        <img
-          width="20px"
-          height="20px"
-          className={styles['right-icon']}
-          src={rightIcon === 'info' ? info.src : rightIcon.src}
-          alt={rightIcon === 'info' ? info.alt : rightIcon.alt}
-        />
-      )}
-      <h3 className="p-h4 ta-center mt64">{title}</h3>
-      <div className="p-p mt16 tc-neutral-700">{children}</div>
-    </div>
-  </div>
+  <Card
+    {...cardProps}
+    label={topIcon && (
+      <>
+        {topIconType === 'icon' ? (
+          <div
+            className={classNames(
+              'd-flex ai-center jc-center bg-orange-200 br-circle p16',
+              styles.topIconWrapper
+            )}
+          >
+            {topIcon}
+          </div>
+        ) : (
+          <div className={classNames(
+            'd-flex ai-center jc-center',
+            { [styles.topIconBanner]: topIconType === 'banner' }
+          )}>
+            {topIcon}
+          </div>
+        )}
+      </>
+    )}
+    title={title && (
+      <>
+        {title}
+
+        {showIcon && <ArrowRight size={20} />}
+      </>
+    )}
+    titleVariant='medium'
+    description={children}
+    descriptionVariant='small'
+    actionIcon={null}
+    showActionIcon={false}
+    classNames={{
+      buttonWrapper: styles.buttonWrapper,
+      wrapper: classNames({
+        [styles.wrapper]: true,
+        [styles.disabled]: disabled,
+        'pt40': topIcon && topIconType === 'icon',
+        'mt40': topIcon && topIconType === 'icon',
+        [styles.bannerWrapper]: topIcon && topIconType === 'banner',
+      }),
+      label: classNames({
+        [styles.floatingLabel]: topIcon && topIconType !== 'image',
+      }),
+      title: classNames(
+        {'mt16': topIcon && topIconType === 'banner'},
+        'd-flex ai-center jc-center my8'
+      ),
+      description: 'ta-center',
+      contentWrapper: styles.contentWrapper,
+    }}
+    variant='default'
+    onClick={disabled ? undefined : onClick}
+    density='compact'
+  />
 );

package/src/lib/components/cards/infoCard/style.module.scss

@@ -1,53 +1,66 @@
-@use "../../../scss/public/grid" as *;
+@use "../../../scss/public/colors" as *;
+@use "../../../scss/public/shadows" as *;
 
-@keyframes appear-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.bannerWrapper {
+  padding-top: 124px;
 }
 
-.root-container {
-  position: relative;
-  padding-top: 40px;
-
-  &:hover {
-    .right-icon {
-      visibility: visible;
+.buttonWrapper:focus .wrapper {
+  border-color: $ds-neutral-700;
+  box-shadow: $bs-xs, 0 0 0 1px $ds-neutral-700;
+}
 
-      animation-name: appear-in;
-      animation-duration: 0.3s;
-      animation-fill-mode: both;
-    }
-  }
+.buttonWrapper:focus-visible .wrapper {
+  overflow: hidden;
+  border-color: $ds-neutral-900;
+  box-shadow: $bs-xs, 0 0 0 1px $ds-neutral-900;
 }
 
-.top-icon {
+.topIconWrapper {
   position: absolute;
+  width: 80px;
+  height: 80px;
 
   left: 50%;
-  transform: translateX(-50%) translateY(-40px);
+  transform: translateX(-50%) translateY(-80px);
 
   &--muted {
     opacity: 0.25;
   }
 }
 
-.right-icon {
-  visibility: hidden;
+.topIconBanner {
   position: absolute;
-  top: 64px;
-  right: 24px;
+  top: -123px;
+  left: -15px;
+  right: -15px;
+  height: 124px;
+  width: calc(100% + 30px);
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    min-width: 100%;
+    min-height: 100%;
+  }
 }
 
-.container {
-  padding: 0 24px 24px 24px;
-  height: 100%;
+.contentWrapper {
+  gap: 0!important;
+}
 
-  @include p-size-mobile {
-    height: fit-content;
-  }
+.floatingLabel {
+  position: relative;
 }
+
+.disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss

@@ -21,7 +21,7 @@
 
 .headerButton {
   border: none;
-  background: $ds-neutral-50;
+  background: $ds-orange-50;
   column-gap: 16px;
   cursor: pointer;
   font-family: inherit;
@@ -31,7 +31,7 @@
   transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
 
   &:hover {
-    background: $ds-purple-300;
+    background: $ds-orange-100;
   }
 }
 

package/src/lib/components/comparisonTable/components/Chevron.tsx

@@ -8,7 +8,7 @@ const Chevron = ({ className }: { className?: string }) => (
   >
     <path
       d="M15 12.5l-5-5-5 5"
-      stroke="#8E8CEE"
+      stroke="#26262e"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -81,10 +81,6 @@ h4.cell {
   display: none;
 
   line-height: 38px;
-  text-decoration: underline;
-  text-decoration-color: $ds-purple-600;
-  text-decoration-thickness: 4px;
-  text-underline-offset: 8px;
 
   @include p-size-tablet {
     display: flex;

package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss

@@ -7,7 +7,7 @@
   height: 100%;
   padding: 0 16px;
   justify-content: space-between;
-  align-items: center;
+  align-items: stretch;
   display: flex;
   @include p-size-tablet {
     display: none;
@@ -24,18 +24,18 @@
 
 .arrow {
   width: 32px;
-  height: 32px;
+  height: 56px;
   z-index: 3;
 
   padding: 0;
 
-  border-radius: 50%;
+  border-radius: 8px;
   background-color: $ds-neutral-100;
 
   justify-content: center;
   align-items: center;
 
-  stroke: $ds-purple-300;
+  stroke: $ds-neutral-500;
 
   &:hover,
   &:focus {
@@ -45,7 +45,7 @@
 }
 
 .active {
-  stroke: $ds-purple-600;
+  stroke: $ds-neutral-900;
 
   &:hover,
   &:focus {
@@ -55,5 +55,6 @@
 }
 
 .noPointerEvents {
+  visibility: hidden;
   pointer-events: none;
 }

package/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx

@@ -1,4 +1,4 @@
-import Info from '../../../icon/icons/Info';
+import { InfoIcon } from '../../../icon';
 import styles from './style.module.scss';
 
 const TableInfoButton = ({
@@ -16,7 +16,7 @@ const TableInfoButton = ({
     aria-label="View more information"
     title="View more information"
   >
-    <Info size={20} />
+    <InfoIcon size={20} />
   </button>
 );
 

package/src/lib/components/comparisonTable/components/TableInfoButton/style.module.scss

@@ -17,11 +17,10 @@
 
   &:hover,
   &:focus {
-    background-color: $ds-purple-100;
-
+    background-color: transparent;
     svg {
       path {
-        fill: $ds-purple-500;
+        fill: $ds-neutral-600;
       }
     }
   }
@@ -34,6 +33,6 @@
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px $ds-purple-600;
+    box-shadow: 0 0 0 2px $ds-neutral-900;
   }
 }

package/src/lib/components/comparisonTable/components/TableRating/style.module.scss

@@ -5,9 +5,9 @@
 }
 
 .filled {
-  fill: $ds-purple-600;
+  fill: $ds-neutral-900;
 }
 
 .empty {
-  fill: $ds-neutral-100;
+  fill: $ds-neutral-400;
 }

package/src/lib/components/comparisonTable/components/TableTrueFalse.tsx

@@ -16,7 +16,7 @@ const TableTrueFalse = ({
       >
         <path
           d="M15.667 1.833L6.5 11 2.333 6.833"
-          stroke="#8E8CEE"
+          stroke="#26262e"
           strokeWidth="3"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -31,7 +31,7 @@ const TableTrueFalse = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M11.707 1.707A1 1 0 0010.293.293L6 4.586 1.707.293A1 1 0 00.293 1.707L4.586 6 .293 10.293a1 1 0 101.414 1.414L6 7.414l4.293 4.293a1 1 0 001.414-1.414L7.414 6l4.293-4.293z"
-        fill="#D2D2D8"
+        fill="#d2d2d9"
       />
     </svg>
   );

package/src/lib/components/comparisonTable/index.tsx

@@ -277,7 +277,7 @@ const ComparisonTable = <T extends { id: number }>(
               <div>
                 <button
                   className={classNames(
-                    'w100 d-flex p-a p-h4 c-pointer',
+                    'w100 d-flex p-h4 c-pointer',
                     baseStyles['show-details-button'],
                     classNameOverrides?.hideDetailsButton
                   )}

package/src/lib/components/comparisonTable/style.module.scss

@@ -62,7 +62,7 @@
 .group-title {
   width: 100%;
 
-  background-color: $ds-neutral-50;
+  background-color: $ds-orange-50;
   border-radius: 8px;
 
   & > h4 {
@@ -108,7 +108,7 @@
 
 .show-details-button {
   font-family: inherit;
-  background-color: $ds-neutral-50;
+  background-color: $ds-orange-50;
 
   border: none;
   border-radius: 8px;
@@ -121,6 +121,10 @@
   svg {
     margin-left: 8px;
   }
+
+  &:hover {
+    background-color: $ds-orange-100;
+  }
 }
 
 .icon-inverted {

package/src/lib/components/dateSelector/components/Calendar.tsx

@@ -72,7 +72,7 @@ export const Calendar = ({
         onClick={() => setCalendarOpen(!isOpen)}
         data-testid="calendar-button"
         hideLabel
-        variant='textColor'
+        variant='filledBlack'
         leftIcon={<CalendarIcon />}
         type="button"
       >

package/src/lib/components/input/index.tsx

@@ -75,7 +75,8 @@ export const Input = React.forwardRef(
               className={classnames(
                 styles.prefix,
                 { [styles['prefix--with-error']]: error },
-                { [styles['prefix--disabled']]: disabled }
+                { [styles['prefix--disabled']]: disabled },
+                { [styles['prefix--with-value']]: props.value }
               )}
             >
               {prefix}