Skip to content

Commit

Permalink
Feat(email-components): Add data-msys-linkname attribute to links
Browse files Browse the repository at this point in the history
  • Loading branch information
@chadimaOndrej
chadimaOndrej committed Oct 27, 2023
1 parent 9be0d59 commit 32b47d0
Show file tree
Hide file tree
Showing 15 changed files with 94 additions and 40 deletions.
1 change: 1 addition & 0 deletions packages/email-components/src/components/Alert/Alert.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default class Alert extends BodyComponent {
static allowedAttributes = {
align: 'enum(left,center,right)',
color: 'enum(success,informative,warning,danger)',
'data-msys-linkname': 'string',
elementType: 'enum(div,a)',
href: 'string',
};
Expand Down
13 changes: 7 additions & 6 deletions packages/email-components/src/components/Alert/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ The `mjc-alert` component is alert for e-mail template.

## Available props

| Prop name | Type | Default | Required | Description |
| ------------- | --------------------------------------------- | --------- | -------- | ------------- |
| `align` | `left \| center \| right` | `left` | no | Content align |
| `color` | `success \| informative \| warning \| danger` | `success` | no | Color |
| `elementType` | `HTMLElement - div \| a` | `div` | no | HTML tag |
| `href` | `string` | - | no | Link to url |
| Prop name | Type | Default | Required | Description |
| -------------------- | --------------------------------------------- | --------- | -------- | ------------------------ |
| `align` | `left \| center \| right` | `left` | no | Content align |
| `color` | `success \| informative \| warning \| danger` | `success` | no | Color |
| `data-msys-linkname` | `string` | | no | Data analytics attribute |
| `elementType` | `HTMLElement - div \| a` | `div` | no | HTML tag |
| `href` | `string` | - | no | Link to url |
7 changes: 7 additions & 0 deletions packages/email-components/src/components/Alert/stories/AlertProps.mjml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@
<td><code>success</code></td>
<td>Color</td>
</tr>
<tr>
<td>data-msys-linkname</td>
<td><code>string</code></td>
<td></td>
<td>no</td>
<td>Data analytics attribute</td>
</tr>
<tr>
<td><code>element type</code></td>
<td><code>HTMLElement - div | a</code></td>
Expand Down
1 change: 1 addition & 0 deletions packages/email-components/src/components/Button/Button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default class Button extends BodyComponent {
static allowedAttributes = {
align: 'enum(left,center,right)',
color: 'enum(primary,secondary)',
'data-msys-linkname': 'string',
href: 'string',
'padding-bottom': 'unit(px,%)',
'padding-top': 'unit(px,%)',
Expand Down
4 changes: 3 additions & 1 deletion packages/email-components/src/components/Header/Header.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@ export default class Header extends BodyComponent {

static allowedAttributes = {
alight: 'enum(left,right,center)',
height: 'unit(px,%)',
'data-msys-linkname': 'string',
externalLink: 'string',
height: 'unit(px,%)',
imageAlt: 'string',
imageUrl: 'string',
width: 'unit(px,%)',
Expand All @@ -66,6 +67,7 @@ export default class Header extends BodyComponent {
<mj-image
align="${this.align}"
alt="${this.imageAlt}"
data-msys-linkname="${this.getAttribute('data-msys-linkname')}"
height="${this.height}"
href="${this.externalLink}"
padding="0"
Expand Down
17 changes: 9 additions & 8 deletions packages/email-components/src/components/Header/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ The `mjc-header` is component for e-mail header with company logo.

## Available props

| Prop name | Type | Default | Required | Description |
| -------------- | ------------------------- | -------- | -------- | ---------------------------------- |
| `align` | `left \| center \| right` | `center` | no | Image aligment |
| `height` | `unit(px,%)` | `24px` | no | Image height |
| `externalLink` | `string` | - | no | External link to some web page |
| `imageAlt` | `string` | - | no | Image alternative descriptive text |
| `imageUrl` | `string` | - | yes | Url to image |
| `width` | `unit(px,%)` | `60px` | no | Image width |
| Prop name | Type | Default | Required | Description |
| -------------------- | ------------------------- | -------- | -------- | ---------------------------------- |
| `align` | `left \| center \| right` | `center` | no | Image aligment |
| `data-msys-linkname` | `string` | | no | Data analytics attribute |
| `externalLink` | `string` | - | no | External link to some web page |
| `height` | `unit(px,%)` | `24px` | no | Image height |
| `imageAlt` | `string` | - | no | Image alternative descriptive text |
| `imageUrl` | `string` | - | yes | Url to image |
| `width` | `unit(px,%)` | `60px` | no | Image width |
15 changes: 11 additions & 4 deletions packages/email-components/src/components/Header/stories/HeaderProps.mjml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@
<td>Image alignment</td>
</tr>
<tr>
<td><code>height</code></td>
<td><code>unit(px,%)</code></td>
<td><code>24px</code></td>
<td>data-msys-linkname</td>
<td><code>string</code></td>
<td></td>
<td>no</td>
<td>Image height</td>
<td>Data analytics attribute</td>
</tr>
<tr>
<td><code>externalLink</code></td>
Expand All @@ -30,6 +30,13 @@
<td>no</td>
<td>External link to some web page</td>
</tr>
<tr>
<td><code>height</code></td>
<td><code>unit(px,%)</code></td>
<td><code>24px</code></td>
<td>no</td>
<td>Image height</td>
</tr>
<tr>
<td><code>imageAlt</code></td>
<td><code>string</code></td>
Expand Down
23 changes: 12 additions & 11 deletions packages/email-components/src/components/Link/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ The `mjc-link` component to create link.

## Available props

| Name | Type | Default | Required | Description |
| ---------------- | ------------------------------------ | ----------- | -------- | --------------------------------------------------------------- |
| `align` | `left \| center \| right` | `left` | no | Text aligment |
| `color` | `primary \| secondary \| inverted` | `primary` | no | Link color |
| `href` | `string` | - | yes | Link to url |
| `padding-bottom` | `unit(px,%)` | - | no | Bottom spacing |
| `padding-top` | `unit(px,%)` | - | no | Top spacing |
| `padding` | `unit(px){1,4}` | - | no | Spacing |
| `rel` | `string` | - | no | Relationship between a linked resource and the current document |
| `size` | `xsmall \| small \| medium \| large` | `medium` | no | Size of the link |
| `underline` | `underline \| none` | `underline` | no | Is link underline |
| Name | Type | Default | Required | Description |
| -------------------- | ------------------------------------ | ----------- | -------- | --------------------------------------------------------------- |
| `align` | `left \| center \| right` | `left` | no | Text aligment |
| `color` | `primary \| secondary \| inverted` | `primary` | no | Link color |
| `data-msys-linkname` | `string` | - | no | Data analytics attribute |
| `href` | `string` | - | yes | Link to url |
| `padding-bottom` | `unit(px,%)` | - | no | Bottom spacing |
| `padding-top` | `unit(px,%)` | - | no | Top spacing |
| `padding` | `unit(px){1,4}` | - | no | Spacing |
| `rel` | `string` | - | no | Relationship between a linked resource and the current document |
| `size` | `xsmall \| small \| medium \| large` | `medium` | no | Size of the link |
| `underline` | `underline \| none` | `underline` | no | Is link underline |
7 changes: 7 additions & 0 deletions packages/email-components/src/components/Link/stories/LinkProps.mjml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@
<td>no</td>
<td>Link color</td>
</tr>
<tr>
<td>data-msys-linkname</td>
<td><code>string</code></td>
<td></td>
<td>no</td>
<td>Data analytics attribute</td>
</tr>
<tr>
<td><code>href</code></td>
<td><code>string</code></td>
Expand Down
17 changes: 9 additions & 8 deletions packages/email-components/src/components/RatingItem/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@ The `mjc-rating-item` is a component with the text below the icon and with the l

## Available props for mjc-rating-item

| Prop name | Type | Default | Required | Description |
| ------------- | --------- | ------- | -------- | ------------------------------------------------------------------------------------------------------- |
| `alt` | `string` | - | no | Image alternative descriptive text |
| `href` | `string` | - | yes | Link to url |
| `isTableCell` | `boolean` | `false` | no | Render RatingItem as table cell when being used in combination with Rating component as parent directly |
| `rel` | `string` | - | no | Relationship between a linked resource and the current document |
| `src` | `string` | - | yes | Image source |
| `title` | `string` | `div` | no | Text located below icon |
| Prop name | Type | Default | Required | Description |
| -------------------- | --------- | ------- | -------- | ------------------------------------------------------------------------------------------------------- |
| `alt` | `string` | - | no | Image alternative descriptive text |
| `data-msys-linkname` | `string` | | no | Data analytics attribute |
| `href` | `string` | - | yes | Link to url |
| `isTableCell` | `boolean` | `false` | no | Render RatingItem as table cell when being used in combination with Rating component as parent directly |
| `rel` | `string` | - | no | Relationship between a linked resource and the current document |
| `src` | `string` | - | yes | Image source |
| `title` | `string` | `div` | no | Text located below icon |
4 changes: 3 additions & 1 deletion packages/email-components/src/components/RatingItem/RatingItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default class RatingItem extends BodyComponent {

static allowedAttributes = {
alt: 'string',
'data-msys-linkname': 'string',
href: 'string',
isTableCell: 'boolean',
rel: 'string',
Expand All @@ -50,10 +51,11 @@ export default class RatingItem extends BodyComponent {
return this.generateTableCell(`
<a
${this.htmlAttributes({
class: 'RatingItem__link',
'data-msys-linkname': this.getAttribute('data-msys-linkname'),
href: this.href,
rel: this.rel,
target: '_blank',
class: 'RatingItem__link',
})}
>
<img
Expand Down
7 changes: 7 additions & 0 deletions packages/email-components/src/components/RatingItem/stories/RatingItemProps.mjml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@
<td>no</td>
<td>Image alternative descriptive text</td>
</tr>
<tr>
<td>data-msys-linkname</td>
<td><code>string</code></td>
<td></td>
<td>no</td>
<td>Data analytics attribute</td>
</tr>
<tr>
<td><code>href</code></td>
<td><code>string</code></td>
Expand Down
1 change: 1 addition & 0 deletions packages/email-components/src/components/ResultCard/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ The `mjc-result-card` is component to render result card in your emails.
| ------------------------------- | --------------- | ------- | -------- | --------------------------------------------------------- |
| badge | `string` | | no | Your badge text |
| bottomDivider | `true \| false` | `false` | no | Show bottom divider |
| data-msys-linkname | `string` | | no | Data analytics attribute |
| employer | `string` | | yes | Emloyer name |
| link | `string` | | yes | Link to url |
| location | `string` | | no | Location |
Expand Down
10 changes: 9 additions & 1 deletion packages/email-components/src/components/ResultCard/ResultCard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default class ResultCard extends BodyComponent {
static allowedAttributes = {
badge: 'string',
bottomDivider: 'boolean',
'data-msys-linkname': 'string',
employer: 'string',
link: 'string',
location: 'string',
Expand Down Expand Up @@ -110,7 +111,14 @@ export default class ResultCard extends BodyComponent {
<mj-divider border-width="1px" border-style="solid" border-color="#E2E8ED" />
<mjc-spacer />
${this.generateSubtitle()}
<mjc-link underline="none" href="${this.link}" size="large">${this.title}</mjc-link>
<mjc-link
data-msys-linkname="${this.getAttribute('data-msys-linkname')}"
href="${this.link}"
size="large"
underline="none"
>
${this.title}
</mjc-link>
<mjc-spacer size="small" />
<mjc-row>
${this.generateSalary()}
Expand Down
7 changes: 7 additions & 0 deletions packages/email-components/src/components/ResultCard/stories/ResultCardProps.mjml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@
<td>no</td>
<td>Show bottom separator</td>
</tr>
<tr>
<td>data-msys-linkname</td>
<td><code>string</code></td>
<td></td>
<td>no</td>
<td>Data analytics attribute</td>
</tr>
<tr>
<td>employer</td>
<td><code>string</code></td>
Expand Down

0 comments on commit 32b47d0

Please sign in to comment.