@ndlib/component-library 0.0.85 → 0.0.86

package/dist/components/elements/text/Paragraph/Paragraph.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Paragraph>;
 export default meta;
 type Story = StoryObj<typeof Paragraph>;
 export declare const Default: Story;
+export declare const LineClamp: Story;

package/dist/components/elements/text/Paragraph/Paragraph.stories.js

@@ -23,3 +23,9 @@ export const Default = {
         children: 'Heading',
     },
 };
+export const LineClamp = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size, clampLines: 2 }, { children: content }))))] })))) })),
+    args: {
+        children: 'Heading',
+    },
+};

package/dist/components/elements/text/Paragraph/index.d.ts

@@ -4,6 +4,7 @@ import { StyledElementProps } from '../../../../theme';
 type ParagraphProps = StyledElementProps<HTMLSpanElement, {
     size?: PARAGRAPH_SIZE;
     typography?: TYPOGRAPHY_TYPE;
+    clampLines?: number;
 }>;
 export declare enum PARAGRAPH_SIZE {
     SM = "sm",

package/dist/components/elements/text/Paragraph/index.js

@@ -11,6 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+import { useTheme } from '../../../../theme';
+import { multiplyRemSize } from '../../../../utils/misc';
 export var PARAGRAPH_SIZE;
 (function (PARAGRAPH_SIZE) {
     PARAGRAPH_SIZE["SM"] = "sm";
@@ -23,7 +25,15 @@ const SIZE_TYPOGRAPHY_MAP = {
     [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
 export const Paragraph = (_a) => {
-    var { size, typography: typographyParam, sx } = _a, rest = __rest(_a, ["size", "typography", "sx"]);
+    var { size, typography: typographyParam, sx, clampLines } = _a, rest = __rest(_a, ["size", "typography", "sx", "clampLines"]);
+    const theme = useTheme();
     const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
-    return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { my: 1 }), sx) }, rest)));
+    const typographyStyles = getTypographyStyles(typography);
+    const marginHeightMultiple = theme.lineHeights[typographyStyles.lineHeight] * 0.375;
+    const fontSize = theme.fontSizes[typographyStyles.fontSize];
+    const topMargin = multiplyRemSize({
+        size: fontSize,
+        multiple: marginHeightMultiple,
+    });
+    return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { display: clampLines ? '-webkit-box' : undefined, '-webkit-line-clamp': clampLines ? String(clampLines) : undefined, '-webkit-box-orient': 'vertical', overflow: clampLines ? 'hidden' : undefined, my: topMargin }), sx) }, rest)));
 };

package/dist/components/elements/text/ReadMore/index.js

@@ -15,6 +15,7 @@ import { useTheme } from '../../../../theme';
 import { COLOR, colors } from '../../../../theme/colors';
 import { getTypographyStyles, } from '../../../../theme/typography';
 import { useMediaQuery } from '../../../providers/media';
+import { multiplyRemSize } from '../../../../utils/misc';
 const ReadMoreLink = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
@@ -36,9 +37,11 @@ export const useLinesHeight = (args) => {
     const styles = getTypographyStyles(args.typography);
     const fontSize = styles.fontSize;
     const fontSizeRem = theme.fontSizes[fontSize];
-    const fontSizeNumber = Number(fontSizeRem.slice(0, fontSizeRem.length - 3));
-    const linesHeight = fontSizeNumber * theme.lineHeights[styles.lineHeight] * args.lines;
-    return `${linesHeight}rem`;
+    const linesHeight = theme.lineHeights[styles.lineHeight] * args.lines;
+    return multiplyRemSize({
+        size: fontSizeRem,
+        multiple: linesHeight,
+    });
 };
 export const ReadMore = (_a) => {
     var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);

package/dist/utils/misc.d.ts

@@ -12,3 +12,7 @@ export declare enum KEY_CODES {
 }
 export declare const equals: (a: any, b: any) => boolean;
 export declare function importedDefaultComponentShim<T>(component: T): T;
+export declare const multiplyRemSize: (params: {
+    size: string;
+    multiple: number;
+}) => string;

package/dist/utils/misc.js

@@ -17,3 +17,8 @@ export function importedDefaultComponentShim(component) {
         return component;
     }
 }
+export const multiplyRemSize = (params) => {
+    const { size, multiple } = params;
+    const [value] = size.split('rem');
+    return `${Number(value) * multiple}rem`;
+};

package/dist/utils/misc.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/misc.test.js

@@ -0,0 +1,13 @@
+import { multiplyRemSize } from './misc';
+describe('multiplyRemSize', () => {
+    it('should multiply a rem size by a multiple', () => {
+        expect(multiplyRemSize({
+            size: '1rem',
+            multiple: 2,
+        })).toEqual('2rem');
+        expect(multiplyRemSize({
+            size: '1.5rem',
+            multiple: 2,
+        })).toEqual('3rem');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "type": "module",
   "sideEffects": false,
   "files": [