feat(ccd): added new component (#2495)

Author: agliga

.changeset/nervous-pianos-shout.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(ccd): new component

dist/ccd/ccd.css

@@ -0,0 +1,38 @@
+.ccd {
+    display: inline-flex;
+    gap: 8px;
+}
+
+.ccd__charger-icon {
+    height: 78px;
+    width: 58px;
+}
+
+.ccd__description-figure {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 55px;
+}
+
+.ccd__top-icon {
+    height: 24px;
+    width: 35px;
+}
+
+.ccd__body {
+    align-items: center;
+    border: 1px solid var(--color-foreground-primary);
+    border-radius: 1.5px;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.4375rem;
+    font-weight: var(--font-weight-bold);
+    gap: 2px;
+    height: 53px;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    width: 53px;
+}

dist/svg/icon/icon-ccd-charger-included.svg

@@ -45,7 +45,7 @@
         "lint:css": "stylelint dist --config .stylelintrc",
         "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
         "format": "npx prettier --write .",
-        "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:svgToDocs && npm run copy:tokensToDist",
+        "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:svgToDocs && npm run copy:tokensToDist && npm run copy:assetsToStorybook",
         "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins && ncp src/sass/gh dist/gh",
         "copy:assetsToStorybook": "node scripts storybook-copy",
         "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",

dist/svg/icon/icon-ccd-charger-not-included.svg

@@ -2,11 +2,11 @@
 <svg xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient
-      id="ref-ai-spectrum-20-colored"
-      x1="26.984"
-      y1="14.065"
-      x2="14.21"
-      y2="27.71"
+      id="ref-ai-spectrum-16-colored"
+      x1="21.21"
+      y1="11.161"
+      x2="11.274"
+      y2="21.774"
       gradientUnits="userSpaceOnUse"
     >
       <stop offset=".098" stop-color="#FFD80E" />
@@ -16,7 +16,7 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-16-colored"
+      id="ref-ai-spectrum-filled-16-colored"
       x1="21.21"
       y1="11.161"
       x2="11.274"
@@ -43,6 +43,20 @@
       <stop offset=".562" stop-color="#0968F6" />
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
+    <linearGradient
+      id="ref-ai-spectrum-20-colored"
+      x1="26.984"
+      y1="14.065"
+      x2="14.21"
+      y2="27.71"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
     <linearGradient
       id="ref-ai-spectrum-24-colored"
       x1="32.758"
@@ -58,7 +72,7 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-filled-16-colored"
+      id="ref-ai-spectrum-thin-16-colored"
       x1="21.21"
       y1="11.161"
       x2="11.274"
@@ -86,25 +100,11 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-thin-16-colored"
-      x1="21.21"
-      y1="11.161"
-      x2="11.274"
-      y2="21.774"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop offset=".098" stop-color="#FFD80E" />
-      <stop offset=".267" stop-color="#FF4242" />
-      <stop offset=".418" stop-color="#993EE0" />
-      <stop offset=".562" stop-color="#0968F6" />
-      <stop offset=".785" stop-color="#4EE04B" />
-    </linearGradient>
-    <linearGradient
-      id="ref-cb-32-colored"
-      x1="50"
+      id="ref-cb-24-colored"
+      x1="38"
       y1="0"
-      x2="-.978"
-      y2="32"
+      x2="-.452"
+      y2="24.459"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#192660" />
@@ -130,11 +130,11 @@
       <stop offset="1" stop-color="#03944B" />
     </linearGradient>
     <linearGradient
-      id="ref-cb-24-colored"
-      x1="38"
+      id="ref-cb-12-colored"
+      x1="20"
       y1="0"
-      x2="-.452"
-      y2="24.459"
+      x2=".373"
+      y2="13.142"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#192660" />
@@ -145,11 +145,11 @@
       <stop offset="1" stop-color="#03944B" />
     </linearGradient>
     <linearGradient
-      id="ref-cb-12-colored"
-      x1="20"
+      id="ref-cb-32-colored"
+      x1="50"
       y1="0"
-      x2=".373"
-      y2="13.142"
+      x2="-.978"
+      y2="32"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#192660" />
@@ -1305,6 +1305,25 @@
       fill="#fff"
     />
   </symbol>
+  <symbol viewBox="0 0 58 78" id="icon-ccd-charger-included">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 0h58v78H0V0Zm1 1v76h56V1H1Zm7 28.75c0-.966.784-1.75 1.75-1.75H15V18h5V8h4v10h10V8h4v10h5v10h5.25c.967 0 1.75.784 1.75 1.75v38.5A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5ZM23 18V9h-2v9h2Zm14 0h-2V9h2v9Zm5 10v-9H16v9h26ZM9.75 29a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-38.5a.75.75 0 0 0-.75-.75H9.75Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 58 78" id="icon-ccd-charger-not-included">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M.5 0H0v78h58V0H.5ZM1 2.686V77h54.758l-5.914-8.026A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5c0-.966.784-1.75 1.75-1.75H15v-6.314l-14-19Zm15 20.357V28h3.653L16 23.043ZM22.137 28 16 19.671V19h26v9H22.137Zm-1.748 1H9.75a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-.421L20.39 29ZM49 64.457 22.874 29H48.25a.75.75 0 0 1 .75.75v34.707Zm1 1.357V29.75A1.75 1.75 0 0 0 48.25 28H43V18h-5V8h-4v10H24V8h-4v10h-5v.314L2.242 1H57v74.314l-7-9.5ZM37 9v9h-2V9h2Zm-16 9h2V9h-2v9Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 35 25" fill="none" id="icon-ccd-top">
+    <path d="M0.5 25V13.5H34.5V25" stroke-width="1" />
+    <path d="M6.5 13V0.5H10.5V13" stroke-width="1" />
+    <path d="M24.5 13V0.5H28.5V13" stroke-width="1" />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-certified-recycled-16">
     <path
       d="M12.845 5.55a.989.989 0 0 0-.02-.036l-2.202-3.968C9.48-.513 6.52-.513 5.377 1.546L4.285 3.515a1 1 0 0 0 1.748.97l1.093-1.968a1 1 0 0 1 1.748 0l2.172 3.913a1 1 0 0 0-.365 1.958l2.04.572a1 1 0 0 0 1.226-.636l.73-1.978a1 1 0 0 0-1.832-.795ZM14.726 10a1 1 0 0 0-.874 1.485l.016.03A1 1 0 0 1 12.994 13H3.006a1 1 0 0 1-.874-1.485l1.134-2.043a1 1 0 0 0 1.833-.78l-.646-1.993a1 1 0 0 0-1.19-.671l-2.067.503a1 1 0 0 0 .322 1.968L.383 10.544C-.727 12.544.72 15 3.006 15h9.988c2.287 0 3.733-2.456 2.623-4.456l-.016-.03a1 1 0 0 0-.875-.514Z"