@indico-data/design-system 1.0.49 → 1.0.51

package/lib/types.d.ts

@@ -46,6 +46,7 @@ declare const allIcons: {
     readonly dashboard: import("react/jsx-runtime").JSX.Element;
     readonly 'data-and-access': import("react/jsx-runtime").JSX.Element;
     readonly database: import("react/jsx-runtime").JSX.Element;
+    readonly document: import("react/jsx-runtime").JSX.Element;
     readonly date: import("react/jsx-runtime").JSX.Element;
     readonly draggable: import("react/jsx-runtime").JSX.Element;
     readonly droplet: import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/src/components/Icon/indicons.tsx

@@ -254,6 +254,11 @@ const indicons = {
       <path d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z" />
     </svg>
   ),
+  document: (
+    <svg viewBox="0 0 24 24">
+      <path d="M15.6.3q-.45-.3-.9-.3H3.9c-.8 0-1.5.9-1.5 1.7v20.6c0 .8.7 1.7 1.5 1.7H20c.8 0 1.5-.9 1.5-1.7V6.8c0-.3-.1-.6-.3-.8zm4.1 21.8H4.3V1.9h10.1V6c0 .7.5 1.2 1.2 1.2h4.1z" />
+    </svg>
+  ),
   date: (
     <svg viewBox="0 0 50 50" fill="currentColor">
       <path d="m24 28.15q-0.75 0-1.25-0.525t-0.5-1.225q0-0.75 0.5-1.275t1.25-0.525 1.25 0.525 0.5 1.275q0 0.7-0.5 1.225t-1.25 0.525zm-8 0q-0.75 0-1.25-0.525t-0.5-1.225q0-0.75 0.5-1.275t1.25-0.525 1.25 0.525 0.5 1.275q0 0.7-0.5 1.225t-1.25 0.525zm16 0q-0.75 0-1.25-0.525t-0.5-1.225q0-0.75 0.5-1.275t1.25-0.525 1.25 0.525 0.5 1.275q0 0.7-0.5 1.225t-1.25 0.525zm-8 7.85q-0.75 0-1.25-0.525t-0.5-1.225q0-0.75 0.5-1.275t1.25-0.525 1.25 0.525 0.5 1.275q0 0.7-0.5 1.225t-1.25 0.525zm-8 0q-0.75 0-1.25-0.525t-0.5-1.225q0-0.75 0.5-1.275t1.25-0.525 1.25 0.525 0.5 1.275q0 0.7-0.5 1.225t-1.25 0.525zm16 0q-0.75 0-1.25-0.525t-0.5-1.225q0-0.75 0.5-1.275t1.25-0.525 1.25 0.525 0.5 1.275q0 0.7-0.5 1.225t-1.25 0.525zm-22.1 7q-1.2 0-2.05-0.85t-0.85-2.05v-28.95q0-1.15 0.85-2.025t2.05-0.875h3.7v-3.5h2.5v3.5h15.9v-3.5h2.45v3.5h3.65q1.2 0 2.05 0.875t0.85 2.025v28.95q0 1.2-0.85 2.05t-2.05 0.85zm0-2.25h28.2q0.25 0 0.45-0.2t0.2-0.45v-19.85h-29.5v19.85q0 0.25 0.2 0.45t0.45 0.2zm-0.65-22.75h29.5v-6.85q0-0.25-0.2-0.425t-0.45-0.175h-28.2q-0.25 0-0.45 0.175t-0.2 0.425zm0 0v-6.85q0-0.25 0-0.425t0-0.175 0 0.175 0 0.425v6.85z" />
@@ -738,10 +743,8 @@ const indicons = {
     </svg>
   ),
   text: (
-    <svg viewBox="0 0 102 102" fill="currentColor">
-      <g transform="translate(1 1)">
-        <path d="M25.4,90.3V23.4H0V9.7h64.5v13.7H39.1v66.9H25.4z M70.6,90.3V49.2H54.8V35.5H100v13.7H84.3v41.2H70.6z" />
-      </g>
+    <svg viewBox="0 0 24 24">
+      <path d="M16 4V2H0v2h7v18h2V4zM24.2 9h-10v2h4v11h2V11h4z" />
     </svg>
   ),
   'thumbs-down': (

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