@popsure/dirty-swan 0.41.0-rc.3 → 0.41.2

package/src/lib/components/card/index.stories.tsx

@@ -0,0 +1,245 @@
+import { Card, CardProps } from '.';
+import { illustrations } from '../../util/images';
+import { Button } from '../button';
+import { Badge } from '../badge';
+import { CheckIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';
+
+const story = {
+  title: 'JSX/Card',
+  component: Card,
+  argTypes: {
+    density: {
+      description: 'Spacing around the card'
+    },
+    label: {
+      description: 'Content to be rendered as label'
+    },
+    title: {
+      description: 'Content to be rendered as title'
+    },
+    titleVariant: {
+      description: 'Variant that allows changing title sizing styles.'
+    },
+    description: {
+      description: 'Content to be rendered as description'
+    },
+    descriptionVariant: {
+      description: 'Variant that allows changing description sizing styles.'
+    },
+    icon: {
+      description: 'ReactNode to be rendered on the left side of the card',
+    },
+    children: {
+      control: { type: 'text' },
+      description: 'Content that is displayed inside the card under the pre-defined props',
+    },
+    onClick: {
+      description: 'On click action to be triggered on card click.',
+    },
+    dropShadow: {
+      description: 'Wether to display card with drop shadow styles or not.',
+    },
+    actionIcon: {
+      description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',
+    },
+  },
+  args: {
+    density: 'balanced',
+    description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',
+    descriptionVariant: 'large',
+    label: 'Label',
+    title: 'Honest, simple insurance',
+    titleVariant: 'large',
+    icon: 'ABC',
+    children: '',
+    classNames: {
+      wrapper: '',
+      label: '',
+      title: '',
+      description: '',
+      children: '',
+      icon: ''
+    },
+    dropShadow: true,
+  }
+};
+
+export const CardStory = ({ 
+  actionIcon,
+  children,
+  classNames,
+  density,
+  description,
+  descriptionVariant,
+  dropShadow,
+  icon,
+  label,
+  onClick,
+  title,
+  titleVariant,
+}: CardProps) => (
+  <div className='d-flex p24 bg-grey-200'>
+    <Card
+      classNames={classNames}
+      description={description}
+      descriptionVariant={descriptionVariant}
+      density={density}
+      dropShadow={dropShadow}
+      icon={icon}
+      label={label}
+      title={title}
+      titleVariant={titleVariant}
+      onClick={onClick}
+      actionIcon={actionIcon}
+    >
+      {children}
+    </Card>
+  </div>
+);
+
+CardStory.storyName = "Card";
+
+export const CardDensities = () => (
+  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+    <Card
+      title={'Card density: Compact'}
+      density='compact'
+    />
+    <Card
+      title={'Card density: Balanced'}
+      density='balanced'
+    />
+    <Card
+      title={'Card density: Spacious'}
+      density='spacious'
+    />
+  </div>
+);
+
+export const CardsWithIcons = ({ 
+  children,
+  icon,
+  title,
+}: CardProps) => (
+  <div className='d-flex gap16 p24 bg-grey-200'>
+    <Card
+      icon={
+        <img
+          alt=""
+          src={illustrations.aids}
+          width={24}
+        />
+      }
+      title={title}
+    />
+    <Card
+      icon={<MehIcon size={24} />}
+      title={title}
+    />
+  </div>
+);
+
+export const CardWithOnClickAction = ({ 
+  children,
+  icon,
+  title,
+}: CardProps) => (
+  <div className='d-flex p24 bg-grey-200'>
+    <Card
+      icon={
+        <img
+          alt=""
+          src={illustrations.aids}
+          width={24}
+        />
+      }
+      title={title}
+      titleVariant={'medium'}
+      onClick={() => {}}
+    >
+      {children}
+    </Card>
+  </div>
+);
+
+export const CardOverridesStyles = ({ 
+  children,
+  label,
+  title,
+}: CardProps) => (
+  <div className='d-flex p24 bg-grey-200'>
+    <Card
+      label={label}
+      title={title}
+      titleVariant={'medium'}
+      icon={<PlusCircleIcon color="grey-100" size={32} />}
+      classNames={{ 
+        wrapper: 'bg-grey-700',
+        label: 'tc-white',
+        title: 'tc-white'
+      }}
+    >
+      {children}
+    </Card>
+  </div>
+);
+
+export const CardsWithinCardsAndComplexLayout = ({ 
+  children,
+  label,
+  title,
+}: CardProps) => (
+  <div className='d-flex p24 bg-grey-200'>
+    <Card
+      label={(
+        <Badge size='small' variant='success'>
+          Active
+        </Badge>
+      )}
+      title={(
+        <div className='d-flex jc-between ai-center w100'>
+          Coverage overview
+
+          <Button
+            onClick={() => {}}
+            variant='filledGray'
+          >
+            Full coverage details
+          </Button>
+        </div>
+      )}
+    >
+      <div className='d-flex gap16 mt16'>
+        <Card
+          description="Lost keys"
+          classNames={{ wrapper: 'bg-grey-300' }}
+          icon={<CheckIcon color={'primary-500'} />}
+          density='compact'
+        />
+        <Card
+          description="Broken glass"
+          classNames={{ wrapper: 'bg-grey-300' }}
+          icon={<XIcon color={'primary-500'} />}
+          density='compact'
+        />
+      </div>
+      
+      <div className='d-flex gap16 mt16'>
+        <Card
+          description="Damage to property"
+          classNames={{ wrapper: 'bg-grey-300' }}
+          icon={<CheckIcon color={'primary-500'} />}
+          density='compact'
+        />
+        <Card
+          description="Drones"
+          classNames={{ wrapper: 'bg-grey-300' }}
+          icon={<XIcon color={'primary-500'} />}
+          density='compact'
+        />
+      </div>
+    </Card>
+  </div>
+);
+
+export default story;

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

@@ -0,0 +1,144 @@
+import { ReactNode } from 'react';
+import classNamesUtil from 'classnames';
+import { ChevronRightIcon } from '../icon';
+
+import styles from './style.module.scss';
+
+export interface CardProps {
+  children?: ReactNode;
+  classNames?: {
+    wrapper?: string;
+    label?: string;
+    title?: string;
+    description?: string;
+    children?: string;
+    icon?: string;
+    actionIcon?: string;
+  };
+  density?: 'balanced' | 'compact' | 'spacious';
+  dropShadow?: boolean;
+  icon?: ReactNode;
+  title?: ReactNode;
+  titleVariant?: 'small' | 'medium' | 'large';
+  description?: ReactNode;
+  descriptionVariant?: 'small' | 'large';
+  label?: ReactNode;
+  onClick?: () => void;
+  actionIcon?: ReactNode;
+} 
+
+const CardContent = ({ 
+  children,
+  classNames,
+  density = 'balanced',
+  description,
+  descriptionVariant = 'large',
+  dropShadow = true,
+  icon,
+  label,
+  onClick,
+  actionIcon,
+  title,
+  titleVariant = 'large',
+}: CardProps) => (
+  <section
+    className={classNamesUtil(
+      'd-flex fd-column jc-center br8 bg-white w100 ta-left', 
+      { 'bs-sm': dropShadow },
+      {
+        compact: 'p16',
+        balanced: 'p24',
+        spacious: 'p32'
+      }[density],
+      classNames?.wrapper,
+    )}
+  >
+    <div className='d-flex w100'>
+      {icon && (
+        <div 
+          className={classNamesUtil(
+            `d-flex ai-center tc-primary-500`,
+            styles.icon,
+            styles[`icon${density}`],
+            classNames?.icon
+          )}
+        >
+          {icon}
+        </div>
+      )}
+
+      <div className='d-flex jc-between w100'>
+        <div className='d-flex jc-center gap8 fd-column tc-grey-900 w100'>
+          {label && (
+            <h3
+              className={classNamesUtil('p-p--small', classNames?.label)}
+            >
+              {label}
+            </h3>
+          )}
+
+          {title && (
+            <h2
+              className={classNamesUtil(classNames?.title, {
+                large:'p-h3',
+                medium:'p-h4',
+                small:'p-p',
+              }[titleVariant])}
+            >
+              {title}
+            </h2>
+          )}
+
+          {description && (
+            <div
+              className={classNamesUtil(
+                'tc-grey-600',
+                classNames?.description,
+                descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
+              )}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+
+        {onClick && (
+          <div
+            className={classNamesUtil(
+              styles.actionIcon,
+              classNames?.actionIcon,
+              styles[`actionIcon${density}`],
+              'd-flex ai-center'
+            )}
+          >
+            {actionIcon || <ChevronRightIcon size={24} />}
+          </div>
+        )}
+      </div>
+    </div>
+
+    {children && (
+      <div className={classNames?.children}>{children}</div>
+    )}
+  </section>
+);
+
+const Card = (props: CardProps) => {
+  const { onClick } = props;
+
+  if (onClick) {
+    return (
+      <button
+        className={classNamesUtil('c-pointer d-flex w100 br8', styles.button)}
+        onClick={onClick} 
+        type="button"
+      >
+        <CardContent {...props} />
+      </button>
+    )
+  }
+
+  return <CardContent {...props} />;
+}
+
+export { Card };

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

@@ -0,0 +1,37 @@
+@use '../../scss/public/colors' as *;
+
+.button {
+  border: 1px solid transparent;
+  color: $ds-grey-900;
+  outline-color: $ds-primary-500;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    border-color: $ds-primary-500;
+    color: $ds-primary-500;
+  }
+}
+
+.icon {
+  margin-right: 12px;
+
+  &balanced {
+    margin-right: 16px;
+  }
+
+  &spacious {
+    margin-right: 24px;
+  }
+}
+
+.actionIcon {
+  margin-left: 12px;
+
+  &balanced {
+    margin-left: 16px;
+  }
+
+  &spacious {
+    margin-left: 24px;
+  }
+}

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

@@ -207,6 +207,39 @@ export const RadioWithCustomLabel = ({ onChange, wide, classNames, inlineLayout
   );
 }
 
+export const RadioWithCustomLabelInline = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  const handleOnChange = (newValue: string) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Radio 
+      options={{
+        BIGDOG: {
+          icon: () => <img src={images.bigDog} alt='' />,
+          title: 'Dog',
+        },
+        FISH:{
+          icon: () => <img src={images.brokenAquarium} alt='' />,
+          title: 'Fish',
+        },
+        OTHER:{
+          icon: () => <img src={images.brokenGlass} alt='' />,
+          title: 'Other',
+        }
+      }} 
+      onChange={handleOnChange}
+      inlineIcon
+      value={checkedValues}
+      classNames={{ option: "w30" }}
+      inlineLayout
+    />
+  );
+}
+
 RadioStory.storyName = 'Radio';
 
 export const RadioIconOnly = ({ onChange }: RadioProps<string>) => {

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

@@ -15,6 +15,7 @@ export interface RadioProps<ValueType extends string> {
   onChange: (value: ValueType) => void;
   wide?: boolean;
   inlineLayout?: boolean;
+  inlineIcon?: boolean;
   classNames?: {
     container?: string;
     label?: string;
@@ -29,6 +30,7 @@ export const Radio = <ValueType extends string>({
   onChange,
   wide = false,
   inlineLayout = false,
+  inlineIcon = false,
   classNames: classNamesObj,
   bordered = true,
 }: RadioProps<ValueType>) => {
@@ -81,14 +83,23 @@ export const Radio = <ValueType extends string>({
             <label
               htmlFor={currentValue}
               className={classNames(classNamesObj?.label, 'p-label', {
-                'jc-center': customIcon,
-                'fd-column': customIcon,
+                'jc-center': customIcon && !inlineIcon,
+                'fd-column': customIcon && !inlineIcon,
                 'p-label--bordered': bordered,
               })}
               data-cy={`radio-${currentValue}`}
               data-testid={`radio-${currentValue}`}
             >
-              {customIcon && <div className="mt8">{customIcon?.(checked)}</div>}
+              {customIcon && (
+                <div 
+                  className={classNames(
+                    "d-inline-flex ai-center jc-center", 
+                    inlineIcon ? "mr8" : "mt8"
+                  )}
+                >
+                  {customIcon?.(checked)}
+                </div>
+              )}
 
               {isRadioLabelObject(label) ? (
                 <div>

package/src/lib/components/toast/index.stories.tsx

@@ -35,7 +35,7 @@ const story = {
   },
   args: {
     title: 'We couldn’t open the chat',
-    description: 'Description description description description description description description',
+    description: "We couldn't open the chat description. We couldn't open the chat description.",
     action: {
       title: 'Send an email',
       onClick: () => {}
@@ -52,7 +52,12 @@ const FakeInlineToast = ({
   type
 }: Omit<ToastProps, 'onDismiss'>) => (
   <div className='mb32'>
-    <div className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}>
+    <div
+      className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}
+      style={{
+        padding: "12px 20px"
+      }}
+    >
       <Toast 
         title={title}
         onDismiss={() => {}}

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

@@ -37,14 +37,18 @@ const Toast = ({
   title,
   type = "success"
 }: ToastProps) => (
-  <div className='d-flex jc-between w100'>
+  <div 
+    className={classNames(
+      styles.toastContent,
+      'd-flex jc-between w100'
+  )}>
     <div
       className={classNames(
         styles.toastSidebar, 
         styles[`toastSidebar--${type}`]
       )}
     />
-    <div className='mr16'>
+    <div className='d-flex fd-column jc-center ta-left mr8'>
       <h4 className='p-h4'>{title}</h4>
       
       {description && (
@@ -56,7 +60,7 @@ const Toast = ({
           className={classNames(
             styles.actionButton,
             styles[`actionButton--${type}`],
-            'mt8 c-pointer'
+            'mt8 c-pointer ta-left'
           )}
           onClick={() => {
             action.onClick();
@@ -75,7 +79,7 @@ const Toast = ({
         onClick={onDismiss}
         data-testid="toast-close-button"
       >
-        <XIcon /> 
+        <XIcon size={24} /> 
       </button>
     </div>
   </div>

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

@@ -8,9 +8,13 @@
 .toast {
   position: relative;
   margin: 0;
+  padding: 0;
   width: 392px;
   overflow: hidden;
-  padding: 20px 16px 20px 20px;
+}
+
+.toastContent {
+  padding: 4px 0 4px 8px;
 }
 
 .toastSidebar {
@@ -67,18 +71,18 @@
   }
 
   &--success {
-    color: $ds-green-700;
+    color: $ds-spearmint-700;
 
     &:hover {
-      color: $ds-green-900;
+      color: $ds-spearmint-900;
     }
   }
 
   &--information {
-    color: $ds-blue-500;
+    color: $ds-blue-700;
 
     &:hover {
-      color: $ds-blue-700;
+      color: $ds-blue-900;
     }
   }
 

package/src/lib/index.tsx

@@ -44,7 +44,7 @@ import {
 import { SegmentedControl } from './components/segmentedControl';
 import { Markdown } from './components/markdown';
 import { Link } from './components/link';
-import { images } from './util/images';
+import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
 import { Toggle } from './components/input/toggle';
 import { Toaster, toast } from './components/toast';
@@ -86,13 +86,15 @@ export {
   InformationBox,
   Badge,
   images,
+  illustrations,
   Spinner,
   Toggle,
   Toaster,
-  toast
+  toast,
 };
 
 export type {
+  IllustrationKeys,
   FileType,
   MultiDropzoneProps,
   TableHeader,

package/src/lib/models/styles.ts

@@ -56,4 +56,4 @@ export type Color = 'transparent' | 'blue-100'
 | 'yellow-700'
 | 'yellow-900';
 
-export type Size = 0 | 8 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;
+export type Size = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;

package/src/lib/scss/public/shadows.scss

@@ -1,5 +1,5 @@
 $bs-xs: 0px 4px 6px rgba(97, 96, 162, 0.01);
-$bs-sm: 0px 2px 28px rgba(97, 96, 162, 0.1);
+$bs-sm: 0px 2px 20px 0px rgba(97, 96, 162, 0.06);
 $bs-md: 0px 2px 28px rgba(97, 96, 162, 0.12);
 $bs-l: 0px 2px 28px rgba(97, 96, 162, 0.15);