@redgate/brand-web-toolkit 0.0.1 → 0.0.3

package/components/icons/Icon.d.ts

@@ -2,12 +2,22 @@ import Icons from './Icons';
 export type IIcon = {
     icon: keyof typeof Icons;
     size?: number | string;
+    /**
+     * Label is the accessible name for the icon. Only pass this when the icon is used
+     * on its own (e.g. an icon-only button/link) and needs to convey
+     * meaning to assistive tech.
+     */
+    label?: string;
 };
 export type IIconSvg = {
     width: number | string;
     height: number | string;
+    role?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+    focusable?: boolean;
 };
 export declare const defaults: {
     size: string;
 };
-export default function Icon(props: IIcon): import("react").JSX.Element | undefined;
+export default function Icon(props: IIcon): import("react/jsx-runtime").JSX.Element | undefined;

package/components/icons/Icon.js

@@ -8,12 +8,15 @@ function Icon(props) {
         return;
     // Filter out any empty or blank values from props, so that defaults are
     // applied.
-    const filteredProps = Object.entries(props).reduce((a, [k, v]) => (v !== '' && v !== null ? ((a[k] = v), a) : a), {});
+    const filteredProps = Object.entries(props).reduce((a, [k, v]) => (v !== '' && v !== null ? (a[k] = v, a) : a), {});
     const p = { ...defaults, ...filteredProps };
     // Map the props to SVG props.
     const svgProps = {
-        width: p.size,
-        height: p.size,
+        width: p.size ?? defaults.size,
+        height: p.size ?? defaults.size,
+        ...(p.label
+            ? { role: 'img', 'aria-label': p.label }
+            : { 'aria-hidden': true, focusable: false }),
     };
     return Icons[props.icon](svgProps);
 }

package/components/icons/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../components/icons/Icon.tsx"],"sourcesContent":["import Icons from './Icons';\n\nexport type IIcon = {\n    icon: keyof typeof Icons;\n    size?: number | string;\n};\n\nexport type IIconSvg = {\n    width: number | string;\n    height: number | string;\n};\n\nexport const defaults = {\n    size: '100%',\n};\n\nexport default function Icon(props: IIcon) {\n    if (!props.icon) return;\n\n    // Filter out any empty or blank values from props, so that defaults are\n    // applied.\n    const filteredProps = Object.entries(props).reduce<Record<string, any>>(\n        (a, [k, v]) => (v !== '' && v !== null ? ((a[k] = v), a) : a),\n        {},\n    );\n\n    const p = { ...defaults, ...filteredProps };\n\n    // Map the props to SVG props.\n    const svgProps: IIconSvg = {\n        width: p.size,\n        height: p.size,\n    };\n\n    return Icons[props.icon](svgProps);\n}\n"],"names":[],"mappings":";;AAYO,MAAM,QAAQ,GAAG;AACpB,IAAA,IAAI,EAAE,MAAM;;AAGF,SAAU,IAAI,CAAC,KAAY,EAAA;IACrC,IAAI,CAAC,KAAK,CAAC,IAAI;QAAE;;;IAIjB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAC7D,EAAE,CACL;IAED,MAAM,CAAC,GAAG,EAAE,GAAG,QAAQ,EAAE,GAAG,aAAa,EAAE;;AAG3C,IAAA,MAAM,QAAQ,GAAa;QACvB,KAAK,EAAE,CAAC,CAAC,IAAI;QACb,MAAM,EAAE,CAAC,CAAC,IAAI;KACjB;IAED,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;AACtC;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../components/icons/Icon.tsx"],"sourcesContent":["import Icons from './Icons';\n\nexport type IIcon = {\n    icon: keyof typeof Icons;\n    size?: number | string;\n    /**\n     * Label is the accessible name for the icon. Only pass this when the icon is used\n     * on its own (e.g. an icon-only button/link) and needs to convey\n     * meaning to assistive tech.\n     */\n    label?: string;\n};\n\nexport type IIconSvg = {\n    width: number | string;\n    height: number | string;\n    role?: string;\n    'aria-label'?: string;\n    'aria-hidden'?: boolean;\n    focusable?: boolean;\n};\n\nexport const defaults = {\n    size: '100%',\n};\n\nexport default function Icon(props: IIcon) {\n    if (!props.icon) return;\n\n    // Filter out any empty or blank values from props, so that defaults are\n    // applied.\n    const filteredProps = Object.entries(props).reduce<Partial<IIcon>>(\n        (a, [k, v]) => (v !== '' && v !== null ? ((a as any)[k] = v, a) : a),\n        {},\n    );\n\n    const p: Partial<IIcon> = { ...defaults, ...filteredProps };\n\n    // Map the props to SVG props.\n    const svgProps: IIconSvg = {\n        width: p.size ?? defaults.size,\n        height: p.size ?? defaults.size,\n        ...(p.label\n            ? { role: 'img', 'aria-label': p.label }\n            : { 'aria-hidden': true, focusable: false }),\n    };\n\n    return Icons[props.icon](svgProps);\n}\n"],"names":[],"mappings":";;AAsBO,MAAM,QAAQ,GAAG;AACpB,IAAA,IAAI,EAAE,MAAM;;AAGF,SAAU,IAAI,CAAC,KAAY,EAAA;IACrC,IAAI,CAAC,KAAK,CAAC,IAAI;QAAE;;;IAIjB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAK,CAAS,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EACpE,EAAE,CACL;IAED,MAAM,CAAC,GAAmB,EAAE,GAAG,QAAQ,EAAE,GAAG,aAAa,EAAE;;AAG3D,IAAA,MAAM,QAAQ,GAAa;AACvB,QAAA,KAAK,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI;AAC9B,QAAA,MAAM,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI;QAC/B,IAAI,CAAC,CAAC;cACA,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,KAAK;cACpC,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;KACnD;IAED,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;AACtC;;;;"}

package/components/icons/Icons.d.ts

@@ -1,63 +1,63 @@
 import { IIconSvg } from './Icon';
 declare const _default: {
-    AddIn: (props?: IIconSvg) => import("react").JSX.Element;
-    Alert: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowDownCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowDown: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowLeftCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowLeft: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowRightCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowRight: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowUpCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    ArrowUp: (props?: IIconSvg) => import("react").JSX.Element;
-    Bookmark: (props?: IIconSvg) => import("react").JSX.Element;
-    Bookmarked: (props?: IIconSvg) => import("react").JSX.Element;
-    ChevronDown: (props?: IIconSvg) => import("react").JSX.Element;
-    ChevronLeft: (props?: IIconSvg) => import("react").JSX.Element;
-    ChevronRight: (props?: IIconSvg) => import("react").JSX.Element;
-    ChevronUp: (props?: IIconSvg) => import("react").JSX.Element;
-    Clock: (props?: IIconSvg) => import("react").JSX.Element;
-    CloseCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    CloudDatabase: (props?: IIconSvg) => import("react").JSX.Element;
-    CloudServer: (props?: IIconSvg) => import("react").JSX.Element;
-    Cloud: (props?: IIconSvg) => import("react").JSX.Element;
-    Copy: (props?: IIconSvg) => import("react").JSX.Element;
-    DatabaseCopy: (props?: IIconSvg) => import("react").JSX.Element;
-    DatabaseImage: (props?: IIconSvg) => import("react").JSX.Element;
-    Database: (props?: IIconSvg) => import("react").JSX.Element;
-    Databases: (props?: IIconSvg) => import("react").JSX.Element;
-    Doc: (props?: IIconSvg) => import("react").JSX.Element;
-    DotsHorizontal: (props?: IIconSvg) => import("react").JSX.Element;
-    DotsVertical: (props?: IIconSvg) => import("react").JSX.Element;
-    Download: (props?: IIconSvg) => import("react").JSX.Element;
-    Edit: (props?: IIconSvg) => import("react").JSX.Element;
-    Expand: (props?: IIconSvg) => import("react").JSX.Element;
-    Export: (props?: IIconSvg) => import("react").JSX.Element;
-    Flag: (props?: IIconSvg) => import("react").JSX.Element;
-    Globe: (props?: IIconSvg) => import("react").JSX.Element;
-    Home: (props?: IIconSvg) => import("react").JSX.Element;
-    Import: (props?: IIconSvg) => import("react").JSX.Element;
-    Instance: (props?: IIconSvg) => import("react").JSX.Element;
-    LinkExternal: (props?: IIconSvg) => import("react").JSX.Element;
-    LogIn: (props?: IIconSvg) => import("react").JSX.Element;
-    LogOut: (props?: IIconSvg) => import("react").JSX.Element;
-    Map: (props?: IIconSvg) => import("react").JSX.Element;
-    MinusCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    Minus: (props?: IIconSvg) => import("react").JSX.Element;
-    PlayCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    PlayVideo: (props?: IIconSvg) => import("react").JSX.Element;
-    Play: (props?: IIconSvg) => import("react").JSX.Element;
-    PlusCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    Plus: (props?: IIconSvg) => import("react").JSX.Element;
-    Rss: (props?: IIconSvg) => import("react").JSX.Element;
-    Search: (props?: IIconSvg) => import("react").JSX.Element;
-    ServerCluster: (props?: IIconSvg) => import("react").JSX.Element;
-    Server: (props?: IIconSvg) => import("react").JSX.Element;
-    Share: (props?: IIconSvg) => import("react").JSX.Element;
-    Stop: (props?: IIconSvg) => import("react").JSX.Element;
-    Tag: (props?: IIconSvg) => import("react").JSX.Element;
-    TickCircle: (props?: IIconSvg) => import("react").JSX.Element;
-    Tick: (props?: IIconSvg) => import("react").JSX.Element;
-    VerifiedTickBadge: (props?: IIconSvg) => import("react").JSX.Element;
+    AddIn: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Alert: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowDownCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowDown: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowLeftCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowLeft: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowRightCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowRight: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowUpCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ArrowUp: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Bookmark: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Bookmarked: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ChevronDown: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ChevronLeft: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ChevronRight: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ChevronUp: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Clock: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    CloseCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    CloudDatabase: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    CloudServer: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Cloud: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Copy: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    DatabaseCopy: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    DatabaseImage: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Database: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Databases: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Doc: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    DotsHorizontal: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    DotsVertical: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Download: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Edit: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Expand: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Export: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Flag: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Globe: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Home: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Import: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Instance: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    LinkExternal: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    LogIn: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    LogOut: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Map: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    MinusCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Minus: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    PlayCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    PlayVideo: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Play: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    PlusCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Plus: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Rss: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Search: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    ServerCluster: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Server: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Share: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Stop: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Tag: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    TickCircle: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    Tick: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
+    VerifiedTickBadge: (props?: IIconSvg) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redgate/brand-web-toolkit",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Web toolkit for the Redgate Brand design system",
     "main": "components/index.js",
     "module": "components/index.js",