From 32b47d0f3b8bd0b4ff4b701c277af9e7c0efa32e Mon Sep 17 00:00:00 2001 From: Chadima Ondrej Date: Fri, 27 Oct 2023 16:33:18 +0200 Subject: [PATCH] Feat(email-components): Add data-msys-linkname attribute to links --- .../src/components/Alert/Alert.ts | 1 + .../src/components/Alert/README.md | 13 ++++++----- .../components/Alert/stories/AlertProps.mjml | 7 ++++++ .../src/components/Button/Button.ts | 1 + .../src/components/Header/Header.ts | 4 +++- .../src/components/Header/README.md | 17 +++++++------- .../Header/stories/HeaderProps.mjml | 15 ++++++++---- .../src/components/Link/README.md | 23 ++++++++++--------- .../components/Link/stories/LinkProps.mjml | 7 ++++++ .../src/components/RatingItem/README.md | 17 +++++++------- .../src/components/RatingItem/RatingItem.ts | 4 +++- .../RatingItem/stories/RatingItemProps.mjml | 7 ++++++ .../src/components/ResultCard/README.md | 1 + .../src/components/ResultCard/ResultCard.ts | 10 +++++++- .../ResultCard/stories/ResultCardProps.mjml | 7 ++++++ 15 files changed, 94 insertions(+), 40 deletions(-) diff --git a/packages/email-components/src/components/Alert/Alert.ts b/packages/email-components/src/components/Alert/Alert.ts index cbfd801..8771786 100644 --- a/packages/email-components/src/components/Alert/Alert.ts +++ b/packages/email-components/src/components/Alert/Alert.ts @@ -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', }; diff --git a/packages/email-components/src/components/Alert/README.md b/packages/email-components/src/components/Alert/README.md index 0952cf3..243e328 100644 --- a/packages/email-components/src/components/Alert/README.md +++ b/packages/email-components/src/components/Alert/README.md @@ -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 | diff --git a/packages/email-components/src/components/Alert/stories/AlertProps.mjml b/packages/email-components/src/components/Alert/stories/AlertProps.mjml index 04cef33..5a51c58 100644 --- a/packages/email-components/src/components/Alert/stories/AlertProps.mjml +++ b/packages/email-components/src/components/Alert/stories/AlertProps.mjml @@ -20,6 +20,13 @@ success Color + + data-msys-linkname + string + + no + Data analytics attribute + element type HTMLElement - div | a diff --git a/packages/email-components/src/components/Button/Button.ts b/packages/email-components/src/components/Button/Button.ts index 49ad65e..f714db9 100644 --- a/packages/email-components/src/components/Button/Button.ts +++ b/packages/email-components/src/components/Button/Button.ts @@ -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,%)', diff --git a/packages/email-components/src/components/Header/Header.ts b/packages/email-components/src/components/Header/Header.ts index 569f202..570d9c2 100644 --- a/packages/email-components/src/components/Header/Header.ts +++ b/packages/email-components/src/components/Header/Header.ts @@ -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,%)', @@ -66,6 +67,7 @@ export default class Header extends BodyComponent { Image alignment - height - unit(px,%) - 24px + data-msys-linkname + string + no - Image height + Data analytics attribute externalLink @@ -30,6 +30,13 @@ no External link to some web page + + height + unit(px,%) + 24px + no + Image height + imageAlt string diff --git a/packages/email-components/src/components/Link/README.md b/packages/email-components/src/components/Link/README.md index 190147e..b63b9ea 100644 --- a/packages/email-components/src/components/Link/README.md +++ b/packages/email-components/src/components/Link/README.md @@ -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 | diff --git a/packages/email-components/src/components/Link/stories/LinkProps.mjml b/packages/email-components/src/components/Link/stories/LinkProps.mjml index 0d2582a..7d47ada 100644 --- a/packages/email-components/src/components/Link/stories/LinkProps.mjml +++ b/packages/email-components/src/components/Link/stories/LinkProps.mjml @@ -23,6 +23,13 @@ no Link color + + data-msys-linkname + string + + no + Data analytics attribute + href string diff --git a/packages/email-components/src/components/RatingItem/README.md b/packages/email-components/src/components/RatingItem/README.md index a45229f..9d7ba69 100644 --- a/packages/email-components/src/components/RatingItem/README.md +++ b/packages/email-components/src/components/RatingItem/README.md @@ -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 | diff --git a/packages/email-components/src/components/RatingItem/RatingItem.ts b/packages/email-components/src/components/RatingItem/RatingItem.ts index 30468e9..826b703 100644 --- a/packages/email-components/src/components/RatingItem/RatingItem.ts +++ b/packages/email-components/src/components/RatingItem/RatingItem.ts @@ -28,6 +28,7 @@ export default class RatingItem extends BodyComponent { static allowedAttributes = { alt: 'string', + 'data-msys-linkname': 'string', href: 'string', isTableCell: 'boolean', rel: 'string', @@ -50,10 +51,11 @@ export default class RatingItem extends BodyComponent { return this.generateTableCell(` no Image alternative descriptive text + + data-msys-linkname + string + + no + Data analytics attribute + href string diff --git a/packages/email-components/src/components/ResultCard/README.md b/packages/email-components/src/components/ResultCard/README.md index 65f428f..e944bb6 100644 --- a/packages/email-components/src/components/ResultCard/README.md +++ b/packages/email-components/src/components/ResultCard/README.md @@ -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 | diff --git a/packages/email-components/src/components/ResultCard/ResultCard.ts b/packages/email-components/src/components/ResultCard/ResultCard.ts index 09aee61..7d0f81d 100644 --- a/packages/email-components/src/components/ResultCard/ResultCard.ts +++ b/packages/email-components/src/components/ResultCard/ResultCard.ts @@ -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', @@ -110,7 +111,14 @@ export default class ResultCard extends BodyComponent { ${this.generateSubtitle()} - ${this.title} + + ${this.title} + ${this.generateSalary()} diff --git a/packages/email-components/src/components/ResultCard/stories/ResultCardProps.mjml b/packages/email-components/src/components/ResultCard/stories/ResultCardProps.mjml index 7a2fde4..72dbbe3 100644 --- a/packages/email-components/src/components/ResultCard/stories/ResultCardProps.mjml +++ b/packages/email-components/src/components/ResultCard/stories/ResultCardProps.mjml @@ -23,6 +23,13 @@ no Show bottom separator + + data-msys-linkname + string + + no + Data analytics attribute + employer string