✨ elevation options to Card/Banner/TopBar (#2313)

* Paper: removed max/min width * Paper: expose ElevationTypes to add elevation prop to other components * made topbar story not so tall * added elevation prop to topbar * ✨ elevation options to Card/Banner/TopBar * 📸 Update snapshots * 📸 Update more snapshots * rename type to AvailableElevations * TopBar: render paper as header * TopBar: Removed raised arg from default story
equinor · Jun 17, 2022 · 72dfac6 · 72dfac6
1 parent 248965a
commit 72dfac6
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 54 deletions.
diff --git a/packages/eds-core-react/src/components/Banner/Banner.stories.tsx b/packages/eds-core-react/src/components/Banner/Banner.stories.tsx
@@ -28,11 +28,11 @@ export default {
   },
 } as ComponentMeta<typeof Banner>
 
-export const Introduction: Story<BannerProps> = () => {
+export const Introduction: Story<BannerProps> = (args) => {
   //  Note: This example is not interactive, as Storybook
   // doesn't yet support to manipulate subcomponents via Storybook Args
   return (
-    <Banner>
+    <Banner {...args}>
       <Banner.Message>
         This tag is not being preserved yet. Click start preservation to enable
         writing preservation records.

diff --git a/packages/eds-core-react/src/components/Banner/Banner.tsx b/packages/eds-core-react/src/components/Banner/Banner.tsx
@@ -7,12 +7,14 @@ import {
 } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 import { spacingsTemplate, useToken } from '@equinor/eds-utils'
+import { Paper } from '../Paper'
+import type { Elevations } from '@equinor/eds-tokens'
 import { enabled as bannerToken } from './Banner.tokens'
 import { Divider } from '../Divider'
 import { BannerIcon } from './BannerIcon'
 import { useEds } from '../EdsProvider'
 
-const StyledBanner = styled.div``
+type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>
 
 type ContentProps = {
   hasIcon: boolean
@@ -35,11 +37,12 @@ const NonMarginDivider = styled(Divider)`
 `
 
 export type BannerProps = {
+  elevation?: AvailableElevations
   children: ReactNode
 } & HTMLAttributes<HTMLDivElement>
 
 export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
-  { children, className, ...rest },
+  { children, className, elevation = 'none', ...rest },
   ref,
 ) {
   const childrenWhereBannerIcon: boolean[] = ReactChildren.map(
@@ -60,10 +63,15 @@ export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
 
   return (
     <ThemeProvider theme={token}>
-      <StyledBanner {...props} className={className} role="alert">
+      <Paper
+        {...props}
+        className={className}
+        elevation={elevation}
+        role="alert"
+      >
         <Content hasIcon={hasIcon}>{children}</Content>
         <NonMarginDivider color="light" />
-      </StyledBanner>
+      </Paper>
     </ThemeProvider>
   )
 })
diff --git a/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap b/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap
@@ -2,15 +2,20 @@
 
 exports[`Banner Matches snapshot 1`] = `
 <DocumentFragment>
-  .c3 {
+  .c0 {
+  background: var(--eds_ui_background__default,rgba(255,255,255,1));
+  box-shadow: 0 0 1px rgba(0,0,0,0.14);
+}
+
+.c4 {
   border: none;
   background-color: var(--eds_ui_background__light,rgba(247,247,247,1));
   margin-top: 16px;
   margin-bottom: 15px;
   height: 1px;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -33,7 +38,7 @@ exports[`Banner Matches snapshot 1`] = `
   margin-right: 16px;
 }
 
-.c0 {
+.c1 {
   padding-left: 16px;
   padding-top: 16px;
   padding-right: 16px;
@@ -47,12 +52,12 @@ exports[`Banner Matches snapshot 1`] = `
   background-color: var(--eds_ui_background__default,rgba(255,255,255,1));
 }
 
-.c4 {
+.c5 {
   margin: 0;
   height: 2px;
 }
 
-.c2 {
+.c3 {
   margin: 0;
   color: rgba(61,61,61,1);
   font-family: Equinor;
@@ -63,14 +68,15 @@ exports[`Banner Matches snapshot 1`] = `
 }
 
 <div
-    class=""
+    class="c0"
+    elevation="0 0 1px rgba(0, 0, 0, 0.14)"
     role="alert"
   >
     <div
-      class="c0"
+      class="c1"
     >
       <span
-        class="c1"
+        class="c2"
       >
         <svg
           aria-hidden="true"
@@ -92,13 +98,13 @@ exports[`Banner Matches snapshot 1`] = `
         </svg>
       </span>
       <p
-        class="c2 "
+        class="c3 "
       >
         Banner message
       </p>
     </div>
     <hr
-      class="c3 c4"
+      class="c4 c5"
     />
   </div>
 </DocumentFragment>

diff --git a/packages/eds-core-react/src/components/Card/Card.tsx b/packages/eds-core-react/src/components/Card/Card.tsx
@@ -1,10 +1,14 @@
 import { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
+import { Paper } from '../Paper'
+import type { Elevations } from '@equinor/eds-tokens'
 import * as tokens from './Card.tokens'
 import { bordersTemplate } from '@equinor/eds-utils'
 
 const { primary } = tokens
 
+type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>
+
 type StyledCardProps = {
   background: string
   cursor: string
@@ -13,9 +17,11 @@ type StyledCardProps = {
 export type CardProps = {
   /** Variant */
   variant?: 'default' | 'info' | 'warning' | 'danger'
+  /** Elevation */
+  elevation?: AvailableElevations
 } & HTMLAttributes<HTMLDivElement>
 
-const StyledCard = styled.div<StyledCardProps>`
+const StyledCard = styled(Paper)<StyledCardProps>`
   width: 100%;
   position: relative;
   background-color: ${({ background }) => background};
@@ -28,7 +34,7 @@ const StyledCard = styled.div<StyledCardProps>`
 `
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
-  { children, variant = 'default', onClick, ...rest },
+  { children, variant = 'default', elevation = 'none', onClick, ...rest },
   ref,
 ) {
   const cursor = onClick ? 'pointer' : 'default'
@@ -45,7 +51,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   }
 
   return (
-    <StyledCard {...props} onClick={onClick}>
+    <StyledCard elevation={elevation} {...props} onClick={onClick}>
       {children}
     </StyledCard>
   )

diff --git a/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Card Matches snapshot 1`] = `
 <DocumentFragment>
-  .c4 {
+  .c5 {
   margin: 0;
   color: rgba(61,61,61,1);
   font-family: Equinor;
@@ -16,7 +16,7 @@ exports[`Card Matches snapshot 1`] = `
   text-align: left;
 }
 
-.c5 {
+.c6 {
   margin: 0;
   color: rgba(61,61,61,1);
   font-family: Equinor;
@@ -27,6 +27,11 @@ exports[`Card Matches snapshot 1`] = `
 }
 
 .c0 {
+  background: var(--eds_ui_background__default,rgba(255,255,255,1));
+  box-shadow: 0 0 1px rgba(0,0,0,0.14);
+}
+
+.c1 {
   width: 100%;
   position: relative;
   background-color: var(--eds_ui_background__default,rgba(255,255,255,1));
@@ -43,29 +48,29 @@ exports[`Card Matches snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   width: auto;
 }
 
-.c1 > * {
+.c2 > * {
   width: 100%;
 }
 
-.c1:first-child img {
+.c2:first-child img {
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
 
-.c1:last-child img {
+.c2:last-child img {
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -81,19 +86,19 @@ exports[`Card Matches snapshot 1`] = `
   padding: 0 16px 0 16px;
 }
 
-.c2 > :not(:first-child) {
+.c3 > :not(:first-child) {
   margin-left: 16px;
 }
 
-.c2:first-child {
+.c3:first-child {
   padding-top: 16px;
 }
 
-.c2:last-child {
+.c3:last-child {
   padding-bottom: 16px;
 }
 
-.c3 {
+.c4 {
   display: grid;
   -webkit-box-flex: 2;
   -webkit-flex-grow: 2;
@@ -103,37 +108,38 @@ exports[`Card Matches snapshot 1`] = `
 }
 
 <div
-    class="c0"
+    class="c0 c1"
     cursor="default"
+    elevation="0 0 1px rgba(0, 0, 0, 0.14)"
   >
     <div
-      class="c1"
+      class="c2"
     >
       <img
         alt="cat"
         src="https://i.imgur.com/UM3mrju.jpg"
       />
     </div>
     <div
-      class="c2"
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <h5
-          class="c4"
+          class="c5"
         >
           Another interactive example
         </h5>
         <p
-          class="c5"
+          class="c6"
         >
           Unfortunately you cannot control children in storybook yet
         </p>
       </div>
     </div>
     <p
-      class="c5"
+      class="c6"
     >
       Leading images are full width, and go straight to the top - ignoring spacings
     </p>

diff --git a/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -2,8 +2,6 @@
 
 exports[`Dialog Matches snapshot 1`] = `
 .c0 {
-  min-width: 96px;
-  max-width: calc(100% - 32px);
   background: var(--eds_ui_background__default,rgba(255,255,255,1));
   box-shadow: 0 11px 15px rgba(0,0,0,0.2),0 9px 46px rgba(0,0,0,0.12),0 24px 38px rgba(0,0,0,0.14);
 }

diff --git a/packages/eds-core-react/src/components/Paper/Paper.tokens.tsx b/packages/eds-core-react/src/components/Paper/Paper.tokens.tsx
@@ -14,7 +14,5 @@ export type ElevationTypes = keyof Elevations
 
 export { elevation }
 export const paper: ComponentToken = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
   background,
 }
diff --git a/packages/eds-core-react/src/components/Paper/Paper.tsx b/packages/eds-core-react/src/components/Paper/Paper.tsx
@@ -11,8 +11,6 @@ type StyledProps = {
 }
 
 const StyledPaper = styled.div<StyledProps>`
-  min-width: ${tokens.minWidth};
-  max-width: ${tokens.maxWidth};
   background: ${tokens.background};
   box-shadow: ${({ elevation }) => elevation};
 `

diff --git a/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -2,8 +2,6 @@
 
 exports[`Popover Matches snapshot 1`] = `
 .c0 {
-  min-width: 96px;
-  max-width: calc(100% - 32px);
   background: var(--eds_ui_background__default,rgba(255,255,255,1));
   box-shadow: 0 1px 10px rgba(0,0,0,0.2),0 4px 5px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.14);
 }

diff --git a/packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap b/packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
@@ -2,8 +2,6 @@
 
 exports[`Snackbar Matches snapshot 1`] = `
 .c0 {
-  min-width: 96px;
-  max-width: calc(100% - 32px);
   background: var(--eds_ui_background__default,rgba(255,255,255,1));
   box-shadow: 0 1px 10px rgba(0,0,0,0.2),0 4px 5px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.14);
 }

diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx
@@ -38,12 +38,12 @@ const icons = {
 Icon.add(icons)
 
 const Wrapper = styled.div.attrs({ tabIndex: 0 })`
-  height: 100vh;
+  height: 65vh;
   overflow: auto;
 `
 
 const BodyWrapper = styled.div`
-  height: 1500px;
+  height: 1000px;
   background: #ebebeb;
   display: flex;
   flex-direction: column;