@roadtrip/components 3.15.0 → 3.16.0

package/dist/collection/components/item/item.js

@@ -10,6 +10,8 @@ import { navigationChevron } from "../../../icons";
 export class Item {
   constructor() {
     this.multipleInputs = false;
+    this.titleItem = '';
+    this.text = '';
     this.button = false;
     this.detail = undefined;
     this.active = undefined;
@@ -19,6 +21,7 @@ export class Item {
     this.href = undefined;
     this.rel = undefined;
     this.lines = undefined;
+    this.layout = 'horizontal';
     this.target = undefined;
     this.type = 'button';
   }
@@ -28,7 +31,7 @@ export class Item {
     return (this.href !== undefined || this.button);
   }
   render() {
-    const { detail, detailIcon, download, lines, disabled, href, rel, target } = this;
+    const { detail, detailIcon, download, layout, lines, disabled, href, rel, target } = this;
     const clickable = this.isClickable();
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
     const attrs = (TagType === 'button')
@@ -45,7 +48,8 @@ export class Item {
       } }, h(TagType, Object.assign({}, attrs, { class: {
         'item-native': true,
         'item-active': this.active,
-      }, part: "native", disabled: disabled }), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && h("road-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+        [`layout-${layout}`]: layout !== undefined,
+      }, part: "native", disabled: disabled }), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null), h("div", { class: "input-wrapper-info" }, h("road-label", { class: "input-wrapper-info-title" }, this.titleItem), h("p", { class: "input-wrapper-info-text" }, this.text))), h("slot", { name: "end" }), showDetail && h("road-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
   }
   static get is() { return "road-item"; }
   static get encapsulation() { return "shadow"; }
@@ -61,6 +65,42 @@ export class Item {
   }
   static get properties() {
     return {
+      "titleItem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Title for the item"
+        },
+        "attribute": "title-item",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Description for the item"
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "button": {
         "type": "boolean",
         "mutable": false,
@@ -217,6 +257,24 @@ export class Item {
         "attribute": "lines",
         "reflect": false
       },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical'",
+          "resolved": "\"horizontal\" | \"vertical\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "How the bottom border should be displayed on the item."
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'horizontal'"
+      },
       "target": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/item/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;;GAMG;AAOH,MAAM,OAAO,IAAI;;0BAIW,KAAK;kBAKd,KAAK;;;sBAgBD,iBAAiB;oBAKnB,KAAK;;;;;;gBAqCsB,QAAQ;;EAEtD,qEAAqE;EACrE,qCAAqC;EAC7B,WAAW;IACjB,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;EAClD,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClF,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC;MAClC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;MACrB,CAAC,CAAC;QACA,QAAQ;QACR,IAAI;QACJ,GAAG;QACH,MAAM;OACP,CAAC;IACJ,MAAM,UAAU,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC;IAElD,OAAO,CACL,EAAC,IAAI,qBACY,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,KAAK,EAAE;QACL,CAAC,cAAc,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;OAC7C;MAED,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,aAAa,EAAE,IAAI,CAAC,MAAM;SAC3B,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ;QAElB,YAAM,IAAI,EAAC,OAAO,GAAE;QACpB,WAAK,KAAK,EAAC,YAAY;UACrB,WAAK,KAAK,EAAC,eAAe;YACxB,eAAO,CACH;UACN,YAAM,IAAI,EAAC,KAAK,GAAE;UACjB,UAAU,IAAI,iBAAW,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,kBAAkB,GAAa,CAC1F,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\n\n/**\n * @slot start - Placed to the left of all other content.\n * @slot - Content of the item.\n * @slot end - Placed to the right of all other content.\n *\n * @part native - The native HTML button, anchor or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-item',\n  styleUrl: 'item.css',\n  shadow: true,\n})\nexport class Item {\n\n  @Element() el!: HTMLRoadItemElement;\n\n  @State() multipleInputs = false;\n\n  /**\n   * If `true`, a button tag will be rendered and the item will be tappable.\n   */\n  @Prop() button = false;\n\n  /**\n   * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\n   * is `ios` and an `href` or `button` property is present.\n   */\n  @Prop() detail?: boolean;\n\n  /**\n   * If `true`, display an active state item\n   */\n  @Prop() active?: boolean;\n\n  /**\n   * The icon to use when `detail` is set to `true`.\n   */\n  @Prop() detailIcon = navigationChevron;\n\n  /**\n   * If `true`, the user cannot interact with the item.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * How the bottom border should be displayed on the item.\n   */\n  @Prop() lines?: 'full' | 'inset' | 'none';\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  // If the item has an href or button property it will render a native\n  // anchor or button that is clickable\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  render() {\n    const { detail, detailIcon, download, lines, disabled, href, rel, target } = this;\n    const clickable = this.isClickable();\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download,\n        href,\n        rel,\n        target,\n      };\n    const showDetail = detail !== undefined && detail;\n\n    return (\n      <Host\n        aria-disabled={disabled ? 'true' : null}\n        class={{\n          [`item-lines-${lines}`]: lines !== undefined,\n        }}\n      >\n        <TagType\n          {...attrs}\n          class={{\n            'item-native': true,\n            'item-active': this.active,\n          }}\n          part=\"native\"\n          disabled={disabled}\n        >\n          <slot name=\"start\"/>\n          <div class=\"item-inner\">\n            <div class=\"input-wrapper\">\n              <slot/>\n            </div>\n            <slot name=\"end\"/>\n            {showDetail && <road-icon icon={detailIcon} lazy={false} class=\"item-detail-icon\"></road-icon>}\n          </div>\n        </TagType>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;;GAMG;AAOH,MAAM,OAAO,IAAI;;0BAIW,KAAK;qBAKA,EAAE;gBAKP,EAAE;kBAKX,KAAK;;;sBAgBD,iBAAiB;oBAKnB,KAAK;;;;;kBA8BqB,YAAY;;gBAYX,QAAQ;;EAEtD,qEAAqE;EACrE,qCAAqC;EAC7B,WAAW;IACjB,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;EAClD,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC;MAClC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;MACrB,CAAC,CAAC;QACA,QAAQ;QACR,IAAI;QACJ,GAAG;QACH,MAAM;OACP,CAAC;IACJ,MAAM,UAAU,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC;IAElD,OAAO,CACL,EAAC,IAAI,qBACY,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,KAAK,EAAE;QACL,CAAC,cAAc,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;OAC7C;MAED,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,aAAa,EAAE,IAAI,CAAC,MAAM;UAC1B,CAAC,UAAU,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,SAAS;SAC3C,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ;QAElB,YAAM,IAAI,EAAC,OAAO,GAAE;QACpB,WAAK,KAAK,EAAC,YAAY;UACrB,WAAK,KAAK,EAAC,eAAe;YACxB,eAAO;YACP,WAAK,KAAK,EAAC,oBAAoB;cAC7B,kBAAY,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,SAAS,CAAc;cAC1E,SAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,IAAI,CAAK,CAC9C,CACF;UACN,YAAM,IAAI,EAAC,KAAK,GAAE;UACjB,UAAU,IAAI,iBAAW,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,kBAAkB,GAAa,CAC1F,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\n\n/**\n * @slot start - Placed to the left of all other content.\n * @slot - Content of the item.\n * @slot end - Placed to the right of all other content.\n *\n * @part native - The native HTML button, anchor or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-item',\n  styleUrl: 'item.css',\n  shadow: true,\n})\nexport class Item {\n\n  @Element() el!: HTMLRoadItemElement;\n\n  @State() multipleInputs = false;\n\n  /**\n   * Title for the item\n   */\n    @Prop() titleItem?: string = '';\n\n  /**\n   * Description for the item\n   */\n    @Prop() text?: string = '';\n\n  /**\n   * If `true`, a button tag will be rendered and the item will be tappable.\n   */\n  @Prop() button = false;\n\n  /**\n   * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\n   * is `ios` and an `href` or `button` property is present.\n   */\n  @Prop() detail?: boolean;\n\n  /**\n   * If `true`, display an active state item\n   */\n  @Prop() active?: boolean;\n\n  /**\n   * The icon to use when `detail` is set to `true`.\n   */\n  @Prop() detailIcon = navigationChevron;\n\n  /**\n   * If `true`, the user cannot interact with the item.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * How the bottom border should be displayed on the item.\n   */\n  @Prop() lines?: 'full' | 'inset' | 'none';\n  \n  /**\n   * How the bottom border should be displayed on the item.\n   */\n  @Prop() layout?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  // If the item has an href or button property it will render a native\n  // anchor or button that is clickable\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  render() {\n    const { detail, detailIcon, download, layout, lines, disabled, href, rel, target } = this;\n    const clickable = this.isClickable();\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download,\n        href,\n        rel,\n        target,\n      };\n    const showDetail = detail !== undefined && detail;\n\n    return (\n      <Host\n        aria-disabled={disabled ? 'true' : null}\n        class={{\n          [`item-lines-${lines}`]: lines !== undefined,\n        }}\n      >\n        <TagType\n          {...attrs}\n          class={{\n            'item-native': true,\n            'item-active': this.active,\n            [`layout-${layout}`]: layout !== undefined,\n          }}\n          part=\"native\"\n          disabled={disabled}\n        >\n          <slot name=\"start\"/>\n          <div class=\"item-inner\">\n            <div class=\"input-wrapper\">\n              <slot/>\n              <div class=\"input-wrapper-info\">\n                <road-label class=\"input-wrapper-info-title\">{this.titleItem}</road-label>\n                <p class=\"input-wrapper-info-text\">{this.text}</p>\n              </div>\n            </div>\n            <slot name=\"end\"/>\n            {showDetail && <road-icon icon={detailIcon} lazy={false} class=\"item-detail-icon\"></road-icon>}\n          </div>\n        </TagType>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/item/item.stories.js

@@ -15,13 +15,15 @@ export default {
 
 export const Playground = (args) => html`
 <road-item
-  class="bg-white"
   button="${ifDefined(args.button)}" 
   detail="${ifDefined(args.detail)}" 
   detail-icon="${ifDefined(args['detail-icon'])}" 
-  active="${ifDefined(args.active)}" 
+  active="${ifDefined(args.active)}"
+  layout="${ifDefined(args.layout)}"
   lines="${ifDefined(args.lines)}"
   disabled="${ifDefined(args.disabled)}"
+  title-item="${ifDefined(args['title-item'])}"
+  text="${ifDefined(args.text)}"
 >
   ${unsafeHTML(args.start)}
   ${unsafeHTML(args[' '])}
@@ -32,11 +34,14 @@ Playground.args = {
   button: null,
   detail: null,
   active: null,
+  layout: undefined,
   lines: undefined,
   'detail-icon': undefined,
   disabled: null,
   start: '<road-icon name="shipping"></road-icon>',
-  ' ': 'Mes achats',
+  'title-item': 'OPEL Insignia',
+  text: 'hatchback 2.0 CDTI 16V 130 cv',
+  ' ': ``,
 };
 Playground.argTypes = {
   button: {
@@ -48,6 +53,12 @@ Playground.argTypes = {
   active: {
     control: 'boolean',
   },
+  layout: {
+    options: ['horizontal', 'vertical'],
+    control: {
+      type: 'radio',
+    },
+  },
   lines: {
     options: ['full', 'inset', 'none'],
     control: {
@@ -68,6 +79,12 @@ Playground.argTypes = {
       type: null,
     },
   },
+  'title-item': {
+    control: 'text',
+  },
+  text: {
+    control: 'text',
+  },
   href: {
     control: {
       type: null,
@@ -153,16 +170,16 @@ Playground.argTypes = {
 };
 
 export const Compatibility = () => html`
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
+<road-item class="mb-16">
   <road-label>
     <p class="h8 my-4">OPEL Insignia</p>
     <p class="text-small text-truncate m-0">hatchback 2.0 CDTI 16V 130 cv</p>
   </road-label>
 
-  <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
+  <road-button slot="end" size="sm" color="secondary" class="ml-16">Modify</road-button>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
+<road-item class="mb-16">
   <road-icon slot="start" name="alert-valid-outline" color="success" class="mr-16"></road-icon>
 
   <road-label>
@@ -171,10 +188,10 @@ export const Compatibility = () => html`
     <p class="text-small text-truncate m-0">hatchback 2.0 CDTI 16V 130 cv</p>
   </road-label>
 
-  <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
+  <road-button slot="end" size="sm" color="secondary" class="ml-16">Modify</road-button>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
+<road-item class="mb-16">
   <road-icon slot="start" name="alert-error-outline" color="danger" class="mr-16"></road-icon>
 
   <road-label>
@@ -184,12 +201,12 @@ export const Compatibility = () => html`
     <a href="#" class="link">See compatible products</a>
   </road-label>
 
-  <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
+  <road-button slot="end" size="sm" color="secondary" class="ml-16">Modify</road-button>
 </road-item>
 `;
 
 export const ShoppingGuides = () => html`
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
+<road-item class="mb-16">
   <road-icon slot="start" name="vehicle-car-outline" class="mr-16"></road-icon>
 
   <road-label>
@@ -197,10 +214,10 @@ export const ShoppingGuides = () => html`
     <p class="text-small text-truncate m-0">hatchback 2.0 CDTI 16V 130 cv</p>
   </road-label>
 
-  <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
+  <road-icon slot="end" name="edit" color="secondary" size="sm" class="ml-16"></road-icon>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
+<road-item class="mb-16">
   <road-icon slot="start" name="vehicle-car-outline-front" class="mr-16"></road-icon>
 
   <road-label>
@@ -208,10 +225,10 @@ export const ShoppingGuides = () => html`
     <p class="h8 m-0">Front lighting</p>
   </road-label>
 
-  <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
+  <road-icon slot="end" name="edit" color="secondary" size="sm" class="ml-16"></road-icon>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
+<road-item class="mb-16">
   <road-icon slot="start" name="light" class="mr-16"></road-icon>
 
   <road-label>
@@ -219,6 +236,6 @@ export const ShoppingGuides = () => html`
     <p class="h8 m-0">Position light</p>
   </road-label>
 
-  <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
+  <road-icon slot="end" name="edit" color="secondary" size="sm" class="ml-16"></road-icon>
 </road-item>
 `;