@popsure/dirty-swan 0.26.8 → 0.26.11

package/src/lib/scss/public/demo.tsx

@@ -0,0 +1,285 @@
+import React from 'react';
+
+const colors = [
+  {
+    name: 'Primary 25',
+    code: 'primary-25',
+    hex: '#fcfcff',
+  },
+  {
+    name: 'Primary 50',
+    code: 'primary-50',
+    hex: '#f7f7ff',
+  },
+  {
+    name: 'Primary 100',
+    code: 'primary-100',
+    hex: '#e6e5ff',
+  },
+  {
+    name: 'Primary 300',
+    code: 'primary-300',
+    hex: '#b1b0f5',
+  },
+  {
+    name: 'Primary 500',
+    code: 'primary-500',
+    hex: '#8e8cee',
+  },
+  {
+    name: 'Primary 700',
+    code: 'primary-700',
+    hex: '#6160a2',
+  },
+  {
+    name: 'Primary 900',
+    code: 'primary-900',
+    hex: '#2e2e4c',
+  },
+  {
+    name: 'Blue 100',
+    code: 'blue-100',
+    hex: '#e5f0ff',
+  },
+  {
+    name: 'Blue 300',
+    code: 'blue-300',
+    hex: '#b0cdf3',
+  },
+  {
+    name: 'Blue 500',
+    code: 'blue-500',
+    hex: '#8bb4ea',
+  },
+  {
+    name: 'Blue 700',
+    code: 'blue-700',
+    hex: '#5f7ba0',
+  },
+  {
+    name: 'Blue 900',
+    code: 'blue-900',
+    hex: '#2d394a',
+  },
+  {
+    name: 'Glacier 100',
+    code: 'glacier-100',
+    hex: '#e0f7fe',
+  },
+  {
+    name: 'Glacier 300',
+    code: 'glacier-300',
+    hex: '#aeddec',
+  },
+  {
+    name: 'Glacier 500',
+    code: 'glacier-500',
+    hex: '#8bcbdf',
+  },
+  {
+    name: 'Glacier 700',
+    code: 'glacier-700',
+    hex: '#5d8896',
+  },
+  {
+    name: 'Glacier 900',
+    code: 'glacier-900',
+    hex: '#2d4148',
+  },
+  {
+    name: 'Red 100',
+    code: 'red-100',
+    hex: '#fedede',
+  },
+  {
+    name: 'Red 300',
+    code: 'red-300',
+    hex: '#faa0a0',
+  },
+  {
+    name: 'Red 500',
+    code: 'red-500',
+    hex: '#e55454',
+  },
+  {
+    name: 'Red 700',
+    code: 'red-700',
+    hex: '#c64848',
+  },
+  {
+    name: 'Red 900',
+    code: 'red-900',
+    hex: '#4b2525',
+  },
+  {
+    name: 'Pink 100',
+    code: 'pink-100',
+    hex: '#ffebf1',
+  },
+  {
+    name: 'Pink 300',
+    code: 'pink-300',
+    hex: '#ffb1cb',
+  },
+  {
+    name: 'Pink 500',
+    code: 'pink-500',
+    hex: '#f96092',
+  },
+  {
+    name: 'Pink 700',
+    code: 'pink-700',
+    hex: '#c0305f',
+  },
+  {
+    name: 'Pink 900',
+    code: 'pink-900',
+    hex: '#700024',
+  },
+  {
+    name: 'Grey 100',
+    code: 'grey-100',
+    hex: '#fafaff',
+  },
+  {
+    name: 'Grey 200',
+    code: 'grey-200',
+    hex: '#f5f5fa',
+  },
+  {
+    name: 'Grey 300',
+    code: 'grey-300',
+    hex: '#d2d2d8',
+  },
+  {
+    name: 'Grey 500',
+    code: 'grey-500',
+    hex: '#b4b4ba',
+  },
+  {
+    name: 'Grey 600',
+    code: 'grey-600',
+    hex: '#696970',
+  },
+  {
+    name: 'Grey 700',
+    code: 'grey-700',
+    hex: '#4c4c53',
+  },
+  {
+    name: 'Grey 900',
+    code: 'grey-900',
+    hex: '#26262e',
+  },
+  {
+    name: 'Green 100',
+    code: 'green-100',
+    hex: '#e4ffe6',
+  },
+  {
+    name: 'Green 300',
+    code: 'green-300',
+    hex: '#c4f5c8',
+  },
+  {
+    name: 'Green 500',
+    code: 'green-500',
+    hex: '#84de8a',
+  },
+  {
+    name: 'Green 700',
+    code: 'green-700',
+    hex: '#5b985f',
+  },
+  {
+    name: 'Green 900',
+    code: 'green-900',
+    hex: '#354a2d',
+  },
+  {
+    name: 'Spearmint 100',
+    code: 'spearmint-100',
+    hex: '#e3fff2',
+  },
+  {
+    name: 'Spearmint 300',
+    code: 'spearmint-300',
+    hex: '#aaeacc',
+  },
+  {
+    name: 'Spearmint 500',
+    code: 'spearmint-500',
+    hex: '#85dcb4',
+  },
+  {
+    name: 'Spearmint 700',
+    code: 'spearmint-700',
+    hex: '#599278',
+  },
+  {
+    name: 'Spearmint 900',
+    code: 'spearmint-900',
+    hex: '#2b4639',
+  },
+  {
+    name: 'Yellow 100',
+    code: 'yellow-100',
+    hex: '#fff8e3',
+  },
+  {
+    name: 'Yellow 300',
+    code: 'yellow-300',
+    hex: '#fae3a5',
+  },
+  {
+    name: 'Yellow 500',
+    code: 'yellow-500',
+    hex: '#f7ce5c',
+  },
+  {
+    name: 'Yellow 700',
+    code: 'yellow-700',
+    hex: '#cc9e21',
+  },
+  {
+    name: 'Yellow 900',
+    code: 'yellow-900',
+    hex: '#4a3d10',
+  },
+];
+
+export const Colors = () => (
+  <table style={{ width: '100%' }}>
+    <tr
+      style={{
+        height: '40px',
+        lineHeight: '40px',
+        textAlign: 'left',
+      }}
+    >
+      <th style={{ fontWeight: 'bold' }}>Color</th>
+      <th style={{ fontWeight: 'bold' }}>Name</th>
+      <th style={{ fontWeight: 'bold' }}>Sass</th>
+      <th style={{ fontWeight: 'bold' }}>Text class</th>
+      <th style={{ fontWeight: 'bold' }}>Hex</th>
+    </tr>
+    {colors.map((color) => (
+      <tr style={{ height: '40px', lineHeight: '40px' }}>
+        <td>
+          <div
+            style={{
+              width: '24px',
+              height: '24px',
+              borderRadius: '4px',
+              backgroundColor: color.hex,
+            }}
+          />
+        </td>
+        <td>{color.name}</td>
+        <td>{`$ds-${color.code}`}</td>
+        <td>{`tc-${color.code}`}</td>
+        <td>{color.hex}</td>
+      </tr>
+    ))}
+  </table>
+);

package/src/lib/scss/public/font/_index.scss

@@ -0,0 +1,2 @@
+@import 'overrides';
+@import 'default';

package/src/lib/scss/public/font/default.scss

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
+
+$font-family: 'Lato', sans-serif !default;

package/src/lib/scss/public/font-weight.scss

@@ -0,0 +1,9 @@
+$p-font-weight-bold: 700;
+$p-font-weight-normal: 400;
+
+.fw-normal {
+  font-weight: $p-font-weight-normal !important;
+}
+.fw-bold {
+  font-weight: $p-font-weight-bold !important;
+}

package/src/lib/scss/public/font-weight.stories.mdx

@@ -0,0 +1,32 @@
+<Meta title="CSS/Variables/Font weight" />
+
+# Font weight
+
+For enhanced reusability we’re providing you with a set of font weight. Please don't hardcode any font weight value and use this instead.
+
+## Usage
+
+### Class name
+
+| Class        | Output             |
+| ------------ | ------------------ |
+| `.fw-normal` | `font-weight: 400` |
+| `.fw-bold`   | `font-weight: 700` |
+
+### Import in code
+
+```sass
+// demo.scss
+@import '@popsure/dirty-swan/dist/font-weight';
+
+.element {
+  font-weight: $p-font-weight-bold;
+}
+```
+
+## Table
+
+| Variable                | Value | Name   |
+| ----------------------- | ----- | ------ |
+| `$p-font-weight-normal` | 400   | normal |
+| `$p-font-weight-bold`   | 700   | bold   |

package/src/lib/scss/public/grid.scss

@@ -0,0 +1,21 @@
+$p-desktop-breakpoint: 64rem;
+$p-tablet-breakpoint: 45rem;
+$p-mobile-breakpoint: 34rem;
+
+@mixin p-size-mobile {
+  @media (max-width: $p-mobile-breakpoint) {
+    @content;
+  }
+}
+
+@mixin p-size-tablet {
+  @media (min-width: $p-mobile-breakpoint) {
+    @content;
+  }
+}
+
+@mixin p-size-desktop {
+  @media (min-width: $p-desktop-breakpoint) {
+    @content;
+  }
+}

package/src/lib/scss/public/grid.stories.mdx

@@ -0,0 +1,41 @@
+<Meta title="CSS/Variables/Sizes" />
+
+# Sizes
+
+Dirty swan provide you with a set of sizes and utilities for building responsive layout.
+
+## Variable & value
+
+| Variable                | Value |
+| ----------------------- | ----- |
+| `$p-desktop-breakpoint` | 64rem |
+| `$p-tablet-breakpoint`  | 45rem |
+| `$p-mobile-breakpoint`  | 34rem |
+
+## Helper
+
+You can use the following helper within your sass code.
+`p-size-mobile`, `p-size-tablet` and `p-size-desktop`
+
+| Help             | Range   |
+| ---------------- | ------- |
+| `p-size-mobile`  | < 34rem |
+| `p-size-tablet`  | > 34rem |
+| `p-size-desktop` | > 64rem |
+
+### Example
+
+```sass
+// demo.scss
+@import '@popsure/dirty-swan/dist/grid';
+
+
+.reponsive-element {
+  height: 80px;
+
+  @include p-size-mobile {
+    // If the screen width is < 34rm, the following gets applied
+    height: 40px;
+  }
+}
+```

package/src/lib/scss/third-party/_google_places.scss

@@ -0,0 +1,62 @@
+@use "../../scss/public/font-weight.scss" as *;
+
+.pac-item {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  cursor: pointer;
+
+  border-top: none;
+
+  font-family: Lato, sans-serif;
+
+  &:hover {
+    background-color: var(--ds-grey-200);
+  }
+}
+
+.pac-item-selected {
+  background-color: var(--ds-primary-100);
+}
+
+.pac-item {
+  padding-left: 16px;
+}
+
+.pac-matched,
+.pac-item-query,
+.pac-item {
+  font-size: 16px;
+  //   font-weight: $p-font-weight-normal;
+}
+
+.pac-icon {
+  display: none;
+}
+
+@keyframes appear-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.pac-container {
+  background-color: white;
+  border: 1px solid var(--ds-grey-300);
+  box-shadow: none;
+  border-radius: 8px;
+  margin-top: 8px;
+  animation-name: appear-in;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+
+  &::after {
+    content: ('');
+    display: none;
+  }
+}

package/src/lib/scss/third-party/_index.scss

@@ -0,0 +1 @@
+@import 'google_places';

package/src/lib/scss/utils/_index.scss

@@ -0,0 +1,3 @@
+@function url-encoded-color($color) {
+  @return '%23' + str-slice('#{$color}', 2, -1);
+}

package/src/lib/util/calendarDate/index.test.ts

@@ -0,0 +1,32 @@
+import { CalendarDate } from '@popsure/public-models';
+import { calendarDateToISODate, isoStringtoCalendarDate } from '.';
+
+describe('Calendar date to ISO date', () => {
+  it('Should add trailing 0s', () => {
+    const expectedOutput = '2019-04-09';
+    const input: CalendarDate = { day: 9, month: 4, year: 2019 };
+
+    expect(calendarDateToISODate(input)).toEqual(expectedOutput);
+  });
+
+  it('Should format date correctly', () => {
+    const expectedOutput = '2019-10-29';
+    const input: CalendarDate = { day: 29, month: 10, year: 2019 };
+
+    expect(calendarDateToISODate(input)).toEqual(expectedOutput);
+  });
+});
+
+describe('ISO string to Calendar date', () => {
+  it('Should convert valid ISO 8601 string to CalendarDate', () => {
+    expect(isoStringtoCalendarDate('1990-03-24')).toEqual({
+      year: 1990,
+      month: 3,
+      day: 24,
+    });
+  });
+
+  test('Converting invalid ISO 8601 string to CalendarDate should be undefined', () => {
+    expect(isoStringtoCalendarDate('1990-24-03')).toBeUndefined();
+  });
+});

package/src/lib/util/calendarDate/index.ts

@@ -0,0 +1,30 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { CalendarDate } from '@popsure/public-models';
+
+import { zerofill } from '../../util/zeroFill';
+
+dayjs.extend(customParseFormat);
+
+export function calendarDateToISODate(calendarDate: CalendarDate) {
+  return `${calendarDate.year}-${zerofill(calendarDate.month)}-${zerofill(
+    calendarDate.day
+  )}`;
+}
+
+export function isoStringtoCalendarDate(
+  input: string
+): CalendarDate | undefined {
+  const date = dayjs(input, 'YYYY-MM-DD');
+  const dateValidity = dayjs(input, 'YYYY-MM-DD', true).isValid();
+
+  if (dateValidity === false) {
+    return;
+  }
+
+  const year = date.year();
+  const month = date.get('month');
+  const day = date.date();
+
+  return { year, month: month + 1, day };
+}

package/src/lib/util/zeroFill.test.ts

@@ -0,0 +1,15 @@
+import { zerofill } from './zeroFill';
+
+describe('Zero fill number', () => {
+  it('Should add one zero in front of a number', () => {
+    expect(zerofill(1)).toEqual('01');
+  });
+
+  it('Shouldn’t add any in front of a number', () => {
+    expect(zerofill(10)).toEqual('10');
+  });
+
+  it('Fill 3 0s for a 4 sized number', () => {
+    expect(zerofill(1, 4)).toEqual('0001');
+  });
+});

package/src/lib/util/zeroFill.ts

@@ -0,0 +1,7 @@
+export function zerofill(input: number, size: number = 2) {
+  let toReturn = String(input);
+  while (toReturn.length < size) {
+    toReturn = '0' + toReturn;
+  }
+  return toReturn;
+}

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/setupTests.js

@@ -0,0 +1,8 @@
+window.google = {
+  maps: {
+    places: {
+      Autocomplete: class {},
+    },
+    StyledMapType: class {},
+  },
+};

package/src/theme.stories.mdx

@@ -0,0 +1,54 @@
+<Meta title="Theme" />
+
+# Theme configuration
+
+Customizing the default theme for your project.
+
+![Dirty swan with a theme applied to it](/theme/config.png)
+
+---
+
+Dirty Swan ship with a way to configure colors, fonts… so that you can tweak it according to your needs.
+You can use the CLI in order to customize dirty swan theme. To get strated simply run `yarn dirty-swan init` and you'll get a default configuration file.
+
+```shell
+$> yarn dirty-swan init
+🦢 Creating configuration file at: ./dirty-swan.config.json
+🦢 Successfully created configuration file at: ./dirty-swan.config.json
+✨  Done in 0.48s.
+```
+
+The configuration file look like so:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "primary": {
+        "100": "",
+        "300": "",
+        "500": "",
+        "700": "",
+        "900": ""
+      }
+    },
+    "font": {
+      "sans": {
+        "family": [],
+        "url": ""
+      }
+    }
+  }
+}
+```
+
+if you want to apply that theme you'll need to run `yarn dirty-swan theme [path to your configuration file]`.
+
+```shell
+$> yarn dirty-swan theme ./dirty-swan.config.json
+🦢 Reading configuration file theme/hallesche.json
+🦢 Successfully updated with new theme 💫
+✨  Done in 0.74s.
+```
+
+Et voilà! You can now run your project as usual and dirty swan should have updated its style.