@popsure/dirty-swan 20.0.11 → 27.0.2

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

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import styles from './style.module.scss';
+
+export const Typography = () => (
+  <>
+    <h1 className="p-h1--xl">The quick brown fox jumps over the lazy dog</h1>
+    <h1 className="p-h1">The quick brown fox jumps over the lazy dog</h1>
+    <h2 className="p-h2">The quick brown fox jumps over the lazy dog</h2>
+    <h3 className="p-h3">The quick brown fox jumps over the lazy dog</h3>
+    <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>
+  </>
+);
+
+export const StaticWidthClasses = () => (
+  <div className={styles['width-container']}>
+    <div className="ws1">ws1</div>
+    <div className="ws2">ws2</div>
+    <div className="ws3">ws3</div>
+    <div className="ws4">ws4</div>
+    <div className="ws5">ws5</div>
+    <div className="ws6">ws6</div>
+    <div className="ws7">ws7</div>
+    <div className="ws8">ws8</div>
+    <div className="ws9">ws9</div>
+    <div className="ws10">ws10</div>
+    <div className="ws11">ws11</div>
+    <div className="ws12">ws12</div>
+  </div>
+);
+
+export const MinWidthClasses = () => (
+  <div className={styles['min-width-container']}>
+    <div>
+      <div className="wmn1">wmn1</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn2">wmn2</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn3">wmn3</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn4">wmn4</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn5">wmn5</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn6">wmn6</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn7">wmn7</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn8">wmn8</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn9">wmn9</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn10">wmn10</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn11">wmn11</div>
+      <div />
+    </div>
+    <div>
+      <div className="wmn12">wmn12</div>
+      <div />
+    </div>
+  </div>
+);
+
+export const MaxWidthClasses = () => (
+  <div className={styles['width-container']}>
+    <div className="wmx1">wmx1</div>
+    <div className="wmx2">wmx2</div>
+    <div className="wmx3">wmx3</div>
+    <div className="wmx4">wmx4</div>
+    <div className="wmx5">wmx5</div>
+    <div className="wmx6">wmx6</div>
+    <div className="wmx7">wmx7</div>
+    <div className="wmx8">wmx8</div>
+    <div className="wmx9">wmx9</div>
+    <div className="wmx10">wmx10</div>
+    <div className="wmx11">wmx11</div>
+    <div className="wmx12">wmx12</div>
+  </div>
+);
+
+export const FuildWidthClasses = () => (
+  <div className={styles['width-container']}>
+    <div className="w-auto">w-auto</div>
+    <div className="w0">w0</div>
+    <div className="w10">w10</div>
+    <div className="w20">w20</div>
+    <div className="w30">w30</div>
+    <div className="w40">w40</div>
+    <div className="w50">w50</div>
+    <div className="w60">w60</div>
+    <div className="w70">w70</div>
+    <div className="w80">w80</div>
+    <div className="w90">w90</div>
+    <div className="w100">w100</div>
+  </div>
+);

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

@@ -0,0 +1,19 @@
+<Meta title="CSS/Base/Display" />
+
+# Display
+
+Dirty swan provides atomic display classes that allow you to change an element’s display quickly.
+
+## Classes
+
+| Class             | Output                   |
+| ----------------- | ------------------------ |
+| `.d-block`        | `display: block;`        |
+| `.d-inline`       | `display: inline;`       |
+| `.d-inline-block` | `display: inline-block;` |
+| `.d-flex`         | `display: flex;`         |
+| `.d-inline-flex`  | `display: inline-flex;`  |
+| `.d-table`        | `display: table;`        |
+| `.d-table-cell`   | `display: table-cell;`   |
+| `.d-none`         | `display: none;`         |
+| `.d-grid`         | `display: grid;`         |

package/src/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/src/lib/scss/private/base/flex/flex.stories.mdx

@@ -0,0 +1,139 @@
+import style from './style.module.scss';
+
+<Meta title="CSS/Base/Flex" />
+
+# Flex
+
+Dirty swan provides the most common alignment options using Flexbox
+
+## Adding flex to a layout
+
+| Class            | Output                  |
+| ---------------- | ----------------------- |
+| `.d-flex`        | `display: flex;`        |
+| `.d-inline-flex` | `display: inline-flex;` |
+
+## Flex wrap
+
+| Class       | Output               |
+| ----------- | -------------------- |
+| `.f-wrap`   | `flex-wrap: wrap;`   |
+| `.f-nowrap` | `flex-wrap: nowrap;` |
+
+## Flex direction
+
+| Class                | Output                           |
+| -------------------- | -------------------------------- |
+| `.fd-row`            | `flex-direction: row`            |
+| `.fd-row-reverse`    | `flex-direction: row-reverse`    |
+| `.fd-column`         | `flex-direction:column `         |
+| `.fd-column-reverse` | `flex-direction: column-reverse` |
+
+export const RenderFdExample = () => {
+  const values = ['row', 'row-reverse', 'column', 'column-reverse'];
+  return (
+    <div>
+      {values.map((value) => (
+        <div key={value}>
+          <p className="p-p fw-bold">.fd-{value}</p>
+          <div
+            className={`d-flex bg-grey-500 w100 fd-${value} p16 ${style.container}`}
+          >
+            <div
+              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+            >
+              1
+            </div>
+            <div
+              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+            >
+              2
+            </div>
+            <div
+              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+            >
+              3
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+<RenderFdExample />
+
+## Align items
+
+| Class          | Output                    |
+| -------------- | ------------------------- |
+| `.ai-start`    | `align-items: flex-start` |
+| `.ai-end`      | `align-items: flex-end`   |
+| `.ai-center`   | `align-items: center`     |
+| `.ai-stretch`  | `align-items: stretch`    |
+| `.ai-baseline` | `align-items: baseline`   |
+
+export const RenderAiExample = () => {
+  const values = ['start', 'end', 'center', 'stretch', 'baseline'];
+  return (
+    <div>
+      {values.map((value) => (
+        <div key={value}>
+          <p className="p-p fw-bold">.ai-{value}</p>
+          <div
+            className={`d-flex bg-grey-500 w100 ai-${value} p16 ${style.container} ${style['ai-container']}`}
+          >
+            <div className={`bg-grey-100 p16  m8 ${style.item}`}>Item</div>
+            <div
+              className={`bg-grey-100 p16 m8 d-flex ai-center ${style.item} ${style['ai-item-2']}`}
+            >
+              Item
+            </div>
+            <div
+              className={`bg-grey-100 p16 m8 ${style.item} ${
+                style[['ai-item-3']]
+              }`}
+            >
+              Item
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+<RenderAiExample />
+
+## Justify content
+
+| Class         | Output                           |
+| ------------- | -------------------------------- |
+| `.jc-start`   | `justify-content: flex-start`    |
+| `.jc-end`     | `justify-content: flex-end`      |
+| `.jc-center`  | `justify-content: center`        |
+| `.jc-between` | `justify-content: space-between` |
+| `.jc-around`  | `justify-content: space-around`  |
+| `.jc-evenly`  | `justify-content: space-evenly`  |
+
+export const RenderJcExample = () => {
+  const values = ['start', 'end', 'center', 'between', 'around', 'evenly'];
+  return (
+    <div>
+      {values.map((value) => (
+        <div key={value}>
+          <p className="p-p fw-bold">.jc-{value}</p>
+          <div
+            className={`d-flex bg-grey-500 w100 jc-${value} p16 ${style.container}`}
+          >
+            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+<RenderJcExample />

package/src/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/src/lib/scss/private/base/spacing.stories.mdx

@@ -0,0 +1,185 @@
+<Meta title="CSS/Base/Spacing" />
+
+# Spacing
+
+Dirty swan provides way to express spacing
+
+## Margin / Padding / Gaps
+
+You can use the shorthand class name to define the four margin properties:
+
+`margin-top` with `.mt{x}`
+
+`margin-bottom` with `.mb{x}`
+
+`margin-right` with `.mr{x}`
+
+`margin-left` with `.ml{x}`
+
+You can use `mx` and `my` respectively to set horizontal or vertical margins:
+
+`margin-left & margin-right` with `.mx{x}`
+
+`margin-top & margin-bottom` with `.my{x}`
+
+The same applies for padding:
+
+`padding-top` with `.pt{x}`
+
+`padding-bottom` with `.pb{x}`
+
+`padding-right` with `.pr{x}`
+
+`padding-left` with `.pl{x}`
+
+`padding-left & padding-right` with `.px{x}`
+
+`padding-top & padding-bottom` with `.py{x}`
+
+Gaps can be expressed via 3 different classes, depending on your use case:
+
+`gap` with `.gap{x}`
+
+`column-gap` with `.c-gap{x}`
+
+`row-gap` with `.r-gap{x}`
+
+### Top margin / padding
+
+| Class   | Output           |
+| ------- | ---------------- |
+| `.mt0`  | `margin-top: 0`  |
+| `.mt8`  | `margin-top: 8`  |
+| `.mt16` | `margin-top: 16` |
+| `.mt24` | `margin-top: 24` |
+| `.mt32` | `margin-top: 32` |
+| `.mt40` | `margin-top: 40` |
+| `.mt48` | `margin-top: 48` |
+| `.mt56` | `margin-top: 56` |
+| `.mt64` | `margin-top: 64` |
+| `.mt72` | `margin-top: 72` |
+| `.mt80` | `margin-top: 80` |
+| `.mt88` | `margin-top: 88` |
+| `.mt96` | `margin-top: 96` |
+
+### Bottom margin / padding
+
+| Class   | Output              |
+| ------- | ------------------- |
+| `.mb0`  | `margin-bottom: 0`  |
+| `.mb8`  | `margin-bottom: 8`  |
+| `.mb16` | `margin-bottom: 16` |
+| `.mb24` | `margin-bottom: 24` |
+| `.mb32` | `margin-bottom: 32` |
+| `.mb40` | `margin-bottom: 40` |
+| `.mb48` | `margin-bottom: 48` |
+| `.mb56` | `margin-bottom: 56` |
+| `.mb64` | `margin-bottom: 64` |
+| `.mb72` | `margin-bottom: 72` |
+| `.mb80` | `margin-bottom: 80` |
+| `.mb88` | `margin-bottom: 88` |
+| `.mb96` | `margin-bottom: 96` |
+
+### Right margin / padding
+
+| Class   | Output             |
+| ------- | ------------------ |
+| `.mr0`  | `margin-right: 0`  |
+| `.mr8`  | `margin-right: 8`  |
+| `.mr16` | `margin-right: 16` |
+| `.mr24` | `margin-right: 24` |
+| `.mr32` | `margin-right: 32` |
+| `.mr40` | `margin-right: 40` |
+| `.mr48` | `margin-right: 48` |
+| `.mr56` | `margin-right: 56` |
+| `.mr64` | `margin-right: 64` |
+| `.mr72` | `margin-right: 72` |
+| `.mr80` | `margin-right: 80` |
+| `.mr88` | `margin-right: 88` |
+| `.mr96` | `margin-right: 96` |
+
+### Left margin / padding
+
+| Class   | Output            |
+| ------- | ----------------- |
+| `.ml0`  | `margin-left: 0`  |
+| `.ml8`  | `margin-left: 8`  |
+| `.ml16` | `margin-left: 16` |
+| `.ml24` | `margin-left: 24` |
+| `.ml32` | `margin-left: 32` |
+| `.ml40` | `margin-left: 40` |
+| `.ml48` | `margin-left: 48` |
+| `.ml56` | `margin-left: 56` |
+| `.ml64` | `margin-left: 64` |
+| `.ml72` | `margin-left: 72` |
+| `.ml80` | `margin-left: 80` |
+| `.ml88` | `margin-left: 88` |
+| `.ml96` | `margin-left: 96` |
+
+### Auto
+
+Note: this only applies to the margin property
+
+| Class      | Output                                   |
+| ---------- | ---------------------------------------- |
+| `.m-auto`  | `margin: auto`                           |
+| `.mt-auto` | `margin-top: auto`                       |
+| `.mb-auto` | `margin-bottom: auto`                    |
+| `.ml-auto` | `margin-left: auto`                      |
+| `.mr-auto` | `margin-right: auto`                     |
+| `.mx-auto` | `margin-left: auto & margin-right: auto` |
+| `.my-auto` | `margin-top: auto & margin-bottom: auto` |
+
+### gap (Equal gap horizontally and vertically)
+
+| Class    | Output    |
+| -------- | --------- |
+| `.gap0`  | `gap: 0`  |
+| `.gap8`  | `gap: 8`  |
+| `.gap6`  | `gap: 16` |
+| `.gap24` | `gap: 24` |
+| `.gap32` | `gap: 32` |
+| `.gap40` | `gap: 40` |
+| `.gap48` | `gap: 48` |
+| `.gap56` | `gap: 56` |
+| `.gap64` | `gap: 64` |
+| `.gap72` | `gap: 72` |
+| `.gap80` | `gap: 80` |
+| `.gap88` | `gap: 88` |
+| `.gap96` | `gap: 96` |
+
+### column-gap (Horizontal gap between items)
+
+| Class      | Output           |
+| ---------- | ---------------- |
+| `.c-gap0`  | `column-gap: 0`  |
+| `.c-gap8`  | `column-gap: 8`  |
+| `.c-gap6`  | `column-gap: 16` |
+| `.c-gap24` | `column-gap: 24` |
+| `.c-gap32` | `column-gap: 32` |
+| `.c-gap40` | `column-gap: 40` |
+| `.c-gap48` | `column-gap: 48` |
+| `.c-gap56` | `column-gap: 56` |
+| `.c-gap64` | `column-gap: 64` |
+| `.c-gap72` | `column-gap: 72` |
+| `.c-gap80` | `column-gap: 80` |
+| `.c-gap88` | `column-gap: 88` |
+| `.c-gap96` | `column-gap: 96` |
+
+### row-gap (Vertical gap between items)
+
+| Class      | Output        |
+| ---------- | ------------- |
+| `.r-gap0`  | `row-gap: 0`  |
+| `.r-gap8`  | `row-gap: 8`  |
+| `.r-gap6`  | `row-gap: 16` |
+| `.r-gap24` | `row-gap: 24` |
+| `.r-gap32` | `row-gap: 32` |
+| `.r-gap40` | `row-gap: 40` |
+| `.r-gap48` | `row-gap: 48` |
+| `.r-gap56` | `row-gap: 56` |
+| `.r-gap64` | `row-gap: 64` |
+| `.r-gap72` | `row-gap: 72` |
+| `.r-gap80` | `row-gap: 80` |
+| `.r-gap88` | `row-gap: 88` |
+| `.r-gap96` | `row-gap: 96` |

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

@@ -0,0 +1,52 @@
+@use "../../public/colors";
+
+.width-container {
+  & > div {
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    border-radius: 8px;
+    color: white;
+    background-color: colors.$ds-primary-500;
+
+    margin-top: 4px;
+  }
+}
+
+.min-width-container {
+  & > div {
+    display: flex;
+
+    margin-top: 4px;
+
+    & > * {
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      color: white;
+    }
+
+    & > *:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+      background-color: colors.$ds-primary-500;
+    }
+
+    & > *:nth-child(2) {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      background-color: colors.$ds-grey-300;
+      width: 100%;
+    }
+  }
+}
+
+.rectangle {
+  width: 100px;
+  height: 50px;
+}
+
+.square {
+  width: 100px;
+  height: 100px;
+}

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

@@ -0,0 +1,74 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+import { Typography } from './demo';
+
+<Meta title="CSS/Base/Typography" />
+
+# Typography
+
+Dirty swan provides classes to override default heading.
+
+## Typography classes
+
+### Desktop
+
+| Class        | Font size        | Font weight |
+| ------------ | ---------------- | ----------- |
+| `p-h1--xl`   | font-size: 48px; | _bold_      |
+| `p-h1`       | font-size: 32px; | _bold_      |
+| `p-h2`       | font-size: 24px; | _bold_      |
+| `p-h3`       | font-size: 18px; | _bold_      |
+| `p-h4`       | font-size: 16px; | _bold_      |
+| `p-p`        | font-size: 16px; | normal      |
+| `p-p--small` | font-size: 12x;  | normal      |
+
+### Mobile
+
+| Class        | Font size        | Font weight |
+| ------------ | ---------------- | ----------- |
+| `p-h1--xl`   | font-size: 32px; | _bold_      |
+| `p-h1`       | font-size: 24px; | _bold_      |
+| `p-h2`       | font-size: 18px; | _bold_      |
+| `p-h3`       | font-size: 16px; | _bold_      |
+| `p-h4`       | font-size: 16px; | _bold_      |
+| `p-p`        | font-size: 16px; | normal      |
+| `p-p--small` | font-size: 12x;  | normal      |
+
+## Typography classes example
+
+<Preview>
+  <Typography />
+</Preview>
+
+```html
+<h1 class="p-h1--xl">The quick brown fox jumps over the lazy dog</h1>
+<h1 class="p-h1">The quick brown fox jumps over the lazy dog</h1>
+<h2 class="p-h2">The quick brown fox jumps over the lazy dog</h2>
+<h3 class="p-h3">The quick brown fox jumps over the lazy dog</h3>
+<h4 class="p-h4">The quick brown fox jumps over the lazy dog</h4>
+<p class="p-p">The quick brown fox jumps over the lazy dog</p>
+<p class="p-p--small">The quick brown fox jumps over the lazy dog</p>
+<a class="p-a">The quick brown fox jumps over the lazy dog</a>
+<p class="p-error">The quick brown fox jumps over the lazy dog</p>
+```
+
+## Layout
+
+### Layout classes
+
+| Class        | Output               |
+| ------------ | -------------------- |
+| `ta-left`    | text-align: left;    |
+| `ta-center`  | text-align: center;  |
+| `ta-right`   | text-align: right;   |
+| `ta-justify` | text-align: justify; |
+
+## Font style
+
+### Font style classes
+
+| Class       | Output              |
+| ----------- | ------------------- |
+| `fs-italic` | font-style: italic; |
+| `fs-normal` | font-style: normal; |
+