@popsure/dirty-swan 0.26.9 → 0.26.12

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

@@ -0,0 +1,82 @@
+@use "../../scss/public/grid" as *;
+@use "../../scss/public/colors" as *;
+
+.input-line {
+  margin-left: -16px;
+
+  > * {
+    margin-left: 16px;
+  }
+
+  @include p-size-mobile {
+    flex-direction: column;
+
+    > *:not(:first-child) {
+      margin-top: 16px;
+    }
+  }
+}
+
+.house-number-input {
+  @include p-size-mobile {
+    max-width: none;
+  }
+}
+
+.map-container {
+  position: relative;
+
+  height: 112px;
+  margin-bottom: 16px;
+
+  border-radius: 8px;
+
+  transition: 0.3s height ease-in-out, 0.3s margin-top ease-in-out;
+
+  overflow: hidden;
+
+  &--hidden {
+    height: 0;
+    margin: 0;
+  }
+}
+
+@keyframes appear-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.appear-in-animate {
+  animation-name: appear-in;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+.loading-spinner {
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  position: absolute !important;
+  background-color: rgba($ds-primary-500, 0.25);
+
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 100;
+
+  animation-name: appear-in;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}

package/src/lib/components/autocompleteAddress/util/index.test.ts

@@ -0,0 +1,51 @@
+import { geocoderAddressComponentToPartialAddress } from '.';
+
+describe('geocoderAddressComponentToPartialAddress text', () => {
+  it('Should extract street, houseNumber, postcode, city, country from GeocoderAddressComponent[]', () => {
+    const input = [
+      { long_name: '103A', short_name: '103A', types: ['street_number'] },
+      {
+        long_name: 'Kottbusser Damm',
+        short_name: 'Kottbusser Damm',
+        types: ['route'],
+      },
+      {
+        long_name: 'Bezirk Neukölln',
+        short_name: 'Bezirk Neukölln',
+        types: ['sublocality_level_1', 'sublocality', 'political'],
+      },
+      {
+        long_name: 'Berlin',
+        short_name: 'Berlin',
+        types: ['locality', 'political'],
+      },
+      {
+        long_name: 'Berlin',
+        short_name: 'Berlin',
+        types: ['administrative_area_level_1', 'political'],
+      },
+      {
+        long_name: 'Germany',
+        short_name: 'DE',
+        types: ['country', 'political'],
+      },
+      {
+        long_name: '10967',
+        short_name: '10967',
+        types: ['postal_code'],
+      },
+    ];
+
+    const expectedOutput = {
+      street: 'Kottbusser Damm',
+      houseNumber: '103A',
+      postcode: '10967',
+      city: 'Berlin',
+      country: 'DE',
+    };
+
+    expect(geocoderAddressComponentToPartialAddress(input)).toEqual(
+      expectedOutput
+    );
+  });
+});

package/src/lib/components/autocompleteAddress/util/index.ts

@@ -0,0 +1,55 @@
+import { Address, countryNameFromAlphaCode } from '@popsure/public-models';
+
+export const geocoderAddressComponentToPartialAddress = (
+  input: google.maps.GeocoderAddressComponent[]
+): Partial<Address> => {
+  interface MappedType {
+    key: keyof Address;
+    value: 'long_name' | 'short_name';
+  }
+
+  const mapping: {
+    route: MappedType;
+    street_number: MappedType;
+    postal_code: MappedType;
+    locality: MappedType;
+    country: MappedType;
+  } = {
+    route: {
+      key: 'street',
+      value: 'long_name',
+    },
+    street_number: {
+      key: 'houseNumber',
+      value: 'long_name',
+    },
+    postal_code: {
+      key: 'postcode',
+      value: 'long_name',
+    },
+    locality: {
+      key: 'city',
+      value: 'long_name',
+    },
+    country: {
+      key: 'country',
+      value: 'short_name',
+    },
+  };
+
+  const toReturn: Partial<Address> = {};
+  input.forEach((value) => {
+    const type = value.types[0] as keyof typeof mapping;
+    const mappedValue = mapping[type];
+    if (mappedValue) {
+      toReturn[mappedValue.key] = value[mappedValue.value];
+    }
+  });
+
+  return toReturn;
+};
+
+export const inlineAddress = (address: Address) =>
+  `${address.street} ${address.houseNumber}, ${
+    address.city
+  }, ${countryNameFromAlphaCode(address.country)}`;

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

@@ -0,0 +1,14 @@
+import purpleSendImage from './send-purple.svg';
+import whiteSendImage from './send-white.svg';
+
+const purpleSend = {
+  src: purpleSendImage,
+  alt: 'Paper plane',
+};
+
+const whiteSend = {
+  src: whiteSendImage,
+  alt: 'Paper plane',
+};
+
+export { purpleSend, whiteSend };

package/src/lib/components/button/icons/send-purple.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="#8E8CEE" 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="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

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;
+  }
+}