Skip to content

Commit

Permalink
Issue/1945 : Updated changes for vf-blockquote component (#1969)
Browse files Browse the repository at this point in the history 
* Issue 1945: Implemented changes for  Blockquote component as per new requirementss

Blockquote implementation as per new requirements alongwith  Angular, React support and documentation update

* Issue 1945 : Updated SCSS file to get it included

* Issue 1945 : Updated changes for vf-blockquote component

Removed the custom CSS and modified the way to add fonts

* Issue 1945 : Updated css to override default display property

* Issue  1945 : Updated CSS for display property
  • Loading branch information
@bhushan-ebi
bhushan-ebi authored Oct 9, 2023
1 parent 6ca3da3 commit ec135c6
Show file tree
Hide file tree
Showing 12 changed files with 149 additions and 216 deletions.
102 changes: 45 additions & 57 deletions components/vf-blockquote/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ The blockquote is designed to be used on a white background, it is advisable to
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
1. Install `yarn add @visual-framework/vf-blockquote`
2. Import in your app.module
```
import { VfBlockquoteAngularModule } from '@visual-framework/vf-blockquote/vf-blockquote.angular';
Expand All @@ -48,85 +48,73 @@ This package was generated with Angular version 15.2.0 and has been tested on ap
...
})
```
3. can be used as
3. Can be used as
```
<vf-blockquote [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_imageurl]="'./assets/vf-icon--avatar.svg'" [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
<vf-blockquote [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_imageurl]="'./assets/vf-icon--avatar.svg'" [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
```
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');
}
4. Styling changes

In angular.json add the following in architect -> build -> options -> assets:
```
{
"glob": "**/*",
"input": "./node_modules/@visual-framework/vf-font-plex-mono/assets/IBM-Plex-Mono",
"output": "./assets/fonts/IBM-Plex-Mono"
},
{
"glob": "**/*",
"input": "./node_modules/@visual-framework/vf-font-plex-sans/assets/IBM-Plex-Sans",
"output": "./assets/fonts/IBM-Plex-Sans"
}
```
You should install [vf-sass-starter](https://stable.visual-framework.dev/components/vf-sass-starter) for the styles and then add below code in your main SCSS file.
```
$vf-font-plex-mono-prefix: '/assets/fonts';
$vf-font-plex-sans-prefix: '/assets/fonts';
@import '../node_modules/@visual-framework//vf-sass-starter/index.scss';
@import "../node_modules/@visual-framework/vf-text/vf-text.scss";
@import "../node_modules/@visual-framework/vf-profile/vf-profile.scss";
@import '../node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss';
```

5. Usage:

```
<vf-blockquote [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_imageurl]="'./assets/vf-icon--avatar.svg'"
[blockquote_author_href]="'#'"
[blockquote_author_details]="'Title and other details'"/>
<vf-blockquote [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_imageurl]="'./assets/vf-icon--avatar.svg'" [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
```

### 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
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
```
<VfBlockquote 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_imageurl='vf-icon--avatar.svg'
blockquote_author_href='#'
blockquote_author_details='Title and other details'/>
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');
}
<VfBlockquote 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_imageurl="vf-icon--avatar.svg" blockquote_author_href="#" blockquote_author_details="Title and other details"/>
```
4. Styling changes

You should install [vf-sass-starter](https://stable.visual-framework.dev/components/vf-sass-starter) for the styles and then add below code in your main SCSS file
```
$vf-font-plex-mono-prefix: '~@visual-framework/vf-font-plex-mono/assets';
$vf-font-plex-sans-prefix: '~@visual-framework/vf-font-plex-sans/assets';
@import '~@visual-framework//vf-sass-starter/index.scss';
@import "~@visual-framework/vf-profile/vf-profile.scss";
@import "~@visual-framework/vf-text/vf-text.scss";
@import '~@visual-framework/vf-blockquote/vf-blockquote.scss';
```

5. Usage:

```
<VfBlockquote 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_imageurl='vf-icon--avatar.svg'
blockquote_author_href='#'
blockquote_author_details='Title and other details'/>
<VfBlockquote 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_imageurl="vf-icon--avatar.svg" blockquote_author_href="#" blockquote_author_details="Title and other details"/>
```

## Install
Expand Down
6 changes: 5 additions & 1 deletion components/vf-blockquote/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,9 @@
"fractal",
"component"
],
"gitHead": "6059bda1bd78e57943b66be03c3f0208399d0afd"
"gitHead": "6059bda1bd78e57943b66be03c3f0208399d0afd",
"dependencies": {
"@visual-framework/vf-profile": "^1.4.0",
"@visual-framework/vf-text": "^1.1.0"
}
}
Loading

0 comments on commit ec135c6

Please sign in to comment.