@pepperi-addons/ngx-lib 0.4.2-beta.8 → 0.4.2-beta.81

package/src/core/style/base/States.stories.mdx

@@ -0,0 +1,62 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import States from "./states.component";
+
+<Meta title="Abstracts/States" component={States} />
+
+export const Template = (args) => ({ props: args });
+
+# States
+
+We use states all-over-the-place, from buttons to inputs, basically everywhere there's a user interaction. 
+
+> Even though, it's rare to use states as-is
+
+States have 3 different styles
+
+- `weak`
+- `regualr`
+- `strong`
+
+Each of the styles have its common interactive states
+
+- deafult
+- hover
+- active 
+- foucs
+- read only / disabled 
+
+You can use it as a class
+
+```html
+<button class="pep-button weak success"></button>
+```
+
+Or throw a mixin in a class `↓`
+
+```css
+// Make sure you call the `mixins.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/mixins";
+
+.state-is-weak {
+    @include mixins.pep-button-states(weak);
+    // You do not have to include the (weak), it's the default
+}
+.state-is-regular {
+    @include mixins.pep-button-states(regular);
+}
+.state-is-strong {
+    @include mixins.pep-button-states(strong);
+}
+```
+## Example
+
+<Story name="States" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+#### Todo
+
+- [ ] think of abetter name then `pep-button-states`... should it be just `pep-states`?

package/src/core/style/base/Typography.stories.mdx

@@ -0,0 +1,89 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Typography from "./typography.component";
+
+<Meta title="Abstracts/Typography" component={Typography} />
+
+export const Template = (args) => ({ props: args });
+
+# Typography
+
+Here you can find typography styles and colors by **classes** or **tags**
+
+## Examples
+
+### Headings by class
+
+Use like this ` ↓ `
+
+```html
+    <span class="title-md">This is a MD title</span>
+```
+
+<Story name="Headings by class" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+
+### Headings by tag
+
+Use like this ` ↓ `
+
+```html
+    <h1>This is an h1 tag</h1>
+```
+
+<Story name="Headings by tag" args={{
+        storyIndex: 2,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Body text styles & tag
+
+Use like this ` ↓ `
+
+```html
+    <p class="body-md">This is a MD title</p>
+```
+
+<Story name="Body text styles & tag" args={{
+    storyIndex: 3,
+}}>
+    {Template.bind({})}
+</Story>
+
+### Text color styles
+
+Use like this ` ↓ `
+
+```html
+    <p class="color-main">...</p>
+```
+
+<Story name="Text color styles" args={{
+    storyIndex: 4,
+}}>
+    {Template.bind({})}
+</Story>
+
+### Stating the obvious
+
+You can always mix tags/classes for better semantics or look and feel  
+
+Like so ` ↓ `
+
+```html
+<p class="color-user-primary body-md">...</p>
+<h4 class="color-dimmed body-xl">...</h4>
+<span class="color-caution title-md">...</span>
+```
+
+<Story name="Stating the obvious" args={{
+    storyIndex: 5,
+}}>
+    {Template.bind({})}
+</Story>
+

package/src/core/style/base/ZIndex.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import ZIndex from "./zIndex.component";
+
+<Meta title="Abstracts/Z Index" component={ZIndex} />
+
+export const Template = (args) => ({ props: args });
+
+# Z Index
+
+The see the z-index play out in the box below
+
+- `$z-index-high`
+- `$z-index-medium`
+- `$z-index-low`
+- `$z-index-lowest`
+
+
+Use them like so `↓`
+
+```css
+// Make sure you call the `variables.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/variables";
+
+.high-class {
+    z-index: variables.$z-index-high;
+}
+```
+
+### Todos
+
+- [ ] Make them into a class
+
+<Story name="Z Index" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+BTW, these are the vaules of the z-indices `↓`
+
+```css
+$z-index-high: 999;
+$z-index-medium: 100;
+$z-index-low: 50;
+$z-index-lowest: 1;
+```

package/src/core/style/base/base.scss

@@ -477,36 +477,34 @@
     }
 
     &.small {
-        max-width: 10rem !important;
+        max-width: 18rem !important;
         height: auto;
     }
 
     &.regular {
-        max-width: 34rem !important;
+        max-width: 36rem !important;
         height: auto;
     }
 
     &.large {
-        max-width: 40rem !important;
+        max-width: 54rem !important;
         width: 90vw;
         height: auto;
-        max-height: 90vh;
+        max-height: calc(100% - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
 
         .mat-dialog-container {
             .mat-dialog-content {
                 $border-size: 1px;
-                max-height: calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
+                max-height: 100% // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
             }
         }
     }
 
     &.full-screen {
-        $dialog-height: 95vh;
-
-        max-width: 95vw !important;
         width: 95vw !important;
-        max-height: $dialog-height !important;
-        height: $dialog-height !important;
+        height: 95vh !important;
+        max-width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
+        max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important;
 
         .mat-dialog-container {
             .mat-dialog-content {

package/src/core/style/base/borderRadius.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-border-radius',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="side-grid flex-wrap">
+            <div class="size-it round-it border-radius-sm">
+                <h3 class="body-sm color-invert">.border-radius-sm</h3>
+            </div>
+            <div class="size-it round-it border-radius-md">
+                <h3 class="body-sm color-invert">.border-radius-md</h3>
+            </div>
+            <div class="size-it round-it border-radius-lg">
+                <h3 class="body-sm color-invert">.border-radius-lg</h3>
+            </div>
+            <div class="size-it round-it border-radius-xl">
+                <h3 class="body-sm color-invert">.border-radius-xl</h3>
+            </div>
+        </div>
+    </div> `,
+})
+export default class BorderRadiusComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/breakpoints.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-breakpoints',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="size-it this-is-screen-size"></div>
+    </div> `,
+})
+export default class BreakpointsComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/colors.component.ts

@@ -0,0 +1,174 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-colors',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+            <div class="color-text-grid">
+                <div class="color-text-color-main"></div>
+                <div class="color-text-color-dimmed"></div>
+                <div class="color-text-color-disabled"></div>
+                <div class="color-text-color-invert"></div>
+                <div class="color-text-color-link"></div>
+                <div class="color-text-color-link-highlight"></div>
+                <div class="color-text-color-link-focus"></div>
+                <div class="color-text-color-success"></div>
+                <div class="color-text-color-caution"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 3" class="set-grid" id="color-system-primary-invert">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-primary-invert-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-primary-invert-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 2" class="set-grid" id="color-system-primary">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-primary-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-primary-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 4" class="set-grid" id="color-system-success">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-success-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-success-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 5" class="set-grid" id="color-system-caution">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-caution-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-caution-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 6" class="set-grid" id="color-user-primary">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-user-primary-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-user-primary-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 7" class="set-grid" id="color-user-secondary">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-user-secondary-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-user-secondary-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>`,
+})
+export default class ColorsComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/shadows.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'shadows-colors',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <h2 class="body-md color-dimmed">XS Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-xs-xsoft">
+                <p class="body-sm"><code>.shadow-xs-xsoft</code></p>
+            </div>
+            <div class="shadow-xs-soft">
+                <p class="body-sm"><code>.shadow-xs-soft</code></p>
+            </div>
+            <div class="shadow-xs-regular">
+                <p class="body-sm"><code>.shadow-xs-regular</code></p>
+            </div>
+            <div class="shadow-xs-hard">
+                <p class="body-sm"><code>.shadow-xs-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">SM Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-sm-xsoft">
+                <p class="body-sm"><code>.shadow-sm-xsoft</code></p>
+            </div>
+            <div class="shadow-sm-soft">
+                <p class="body-sm"><code>.shadow-sm-soft</code></p>
+            </div>
+            <div class="shadow-sm-regular">
+                <p class="body-sm"><code>.shadow-sm-regular</code></p>
+            </div>
+            <div class="shadow-sm-hard">
+                <p class="body-sm"><code>.shadow-sm-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">MD Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-md-xsoft">
+                <p class="body-sm"><code>.shadow-md-xsoft</code></p>
+            </div>
+            <div class="shadow-md-soft">
+                <p class="body-sm"><code>.shadow-md-soft</code></p>
+            </div>
+            <div class="shadow-md-regular">
+                <p class="body-sm"><code>.shadow-md-regular</code></p>
+            </div>
+            <div class="shadow-md-hard">
+                <p class="body-sm"><code>.shadow-md-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">LG Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-lg-xsoft">
+                <p class="body-sm">
+                    <code>.shadow-lg-xsoft</code>
+                </p>
+            </div>
+            <div class="shadow-lg-soft">
+                <p class="body-sm"><code>.shadow-lg-soft</code></p>
+            </div>
+            <div class="shadow-lg-regular">
+                <p class="body-sm"><code>.shadow-lg-regular</code></p>
+            </div>
+            <div class="shadow-lg-hard">
+                <p class="body-sm"><code>.shadow-lg-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">XL Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-xl-xsoft">
+                <p class="body-sm"><code>.shadow-xl-xsoft</code></p>
+            </div>
+            <div class="shadow-xl-soft">
+                <p class="body-sm"><code>.shadow-xl-soft</code></p>
+            </div>
+            <div class="shadow-xl-regular">
+                <p class="body-sm"><code>.shadow-xl-regular</code></p>
+            </div>
+            <div class="shadow-xl-hard">
+                <p class="body-sm"><code>.shadow-xl-hard</code></p>
+            </div>
+        </div>
+    </div> `,
+})
+export default class ShadowsComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/spacing.component.ts

@@ -0,0 +1,71 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-spacing',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="side-grid flex-wrap">
+            <div>
+                <code class="body-xs">$spacing-2xs</code>
+                <div class="size-of-box-2xs"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xs</code>
+                <div class="size-of-box-xs"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-sm</code>
+                <div class="size-of-box-sm"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-md</code>
+                <div class="size-of-box-md"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-lg</code>
+                <div class="size-of-box-lg"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl</code>
+                <div class="size-of-box-xl"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl2</code>
+                <div class="size-of-box-xl2"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl3</code>
+                <div class="size-of-box-xl3"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl4</code>
+                <div class="size-of-box-xl4"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl5</code>
+                <div class="size-of-box-xl5"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl6</code>
+                <div class="size-of-box-xl6"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl7</code>
+                <div class="size-of-box-xl7"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl8</code>
+                <div class="size-of-box-xl8"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl9</code>
+                <div class="size-of-box-xl9"></div>
+            </div>
+        </div>
+    </div> `,
+})
+export default class SpacingComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}