Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat(email-components): Add data-msys-linkname attribute to links #84

Merged
merged 1 commit into from
Nov 1, 2023
Merged

Feat(email-components): Add data-msys-linkname attribute to links #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/email-components/src/components/Alert/Alert.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/email-components/src/components/Header/Header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ export default class Header extends BodyComponent {

static allowedAttributes = {
alight: 'enum(left,right,center)',
height: 'unit(px,%)',
externalLink: 'string',
height: 'unit(px,%)',
imageAlt: 'string',
imageUrl: 'string',
width: 'unit(px,%)',
Expand Down
2 changes: 1 addition & 1 deletion packages/email-components/src/components/Header/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ The `mjc-header` is component for e-mail header with company logo.
| 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 |
| `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 |
14 changes: 7 additions & 7 deletions packages/email-components/src/components/Header/stories/HeaderProps.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@
<td>no</td>
<td>Image alignment</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>externalLink</code></td>
<td><code>string</code></td>
<td>-</td>
<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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading