@indico-data/design-system 2.45.2 → 2.45.3

package/README.md

@@ -36,16 +36,16 @@ This repository follows a slightly modified version of the [ESLint Commit Messag
 
 ### Title
 
-The title should have the following format: `<type>(<optional ticket id>): <short summary>`
+The title should have the following format: `<Tag>: <Short description>`
 
-The `<type>` should be `Fix`, `Update`, `New`, or `Breaking` for controlling releases.
+The `<Tag>` should be `Fix`, `Update`, `New`, or `Breaking` for controlling releases.
 
-If the PR need not be associated with a new release, choose any other `<type>` from the [ESLint commit convention tags](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint#eslint-convention), such as `Docs` (documentation), `Build` (build process), `Upgrade` (dependency upgrade), or `Chore` (non-user-facing tasks).
+If the PR need not be associated with a new release, choose any other `<Tag>` from the [ESLint commit convention tags](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint#eslint-convention), such as `Docs` (documentation), `Build` (build process), `Upgrade` (dependency upgrade), or `Chore` (non-user-facing tasks).
 
 Examples:
 
 - `Update: button color adjustment`
-- `New(SNC-222): add dark mode`
+- `New: [SNC-222] add dark mode`
 
 If your PR title does not follow these commit conventions, merging will be blocked.
 
@@ -103,6 +103,25 @@ Do NOT use the `version` attribute of `package.json` to track or initiate releas
 
 Do not manually release Permafrost to npm, as it may cause issues with the Semantic Release pipeline.
 
+## Adding New Indicons
+
+We support registering custom SVG icons (indicons) alongside the ones provided by Font Awesome. To add a new icon, add its SVG to the `indicons` object in `src/components/icons/indicons.ts`.
+
+Not all SVGs can be valid Font Awesome icons. All custom SVGs must:
+1. Have a `viewBox` attribute with `width` and `height` values;
+    - While not required, a `viewBox` of `"0 0 100 100"` means it will render consistently with other Indicons and Font Awesome icons.
+2. Have the `xmlns` and `fill` attributes set to `"http://www.w3.org/2000/svg"` and `"currentColor"` respectively.
+3. For monotone icons, one (1) `path` element with the `d` attribute set to a valid SVG path, **OR**
+4. For duotone icons, two (2) `path` elements each with a `d` attribute, and where the "bottom" / primary layer is has an opacity of `"1.0"` and the "top" / secondary layer has an opacity of `"0.4"`. Opacity is just the method by which Font Awesome distinguishs between layers internally; the styling is meant to be overriden through the custom CSS.
+
+For monotone icons, the `currentColor` attribute of the SVG ensures that the color of the icons inherits from the parent element.
+
+For duotone icons, the two `path`s should not be intersecting; aka, the secondary layer should be cut out of the primary one.
+
+To ease with meeting those requirements, we recommended passing exported SVGs through an optimizer like [svgo](https://svgomg.net/) to merge paths and remove unnecessary attributes (enabling every option except `Remove xmlns`, with a `Precision` of `2` usually results in an identical but cleaner SVG). [SVG Editor Online](https://freesvgeditor.com/en/svg-editor-online) is another good option for deleting nodes, paths, and general editing.
+
+If an Indicon does not meet the requirements above, registration will fail.
+
 ## Theming Addon Documentation
 
 ### Addon - Themes

package/lib/components/forms/date/datePicker/contants.d.ts

@@ -10,7 +10,7 @@ export declare const getCommonProps: (props: CommonProps) => {
     components: Partial<import("react-day-picker").CustomComponents> | undefined;
     isDisabled: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
     formatters: Partial<import("react-day-picker").Formatters> | undefined;
-    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    weekStartsOn: 0 | 2 | 1 | 5 | 3 | 4 | 6 | undefined;
     firstWeekContainsDate: 1 | 4 | undefined;
     today: Date | undefined;
     required: any;

package/lib/components/icons/Icon.stories.d.ts

@@ -6,5 +6,6 @@ type Story = StoryObj<IconProps>;
 export declare const DefaultIcon: Story;
 export declare const IconStates: Story;
 export declare const CustomStyledIcon: Story;
+export declare const DuotoneIconStory: Story;
 export declare const Indicons: Story;
 export declare const FontAwesomeIcons: Story;

package/lib/components/icons/indicons.d.ts

@@ -1,3 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 declare const indicons: {
     'indico-o-white': import("react/jsx-runtime").JSX.Element;
     account: import("react/jsx-runtime").JSX.Element;
@@ -152,4 +153,5 @@ declare const indicons: {
     'zoom-in': import("react/jsx-runtime").JSX.Element;
     'zoom-out': import("react/jsx-runtime").JSX.Element;
 };
-export { indicons };
+declare const indiconDefinitions: IconDefinition[];
+export { indicons, indiconDefinitions };

package/lib/components/icons/types.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, CSSProperties } from 'react';
 import { PermafrostComponent } from '../../types';
 import { IconName as FAIconName } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
@@ -9,6 +9,6 @@ export type IconProps = PermafrostComponent & {
     name: IconName;
     ariaLabel?: string;
     size?: IconSizes;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     onClick?: MouseEventHandler<SVGElement>;
 };

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
-import React$1, { MouseEventHandler, ReactElement } from 'react';
+import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
@@ -172,7 +172,7 @@ type IconProps = PermafrostComponent & {
     name: IconName;
     ariaLabel?: string;
     size?: IconSizes;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     onClick?: MouseEventHandler<SVGElement>;
 };