@popsure/dirty-swan 0.26.10 → 0.26.13

package/src/lib/models/autoSuggestInput/index.ts

@@ -0,0 +1,4 @@
+export interface Option {
+  value: string;
+  leftIcon?: string;
+}

package/src/lib/models/download.ts

@@ -0,0 +1 @@
+export type DownloadStatus = 'INITIAL' | 'GENERATING' | 'COMPLETED' | 'FAILED';

package/src/lib/models/downloadRing/index.ts

@@ -0,0 +1,6 @@
+export type DownloadRingDownloadStatus =
+  | 'INITIAL'
+  | 'GENERATING'
+  | 'DOWNLOADING'
+  | 'COMPLETED'
+  | 'FAILED';

package/src/lib/scss/index.scss

@@ -0,0 +1,22 @@
+@forward 'private/reset';
+
+@forward 'private/base';
+@forward 'private/components';
+
+@import 'public/colors';
+
+@import 'third-party';
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  background-color: $ds-grey-200;
+}

package/src/lib/scss/private/_reset.scss

@@ -0,0 +1,149 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+input,
+select,
+button,
+textarea {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote {
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+q {
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

package/src/lib/scss/private/base/_border_radius.scss

@@ -0,0 +1,15 @@
+$border_sizes: 0, 2, 4, 8, 12, 16, 24;
+
+@each $size in $border_sizes {
+  .br#{$size} {
+    border-radius: $size * 1px;
+  }
+}
+
+.br-circle {
+  border-radius: 50%;
+}
+
+.br-pill {
+  border-radius: 999px;
+}

package/src/lib/scss/private/base/_colors.scss

@@ -0,0 +1,19 @@
+@use '../../public/colors' as *;
+
+@each $name, $hex in $colors {
+  .tc-#{$name} {
+    color: $hex !important;
+  }
+}
+
+@each $name, $hex in $colors {
+  .bg-#{$name} {
+    background-color: $hex !important;
+  }
+}
+
+:root {
+  @each $name, $hex in $colors {
+    --ds-#{$name}: #{$hex};
+  }
+}

package/src/lib/scss/private/base/_cursors.scss

@@ -0,0 +1,31 @@
+.c-auto {
+  cursor: auto;
+}
+
+.c-default {
+  cursor: default;
+}
+
+.c-pointer {
+  cursor: pointer;
+}
+
+.c-text {
+  cursor: text;
+}
+
+.c-wait {
+  cursor: wait;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-help {
+  cursor: help;
+}

package/src/lib/scss/private/base/_display.scss

@@ -0,0 +1,35 @@
+.d-block {
+  display: block !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-table {
+  display: table !important;
+}
+
+.d-table-cell {
+  display: table-cell !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-grid {
+  display: grid !important;
+}

package/src/lib/scss/private/base/_grid.scss

@@ -0,0 +1,60 @@
+@use '../../public/grid';
+
+.p-body {
+  @include grid.p-size-mobile {
+    margin: 0 1rem;
+  }
+
+  @include grid.p-size-tablet {
+    margin: 0 1.5rem;
+  }
+
+  @include grid.p-size-desktop {
+    width: 56rem;
+    margin: 0 auto;
+  }
+}
+
+.p-container {
+  max-width: 928px; // 896px + 2 * 16px padding
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Taken from https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a
+@function remove-dot-from-class($class) {
+  $class-string: quote($class);
+  @return if(
+    str-slice($class-string, 0, 1) == '.',
+    str-slice($class-string, 2, str-length($class-string)),
+    $class-string
+  );
+}
+
+@mixin add-responsive {
+  $selector: remove-dot-from-class(#{&});
+  @content;
+
+  // We need to use @at-root to prevent the following rules to be nested inside the selector
+  @at-root {
+    .sm\:#{$selector} {
+      @include grid.p-size-mobile {
+        @content;
+      }
+    }
+
+    .md\:#{$selector} {
+      @include grid.p-size-tablet {
+        @content;
+      }
+    }
+
+    .lg\:#{$selector} {
+      @include grid.p-size-desktop {
+        @content;
+      }
+    }
+  }
+}

package/src/lib/scss/private/base/_index.scss

@@ -0,0 +1,10 @@
+@forward "display";
+@forward "shadows";
+@forward "flex/flex";
+@forward "grid";
+@forward "spacing";
+@forward "width_and_height";
+@forward "colors";
+@forward "typography";
+@forward "cursors";
+@forward "border_radius";

package/src/lib/scss/private/base/_shadows.scss

@@ -0,0 +1,2 @@
+$popsure-box-shadow-raised: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+$popsure-box-shadow-hover: 0 2px 9px 0 rgba(0, 0, 0, 0.25);

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

@@ -0,0 +1,89 @@
+@use 'grid';
+
+@for $i from 0 through 12 {
+  .m#{$i * 8} {
+    margin: $i * 8px;
+  }
+
+  .p#{$i * 8} {
+    padding: $i * 8px;
+  }
+}
+
+// Spacing left & right
+@for $i from 0 through 12 {
+  .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 {
+  .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;
+  }
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+@for $i from 0 through 12 {
+  .gap#{$i * 8} {
+    gap: $i * 8px;
+  }
+
+  .c-gap#{$i * 8} {
+    column-gap: $i * 8px;
+  }
+
+  .r-gap#{$i * 8} {
+    row-gap: $i * 8px;
+  }
+}

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

@@ -0,0 +1,128 @@
+@use '../../public/colors' as *;
+@use '../../public/font-weight' as *;
+@use '../../public/grid' as *;
+@use '../../public/font' as *;
+
+@import url('https://fonts.googleapis.com/css?family=Merriweather:700&display=swap');
+
+body {
+  font-family: $font-family;
+}
+
+.p--serif {
+  font-family: 'Merriweather', serif;
+}
+
+.p-h1,
+.p-h2,
+.p-h3,
+.p-h4,
+.p-p {
+  color: $ds-grey-900;
+}
+
+.p-h1 {
+  font-weight: $p-font-weight-bold;
+  font-size: 32px;
+  line-height: 42px;
+  letter-spacing: 0.5px;
+
+  @include p-size-mobile {
+    font-size: 24px;
+    line-height: 34px;
+  }
+
+  &--xl {
+    @extend .p-h1;
+    font-size: 48px;
+    line-height: 58px;
+
+    @include p-size-mobile {
+      font-size: 32px;
+      line-height: 42px;
+    }
+  }
+}
+
+.p-h2 {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 34px;
+  letter-spacing: 0.5px;
+
+  @include p-size-mobile {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+
+.p-h3 {
+  font-weight: $p-font-weight-bold;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+
+  @include p-size-mobile {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+.p-h4 {
+  font-weight: $p-font-weight-bold;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+
+.p-p {
+  font-weight: $p-font-weight-normal;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+
+  &--small {
+    @extend .p-p;
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+
+.p-error {
+  color: $ds-red-500;
+}
+
+.p-a {
+  color: $ds-primary-500;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    color: $ds-primary-700;
+  }
+}
+
+// Layout
+.ta-left {
+  text-align: left;
+}
+
+.ta-center {
+  text-align: center;
+}
+
+.ta-right {
+  text-align: right;
+}
+
+.ta-justify {
+  text-align: justify;
+}
+
+// Font style
+.fs-italic {
+  font-style: italic;
+}
+
+.fs-normal {
+  font-style: normal;
+}

package/src/lib/scss/private/base/_width_and_height.scss

@@ -0,0 +1,25 @@
+@for $i from 1 through 12 {
+  .ws#{$i} {
+    width: $i * 60px + ($i - 1) * 16px;
+  }
+  .wmn#{$i} {
+    min-width: $i * 60px + ($i - 1) * 16px;
+  }
+  .wmx#{$i} {
+    max-width: $i * 60px + ($i - 1) * 16px;
+  }
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w0 {
+  width: 0;
+}
+
+@for $i from 1 through 10 {
+  .w#{$i * 10} {
+    width: $i * 10%;
+  }
+}

package/src/lib/scss/private/base/border_radius.stories.mdx

@@ -0,0 +1,43 @@
+<Meta title="CSS/Base/Border Radius" />
+
+import styles from './style.module.scss';
+
+# Border Radius
+
+Utilities for changing an element's border radius
+
+## Classes
+
+| Class        | Output                  |
+| ------------ | ----------------------- |
+| `.br0`       | `border-radius: 0;`     |
+| `.br2`       | `border-radius: 2px;`   |
+| `.br4`       | `border-radius: 4px;`   |
+| `.br8`       | `border-radius: 8px;`   |
+| `.br12`      | `border-radius: 12px;`  |
+| `.br16`      | `border-radius: 16px;`  |
+| `.br24`      | `border-radius: 24px;`  |
+|              |                         |
+| `.br-circle` | `border-radius: 50%;`   |
+| `.br-pill`   | `border-radius: 999px;` |
+
+export const BorderRadiusExample = () => {
+  const values = ['0', '2', '4', '8', '12', '16', '24', '-circle', '-pill'];
+  return (
+    <div className="d-flex gap16">
+      {values.map((value) =>
+        value === '-pill' ? (
+          <div
+            className={`d-flex ai-center jc-center bg-primary-100 br${value} ${styles.rectangle}`}
+          >{`br${value}`}</div>
+        ) : (
+          <div
+            className={`d-flex ai-center jc-center bg-primary-100 br${value} ${styles.square}`}
+          >{`br${value}`}</div>
+        )
+      )}
+    </div>
+  );
+};
+
+<BorderRadiusExample />

package/src/lib/scss/private/base/cursors.stories.mdx

@@ -0,0 +1,18 @@
+<Meta title="CSS/Base/Cursors" />
+
+# Cursors
+
+Utilities for controlling the cursor style when hovering over an element.
+
+## Classes
+
+| Class            | Output                 |
+| ---------------- | ---------------------- |
+| `.c-auto`        | `cursor: auto;`        |
+| `.c-default`     | `cursor: default;`     |
+| `.c-pointer`     | `cursor: pointer;`     |
+| `.c-text`        | `cursor: text;`        |
+| `.c-wait`        | `cursor: wait;`        |
+| `.c-move`        | `cursor: move;`        |
+| `.c-not-allowed` | `cursor: not-allowed;` |
+| `.c-help`        | `cursor: help;`        |