diff --git a/components/vf-blockquote/CHANGELOG.md b/components/vf-blockquote/CHANGELOG.md index 2e9473b57e..e0db6b9820 100644 --- a/components/vf-blockquote/CHANGELOG.md +++ b/components/vf-blockquote/CHANGELOG.md @@ -1,3 +1,11 @@ +### 1.2.1 + +* Changed: Modified the Blockquote component in line with stakeholder requirements and to improve consistency +* Added : Angular support for Blockquote component +* Added : React support for Blockquote component +* Documentation: Updated the documentation for blockquote as per new implementation +* [Tracking issue](https://github.com/visual-framework/vf-core/issues/1945) + ### 1.2.0 * adds context `if` statement to make it useable in vf-11ty. diff --git a/components/vf-blockquote/README.md b/components/vf-blockquote/README.md index 06183d136a..15a1c8e869 100755 --- a/components/vf-blockquote/README.md +++ b/components/vf-blockquote/README.md @@ -4,11 +4,130 @@ ## About -A way to quote and highlight text. +The `vf-blockquote` highlights a section that is quoted from an external source. ## Usage -The pullquote variant will be a decorative variation but has yet to be implemented, it may take inspiration from the [VF 1.3 pullquote](https://www.ebi.ac.uk/style-lab/websites/patterns/pullquotes.html). +The `vf-blockquote` should be used to highlight texts from external sources like quotes and testimonials. It should be used for more than decorative purposes, ensuring that the text being quoted is relevant to the content of the page and adds value to the content. This component is not optimised for mobile devices. + +It should not be confused with a pull quote which highlights a section of text from the same source/page. + +Quotes should be as concise as possible. The impact of the blockquote is diminished when it has long texts as this overwhelms the reader. + +Provide proper attribution such as the name, source and relevant information to give credibility to the quote. The component allows you to add the image of the person, the name (Which can be linked to a profile or source page) and other attribution details. + +The blockquote is designed to be used on a white background, it is advisable to avoid using it on backgrounds with gradients, images or other colours. If the background colour is changed, ensure the contrast ratio between the texts and the background meet accessibility standards. + + +### When to use + +- Quoting external sources such as individuals, experts, publications etc. +- Testimonials and feedback can be highlighted using the `vf-blockquote`. + +### When not to use + +- Self-quoting or usage as a pull quote should be avoided in the context of the page/content. This component should not be used to highlight a portion of text from the same content. +- `Vf-blockquotes` should not be used solely for decorative purposes, ensuring that the quoted text adds value to the content. + +### Accessibility + +- This component targets WCAG 2.1 AA accessibility. + +### Angular + +As of version 1.2.1 vf-blockquote has experimental Angular support. +This package was generated with Angular version 15.2.0 and has been tested on application with Angular version 15.2.0. + +1. install `yarn add @visual-framework/vf-blockquote` +2. import in your app.module + ``` + import { VfBlockquoteAngularModule } from '@visual-framework/vf-blockquote/vf-blockquote.angular'; + + @NgModule({ + imports: [VfBlockquoteAngularModule, YourOtherModules], + ... + }) + ``` +3. can be used as + ``` + + ``` +4. add to your styles.scss + ``` + @import '../node_modules/@visual-framework/vf-sass-config/index.scss'; + @import '../node_modules/@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss'; + @import '../node_modules/@visual-framework/vf-utility-classes/vf-utility-classes.scss'; + @import '../node_modules/@visual-framework/vf-sass-utilities/vf-sass-utilities.scss'; + @import '../node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss'; + + @font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 500; + src: local('IBM Plex Sans Medium'), + local('IBMPlexSans-Medium'), + url('../node_modules/@visual-framework/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Medium.woff') format('woff'), + url('../node_modules/@visual-framework/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Medium.woff2') format('woff2'); + } + ``` + +5. Usage: + + ``` + + ``` + +### React + +As of version 1.2.1 vf-blockquote has experimental React support which has been tested on react version 18.2.0 + +1. install `yarn add @visual-framework/vf-blockquote` +2. import in the JS file where you want to include this component + ``` + import VfBlockquote from '@visual-framework/vf-blockquote/vf-blockquote.react'; + + Make sure you have the jsx support enabled with babel. Alternatively, you can also copy the vf-blockquote.react.js file from below to your react project and import as per the location. + ``` +3. can be used as + ``` + + ``` +4. add below to your SCSS file + ``` + @import '@visual-framework/vf-sass-config/index.scss'; + @import '@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss'; + @import '@visual-framework/vf-utility-classes/vf-utility-classes.scss'; + @import '@visual-framework/vf-sass-utilities/vf-sass-utilities.scss'; + @import '@visual-framework/vf-blockquote/vf-blockquote.scss'; + + @font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 500; + src: local('IBM Plex Sans Medium'), + local('IBMPlexSans-Medium'), + url('../node_modules/@visual-framework/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Medium.woff') format('woff'), + url('../node_modules/@visual-framework/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Medium.woff2') format('woff2'); + } + ``` + +5. Usage: + + ``` + + ``` ## Install diff --git a/components/vf-blockquote/vf-blockquote.angular/README.md b/components/vf-blockquote/vf-blockquote.angular/README.md new file mode 100644 index 0000000000..90c7c11ea5 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/README.md @@ -0,0 +1,24 @@ +# VfBlockquoteAngular + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0. + +## Code scaffolding + +Run `ng generate component component-name --project vf-blockquote.angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project vf-blockquote.angular`. +> Note: Don't forget to add `--project vf-blockquote.angular` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build vf-blockquote.angular` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build vf-blockquote.angular`, go to the dist folder `cd dist/vf-blockquote.angular` and run `npm publish`. + +## Running unit tests + +Run `ng test vf-blockquote.angular` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/components/vf-blockquote/vf-blockquote.angular/esm2020/lib/vf-blockquote.angular.component.mjs b/components/vf-blockquote/vf-blockquote.angular/esm2020/lib/vf-blockquote.angular.component.mjs new file mode 100644 index 0000000000..bf1e88e2b5 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/esm2020/lib/vf-blockquote.angular.component.mjs @@ -0,0 +1,92 @@ +import { Component, Input } from '@angular/core'; +import * as i0 from "@angular/core"; +import * as i1 from "@angular/common"; +export class VfBlockquoteAngularComponent { + constructor() { + this.html = ''; + this.text = ''; + this.blockquote_text = ''; + this.blockquote_author = ''; + this.blockquote_author_href = ''; + this.blockquote_author_details = ''; + this.blockquote_author_imageurl = ''; + this.override_class = ''; + this.class = ''; + this.quote = ''; + } + ngOnInit() { + //Initialize something + } + ngOnChanges() { + this.setValues(); + } + /* Set values as per input and updated changes */ + setValues() { + /* Conditional styles, strings, nullables, arrays of styles */ + this.class = 'vf-blockquote'; + this.class += this.override_class ? this.override_class : ''; + /* Inner content of the quote based on whether HTML or Text */ + this.quote = this.blockquote_text + ? this.blockquote_text + : this.html + ? this.html + : this.text; + } +} +VfBlockquoteAngularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); +VfBlockquoteAngularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: VfBlockquoteAngularComponent, selector: "vf-blockquote", inputs: { id: "id", html: "html", text: "text", blockquote_text: "blockquote_text", blockquote_author: "blockquote_author", blockquote_author_href: "blockquote_author_href", blockquote_author_details: "blockquote_author_details", blockquote_author_imageurl: "blockquote_author_imageurl", override_class: "override_class" }, usesOnChanges: true, ngImport: i0, template: ` +
+
+
+ +
+
+
{{ quote }}
+
+ + {{ blockquote_author }} +
{{ blockquote_author_details }}
+
+
+
+
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularComponent, decorators: [{ + type: Component, + args: [{ selector: 'vf-blockquote', template: ` +
+
+
+ +
+
+
{{ quote }}
+
+ + {{ blockquote_author }} +
{{ blockquote_author_details }}
+
+
+
+
+ ` }] + }], propDecorators: { id: [{ + type: Input + }], html: [{ + type: Input + }], text: [{ + type: Input + }], blockquote_text: [{ + type: Input + }], blockquote_author: [{ + type: Input + }], blockquote_author_href: [{ + type: Input + }], blockquote_author_details: [{ + type: Input + }], blockquote_author_imageurl: [{ + type: Input + }], override_class: [{ + type: Input + }] } }); +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmYtYmxvY2txdW90ZS5hbmd1bGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3ZmLWJsb2NrcXVvdGUuYW5ndWxhci9zcmMvbGliL3ZmLWJsb2NrcXVvdGUuYW5ndWxhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7OztBQXVCekQsTUFBTSxPQUFPLDRCQUE0QjtJQXJCekM7UUF3QlcsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNWLFNBQUksR0FBRyxFQUFFLENBQUM7UUFDVixvQkFBZSxHQUFHLEVBQUUsQ0FBQztRQUNyQixzQkFBaUIsR0FBRyxFQUFFLENBQUM7UUFDdkIsMkJBQXNCLEdBQUcsRUFBRSxDQUFDO1FBQzVCLDhCQUF5QixHQUFHLEVBQUUsQ0FBQztRQUMvQiwrQkFBMEIsR0FBRyxFQUFFLENBQUM7UUFDaEMsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFFN0IsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUNYLFVBQUssR0FBRyxFQUFFLENBQUM7S0F1Qlo7SUFyQkMsUUFBUTtRQUNOLHVCQUF1QjtJQUN6QixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsaURBQWlEO0lBQ2pELFNBQVM7UUFDUCw4REFBOEQ7UUFDOUQsSUFBSSxDQUFDLEtBQUssR0FBRyxlQUFlLENBQUM7UUFDN0IsSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFFN0QsOERBQThEO1FBQzlELElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGVBQWU7WUFDL0IsQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlO1lBQ3RCLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSTtnQkFDWCxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUk7Z0JBQ1gsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDaEIsQ0FBQzs7eUhBbkNVLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLDhZQW5CN0I7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQlQ7MkZBR1UsNEJBQTRCO2tCQXJCeEMsU0FBUzsrQkFDRSxlQUFlLFlBQ2Y7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQlQ7OEJBS1EsRUFBRTtzQkFBVixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ0csc0JBQXNCO3NCQUE5QixLQUFLO2dCQUNHLHlCQUF5QjtzQkFBakMsS0FBSztnQkFDRywwQkFBMEI7c0JBQWxDLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2Zi1ibG9ja3F1b3RlJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8YmxvY2txdW90ZSBbYXR0ci5pZF09XCJpZCAhPT0gdW5kZWZpbmVkID8gaWQgOiBudWxsXCIgW2NsYXNzXT1cImNsYXNzXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwidmYtYmxvY2txdW90ZS1mbGV4LWNvbnRhaW5lclwiPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiYmxvY2txdW90ZV9hdXRob3JfaW1hZ2V1cmwgIT09ICcnXCIgY2xhc3M9XCJ2Zi1ibG9ja3F1b3RlX2F1dGhvcl9faW1hZ2VcIj5cbiAgICAgICAgICA8aW1nIFtzcmNdPVwiYmxvY2txdW90ZV9hdXRob3JfaW1hZ2V1cmxcIiBhbHQ9XCJcIiBsb2FkaW5nPVwibGF6eVwiIC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxkaXY+e3sgcXVvdGUgfX08L2Rpdj5cbiAgICAgICAgICA8Zm9vdGVyPlxuICAgICAgICAgICAgPGEgKm5nSWY9XCJibG9ja3F1b3RlX2F1dGhvcl9ocmVmICE9PSAnJzsgZWxzZSBxdW90ZWF1dGhvcnBsYWluXCIgY2xhc3M9XCJ2Zi1ibG9ja3F1b3RlX2F1dGhvcl9fbGlua1wiIFtocmVmXT1cImJsb2NrcXVvdGVfYXV0aG9yX2hyZWZcIiBbaW5uZXJIVE1MXT1cImJsb2NrcXVvdGVfYXV0aG9yXCI+PC9hPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlICNxdW90ZWF1dGhvcnBsYWluPnt7IGJsb2NrcXVvdGVfYXV0aG9yIH19PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJibG9ja3F1b3RlX2F1dGhvcl9kZXRhaWxzICE9PSAnJ1wiIGNsYXNzPVwidmYtYmxvY2txdW90ZV9hdXRob3JfZGV0YWlsc1wiPnt7IGJsb2NrcXVvdGVfYXV0aG9yX2RldGFpbHMgfX08L2Rpdj5cbiAgICAgICAgICA8L2Zvb3Rlcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Jsb2NrcXVvdGU+XG4gIGAsXG4gIHN0eWxlczogW10sXG59KVxuZXhwb3J0IGNsYXNzIFZmQmxvY2txdW90ZUFuZ3VsYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAvKiBJbml0aWFsaXplIHZhbHVlcyBiYXNlZCBvbiBpbnB1dCB2YWx1ZXMgKi9cbiAgQElucHV0KCkgaWQ6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgaHRtbCA9ICcnO1xuICBASW5wdXQoKSB0ZXh0ID0gJyc7XG4gIEBJbnB1dCgpIGJsb2NrcXVvdGVfdGV4dCA9ICcnO1xuICBASW5wdXQoKSBibG9ja3F1b3RlX2F1dGhvciA9ICcnO1xuICBASW5wdXQoKSBibG9ja3F1b3RlX2F1dGhvcl9ocmVmID0gJyc7XG4gIEBJbnB1dCgpIGJsb2NrcXVvdGVfYXV0aG9yX2RldGFpbHMgPSAnJztcbiAgQElucHV0KCkgYmxvY2txdW90ZV9hdXRob3JfaW1hZ2V1cmwgPSAnJztcbiAgQElucHV0KCkgb3ZlcnJpZGVfY2xhc3MgPSAnJztcblxuICBjbGFzcyA9ICcnO1xuICBxdW90ZSA9ICcnO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIC8vSW5pdGlhbGl6ZSAgc29tZXRoaW5nXG4gIH1cblxuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICB0aGlzLnNldFZhbHVlcygpO1xuICB9XG5cbiAgLyogU2V0IHZhbHVlcyBhcyBwZXIgaW5wdXQgYW5kIHVwZGF0ZWQgY2hhbmdlcyAqL1xuICBzZXRWYWx1ZXMoKTogdm9pZCB7XG4gICAgLyogQ29uZGl0aW9uYWwgc3R5bGVzLCBzdHJpbmdzLCBudWxsYWJsZXMsIGFycmF5cyBvZiBzdHlsZXMgKi9cbiAgICB0aGlzLmNsYXNzID0gJ3ZmLWJsb2NrcXVvdGUnO1xuICAgIHRoaXMuY2xhc3MgKz0gdGhpcy5vdmVycmlkZV9jbGFzcyA/IHRoaXMub3ZlcnJpZGVfY2xhc3MgOiAnJztcblxuICAgIC8qIElubmVyIGNvbnRlbnQgb2YgdGhlIHF1b3RlIGJhc2VkIG9uIHdoZXRoZXIgSFRNTCBvciBUZXh0ICovXG4gICAgdGhpcy5xdW90ZSA9IHRoaXMuYmxvY2txdW90ZV90ZXh0XG4gICAgICA/IHRoaXMuYmxvY2txdW90ZV90ZXh0XG4gICAgICA6IHRoaXMuaHRtbFxuICAgICAgPyB0aGlzLmh0bWxcbiAgICAgIDogdGhpcy50ZXh0O1xuICB9XG59XG4iXX0= \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/esm2020/lib/vf-blockquote.angular.module.mjs b/components/vf-blockquote/vf-blockquote.angular/esm2020/lib/vf-blockquote.angular.module.mjs new file mode 100644 index 0000000000..d2538a9326 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/esm2020/lib/vf-blockquote.angular.module.mjs @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { VfBlockquoteAngularComponent } from './vf-blockquote.angular.component'; +import * as i0 from "@angular/core"; +export class VfBlockquoteAngularModule { +} +VfBlockquoteAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); +VfBlockquoteAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, declarations: [VfBlockquoteAngularComponent], imports: [CommonModule], exports: [VfBlockquoteAngularComponent] }); +VfBlockquoteAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, imports: [CommonModule] }); +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, decorators: [{ + type: NgModule, + args: [{ + declarations: [ + VfBlockquoteAngularComponent + ], + imports: [ + CommonModule + ], + exports: [ + VfBlockquoteAngularComponent + ] + }] + }] }); +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmYtYmxvY2txdW90ZS5hbmd1bGFyLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3ZmLWJsb2NrcXVvdGUuYW5ndWxhci9zcmMvbGliL3ZmLWJsb2NrcXVvdGUuYW5ndWxhci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sbUNBQW1DLENBQUM7O0FBZWpGLE1BQU0sT0FBTyx5QkFBeUI7O3NIQUF6Qix5QkFBeUI7dUhBQXpCLHlCQUF5QixpQkFUbEMsNEJBQTRCLGFBRzVCLFlBQVksYUFHWiw0QkFBNEI7dUhBR25CLHlCQUF5QixZQU5sQyxZQUFZOzJGQU1ILHlCQUF5QjtrQkFYckMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osNEJBQTRCO3FCQUM3QjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTtxQkFDYjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsNEJBQTRCO3FCQUM3QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVmZCbG9ja3F1b3RlQW5ndWxhckNvbXBvbmVudCB9IGZyb20gJy4vdmYtYmxvY2txdW90ZS5hbmd1bGFyLmNvbXBvbmVudCc7XG5cblxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBWZkJsb2NrcXVvdGVBbmd1bGFyQ29tcG9uZW50XG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIFZmQmxvY2txdW90ZUFuZ3VsYXJDb21wb25lbnRcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBWZkJsb2NrcXVvdGVBbmd1bGFyTW9kdWxlIHsgfVxuIl19 \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/esm2020/public-api.mjs b/components/vf-blockquote/vf-blockquote.angular/esm2020/public-api.mjs new file mode 100644 index 0000000000..a860d031b0 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/esm2020/public-api.mjs @@ -0,0 +1,6 @@ +/* + * Public API Surface of vf-blockquote.angular + */ +export * from './lib/vf-blockquote.angular.component'; +export * from './lib/vf-blockquote.angular.module'; +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3ZmLWJsb2NrcXVvdGUuYW5ndWxhci9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyxvQ0FBb0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgdmYtYmxvY2txdW90ZS5hbmd1bGFyXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvdmYtYmxvY2txdW90ZS5hbmd1bGFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zi1ibG9ja3F1b3RlLmFuZ3VsYXIubW9kdWxlJztcbiJdfQ== \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/esm2020/vf-blockquote.angular.mjs b/components/vf-blockquote/vf-blockquote.angular/esm2020/vf-blockquote.angular.mjs new file mode 100644 index 0000000000..1bb58161c7 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/esm2020/vf-blockquote.angular.mjs @@ -0,0 +1,5 @@ +/** + * Generated bundle index. Do not edit. + */ +export * from './public-api'; +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmYtYmxvY2txdW90ZS5hbmd1bGFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvdmYtYmxvY2txdW90ZS5hbmd1bGFyL3NyYy92Zi1ibG9ja3F1b3RlLmFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ== \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/fesm2015/vf-blockquote.angular.mjs b/components/vf-blockquote/vf-blockquote.angular/fesm2015/vf-blockquote.angular.mjs new file mode 100644 index 0000000000..4291ce59a7 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/fesm2015/vf-blockquote.angular.mjs @@ -0,0 +1,124 @@ +import * as i0 from '@angular/core'; +import { Component, Input, NgModule } from '@angular/core'; +import * as i1 from '@angular/common'; +import { CommonModule } from '@angular/common'; + +class VfBlockquoteAngularComponent { + constructor() { + this.html = ''; + this.text = ''; + this.blockquote_text = ''; + this.blockquote_author = ''; + this.blockquote_author_href = ''; + this.blockquote_author_details = ''; + this.blockquote_author_imageurl = ''; + this.override_class = ''; + this.class = ''; + this.quote = ''; + } + ngOnInit() { + //Initialize something + } + ngOnChanges() { + this.setValues(); + } + /* Set values as per input and updated changes */ + setValues() { + /* Conditional styles, strings, nullables, arrays of styles */ + this.class = 'vf-blockquote'; + this.class += this.override_class ? this.override_class : ''; + /* Inner content of the quote based on whether HTML or Text */ + this.quote = this.blockquote_text + ? this.blockquote_text + : this.html + ? this.html + : this.text; + } +} +VfBlockquoteAngularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); +VfBlockquoteAngularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: VfBlockquoteAngularComponent, selector: "vf-blockquote", inputs: { id: "id", html: "html", text: "text", blockquote_text: "blockquote_text", blockquote_author: "blockquote_author", blockquote_author_href: "blockquote_author_href", blockquote_author_details: "blockquote_author_details", blockquote_author_imageurl: "blockquote_author_imageurl", override_class: "override_class" }, usesOnChanges: true, ngImport: i0, template: ` +
+
+
+ +
+
+
{{ quote }}
+
+ + {{ blockquote_author }} +
{{ blockquote_author_details }}
+
+
+
+
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularComponent, decorators: [{ + type: Component, + args: [{ selector: 'vf-blockquote', template: ` +
+
+
+ +
+
+
{{ quote }}
+
+ + {{ blockquote_author }} +
{{ blockquote_author_details }}
+
+
+
+
+ ` }] + }], propDecorators: { id: [{ + type: Input + }], html: [{ + type: Input + }], text: [{ + type: Input + }], blockquote_text: [{ + type: Input + }], blockquote_author: [{ + type: Input + }], blockquote_author_href: [{ + type: Input + }], blockquote_author_details: [{ + type: Input + }], blockquote_author_imageurl: [{ + type: Input + }], override_class: [{ + type: Input + }] } }); + +class VfBlockquoteAngularModule { +} +VfBlockquoteAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); +VfBlockquoteAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, declarations: [VfBlockquoteAngularComponent], imports: [CommonModule], exports: [VfBlockquoteAngularComponent] }); +VfBlockquoteAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, imports: [CommonModule] }); +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, decorators: [{ + type: NgModule, + args: [{ + declarations: [ + VfBlockquoteAngularComponent + ], + imports: [ + CommonModule + ], + exports: [ + VfBlockquoteAngularComponent + ] + }] + }] }); + +/* + * Public API Surface of vf-blockquote.angular + */ + +/** + * Generated bundle index. Do not edit. + */ + +export { VfBlockquoteAngularComponent, VfBlockquoteAngularModule }; +//# sourceMappingURL=vf-blockquote.angular.mjs.map diff --git a/components/vf-blockquote/vf-blockquote.angular/fesm2015/vf-blockquote.angular.mjs.map b/components/vf-blockquote/vf-blockquote.angular/fesm2015/vf-blockquote.angular.mjs.map new file mode 100644 index 0000000000..8ee758abb3 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/fesm2015/vf-blockquote.angular.mjs.map @@ -0,0 +1 @@ +{"version":3,"file":"vf-blockquote.angular.mjs","sources":["../../../projects/vf-blockquote.angular/src/lib/vf-blockquote.angular.component.ts","../../../projects/vf-blockquote.angular/src/lib/vf-blockquote.angular.module.ts","../../../projects/vf-blockquote.angular/src/public-api.ts","../../../projects/vf-blockquote.angular/src/vf-blockquote.angular.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'vf-blockquote',\n template: `\n
\n
\n
\n \"\"\n
\n
\n
{{ quote }}
\n
\n \n {{ blockquote_author }}\n
{{ blockquote_author_details }}
\n
\n
\n
\n
\n `,\n styles: [],\n})\nexport class VfBlockquoteAngularComponent implements OnInit {\n /* Initialize values based on input values */\n @Input() id: string | undefined;\n @Input() html = '';\n @Input() text = '';\n @Input() blockquote_text = '';\n @Input() blockquote_author = '';\n @Input() blockquote_author_href = '';\n @Input() blockquote_author_details = '';\n @Input() blockquote_author_imageurl = '';\n @Input() override_class = '';\n\n class = '';\n quote = '';\n\n ngOnInit(): void {\n //Initialize something\n }\n\n ngOnChanges(): void {\n this.setValues();\n }\n\n /* Set values as per input and updated changes */\n setValues(): void {\n /* Conditional styles, strings, nullables, arrays of styles */\n this.class = 'vf-blockquote';\n this.class += this.override_class ? this.override_class : '';\n\n /* Inner content of the quote based on whether HTML or Text */\n this.quote = this.blockquote_text\n ? this.blockquote_text\n : this.html\n ? this.html\n : this.text;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { VfBlockquoteAngularComponent } from './vf-blockquote.angular.component';\n\n\n\n@NgModule({\n declarations: [\n VfBlockquoteAngularComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [\n VfBlockquoteAngularComponent\n ]\n})\nexport class VfBlockquoteAngularModule { }\n","/*\n * Public API Surface of vf-blockquote.angular\n */\n\nexport * from './lib/vf-blockquote.angular.component';\nexport * from './lib/vf-blockquote.angular.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/fesm2020/vf-blockquote.angular.mjs b/components/vf-blockquote/vf-blockquote.angular/fesm2020/vf-blockquote.angular.mjs new file mode 100644 index 0000000000..4291ce59a7 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/fesm2020/vf-blockquote.angular.mjs @@ -0,0 +1,124 @@ +import * as i0 from '@angular/core'; +import { Component, Input, NgModule } from '@angular/core'; +import * as i1 from '@angular/common'; +import { CommonModule } from '@angular/common'; + +class VfBlockquoteAngularComponent { + constructor() { + this.html = ''; + this.text = ''; + this.blockquote_text = ''; + this.blockquote_author = ''; + this.blockquote_author_href = ''; + this.blockquote_author_details = ''; + this.blockquote_author_imageurl = ''; + this.override_class = ''; + this.class = ''; + this.quote = ''; + } + ngOnInit() { + //Initialize something + } + ngOnChanges() { + this.setValues(); + } + /* Set values as per input and updated changes */ + setValues() { + /* Conditional styles, strings, nullables, arrays of styles */ + this.class = 'vf-blockquote'; + this.class += this.override_class ? this.override_class : ''; + /* Inner content of the quote based on whether HTML or Text */ + this.quote = this.blockquote_text + ? this.blockquote_text + : this.html + ? this.html + : this.text; + } +} +VfBlockquoteAngularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); +VfBlockquoteAngularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: VfBlockquoteAngularComponent, selector: "vf-blockquote", inputs: { id: "id", html: "html", text: "text", blockquote_text: "blockquote_text", blockquote_author: "blockquote_author", blockquote_author_href: "blockquote_author_href", blockquote_author_details: "blockquote_author_details", blockquote_author_imageurl: "blockquote_author_imageurl", override_class: "override_class" }, usesOnChanges: true, ngImport: i0, template: ` +
+
+
+ +
+
+
{{ quote }}
+
+ + {{ blockquote_author }} +
{{ blockquote_author_details }}
+
+
+
+
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularComponent, decorators: [{ + type: Component, + args: [{ selector: 'vf-blockquote', template: ` +
+
+
+ +
+
+
{{ quote }}
+
+ + {{ blockquote_author }} +
{{ blockquote_author_details }}
+
+
+
+
+ ` }] + }], propDecorators: { id: [{ + type: Input + }], html: [{ + type: Input + }], text: [{ + type: Input + }], blockquote_text: [{ + type: Input + }], blockquote_author: [{ + type: Input + }], blockquote_author_href: [{ + type: Input + }], blockquote_author_details: [{ + type: Input + }], blockquote_author_imageurl: [{ + type: Input + }], override_class: [{ + type: Input + }] } }); + +class VfBlockquoteAngularModule { +} +VfBlockquoteAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); +VfBlockquoteAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, declarations: [VfBlockquoteAngularComponent], imports: [CommonModule], exports: [VfBlockquoteAngularComponent] }); +VfBlockquoteAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, imports: [CommonModule] }); +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VfBlockquoteAngularModule, decorators: [{ + type: NgModule, + args: [{ + declarations: [ + VfBlockquoteAngularComponent + ], + imports: [ + CommonModule + ], + exports: [ + VfBlockquoteAngularComponent + ] + }] + }] }); + +/* + * Public API Surface of vf-blockquote.angular + */ + +/** + * Generated bundle index. Do not edit. + */ + +export { VfBlockquoteAngularComponent, VfBlockquoteAngularModule }; +//# sourceMappingURL=vf-blockquote.angular.mjs.map diff --git a/components/vf-blockquote/vf-blockquote.angular/fesm2020/vf-blockquote.angular.mjs.map b/components/vf-blockquote/vf-blockquote.angular/fesm2020/vf-blockquote.angular.mjs.map new file mode 100644 index 0000000000..d17638415f --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/fesm2020/vf-blockquote.angular.mjs.map @@ -0,0 +1 @@ +{"version":3,"file":"vf-blockquote.angular.mjs","sources":["../../../projects/vf-blockquote.angular/src/lib/vf-blockquote.angular.component.ts","../../../projects/vf-blockquote.angular/src/lib/vf-blockquote.angular.module.ts","../../../projects/vf-blockquote.angular/src/public-api.ts","../../../projects/vf-blockquote.angular/src/vf-blockquote.angular.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'vf-blockquote',\n template: `\n
\n
\n
\n \"\"\n
\n
\n
{{ quote }}
\n
\n \n {{ blockquote_author }}\n
{{ blockquote_author_details }}
\n
\n
\n
\n
\n `,\n styles: [],\n})\nexport class VfBlockquoteAngularComponent implements OnInit {\n /* Initialize values based on input values */\n @Input() id: string | undefined;\n @Input() html = '';\n @Input() text = '';\n @Input() blockquote_text = '';\n @Input() blockquote_author = '';\n @Input() blockquote_author_href = '';\n @Input() blockquote_author_details = '';\n @Input() blockquote_author_imageurl = '';\n @Input() override_class = '';\n\n class = '';\n quote = '';\n\n ngOnInit(): void {\n //Initialize something\n }\n\n ngOnChanges(): void {\n this.setValues();\n }\n\n /* Set values as per input and updated changes */\n setValues(): void {\n /* Conditional styles, strings, nullables, arrays of styles */\n this.class = 'vf-blockquote';\n this.class += this.override_class ? this.override_class : '';\n\n /* Inner content of the quote based on whether HTML or Text */\n this.quote = this.blockquote_text\n ? this.blockquote_text\n : this.html\n ? this.html\n : this.text;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { VfBlockquoteAngularComponent } from './vf-blockquote.angular.component';\n\n\n\n@NgModule({\n declarations: [\n VfBlockquoteAngularComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [\n VfBlockquoteAngularComponent\n ]\n})\nexport class VfBlockquoteAngularModule { }\n","/*\n * Public API Surface of vf-blockquote.angular\n */\n\nexport * from './lib/vf-blockquote.angular.component';\nexport * from './lib/vf-blockquote.angular.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/index.d.ts b/components/vf-blockquote/vf-blockquote.angular/index.d.ts new file mode 100644 index 0000000000..afc65ca0cc --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/index.d.ts @@ -0,0 +1,5 @@ +/** + * Generated bundle index. Do not edit. + */ +/// +export * from './public-api'; diff --git a/components/vf-blockquote/vf-blockquote.angular/lib/vf-blockquote.angular.component.d.ts b/components/vf-blockquote/vf-blockquote.angular/lib/vf-blockquote.angular.component.d.ts new file mode 100644 index 0000000000..47cd460f6f --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/lib/vf-blockquote.angular.component.d.ts @@ -0,0 +1,20 @@ +import { OnInit } from '@angular/core'; +import * as i0 from "@angular/core"; +export declare class VfBlockquoteAngularComponent implements OnInit { + id: string | undefined; + html: string; + text: string; + blockquote_text: string; + blockquote_author: string; + blockquote_author_href: string; + blockquote_author_details: string; + blockquote_author_imageurl: string; + override_class: string; + class: string; + quote: string; + ngOnInit(): void; + ngOnChanges(): void; + setValues(): void; + static ɵfac: i0.ɵɵFactoryDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; +} diff --git a/components/vf-blockquote/vf-blockquote.angular/lib/vf-blockquote.angular.module.d.ts b/components/vf-blockquote/vf-blockquote.angular/lib/vf-blockquote.angular.module.d.ts new file mode 100644 index 0000000000..3a20bf1015 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/lib/vf-blockquote.angular.module.d.ts @@ -0,0 +1,8 @@ +import * as i0 from "@angular/core"; +import * as i1 from "./vf-blockquote.angular.component"; +import * as i2 from "@angular/common"; +export declare class VfBlockquoteAngularModule { + static ɵfac: i0.ɵɵFactoryDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵinj: i0.ɵɵInjectorDeclaration; +} diff --git a/components/vf-blockquote/vf-blockquote.angular/package.json b/components/vf-blockquote/vf-blockquote.angular/package.json new file mode 100644 index 0000000000..b9c950ac57 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/package.json @@ -0,0 +1,31 @@ +{ + "name": "vf-blockquote.angular", + "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^15.2.0", + "@angular/core": "^15.2.0" + }, + "dependencies": { + "tslib": "^2.3.0" + }, + "sideEffects": false, + "module": "fesm2015/vf-blockquote.angular.mjs", + "es2020": "fesm2020/vf-blockquote.angular.mjs", + "esm2020": "esm2020/vf-blockquote.angular.mjs", + "fesm2020": "fesm2020/vf-blockquote.angular.mjs", + "fesm2015": "fesm2015/vf-blockquote.angular.mjs", + "typings": "index.d.ts", + "exports": { + "./package.json": { + "default": "./package.json" + }, + ".": { + "types": "./index.d.ts", + "esm2020": "./esm2020/vf-blockquote.angular.mjs", + "es2020": "./fesm2020/vf-blockquote.angular.mjs", + "es2015": "./fesm2015/vf-blockquote.angular.mjs", + "node": "./fesm2015/vf-blockquote.angular.mjs", + "default": "./fesm2020/vf-blockquote.angular.mjs" + } + } +} \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.angular/public-api.d.ts b/components/vf-blockquote/vf-blockquote.angular/public-api.d.ts new file mode 100644 index 0000000000..9485a45294 --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.angular/public-api.d.ts @@ -0,0 +1,2 @@ +export * from './lib/vf-blockquote.angular.component'; +export * from './lib/vf-blockquote.angular.module'; diff --git a/components/vf-blockquote/vf-blockquote.config.yml b/components/vf-blockquote/vf-blockquote.config.yml index fe2e66f9e2..cc3d76fb03 100755 --- a/components/vf-blockquote/vf-blockquote.config.yml +++ b/components/vf-blockquote/vf-blockquote.config.yml @@ -3,10 +3,44 @@ label: Blockquote status: live context: + exampleMultiColumns: "false" component-type: element variants: - name: default context: - blockquote_text: '"Look back to move forwards" is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.' - blockquote_citation: 'Someone Really F. Amous said this.' + blockquote_text: '“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.”' + blockquote_author: 'Marion Burton' + blockquote_author_details: 'Title and other details' + angular: + react: + react: + react: + react: - {% if (blockquote_text) or (html) or (text) %} -

{{- (html) or (blockquote_text) | safe if (html) or (blockquote_text) else text -}}

- {% endif %} + +
- {% if blockquote_citation %} -
- - {{- blockquote_citation | safe -}} - -
- {% endif %} + {% if (blockquote_author_imageurl) %} +
+ +
+ {% endif %} +
+ {% if (blockquote_text) or (html) or (text) %} +
{{- (html) or (blockquote_text) | safe if (html) or (blockquote_text) else text -}}
+ {% endif %} +
+ {% if blockquote_author_href %} + +
{{ blockquote_author }}
+ + {% else %} +
{{ blockquote_author }}
+ {% endif %} + {% if blockquote_author_details %} +
{{ blockquote_author_details }}
+ {% endif %} +
+
+
diff --git a/components/vf-blockquote/vf-blockquote.react.js b/components/vf-blockquote/vf-blockquote.react.js new file mode 100644 index 0000000000..8e62d40f1e --- /dev/null +++ b/components/vf-blockquote/vf-blockquote.react.js @@ -0,0 +1,58 @@ +/* + * vf-blockquote react component + * See vf-extensions-react for usage guidance + * + */ + +function VfBlockquote({id, blockquote_text, text, html,blockquote_author, blockquote_author_href, blockquote_author_details, blockquote_author_imageurl, override_class} ) { + + /* Conditional styles, strings, nullables, arrays of styles */ + let classNames = "vf-blockquote"; + classNames += override_class ? override_class : ''; + + /* Inner content of the tag based on whether HTML or Text */ + const content = blockquote_text ? blockquote_text : html ? html : text; + + /* Conditional attributes will be only present iff they exist */ + const attributes = { + ...(id && { id }) + }; + return ( +
+
+ { + blockquote_author_imageurl + ? +
+ +
+ : '' + } +
+
{content}
+ +
+ { + blockquote_author_href + ? + +
{ blockquote_author }
+ + : +
{ blockquote_author }
+ } + { + blockquote_author_details + ? +
{ blockquote_author_details }
+ : '' + } +
+
+
+
+ ) + } + + export default VfBlockquote; + \ No newline at end of file diff --git a/components/vf-blockquote/vf-blockquote.scss b/components/vf-blockquote/vf-blockquote.scss index 0a73891e1b..c1d8015418 100755 --- a/components/vf-blockquote/vf-blockquote.scss +++ b/components/vf-blockquote/vf-blockquote.scss @@ -1,16 +1,55 @@ -// vf-blockquote - @import 'package.variables.scss'; -// Debug information from component's `package.json`: -// --- -/*! - * Component: #{map-get($componentInfo, 'name')} - * Version: #{map-get($componentInfo, 'version')} - * Location: #{map-get($componentInfo, 'location')} - */ .vf-blockquote { @include blockquote; + padding: 0px; + padding-left: 32px; + margin: 32px 0px; + color: #1A1C1A; + font-size: 28px; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.vf-blockquote::before { + border-left: 1px solid #d0d0ce; + left:8px; +} + +.vf-blockquote-flex-container { + display: flex; +} + +.vf-blockquote-flex-container footer { + margin-top: 24px; } +.vf-blockquote-flex-container .vf-blockquote_author__image { + margin-right: 24px; + max-height: 160px; + max-width: 160px; +} + +.vf-blockquote-flex-container .vf-blockquote_author__image img { + border-radius: 50%; + height: 160px; + width: 160px; + max-height: 160px; + max-width: 160px; +} + +.vf-blockquote_author__link { + @include inline-link(); + color: #2A57A3; +} + +.vf-blockquote_author_details { + font-size: 19px; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 400; + line-height: 26.6px; +} diff --git a/tools/vf-component-library/src/site/_includes/layouts/components.njk b/tools/vf-component-library/src/site/_includes/layouts/components.njk index 78251cabfd..9a4d7a0400 100644 --- a/tools/vf-component-library/src/site/_includes/layouts/components.njk +++ b/tools/vf-component-library/src/site/_includes/layouts/components.njk @@ -283,7 +283,7 @@ This approach is best for bare-bones Nunjucks environments, such as precompiled %}{% endraw %} - {% set angularComponents = "vf-badge, vf-banner, vf-hero, vf-button" %} + {% set angularComponents = "vf-badge, vf-banner, vf-hero, vf-button, vf-blockquote" %} {% if component.baseHandle in angularComponents %}
Angular syntax @@ -304,7 +304,7 @@ This approach is best for bare-bones Nunjucks environments, such as precompiled {% endif %}
{% endif %} - {% set reactComponents = "vf-card, vf-button, vf-back-to-top, vf-badge" %} + {% set reactComponents = "vf-card, vf-button, vf-back-to-top, vf-badge, vf-blockquote" %} {% if component.baseHandle in reactComponents %}
React syntax