-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(email-components): ImageLink component
- Loading branch information
1 parent
87c9d02
commit 4c4f466
Showing
9 changed files
with
144 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
packages/email-components/src/components/ImageLink/ImageLink.stories.mjml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <mjc-content> | ||
| <mj-column> | ||
| <mj-divider border-width="2px" border-color="#000000" /> | ||
| <mj-text><strong>COMPONENT: ImageLink</strong> - mjc-image-link</mj-text> | ||
| <mjc-image-link | ||
| src="https://ijobs.cz/static/images/email/logo-jobs.png?1" | ||
| alt="jobs.cz logo" | ||
| href="https://jobs.cz" | ||
| data-msys-linkname="header" | ||
| /> | ||
| </mj-column> | ||
| </mjc-content> |
78 changes: 78 additions & 0 deletions
78
packages/email-components/src/components/ImageLink/ImageLink.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { BodyComponent } from 'mjml-core'; | ||
| const { registerDependencies } = require('mjml-validator'); | ||
|
|
||
| registerDependencies({ | ||
| 'mj-wraper': ['mjc-image-link'], | ||
| 'mj-section': ['mjc-image-link'], | ||
| 'mj-column': ['mjc-image-link'], | ||
| 'mjc-image-link': [''], | ||
| }); | ||
|
|
||
| export default class ImageLink extends BodyComponent { | ||
| constructor(initialData = {}) { | ||
| super(initialData); | ||
| } | ||
|
|
||
| static componentName = 'mjc-image-link'; | ||
| static endingTag = true; | ||
| static dependencies = { | ||
| 'mj-column': ['mjc-image-link'], | ||
| 'mj-section': ['mjc-image-link'], | ||
| 'mj-wraper': ['mjc-image-link'], | ||
| 'mjc-image-link': [], | ||
| }; | ||
|
|
||
| static allowedAttributes = { | ||
| alt: 'string', | ||
| 'data-msys-linkname': 'string', | ||
| href: 'string', | ||
| name: 'string', | ||
| src: 'string', | ||
| srcset: 'string', | ||
| sizes: 'string', | ||
| title: 'string', | ||
| rel: 'string', | ||
| align: 'enum(left,center,right)', | ||
| border: 'string', | ||
| 'border-bottom': 'string', | ||
| 'border-left': 'string', | ||
| 'border-right': 'string', | ||
| 'border-top': 'string', | ||
| 'border-radius': 'unit(px,%){1,4}', | ||
| 'container-background-color': 'color', | ||
| 'fluid-on-mobile': 'boolean', | ||
| padding: 'unit(px,%){1,4}', | ||
| 'padding-bottom': 'unit(px,%)', | ||
| 'padding-left': 'unit(px,%)', | ||
| 'padding-right': 'unit(px,%)', | ||
| 'padding-top': 'unit(px,%)', | ||
| target: 'string', | ||
| width: 'unit(px)', | ||
| height: 'unit(px,auto)', | ||
| 'max-height': 'unit(px,%)', | ||
| 'font-size': 'unit(px)', | ||
| usemap: 'string', | ||
| }; | ||
|
|
||
| render() { | ||
| const { href, rel, target, name, ['data-msys-linkname']: dataMsysLinkname, ...restAttributes } = this.attributes; | ||
|
|
||
| return ` | ||
| <a | ||
| ${this.htmlAttributes({ | ||
| href, | ||
| target, | ||
| rel, | ||
| name, | ||
| 'data-msys-linkname': dataMsysLinkname, | ||
| })} | ||
| > | ||
| ${this.renderMJML(` | ||
| <mj-image | ||
| ${this.htmlAttributes(restAttributes)} | ||
| /> | ||
| `)} | ||
| </a> | ||
| `; | ||
| } | ||
| } |
22 changes: 22 additions & 0 deletions
22
packages/email-components/src/components/ImageLink/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # IMAGELINK | ||
|
|
||
| The `mjc-image-link` is extend of the `mj-image` component and add some custom attributes. | ||
|
|
||
| ```mjml | ||
| <mjc-image-link | ||
| src="https://ijobs.cz/static/images/email/logo-jobs.png?1" | ||
| alt="jobs.cz logo" | ||
| href="https://jobs.cz" | ||
| data-msys-linkname="header" | ||
| /> | ||
| ``` | ||
|
|
||
| ## Available props | ||
|
|
||
| | Prop name | Type | Default | Required | Description | | ||
| | -------------------- | -------- | ------- | -------- | ------------------------ | | ||
| | `data-msys-linkname` | `string` | - | no | Data analytics attribute | | ||
|
|
||
| You can add all attributes as to `mj-image` component look at the [mj-image][image-doc] documentation in MJML README. | ||
|
|
||
| [image-doc]: https://documentation.mjml.io/#mj-image |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters