@popsure/dirty-swan 0.26.10 → 0.26.11

package/src/lib/components/button/icons/send-white.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3334 1.66667L9.16675 10.8333" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M18.3334 1.66667L12.5001 18.3333L9.16675 10.8333L1.66675 7.5L18.3334 1.66667Z" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/button/index.stories.mdx

@@ -0,0 +1,121 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import Button from '.';
+import { purpleSend, whiteSend } from './icons';
+
+<Meta title="JSX/Button" />
+
+# Button
+
+Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.
+
+You are looking at the JSX definition of the Button component, if you want you can use the [css alternative](?path=/story/css-components-button--page)
+
+<Preview>
+  <iframe
+    width="100%"
+    height="450"
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26"
+    allowFullScreen
+  ></iframe>
+</Preview>
+
+| attribute   | unit                                       | description                                             | default value | required |
+| ----------- | ------------------------------------------ | ------------------------------------------------------- | ------------- | -------- |
+| buttonTitle | string                                     | The title text that needs to be displayed               | n/a           | true     |
+| buttonType  | 'primary' 'secondary'                      | Button type will influence the look of the button       | 'primary'     | false    |
+| leftIcon    | [Icon](?path=/story/jsx-button--page#icon) | Icon displayed left side of the button (w:20px, h:20px) | n/a           | false    |
+| loading     | boolean                                    | Wether the button should display a loading spinner      | false         | false    |
+
+<Preview>
+  <>
+    <h1 className="p-h1">Primary button</h1>
+    <h4 className="p-h4 mt24">Default</h4>
+    <Button className="wmn3 mt8" buttonTitle="Click me" />
+    <h4 className="p-h4 mt24">Loading</h4>
+    <Button className="wmn3 mt8" buttonTitle="Click me" loading={true} />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Button className="wmn3 mt8" buttonTitle="Click me" disabled={true} />
+    <h4 className="p-h4 mt24">With left icon</h4>
+    <Button className="wmn3 mt8" buttonTitle="Click me" leftIcon={whiteSend} />
+    <h1 className="p-h1 mt32">Secondary button</h1>
+    <h4 className="p-h4 mt24">Default</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="secondary"
+    />
+    <h4 className="p-h4 mt24">Loading</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="secondary"
+      loading={true}
+    />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="secondary"
+      disabled={true}
+    />
+    <h4 className="p-h4 mt24">With left icon</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="secondary"
+      leftIcon={purpleSend}
+    />
+    <h1 className="p-h1 mt32">Outline button</h1>
+    <h4 className="p-h4 mt24">Default</h4>
+    <Button className="wmn3 mt8" buttonTitle="Click me" buttonType="outline" />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="outline"
+      disabled={true}
+    />
+    <h4 className="p-h4 mt24">With left icon</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="outline"
+      leftIcon={purpleSend}
+    />
+    <h1 className="p-h1 mt32">Outline Grey button</h1>
+    <h4 className="p-h4 mt24">Default</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="outlineGrey"
+    />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="outlineGrey"
+      disabled={true}
+    />
+    <h4 className="p-h4 mt24">With left icon</h4>
+    <Button
+      className="wmn3 mt8"
+      buttonTitle="Click me"
+      buttonType="outlineGrey"
+      leftIcon={purpleSend}
+    />
+  </>
+</Preview>
+
+# Models
+
+## Icon
+
+The icon object is defined with the following poperties
+
+```typescript
+export interface Icon {
+  src: string; // source of the image
+  alt: string; // alternate text if the image can't be displayed
+}
+```

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

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import styles from './styles.module.scss';
+
+type ButtonType = 'primary' | 'secondary' | 'outline' | 'outlineGrey';
+
+const buttonTypeClassNameMap: { [K in ButtonType]: string } = {
+  primary: 'p-btn--primary',
+  secondary: 'p-btn--secondary',
+  outline: 'p-btn--outline',
+  outlineGrey: 'p-btn--outline-grey',
+};
+
+interface Icon {
+  src: string;
+  alt: string;
+}
+
+type InputProps = {
+  buttonTitle: string;
+  buttonType?: ButtonType;
+  leftIcon?: Icon;
+  loading?: boolean;
+} & Omit<JSX.IntrinsicElements['button'], 'children'>;
+
+export default React.forwardRef(
+  (
+    {
+      className,
+      loading = false,
+      buttonTitle,
+      buttonType = 'primary',
+      leftIcon,
+      type,
+      ...props
+    }: InputProps,
+    ref?: React.ForwardedRef<HTMLButtonElement>
+  ) => {
+    const buttonClassName = buttonTypeClassNameMap[buttonType];
+    const loadingClassName = loading ? 'p-btn--loading' : '';
+    return (
+      <button
+        ref={ref}
+        className={`${buttonClassName} ${loadingClassName} ${className ?? ''}`}
+        {...props}
+      >
+        {leftIcon ? (
+          <div className={styles['content-container']}>
+            <img
+              width="20px"
+              height="20px"
+              className="mr8"
+              src={leftIcon.src}
+              alt={leftIcon.alt}
+            />
+            <div>{buttonTitle}</div>
+          </div>
+        ) : (
+          <>{buttonTitle}</>
+        )}
+      </button>
+    );
+  }
+);

package/src/lib/components/button/styles.module.scss

@@ -0,0 +1,5 @@
+.content-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,44 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="JSX/Cards/Intro" />
+
+# Cards
+
+Cards are interactive elements that can be used to display an action that a user can take.
+
+<Preview>
+  <iframe
+    width="100%"
+    height="450"
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D358%253A19"
+    allowFullScreen
+  />
+</Preview>
+
+# Models
+
+## Card Size (xsmall, small, medium, big)
+
+The card size can be set with the following properties: `xsmall`, `small`, `medium`, `big`. Depending on the type of card this setting
+affects the font size of the title and card padding.
+
+## Card State
+
+The card state is an string literral type with the following properties:
+
+| state        | description                                              |
+| ------------ | -------------------------------------------------------- |
+| `actionable` | User can hover on the card, the cursor is set as pointer |
+| `static`     | Card is displayed as is, no hovering.                    |
+| `muted`      | Card is displayed faded, no hovering.                    |
+
+## Icon
+
+The icon object is defined with the following poperties
+
+```typescript
+export interface Icon {
+  src: string; // source of the image
+  alt: string; // alternate text if the image can't be displayed
+}
+```

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

@@ -0,0 +1,47 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import CardButton from '.';
+
+<Meta title="JSX/Cards/Card Button" />
+
+# Card Button
+
+| attribute   | unit                     | description                                    | default value | required                            |
+| ----------- | ------------------------ | ---------------------------------------------- | ------------- | ----------------------------------- |
+| title       | string                   | Title text that needs to be displayed          | n/a           | true                                |
+| description | string / ReactNode (JSX) | Description text that is displayed under title | n/a           | true                                |
+| disabled    | boolean                  | Disabled state of the button                   | false         | false                               |
+| className   | string                   | Class name for most top parent element         | n/a           | false                               |
+| onClick     | function                 | Function that runs on click of the button      | n/a           | true (false if href prop exists)    |
+| href        | string                   | Redirect URL on click of the button            | n/a           | true (false if onClick prop exists) |
+
+<Preview>
+  <>
+    <h4 className="p-h4">Normal state</h4>
+    <br />
+    <CardButton
+      title="Name"
+      description="Seungha Kong"
+      onClick={() => console.log('This is a button component')}
+    />
+    <br />
+    <br />
+    <h4 className="p-h4">Long description</h4>
+    <br />
+    <CardButton
+      title="Risky Sports"
+      description="Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,"
+      onClick={() => console.log('This is a button component')}
+    />
+    <br />
+    <br />
+    <h4 className="p-h4">Disabled state</h4>
+    <br />
+    <CardButton
+      title="Address"
+      description="Lohmühlenstraße 65 10557 Berlin"
+      onClick={() => console.log('This is a button component')}
+      disabled
+    />
+  </>
+</Preview>

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

@@ -0,0 +1,61 @@
+import { FormEvent, createElement, ReactNode } from 'react';
+
+import styles from './style.module.scss';
+import { chevronRight } from '../icons';
+
+interface Props {
+  title: string;
+  description: string | ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+type ActionProps =
+  | { href: string; onClick?: (e: FormEvent) => void }
+  | { href?: string; onClick: (e: FormEvent) => void };
+
+const CardContent = ({
+  title,
+  description,
+}: {
+  title: string;
+  description: string | ReactNode;
+}) => (
+  <>
+    <div>
+      <div className="p-p--small">{title}</div>
+      {typeof description === 'string' ? (
+        <div className="tc-primary-500 p-p">{description}</div>
+      ) : (
+        description
+      )}
+    </div>
+    <img {...chevronRight} alt="Expander icon" />
+  </>
+);
+
+const CardButton = ({
+  title,
+  description,
+  disabled = false,
+  onClick,
+  href,
+  className,
+}: Props & ActionProps) => {
+  const component = href ? 'a' : 'button';
+  return (
+    <>
+      {createElement(component, {
+        className: `c-pointer ta-left w100 ${styles.container} ${
+          className ?? ''
+        }
+        `,
+        children: <CardContent title={title} description={description} />,
+        disabled,
+        ...(component === 'a' ? { href } : { onClick }),
+      })}
+    </>
+  );
+};
+
+export default CardButton;

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

@@ -0,0 +1,33 @@
+@use "../../../scss/public/colors" as *;
+
+.container {
+  background-color: white;
+
+  padding: 8px 16px;
+
+  box-shadow: 0px 2px 20px rgba(97, 96, 162, 0.07);
+
+  border-radius: 8px;
+  border: 2px solid white;
+
+  transition: border 0.2s ease-in-out;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  text-decoration: none;
+
+  &:hover {
+    border: 2px solid $ds-primary-300;
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.25;
+  }
+
+  &:focus {
+    border: 2px solid $ds-primary-500;
+  }
+}

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

@@ -0,0 +1,103 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import CardWithLeftIcon from '.';
+import { featherLogo } from '../icons';
+
+<Meta title="JSX/Cards/Card with left icon" />
+
+# Card with 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    |
+| leftIcon   | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the left hand side of the card  | n/a           | false    |
+| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the right hand side 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    |
+| className  | string                                                                               | Class name for most top parent element         | 'n/a'           | false    |
+
+<Preview>
+  <>
+    <h4 className="p-h4">Extra small card</h4>
+    <CardWithLeftIcon
+      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
+    </CardWithLeftIcon>
+    <h4 className="p-h4">Small card</h4>
+    <CardWithLeftIcon
+      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
+    </CardWithLeftIcon>
+    <h4 className="p-h4 mt24">Medium card</h4>
+    <CardWithLeftIcon
+      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
+    </CardWithLeftIcon>
+    <h4 className="p-h4 mt24">Big card</h4>
+    <CardWithLeftIcon
+      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
+    </CardWithLeftIcon>
+    <h4 className="p-h4 mt24">Muted</h4>
+    <CardWithLeftIcon
+      state="muted"
+      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
+    </CardWithLeftIcon>
+    <h4 className="p-h4 mt24">No left icon and right icon</h4>
+    <CardWithLeftIcon title="Lorem ipsum" cardSize="big" className="wmx6 mt8">
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </CardWithLeftIcon>
+    <h4 className="p-h4 mt24">No dropshadow</h4>
+    <CardWithLeftIcon
+      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
+    </CardWithLeftIcon>
+  </>
+</Preview>

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

@@ -0,0 +1,87 @@
+import { associatedClassForCardState, CardProps, headingForCardSize } from '..';
+import { Icon, arrowRight } from '../icons';
+
+import styles from './style.module.scss';
+
+const containerStyleFromCardSize = (
+  cardSize: 'xsmall' | 'small' | 'medium' | 'big'
+): string => {
+  switch (cardSize) {
+    case 'xsmall':
+      return 'container--xsmall';
+    case 'small':
+      return 'container--small';
+    default:
+      return 'container';
+  }
+};
+
+const cardTextStyleFromCardSize = (
+  cardSize: 'xsmall' | 'small' | 'medium' | 'big'
+): string => {
+  switch (cardSize) {
+    case 'xsmall':
+    case 'small':
+      return 'card-text--small';
+    case 'medium':
+      return 'card-text--medium';
+    default:
+      return 'card-text--big';
+  }
+};
+
+export default ({
+  className = '',
+  title,
+  cardSize = 'medium',
+  children,
+  leftIcon,
+  rightIcon,
+  state = 'actionable',
+  dropshadow = true,
+  ...props
+}: CardProps & {
+  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+  leftIcon?: Icon;
+  rightIcon?: 'arrow' | Icon;
+}) => {
+  const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(
+    state,
+    dropshadow
+  )} ${styles[containerStyleFromCardSize(cardSize)]}`;
+
+  const headingStyle = headingForCardSize(cardSize);
+  const iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';
+  const cardTextStyle = `tc-grey-600 ${
+    cardSize === 'xsmall' ? 'p-p--small' : 'p-p '
+  } ${styles[cardTextStyleFromCardSize(cardSize)]}`;
+
+  return (
+    <div className={cardStyle} {...props}>
+      {leftIcon && (
+        <img
+          width="48px"
+          height="48px"
+          className={iconStyle}
+          src={leftIcon.src}
+          alt={leftIcon.alt}
+        />
+      )}
+      <div>
+        <div className="d-flex">
+          <div className={headingStyle}>{title}</div>
+          {rightIcon && (
+            <img
+              className="ml-auto"
+              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>
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+.container {
+  padding: 24px 24px 24px 32px;
+
+  &--small {
+    padding: 16px 24px 16px 32px;
+  }
+
+  &--xsmall {
+    padding: 16px 16px 16px 24px;
+  }
+}
+
+.card-text--small {
+  margin-top: 2px;
+}
+
+.card-text--medium {
+  margin-top: 4px;
+}
+
+.card-text--big {
+  margin-top: 6px;
+}