From 236d90cc4fc7d9da4e2a19156f108865f1305f31 Mon Sep 17 00:00:00 2001 From: akomsky Date: Mon, 18 Sep 2023 16:25:35 -0400 Subject: [PATCH 1/3] bug(SITE-21611): DS button link bug --- packages/core/src/Button/BrokenButton.tsx | 175 ++++++++++++++++++++ packages/core/src/Button/Button.stories.tsx | 25 ++- 2 files changed, 197 insertions(+), 3 deletions(-) create mode 100644 packages/core/src/Button/BrokenButton.tsx diff --git a/packages/core/src/Button/BrokenButton.tsx b/packages/core/src/Button/BrokenButton.tsx new file mode 100644 index 0000000000..e91b53324d --- /dev/null +++ b/packages/core/src/Button/BrokenButton.tsx @@ -0,0 +1,175 @@ +import React, { useState, useEffect } from 'react' +import styled from 'styled-components' +import { Box, Text, Button, Flex, getPaletteColor } from '..' +import { Check } from 'pcln-icons' + +const PRODUCT_TABS = [ + { + autobotID: 'DASH_TAB_HOTELS', + name: 'HOTELS', + tabText: 'Hotels', + id: 'hotels', + query: { tab: 'hotels' }, + }, + { + autobotID: 'DASH_TAB_FLIGHTS', + name: 'FLIGHTS', + tabText: 'Flights', + id: 'flights', + query: { tab: 'flights' }, + }, + { + autobotID: 'DASH_TAB_HOTEL + FLIGHT', + name: 'BUNDLE + SAVE', + tabText: 'Bundle & Save', + id: 'vacations', + query: { tab: 'vacations' }, + }, + { + autobotID: 'DASH_TAB_CARS', + name: 'CARS', + tabText: 'Cars', + id: 'cars', + query: { tab: 'cars' }, + }, + { + autobotID: 'DASH_TAB_CRUISES', + name: 'CRUISES', + tabText: 'Cruises', + id: 'cruises', + query: { tab: 'cruises' }, + }, +] as const + +const Wrapper = styled(Flex)` + position: relative; +` +const IconWrapper = styled(Flex)<{ isActive: boolean }>` + background: ${(props) => (props.isActive ? 'transparent' : getPaletteColor('background.base'))}; +` + +const TabWithIcon = styled(Button)<{ highlightTab: boolean }>` + &:hover { + text-decoration: none; + } + z-index: 1; + position: relative; + border: 2px solid ${(props) => (props.highlightTab ? getPaletteColor('primary.base') : 'transparent')}; + background-color: ${(props) => (props.highlightTab ? getPaletteColor('primary.light') : 'transparent')}; + &:hover ${IconWrapper} { + border: 1px solid ${(props) => (props.isActive ? 'transparent' : getPaletteColor('primary.base'))}; + } +` + +const Slider = styled(Button)<{ showSlider: boolean }>` + position: absolute; + top: 0; + bottom: 0; + height: 44px; + z-index: 0; + border: 2px solid ${(props) => (props.showSlider ? getPaletteColor('primary.base') : 'transparent')}; + background-color: ${(props) => (props.showSlider ? getPaletteColor('primary.light') : 'transparent')}; + transition: margin-left 0.4s ease-in-out, width 0.4s ease-in-out; +` + +const StyledButton = styled(Button)<{ highlightTab: boolean }>` + &:hover { + text-decoration: none; + } + position: relative; + border: 2px solid ${getPaletteColor('primary.base')}; + background-color: ${getPaletteColor('primary.light')}; +` +const BrokenButton = () => { + const [activeTab, setActiveTab] = useState('hotels') + const [hoveredTab, setHoverTab] = useState('') + const [sliderWidth, setSliderWidth] = useState(0) + const [sliderOffset, setSliderOffset] = useState(0) + const [showSlider, setShowSlider] = useState(false) + const [highlightTab, setHighlightTab] = useState(false) + useEffect(() => { + const currentTab = typeof activeTab === 'string' ? activeTab : 'hotels' + const currentTabElement = document.getElementById(`tab-${currentTab}`) + if (currentTabElement) { + setSliderOffset(currentTabElement.offsetLeft) + setSliderWidth(currentTabElement.offsetWidth) + } + }, [activeTab]) + + const handleOnClick = (tab: any) => { + setActiveTab(tab.id) + } + return ( + + + ) +} + +export default BrokenButton diff --git a/packages/core/src/Button/Button.stories.tsx b/packages/core/src/Button/Button.stories.tsx index a2990e9be7..66ca6631d0 100644 --- a/packages/core/src/Button/Button.stories.tsx +++ b/packages/core/src/Button/Button.stories.tsx @@ -8,7 +8,18 @@ import { linkTo } from '@storybook/addon-links' import { Calendar, Check, ChevronLeft, ChevronRight, Search, User } from 'pcln-icons' import React from 'react' -import { Box, Button, ButtonChip, CloseButton, Flex, Image, Link, Text, ThemeProvider } from '..' +import { + Box, + Button, + ButtonChip, + CloseButton, + Flex, + Image, + Link, + Text, + ThemeProvider, + getPaletteColor, +} from '..' import { DocTable, DoDont, @@ -29,6 +40,7 @@ import groupsImage from './Button.Image.Groups.png' import heroImage from './Button.Image.Hero.png' import responsiveLayoutImage from './Button.Image.ResponsiveLayout.png' import buttonStates from './Button.Image.States.png' +import BrokenButton from './BrokenButton' type ButtonStory = StoryObj @@ -177,14 +189,21 @@ export const IconButtons: ButtonStory = { ), } +export const BrokenButtons: ButtonStory = { + render: () => ( + + + + ), +} + const meta: Meta = { title: 'Actions/Button', component: Button, parameters: { design: { type: 'figma', - url: - 'https://www.figma.com/file/1lLCo0ZnO1RyMDEbnnS0by/Web-Design-System?type=design&node-id=131-21304&t=wTmhDg2MwlPA9PGf-4', + url: 'https://www.figma.com/file/1lLCo0ZnO1RyMDEbnnS0by/Web-Design-System?type=design&node-id=131-21304&t=wTmhDg2MwlPA9PGf-4', }, docs: { From 248837cc82889df6d43aed2e4e989da677a4e0a0 Mon Sep 17 00:00:00 2001 From: akomsky Date: Mon, 18 Sep 2023 16:37:05 -0400 Subject: [PATCH 2/3] fix: lint errors --- packages/core/src/Button/BrokenButton.tsx | 24 +++++++++++++-------- packages/core/src/Button/Button.stories.tsx | 13 +---------- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/core/src/Button/BrokenButton.tsx b/packages/core/src/Button/BrokenButton.tsx index e91b53324d..966c7f9453 100644 --- a/packages/core/src/Button/BrokenButton.tsx +++ b/packages/core/src/Button/BrokenButton.tsx @@ -3,6 +3,20 @@ import styled from 'styled-components' import { Box, Text, Button, Flex, getPaletteColor } from '..' import { Check } from 'pcln-icons' +const PRODUCTS = ['hotels', 'cars', 'flights', 'vacations', 'cruises'] as const + +type ProductType = (typeof PRODUCTS)[number] + +type QueryString = Record + +type ProductTabType = { + autobotID: string + name: string + tabText: string + id: ProductType + query: QueryString +} + const PRODUCT_TABS = [ { autobotID: 'DASH_TAB_HOTELS', @@ -72,14 +86,6 @@ const Slider = styled(Button)<{ showSlider: boolean }>` transition: margin-left 0.4s ease-in-out, width 0.4s ease-in-out; ` -const StyledButton = styled(Button)<{ highlightTab: boolean }>` - &:hover { - text-decoration: none; - } - position: relative; - border: 2px solid ${getPaletteColor('primary.base')}; - background-color: ${getPaletteColor('primary.light')}; -` const BrokenButton = () => { const [activeTab, setActiveTab] = useState('hotels') const [hoveredTab, setHoverTab] = useState('') @@ -96,7 +102,7 @@ const BrokenButton = () => { } }, [activeTab]) - const handleOnClick = (tab: any) => { + const handleOnClick = (tab: ProductTabType) => { setActiveTab(tab.id) } return ( diff --git a/packages/core/src/Button/Button.stories.tsx b/packages/core/src/Button/Button.stories.tsx index 66ca6631d0..05d716e231 100644 --- a/packages/core/src/Button/Button.stories.tsx +++ b/packages/core/src/Button/Button.stories.tsx @@ -8,18 +8,7 @@ import { linkTo } from '@storybook/addon-links' import { Calendar, Check, ChevronLeft, ChevronRight, Search, User } from 'pcln-icons' import React from 'react' -import { - Box, - Button, - ButtonChip, - CloseButton, - Flex, - Image, - Link, - Text, - ThemeProvider, - getPaletteColor, -} from '..' +import { Box, Button, ButtonChip, CloseButton, Flex, Image, Link, Text, ThemeProvider } from '..' import { DocTable, DoDont, From 591648c2ec0a9704c08c7ad257490b98c0b6d0b5 Mon Sep 17 00:00:00 2001 From: akomsky Date: Mon, 18 Sep 2023 16:39:32 -0400 Subject: [PATCH 3/3] change file --- ...bug-SITE-21611-DS-button-bugs_2023-09-18-20-39.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/pcln-design-system/bug-SITE-21611-DS-button-bugs_2023-09-18-20-39.json diff --git a/common/changes/pcln-design-system/bug-SITE-21611-DS-button-bugs_2023-09-18-20-39.json b/common/changes/pcln-design-system/bug-SITE-21611-DS-button-bugs_2023-09-18-20-39.json new file mode 100644 index 0000000000..55656e2ce1 --- /dev/null +++ b/common/changes/pcln-design-system/bug-SITE-21611-DS-button-bugs_2023-09-18-20-39.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "pcln-design-system", + "comment": "Test a bug in storybook", + "type": "none" + } + ], + "packageName": "pcln-design-system" +} \ No newline at end of file