From 4f329e4d39e77fbf64405334779418bc02b49568 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 3 Nov 2023 15:28:21 -0700 Subject: [PATCH 1/2] Update Paper default background --- .../src/components/button/Button/Button.mdx | 2 +- .../src/components/layout/Paper/Paper.mdx | 9 ++++-- .../src/components/layout/Paper/Paper.tsx | 28 ++++++++---------- .../src/components/layout/Paper/types.ts | 17 ++++++----- .../storybook/assets}/buttonBackground.png | Bin .../storybook/assets}/paperExampleGood.png | Bin 6 files changed, 28 insertions(+), 28 deletions(-) rename packages/harmony/{.storybook/public => src/storybook/assets}/buttonBackground.png (100%) rename packages/harmony/{.storybook/public => src/storybook/assets}/paperExampleGood.png (100%) diff --git a/packages/harmony/src/components/button/Button/Button.mdx b/packages/harmony/src/components/button/Button/Button.mdx index 51ab7330baa..94d31cdd0fb 100644 --- a/packages/harmony/src/components/button/Button/Button.mdx +++ b/packages/harmony/src/components/button/Button/Button.mdx @@ -13,7 +13,7 @@ import IconCamera from 'assets/icons/Camera.svg' import { Flex } from 'components' import { ComponentRules, RelatedComponents } from 'storybook/components' -import buttonBackground from '../../../../.storybook/public/buttonBackground.png' +import buttonBackground from 'storybook/assets/buttonBackground.png' import { ButtonSize, ButtonType } from '../types' import { Button } from './Button' diff --git a/packages/harmony/src/components/layout/Paper/Paper.mdx b/packages/harmony/src/components/layout/Paper/Paper.mdx index 09c506a5a52..edfde8b33b7 100644 --- a/packages/harmony/src/components/layout/Paper/Paper.mdx +++ b/packages/harmony/src/components/layout/Paper/Paper.mdx @@ -9,9 +9,12 @@ import { Story, Stories } from '@storybook/blocks' -import { Paper } from './Paper' -import { Box } from '../Box' -import { Flex } from '../Flex' + +import { Box, Flex } from 'components' +import { ComponentRules, RelatedComponents } from 'storybook/components' + +import paperExampleGood from 'storybook/assets/paperExampleGood.png' + import * as PaperStories from './Paper.stories' import paperExampleGood from '../../../../.storybook/public/paperExampleGood.png' diff --git a/packages/harmony/src/components/layout/Paper/Paper.tsx b/packages/harmony/src/components/layout/Paper/Paper.tsx index bb7c76cf212..e4d91e9df1d 100644 --- a/packages/harmony/src/components/layout/Paper/Paper.tsx +++ b/packages/harmony/src/components/layout/Paper/Paper.tsx @@ -1,4 +1,3 @@ -import { useTheme } from '@emotion/react' import styled from '@emotion/styled' import { Flex } from '../Flex' @@ -9,22 +8,19 @@ import type { PaperProps } from './types' * Base layout component used as a building block for creating pages * and other components. * */ -export const Paper = styled(Flex)( - ({ - backgroundColor = 'default', +export const Paper = styled(Flex)((props) => { + const { + theme, + backgroundColor = 'white', border = 'default', borderRadius = 'm', shadow = 'mid' - }: PaperProps) => { - const theme = useTheme() - return { - position: 'relative', - boxSizing: 'border-box', - boxShadow: shadow && theme.shadows[shadow], - border: border && `1px solid ${theme.color.border[border]}`, - borderRadius: borderRadius && theme.cornerRadius[borderRadius], - backgroundColor: - backgroundColor && theme.color.background[backgroundColor] - } + } = props + + return { + boxShadow: theme.shadows[shadow], + border: `1px solid ${theme.color.border[border]}`, + borderRadius: theme.cornerRadius[borderRadius], + backgroundColor: theme.color.background[backgroundColor] } -) +}) diff --git a/packages/harmony/src/components/layout/Paper/types.ts b/packages/harmony/src/components/layout/Paper/types.ts index 314cbc055e9..fda08c7d9b0 100644 --- a/packages/harmony/src/components/layout/Paper/types.ts +++ b/packages/harmony/src/components/layout/Paper/types.ts @@ -1,15 +1,16 @@ -import type { BackgroundColors, BorderColors } from 'foundations' -import type { CornerRadiusOptions } from 'foundations/corner-radius' -import type { ShadowOptions } from 'foundations/shadows' +import type { + BackgroundColors, + BorderColors, + CornerRadiusOptions, + ShadowOptions +} from 'foundations' -import type { FlexProps } from '../Flex/types' - -export type PaperProps = Omit & { +export type PaperProps = { /** * Background Color - * @default default + * @default white */ - backgroundColor?: BackgroundColors + backgroundColor?: Exclude /** * Border type. If not provided, no border will be used. diff --git a/packages/harmony/.storybook/public/buttonBackground.png b/packages/harmony/src/storybook/assets/buttonBackground.png similarity index 100% rename from packages/harmony/.storybook/public/buttonBackground.png rename to packages/harmony/src/storybook/assets/buttonBackground.png diff --git a/packages/harmony/.storybook/public/paperExampleGood.png b/packages/harmony/src/storybook/assets/paperExampleGood.png similarity index 100% rename from packages/harmony/.storybook/public/paperExampleGood.png rename to packages/harmony/src/storybook/assets/paperExampleGood.png From bb38eb3f70cab720c89dbb27e519dd709122326a Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 3 Nov 2023 15:30:24 -0700 Subject: [PATCH 2/2] Lint --- packages/harmony/src/components/button/Button/Button.mdx | 2 +- packages/harmony/src/components/layout/Paper/Paper.mdx | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/harmony/src/components/button/Button/Button.mdx b/packages/harmony/src/components/button/Button/Button.mdx index 94d31cdd0fb..c71cbc0314a 100644 --- a/packages/harmony/src/components/button/Button/Button.mdx +++ b/packages/harmony/src/components/button/Button/Button.mdx @@ -11,9 +11,9 @@ import { import IconCamera from 'assets/icons/Camera.svg' import { Flex } from 'components' +import buttonBackground from 'storybook/assets/buttonBackground.png' import { ComponentRules, RelatedComponents } from 'storybook/components' -import buttonBackground from 'storybook/assets/buttonBackground.png' import { ButtonSize, ButtonType } from '../types' import { Button } from './Button' diff --git a/packages/harmony/src/components/layout/Paper/Paper.mdx b/packages/harmony/src/components/layout/Paper/Paper.mdx index edfde8b33b7..a2507fb67aa 100644 --- a/packages/harmony/src/components/layout/Paper/Paper.mdx +++ b/packages/harmony/src/components/layout/Paper/Paper.mdx @@ -1,22 +1,17 @@ import { - Canvas, Meta, Title, Subtitle, Description, Primary, - Controls, - Story, - Stories + Controls } from '@storybook/blocks' import { Box, Flex } from 'components' -import { ComponentRules, RelatedComponents } from 'storybook/components' - import paperExampleGood from 'storybook/assets/paperExampleGood.png' +import { ComponentRules, RelatedComponents } from 'storybook/components' import * as PaperStories from './Paper.stories' -import paperExampleGood from '../../../../.storybook/public/paperExampleGood.png'