feat: Pagination component (#103)

Author: tassoevan

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Default_Story.png

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { createStyledComponent } from '../../styles';
-import { Icon } from '../Icon';
+import { Chevron } from '../Chevron';
 import { ToggleSwitch } from '../ToggleSwitch';
 
 const ItemContainer = createStyledComponent('rcx-accordion-item', 'section');
 const ItemBar = createStyledComponent('rcx-accordion-item__bar');
 const ItemTitle = createStyledComponent('rcx-accordion-item__title', 'h1');
 const ItemToggleSwitchContainer = createStyledComponent('rcx-accordion-item__toggle-switch');
-const ItemIconContainer = createStyledComponent('rcx-accordion-item__icon');
 const ItemPanel = createStyledComponent('rcx-accordion-item__panel');
 
 export const Item = React.forwardRef(function Item({
@@ -95,9 +94,7 @@ export const Item = React.forwardRef(function Item({
           && <ItemToggleSwitchContainer>
             <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />
           </ItemToggleSwitchContainer>}
-        <ItemIconContainer mod-flipped={expanded}>
-          <Icon name={'arrow-down'} x24 />
-        </ItemIconContainer>
+        <Chevron size={24} up={expanded} />
       </>}
     </ItemBar>}
     <ItemPanel id={panelId} mod-expanded={panelExpanded} role='region'>

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Down.png

@@ -66,9 +66,9 @@
 
   flex: 1 1 0;
 
-  @include subtitle;
-  @include subtitle-bold;
-  @include truncate;
+  @include as-subtitle($bold: true);
+  @include with-text--ellipsis;
+  @include with-text--nowrap;
 }
 
 .rcx-accordion-item__toggle-switch {
@@ -79,14 +79,6 @@
   margin-inline: #{ $sizes-x24 };
 }
 
-.rcx-accordion-item__icon {
-  @include box;
-
-  &--flipped {
-    transform: rotate(-180deg);
-  }
-}
-
 .rcx-accordion-item__panel {
   @include box;
 

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Left.png

@@ -82,9 +82,9 @@
   appearance: none;
 
   @include clickable;
-  @include truncate;
-  @include paragraph;
-  @include paragraph-bold;
+  @include with-text--ellipsis;
+  @include with-text--nowrap;
+  @include as-paragraph($bold: true);
 
   @include with-rectangular-size(
     $height: $sizes-x40,
@@ -109,8 +109,7 @@
   );
 
   &--small {
-    @include caption;
-    @include caption-bold;
+    @include as-caption($bold: true);
 
     @include with-rectangular-size(
       $height: $sizes-x32,

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Right.png

@@ -50,18 +50,18 @@
   color: #{ $text-colors-default };
   flex-flow: column nowrap;
 
-  @include caption;
+  @include as-caption;
 }
 
 .rcx-callout__title {
   @include box;
 
-  @include caption;
-  @include caption-bold;
+  @include as-caption($bold: true);
 
   &--has-children {
     margin-bottom: #{ $spaces-x4 };
   }
 
-  @include truncate;
+  @include with-text--ellipsis;
+  @include with-text--nowrap;
 }

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Size.png

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+
+import { createStyledComponent } from '../../styles';
+import { Icon } from '../Icon';
+
+const Container = createStyledComponent('rcx-chevron', 'span');
+
+export const Chevron = React.forwardRef(function Chevron({
+  up,
+  right,
+  down,
+  left,
+  size,
+  ...props
+}, ref) {
+  const children = useMemo(() => <Icon name='arrow-down' size={size} />, [size]);
+
+  return <Container
+    children={children}
+    ref={ref}
+    mod-up={up}
+    mod-right={right}
+    mod-down={down}
+    mod-left={left}
+    {...props}
+  />;
+});
+
+Chevron.displayName = 'Chevron';
+
+Chevron.propTypes = {
+  up: PropTypes.bool,
+  right: PropTypes.bool,
+  down: PropTypes.bool,
+  left: PropTypes.bool,
+  size: PropTypes.number,
+};

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Up.png

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Chevron } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Chevron />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/.loki/reference/chrome_iphone7_Tabular_Pagination_Default_Story.png

@@ -0,0 +1,65 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import sizes from '../../styles/variables/sizes';
+import { Chevron } from '../..';
+
+<Meta title='Misc|Chevron' parameters={{ jest: ['Chevron/spec'] }} />
+
+# Chevron
+
+<Preview>
+  <Story name='Default'>
+    <Chevron size={40} />
+  </Story>
+</Preview>
+
+<Props of={Chevron} />
+
+## Up
+
+<Preview>
+  <Story name='Up'>
+    <Chevron up />
+  </Story>
+</Preview>
+
+## Right
+
+<Preview>
+  <Story name='Right'>
+    <Chevron right />
+  </Story>
+</Preview>
+
+## Down
+
+<Preview>
+  <Story name='Down'>
+    <Chevron down />
+  </Story>
+</Preview>
+
+## Left
+
+<Preview>
+  <Story name='Left'>
+    <Chevron left />
+  </Story>
+</Preview>
+
+## Size
+
+<Preview>
+  <Story name='Size'>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Chevron size={2} />
+      <Chevron size={4} />
+      <Chevron size={8} />
+      <Chevron size={16} />
+      <Chevron size={20} />
+      <Chevron size={24} />
+      <Chevron size={32} />
+      <Chevron size={40} />
+    </div>
+  </Story>
+</Preview>

packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Default_Story.png

@@ -0,0 +1,28 @@
+.rcx-chevron {
+  @include box;
+  display: inline-flex;
+
+  &--up {
+    transform: rotate(-180deg);
+  }
+
+  &--down {
+    transform: rotate(0deg);
+  }
+
+  &--right {
+    transform: rotate(-90deg);
+
+    &:dir(rtl) {
+      transform: rotate(-270deg);
+    }
+  }
+
+  &--left {
+    transform: rotate(-270deg);
+
+    &:dir(rtl) {
+      transform: rotate(-90deg);
+    }
+  }
+}

packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Down.png

@@ -30,7 +30,7 @@
 
   user-select: text;
 
-  @include ellipsis;
+  @include with-text--ellipsis;
 }
 
 .rcx-field__hint {

packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Left.png

@@ -5,7 +5,7 @@
 
   margin-bottom: $spaces-x16;
 
-  @include headline;
+  @include as-headline;
 
   color: $text-colors-default;
 }

packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Right.png

@@ -8,6 +8,7 @@ const Container = createStyledComponent('rcx-icon', 'i');
 
 export const Icon = React.forwardRef(function Icon({
   name,
+  size,
   x44,
   x40,
   x32,
@@ -23,15 +24,15 @@ export const Icon = React.forwardRef(function Icon({
     aria-hidden='true'
     children={nameToCharacterMapping[name]}
     mod-name={name}
-    mod-x44={x44}
-    mod-x40={x40}
-    mod-x32={x32}
-    mod-x24={x24}
-    mod-x20={x20}
-    mod-x16={x16}
-    mod-x8={x8}
-    mod-x4={x4}
-    mod-x2={x2}
+    mod-x44={x44 || size === 44}
+    mod-x40={x40 || size === 40}
+    mod-x32={x32 || size === 32}
+    mod-x24={x24 || size === 24}
+    mod-x20={x20 || size === 20}
+    mod-x16={x16 || size === 16}
+    mod-x8={x8 || size === 8}
+    mod-x4={x4 || size === 4}
+    mod-x2={x2 || size === 2}
     ref={ref}
     {...props}
   />;
@@ -41,6 +42,7 @@ Icon.displayName = 'Icon';
 
 Icon.propTypes = {
   name: PropTypes.oneOf(Object.keys(nameToCharacterMapping)).isRequired,
+  size: PropTypes.number,
   x44: PropTypes.bool,
   x40: PropTypes.bool,
   x32: PropTypes.bool,

packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Size.png

@@ -218,8 +218,8 @@
 
   background-color: transparent;
 
-  @include paragraph;
-  @include ellipsis;
+  @include as-paragraph;
+  @include with-text--ellipsis;
 
   &--type-textarea {
     overflow: auto;
@@ -330,17 +330,19 @@
 
 .rcx-input-box__placeholder {
   @include box;
-  @include truncate;
+  @include with-text--ellipsis;
+  @include with-text--nowrap;
 
-  @include paragraph;
+  @include as-paragraph;
   color: #{ $input-colors-placeholder-color };
 }
 
 .rcx-input-box__option {
   @include box;
-  @include truncate;
+  @include with-text--ellipsis;
+  @include with-text--nowrap;
 
-  @include paragraph;
+  @include as-paragraph;
   color: #{ $input-colors-color };
 }
 
@@ -369,6 +371,6 @@
   border-radius: #{ $borders-radius-x2 };
   background-color: #{ $input-colors-background-color };
 
-  @include paragraph;
-  @include ellipsis;
+  @include as-paragraph;
+  @include with-text--ellipsis;
 }

packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Up.png

@@ -68,9 +68,9 @@
 
   color: #{ $text-colors-default };
 
-  @include paragraph;
+  @include as-paragraph;
 
-  @include ellipsis;
+  @include with-text--ellipsis;
 
   &--disabled {
     color: #{ $text-colors-disabled-label };