Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ elevation options to Card/Banner/TopBar #2313

Merged
merged 10 commits into from
Jun 17, 2022
Merged

✨ elevation options to Card/Banner/TopBar #2313

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
233cfe1
Paper: removed max/min width
oddvernes Jun 8, 2022
007ab6e
Paper: expose ElevationTypes to add elevation prop to other components
oddvernes Jun 8, 2022
d0d1f4b
made topbar story not so tall
oddvernes Jun 8, 2022
7a430a9
added elevation prop to topbar
oddvernes Jun 8, 2022
c9cbb49
✨ elevation options to Card/Banner/TopBar
oddvernes Jun 15, 2022
73088ca
📸 Update snapshots
oddvernes Jun 15, 2022
6533837
📸 Update more snapshots
oddvernes Jun 15, 2022
4d609df
rename type to AvailableElevations
oddvernes Jun 16, 2022
48520b7
TopBar: render paper as header
oddvernes Jun 16, 2022
ac4bef9
TopBar: Removed raised arg from default story
oddvernes Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/eds-core-react/src/components/Banner/Banner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
16 changes: 12 additions & 4 deletions packages/eds-core-react/src/components/Banner/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 allowedElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the type that users will see in their IDE, so maybe a nicer word, availableElevations ? Its also a type which means it should start with an Uppercase.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing it to AvailableElevations


type ContentProps = {
hasIcon: boolean
Expand All @@ -35,11 +37,12 @@ const NonMarginDivider = styled(Divider)`
`

export type BannerProps = {
elevation?: allowedElevations
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(
Expand All @@ -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>
)
})
26 changes: 16 additions & 10 deletions packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -33,7 +38,7 @@ exports[`Banner Matches snapshot 1`] = `
margin-right: 16px;
}

.c0 {
.c1 {
padding-left: 16px;
padding-top: 16px;
padding-right: 16px;
Expand All @@ -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;
Expand All @@ -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"
Expand All @@ -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>
Expand Down
12 changes: 9 additions & 3 deletions packages/eds-core-react/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 allowedElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>
oddvernes marked this conversation as resolved.
Show resolved Hide resolved

type StyledCardProps = {
background: string
cursor: string
Expand All @@ -13,9 +17,11 @@ type StyledCardProps = {
export type CardProps = {
/** Variant */
variant?: 'default' | 'info' | 'warning' | 'danger'
/** Elevation */
elevation?: allowedElevations
} & HTMLAttributes<HTMLDivElement>

const StyledCard = styled.div<StyledCardProps>`
const StyledCard = styled(Paper)<StyledCardProps>`
width: 100%;
position: relative;
background-color: ${({ background }) => background};
Expand All @@ -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'
Expand All @@ -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>
)
Expand Down
42 changes: 24 additions & 18 deletions packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Card Matches snapshot 1`] = `
<DocumentFragment>
.c4 {
.c5 {
margin: 0;
color: rgba(61,61,61,1);
font-family: Equinor;
Expand All @@ -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;
Expand All @@ -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));
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 0 additions & 2 deletions packages/eds-core-react/src/components/Paper/Paper.tokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,5 @@ export type ElevationTypes = keyof Elevations

export { elevation }
export const paper: ComponentToken = {
maxWidth: 'calc(100% - 32px)',
minWidth: '96px',
background,
}
2 changes: 0 additions & 2 deletions packages/eds-core-react/src/components/Paper/Paper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`
Expand Down
2 changes: 0 additions & 2 deletions packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 0 additions & 2 deletions packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
7 changes: 5 additions & 2 deletions packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import {
export default {
title: 'Navigation/TopBar',
component: TopBar,
args: {
elevation: 'raised',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest removing this or set it to none as thats the default elevation for Topbar

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example is a sticky topbar though, which is the use case where it should be elevated. Perhaps the main example should not be sticky and move that down as its own story?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eh, I just removed it

},
subcomponents: {
Header: TopBar.Header,
CustomContent: TopBar.CustomContent,
Expand All @@ -38,12 +41,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;
Expand Down
Loading