✨ feat: granular paper borders

Author: e1en0r

src/components/Paper/Paper.tsx

@@ -1,13 +1,13 @@
 import { cx } from '@emotion/css';
 import React from 'react';
-import { AccentColor, SequentialVariant, StateColor, ThemeProps } from '../../types';
+import { AccentColor, Orientation, SequentialVariant, SimplePosition, StateColor, ThemeProps } from '../../types';
 import { useAccessibility } from '../../context/Accessibility/useAccessibility';
 import { useThemeId } from '../../context/Theme';
 import styles from './styles/Paper.module.css';
 
 export type PaperProps = React.HTMLAttributes<HTMLDivElement> &
   Omit<ThemeProps, 'contrast'> & {
-    bordered?: boolean;
+    bordered?: boolean | Array<SimplePosition | Orientation>;
     children: React.ReactChild | React.ReactFragment;
     className?: string;
     color?: StateColor | SequentialVariant | AccentColor | 'contrast' | 'transparent' | 'extreme';
@@ -61,7 +61,8 @@ export const Paper = React.forwardRef<HTMLDivElement, PaperProps>(
       <div
         className={cx(
           styles.paper,
-          bordered && styles['paper--bordered'],
+          bordered === true && styles['paper--bordered'],
+          Array.isArray(bordered) && bordered.map(border => styles[`paper--bordered-${border}`]),
           color && styles[`paper--${color}`],
           contained && styles['paper--contained'],
           container && styles[`paper--${container}`],

src/components/Paper/stories/Paper.stories.tsx

@@ -346,3 +346,66 @@ ContainedLayout.args = {
   container: 'panel',
   contained: true,
 };
+
+export const LeftBorder = Template.bind({});
+LeftBorder.decorators = layoutDecorators;
+LeftBorder.storyName = 'Border: Left';
+LeftBorder.args = {
+  ...defaultArgs,
+  bordered: ['left'],
+  color: 'primary',
+};
+
+export const RightBorder = Template.bind({});
+RightBorder.decorators = layoutDecorators;
+RightBorder.storyName = 'Border: Right';
+RightBorder.args = {
+  ...defaultArgs,
+  bordered: ['right'],
+  color: 'primary',
+};
+
+export const TopBorder = Template.bind({});
+TopBorder.decorators = layoutDecorators;
+TopBorder.storyName = 'Border: Top';
+TopBorder.args = {
+  ...defaultArgs,
+  bordered: ['top'],
+  color: 'primary',
+};
+
+export const BottomBorder = Template.bind({});
+BottomBorder.decorators = layoutDecorators;
+BottomBorder.storyName = 'Border: Bottom';
+BottomBorder.args = {
+  ...defaultArgs,
+  bordered: ['bottom'],
+  color: 'primary',
+};
+
+export const VerticalBorder = Template.bind({});
+VerticalBorder.decorators = layoutDecorators;
+VerticalBorder.storyName = 'Borders: Vertical';
+VerticalBorder.args = {
+  ...defaultArgs,
+  bordered: ['vertical'],
+  color: 'primary',
+};
+
+export const HorizontalBorder = Template.bind({});
+HorizontalBorder.decorators = layoutDecorators;
+HorizontalBorder.storyName = 'Borders: Horizontal';
+HorizontalBorder.args = {
+  ...defaultArgs,
+  bordered: ['horizontal'],
+  color: 'primary',
+};
+
+export const BottomLeftBorder = Template.bind({});
+BottomLeftBorder.decorators = layoutDecorators;
+BottomLeftBorder.storyName = 'Borders: Bottom left';
+BottomLeftBorder.args = {
+  ...defaultArgs,
+  bordered: ['bottom', 'left'],
+  color: 'primary',
+};

src/components/Paper/styles/Paper.module.css

@@ -3,6 +3,7 @@
 .paper {
   background-color: var(--paper-background-color);
   border-color: var(--paper-border-color);
+  border-width: 0;
   color: var(--paper-text-color);
   position: relative;
 }
@@ -56,6 +57,30 @@
   border-style: solid;
 }
 
+.paper--bordered-left,
+.paper--bordered-vertical {
+  border-left-width: 1px;
+  border-style: solid;
+}
+
+.paper--bordered-right,
+.paper--bordered-vertical {
+  border-right-width: 1px;
+  border-style: solid;
+}
+
+.paper--bordered-top,
+.paper--bordered-horizontal {
+  border-top-width: 1px;
+  border-style: solid;
+}
+
+.paper--bordered-bottom,
+.paper--bordered-horizontal {
+  border-bottom-width: 1px;
+  border-style: solid;
+}
+
 .paper--narrowPage {
   padding: 20px 70px;