Add storybook, remove CSS

ui/components/ui/currency-display/currency-display.component.js

@@ -63,6 +63,7 @@ export default function CurrencyDisplay({
       <Text
         as="span"
         className="currency-display-component__text"
+        ellipsis
         {...textProps}
       >
         {parts.prefix}

ui/components/ui/currency-display/currency-display.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { decimalToHex } from '../../../../shared/modules/conversion.utils';
+import CurrencyDisplay from '.';
+
+export default {
+  title: 'Components/UI/CurrencyDisplay',
+
+  argTypes: {
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+    displayValue: {
+      control: {
+        type: 'text',
+      },
+    },
+    currency: {
+      control: {
+        type: 'text',
+      },
+    },
+    prefix: {
+      control: {
+        type: 'text',
+      },
+    },
+    suffix: {
+      control: {
+        type: 'text',
+      },
+    },
+    numberOfDecimals: {
+      control: {
+        type: 'text',
+      },
+    },
+    denomination: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    denomination: 'ETH',
+    value: decimalToHex('123.45'),
+    numberOfDecimals: '2',
+    currency: 'USD',
+    prefix: '$',
+  },
+};
+
+export const DefaultStory = (args) => <CurrencyDisplay {...args} />;
+DefaultStory.storyName = 'Default';
+
+export const DisplayValueStory = (args) => (
+  <CurrencyDisplay {...args} displayValue="44.43" />
+);
+DefaultStory.storyName = 'Display Value';

ui/components/ui/ui-components.scss

@@ -12,7 +12,6 @@
 @import 'chip/chip';
 @import 'color-indicator/color-indicator';
 @import 'confusable/index';
-@import 'currency-display/index';
 @import 'definition-list/definition-list';
 @import 'dialog/dialog';
 @import 'dropdown/dropdown';