@popsure/dirty-swan 20.0.11 → 27.0.2

package/dist/lib/scss/private/base/_spacing.scss

@@ -1,24 +1,63 @@
+@use 'grid';
+
 @for $i from 0 through 12 {
-  .mt#{$i * 8} {
-    margin-top: $i * 8px;
+  .m#{$i * 8} {
+    margin: $i * 8px;
   }
-}
 
-@for $i from 0 through 12 {
-  .mb#{$i * 8} {
-    margin-bottom: $i * 8px;
+  .p#{$i * 8} {
+    padding: $i * 8px;
   }
 }
 
+// Spacing left & right
 @for $i from 0 through 12 {
-  .mr#{$i * 8} {
+  .mx#{$i * 8} {
+    margin-left: $i * 8px;
     margin-right: $i * 8px;
   }
+
+  .px#{$i * 8} {
+    padding-left: $i * 8px;
+    padding-right: $i * 8px;
+  }
 }
 
+// Spacing up & down
 @for $i from 0 through 12 {
-  .ml#{$i * 8} {
-    margin-left: $i * 8px;
+  .my#{$i * 8} {
+    margin-top: $i * 8px;
+    margin-bottom: $i * 8px;
+  }
+
+  .py#{$i * 8} {
+    padding-top: $i * 8px;
+    padding-bottom: $i * 8px;
+  }
+}
+
+// Spacing for each specific area
+$valid_areas: (
+  't': 'top',
+  'b': 'bottom',
+  'l': 'left',
+  'r': 'right',
+);
+
+@each $key, $area in $valid_areas {
+  @for $i from 0 through 12 {
+    .m#{$key}#{$i * 8} {
+      margin-#{$area}: $i * 8px;
+    }
+
+    .p#{$key}#{$i * 8} {
+      padding-#{$area}: $i * 8px;
+    }
+  }
+
+  // Auto value for margin
+  .m#{$key}-auto {
+    margin-#{$area}: auto;
   }
 }
 
@@ -26,18 +65,25 @@
   margin: auto;
 }
 
-.mt-auto {
-  margin-top: auto;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
-
-.mb-auto {
+.my-auto {
+  margin-top: auto;
   margin-bottom: auto;
 }
 
-.mr-auto {
-  margin-right: auto;
-}
+@for $i from 0 through 12 {
+  .gap#{$i * 8} {
+    gap: $i * 8px;
+  }
 
-.ml-auto {
-  margin-left: auto;
+  .c-gap#{$i * 8} {
+    column-gap: $i * 8px;
+  }
+
+  .r-gap#{$i * 8} {
+    row-gap: $i * 8px;
+  }
 }

package/dist/lib/scss/private/base/_typography.scss

@@ -95,10 +95,17 @@ body {
 .p-a {
   color: $ds-primary-500;
   text-decoration: none;
+
   &:hover,
   &:focus {
     color: $ds-primary-700;
   }
+
+  &:focus-visible {
+    outline: 2px solid $ds-grey-900;
+    border-radius: 2px;
+    outline-offset: 2px;
+  }
 }
 
 // Layout

package/dist/lib/scss/private/base/demo.tsx

@@ -11,6 +11,10 @@ export const Typography = () => (
     <h4 className="p-h4">The quick brown fox jumps over the lazy dog</h4>
     <p className="p-p">The quick brown fox jumps over the lazy dog</p>
     <p className="p-p--small">The quick brown fox jumps over the lazy dog</p>
+    <a href="#" className="p-a">
+      The quick brown fox jumps over the lazy dog
+    </a>
+    <p className="p-error">The quick brown fox jumps over the lazy dog</p>
   </>
 );
 

package/dist/lib/scss/private/base/flex/_flex.scss

@@ -0,0 +1,63 @@
+@use '../../../private/base/grid';
+
+/** Shared values across align and justify properties */
+$common-values: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+);
+
+$align-values: map-merge(
+  $common-values,
+  (
+    'stretch': stretch,
+    'baseline': baseline,
+  )
+);
+
+$jutify-values: map-merge(
+  $common-values,
+  (
+    'between': space-between,
+    'around': space-around,
+    'evenly': space-evenly,
+  )
+);
+
+// Align items
+@each $name, $value in $align-values {
+  .ai-#{$name} {
+    align-items: $value;
+  }
+}
+
+// Justify content
+@each $name, $value in $jutify-values {
+  .jc-#{$name} {
+    justify-content: $value;
+  }
+}
+
+.fd-row {
+  flex-direction: row !important;
+}
+
+.fd-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.fd-column {
+  flex-direction: column !important;
+}
+
+.fd-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.f-wrap {
+  flex-wrap: wrap;
+}
+
+.f-nowrap {
+  flex-wrap: nowrap;
+}

package/dist/lib/scss/private/base/flex/style.module.scss

@@ -0,0 +1,24 @@
+.container {
+  margin-bottom: 24px;
+  background-color: #f8f8f8 !important;
+  border: 1px solid #d2d2d7;
+  border-radius: 8px;
+}
+
+.ai-container {
+  height: 200px;
+}
+
+.item {
+  margin: 8px !important;
+  background-color: white !important;
+  border: 1px solid #d2d2d7;
+}
+
+.ai-item-2 {
+  min-height: 100px;
+}
+
+.ai-item-3 {
+  min-height: 80px;
+}

package/dist/lib/scss/private/base/style.module.scss

@@ -40,3 +40,13 @@
     }
   }
 }
+
+.rectangle {
+  width: 100px;
+  height: 50px;
+}
+
+.square {
+  width: 100px;
+  height: 100px;
+}

package/dist/lib/scss/private/components/_buttons.scss

@@ -12,18 +12,18 @@
 }
 
 .p-btn {
-  position: relative;
-
   display: inline-block;
 
+  position: relative;
   cursor: pointer;
 
   height: 48px;
-  padding: 0 16px;
+  padding: 12px 24px;
+
+  line-height: 24px;
 
   font-size: 16px;
   font-family: inherit;
-  line-height: 48px;
   letter-spacing: 0.5px;
   text-decoration: none;
   text-align: center;

package/dist/lib/scss/private/components/_input.scss

@@ -38,6 +38,11 @@
   &--error {
     @extend .p-input;
     border: 1px solid $ds-red-500;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px $ds-red-500;
+    }
   }
 
   input {
@@ -89,10 +94,7 @@
 .p-radio:checked {
   & + label::before {
     border-color: $ds-primary-500;
-
-    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="#{util.url-encoded-color($ds-primary-500)}" /></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
+    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" stroke="white" stroke-width="4" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="50%" fill="#{util.url-encoded-color($ds-primary-500)}"/></svg>');
   }
 }
 

package/dist/lib/scss/private/components/_notices.scss

@@ -5,7 +5,7 @@
   border: 1px solid;
   border-radius: 8px;
 
-  &--info {
+  &--primary {
     @extend .p-notice;
     background-color: $ds-purple-100;
     border-color: $ds-purple-500;
@@ -24,4 +24,16 @@
     background-color: $ds-yellow-100;
     border-color: $ds-yellow-500;
   }
+
+  &--success {
+    @extend .p-notice;
+    background-color: $ds-green-100;
+    border-color: $ds-green-500;
+  }
+
+  &--info {
+    @extend .p-notice;
+    background-color: $ds-blue-100;
+    border-color: $ds-blue-500;
+  }
 }

package/dist/lib/scss/private/components/assets/checkmark.svg

@@ -1,3 +1,3 @@
 <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.6667 1.5L4.25 7.91667L1.33334 5" stroke="#F4F4F9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6667 1.5L4.25 7.91667L1.33334 5" stroke="#F4F4F9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>

package/dist/lib/scss/private/components/assets/icon-form-dropdown.svg

@@ -1,3 +1,3 @@
 <svg width="32" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9L12 15L18 9" stroke="#B4B4BA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9L12 15L18 9" stroke="#B4B4BA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>

package/dist/lib/scss/public/colors/default.scss

@@ -21,12 +21,24 @@ $ds-blue-500: #8bb4ea;
 $ds-blue-700: #5f7ba0;
 $ds-blue-900: #2d394a;
 
+$ds-glacier-100: #e0f7fe;
+$ds-glacier-300: #aeddec;
+$ds-glacier-500: #8bcbdf;
+$ds-glacier-700: #5d8896;
+$ds-glacier-900: #2d4148;
+
 $ds-red-100: #fedede;
 $ds-red-300: #faa0a0;
 $ds-red-500: #e55454;
 $ds-red-700: #c64848;
 $ds-red-900: #4b2525;
 
+$ds-pink-100: #ffebf1;
+$ds-pink-300: #ffb1cb;
+$ds-pink-500: #f96092;
+$ds-pink-700: #c0305f;
+$ds-pink-900: #700024;
+
 $ds-grey-100: #fafaff;
 $ds-grey-200: #f5f5fa;
 $ds-grey-300: #d2d2d8;
@@ -41,13 +53,24 @@ $ds-green-500: #84de8a;
 $ds-green-700: #5b985f;
 $ds-green-900: #354a2d;
 
+$ds-spearmint-100: #e3fff2;
+$ds-spearmint-300: #aaeacc;
+$ds-spearmint-500: #85dcb4;
+$ds-spearmint-700: #599278;
+$ds-spearmint-900: #2b4639;
+
 $ds-yellow-100: #fff8e3;
 $ds-yellow-300: #fae3a5;
 $ds-yellow-500: #f7ce5c;
 $ds-yellow-700: #cc9e21;
 $ds-yellow-900: #4a3d10;
 
+$ds-white: #fff;
+$ds-transparent: transparent;
+
 $colors: (
+  'white': #fff,
+  'transparent': transparent,
   'blue-100': $ds-blue-100,
   'blue-300': $ds-blue-300,
   'blue-500': $ds-blue-500,
@@ -84,6 +107,21 @@ $colors: (
   'green-500': $ds-green-500,
   'green-700': $ds-green-700,
   'green-900': $ds-green-900,
+  'glacier-100': $ds-glacier-100,
+  'glacier-300': $ds-glacier-300,
+  'glacier-500': $ds-glacier-500,
+  'glacier-700': $ds-glacier-700,
+  'glacier-900': $ds-glacier-900,
+  'spearmint-100': $ds-spearmint-100,
+  'spearmint-300': $ds-spearmint-300,
+  'spearmint-500': $ds-spearmint-500,
+  'spearmint-700': $ds-spearmint-700,
+  'spearmint-900': $ds-spearmint-900,
+  'pink-100': $ds-pink-100,
+  'pink-300': $ds-pink-300,
+  'pink-500': $ds-pink-500,
+  'pink-700': $ds-pink-700,
+  'pink-900': $ds-pink-900,
   'yellow-100': $ds-yellow-100,
   'yellow-300': $ds-yellow-300,
   'yellow-500': $ds-yellow-500,

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

@@ -2,29 +2,14 @@ import React from 'react';
 
 const colors = [
   {
-    name: 'Blue 100',
-    code: 'blue-100',
-    hex: '#e5f0ff',
-  },
-  {
-    name: 'Blue 300',
-    code: 'blue-300',
-    hex: '#b0cdf3',
+    name: 'Transparent',
+    code: 'transparent',
+    hex: 'transparent',
   },
   {
-    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: 'White',
+    code: 'white',
+    hex: '#fff',
   },
   {
     name: 'Primary 25',
@@ -61,6 +46,56 @@ const colors = [
     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',
@@ -86,6 +121,31 @@ const colors = [
     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',
@@ -146,6 +206,31 @@ const colors = [
     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',
@@ -185,7 +270,8 @@ export const Colors = () => (
       <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' }}>Text color class</th>
+      <th style={{ fontWeight: 'bold' }}>BG color class</th>
       <th style={{ fontWeight: 'bold' }}>Hex</th>
     </tr>
     {colors.map((color) => (
@@ -203,6 +289,7 @@ export const Colors = () => (
         <td>{color.name}</td>
         <td>{`$ds-${color.code}`}</td>
         <td>{`tc-${color.code}`}</td>
+        <td>{`bg-${color.code}`}</td>
         <td>{color.hex}</td>
       </tr>
     ))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "20.0.11",
+  "version": "27.0.2",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -16,17 +16,19 @@
   "bin": "dist/bin/index.js",
   "files": [
     "dist",
+    "src",
     "Readme.md"
   ],
   "dependencies": {
-    "@popsure/public-models": "^0.0.14",
+    "@popsure/public-models": "^1.0.1",
     "classnames": "^2.3.1",
+    "dayjs": "^1.10.7",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.24.0",
     "react-autosuggest": "^10.1.0",
     "react-day-picker": "^7.4.10",
     "react-dropzone": "^11.3.2",
+    "react-scroll-sync": "^0.9.0",
     "sass": "^1.35.1",
     "signature_pad": "^3.0.0-beta.3"
   },
@@ -83,6 +85,7 @@
     "@types/react-autosuggest": "^10.1.4",
     "@types/react-day-picker": "^5.3.0",
     "@types/react-dom": "^17.0.8",
+    "@types/react-scroll-sync": "^0.8.2",
     "@types/sass": "^1.16.0",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",

package/src/App.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import './lib/scss/index.scss';
+
+import DateSelector from './lib/components/dateSelector';
+import Dropzone from './lib/components/dropzone';
+import SignaturePad from './lib/components/signaturePad';
+import { CardWithLeftIcon } from './lib/components/cards';
+import AutocompleteAddress from './lib/components/autocompleteAddress';
+
+function App() {
+  return (
+    <div>
+      <div className="p-btn p-btn--primary">Hello world</div>
+      <DateSelector
+        onChange={() => {}}
+        yearBoundaries={{ min: 1990, max: 2010 }}
+      />
+      <div className="p-notice p-notice--info d-flex">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
+        malesuada laoreet nulla, non maximus ante porta sit amet. Aenean non
+        ipsum nec quam gravida convallis vitae sit amet nisi.
+      </div>
+      <Dropzone
+        uploading={true}
+        progress={32}
+        onSelectedFile={() => {}}
+        // uploadedFileUrl="http://foo.com/my-file.png"
+      />
+      <div style={{ backgroundColor: 'white', padding: '24px' }}>
+        <SignaturePad
+          onChange={(v) => {
+            console.log(v);
+          }}
+        />
+      </div>
+      <div className="mt80"></div>
+      <CardWithLeftIcon
+        title="Lorem ipsum"
+        cardSize="small"
+        className="wmx6 mt8"
+        rightIcon="arrow"
+      >
+        Praesent euismod porta odio at tempus. Aenean urna massa, facilisis
+        malesuada eros at, rhoncus imperdiet nunc
+      </CardWithLeftIcon>
+    </div>
+  );
+}
+
+export default App;