@popsure/dirty-swan 0.26.8 → 0.26.11

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

@@ -0,0 +1,105 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import CardWithTopIcon from '.';
+import { featherLogo } from '../icons';
+
+<Meta title="JSX/Cards/Card with top icon" />
+
+# Card with top icon
+
+| attribute  | unit                                                                                 | description                                      | default value | required |
+| ---------- | ------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------- | -------- |
+| title      | string                                                                               | The title text that needs to be displayed        | n/a           | true     |
+| cardSize  | [Card Size (s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card                                | medium        | false    |
+| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the top of the card            | n/a           | true     |
+| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the right of the title         | n/a           | false    |
+| state      | [Card State](?path=/story/jsx-cards-intro--page#card-state)                          | State that describe the interation with the card | actionable    | false    |
+| dropshadow | boolean                                                                              | If the card should have a box-shadow or not      | true          | false    |
+
+<Preview>
+  <>
+    <h4 className="p-h4">Small card</h4>
+    <CardWithTopIcon
+      title="Lorem ipsum"
+      cardSize="small"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      topIcon={featherLogo}
+    >
+      <p className="p-p mt16 tc-grey-600">
+        Praesent euismod porta odio at tempus.{' '}
+        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+        eros at, rhoncus imperdiet nunc
+      </p>
+    </CardWithTopIcon>
+    <h4 className="p-h4 mt24">Medium card</h4>
+    <CardWithTopIcon
+      title="Lorem ipsum"
+      cardSize="medium"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      topIcon={featherLogo}
+    >
+      <p className="p-p mt16 tc-grey-600">
+        Praesent euismod porta odio at tempus.{' '}
+        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+        eros at, rhoncus imperdiet nunc
+      </p>
+    </CardWithTopIcon>
+    <h4 className="p-h4 mt24">Big card</h4>
+    <CardWithTopIcon
+      title="Lorem ipsum"
+      cardSize="big"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      topIcon={featherLogo}
+    >
+      <p className="p-p mt16 tc-grey-600">
+        Praesent euismod porta odio at tempus.{' '}
+        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+        eros at, rhoncus imperdiet nunc
+      </p>
+    </CardWithTopIcon>
+    <h4 className="p-h4 mt24">Muted</h4>
+    <CardWithTopIcon
+      title="Lorem ipsum"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      topIcon={featherLogo}
+      state="muted"
+    >
+      <p className="p-p mt16 tc-grey-600">
+        Praesent euismod porta odio at tempus.{' '}
+        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+        eros at, rhoncus imperdiet nunc
+      </p>
+    </CardWithTopIcon>
+    <h4 className="p-h4 mt24">No right icon</h4>
+    <CardWithTopIcon
+      title="Lorem ipsum"
+      topIcon={featherLogo}
+      cardSize="small"
+      className="wmx6 mt8"
+    >
+      <p className="p-p mt16 tc-grey-600">
+        Praesent euismod porta odio at tempus.{' '}
+        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+        eros at, rhoncus imperdiet nunc
+      </p>
+    </CardWithTopIcon>
+    <h4 className="p-h4 mt24">No dropshadow</h4>
+    <CardWithTopIcon
+      title="Lorem ipsum"
+      topIcon={featherLogo}
+      cardSize="small"
+      className="wmx6 mt8"
+      dropshadow={false}
+    >
+      <p className="p-p mt16 tc-grey-600">
+        Praesent euismod porta odio at tempus.{' '}
+        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+        eros at, rhoncus imperdiet nunc
+      </p>
+    </CardWithTopIcon>
+  </>
+</Preview>

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

@@ -0,0 +1,60 @@
+import {
+  associatedClassForCardState,
+  CardProps,
+  headingForCardSize,
+} from '..';
+import { Icon, arrowRight, IconSize } from '../icons';
+
+import styles from './style.module.scss';
+
+export default ({
+  className,
+  title,
+  cardSize = 'medium',
+  children,
+  topIcon,
+  topIconSize = { width: 48, height: 48 },
+  rightIcon,
+  state = 'actionable',
+  dropshadow = true,
+  ...props
+}: CardProps & {
+  topIcon: Icon;
+  topIconSize: IconSize;
+  cardSize?: 'small' | 'medium' | 'big';
+  rightIcon?: 'arrow' | Icon;
+}) => {
+  const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(
+    state,
+    dropshadow
+  )} ${styles.container}`;
+
+  const headingStyle = headingForCardSize(cardSize);
+  const iconStyle = styles['right-icon'];
+
+  return (
+    <>
+      <div className={cardStyle} {...props}>
+        <img
+          width={topIconSize.width}
+          height={topIconSize.height}
+          alt={topIcon.alt}
+          src={topIcon.src}
+        />
+        <div className="d-flex mt16">
+          <div className={headingStyle}>{title}</div>
+          {rightIcon && (
+            <img
+              className={iconStyle}
+              width="24px"
+              height="24px"
+              src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}
+              alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}
+            />
+          )}
+        </div>
+        {children}
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,10 @@
+.container {
+  padding: 32px 24px 24px 24px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.right-icon {
+  margin-left: 4px;
+}

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

@@ -0,0 +1,101 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import CardWithTopLeftIcon from '.';
+import { featherLogo } from '../icons';
+
+<Meta title="JSX/Cards/Card with top left icon" />
+
+# Card with top left icon
+
+| attribute  | unit                                                                              | description                                      | default value | required |
+| ---------- | --------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | -------- |
+| title      | string                                                                            | The title text that needs to be displayed        | n/a           | true     |
+| cardSize  | [Card Size (xs,s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card                                | medium        | false    |
+| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)                                   | Icon displayed on the left of the title          | n/a           | false    |
+| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                   | Icon displayed on the right of the title         | n/a           | false    |
+| state      | [Card State](?path=/story/jsx-cards-intro--page#card-state)                       | State that describe the interation with the card | actionable    | false    |
+| dropshadow | boolean                                                                           | If the card should have a box-shadow or not      | true          | false    |
+
+<Preview>
+  <>
+    <h4 className="p-h4">Extra small card</h4>
+    <CardWithTopLeftIcon
+      title="Lorem ipsum"
+      cardSize="xsmall"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      leftIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+    <h4 className="p-h4 mt24">Small card</h4>
+    <CardWithTopLeftIcon
+      title="Lorem ipsum"
+      cardSize="small"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      leftIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+    <h4 className="p-h4 mt24">Medium card</h4>
+    <CardWithTopLeftIcon
+      title="Lorem ipsum"
+      cardSize="medium"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      leftIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+    <h4 className="p-h4 mt24">Big card</h4>
+    <CardWithTopLeftIcon
+      title="Lorem ipsum"
+      cardSize="big"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      leftIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+    <h4 className="p-h4 mt24">Muted</h4>
+    <CardWithTopLeftIcon
+      title="Lorem ipsum"
+      state="muted"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      leftIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+    <h4 className="p-h4 mt24">No right icon or left icon</h4>
+    <CardWithTopLeftIcon title="Lorem ipsum" className="wmx6 mt8">
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+    <h4 className="p-h4">No dropshadow</h4>
+    <CardWithTopLeftIcon
+      title="Lorem ipsum"
+      cardSize="medium"
+      className="wmx6 mt8"
+      rightIcon="arrow"
+      leftIcon={featherLogo}
+      dropshadow={false}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithTopLeftIcon>
+  </>
+</Preview>

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

@@ -0,0 +1,72 @@
+import {
+  associatedClassForCardState,
+  CardProps,
+  headingForCardSize,
+} from '..';
+import { Icon, arrowRight, featherLogo } from '../icons';
+
+import styles from './style.module.scss';
+
+const containerStyleFromTitleSize = (
+  titleSize: 'xsmall' | 'small' | 'medium' | 'big'
+): string => {
+  switch (titleSize) {
+    case 'xsmall':
+      return 'container--xsmall';
+    default:
+      return 'container';
+  }
+};
+
+export default ({
+  className,
+  title,
+  cardSize = 'medium',
+  children,
+  leftIcon,
+  rightIcon,
+  state = 'actionable',
+  dropshadow = true,
+  ...props
+}: CardProps & {
+  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+  leftIcon?: 'logo' | Icon;
+  rightIcon?: 'arrow' | Icon;
+}) => {
+  const cardStyle = `${className} ${associatedClassForCardState(
+    state,
+    dropshadow
+  )} ${styles[containerStyleFromTitleSize(cardSize)]}`;
+
+  const titleContainerStyle = styles['title-container'];
+  const headingStyle = headingForCardSize(cardSize);
+  const iconStyle = styles['right-icon'];
+  const cardTextStyle = `p-p tc-grey-600 ${cardSize === 'xsmall' ? styles.indent : 'mt16'}`;
+
+  return (
+    <div className={cardStyle} {...props}>
+      <div className={titleContainerStyle}>
+        {leftIcon && (
+          <img
+            className="mr8"
+            width="28px"
+            height="28px"
+            src={leftIcon === 'logo' ? featherLogo.src : leftIcon.src}
+            alt={leftIcon === 'logo' ? featherLogo.alt : leftIcon.src}
+          />
+        )}
+        <div className={headingStyle}>{title}</div>
+        {rightIcon && (
+          <img
+            className={iconStyle}
+            width="24px"
+            height="24px"
+            src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}
+            alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}
+          />
+        )}
+      </div>
+      <p className={cardTextStyle}>{children}</p>
+    </div>
+  );
+};

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

@@ -0,0 +1,21 @@
+.container {
+  padding: 24px;
+
+  &--xsmall {
+    padding: 16px 24px;
+  }
+}
+
+.title-container {
+  display: flex;
+
+  align-items: center;
+}
+
+.right-icon {
+  margin-left: auto;
+}
+
+.indent {
+  margin-left: 36px;
+}

package/src/lib/components/cards/icons/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M12 5L19 12L12 19" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/cards/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L15 12L9 6" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/cards/icons/feather-logo.svg

@@ -0,0 +1,10 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="0" width="22" height="28">
+<path d="M23.8761 0C14.4485 4.03927 5.77595 19.2529 3.53731 26.0756C3.04003 27.5912 2.60201 29.2504 4.03812 26.6043C4.89889 25.0183 7.02902 22.7858 11.8864 21.9848C15.7724 21.344 17.3995 20.5116 19.8916 17.6795C18.7427 18.0914 17.2587 18.9525 14.0909 17.9656C18.4837 18.3512 21.5108 15.748 22.6934 12.044C19.7931 13.3599 17.3385 12.4392 16.6956 12.1007C20.6519 12.2002 23.9887 9.68393 24.7913 5.49304C25.2591 3.05005 24.5097 0.800979 23.8761 0Z" fill="#6160A2"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M21.1875 1.45451C12.8431 6.88225 5.56109 19.9077 3.53731 26.0756C3.04003 27.5912 2.60201 29.2504 4.03812 26.6043C4.89889 25.0183 7.02902 22.7858 11.8864 21.9848C15.1146 21.4525 16.784 20.7879 18.6853 18.9545C19.0219 18.63 19.1998 17.9565 18.7553 18.1015C18.24 18.2696 17.709 17.5612 18.205 17.3425C19.7521 16.6603 20.976 15.4887 21.8303 14.0102C22.2446 13.2932 20.7231 12.6796 19.8955 12.7075C18.8859 12.7415 19.6982 11.6399 20.6391 11.2723C21.8973 10.7807 23.0427 10.0842 23.7916 9.26859C24.7617 8.21223 24.48 7.11878 24.7913 5.49304C24.969 4.56516 24.971 3.66526 24.8706 2.86204C24.6464 1.06951 22.7019 0.469502 21.1875 1.45451Z" fill="#6160A2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4837 5.72996C30.4837 14.8734 23.1695 22.4039 14.0022 22.4039C4.83493 22.4039 -2.47925 14.8734 -2.47925 5.72996C-2.47925 -3.4135 4.83493 -10.944 14.0022 -10.944C23.1695 -10.944 30.4837 -3.4135 30.4837 5.72996ZM14.0022 18.0289C20.6884 18.0289 26.1087 12.5225 26.1087 5.72996C26.1087 -1.06259 20.6884 -6.56903 14.0022 -6.56903C7.316 -6.56903 1.89575 -1.06259 1.89575 5.72996C1.89575 12.5225 7.316 18.0289 14.0022 18.0289Z" fill="#90DF9B"/>
+<path d="M26.1087 5.72995C26.1087 12.5225 20.6884 18.0289 14.0022 18.0289C7.316 18.0289 1.89575 12.5225 1.89575 5.72995C1.89575 -1.06259 7.316 -6.56903 14.0022 -6.56903C20.6884 -6.56903 26.1087 -1.06259 26.1087 5.72995Z" fill="#8E8CEE"/>
+</g>
+</svg>

package/src/lib/components/cards/icons/index.ts

@@ -0,0 +1,36 @@
+import arrowRightImage from './arrow-right.svg';
+import featherLogoImage from './feather-logo.svg';
+import infoImage from './info.svg';
+import chevronRightImage from './chevron-right.svg';
+
+export interface Icon {
+  src: string;
+  alt: string;
+}
+
+export interface IconSize {
+  width: number;
+  height: number;
+}
+
+const arrowRight: Icon = {
+  src: arrowRightImage,
+  alt: 'arrow pointing right',
+};
+
+const featherLogo: Icon = {
+  src: featherLogoImage,
+  alt: 'feather logo',
+};
+
+const info: Icon = {
+  src: infoImage,
+  alt: 'circle with the letter i inside for information',
+};
+
+const chevronRight: Icon = {
+  src: chevronRightImage,
+  alt: 'chevron facing right',
+};
+
+export { arrowRight, featherLogo, info, chevronRight };

package/src/lib/components/cards/icons/info.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M10 18.3334C14.6024 18.3334 18.3334 14.6024 18.3334 10C18.3334 5.39765 14.6024 1.66669 10 1.66669C5.39765 1.66669 1.66669 5.39765 1.66669 10C1.66669 14.6024 5.39765 18.3334 10 18.3334Z" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M10 13.3333V10" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<circle cx="10" cy="6.66665" r="0.833333" fill="#8E8CEE"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/components/cards/index.test.ts

@@ -0,0 +1,37 @@
+import { associatedClassForCardState } from '.';
+
+describe('Associated class for card state', () => {
+  it('Should be an actionable class', () => {
+    expect(associatedClassForCardState('actionable', true)).toEqual(
+      'ds-card--actionable'
+    );
+  });
+
+  it('Should be a muted class', () => {
+    expect(associatedClassForCardState('muted', true)).toEqual(
+      'ds-card--muted'
+    );
+  });
+
+  it('Should be a static class', () => {
+    expect(associatedClassForCardState('static', true)).toEqual('ds-card');
+  });
+
+  it('Should be an actionable class without dropshadow', () => {
+    expect(associatedClassForCardState('actionable', false)).toEqual(
+      'ds-card--actionable ds-card--no-dropshadow'
+    );
+  });
+
+  it('Should be a muted class without dropshadow', () => {
+    expect(associatedClassForCardState('muted', false)).toEqual(
+      'ds-card--muted ds-card--no-dropshadow'
+    );
+  });
+
+  it('Should be a static class without dropshadow', () => {
+    expect(associatedClassForCardState('static', false)).toEqual(
+      'ds-card ds-card--no-dropshadow'
+    );
+  });
+});

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

@@ -0,0 +1,57 @@
+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';
+
+export type CardProps = {
+  title: string;
+  children: React.ReactNode;
+  state?: CardState;
+  dropshadow?: boolean;
+} & JSX.IntrinsicElements['div'];
+
+export const headingForCardSize = (
+  cardSize: 'xsmall' | 'small' | 'medium' | 'big'
+): string => {
+  switch (cardSize) {
+    case 'xsmall':
+    case 'small':
+      return 'p-h4';
+    case 'medium':
+      return 'p-h3';
+    case 'big':
+      return 'p-h2';
+  }
+};
+
+export const associatedClassForCardState = (
+  state: CardState,
+  dropshadow: boolean
+): string => {
+  const baseClass = (() => {
+    switch (state) {
+      case 'actionable':
+        return 'ds-card--actionable';
+      case 'muted':
+        return 'ds-card--muted';
+      case 'static':
+        return 'ds-card';
+    }
+  })();
+
+  if (dropshadow === false) {
+    return `${baseClass} ds-card--no-dropshadow`;
+  }
+  return baseClass;
+};
+
+export {
+  CardWithTopLeftIcon,
+  CardWithLeftIcon,
+  CardWithTopIcon,
+  InfoCard,
+  CardButton,
+};

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

@@ -0,0 +1,61 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import InfoCard from '.';
+import { featherLogo } from '../icons';
+
+<Meta title="JSX/Cards/Info card" />
+
+# Info card
+
+| attribute  | unit                                                        | description                                                     | default value | required |
+| ---------- | ----------------------------------------------------------- | --------------------------------------------------------------- | ------------- | -------- |
+| title      | string                                                      | The title text that needs to be displayed                       | n/a           | true     |
+| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)             | Icon displayed on the top of the card, inside the purple circle | n/a           | true     |
+| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)             | Icon displayed on the top right corner of the card              | n/a           | false    |
+| state      | [Card State](?path=/story/jsx-cards-intro--page#card-state) | State that describe the interation with the card                | actionable    | false    |
+| dropshadow | boolean                                                     | If the card should have a box-shadow or not                     | true          | false    |
+
+<Preview>
+  <>
+    <h4 className="p-h4">With right icon</h4>
+    <InfoCard
+      className="wmx6 mt8"
+      title="Lorem ipsum"
+      rightIcon="info"
+      topIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+    <h4 className="p-h4 mt24">Without right icon</h4>
+    <InfoCard className="wmx6 mt8" title="Lorem ipsum" topIcon={featherLogo}>
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+    <h4 className="p-h4 mt24">Muted</h4>
+    <InfoCard
+      className="wmx6 mt8"
+      title="Lorem ipsum"
+      topIcon={featherLogo}
+      state="muted"
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+    <h4 className="p-h4">No dropshadow</h4>
+    <InfoCard
+      className="wmx6 mt8"
+      title="Lorem ipsum"
+      rightIcon="info"
+      topIcon={featherLogo}
+      dropshadow={false}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+  </>
+</Preview>

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

@@ -0,0 +1,47 @@
+import { associatedClassForCardState, CardProps } from '..';
+import { Icon, info } from '../icons';
+
+import styles from './style.module.scss';
+
+export default ({
+  className,
+  title,
+  children,
+  topIcon,
+  rightIcon,
+  state = 'actionable',
+  dropshadow = true,
+  ...props
+}: CardProps & {
+  topIcon: Icon;
+  rightIcon?: 'info' | Icon;
+}) => (
+  <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}
+        />
+      )}
+      <div className="p-h4 ta-center mt64">{title}</div>
+      <p className="p-p mt16 tc-grey-600">{children}</p>
+    </div>
+  </div>
+);