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

♻️ Scrim story to Typescript #802

Merged
merged 4 commits into from
Oct 30, 2020
Merged

♻️ Scrim story to Typescript #802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e5e7f9a
♻️ JSX to TSX
pomfrida Oct 30, 2020
a842a6d
♻️ Export Scrim props
pomfrida Oct 30, 2020
9e6f1c2
♻️ Simplified Story
pomfrida Oct 30, 2020
b97ab19
♻️ Changed React.HTMLAttributes to HTMLAttributes and it fixed the Pr…
pomfrida Oct 30, 2020
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
31 changes: 9 additions & 22 deletions ...storybook-react/stories/Scrim.stories.jsx → ...storybook-react/stories/Scrim.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import React, { useState } from 'react'
import { Scrim, Button, Typography } from '@equinor/eds-core-react'
import { Scrim, Button, Typography, ScrimProps } from '@equinor/eds-core-react'
import { Story, Meta } from '@storybook/react'

import styled from 'styled-components'

const Body = styled.div`
height: calc(100vh - 64px);
background: #ebebeb;
display: grid;
grid-template-rows: 1fr auto 1fr;
padding: 32px;
grid-gap: 32px;
`

const TestContent = styled.div`
background: rgba(255, 146, 0, 0.5);
border: 1px dashed #ff9200;
Expand All @@ -26,9 +18,9 @@ const TestContent = styled.div`
export default {
title: 'Components/Scrim',
component: Scrim,
}
} as Meta

export const Page = () => {
export const Default: Story<ScrimProps> = (args) => {
const [visibleScrim, setVisibleScrim] = useState(false)
const handleClose = (event, closed) => {
if (closed) {
Expand All @@ -39,23 +31,18 @@ export const Page = () => {
}

return (
<Body>
<Typography variant="body_short">Top of page</Typography>
<Typography variant="body_short">Center page.</Typography>
<div>
<Button onClick={() => setVisibleScrim(true)}>Trigger Scrim</Button>
</div>
<Typography variant="body_short">Bottom of page</Typography>
<>
<Button onClick={() => setVisibleScrim(true)}>Trigger Scrim</Button>
{visibleScrim && (
<Scrim onClose={handleClose} isDismissable>
<Scrim {...args} onClose={handleClose}>
<TestContent>
<Typography variant="body_short">
Press close or hit “ESC” to close scrim.
</Typography>
<Button onClick={() => setVisibleScrim(false)}>OK</Button>
<Button onClick={() => setVisibleScrim(false)}>Close</Button>
</TestContent>
</Scrim>
)}
</Body>
</>
)
}
2 changes: 1 addition & 1 deletion libraries/core-react/src/Scrim/Scrim.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable no-undef */
import React, { KeyboardEvent, useState } from 'react'
import React, { useState } from 'react'
import { render, cleanup, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import 'jest-styled-components'
Expand Down
33 changes: 17 additions & 16 deletions libraries/core-react/src/Scrim/Scrim.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import React, { forwardRef, useEffect, MouseEvent } from 'react'
import React, { forwardRef, useEffect, MouseEvent, HTMLAttributes } from 'react'
import styled from 'styled-components'
import { scrim as tokens } from './Scrim.tokens'

const { height, width, background } = tokens

type Props = {
/** Whether scrim can be dismissed with esc key */
isDismissable?: boolean
/** function to handle closing scrim */
onClose?: (event: MouseEvent | KeyboardEvent, open: boolean) => void
} & React.HTMLAttributes<HTMLElement>

const StyledScrim = styled.div<Props>`
const StyledScrim = styled.div`
width: ${width};
height: ${height};
background: ${background};
Expand All @@ -29,10 +22,23 @@ const ScrimContent = styled.div`
height: auto;
`

export const Scrim = forwardRef<HTMLDivElement, Props>(function EdsScrim(
export type ScrimProps = {
/** Whether scrim can be dismissed with esc key and outside click
*/
isDismissable?: boolean
/** function to handle closing scrim */
onClose?: (event: MouseEvent | KeyboardEvent, open: boolean) => void
} & HTMLAttributes<HTMLDivElement>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note to self: Import HTMLAttributes from React instead of using React.HTMLAttributes directly. Somehow this f***s up the prop table. 🤯

Copy link
Contributor

Choose a reason for hiding this comment

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

It was the other way around last time 🤪


export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
{ children, onClose, isDismissable = false, ...rest },
ref,
) {
const props = {
...rest,
isDismissable,
ref,
}
const handleKeyboardClose = (event: KeyboardEvent) => {
if (event) {
if (event.key === 'Escape' && isDismissable) {
Expand Down Expand Up @@ -65,12 +71,7 @@ export const Scrim = forwardRef<HTMLDivElement, Props>(function EdsScrim(
}, [])

return (
<StyledScrim
onClick={handleMouseClose}
isDismissable={isDismissable}
{...rest}
ref={ref}
>
<StyledScrim onClick={handleMouseClose} {...props}>
<ScrimContent onClick={handleContentClick}>{children}</ScrimContent>
</StyledScrim>
)
Expand Down
2 changes: 1 addition & 1 deletion libraries/core-react/src/Scrim/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { Scrim } from './Scrim'
export * from './Scrim'
2 changes: 1 addition & 1 deletion libraries/core-react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export { Tabs } from './Tabs'
export * from './Card'
export * from './TopBar'
export { Dialog } from './Dialog'
export { Scrim } from './Scrim'
export * from './Scrim'
export { TableOfContents } from './TableOfContents'
export { SideSheet } from './SideSheet'
export { Chip } from './Chip'
Expand Down