@ndlib/component-library 0.0.19 → 0.0.21

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReadMore } from '.';
+declare const meta: Meta<typeof ReadMore>;
+export default meta;
+type Story = StoryObj<typeof ReadMore>;
+export declare const Default: Story;
+export declare const NotTruncated: Story;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReadMore } from '.';
+import { Column } from '../../layout/Column';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+const meta = {
+    title: 'Elements/ReadMore',
+    component: ReadMore,
+    //👇 Enables auto-generated documentation for the component story
+    tags: ['autodocs'],
+};
+export default meta;
+const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
+const p2 = 'Lorem ipsum dolor sit';
+export const Default = {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, { text: p1, sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }) })),
+};
+export const NotTruncated = {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, { text: p2, sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }) })),
+};

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

@@ -0,0 +1,10 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+export declare const ReadMore: React.FC<StyledElementProps<HTMLDivElement, {
+    text: string;
+    typography: TYPOGRAPHY_TYPE;
+    lines: number;
+    fixedHeight?: boolean;
+}>>;

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

@@ -0,0 +1,74 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React, { useState } from 'react';
+import { useTheme } from '../../../../theme';
+import { COLOR } from '../../../../theme/colors';
+import { getTypographyStyles, } from '../../../../theme/typography';
+const ReadMoreLink = () => {
+    return (_jsx("div", Object.assign({ css: {
+            whiteSpace: 'nowrap',
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            paddingLeft: '3rem',
+            background: 'linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%, rgb(255, 255, 255))',
+        } }, { children: _jsx("div", Object.assign({ "aria-hidden": "true", sx: {
+                transform: 'scale(0.9)',
+                color: COLOR.ND_BLUE_LIGHT,
+                cursor: 'pointer',
+            } }, { children: "Read More..." })) })));
+};
+const useLinesHeight = (args) => {
+    const theme = useTheme();
+    const styles = getTypographyStyles(args.typography);
+    const fontSize = styles.fontSize;
+    const fontSizeRem = theme.fontSizes[fontSize];
+    // slice of the 'rem' from end of fontSize string and convert to number
+    const fontSizeNumber = Number(fontSizeRem.slice(0, fontSizeRem.length - 3));
+    // Multiply the fontSize by the lineHeight ratio and the number of lines
+    const linesHeight = fontSizeNumber * theme.lineHeights[styles.lineHeight] * args.lines;
+    return `${linesHeight}rem`;
+};
+// A react component that accepts text content and truncates it 3 lines. If the content
+// exceeds the alloted space, an ellipsis will be placed at the end of the last line.
+// This component does not use the css property `text-overflow: ellipsis`
+// because it does not work with multiple lines of text.
+export const ReadMore = (_a) => {
+    var { text, typography, sx, role, lines, fixedHeight } = _a, rest = __rest(_a, ["text", "typography", "sx", "role", "lines", "fixedHeight"]);
+    const ref = React.useRef(null);
+    const [showEllipsis, setShowEllipsis] = useState(true);
+    const wrapperHeight = useLinesHeight({ typography, lines });
+    React.useEffect(() => {
+        if (ref.current) {
+            // Check if the content exceeds the alloted space
+            if (fixedHeight) {
+                ref.current.style.height = wrapperHeight;
+            }
+            else {
+                ref.current.style.maxHeight = wrapperHeight;
+            }
+            const isOverflowing = ref.current.scrollHeight > ref.current.clientHeight;
+            if (isOverflowing) {
+                setShowEllipsis(true);
+            }
+            else {
+                setShowEllipsis(false);
+            }
+        }
+    }, [text, wrapperHeight, fixedHeight]);
+    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, style: {
+            overflow: 'hidden',
+            position: 'relative',
+        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [text, showEllipsis && _jsx(ReadMoreLink, {})] })));
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { theme, ThemeProvider } from './theme';
+export { theme, ThemeProvider, useTheme } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { Alert, Alerts } from './components/elements/Alerts';
@@ -22,6 +22,9 @@ export { Checkbox } from './components/elements/Fields/Checkbox';
 export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
 export { Radio } from './components/elements/Fields/Radio';
 export { RadioGroup } from './components/elements/Fields/RadioGroup';
+export { List, ListItem, LIST_SIZE } from './components/elements/List';
+export { ReadMore } from './components/elements/text/ReadMore';
+export { Icon } from './components/elements/Icon';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { theme, ThemeProvider } from './theme';
+export { theme, ThemeProvider, useTheme } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { Alert, Alerts } from './components/elements/Alerts';
@@ -22,6 +22,9 @@ export { Checkbox } from './components/elements/Fields/Checkbox';
 export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
 export { Radio } from './components/elements/Fields/Radio';
 export { RadioGroup } from './components/elements/Fields/RadioGroup';
+export { List, ListItem, LIST_SIZE } from './components/elements/List';
+export { ReadMore } from './components/elements/text/ReadMore';
+export { Icon } from './components/elements/Icon';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/theme/typography.d.ts

@@ -82,12 +82,12 @@ export declare const typographyStyleMap: {
         fontFamily: FONT;
         fontSize: FONT_SIZE;
         fontWeight?: FONT_WEIGHT;
-        lineHeight?: LINE_HEIGHT;
+        lineHeight: LINE_HEIGHT;
     };
 };
 export declare const getTypographyStyles: (typography?: TYPOGRAPHY_TYPE) => {
     fontFamily: FONT;
     fontSize: FONT_SIZE;
     fontWeight?: FONT_WEIGHT | undefined;
-    lineHeight?: LINE_HEIGHT | undefined;
+    lineHeight: LINE_HEIGHT;
 };

package/package.json

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