@popsure/dirty-swan 0.33.5 → 0.35.0

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

@@ -30,7 +30,13 @@ const cardTextStyleFromCardSize = (
   }
 };
 
-export default ({
+export type CardWithLeftIconProps = CardProps & {
+  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+  leftIcon?: Icon;
+  rightIcon?: 'arrow' | Icon;
+}
+
+export const CardWithLeftIcon = ({
   className = '',
   title,
   cardSize = 'medium',
@@ -40,11 +46,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
-  leftIcon?: Icon;
-  rightIcon?: 'arrow' | Icon;
-}) => {
+}: CardWithLeftIconProps) => {
   const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(
     state,
     dropshadow

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

@@ -0,0 +1,85 @@
+import { CardWithTopIcon, CardWithTopIconProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Cards/CardWithTopIcon',
+  component: CardWithTopIcon,
+  argTypes: {
+    title: {
+      defaultValue: 'Lorem Ipsum',
+      description: 'Title text that needs to be displayed',
+    },
+    children: {
+      type: 'text',
+      defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+      description: 'Content that is displayed inside the card',
+    },
+    state: {
+      defaultValue: 'actionable',
+      description: 'State that describe the interation with the card',
+    },
+    topIcon: {
+      defaultValue: {
+        src: images.mortgage,
+        alt: 'Image alt'
+      },
+      description: 'Icon displayed on the top of the card.',
+    },
+    topIconSize: {
+      defaultValue: {
+        width: 48,
+        height: 48
+      },
+      description: 'Size of the top icon',
+    },
+    rightIcon: {
+      defaultValue: 'arrow',
+      description: 'Icon displayed on the top right corner of the card',
+    },
+    cardSize: {
+      control: { type: 'select' },
+      defaultValue: 'medium',
+      description: 'Size of the card'
+    },
+    dropshadow: {
+      defaultValue: true,
+      description: 'If the card should have a box-shadow or not',
+    },
+    className: {
+      defaultValue: 'ws6',
+      type: 'text',
+      description: 'Class name for most top parent element',
+    },
+  },
+};
+
+export const CardWithTopIconStory = ({
+  title,
+  dropshadow,
+  cardSize,
+  children,
+  className,
+  topIcon,
+  topIconSize,
+  rightIcon,
+  state,
+}: CardWithTopIconProps) => (
+  <CardWithTopIcon
+    cardSize={cardSize}
+    className={className}
+    dropshadow={dropshadow}
+    state={state}
+    topIcon={topIcon}
+    topIconSize={topIconSize}
+    rightIcon={rightIcon}
+    title={title}
+  >
+    <p className="p-p mt16 tc-grey-600">
+      {children}
+    </p>
+  </CardWithTopIcon>
+);
+
+CardWithTopIconStory.storyName = "CardWithTopIcon";
+
+export default story;

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

@@ -3,7 +3,14 @@ import { Icon, arrowRight, IconSize } from '../icons';
 
 import styles from './style.module.scss';
 
-export default ({
+export type CardWithTopIconProps = CardProps & {
+  topIcon: Icon;
+  topIconSize: IconSize;
+  cardSize?: 'small' | 'medium' | 'big';
+  rightIcon?: 'arrow' | Icon;
+};
+
+export const CardWithTopIcon = ({
   className,
   title,
   cardSize = 'medium',
@@ -14,12 +21,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  topIcon: Icon;
-  topIconSize: IconSize;
-  cardSize?: 'small' | 'medium' | 'big';
-  rightIcon?: 'arrow' | Icon;
-}) => {
+}: CardWithTopIconProps) => {
   const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(
     state,
     dropshadow

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

@@ -0,0 +1,73 @@
+import { CardWithTopLeftIcon, CardWithTopLeftIconProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Cards/CardWithTopLeftIcon',
+  component: CardWithTopLeftIcon,
+  argTypes: {
+    title: {
+      defaultValue: 'Lorem Ipsum',
+      description: 'Title text that needs to be displayed',
+    },
+    children: {
+      type: 'text',
+      defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+      description: 'Content that is displayed inside the card',
+    },
+    state: {
+      defaultValue: 'actionable',
+      description: 'State that describe the interation with the card',
+    },
+    leftIcon: {
+      defaultValue: 'logo',
+      description: 'Icon displayed on the left of the card.',
+    },
+    rightIcon: {
+      defaultValue: 'arrow',
+      description: 'Icon displayed on the top right corner of the card',
+    },
+    cardSize: {
+      control: { type: 'select' },
+      defaultValue: 'medium',
+      description: 'Size of the card'
+    },
+    dropshadow: {
+      defaultValue: true,
+      description: 'If the card should have a box-shadow or not',
+    },
+    className: {
+      defaultValue: '',
+      type: 'text',
+      description: 'Class name for most top parent element',
+    },
+  },
+};
+
+export const CardWithTopLeftIconStory = ({
+  title,
+  dropshadow,
+  children,
+  className,
+  cardSize,
+  leftIcon,
+  rightIcon,
+  state,
+}: CardWithTopLeftIconProps) => {
+  return (
+    <CardWithTopLeftIcon
+      cardSize={cardSize}
+      className={className}
+      dropshadow={dropshadow}
+      state={state}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      title={title}
+    >
+      {children}
+    </CardWithTopLeftIcon>
+  );
+}
+
+CardWithTopLeftIconStory.storyName = "CardWithTopLeftIcon";
+
+export default story;

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

@@ -18,7 +18,13 @@ const containerStyleFromTitleSize = (
   }
 };
 
-export default ({
+export type CardWithTopLeftIconProps = CardProps & {
+  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+  leftIcon?: 'logo' | Icon;
+  rightIcon?: 'arrow' | Icon;
+};
+
+export const CardWithTopLeftIcon = ({
   className,
   title,
   cardSize = 'medium',
@@ -28,11 +34,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
-  leftIcon?: 'logo' | Icon;
-  rightIcon?: 'arrow' | Icon;
-}) => {
+}: CardWithTopLeftIconProps) => {
   const cardStyle = `${className} ${associatedClassForCardState(
     state,
     dropshadow

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

@@ -1,8 +1,8 @@
-import CardWithTopLeftIcon from './cardWithTopLeftIcon';
-import CardWithLeftIcon from './cardWithLeftIcon';
-import CardWithTopIcon from './cardWithTopIcon';
-import InfoCard from './infoCard';
-import CardButton from './cardButton';
+import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';
+import { CardWithLeftIcon } from './cardWithLeftIcon';
+import { CardWithTopIcon } from './cardWithTopIcon';
+import { InfoCard } from './infoCard';
+import { CardButton } from './cardButton';
 
 type CardState = 'actionable' | 'static' | 'muted';
 

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

@@ -0,0 +1,71 @@
+import { InfoCard, InfoCardProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Cards/InfoCard',
+  component: InfoCard,
+  argTypes: {
+    title: {
+      defaultValue: 'Lorem Ipsum',
+      description: 'Title text that needs to be displayed',
+    },
+    children: {
+      type: 'text',
+      defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+      description: 'Content that is displayed inside the card',
+    },
+    state: {
+      defaultValue: 'actionable',
+      description: 'State that describe the interation with the card',
+    },
+    topIcon: {
+      defaultValue: {
+        src: images.mortgage,
+        alt: 'Image alt'
+      },
+      description: 'Icon displayed on the top of the card, inside the purple circle',
+    },
+    rightIcon: {
+      defaultValue: {
+        src: images.washingMachine,
+        alt: 'Icon alt'
+      },
+      description: 'Icon displayed on the top right corner of the card',
+    },
+    dropshadow: {
+      defaultValue: true,
+      description: 'If the card should have a box-shadow or not',
+    },
+    className: {
+      defaultValue: '',
+      description: 'Class name for most top parent element',
+    },
+  },
+};
+
+export const InfoCardStory = ({
+  title,
+  dropshadow,
+  children,
+  className,
+  rightIcon,
+  state,
+  topIcon
+}: InfoCardProps) => {
+  return (
+    <InfoCard
+      className={className}
+      dropshadow={dropshadow}
+      state={state}
+      rightIcon={rightIcon}
+      title={title}
+      topIcon={topIcon}
+    >
+      {children}
+    </InfoCard>
+  );
+}
+
+InfoCardStory.storyName = "InfoCard";
+
+export default story;

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

@@ -3,7 +3,12 @@ import { Icon, info } from '../icons';
 
 import styles from './style.module.scss';
 
-export default ({
+export type InfoCardProps = CardProps & {
+  topIcon: Icon;
+  rightIcon?: 'info' | Icon;
+};
+
+export const InfoCard = ({
   className,
   title,
   children,
@@ -12,10 +17,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  topIcon: Icon;
-  rightIcon?: 'info' | Icon;
-}) => (
+}: InfoCardProps) => (
   <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>
     <img
       src={topIcon.src}

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

@@ -4,13 +4,15 @@ import removeButtonHighlightedIcon from './icons/remove-button-highlighted.svg';
 import { Option } from '../../models/autoSuggestInput';
 
 export default ({
+  className,
   value,
   onRemove,
 }: {
   value: Option;
   onRemove: (value: Option) => void;
+  className?: string;
 }) => (
-  <div className={`p-p mr8 mb8 d-flex ${styles['chip']}`}>
+  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>
     {value.leftIcon && (
       <img
         className={`mr8 ${styles['chip-image']}`}

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

@@ -0,0 +1,51 @@
+import { InformationBox, InformationBoxProps } from '.';
+
+const story = {
+  title: 'JSX/InformationBox',
+  component: InformationBox,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+      defaultValue: 'It seems that you already have an account with us! Sign in now',
+      description: 'Content that is displayed inside the information box',
+    },
+    title: {
+      defaultValue: 'Log in to your account',
+      description: 'Title of the information box',
+    },
+    showIcon: {
+      defaultValue: false,
+      description: 'Whether or not to show the info icon',
+    },
+    size: {
+      defaultValue: 'default',
+      description: 'Size to display the component',
+    },
+    variant: {
+      defaultValue: 'information',
+      description: 'Variant that defines the style of the InformationBox',
+    },
+  }
+};
+
+export const InformationBoxStory = ({
+  children,
+  showIcon,
+  title,
+  size,
+  variant,
+}: InformationBoxProps) => (
+  <div className='wmx6'>
+    <InformationBox
+      children={children}
+      showIcon={showIcon}
+      title={title}
+      size={size}
+      variant={variant}
+    />
+  </div>
+);
+
+InformationBoxStory.storyName = "InformationBox";
+
+export default story;

package/src/lib/components/informationBox/index.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '../../util/testUtils';
+
+import { InformationBox } from '.';
+
+describe('InformationBox component', () => {
+  it('Should render title', async () => {
+    render(
+      <InformationBox title={'Title'}>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+  });
+
+  it('Should not render title when title prop is not passed', async () => {
+    render(
+      <InformationBox>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.queryByTestId('information-box-title')).not.toBeInTheDocument();
+  });
+  
+  it('Should render content', async () => {
+    render(
+      <InformationBox>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+  
+  it('Should show icon when showIcon is true', async () => {
+    render(
+      <InformationBox showIcon>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.getByTestId('information-box-icon')).toBeInTheDocument();
+  });
+  
+  it('Should not show icon when showIcon is false', async () => {
+    render(
+      <InformationBox showIcon={false}>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.queryByTestId('information-box-icon')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './style.module.scss';
+
+type Variant = 'warning' | 'error' | 'success' | 'information' | 'neutral';
+
+export interface InformationBoxProps {
+  className?: string;
+  variant?: Variant;
+  title?: string;
+  children: ReactNode;
+  showIcon?: boolean;
+  size?: 'default' | 'small';
+}
+
+const InformationBox = ({
+  className = '',
+  variant = 'information',
+  title,
+  children,
+  showIcon,
+  size = 'default'
+}: InformationBoxProps) => (
+  <div
+    className={classNames(
+      className, 
+      'p16 br8 color-black', 
+      styles.informationBox,
+      styles[`informationBox--${variant}`]
+    )}
+    role="alert"
+  >
+    <div className='d-flex'>
+      {showIcon && 
+        <span
+          data-testid="information-box-icon"
+          className={classNames(
+            styles.icon,
+            styles[`icon--${variant}`],
+            'mr8'
+          )}
+        />
+      }
+      <div>
+        {title && (
+          <h4 
+            data-testid="information-box-title"
+            className={classNames(
+              size === 'default'? 'p-h4' : 'p-h5',
+              'mb8'
+            )}
+          >
+            {title}
+          </h4>
+        )}
+
+        <p className={size === 'default' ? 'p-p' : 'p-p--small'}>
+          {children}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+export { InformationBox };

package/src/lib/components/informationBox/info.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+  <g clip-path="url(#a)">
+    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10ZM12 16v-4"/>
+    <circle cx="12" cy="8" r="1" fill="#000"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h24v24H0z"/>
+    </clipPath>
+  </defs>
+  </svg>

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

@@ -0,0 +1,62 @@
+
+@use "../../scss/public/colors" as *;
+
+.informationBox {
+  border: 1px solid;
+
+  &--information {
+    background-color: $ds-blue-100;
+    border-color: $ds-blue-500;
+  }
+
+  &--error {
+    background-color: $ds-red-100;
+    border-color: $ds-red-500;
+  }
+
+  &--warning {
+    background-color: $ds-yellow-100;
+    border-color: $ds-yellow-500;
+  }
+
+  &--success {
+    background-color: $ds-green-100;
+    border-color: $ds-green-500;
+  }
+
+  &--neutral {
+    background-color: $ds-white;
+    border-color: $ds-white;
+  }
+}
+
+.icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+
+  mask-image: url('./info.svg');
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+
+  &--information {
+    background-color: $ds-blue-500;
+  }
+
+  &--error {
+    background-color: $ds-red-500;
+  }
+
+  &--warning {
+    background-color: $ds-yellow-500;
+  }
+
+  &--success {
+    background-color: $ds-green-500;
+  }
+
+  &--neutral {
+    background-color: $ds-primary-500;
+  }
+}

package/src/lib/components/input/a.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 
-import Input from '.';
+import { Input } from '.';
 
 <Meta title="JSX/Inputs/Intro" />
 
@@ -10,7 +10,7 @@ Input elements are used to gather information from users.
 
 We have defined a few different input components according to the use case:
 
-- A default [Input](?path=/story/jsx-inputs-input--page) component
+- A default [Input](?path=/story/jsx-inputs-input--input-story) component
 - A [Currency Input](?path=/story/jsx-inputs-currency-input--page) component that is meant to be used for entering amount in Euro
 - An [Iban Input](?path=/story/jsx-inputs-iban-input--page) that is meant to be used when entering banking informations.
 - A [AutoSuggestInput]() component allows quick search via the input field to find an option for selection.

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

@@ -3,7 +3,7 @@ import Autosuggest, { RenderInputComponentProps } from 'react-autosuggest';
 
 import styles from './style.module.scss';
 import { Option } from '../../../models/autoSuggestInput';
-import Input, { InputProps } from '../index';
+import { Input, InputProps } from '../index';
 
 export default ({
   currentOption,