@mtes-mct/monitor-ui 1.12.1 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.12.1](https://github.com/MTES-MCT/monitor-ui/compare/v1.12.0...v1.12.1) (2022-12-14)
+
+
+### Bug Fixes
+
+* **icons:** use currentColor in new icons ([#119](https://github.com/MTES-MCT/monitor-ui/issues/119)) ([3937553](https://github.com/MTES-MCT/monitor-ui/commit/39375532354d24489ab3aeb024ebe5b2cb61772a))
+
 # [1.12.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.11.0...v1.12.0) (2022-12-13)
 
 

package/elements/Button.d.ts

@@ -1,4 +1,4 @@
-import { Accent, Size } from '../contants';
+import { Accent, Size } from '../constants';
 import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes, FunctionComponent } from 'react';
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {

package/elements/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { Accent, Size } from '../contants';
+import { Accent, Size } from '../constants';
 import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes, FunctionComponent } from 'react';
 export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {

package/elements/Tag/Disk.d.ts

@@ -0,0 +1,3 @@
+export declare const Disk: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $color: string;
+}, never>;

package/elements/Tag/constants.d.ts

@@ -0,0 +1,3 @@
+export declare enum TagBullet {
+    DISK = "DISK"
+}

package/elements/Tag/index.d.ts

@@ -0,0 +1,30 @@
+import { FunctionComponent, HTMLAttributes } from 'react';
+import { Accent } from '../../constants';
+import { TagBullet } from './constants';
+import type { IconProps } from '../../types';
+export type TagProps = HTMLAttributes<HTMLSpanElement> & {
+    Icon?: FunctionComponent<IconProps>;
+    accent?: Accent;
+    bullet?: TagBullet;
+    color?: string;
+    isLight?: boolean;
+};
+export declare function Tag({ accent, bullet, children, color, Icon, isLight, ...nativeProps }: TagProps): JSX.Element;
+export declare const PrimaryTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $color?: string | undefined;
+    $isLight: boolean;
+} & {
+    $isLight: boolean;
+}, never>;
+export declare const SecondaryTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $color?: string | undefined;
+    $isLight: boolean;
+} & {
+    $isLight: boolean;
+}, never>;
+export declare const TertiaryTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $color?: string | undefined;
+    $isLight: boolean;
+} & {
+    $isLight: boolean;
+}, never>;

package/index.d.ts

@@ -1,4 +1,4 @@
-export { Accent, Size } from './contants';
+export { Accent, Size } from './constants';
 export { GlobalStyle } from './GlobalStyle';
 export { THEME } from './theme';
 export { ThemeProvider } from './ThemeProvider';
@@ -9,6 +9,7 @@ export { Fieldset } from './elements/Fieldset';
 export { IconButton } from './elements/IconButton';
 export { Label } from './elements/Label';
 export { Legend } from './elements/Legend';
+export { Tag } from './elements/Tag';
 export { Checkbox } from './fields/Checkbox';
 export { DateRangePicker } from './fields/DateRangePicker';
 export { DatePicker } from './fields/DatePicker';
@@ -38,6 +39,7 @@ export type { FieldsetProps } from './elements/Fieldset';
 export type { IconButtonProps } from './elements/IconButton';
 export type { LabelProps } from './elements/Label';
 export type { LegendProps } from './elements/Legend';
+export type { TagProps } from './elements/Tag';
 export type { CheckboxProps } from './fields/Checkbox';
 export type { DateRangePickerProps } from './fields/DateRangePicker';
 export type { DatePickerProps } from './fields/DatePicker';

package/index.js

@@ -1487,6 +1487,79 @@ const StyledLabel = styled(Label) `
   padding: 0;
 `;
 
+var TagBullet;
+(function (TagBullet) {
+    TagBullet["DISK"] = "DISK";
+})(TagBullet || (TagBullet = {}));
+
+const Disk = styled.span `
+  background-color: ${p => p.$color};
+  border-radius: 50%;
+`;
+
+function Tag$1({ accent, bullet, children, color, Icon, isLight = false, ...nativeProps }) {
+    const commonChildren = useMemo(() => {
+        const defaultColor = color || THEME.color.gunMetal;
+        const bulletColor = accent
+            ? {
+                [Accent.PRIMARY]: THEME.color.gunMetal,
+                [Accent.SECONDARY]: THEME.color.gunMetal,
+                [Accent.TERTIARY]: THEME.color.white
+            }[accent]
+            : defaultColor;
+        return (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: 1 }), bullet === TagBullet.DISK && jsx(Disk, { "$color": bulletColor }), children] }));
+    }, [accent, bullet, color, children, Icon]);
+    const commonProps = useMemo(() => ({
+        $isLight: isLight,
+        children: commonChildren,
+        ...nativeProps
+    }), [commonChildren, isLight, nativeProps]);
+    switch (accent) {
+        case Accent.PRIMARY:
+            return jsx(PrimaryTag, { ...commonProps });
+        case Accent.SECONDARY:
+            return jsx(SecondaryTag, { ...commonProps });
+        case Accent.TERTIARY:
+            return jsx(TertiaryTag, { ...commonProps });
+        default:
+            return jsx(Box$7, { "$color": color, ...commonProps });
+    }
+}
+const Box$7 = styled.span `
+  align-items: center;
+  background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
+  border-radius: 11px;
+  color: ${p => (p.$color ? p.$color : p.theme.color.gunMetal)};
+  display: inline-flex;
+  font-size: 13px;
+  padding: 1px 8px 3px 8px;
+
+  /* Bullet components are a span */
+  > span {
+    height: 16px;
+    margin-right: 4px;
+    width: 16px;
+  }
+
+  /* SVG Icon components are wrapped within a <div /> */
+  > div {
+    margin-right: 4px;
+  }
+`;
+const PrimaryTag = styled(Box$7) `
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+  color: ${p => p.theme.color.gunMetal};
+`;
+// TODO Fix this color.
+const SecondaryTag = styled(Box$7) `
+  background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
+  color: ${p => p.theme.color.gunMetal};
+`;
+const TertiaryTag = styled(Box$7) `
+  background-color: ${p => (p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal)};
+  color: ${p => p.theme.color.white};
+`;
+
 function Checkbox({ label, onChange, ...originalProps }) {
     const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
     const handleChange = useCallback((_, isChecked) => {
@@ -4124,5 +4197,5 @@ var index = /*#__PURE__*/Object.freeze({
     ViewOnMap: ViewOnMap
 });
 
-export { Accent, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, Select, Size, THEME, TextInput, Textarea, ThemeProvider };
+export { Accent, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, Select, Size, THEME, Tag$1 as Tag, TextInput, Textarea, ThemeProvider };
 //# sourceMappingURL=index.js.map