@popsure/dirty-swan 20.0.11 → 27.0.2

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

@@ -0,0 +1,172 @@
+import {
+  StaticWidthClasses,
+  FuildWidthClasses,
+  MaxWidthClasses,
+  MinWidthClasses,
+} from './demo';
+
+<Meta title="CSS/Base/Width and height" />
+
+# Width and height
+
+Dirty swan provides atomic sizing classes for widths and heights.
+
+## Static widths
+
+### Static widths classes
+
+| Class   | Output        |
+| ------- | ------------- |
+| `.ws1`  | width: 60px;  |
+| `.ws2`  | width: 136px; |
+| `.ws3`  | width: 212px; |
+| `.ws4`  | width: 288px; |
+| `.ws5`  | width: 364px; |
+| `.ws6`  | width: 440px; |
+| `.ws7`  | width: 516px; |
+| `.ws8`  | width: 592px; |
+| `.ws9`  | width: 668px; |
+| `.ws10` | width: 744px; |
+| `.ws11` | width: 820px; |
+| `.ws12` | width: 896px; |
+
+### Static width examples
+
+```html
+<div class="ws1">…</div>
+<div class="ws2">…</div>
+<div class="ws3">…</div>
+<div class="ws4">…</div>
+<div class="ws5">…</div>
+<div class="ws6">…</div>
+<div class="ws7">…</div>
+<div class="ws8">…</div>
+<div class="ws9">…</div>
+<div class="ws10">…</div>
+<div class="ws11">…</div>
+<div class="ws12">…</div>
+```
+
+<Preview>
+  <StaticWidthClasses />
+</Preview>
+
+## Min widths
+
+### Min widths classes
+
+| Class    | Output            |
+| -------- | ----------------- |
+| `.wmn1`  | min-width: 60px;  |
+| `.wmn2`  | min-width: 136px; |
+| `.wmn3`  | min-width: 212px; |
+| `.wmn4`  | min-width: 288px; |
+| `.wmn5`  | min-width: 364px; |
+| `.wmn6`  | min-width: 440px; |
+| `.wmn7`  | min-width: 516px; |
+| `.wmn8`  | min-width: 592px; |
+| `.wmn9`  | min-width: 668px; |
+| `.wmn10` | min-width: 744px; |
+| `.wmn11` | min-width: 820px; |
+| `.wmn12` | min-width: 896px; |
+
+### Min width examples
+
+```html
+<div class="wmn1">…</div>
+<div class="wmn2">…</div>
+<div class="wmn3">…</div>
+<div class="wmn4">…</div>
+<div class="wmn5">…</div>
+<div class="wmn6">…</div>
+<div class="wmn7">…</div>
+<div class="wmn8">…</div>
+<div class="wmn9">…</div>
+<div class="wmn10">…</div>
+<div class="wmn11">…</div>
+<div class="wmn12">…</div>
+```
+
+<Preview>
+  <MinWidthClasses />
+</Preview>
+
+## Max widths
+
+### Max widths classes
+
+| Class    | Output            |
+| -------- | ----------------- |
+| `.wmx1`  | min-width: 60px;  |
+| `.wmx2`  | min-width: 136px; |
+| `.wmx3`  | min-width: 212px; |
+| `.wmx4`  | min-width: 288px; |
+| `.wmx5`  | min-width: 364px; |
+| `.wmx6`  | min-width: 440px; |
+| `.wmx7`  | min-width: 516px; |
+| `.wmx8`  | min-width: 592px; |
+| `.wmx9`  | min-width: 668px; |
+| `.wmx10` | min-width: 744px; |
+| `.wmx11` | min-width: 820px; |
+| `.wmx12` | min-width: 896px; |
+
+### Max width examples
+
+```html
+<div class="wmx1">…</div>
+<div class="wmx2">…</div>
+<div class="wmx3">…</div>
+<div class="wmx4">…</div>
+<div class="wmx5">…</div>
+<div class="wmx6">…</div>
+<div class="wmx7">…</div>
+<div class="wmx8">…</div>
+<div class="wmx9">…</div>
+<div class="wmx10">…</div>
+<div class="wmx11">…</div>
+<div class="wmx12">…</div>
+```
+
+<Preview>
+  <MaxWidthClasses />
+</Preview>
+
+## Fuild width widths
+
+### Fuild widths classes
+
+| Class     | Output        |
+| --------- | ------------- |
+| `.w-auto` | width: auto;  |
+| `.w0`     | width: 0;     |
+| `.w10`    | width: 10%;   |
+| `.w20`    | width: 20%;   |
+| `.w30`    | width: 30%;   |
+| `.w40`    | width: 40%;   |
+| `.w50`    | width: 50%;   |
+| `.w60`    | width: 60%;   |
+| `.w70`    | width: 70%;   |
+| `.w80`    | width: 80%;   |
+| `.w90`    | width: 90%;   |
+| `.w100`   | width: 1000%; |
+
+### Fuild width examples
+
+```html
+<div class="w-auto">…</div>
+<div class="w0">…</div>
+<div class="w10">…</div>
+<div class="w20">…</div>
+<div class="w30">…</div>
+<div class="w40">…</div>
+<div class="w50">…</div>
+<div class="w60">…</div>
+<div class="w70">…</div>
+<div class="w80">…</div>
+<div class="w90">…</div>
+<div class="w100">…</div>
+```
+
+<Preview>
+  <FuildWidthClasses />
+</Preview>

package/src/lib/scss/private/components/_badge.scss

@@ -0,0 +1,41 @@
+@use '../../public/colors' as *;
+
+.p-badge {
+  display: inline-block;
+
+  padding: 0 16px;
+
+  font-size: 12px;
+  color: $ds-grey-900;
+  text-align: center;
+
+  height: 18px;
+  line-height: 18px;
+
+  border-radius: 9px;
+
+  &--active {
+    @extend .p-badge;
+    background-color: $ds-green-300;
+  }
+
+  &--pending {
+    @extend .p-badge;
+    background-color: $ds-yellow-300;
+  }
+
+  &--inactive {
+    @extend .p-badge;
+    background-color: $ds-grey-300;
+  }
+
+  &--danger {
+    @extend .p-badge;
+    background-color: $ds-red-300;
+  }
+
+  &--info {
+    @extend .p-badge;
+    background-color: $ds-blue-300;
+  }
+}

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

@@ -0,0 +1,193 @@
+@use '../../public/grid' as *;
+@use '../../public/colors' as *;
+@use '../../public/font-weight' as *;
+
+@keyframes spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.p-btn {
+  display: inline-block;
+
+  position: relative;
+  cursor: pointer;
+
+  height: 48px;
+  padding: 12px 24px;
+
+  line-height: 24px;
+
+  font-size: 16px;
+  font-family: inherit;
+  letter-spacing: 0.5px;
+  text-decoration: none;
+  text-align: center;
+  font-weight: $p-font-weight-bold;
+
+  border-radius: 8px;
+  border: none;
+
+  transition: 0.3s opacity, 0.3s background-color;
+
+  &[disabled] {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  &--primary {
+    @extend .p-btn;
+    background-color: $ds-primary-500;
+    color: white;
+
+    &:hover {
+      background-color: $ds-primary-700;
+
+      @include p-size-mobile {
+        background-color: $ds-primary-500;
+      }
+    }
+
+    &[disabled] {
+      background-color: $ds-primary-300;
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($color: $ds-primary-500, $alpha: 0.5);
+    }
+  }
+
+  &--secondary {
+    @extend .p-btn;
+    background-color: transparent;
+    color: $ds-primary-500;
+
+    &:hover {
+      background-color: $ds-primary-100;
+
+      @include p-size-mobile {
+        background-color: transparent;
+      }
+    }
+
+    &[disabled] {
+      color: $ds-primary-700;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($color: $ds-primary-500, $alpha: 0.5);
+    }
+  }
+
+  &--danger {
+    @extend .p-btn;
+    background-color: $ds-red-500;
+    color: white;
+
+    &:hover {
+      background-color: $ds-red-700;
+
+      @include p-size-mobile {
+        background-color: $ds-red-500;
+      }
+    }
+
+    &[disabled] {
+      background-color: $ds-red-300;
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($color: $ds-red-500, $alpha: 0.5);
+    }
+  }
+
+  &--loading {
+    color: transparent;
+    cursor: default;
+
+    opacity: 1 !important;
+
+    &::before {
+      content: '';
+
+      $size: 26px;
+
+      position: absolute;
+
+      width: $size;
+      height: $size;
+
+      left: calc(50% - 13px);
+      top: calc(50% - 13px);
+
+      border-radius: 50%;
+      border: 2px solid rgba($color: #ffffff, $alpha: 0.5);
+      border-left-color: white;
+
+      animation: spinner-rotate 0.9s infinite;
+    }
+  }
+
+  &--outline {
+    @extend .p-btn;
+
+    color: $ds-primary-500;
+    background-color: transparent;
+
+    border: 1px dashed $ds-primary-300;
+
+    &:hover {
+      color: $ds-primary-700;
+      border-color: $ds-primary-500;
+    }
+
+    &[disabled] {
+      color: $ds-primary-500;
+      border-color: $ds-primary-300;
+      opacity: 0.5;
+    }
+
+    &:focus {
+      color: $ds-primary-700;
+      border-color: $ds-primary-700;
+    }
+
+    &-grey {
+      @extend .p-btn;
+
+      color: $ds-grey-500;
+      background-color: transparent;
+
+      border: 1px dashed $ds-grey-300;
+
+      &:hover {
+        color: $ds-grey-600;
+        border-color: $ds-grey-500;
+      }
+
+      &[disabled] {
+        color: $ds-grey-500;
+        border-color: $ds-grey-300;
+        opacity: 0.5;
+      }
+
+      &:focus {
+        color: $ds-grey-600;
+        border-color: $ds-grey-600;
+      }
+    }
+  }
+}

package/src/lib/scss/private/components/_cards.scss

@@ -0,0 +1,32 @@
+@use '../../public/colors' as *;
+
+.ds-card {
+  background-color: white;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  box-shadow: 0px 2px 28px rgba(97, 96, 162, 0.1);
+
+  transition: border-color 0.3s;
+
+  &--actionable {
+    cursor: pointer;
+    @extend .ds-card;
+    &:hover {
+      border: 2px solid $ds-primary-300;
+    }
+
+    &:focus {
+      outline: none;
+      border: 2px solid $ds-primary-500;
+    }
+  }
+
+  &--muted {
+    @extend .ds-card;
+    opacity: 0.25;
+  }
+
+  &--no-dropshadow {
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,6 @@
+@forward "buttons";
+@forward "input";
+@forward "notices";
+@forward "badge";
+@forward "spinner";
+@forward "cards";

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

@@ -0,0 +1,238 @@
+@use '../../public/colors' as *;
+@use '../../utils/' as util;
+
+.p-input {
+  appearance: none;
+
+  display: block;
+
+  padding-left: 16px;
+  font-size: 16px;
+  line-height: 24px;
+
+  height: 48px;
+  width: 100%;
+
+  border-radius: 8px;
+  border: 1px solid $ds-grey-300;
+  background-color: white;
+
+  color: $ds-grey-900;
+
+  transition: box-shadow 0.3s;
+
+  &::placeholder {
+    color: $ds-grey-500;
+  }
+
+  &:disabled {
+    background-color: $ds-grey-300;
+    border-color: $ds-grey-500;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $ds-primary-500;
+  }
+
+  &--error {
+    @extend .p-input;
+    border: 1px solid $ds-red-500;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px $ds-red-500;
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    appearance: none;
+  }
+}
+
+.p-radio,
+.p-checkbox {
+  cursor: pointer;
+
+  position: absolute;
+  height: 0;
+  width: 0;
+
+  opacity: 0;
+}
+
+.p-radio {
+  & + label {
+    &::before {
+      content: '';
+
+      cursor: pointer;
+      display: inline-flex;
+
+      margin-right: 16px;
+
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+      min-height: 16px;
+
+      border: 1px solid $ds-grey-300;
+      border-radius: 50%;
+
+      background-color: white;
+
+      transition: 0.3s background-color;
+    }
+  }
+}
+
+.p-radio:checked {
+  & + label::before {
+    border-color: $ds-primary-500;
+    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>');
+  }
+}
+
+.p-checkbox {
+  & + label {
+    &::before {
+      content: '';
+
+      cursor: pointer;
+      display: inline-flex;
+
+      margin-right: 16px;
+
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+      min-height: 16px;
+
+      border: 1px solid $ds-grey-300;
+      border-radius: 4px;
+
+      background-color: white;
+
+      transition: 0.3s background-color;
+    }
+  }
+}
+
+.p-checkbox:focus,
+.p-radio:focus {
+  & + label {
+    &::before {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($color: $ds-primary-500, $alpha: 0.5);
+    }
+  }
+}
+
+.p-checkbox:checked {
+  & + label::before {
+    background-image: url('./assets/checkmark.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    background-color: $ds-primary-500;
+
+    border-color: $ds-primary-500;
+  }
+}
+
+.p-label {
+  cursor: pointer;
+
+  display: flex;
+  align-items: baseline;
+
+  min-height: 48px;
+  line-height: 24px;
+  color: $ds-grey-900;
+
+  &--bordered {
+    align-items: center;
+
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+
+    border-radius: 8px;
+    border: 1px solid $ds-grey-300;
+    background-color: white;
+
+    &:hover {
+      border-color: $ds-primary-500;
+    }
+
+    transition: 0.3s border-color, 0.3s background-color;
+  }
+}
+
+input:checked[type='radio'] + .p-label--bordered,
+input:checked[type='checkbox'] + .p-label--bordered {
+  border-color: $ds-primary-500;
+  background-color: $ds-primary-100;
+}
+
+.p-label-container {
+  position: relative;
+
+  input {
+    position: absolute;
+
+    top: 50%;
+    transform: translateY(-60%);
+
+    left: 16px;
+  }
+}
+
+.p-select {
+  cursor: pointer;
+
+  appearance: none;
+
+  height: 48px;
+
+  border-radius: 8px;
+  border: 1px solid $ds-grey-300;
+  background-color: white;
+
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 24px;
+  color: $ds-grey-900;
+
+  padding-left: 16px;
+  padding-right: 32px;
+
+  background-image: url('./assets/icon-form-dropdown.svg');
+  background-repeat: no-repeat;
+  background-position: right center;
+
+  transition: box-shadow 0.3s;
+
+  &:hover {
+    color: $ds-grey-700 !important;
+    border-color: $ds-primary-500;
+  }
+
+  &:invalid {
+    color: $ds-grey-500;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $ds-primary-500;
+  }
+
+  & option {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+}

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

@@ -0,0 +1,39 @@
+@use '../../public/colors' as *;
+
+.p-notice {
+  padding: 8px 16px;
+  border: 1px solid;
+  border-radius: 8px;
+
+  &--primary {
+    @extend .p-notice;
+    background-color: $ds-purple-100;
+    border-color: $ds-purple-500;
+    color: $ds-grey-900;
+  }
+
+  &--danger {
+    @extend .p-notice;
+    background-color: $ds-red-100;
+    border-color: $ds-red-500;
+    color: $ds-grey-900;
+  }
+
+  &--warning {
+    @extend .p-notice;
+    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;
+  }
+}