DEV-18: Updated elevations (#26)

Co-authored-by: Giuseppe Battistella <[email protected]>

src/components/Paper/Paper.md

@@ -10,3 +10,9 @@
 <Paper elevation={0}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</Paper>
 ```
 
+#### Higher Elevation:
+
+```js
+<Paper elevation={2}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</Paper>
+```
+

src/components/Paper/Paper.stories.tsx

@@ -17,3 +17,12 @@ Example.args = {
   children:
     "Reprehenderit exercitation nulla consequat veniam commodo sit ea pariatur excepteur sunt. Ut occaecat fugiat do laborum. In labore velit sunt elit ad exercitation officia. Aliquip aliqua minim laboris cillum anim exercitation minim fugiat. Magna aliqua consequat et ea. Nostrud mollit ad commodo labore. Cillum dolore ullamco fugiat ullamco ut magna excepteur. Labore ullamco exercitation excepteur ea. Proident qui ex enim pariatur laboris. Cupidatat excepteur non ea eiusmod mollit Lorem deserunt magna pariatur proident aute eiusmod Lorem. Non nulla velit anim occaecat veniam id officia proident. Qui proident non ea adipisicing qui aute magna labore fugiat occaecat deserunt minim. Cupidatat irure minim est laboris excepteur ea mollit et enim labore exercitation.",
 }
+
+// Each story then reuses that template
+export const HigherElevation = Template.bind({})
+
+HigherElevation.args = {
+  elevation: 2,
+  children:
+    "Reprehenderit exercitation nulla consequat veniam commodo sit ea pariatur excepteur sunt. Ut occaecat fugiat do laborum. In labore velit sunt elit ad exercitation officia. Aliquip aliqua minim laboris cillum anim exercitation minim fugiat. Magna aliqua consequat et ea. Nostrud mollit ad commodo labore. Cillum dolore ullamco fugiat ullamco ut magna excepteur. Labore ullamco exercitation excepteur ea. Proident qui ex enim pariatur laboris. Cupidatat excepteur non ea eiusmod mollit Lorem deserunt magna pariatur proident aute eiusmod Lorem. Non nulla velit anim occaecat veniam id officia proident. Qui proident non ea adipisicing qui aute magna labore fugiat occaecat deserunt minim. Cupidatat irure minim est laboris excepteur ea mollit et enim labore exercitation.",
+}

src/components/Paper/Paper.tsx

@@ -2,19 +2,17 @@ import React, { useMemo } from "react"
 import { Box } from "theme-ui"
 
 export interface PaperProps {
-  /**
-   * Paper elevation
-   */
+  /** Paper elevation */
   elevation?: number
-  /**
-   * The content of the component
-   */
+  /** The content of the component */
   children?: React.ReactNode
 }
 
 const Paper = ({ elevation = 1, children }: PaperProps) => {
   const boxShadow = useMemo(() => {
-    if (elevation) return "0px 0px 8px rgba(0, 0, 0, 0.04)"
+    if (elevation === 1) return "0px 1px 12px rgba(0, 0, 0, 0.04);"
+    if (elevation >= 2) return "0px 1px 12px rgba(0, 0, 0, 0.16)"
+
     return "none"
   }, [elevation])