feat(truncation): add truncation classes

src/globals/scss/_helper-classes.scss

@@ -0,0 +1,24 @@
+.bx--end-line {
+  width: 100%;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.bx--front-line {
+  width: 100%;
+  display: inline-block;
+  direction: rtl;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.test {
+  width: 65px;
+}
+
+.component-example__live {
+  min-width: 400px;
+}

src/globals/scss/_layout.scss

@@ -1,6 +1,16 @@
-$breakpoints: (bp--xs--major: 500px, bp--sm--major: 768px, bp--md--major: 992px, bp--lg--major: 1200px);
+@import 'helper-classes';
 
-$padding: ('mobile': 3%, 'xs': 5%);
+$breakpoints: (
+  bp--xs--major: 500px,
+  bp--sm--major: 768px,
+  bp--md--major: 992px,
+  bp--lg--major: 1200px
+);
+
+$padding: (
+  'mobile': 3%,
+  'xs': 5%
+);
 
 @function padding($value) {
   @if map-has-key($padding, $value) {