Skip to content

Commit

Permalink
Merge branch 'main' into 248-v5-component-refactor-button-refactor-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@ksolanki7
ksolanki7 authored Dec 17, 2024
2 parents 2d0ed20 + 2660c86 commit ae88022
Show file tree
Hide file tree
Showing 26 changed files with 763 additions and 289 deletions.
38 changes: 11 additions & 27 deletions src/components/bottom-bar-item/bottom-bar-item.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,52 +12,36 @@ A versatile component designed to render navigation icon items within a `BottomB

<Controls />

## Default State
## Default

The default appearance of the `BottomBarItem`

<Canvas of={BottomBarItemStories.Default} />

## Active State
## Active

The visual state of the `BottomBarItem` when it's currently selected or active

<Canvas of={BottomBarItemStories.ActiveState} />
<Canvas of={BottomBarItemStories.Active} />

## Badge State
## With Badge

The visual state of the `BottomBarItem` when it's currently selected or active with a badge

<Canvas of={BottomBarItemStories.BadgeState} />
<Canvas of={BottomBarItemStories.WithBadge} />

## Style Anchor Usage

Demonstrates how to use the `BottomBarItem` using a standard `HTMLAnchorElement`

<Canvas of={BottomBarItemStories.StyleAnchorUsage} />

<RenderHtmlMarkup of={BottomBarItemStories.StyleAnchorUsage} />

## Style Button Usage

Demonstrates how to use the `BottomBarItem` using a standard `HTMLButtonElement`

<Canvas of={BottomBarItemStories.StyleButtonUsage} />

<RenderHtmlMarkup of={BottomBarItemStories.StyleButtonUsage} />

## React Anchor Usage
## With Href

Demonstrates how to render the `BottomBarItem` using a anchor version

<Canvas of={BottomBarItemStories.ReactAnchorUsage} />
<Canvas of={BottomBarItemStories.WithHref} />

<RenderHtmlMarkup of={BottomBarItemStories.ReactAnchorUsage} />
<RenderHtmlMarkup of={BottomBarItemStories.WithHref} />

## React Button Usage
## With OnClick

Demonstrates how to render the `BottomBarItem` using a button version

<Canvas of={BottomBarItemStories.ReactButtonUsage} />
<Canvas of={BottomBarItemStories.WithOnClick} />

<RenderHtmlMarkup of={BottomBarItemStories.ReactButtonUsage} />
<RenderHtmlMarkup of={BottomBarItemStories.WithOnClick} />
83 changes: 8 additions & 75 deletions src/components/bottom-bar-item/bottom-bar-item.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import type { Meta, StoryObj } from '@storybook/react'

import { BottomBarItem } from './bottom-bar-item'
import { FlexContainer } from '../layout'
import { Icon } from '../icon'
import {
ElAnchorBottomBarItemContainer,
ElBottomBarItemBadge,
ElBottomBarItemContent,
ElBottomBarItemIcon,
ElBottomBarItemLabel,
ElButtonBottomBarItemContainer,
} from './styles'
import { FlexContainer } from '../layout'
import { BottomBarItem } from './bottom-bar-item'

const meta = {
title: 'Components/Bottom Bar Item',
Expand Down Expand Up @@ -62,83 +54,23 @@ export const Default: Story = {
},
}

export const ActiveState: Story = {
export const Active: Story = {
args: {
isActive: true,
children: 'Label',
icon: <Icon icon="star" />,
},
}

export const BadgeState: Story = {
export const WithBadge: Story = {
args: {
children: 'Label',
icon: <Icon icon="star" />,
hasBadge: true,
},
}
export const StyleAnchorUsage: Story = {
args: {
href: '#',
children: 'Label',
icon: <Icon icon="star" />,
},
render: (args) => {
return (
<FlexContainer>
<ElAnchorBottomBarItemContainer href={args.href} aria-current={undefined} className="el-mr5">
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
</ElAnchorBottomBarItemContainer>

<ElAnchorBottomBarItemContainer href={args.href} aria-current="page" className="el-mx5">
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
</ElAnchorBottomBarItemContainer>

<ElAnchorBottomBarItemContainer href={args.href} aria-current={undefined} className="el-mx5">
<ElBottomBarItemContent>
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemBadge />
</ElBottomBarItemContent>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
</ElAnchorBottomBarItemContainer>
</FlexContainer>
)
},
}

export const StyleButtonUsage: Story = {
args: {
children: 'Label',
icon: <Icon icon="star" />,
},
render: (args) => {
return (
<FlexContainer>
<ElButtonBottomBarItemContainer onClick={action('handleClick')} aria-current={undefined} className="el-mr5">
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
</ElButtonBottomBarItemContainer>

<ElButtonBottomBarItemContainer onClick={action('handleClick')} aria-current="true" className="el-mx5">
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
</ElButtonBottomBarItemContainer>

<ElButtonBottomBarItemContainer onClick={action('handleClick')} aria-current={undefined} className="el-mx5">
<ElBottomBarItemContent>
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemBadge />
</ElBottomBarItemContent>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>{' '}
</ElButtonBottomBarItemContainer>
</FlexContainer>
)
},
}

export const ReactAnchorUsage: Story = {
export const WithHref: Story = {
args: {
href: '#',
icon: <Icon icon="star" />,
Expand All @@ -155,7 +87,8 @@ export const ReactAnchorUsage: Story = {
},
}

export const ReactButtonUsage: Story = {
export const WithOnClick: Story = {
name: 'With OnClick',
args: {
onClick: action('handleClick'),
icon: <Icon icon="star" />,
Expand Down
28 changes: 14 additions & 14 deletions src/components/bottom-bar-item/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,40 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
import { ElIcon } from '../icon'

export const ElBottomBarItemIcon = styled.div`
width: var(--icon-default, 24px);
height: var(--icon-default, 24px);
width: var(--icon-default);
height: var(--icon-default);
color: inherit;
`

export const ElBottomBarItemLabel = styled.span`
color: inherit;
text-align: center;
font-family: var(--font-family, Inter);
font-size: var(--font-size-2xs, 12px);
font-family: var(--font-family);
font-size: var(--font-size-3xs);
font-style: normal;
font-weight: var(--font-weight-regular, Regular);
line-height: var(--line-height-3xs, 12px);
letter-spacing: var(--letter-spacing-2xs, 0px);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-3xs);
letter-spacing: var(--letter-spacing-2xs);
`

const baseStyles = `
background-color: var(--fill-white, white);
background-color: var(--fill-white);
outline: none;
width: 44px;
border: var(--border-none, 0);
border: var(--border-none);
display: flex;
cursor: pointer;
padding: var(--space-half, 2px) var(--space-none, 0px);
padding: var(--spacing-half) var(--spacing-none);
flex-direction: column;
align-items: center;
gap: var(--space-half, 2px);
gap: var(--spacing-half);
position: relative;
flex: 1 0 0;

color: var(--icon-secondary, #607890);
color: var(--icon-secondary);

&:active, &[aria-current="true"], &[aria-current="page"] {
color: var(--icon-action, #4e56ea)
color: var(--icon-action)
}
`

Expand All @@ -50,7 +50,7 @@ export const ElBottomBarItemBadge = styled.span`
right: -3px;
width: var(--size-2);
height: var(--size-2);
background-color: var(--icon-error, #f01830);
background-color: var(--icon-error);
border-radius: 100%;
`

Expand Down
Loading

0 comments on commit ae88022

Please sign in to comment.