@paperbits/styles - npm Package Compare versions

Comparing version 0.1.36 to 0.1.37

contracts/themeContract.ts

@@ -13,2 +13,3 @@ import { Bag } from "@paperbits/common";
     instances?: Object;
+    utils?: any;
 }

ko/bindingHandlers/bindingHandlers.styled.ts

@@ -19,7 +19,7 @@ import * as ko from "knockout";
                 if (typeof styleConfig === "string" || styleConfig instanceof String) {
-                    const className = this.styleService.getClassNameByStyleKey(<string>styleConfig);
+                    const className = await this.styleService.getClassNameByStyleKeyAsync(<string>styleConfig);
                     cssObservable(className);
                 }
                 else {
-                    const classNames = this.styleService.getClassNamesByStyleConfig(styleConfig);
+                    const classNames = await this.styleService.getClassNamesByStyleConfigAsync(styleConfig);
                     cssObservable(classNames);
@@ -26,0 +26,0 @@ }

livingStyleGuide/livingStyleGuide.ts

@@ -15,4 +15,2 @@ import * as ko from "knockout";
 
-const buttonComponentName = "button";
-
 @Component({
@@ -27,2 +25,3 @@ selector: "living-style-guide",
     public buttons: KnockoutObservableArray<any>;
+    public cards: KnockoutObservableArray<any>;
     public fonts: KnockoutObservableArray<FontContract>;
@@ -39,2 +38,3 @@ public colors: KnockoutObservableArray<ColorContract>;
         this.addButtonVariation = this.addButtonVariation.bind(this);
+        this.addCardVariation = this.addCardVariation.bind(this);
         this.applyChanges = this.applyChanges.bind(this);
@@ -51,2 +51,3 @@ this.updateFonts = this.updateFonts.bind(this);
         this.buttons = ko.observableArray([]);
+        this.cards = ko.observableArray([]);
         this.textBlocks = ko.observableArray([]);
@@ -65,2 +66,3 @@ this.bodyFontDisplayName = ko.observable();
         this.updateButons();
+        this.updateCards();
 
@@ -77,3 +79,3 @@ const bodyFont = Utils.getObjectAt<FontContract>(styles.globals.body.typography.fontKey, styles);
 
-    public async updateColors(): Promise<void> {
+    private async updateColors(): Promise<void> {
         this.colors([]);
@@ -86,10 +88,18 @@ const styles = await this.styleService.getStyles();
 
-    public async updateButons(): Promise<void> {
+    private async updateButons(): Promise<void> {
         this.buttons([]);
         const styles = await this.styleService.getStyles();
         this.styles(styles);
-        const buttonVriations = await this.styleService.getComponentVariations("button");
-        this.buttons(buttonVriations);
+        const variations = await this.styleService.getComponentVariations("button");
+        this.buttons(variations);
     }
 
+    private async updateCards(): Promise<void> {
+        this.cards([]);
+        const styles = await this.styleService.getStyles();
+        this.styles(styles);
+        const variations = await this.styleService.getComponentVariations("card");
+        this.cards(variations);
+    }
+
     public async addFonts(): Promise<void> {
@@ -151,3 +161,3 @@ const view: IView = {
     public async addButtonVariation(): Promise<void> {
-        const componentName = buttonComponentName;
+        const componentName = "button";
         const variationName = `${Utils.identifier().toLowerCase()}`; // TODO: Replace name with kebab-like name.
@@ -160,6 +170,16 @@
 
+    public async addCardVariation(): Promise<void> {
+        const componentName = "card";
+        const variationName = `${Utils.identifier().toLowerCase()}`; // TODO: Replace name with kebab-like name.
+
+        await this.styleService.addComponentVariation(componentName, variationName);
+
+        this.applyChanges();
+    }
+
     public applyChanges(): void {
         this.updateButons();
+        this.updateCards();
         this.styles.valueHasMutated();
     }
 }

package.json

 {
     "name": "@paperbits/styles",
-    "version": "0.1.36",
+    "version": "0.1.37",
     "description": "Paperbits style editors.",
@@ -19,3 +19,3 @@ "author": "Paperbits",
     "dependencies": {
-        "@paperbits/common": "0.1.36",
+        "@paperbits/common": "0.1.37",
         "cropperjs": "^1.4.0",
@@ -22,0 +22,0 @@ "google-maps": "^3.2.1",

plugins/backgroundStylePlugin.ts

@@ -33,5 +33,11 @@ import * as Utils from "@paperbits/common/utils";
                 const media = await this.mediaService.getMediaByKey(image.sourceKey);
+
+                if (!media) {
+                    console.warn(`Unable to set background image. Media with source key ${image.sourceKey} not found.`);
+                    continue;
+                }
+
                 backgroundImage.push(`url("${media.downloadUrl}")`);
-                backgroundPosition.push(image.position || "center");
-                backgroundSize.push(image.size || "contain");
+                backgroundPosition.push(image.position || "unset");
+                backgroundSize.push(image.size || "unset");
                 backgroundRepeat.push(image.repeat || "no-repeat");
@@ -38,0 +44,0 @@ }

styleCompiler.ts

@@ -100,14 +100,19 @@ import * as Utils from "@paperbits/common/utils";
 
+        if (themeContract.utils) {
+            for (const variationName of Object.keys(themeContract.utils.text)) {
+                const classes = await this.getVariationClasses(themeContract.utils.text[variationName], "text", variationName);
+                Utils.assign(allStyles, classes);
+            }
+
+            for (const variationName of Object.keys(themeContract.utils.content)) {
+                const classes = await this.getVariationClasses(themeContract.utils.content[variationName], "content", variationName);
+                Utils.assign(allStyles, classes);
+            }
+        }
+
         if (themeContract.globals) {
             for (const tagName of Object.keys(themeContract.globals)) {
-
                 const pluginRules = await this.getVariationClasses(themeContract.globals[tagName], tagName);
                 Utils.assign(allStyles["@global"], pluginRules);
             }
-
-            // TODO: Get rid of special case for global text style
-            for (const variationName of Object.keys(themeContract.globals.text)) {
-                const classes = await this.getVariationClasses(themeContract.globals.text[variationName], "text", variationName);
-                Utils.assign(allStyles, classes);
-            }
         }
@@ -114,0 +119,0 @@

styles.edit.module.ts

@@ -50,6 +50,2 @@ import { BackgroundStylePlugin } from "./plugins/backgroundStylePlugin";
         injector.bindSingleton("stylesheetBindingHandler", StylesheetBindingHandler);
-
-        injector.resolve("styleableBindingHandler");
-        injector.resolve("stylesheetBindingHandler");
-
         injector.bind("stylePlugin", StylePlugin);
@@ -56,0 +52,0 @@ injector.bind("backgroundStylePlugin", BackgroundStylePlugin);

styles.module.ts

@@ -20,5 +20,3 @@
         injector.bindSingleton("styledBindingHandler", StyledBindingHandler);
-
-        injector.resolve("styledBindingHandler");
     }
 }

styleService.ts

@@ -16,2 +16,6 @@ import * as Utils from "@paperbits/common/utils";
     private isResponsive(variation: Object): boolean {
+        if (!variation) {
+            throw new Error(`Parameter "variation" not specified.`);
+        }
+
         return Object.keys(variation).some(x => Object.keys(BreakpointValues).includes(x));
@@ -27,2 +31,6 @@ }
     public getClassNamesByStyleConfig(styleConfig: any): string {
+        if (!styleConfig) {
+            throw new Error(`Parameter "styleConfig" not specified.`);
+        }
+
         const classNames = [];
@@ -64,2 +72,6 @@
     public getClassNameByStyleKey(key: string, breakpoint?: string): string {
+        if (!key) {
+            throw new Error(`Parameter "key" not specified.`);
+        }
+
         if (key.startsWith("globals") && !key.startsWith("globals/text")) {
@@ -69,2 +81,4 @@ return null;
 
+        // const styles = awa this.getStyles();
+
         const segments = key.split("/");
@@ -96,2 +110,80 @@ const component = segments[1];
 
+    public async getClassNamesByStyleConfigAsync(styleConfig: any): Promise<string> {
+        const classNames = [];
+
+        for (const category of Object.keys(styleConfig)) {
+            const categoryConfig = styleConfig[category];
+
+            if (categoryConfig) {
+                if (this.isResponsive(categoryConfig)) {
+                    for (const breakpoint of Object.keys(categoryConfig)) {
+                        let className;
+
+                        if (breakpoint === "xs") {
+                            className = await this.getClassNameByStyleKeyAsync(categoryConfig[breakpoint]);
+                        }
+                        else {
+                            className = await this.getClassNameByStyleKeyAsync(categoryConfig[breakpoint], breakpoint);
+                        }
+
+                        if (className) {
+                            classNames.push(className);
+                        }
+                    }
+                }
+                else {
+                    const className = await this.getClassNameByStyleKeyAsync(categoryConfig);
+
+                    if (className) {
+                        classNames.push(className);
+                    }
+                }
+            }
+        }
+
+        return classNames.join(" ");
+    }
+
+    public async getClassNameByStyleKeyAsync(key: string, breakpoint?: string): Promise<string> {
+        if (!key) {
+            throw new Error(`Parameter "key" not specified.`);
+        }
+       
+        if (key.startsWith("globals") && !key.startsWith("globals/text")) {
+            return null;
+        }
+
+        const styles = await this.getStyles();
+        const style = Utils.getObjectAt(key, styles);
+
+        if (style && style["class"]) {
+            return style["class"][breakpoint || "xs"];
+        }
+
+        const segments = key.split("/");
+        const component = segments[1];
+        const componentVariation = segments[2];
+        const classNames = [];
+
+        classNames.push(Utils.camelCaseToKebabCase(component));
+
+        if (componentVariation) {
+            let className;
+
+            if (breakpoint) {
+                className = `${component}-${breakpoint}-${componentVariation}`;
+            }
+            else {
+                className = `${component}-${componentVariation}`;
+            }
+
+            className = Utils.camelCaseToKebabCase(className);
+            classNames.push(className);
+        }
+
+        // TODO: Consider a case: components/navbar/default/components/navlink
+
+        return classNames.join(" ");
+    }
+
     public async getColorByKey(colorKey: string): Promise<ColorContract> {
@@ -147,2 +239,6 @@ const styles = await this.getStyles();
     public async getVariations<TVariation>(categoryName: string): Promise<TVariation[]> {
+        if (!categoryName) {
+            throw new Error(`Parameter "categoryName" not specified.`);
+        }
+
         const styles = await this.getStyles();
@@ -159,2 +255,6 @@
     public async getComponentVariations(componentName: string): Promise<any[]> {
+        if (!componentName) {
+            throw new Error(`Parameter "componentName" not specified.`);
+        }
+
         const styles = await this.getStyles();
@@ -172,2 +272,10 @@ const componentStyles = styles.components[componentName];
     public async setInstanceStyle(instanceKey: string, instanceStyles: Object): Promise<void> {
+        if (!instanceKey) {
+            throw new Error(`Parameter "instanceKey" not specified.`);
+        }
+
+        if (!instanceStyles) {
+            throw new Error(`Parameter "instanceStyles" not specified.`);
+        }
+
         const styles = await this.getStyles();
@@ -180,2 +288,6 @@ Utils.mergeDeepAt(instanceKey, styles, instanceStyles);
     public async getStyleByKey(styleKey: string): Promise<any> {
+        if (!styleKey) {
+            throw new Error(`Parameter "styleKey" not specified.`);
+        }
+
         const styles = await this.getStyles();
@@ -187,5 +299,5 @@ return Utils.getObjectAt<ColorContract>(styleKey, styles);
         if (!styleKey) {
-            throw new Error("Style key wasn't specified.");
+            throw new Error(`Parameter "styleKey" not specified.`);
         }
-       
+
         const styles = await this.getStyles();
@@ -192,0 +304,0 @@ Utils.setValue(styleKey, styles, null);

workshops/googleFonts/googleFonts.ts

 import * as ko from "knockout";
 import * as Utils from "@paperbits/common/utils";
 import template from "./googleFonts.html";
-import { IHttpClient, HttpMethod } from "@paperbits/common/http";
+import { HttpClient, HttpMethod } from "@paperbits/common/http";
 import { Component, Param, Event, OnMounted } from "@paperbits/common/ko/decorators";
@@ -43,3 +43,3 @@ import { StyleService } from "../../styleService";
         private readonly styleService: StyleService,
-        private readonly httpClient: IHttpClient
+        private readonly httpClient: HttpClient
     ) {
@@ -46,0 +46,0 @@ this.loadGoogleFonts = this.loadGoogleFonts.bind(this);

workshops/shadows/shadowSelector.ts

@@ -52,3 +52,3 @@ import * as ko from "knockout";
 
-    public clearShadows(): void {
+    public clearShadow(): void {
         if (this.selectedShadow) {
@@ -55,0 +55,0 @@ this.selectedShadow(null);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

134045

increased by3.93%

Lines of code

2437

increased by4.68%

Dependency changes

• + Added@paperbits/common@0.1.37(transitive)

• - Removed@paperbits/common@0.1.36(transitive)

• Updated@paperbits/common@0.1.37