feat(angular): render components as row (#5)

CHANGELOG.md

@@ -44,7 +44,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Bug Fixes
 
-* **angular:** set pseudoe-state-wrapper-container's container to flex ([e812000](https://github.com/Ergosign/storybook-addon-pseudo-states/commit/e81200058a843bbb680a5bc6ef64839046627531))
+* **angular:** set pseudo-state-wrapper-container's container to flex ([e812000](https://github.com/Ergosign/storybook-addon-pseudo-states/commit/e81200058a843bbb680a5bc6ef64839046627531))
 
 
 

src/angular/CHANGELOG.md

@@ -40,7 +40,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Bug Fixes
 
-* **angular:** set pseudoe-state-wrapper-container's container to flex ([e812000](https://github.com/Ergosign/storybook-addon-pseudo-states/commit/e81200058a843bbb680a5bc6ef64839046627531))
+* **angular:** set pseudo-state-wrapper-container's container to flex ([e812000](https://github.com/Ergosign/storybook-addon-pseudo-states/commit/e81200058a843bbb680a5bc6ef64839046627531))
 
 
 

src/angular/PseudoStateWrapperComponent.component.ts

@@ -6,54 +6,69 @@ import {
   OnDestroy,
   OnInit,
   TemplateRef,
+  ViewEncapsulation,
 } from '@angular/core';
 import { addons } from '@storybook/addons';
 import {
   AttributeStates,
+  Orientation,
   PseudoState,
   PseudoStates,
   PseudoStatesParameters,
   Selector,
 } from '../share/types';
 import { ADDON_GLOBAL_DISABLE_STATE } from '../share/constants';
+import { container } from '../share/styles.css';
 
 @Component({
   selector: 'pseudo-state-wrapper',
   template: `
-    <div class="pseudo-state-wrapper">
-      <pseudoe-state-wrapper-container
+    <div class="pseudo-states-addon__container" [class.row]="rowOrientation">
+      <pseudo-state-wrapper-container
         [template]="storyTempl"
         [parameters]="storyParams"
         [addonDisabled]="isDisabled"
         [pseudoState]="'Normal'"
+        [rowOrientation]="rowOrientation"
       >
-      </pseudoe-state-wrapper-container>
+      </pseudo-state-wrapper-container>
       <ng-container *ngIf="!isDisabled">
         <ng-container *ngFor="let state of pseudoStates">
-          <pseudoe-state-wrapper-container
+          <pseudo-state-wrapper-container
             [template]="storyTempl"
             [selector]="selector"
             [componentSelector]="componentSelector"
             [parameters]="storyParams"
             [pseudoState]="state"
+            [rowOrientation]="rowOrientation"
           >
-          </pseudoe-state-wrapper-container>
+          </pseudo-state-wrapper-container>
         </ng-container>
         <ng-container *ngFor="let attrState of attributeStates">
-          <pseudoe-state-wrapper-container
+          <pseudo-state-wrapper-container
             [template]="storyTempl"
             [selector]="selector"
             [componentSelector]="componentSelector"
             [parameters]="storyParams"
             [isAttribute]="true"
             [pseudoState]="attrState"
+            [rowOrientation]="rowOrientation"
           >
-          </pseudoe-state-wrapper-container>
+          </pseudo-state-wrapper-container>
         </ng-container>
       </ng-container>
     </div>
   `,
-  styles: [],
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+      :host,
+      pseudo-state-wrapper {
+        display: flex;
+      }
+    `,
+    container,
+  ],
 })
 export class PseudoStateWrapperComponent implements OnInit, OnDestroy {
   /**
@@ -73,6 +88,8 @@ export class PseudoStateWrapperComponent implements OnInit, OnDestroy {
     this._parameters = value;
     if (value) {
       this.storyParams = JSON.parse(unescape(value)) as PseudoStatesParameters;
+      this.rowOrientation =
+        this.storyParams?.styles?.orientation === Orientation.ROW;
       this.pseudoStates = this.storyParams?.pseudos as PseudoStates;
       this.attributeStates = this.storyParams?.attributes as AttributeStates;
       this.selector = this.storyParams?.selector || null;
@@ -136,12 +153,12 @@ export class PseudoStateWrapperComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * all pseudo states to be rendered
+   * All pseudo states to be rendered
    */
   pseudoStates: Array<PseudoState> = [];
 
   /**
-   * all attribute states to be rendered
+   * All attribute states to be rendered
    */
   attributeStates: Array<PseudoState> = [];
 
@@ -151,15 +168,20 @@ export class PseudoStateWrapperComponent implements OnInit, OnDestroy {
   storyParams: PseudoStatesParameters;
 
   /**
-   * selector to element that have to be modified
+   * Selector to element that have to be modified
    */
   selector: Selector | null;
 
   /**
-   * selector of original story component
+   * Selector of original story component
    */
   componentSelector: string;
 
+  /**
+   * Whether story is rendered as row.
+   */
+  rowOrientation: boolean;
+
   /**
    * TemplateRef of story teamplate
    */

src/angular/PseudoStateWrapperContainer.component.ts

@@ -8,50 +8,45 @@ import {
   Renderer2,
   TemplateRef,
   ViewChild,
+  ViewEncapsulation,
 } from '@angular/core';
 import { addons } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
 import { PseudoState, PseudoStatesParameters } from '../share/types';
-import { getMixedPseudoStates } from '../share/utils';
+import { getMixedPseudoStates, sanitizePseudoName } from '../share/utils';
+import { story, storyHeader } from '../share/styles.css';
 
 @Component({
-  selector: 'pseudoe-state-wrapper-container',
+  selector: 'pseudo-state-wrapper-container',
   template: `
-    <div class="container">
-      <div class="header" *ngIf="!addonDisabled">{{ pseudoState }}:</div>
+    <div
+      class="pseudo-states-addon__story pseudo-states-addon__story--{{
+        sanitizePseudoNameFn(pseudoState)
+      }}"
+      [class.row]="rowOrientation"
+    >
+      <div class="pseudo-states-addon__story__header" *ngIf="!addonDisabled">
+        {{ pseudoState }}:
+      </div>
       <div
-        class="story"
+        class="pseudo-states-addon__story__container"
         [class.addonDisabled]="addonDisabled"
         #origStoryWrapper
       >
         <ng-container [ngTemplateOutlet]="template"></ng-container>
       </div>
     </div>
   `,
-  // TODO allow styling from outside
-  // encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
   styles: [
     `
-      :host {
+      :host,
+      pseudo-state-wrapper-container {
         display: flex;
       }
-
-      .container {
-        flex: 1 1 100%;
-      }
-
-      .header {
-        margin-bottom: 5px;
-      }
-
-      .header::first-letter {
-        text-transform: uppercase;
-      }
-
-      .story:not(.addonDisabled) {
-        padding: 0 0 10px 0;
-      }
     `,
+    story,
+    storyHeader,
   ],
 })
 export class PseudoStateWrapperContainer implements AfterViewInit, OnDestroy {
@@ -79,6 +74,8 @@ export class PseudoStateWrapperContainer implements AfterViewInit, OnDestroy {
 
   @Input() addonDisabled = false;
 
+  @Input() rowOrientation = false;
+
   @ViewChild('origStoryWrapper', { static: true }) story!: ElementRef;
 
   constructor(private renderer: Renderer2, private _cdRef: ChangeDetectorRef) {}
@@ -173,4 +170,13 @@ export class PseudoStateWrapperContainer implements AfterViewInit, OnDestroy {
       }
     }
   }
+
+  /**
+   * Wrapper method to use utility method in template.
+   * @param pseudoState
+   */
+  // eslint-disable-next-line class-methods-use-this
+  public sanitizePseudoNameFn(pseudoState: PseudoState): string {
+    return sanitizePseudoName(pseudoState);
+  }
 }

src/angular/angular.ts

@@ -129,7 +129,7 @@ export const withPseudo = makeDecorator({
     }
 
     let newTemplate = story.template;
-    // if story has no template, set up component with provided proerties
+    // if story has no template, set up component with provided properties
     if (!newTemplate) {
       let propertyString = '';
 

src/share/styles.css.ts

@@ -0,0 +1,62 @@
+/** *** ADDON HTML STRUCTURE:
+
+ //Wrapper
+ <div class="pseudo-states-addon__container">
+
+ //n story containers
+ <div className="pseudo-states-addon__story pseudo-states-addon__story--Normal">
+ <div className="pseudo-states-addon__story__header">Normal:</div>
+ <div className="pseudo-states-addon__story__container">{story}</div>
+ </div>
+
+ // closing wrapper
+ </div>
+ */
+
+export const container = `
+  .pseudo-states-addon__container {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+    }
+   .pseudo-states-addon__container.row {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+`;
+
+export const story = `
+  .pseudo-states-addon__story {
+      flex: 1 1 100%;
+      margin: 0 0 10px 0;
+  }
+  .pseudo-states-addon__story.row {
+      flex: 1 1 100%;
+      margin: 0 15px 15px 0;
+  }
+`;
+
+export const storyHeader = `
+  .pseudo-states-addon__story__header {
+      margin-bottom: 5px;
+   }
+
+   .pseudo-states-addon__story__header::first-letter {
+     text-transform: uppercase;
+   }
+`;
+
+export const storyContainer = `
+  .pseudo-states-addon__story__container:not(.addonDisabled) {
+      padding: 0 0 0 0;
+  }
+`;
+
+export const styles = `
+  ${container},
+  ${story},
+  ${storyHeader},
+  ${storyContainer}
+`;
+
+export default styles;

src/share/utils.ts

@@ -1,9 +1,9 @@
 import { PseudoState } from './types';
 
 /**
- * Sanitize pseudoname so that you can use it as css class
+ * Sanitize pseudo name so that you can use it as css class.
  */
-export const sanitizePseudoName = (pseudoStateName: PseudoState): PseudoState =>
+export const sanitizePseudoName = (pseudoStateName: PseudoState): string =>
   // remove whitespace
   pseudoStateName.replace(/\s/g, '').replace(/\W/g, '').replace('&', '-');