@popsure/dirty-swan 20.0.11 → 27.0.2

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

@@ -0,0 +1,60 @@
+@use '../../public/colors' as *;
+
+.ds-spinner {
+  position: relative;
+
+  width: 16px;
+  height: 16px;
+
+  &::before,
+  &::after {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 2px solid $ds-primary-500;
+    border-radius: 16px;
+  }
+
+  &::before {
+    opacity: 0.5;
+    transform: rotate(90deg);
+  }
+
+  &::after {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    animation: spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+  }
+
+  &.ds-spinner__l {
+    width: 48px;
+    height: 48px;
+    &::before,
+    &::after {
+      border-radius: 48px;
+      border-width: 6px;
+    }
+  }
+
+  &.ds-spinner__m {
+    width: 32px;
+    height: 32px;
+    &::before,
+    &::after {
+      border-radius: 32px;
+      border-width: 4px;
+    }
+  }
+}
+
+@keyframes spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +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" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

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

@@ -0,0 +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" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/scss/private/components/badge.stories.mdx

@@ -0,0 +1,37 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Badge" />
+
+# Badges
+
+Badges are label used for flags.
+
+## Active
+
+<Preview>
+  <div className="p-badge--active">Active badge</div>
+</Preview>
+
+## Pending
+
+<Preview>
+  <div className="p-badge--pending">Pending badge</div>
+</Preview>
+
+## Inactive
+
+<Preview>
+  <div className="p-badge--inactive">Inactive badge</div>
+</Preview>
+
+## Danger
+
+<Preview>
+  <div className="p-badge--danger">Danger badge</div>
+</Preview>
+
+## Info
+
+<Preview>
+  <div className="p-badge--info">Info badge</div>
+</Preview>

package/src/lib/scss/private/components/button.stories.mdx

@@ -0,0 +1,107 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Button" />
+
+# Button
+
+Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.
+
+You are looking at the css definition of the Button component, if you want you can use the [pure JSX alternative](?path=/story/jsx-button--page)
+
+## Primary button
+
+### Default
+
+<Preview>
+  <button className="p-btn--primary">Primary button</button>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <button className="p-btn--primary" disabled={true}>
+    Primary button
+  </button>
+</Preview>
+
+### Loading
+
+<Preview>
+  <button className="p-btn--primary p-btn--loading">Primary button</button>
+</Preview>
+
+## Secondary button
+
+### Default
+
+<Preview>
+  <button className="p-btn--secondary">Secondary button</button>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <button className="p-btn--secondary" disabled={true}>
+    Secondary button
+  </button>
+</Preview>
+
+### Loading
+
+<Preview>
+  <button className="p-btn--secondary p-btn--loading">Secondary button</button>
+</Preview>
+
+## Danger button
+
+### Default
+
+<Preview>
+  <button className="p-btn--danger">Danger button</button>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <button className="p-btn--danger" disabled={true}>
+    Danger button
+  </button>
+</Preview>
+
+### Loading
+
+<Preview>
+  <button className="p-btn--danger p-btn--loading">Danger button</button>
+</Preview>
+
+## Outline button
+
+### Default
+
+<Preview>
+  <button className="p-btn--outline">Outline button</button>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <button className="p-btn--outline" disabled={true}>
+    Outline button
+  </button>
+</Preview>
+
+## Outline grey button
+
+### Default
+
+<Preview>
+  <button className="p-btn--outline-grey">Outline button</button>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <button className="p-btn--outline-grey" disabled={true}>
+    Outline button
+  </button>
+</Preview>

package/src/lib/scss/private/components/cards.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Cards" />
+
+# Cards
+
+## Actionable
+
+An actionable card has an hovering state
+
+<Preview>
+  <div className="ds-card--actionable">
+    <p className="p-p mt16 mr16 mb16 ml16">Actionable card</p>
+  </div>
+</Preview>
+
+## Static
+
+A static card doesn’t have an hovering state
+
+<Preview>
+  <div className="ds-card">
+    <p className="p-p mt16 mr16 mb16 ml16">Static card</p>
+  </div>
+</Preview>
+
+## Muted
+
+A muted card is semi transparent
+
+<Preview>
+  <div className="ds-card--muted">
+    <p className="p-p mt16 mr16 mb16 ml16">Muted card</p>
+  </div>
+</Preview>

package/src/lib/scss/private/components/checkbox.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Checkbox" />
+
+# Checkbox
+
+A small box on a form into which a tick or other mark is entered as the response to a question.
+
+## Checkbox input with label
+
+### Default
+
+<Preview>
+  <div className="p-label-container">
+    <input id="default-1" className="p-checkbox" type="radio" />
+    <label htmlFor="default-1" className="p-label">
+      Checkbox label 1
+    </label>
+    <input id="default-2" className="p-checkbox" type="radio" checked={true} />
+    <label htmlFor="default-2" className="p-label">
+      Checkbox label 2
+    </label>
+    <input id="default-3" className="p-checkbox" type="radio" />
+    <label htmlFor="default-3" className="p-label">
+      Checkbox label 3
+    </label>
+  </div>
+</Preview>
+
+### Bordered
+
+<Preview>
+  <div className="p-label-container">
+    <input id="bordered-1" className="p-checkbox" type="radio" />
+    <label htmlFor="bordered-1" className="p-label p-label--bordered">
+      Checkbox label 1
+    </label>
+    <input id="bordered-2" className="p-checkbox" type="radio" checked={true} />
+    <label htmlFor="bordered-2" className="p-label p-label--bordered mt16">
+      Checkbox label 2
+    </label>
+    <input id="bordered-3" className="p-checkbox" type="radio" />
+    <label htmlFor="bordered-3" className="p-label p-label--bordered mt16">
+      Checkbox label 3
+    </label>
+  </div>
+</Preview>

package/src/lib/scss/private/components/input.stories.mdx

@@ -0,0 +1,33 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Input" />
+
+# Input
+
+Input elements are used to gather information from users.
+
+You are looking at the css definition of the Input component, if you want you can use the [pure JSX alternative](?path=/story/jsx-inputs-intro--page)
+
+### Default
+
+<Preview>
+  <input className="p-input wmx5" />
+</Preview>
+
+### Error
+
+<Preview>
+  <input className="p-input--error wmx5" />
+</Preview>
+
+### With placeholder
+
+<Preview>
+  <input className="p-input wmx5" placeholder="Enter your input here" />
+</Preview>
+
+### Disabled
+
+<Preview>
+  <input className="p-input wmx5" disabled={true} />
+</Preview>

package/src/lib/scss/private/components/notices.stories.mdx

@@ -0,0 +1,37 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Notices" />
+
+# Notices
+
+Notices deliver informations to the user. Wether it’s _warnings_, _informations_, _danger_ …
+
+## Primary
+
+<Preview>
+  <div className="p-notice--primary">Primary filled notice</div>
+</Preview>
+
+## Info
+
+<Preview>
+  <div className="p-notice--info">Info filled notice</div>
+</Preview>
+
+## Danger
+
+<Preview>
+  <div className="p-notice--danger">Danger filled notice</div>
+</Preview>
+
+## Warning
+
+<Preview>
+  <div className="p-notice--warning">Warning filled notice</div>
+</Preview>
+
+## Success
+
+<Preview>
+  <div className="p-notice--success">Success filled notice</div>
+</Preview>

package/src/lib/scss/private/components/radio.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Radio" />
+
+# Radio
+
+A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.
+
+## Radio input with label
+
+### Default
+
+<Preview>
+  <div className="p-label-container">
+    <input id="default-1" className="p-radio" type="radio" />
+    <label htmlFor="default-1" className="p-label">
+      Radio label 1
+    </label>
+    <input id="default-2" className="p-radio" type="radio" checked={true} />
+    <label htmlFor="default-2" className="p-label">
+      Radio label 2
+    </label>
+    <input id="default-3" className="p-radio" type="radio" />
+    <label htmlFor="default-3" className="p-label">
+      Radio label 3
+    </label>
+  </div>
+</Preview>
+
+### Bordered
+
+<Preview>
+  <div className="p-label-container">
+    <input id="bordered-1" className="p-radio" type="radio" />
+    <label htmlFor="bordered-1" className="p-label p-label--bordered">
+      Radio label 1
+    </label>
+    <input id="bordered-2" className="p-radio" type="radio" checked={true} />
+    <label htmlFor="bordered-2" className="p-label p-label--bordered mt16">
+      Radio label 2
+    </label>
+    <input id="bordered-3" className="p-radio" type="radio" />
+    <label htmlFor="bordered-3" className="p-label p-label--bordered mt16">
+      Radio label 3
+    </label>
+  </div>
+</Preview>

package/src/lib/scss/private/components/select.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Select" />
+
+# Select
+
+Select elements are used to create drop down list of options
+
+<Preview>
+  <label htmlFor="cars">Choose a car:</label>
+  <select className="p-select" id="cars">
+    <option value="volvo">Volvo</option>
+    <option value="saab">Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </select>
+</Preview>

package/src/lib/scss/private/components/spinner.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/Components/Spinner" />
+
+# Spinner
+
+Spinning ring component to indicate that an action or a page is currently loading
+
+## Default size
+
+<Preview>
+  <div className="ds-spinner" />
+</Preview>
+
+## Medium
+
+<Preview>
+  <div className="ds-spinner ds-spinner__m" />
+</Preview>
+
+## Large
+
+<Preview>
+  <div className="ds-spinner ds-spinner__l" />
+</Preview>

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

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

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

@@ -0,0 +1,130 @@
+// TODO: Reference colors
+$ds-primary-25: #fcfcff !default;
+$ds-primary-50: #f7f7ff !default;
+$ds-primary-100: #e6e5ff !default;
+$ds-primary-300: #b1b0f5 !default;
+$ds-primary-500: #8e8cee !default;
+$ds-primary-700: #6160a2 !default;
+$ds-primary-900: #2e2e4c !default;
+
+$ds-purple-25: #fcfcff;
+$ds-purple-50: #f7f7ff;
+$ds-purple-100: #e6e5ff;
+$ds-purple-300: #b1b0f5;
+$ds-purple-500: #8e8cee;
+$ds-purple-700: #6160a2;
+$ds-purple-900: #2e2e4c;
+
+$ds-blue-100: #e5f0ff;
+$ds-blue-300: #b0cdf3;
+$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;
+$ds-grey-500: #b4b4ba;
+$ds-grey-600: #696970;
+$ds-grey-700: #4c4c53;
+$ds-grey-900: #26262e;
+
+$ds-green-100: #e4ffe6;
+$ds-green-300: #c4f5c8;
+$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,
+  'blue-700': $ds-blue-700,
+  'blue-900': $ds-blue-900,
+  'purple-25': $ds-purple-25,
+  'purple-50': $ds-purple-50,
+  'purple-100': $ds-purple-100,
+  'purple-300': $ds-purple-300,
+  'purple-500': $ds-purple-500,
+  'purple-700': $ds-purple-700,
+  'purple-900': $ds-purple-900,
+  'primary-25': $ds-primary-25,
+  'primary-50': $ds-primary-50,
+  'primary-100': $ds-primary-100,
+  'primary-300': $ds-primary-300,
+  'primary-500': $ds-primary-500,
+  'primary-700': $ds-primary-700,
+  'primary-900': $ds-primary-900,
+  'red-100': $ds-red-100,
+  'red-300': $ds-red-300,
+  'red-500': $ds-red-500,
+  'red-700': $ds-red-700,
+  'red-900': $ds-red-900,
+  'grey-100': $ds-grey-100,
+  'grey-200': $ds-grey-200,
+  'grey-300': $ds-grey-300,
+  'grey-500': $ds-grey-500,
+  'grey-600': $ds-grey-600,
+  'grey-700': $ds-grey-700,
+  'grey-900': $ds-grey-900,
+  'green-100': $ds-green-100,
+  'green-300': $ds-green-300,
+  '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,
+  'yellow-700': $ds-yellow-700,
+  'yellow-900': $ds-yellow-900,
+);

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

@@ -0,0 +1,27 @@
+import { Colors } from './demo';
+
+<Meta title="CSS/Variables/Colors" />
+
+# Colors
+
+For enhanced reusability we’re providing you with a set of color variables. Please don’t hardcode color value and use this instead.
+
+## Usage
+
+Dirty swan provides colors variables for you to use in your Sass files.
+To do so, `@import` or `@use` at the top for your `.scss` file.
+
+```sass
+// demo.scss
+@import '@popsure/dirty-swan/dist/colors';
+
+.element {
+  color: $ds-grey-900;
+}
+```
+
+## Table
+
+<Preview>
+  <Colors />
+</Preview>