@lumx/react 3.12.1-alpha.2 → 3.12.1-alpha.4

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.12.1-alpha.2",
-        "@lumx/icons": "^3.12.1-alpha.2",
+        "@lumx/core": "^3.12.1-alpha.4",
+        "@lumx/icons": "^3.12.1-alpha.4",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.12.1-alpha.2"
+    "version": "3.12.1-alpha.4"
 }

package/src/components/link/Link.stories.tsx

@@ -2,7 +2,9 @@ import {
     ColorPalette,
     ColorVariant,
     FlexBox,
+    Heading,
     Icon,
+    Text,
     Link,
     Typography,
     TypographyInterface,
@@ -18,6 +20,7 @@ import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
 import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons/override/generated';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 
 const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 
@@ -140,3 +143,33 @@ export const AllColors = {
         }),
     ],
 };
+
+/**
+ * Check how link inherit the parent typography & color
+ */
+export const ParentTypographyAndColor = {
+    args: {
+        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
+        'parent.typography': undefined,
+        'parent.color': undefined,
+    },
+    render: ({ parent: { typography, color }, ...args }: any) => (
+        <Text as="p" color={color} typography={typography}>
+            <Link {...args} />
+        </Text>
+    ),
+    decorators: [
+        withNestedProps(),
+        withCombinations({
+            combinations: {
+                sections: { Button: {}, Link: { href: '#' } },
+                rows: {
+                    Default: {},
+                    'Parent typography=title': { 'parent.typography': 'title' },
+                    'Parent color=red': { 'parent.color': 'red' },
+                },
+            },
+        }),
+        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
+    ],
+};

package/src/components/link/Link.tsx

@@ -24,14 +24,14 @@ export interface LinkProps extends GenericProps {
     isDisabled?: boolean;
     /**
      * Left icon (SVG path).
-     * @deprecated Just nest `<Icon />` in the children
+     * @deprecated Instead, simply nest `<Icon />` in the children
      */
     leftIcon?: string;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
     /**
      * Right icon (SVG path).
-     * @deprecated Just nest `<Icon />` in the children
+     * @deprecated Instead, simply nest `<Icon />` in the children
      */
     rightIcon?: string;
     /** Link target. */
@@ -94,7 +94,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
             {...baseProps}
             className={classNames(
                 className,
-                handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }),
+                handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
                 typography && getTypographyClassName(typography),
             )}
         >

package/src/stories/generated/Link/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/link/Link Demos' };
-
-export { App as Default } from './default';
-export { App as Implicit } from './implicit';
-export { App as Sizes } from './sizes';