@lumx/core 4.0.1-alpha.2 → 4.0.1-alpha.4

package/_internal/2_dvYIIO.js

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import isBoolean from 'lodash/isBoolean';
+import isEmpty from 'lodash/isEmpty';
+import { getBasicClass } from './CWVyFRGV.js';
+
+/**
+ * Enhance isEmpty method to also works with numbers.
+ *
+ * @param  value The value to check.
+ * @return Whether the input value is empty or != 0.
+ */
+const _isEmpty = (value) => {
+    if (typeof value === 'number') {
+        return value === 0;
+    }
+    return isEmpty(value);
+};
+/**
+ * Return all basic LumX CSS classes which are available for every components.
+ *
+ * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
+ *
+ * @param  prefix The class name prefix for the generated CSS class.
+ * @param  props  All the other props you want to generate a class.
+ *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
+ *                be used in the classname to represent the value of the given prop.
+ * @return All LumX basic CSS classes.
+ */
+function handleBasicClasses({ prefix, ...props }) {
+    const otherClasses = {};
+    if (!isEmpty(props)) {
+        Object.keys(props).forEach((prop) => {
+            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
+                ? props[prop]
+                : !_isEmpty(props[prop]);
+        });
+    }
+    return classNames(prefix, otherClasses);
+}
+
+export { handleBasicClasses };

package/_internal/CWVyFRGV.js

@@ -0,0 +1,27 @@
+import isBoolean from 'lodash/isBoolean';
+import kebabCase from 'lodash/kebabCase';
+
+/**
+ * Get the basic CSS class for the given type.
+ *
+ * @param  prefix The class name prefix for the generated CSS class.
+ * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
+ * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
+ * @return The basic CSS class.
+ */
+function getBasicClass({ prefix, type, value, }) {
+    if (isBoolean(value)) {
+        if (!value) {
+            // False value should not return a class.
+            return '';
+        }
+        const booleanPrefixes = ['has', 'is'];
+        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
+            return `${prefix}--${kebabCase(type)}`;
+        }
+        return `${prefix}--is-${kebabCase(type)}`;
+    }
+    return `${prefix}--${kebabCase(type)}-${value}`;
+}
+
+export { getBasicClass };

package/js/components/Icon/index.d.ts

@@ -0,0 +1,36 @@
+import type { GenericProps, HasTheme } from '../../types';
+import { ColorVariant, ColorWithVariants, Size } from '../../constants';
+export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+export interface IconProps extends GenericProps, HasTheme {
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+     */
+    icon: string;
+    /** Size variant. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+}
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Icon: {
+    (props: IconProps): JSX.Element;
+    displayName: string;
+    className: "lumx-icon";
+    defaultProps: Partial<IconProps>;
+};

package/js/components/Icon/index.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { mdiAlertCircle } from '@lumx/icons';
+import { handleBasicClasses } from '../../../_internal/2_dvYIIO.js';
+import 'lodash/isBoolean';
+import 'lodash/kebabCase';
+import { resolveColorWithVariants } from '../../../_internal/DPnPEC08.js';
+import classNames from 'classnames';
+import { ColorPalette, Theme, Size } from '../../constants/enums/index.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Icon';
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = 'lumx-icon';
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Icon = (props) => {
+    const { className, color: propColor, colorVariant: propColorVariant, hasShape, icon, size, ref, theme, alt, ...forwardedProps } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+    // Color
+    let iconColor = color;
+    if (!iconColor && (hasShape || theme)) {
+        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+    }
+    // Color variant
+    let iconColorVariant = colorVariant;
+    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+        iconColorVariant = 'L2';
+    }
+    // Size
+    let iconSize = size;
+    if (size && hasShape) {
+        if (size === Size.xxs || size === Size.xs) {
+            iconSize = Size.s;
+        }
+        else if (size === Size.xxl) {
+            iconSize = Size.xl;
+        }
+    }
+    else if (hasShape) {
+        iconSize = Size.m;
+    }
+    return (jsx("i", { ref: ref, ...forwardedProps, className: classNames(className, handleBasicClasses({
+            color: iconColor,
+            colorVariant: iconColorVariant,
+            hasShape,
+            prefix: CLASSNAME,
+            theme,
+            size: iconSize,
+        }), !hasShape && `${CLASSNAME}--no-shape`, !hasShape &&
+            iconColor === ColorPalette.yellow &&
+            icon === mdiAlertCircle &&
+            `${CLASSNAME}--has-dark-layer`, `${CLASSNAME}--path`), children: jsx("svg", { "aria-hidden": alt ? undefined : 'true', role: alt ? 'img' : undefined, "aria-label": alt, height: "1em", preserveAspectRatio: "xMidYMid meet", style: { verticalAlign: '-0.125em' }, viewBox: "0 0 24 24", width: "1em", children: jsx("path", { d: icon, fill: "currentColor" }) }) }));
+};
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;
+
+export { Icon };

package/js/utils/classNames/spacing/index.js

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 /**
  * Returns a lumx classname for the given type, direction and size. For example, for
@@ -31,7 +31,7 @@ function spacing(type, direction, size) {
  * @param spacingConfigs - Array of spacing configurations with direction and size
  * @returns string
  */
-const spacings = (spacingConfigs) => classnames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
+const spacings = (spacingConfigs) => classNames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
 /**
  * Returns a lumx margin classname for the given direction and size. For example, for
  * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular

package/lumx.css

@@ -10883,19 +10883,6 @@ table {
   flex: 1 1 auto;
   min-height: 0;
 }
-.lumx-slideshow__wrapper--mode-scroll-snap {
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .lumx-slideshow__wrapper--mode-scroll-snap {
-    scroll-behavior: smooth;
-  }
-}
-.lumx-slideshow__wrapper--mode-scroll-snap::-webkit-scrollbar {
-  display: none;
-}
 .lumx-slideshow__controls {
   margin-top: 16px;
 }
@@ -10910,7 +10897,6 @@ table {
   overflow: hidden;
   max-width: 100%;
   flex: 0 0 100%;
-  scroll-snap-align: start;
 }
 
 /* Slideshow item

package/package.json

@@ -6,6 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
+        "@lumx/icons": "^4.0.1-alpha.4",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -35,7 +36,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.0.1-alpha.2",
+    "version": "4.0.1-alpha.4",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -46,6 +47,7 @@
         "rollup": "^4.53.3",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
+        "rollup-plugin-ts-paths-resolve": "^1.7.1",
         "sass": "^1.54.0",
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",

package/scss/components/slideshow/_index.scss

@@ -38,20 +38,6 @@
             flex: 1 1 auto;
             min-height: 0;
         }
-
-        &--mode-scroll-snap {
-            overflow-x: auto;
-            scroll-snap-type: x mandatory;
-            scrollbar-width: none;
-
-            @media (prefers-reduced-motion: no-preference) {
-                scroll-behavior: smooth;
-            }
-
-            &::-webkit-scrollbar {
-                display: none;
-            }
-        }
     }
 
     &__controls {
@@ -71,7 +57,6 @@
     overflow: hidden;
     max-width: 100%;
     flex: 0 0 100%;
-    scroll-snap-align: start;
 }
 
 /* Slideshow item
@@ -162,7 +147,7 @@
                 width: $item-size*2;
                 border-radius: $lumx-border-radius;
                 border-width: 0;
-
+                
                 &[data-focus-visible-added] {
                     @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary");
                 }