fix(types): types should extend `svelte.JSX.SVGAttributes<SVGSVGEleme…

…nt>` (#62) * chore(deps-dev): upgrade deps * fix(template): only export title prop * Run "yarn prepack" * fix(test): update tabindex value
carbon-design-system · Apr 30, 2022 · 01cd61e · 01cd61e
1 parent e414dfa
commit 01cd61e
Show file tree

Hide file tree

Showing 6 changed files with 276 additions and 283 deletions.
diff --git a/PICTOGRAM_INDEX.md b/PICTOGRAM_INDEX.md
@@ -1,6 +1,6 @@
 # Pictogram Index
 
-> 803 pictograms from @carbon/pictograms@11.24.0
+> 803 pictograms from @carbon/pictograms@12.0.2
 
 ## Usage
 

diff --git a/package.json b/package.json
@@ -13,17 +13,17 @@
     "test:types": "svelte-check --workspace src"
   },
   "devDependencies": {
-    "@carbon/icon-helpers": "^10.28.0",
-    "@carbon/pictograms": "11.24.0",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.39",
+    "@carbon/icon-helpers": "^10.29.0",
+    "@carbon/pictograms": "12.0.2",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.42",
     "@types/carbon__icon-helpers": "^10.7.2",
-    "@types/node": "^17.0.21",
-    "sveld": "^0.13.4",
-    "svelte": "^3.46.4",
-    "svelte-check": "^2.4.5",
+    "@types/node": "^17.0.30",
+    "sveld": "^0.15.0",
+    "svelte": "^3.48.0",
+    "svelte-check": "^2.7.0",
     "ts-node-dev": "^1.1.8",
-    "typescript": "^4.6.2",
-    "vitest": "^0.6.0"
+    "typescript": "^4.6.4",
+    "vitest": "^0.10.0"
   },
   "repository": {
     "type": "git",

diff --git a/src/Test.svelte b/src/Test.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <AddDevice aria-label="Add Device" />
-<ActiveServer class="class" style="fill: red" title="" tabindex="0" />
+<ActiveServer class="class" style="fill: red" title="" tabindex={0} />
 <BerlinTower fill="#000" />
 
 <Airplane aria-label="Airplane" />

diff --git a/src/template.ts b/src/template.ts
@@ -4,23 +4,16 @@ import { PictogramOutput } from "@carbon/pictograms";
 export function template({ descriptor }: PictogramOutput) {
   return `<script>
   /**
-   * Set a tabindex value
+   * Specify the pictogram title.
    * @type {string}
    */
-  export let tabindex = undefined;
-
-  /**
-   * Set a custom SVG fill color
-   * @type {string}
-   */
-  export let fill = "${descriptor.attrs.fill}";
+  export let title = undefined;
 
   $: labelled =  $$props["aria-label"] || $$props["aria-labelledby"] || $$props["title"];
   $: attributes = {
     "aria-hidden": labelled ? undefined : true,
     role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : undefined,
-    tabindex
+    focusable: Number($$props["tabindex"]) === 0  ? true : undefined,
   };
 </script>
 
@@ -30,7 +23,8 @@ export function template({ descriptor }: PictogramOutput) {
   viewBox="${descriptor.attrs.viewBox}"
   width="${descriptor.attrs.width}"
   height="${descriptor.attrs.height}"
-  {fill}
+  fill="${descriptor.attrs.fill}"
+  {title}
   {...attributes}
   {...$$restProps}>
   ${descriptor.content.map((element) => toString(element)).join("")}

diff --git a/tests/template.test.ts b/tests/template.test.ts
@@ -27,5 +27,5 @@ const props: PictogramOutput = {
 };
 
 test("template", () => {
-  expect(template(props).replace(/\n/g, "")).toMatchInlineSnapshot('"<script>  /**   * Set a tabindex value   * @type {string}   */  export let tabindex = undefined;  /**   * Set a custom SVG fill color   * @type {string}   */  export let fill = \\"currentColor\\";  \$: labelled =  \$\$props[\\"aria-label\\"] || \$\$props[\\"aria-labelledby\\"] || \$\$props[\\"title\\"];  \$: attributes = {    \\"aria-hidden\\": labelled ? undefined : true,    role: labelled ? \\"img\\" : undefined,    focusable: tabindex === \\"0\\" ? true : undefined,    tabindex  };</script><svg  preserveAspectRatio=\\"xMidYMid meet\\"  xmlns=\\"http://www.w3.org/2000/svg\\"  viewBox=\\"0 0 32 32\\"  width=\\"64\\"  height=\\"64\\"  {fill}  {...attributes}  {...\$\$restProps}>  <path d=\\"M30.396,20.229l-1.933-0.518l0.186-0.695l1.933,0.518L30.396,20.229z M1.604,20.229l-0.187-0.695	l1.932-0.518l0.187,0.695L1.604,20.229z M31,16.36h-2v-0.72h2V16.36z M3,16.36H1v-0.72h2V16.36z M28.649,12.983l-0.186-0.695	l1.933-0.518l0.186,0.695L28.649,12.983z M3.35,12.983l-1.932-0.518l0.187-0.695l1.932,0.518L3.35,12.983z M24,31.36H8	c-0.199,0-0.36-0.161-0.36-0.36V1c0-0.199,0.161-0.36,0.36-0.36h16c0.199,0,0.36,0.161,0.36,0.36v30	C24.36,31.199,24.199,31.36,24,31.36z M8.36,30.64h15.28V1.36H8.36V30.64z M20,11.36h-8v-0.72h8V11.36z M20,8.36h-8V7.64h8V8.36z M20,5.36h-8V4.64h8V5.36z\\"></path></svg>"');
+  expect(template(props).replace(/\n/g, "")).toMatchInlineSnapshot('"<script>  /**   * Specify the pictogram title.   * @type {string}   */  export let title = undefined;  \$: labelled =  \$\$props[\\"aria-label\\"] || \$\$props[\\"aria-labelledby\\"] || \$\$props[\\"title\\"];  \$: attributes = {    \\"aria-hidden\\": labelled ? undefined : true,    role: labelled ? \\"img\\" : undefined,    focusable: Number(\$\$props[\\"tabindex\\"]) === 0  ? true : undefined,  };</script><svg  preserveAspectRatio=\\"xMidYMid meet\\"  xmlns=\\"http://www.w3.org/2000/svg\\"  viewBox=\\"0 0 32 32\\"  width=\\"64\\"  height=\\"64\\"  fill=\\"currentColor\\"  {title}  {...attributes}  {...\$\$restProps}>  <path d=\\"M30.396,20.229l-1.933-0.518l0.186-0.695l1.933,0.518L30.396,20.229z M1.604,20.229l-0.187-0.695	l1.932-0.518l0.187,0.695L1.604,20.229z M31,16.36h-2v-0.72h2V16.36z M3,16.36H1v-0.72h2V16.36z M28.649,12.983l-0.186-0.695	l1.933-0.518l0.186,0.695L28.649,12.983z M3.35,12.983l-1.932-0.518l0.187-0.695l1.932,0.518L3.35,12.983z M24,31.36H8	c-0.199,0-0.36-0.161-0.36-0.36V1c0-0.199,0.161-0.36,0.36-0.36h16c0.199,0,0.36,0.161,0.36,0.36v30	C24.36,31.199,24.199,31.36,24,31.36z M8.36,30.64h15.28V1.36H8.36V30.64z M20,11.36h-8v-0.72h8V11.36z M20,8.36h-8V7.64h8V8.36z M20,5.36h-8V4.64h8V5.36z\\"></path></svg>"');
 });