From 55c44e453ce19f7f81ba6d4aacb6e86b9157864c Mon Sep 17 00:00:00 2001
From: Frida Erdal <31915755+pomfrida@users.noreply.github.com>
Date: Fri, 30 Oct 2020 15:48:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20Sidesheet=20story=20to?=
=?UTF-8?q?=20Typescript=20(#803)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* ♻️ JSX to TSX
* Fixed merge conflict
* ♻️ Added controls to story
* 🔥 Removed useless code (control select is automatic!)
---
.../stories/SideSheet.stories.jsx | 185 ------------------
.../stories/SideSheet.stories.tsx | 37 ++++
.../core-react/src/SideSheet/SideSheet.tsx | 11 +-
libraries/core-react/src/SideSheet/index.ts | 2 +-
libraries/core-react/src/index.ts | 4 +-
5 files changed, 45 insertions(+), 194 deletions(-)
delete mode 100644 apps/storybook-react/stories/SideSheet.stories.jsx
create mode 100644 apps/storybook-react/stories/SideSheet.stories.tsx
diff --git a/apps/storybook-react/stories/SideSheet.stories.jsx b/apps/storybook-react/stories/SideSheet.stories.jsx
deleted file mode 100644
index 6df4d59d47..0000000000
--- a/apps/storybook-react/stories/SideSheet.stories.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState, Fragment } from 'react'
-import styled from 'styled-components'
-import { SideSheet, Button, TopBar, Icon } from '@equinor/eds-core-react'
-
-import {
- account_circle,
- accessible,
- notifications,
- fullscreen,
- grid_on,
-} from '@equinor/eds-icons'
-
-const { Actions, Header, CustomContent } = TopBar
-
-const icons = {
- account_circle,
- accessible,
- notifications,
- fullscreen,
- grid_on,
-}
-
-Icon.add(icons)
-
-const Wrapper = styled.div`
- height: 100vh;
- overflow: auto;
-`
-
-const Body = styled.div`
- position: relative;
- height: 1500px;
- background: #ebebeb;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
-`
-const Icons = styled.div`
- display: flex;
- align-items: center;
- flex-direction: row-reverse;
- > * {
- margin-left: 40px;
- }
-`
-
-const Child = styled.div`
- padding: 6px;
- background-color: rgba(255, 146, 0, 0.15);
- box-sizing: border-box;
- border: 1px dashed #ff9200;
- border-radius: 4px;
-`
-
-export default {
- title: 'Components/SideSheet',
- component: SideSheet,
-}
-
-export function Small() {
- const [toggle, setToggle] = useState(true)
-
- return (
-
-
-
-
-
- Application name - subtitle
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setToggle(!toggle)}
- >
- Children
-
-
-
Top of page
-
-
Middle of page
- Bottom of page
-
-
- )
-}
-
-export function Medium() {
- const [toggle, setToggle] = useState(true)
-
- return (
-
- setToggle(!toggle)}
- >
- Children
-
-
-
-
Top of page
-
-
Middle of page
- Bottom of page
-
-
- )
-}
-
-export function Large() {
- const [toggle, setToggle] = useState(true)
-
- return (
-
- setToggle(!toggle)}
- >
- Children
-
-
-
-
Top of page
-
-
Middle of page
- Bottom of page
-
-
- )
-}
-
-export function XLarge() {
- const [toggle, setToggle] = useState(true)
-
- return (
-
- setToggle(!toggle)}
- >
- Children
-
-
-
-
Top of page
-
-
Middle of page
- Bottom of page
-
-
- )
-}
diff --git a/apps/storybook-react/stories/SideSheet.stories.tsx b/apps/storybook-react/stories/SideSheet.stories.tsx
new file mode 100644
index 0000000000..4f961b4b70
--- /dev/null
+++ b/apps/storybook-react/stories/SideSheet.stories.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { SideSheet, SideSheetProps, Button } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
+
+const Child = styled.div`
+ padding: 6px;
+ background-color: rgba(255, 146, 0, 0.15);
+ box-sizing: border-box;
+ border: 1px dashed #ff9200;
+ border-radius: 4px;
+`
+
+export default {
+ title: 'Components/SideSheet',
+ component: SideSheet,
+ argTypes: {
+ title: {
+ defaultValue: 'Title',
+ },
+ },
+} as Meta
+
+export const Default: Story = (args) => {
+ const [toggle, setToggle] = useState(true)
+
+ return (
+
+
+ setToggle(!toggle)}>
+ Children
+
+
+ )
+}
diff --git a/libraries/core-react/src/SideSheet/SideSheet.tsx b/libraries/core-react/src/SideSheet/SideSheet.tsx
index d2e14aa298..f7b0965281 100644
--- a/libraries/core-react/src/SideSheet/SideSheet.tsx
+++ b/libraries/core-react/src/SideSheet/SideSheet.tsx
@@ -1,5 +1,4 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes } from 'react'
import styled from 'styled-components'
import { clear } from '@equinor/eds-icons'
import { spacingsTemplate } from '../_common/templates'
@@ -20,7 +19,7 @@ type StyleProps = {
width: string
}
-type Props = {
+export type SideSheetProps = {
/** Title for Side Sheet */
title?: string
/** Variant controls width of Side Sheet */
@@ -29,7 +28,7 @@ type Props = {
onClose?: (Event) => void
/** Open / close Side Sheet */
open?: boolean
-} & React.HTMLAttributes
+} & HTMLAttributes
const StyledSideSheet = styled.div`
height: 100%;
@@ -54,8 +53,8 @@ const Header = styled.div`
padding-right: 10px;
`
-export const SideSheet = forwardRef(
- function EdsSideSheet(
+export const SideSheet = forwardRef(
+ function SideSheet(
{
variant = 'medium',
title = '',
diff --git a/libraries/core-react/src/SideSheet/index.ts b/libraries/core-react/src/SideSheet/index.ts
index b2b4911a1d..30003a5f43 100644
--- a/libraries/core-react/src/SideSheet/index.ts
+++ b/libraries/core-react/src/SideSheet/index.ts
@@ -1 +1 @@
-export { SideSheet } from './SideSheet'
+export * from './SideSheet'
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
index 719e89ac92..dafbd3d05b 100644
--- a/libraries/core-react/src/index.ts
+++ b/libraries/core-react/src/index.ts
@@ -14,8 +14,8 @@ export * from './TopBar'
export { Dialog } from './Dialog'
export * from './Scrim'
export { TableOfContents } from './TableOfContents'
-export { SideSheet } from './SideSheet'
-export * from './Chip'
+export * from './SideSheet'
+export { Chip } from './Chip'
export * from './Avatar'
export * from './Search'
export { Slider } from './Slider'