@indico-data/design-system 1.0.49 → 1.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/WizardWithSidebar/WizardWithSidebar.styles.ts

@@ -26,13 +26,13 @@ export const StyledWizardWithSidebar = styled.div<{
   .wizard-sidebar {
     width: 245px;
     padding: 30px;
-    border-right: 1px solid #aaaaaa;
+    border-right: 1px solid ${COLORS.silverChalice};
 
     .sidebar-step {
       margin-bottom: ${SPACING.sm};
       display: flex;
       align-items: center;
-      color: #aaaaaa;
+      color: ${COLORS.silverChalice};
       &.current-step,
       &.prior-step {
         color: ${COLORS.black};

package/src/components/index.ts

@@ -30,3 +30,4 @@ export { LoadingAwareContainer } from './LoadingAwareContainer';
 export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
 export { WizardWithSidebar } from './WizardWithSidebar';
 export { Drawer } from './Navigation/Drawer';
+export { TextTruncate } from './text-truncate';

package/src/components/text-truncate/TextTruncate.stories.mdx

@@ -0,0 +1,59 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { TextTruncate } from './TextTruncate';
+
+<Meta
+  title="Text Utilities/TextTruncate"
+  component={TextTruncate}
+  argTypes={{
+    string: {
+      description: 'The string to truncate.',
+      control: {
+        type: 'text',
+      },
+    },
+    maxChars: {
+      control: {
+        type: 'number',
+      },
+    },
+  }}
+/>
+
+# Text Truncate
+
+This component truncates the provided text if the character limit exceeds the Max Character Length
+set on the component property. It will add `...` to the end of the truncated text. It will also
+add a `title` attribute to the component with the full text if the text is truncated.
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      string: 'This string is being truncated for length.',
+      maxChars: 30,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable of={TextTruncate} />
+
+## Non Truncated Text
+
+This is an example of a string that is shorter than the max character length and will not be
+truncated.
+
+<Canvas>
+  <Story
+    name="non truncated text"
+    args={{
+      string: 'This string meets the length required to not be truncated.',
+      maxChars: 100,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+export const Template = (args) => <TextTruncate {...args} />;

package/src/components/text-truncate/TextTruncate.styles.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const StyledTextTruncate = styled.span``;

package/src/components/text-truncate/TextTruncate.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { TextTruncate } from './TextTruncate';
+
+describe('TextTruncate', () => {
+  const longText = 'this is a really long string that should be truncated';
+
+  it('truncates text when it exceeds the maximum length and adds a title attr', () => {
+    const { getByTitle } = render(<TextTruncate string={longText} maxChars={20} />);
+    expect(getByTitle(longText).textContent).toEqual('this is a really lon...');
+  });
+
+  it('does not truncate the text when it is below the max length', () => {
+    const { getByText } = render(<TextTruncate string={longText} maxChars={200} />);
+    expect(getByText(longText).textContent).toEqual(longText);
+  });
+
+});

package/src/components/text-truncate/TextTruncate.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyledTextTruncate } from './TextTruncate.styles';
+
+interface TextTruncateProps {
+  string: string;
+  maxChars: number;
+  children: any;
+}
+
+export function TextTruncate({ string, maxChars, children }: TextTruncateProps) {
+  return string.length > maxChars ? (
+    <StyledTextTruncate title={string}>
+      {`${string.substring(0, maxChars)}...`}
+      {children}
+    </StyledTextTruncate>
+  ) : (
+    <StyledTextTruncate>
+      {string} {children}
+    </StyledTextTruncate>
+  );
+}

package/src/components/text-truncate/index.ts

@@ -0,0 +1 @@
+export { TextTruncate } from './TextTruncate';

package/src/index.ts

@@ -54,5 +54,6 @@ export {
   WizardCard,
   WizardSection,
   StyledWizard,
+  TextTruncate,
   WizardWithSidebar,
 } from './components';