@common-origin/design-system 3.2.0 → 3.3.0

package/dist/components/atoms/Icon/Icon.d.mts

@@ -8,7 +8,7 @@ export interface IconProps {
     /**
      * Makes the icon meaningful: it's announced as an image with this name. Without `aria-label`
      * or `title`, the icon is decorative and hidden from assistive technology (#85). Use a
-     * human-readable name, never the internal icon name; `icons.json`'s `ariaLabelDefault` is a
+     * human-readable name, never the internal icon name; the icon's `ariaLabelDefault` in `iconSet` is a
      * starting point.
      */
     'aria-label'?: string;

package/dist/components/atoms/Icon/Icon.d.ts

@@ -8,7 +8,7 @@ export interface IconProps {
     /**
      * Makes the icon meaningful: it's announced as an image with this name. Without `aria-label`
      * or `title`, the icon is decorative and hidden from assistive technology (#85). Use a
-     * human-readable name, never the internal icon name; `icons.json`'s `ariaLabelDefault` is a
+     * human-readable name, never the internal icon name; the icon's `ariaLabelDefault` in `iconSet` is a
      * starting point.
      */
     'aria-label'?: string;

package/dist/components/atoms/Icon/Icon.mjs

@@ -1,10 +1,11 @@
 'use client';
 import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import iconsJson from '../../../styles/icons.json.mjs';
+import { iconSet } from '../../../types/iconSet.mjs';
 
 var IconStyled = /*#__PURE__*/styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -12,7 +13,10 @@ var IconStyled = /*#__PURE__*/styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"
+// How each paint draws, in currentColor. Lines are 2px on the 24px grid, so they scale with the
+// icon (decision 0058).
+])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -45,6 +49,25 @@ var IconStyled = /*#__PURE__*/styled.span.withConfig({
       return tokens.semantic.color.icon["default"];
   }
 });
+// How each paint draws, in currentColor. Lines are 2px on the 24px grid, so they scale with the
+// icon (decision 0058).
+var LINE = {
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round'
+};
+var PAINT = {
+  stroke: __assign({
+    fill: 'none'
+  }, LINE),
+  fill: {
+    fill: 'currentColor'
+  },
+  both: __assign({
+    fill: 'currentColor'
+  }, LINE)
+};
 var Icon = function Icon(_a) {
   var name = _a.name,
     _b = _a.size,
@@ -56,10 +79,9 @@ var Icon = function Icon(_a) {
     dataTestId = _a["data-testid"];
   // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
   var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
-  // Get the icon data from the JSON file
-  var iconData = iconsJson[name];
-  if (!iconData) {
-    console.warn("Icon \"".concat(name, "\" not found in icons.json"));
+  var icon = iconSet[name];
+  if (!icon) {
+    console.warn("Icon \"".concat(name, "\" not found in iconSet"));
     return jsx(IconStyled, {
       "$size": size,
       "$iconColor": iconColor,
@@ -72,9 +94,8 @@ var Icon = function Icon(_a) {
     "data-testid": dataTestId,
     children: jsxs("svg", __assign({
       viewBox: "0 0 24 24",
-      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg"
-    }, label ? {
+    }, PAINT[icon.paint], label ? {
       role: 'img',
       'aria-label': label
     } : {
@@ -83,8 +104,12 @@ var Icon = function Icon(_a) {
     }, {
       children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsx("title", {
         children: title
-      }), jsx("path", {
-        d: iconData.path
+      }), icon.elements.map(function (_a, index) {
+        var tag = _a[0],
+          attributes = _a[1];
+        return /*#__PURE__*/React.createElement(tag, __assign({
+          key: index
+        }, attributes));
       })]
     }))
   });