From 962e9e834b2410f069c8e2793ed6dd82ba84ee95 Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Wed, 8 Feb 2023 14:58:31 +0100 Subject: [PATCH 1/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20make=20Banner=20use=20?= =?UTF-8?q?the=20Box?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/banner/Banner.tsx | 42 +++++++++++++++++++++----- src/components/banner/theme.css | 51 ++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 8 deletions(-) diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 541f85d27..52b1668a7 100644 --- a/src/components/banner/Banner.tsx +++ b/src/components/banner/Banner.tsx @@ -1,13 +1,19 @@ import React from 'react'; +import cx from 'classnames'; -import Box from '../box'; -import Island, { IslandProps } from '../island'; -import Section, { SectionProps } from '../section'; +import Box, { BoxProps, Padding } from '../box'; import IconButton from '../iconButton'; import theme from './theme.css'; import { IconCloseMediumOutline } from '@teamleader/ui-icons'; +import { COLORS, SIZES } from '../../constants'; -export interface BannerProps extends SectionProps, IslandProps { +const PADDINGS: Record<'small' | 'medium' | 'large', Padding> = { + small: 3, + medium: 4, + large: 5, +}; + +export interface BannerProps extends Omit { /** The content to display inside the banner. */ children?: React.ReactNode; /** A class name for the wrapper to give custom styles. */ @@ -18,13 +24,33 @@ export interface BannerProps extends SectionProps, IslandProps { onClose?: React.MouseEventHandler; /** If true, component will take the full width of it's container. */ fullWidth?: boolean; + /** The color for the Banner background and border */ + color?: Exclude | 'white'; + /** Te size of the Banner component */ + size?: Exclude; } -const Banner = ({ children, className, color = 'white', icon, onClose, fullWidth, ...others }: BannerProps) => { - const Element = fullWidth ? Section : Island; +const Banner = ({ + children, + className, + color = 'white', + size = 'medium', + icon, + onClose, + fullWidth, + ...others +}: BannerProps) => { + const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth }); return ( - +
{icon && {icon}} @@ -39,7 +65,7 @@ const Banner = ({ children, className, color = 'white', icon, onClose, fullWidth /> )}
- + ); }; diff --git a/src/components/banner/theme.css b/src/components/banner/theme.css index 0973e9307..29ee9c0e8 100644 --- a/src/components/banner/theme.css +++ b/src/components/banner/theme.css @@ -1,6 +1,15 @@ @import '@teamleader/ui-colors'; @import '@teamleader/ui-utilities'; +.banner { + border: 1px solid; + + &_full-width { + border: 0px solid; + border-bottom-width: 1px; + } +} + .icon { margin-right: var(--spacer-small); display: flex; @@ -17,3 +26,45 @@ top: -3px; right: -3px; } + +.white { + background-color: var(--color-white); + border-color: var(--color-neutral); + color: var(--color-teal-darkest); +} + +.neutral { + background-color: var(--color-neutral-light); + border-color: var(--color-neutral); + color: var(--color-teal-darkest); +} + +.mint { + background-color: var(--color-mint-lightest); + border-color: var(--color-mint); + color: var(--color-mint-darkest); +} + +.violet { + background-color: var(--color-violet-lightest); + border-color: var(--color-violet); + color: var(--color-violet-darkest); +} + +.ruby { + background-color: var(--color-ruby-lightest); + border-color: var(--color-ruby); + color: var(--color-ruby-darkest); +} + +.gold { + background-color: var(--color-gold-lightest); + border-color: var(--color-gold); + color: var(--color-gold-darkest); +} + +.aqua { + background-color: var(--color-aqua-lightest); + border-color: var(--color-aqua); + color: var(--color-aqua-darkest); +} From 8dedb7ff5c2bffbe9c5ec72d6f0a3d83cf7590eb Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Thu, 9 Feb 2023 16:41:24 +0100 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=92=84=20replace=20Section=20in=20dia?= =?UTF-8?q?log=20Header=20and=20DetailPageHeader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/detailPage/DetailPageHeader.tsx | 11 +++++++++-- src/components/dialog/Header.tsx | 15 ++++++++++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/detailPage/DetailPageHeader.tsx b/src/components/detailPage/DetailPageHeader.tsx index 931aa4899..42f9ffb9d 100644 --- a/src/components/detailPage/DetailPageHeader.tsx +++ b/src/components/detailPage/DetailPageHeader.tsx @@ -6,7 +6,6 @@ import { BadgedLinkProps } from '../badgedLink/BadgedLink'; import { Box } from '../box'; import Container from '../container'; import { ContainerProps } from '../container/Container'; -import Section from '../section'; import { Heading1, TextBody } from '../typography'; import theme from './theme.css'; @@ -28,7 +27,15 @@ const DetailPageHeader: GenericComponent = ({ ...others }) => { return ( - + {backLinkProps && ( diff --git a/src/components/dialog/Header.tsx b/src/components/dialog/Header.tsx index c7305f741..d991cc943 100644 --- a/src/components/dialog/Header.tsx +++ b/src/components/dialog/Header.tsx @@ -1,12 +1,12 @@ import React, { ReactNode } from 'react'; import { IconCloseMediumOutline } from '@teamleader/ui-icons'; -import Section from '../section'; import IconButton from '../iconButton'; import Icon from '../icon'; import theme from './theme.css'; import { GenericComponent } from '../../@types/types'; +import Box from '../box'; export interface HeaderProps { /** The content to display inside the dialog. */ @@ -19,7 +19,16 @@ export interface HeaderProps { const Header: GenericComponent = ({ icon, onCloseClick, children, ...rest }) => { return ( -
+ {icon && ( {icon} @@ -34,7 +43,7 @@ const Header: GenericComponent = ({ icon, onCloseClick, children, . className={theme['close-icon']} /> )} -
+ ); }; From 710b55a8a404dd6f50719560931d04457b8adb09 Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Thu, 9 Feb 2023 16:42:58 +0100 Subject: [PATCH 3/8] remove Section component --- src/components/section/Section.tsx | 37 -------------- .../section/__tests__/Section.spec.tsx | 10 ---- .../__snapshots__/Section.spec.tsx.snap | 12 ----- src/components/section/index.ts | 4 -- src/components/section/section.stories.tsx | 15 ------ src/components/section/theme.css | 48 ------------------- src/index.ts | 3 -- 7 files changed, 129 deletions(-) delete mode 100644 src/components/section/Section.tsx delete mode 100644 src/components/section/__tests__/Section.spec.tsx delete mode 100644 src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap delete mode 100644 src/components/section/index.ts delete mode 100644 src/components/section/section.stories.tsx delete mode 100644 src/components/section/theme.css diff --git a/src/components/section/Section.tsx b/src/components/section/Section.tsx deleted file mode 100644 index 09e6283ff..000000000 --- a/src/components/section/Section.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import cx from 'classnames'; -import React, { ReactNode } from 'react'; -import { GenericComponent } from '../../@types/types'; -import { COLORS, SIZES } from '../../constants'; -import Box from '../box'; -import { BoxProps, Padding } from '../box/Box'; -import theme from './theme.css'; - -const PADDINGS: Record<'small' | 'medium' | 'large', Padding> = { - small: 3, - medium: 4, - large: 5, -}; - -export interface SectionProps extends Omit { - children?: ReactNode; - color?: Exclude | 'white'; - size?: Exclude; -} - -const Section: GenericComponent = ({ - children, - className, - color = 'white', - size = 'medium', - ...rest -}) => { - const classNames = cx(theme['section'], className as string, theme[color]); - - return ( - - {children} - - ); -}; - -export default Section; diff --git a/src/components/section/__tests__/Section.spec.tsx b/src/components/section/__tests__/Section.spec.tsx deleted file mode 100644 index 2248110e1..000000000 --- a/src/components/section/__tests__/Section.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import Section from '../Section'; - -describe('Component - Section', () => { - it('renders', async () => { - const { asFragment } = render(
This is a Section
); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap b/src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap deleted file mode 100644 index f9d00cdcc..000000000 --- a/src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Component - Section renders 1`] = ` - -
- This is a Section -
- -`; diff --git a/src/components/section/index.ts b/src/components/section/index.ts deleted file mode 100644 index ecf986b32..000000000 --- a/src/components/section/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Section, { SectionProps } from './Section'; - -export default Section; -export type { SectionProps }; diff --git a/src/components/section/section.stories.tsx b/src/components/section/section.stories.tsx deleted file mode 100644 index 9d76747f1..000000000 --- a/src/components/section/section.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils'; -import { Section, TextBody } from '../../index'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -export default { - component: Section, - title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Section'), -} as ComponentMeta; - -export const Basic: ComponentStory = (args) => ( -
- I am a section -
-); diff --git a/src/components/section/theme.css b/src/components/section/theme.css deleted file mode 100644 index bac1b9df2..000000000 --- a/src/components/section/theme.css +++ /dev/null @@ -1,48 +0,0 @@ -@import '@teamleader/ui-colors'; -@import '@teamleader/ui-utilities'; - -.section { - border-bottom: 1px solid; -} - -.white { - background-color: var(--color-white); - border-color: var(--color-neutral); - color: var(--color-teal-darkest); -} - -.neutral { - background-color: var(--color-neutral-light); - border-color: var(--color-neutral); - color: var(--color-teal-darkest); -} - -.mint { - background-color: var(--color-mint-lightest); - border-color: var(--color-mint); - color: var(--color-mint-darkest); -} - -.violet { - background-color: var(--color-violet-lightest); - border-color: var(--color-violet); - color: var(--color-violet-darkest); -} - -.ruby { - background-color: var(--color-ruby-lightest); - border-color: var(--color-ruby); - color: var(--color-ruby-darkest); -} - -.gold { - background-color: var(--color-gold-lightest); - border-color: var(--color-gold); - color: var(--color-gold-darkest); -} - -.aqua { - background-color: var(--color-aqua-lightest); - border-color: var(--color-aqua); - color: var(--color-aqua-darkest); -} diff --git a/src/index.ts b/src/index.ts index 825ed8f81..e75710806 100644 --- a/src/index.ts +++ b/src/index.ts @@ -89,7 +89,6 @@ import Popover, { PopoverProps } from './components/popover'; import PoweredByButton, { PoweredByButtonProps } from './components/poweredByButton'; import ProgressTracker, { ProgressTrackerProps } from './components/progressTracker'; import { RadioButton, RadioButtonProps, RadioGroup, RadioGroupProps } from './components/radio'; -import Section, { SectionProps } from './components/section'; import Select, { AsyncSelect, AsyncSelectProps, @@ -238,7 +237,6 @@ export { ProgressTracker, RadioButton, RadioGroup, - Section, Select, SplitButton, StatusLabel, @@ -355,7 +353,6 @@ export type { ProgressTrackerProps, RadioButtonProps, RadioGroupProps, - SectionProps, SelectComponentsProps, SelectProps, SelectRef, From ec76452b33ef339b0499a1d0f3583cbce1fd0e53 Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Thu, 9 Feb 2023 16:48:32 +0100 Subject: [PATCH 4/8] =?UTF-8?q?=E2=9C=85=20update=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../banner/__tests__/__snapshots__/Banner.spec.tsx.snap | 7 ++++--- .../__tests__/__snapshots__/DetailPage.spec.tsx.snap | 8 ++++---- src/components/dialog/__tests__/Dialog.spec.tsx | 2 +- .../dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap | 8 ++++---- .../__tests__/__snapshots__/MarketingDialog.spec.tsx.snap | 8 ++++---- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap b/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap index 3a13d866f..5c9afc9f9 100644 --- a/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap +++ b/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap @@ -3,9 +3,10 @@ exports[`Component - Banner renders 1`] = `
-
- +
{ ); expect(handleOnClose).not.toBeCalled(); - const closeButton = screen.baseElement.querySelector('section button[type="button"]'); + const closeButton = screen.baseElement.querySelector('div button[type="button"]'); await user.click(closeButton!); expect(handleOnClose).toBeCalledTimes(1); diff --git a/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap b/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap index dbc72bc16..379f66003 100644 --- a/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap +++ b/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap @@ -29,9 +29,9 @@ exports[`Component - Dialog renders 1`] = `
-
-
+
-

-

+
Date: Thu, 9 Feb 2023 17:01:09 +0100 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=93=9D=20update=20changelog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 99ecdc245..32e3f7f32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ ### Removed +- [BREAKING] `Section`: removed the component and replaced the instances with either a `Box` or a full-width `Banner` ([@farazatarodi](https://github.com/farazatarodi) in [#2558](https://github.com/teamleadercrm/ui/pull/2558)) + ### Fixed ### Dependency updates From e9d659b25b8868c9d457e7a784fbc94c2d293190 Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Fri, 10 Feb 2023 09:57:54 +0100 Subject: [PATCH 6/8] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20fix=20prop=20descripti?= =?UTF-8?q?on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/banner/Banner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 52b1668a7..f5485f659 100644 --- a/src/components/banner/Banner.tsx +++ b/src/components/banner/Banner.tsx @@ -26,7 +26,7 @@ export interface BannerProps extends Omit { fullWidth?: boolean; /** The color for the Banner background and border */ color?: Exclude | 'white'; - /** Te size of the Banner component */ + /** The size of the Banner component */ size?: Exclude; } From 80ec0d7596c3bce542df1543b8d57c1b6689cf9e Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Fri, 10 Feb 2023 11:01:38 +0100 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=92=84=20fix=20Header=20title=20color?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dialog/Header.tsx | 8 +++++++- src/components/dialog/theme.css | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/dialog/Header.tsx b/src/components/dialog/Header.tsx index d991cc943..fa9a3d7a4 100644 --- a/src/components/dialog/Header.tsx +++ b/src/components/dialog/Header.tsx @@ -7,6 +7,7 @@ import Icon from '../icon'; import theme from './theme.css'; import { GenericComponent } from '../../@types/types'; import Box from '../box'; +import cx from 'classnames'; export interface HeaderProps { /** The content to display inside the dialog. */ @@ -15,9 +16,13 @@ export interface HeaderProps { icon?: ReactNode; /** Callback function that is fired when the close icon clicked. */ onCloseClick?: () => void; + /** A class name for the wrapper to give custom styles. */ + className?: string; } -const Header: GenericComponent = ({ icon, onCloseClick, children, ...rest }) => { +const Header: GenericComponent = ({ icon, onCloseClick, children, className, ...rest }) => { + const classNames = cx(className, theme['header']); + return ( = ({ icon, onCloseClick, children, . backgroundTint="light" borderBottomWidth={1} borderTint="normal" + className={classNames} {...rest} > {icon && ( diff --git a/src/components/dialog/theme.css b/src/components/dialog/theme.css index 82cb5b5d4..fbb38a8a4 100644 --- a/src/components/dialog/theme.css +++ b/src/components/dialog/theme.css @@ -99,3 +99,7 @@ 0px -4px 8px rgba(130, 130, 140, 0.09); z-index: 2; } + +.header { + color: var(--color-teal-darkest); +} From a13de7ca7b99db052694a5bcc3ac808c67fdcb1f Mon Sep 17 00:00:00 2001 From: Faraz <78449551+farazatarodi@users.noreply.github.com> Date: Fri, 10 Feb 2023 11:08:30 +0100 Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=93=B8=20update=20snapshots?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap | 2 +- .../__tests__/__snapshots__/MarketingDialog.spec.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap b/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap index 379f66003..fb03a33a0 100644 --- a/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap +++ b/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap @@ -30,7 +30,7 @@ exports[`Component - Dialog renders 1`] = ` class="inner" >