@lumx/react 3.12.1-alpha.3 → 3.12.1-alpha.5

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.12.1-alpha.3",
-        "@lumx/icons": "^3.12.1-alpha.3",
+        "@lumx/core": "^3.12.1-alpha.5",
+        "@lumx/icons": "^3.12.1-alpha.5",
         "@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.3"
+    "version": "3.12.1-alpha.5"
 }

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

@@ -3,6 +3,7 @@ import {
     ColorVariant,
     FlexBox,
     Icon,
+    Text,
     Link,
     Typography,
     TypographyInterface,
@@ -18,6 +19,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 +142,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.test.tsx

@@ -45,7 +45,7 @@ describe(`<${Link.displayName}>`, () => {
 
         it('should render typography', () => {
             const { link } = setup({ href: 'https://google.com', typography: Typography.title });
-            expect(link.className).toBe('lumx-link lumx-typography-title');
+            expect(link.className).toBe('lumx-link lumx-link--has-typography lumx-typography-title');
         });
 
         it('should render a button', () => {

package/src/components/link/Link.tsx

@@ -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';