diff --git a/src/components/bottom-bar-item/bottom-bar-item.mdx b/src/components/bottom-bar-item/bottom-bar-item.mdx
index 28f485ae..16358b8f 100644
--- a/src/components/bottom-bar-item/bottom-bar-item.mdx
+++ b/src/components/bottom-bar-item/bottom-bar-item.mdx
@@ -12,52 +12,36 @@ A versatile component designed to render navigation icon items within a `BottomB
-## Default State
+## Default
The default appearance of the `BottomBarItem`
-## Active State
+## Active
The visual state of the `BottomBarItem` when it's currently selected or active
-
+
-## Badge State
+## With Badge
The visual state of the `BottomBarItem` when it's currently selected or active with a badge
-
+
-## Style Anchor Usage
-
-Demonstrates how to use the `BottomBarItem` using a standard `HTMLAnchorElement`
-
-
-
-
-
-## Style Button Usage
-
-Demonstrates how to use the `BottomBarItem` using a standard `HTMLButtonElement`
-
-
-
-
-
-## React Anchor Usage
+## With Href
Demonstrates how to render the `BottomBarItem` using a anchor version
-
+
-
+
-## React Button Usage
+## With OnClick
Demonstrates how to render the `BottomBarItem` using a button version
-
+
-
+
diff --git a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx
index a69a78e5..9fe81ea6 100644
--- a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx
+++ b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx
@@ -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',
@@ -62,7 +54,7 @@ export const Default: Story = {
},
}
-export const ActiveState: Story = {
+export const Active: Story = {
args: {
isActive: true,
children: 'Label',
@@ -70,75 +62,15 @@ export const ActiveState: Story = {
},
}
-export const BadgeState: Story = {
+export const WithBadge: Story = {
args: {
children: 'Label',
icon: ,
hasBadge: true,
},
}
-export const StyleAnchorUsage: Story = {
- args: {
- href: '#',
- children: 'Label',
- icon: ,
- },
- render: (args) => {
- return (
-
-
- {args?.icon}
- {args?.children}
-
-
-
- {args?.icon}
- {args?.children}
-
-
-
-
- {args?.icon}
-
-
- {args?.children}
-
-
- )
- },
-}
-
-export const StyleButtonUsage: Story = {
- args: {
- children: 'Label',
- icon: ,
- },
- render: (args) => {
- return (
-
-
- {args?.icon}
- {args?.children}
-
-
-
- {args?.icon}
- {args?.children}
-
-
-
-
- {args?.icon}
-
-
- {args?.children}{' '}
-
-
- )
- },
-}
-export const ReactAnchorUsage: Story = {
+export const WithHref: Story = {
args: {
href: '#',
icon: ,
@@ -155,7 +87,8 @@ export const ReactAnchorUsage: Story = {
},
}
-export const ReactButtonUsage: Story = {
+export const WithOnClick: Story = {
+ name: 'With OnClick',
args: {
onClick: action('handleClick'),
icon: ,
diff --git a/src/components/bottom-bar-item/styles.ts b/src/components/bottom-bar-item/styles.ts
index f7f0a4c3..234360d4 100644
--- a/src/components/bottom-bar-item/styles.ts
+++ b/src/components/bottom-bar-item/styles.ts
@@ -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-3xs, 10px);
+ 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)
}
`
@@ -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%;
`
diff --git a/src/tokens/payprop/tokens.css b/src/tokens/payprop/tokens.css
index e7568429..cda5f97b 100644
--- a/src/tokens/payprop/tokens.css
+++ b/src/tokens/payprop/tokens.css
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue, 10 Dec 2024 06:08:05 GMT
+ * Generated on Mon, 16 Dec 2024 06:57:57 GMT
*/
:root {
@@ -139,6 +139,7 @@
--font-size-sm: 0.875rem;
--font-size-xs: 0.8125rem;
--font-size-2xs: 0.75rem;
+ --font-size-3xs: 0.625rem;
--line-height-3xl: 2.5rem;
--line-height-2xl: 2rem;
--line-height-xl: 1.75rem;
diff --git a/src/tokens/payprop/tokens.ts b/src/tokens/payprop/tokens.ts
index 6f853b27..50b6fe64 100644
--- a/src/tokens/payprop/tokens.ts
+++ b/src/tokens/payprop/tokens.ts
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue, 10 Dec 2024 06:08:05 GMT
+ * Generated on Mon, 16 Dec 2024 06:57:57 GMT
*/
export const neutral900 = '#222b33'
@@ -138,6 +138,7 @@ export const fontSizeBase = '0.9375rem'
export const fontSizeSm = '0.875rem'
export const fontSizeXs = '0.8125rem'
export const fontSize2xs = '0.75rem'
+export const fontSize3xs = '0.625rem'
export const lineHeight3xl = '2.5rem'
export const lineHeight2xl = '2rem'
export const lineHeightXl = '1.75rem'
diff --git a/src/tokens/reapit/tokens.css b/src/tokens/reapit/tokens.css
index e7568429..cda5f97b 100644
--- a/src/tokens/reapit/tokens.css
+++ b/src/tokens/reapit/tokens.css
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue, 10 Dec 2024 06:08:05 GMT
+ * Generated on Mon, 16 Dec 2024 06:57:57 GMT
*/
:root {
@@ -139,6 +139,7 @@
--font-size-sm: 0.875rem;
--font-size-xs: 0.8125rem;
--font-size-2xs: 0.75rem;
+ --font-size-3xs: 0.625rem;
--line-height-3xl: 2.5rem;
--line-height-2xl: 2rem;
--line-height-xl: 1.75rem;
diff --git a/src/tokens/reapit/tokens.ts b/src/tokens/reapit/tokens.ts
index 6f853b27..50b6fe64 100644
--- a/src/tokens/reapit/tokens.ts
+++ b/src/tokens/reapit/tokens.ts
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue, 10 Dec 2024 06:08:05 GMT
+ * Generated on Mon, 16 Dec 2024 06:57:57 GMT
*/
export const neutral900 = '#222b33'
@@ -138,6 +138,7 @@ export const fontSizeBase = '0.9375rem'
export const fontSizeSm = '0.875rem'
export const fontSizeXs = '0.8125rem'
export const fontSize2xs = '0.75rem'
+export const fontSize3xs = '0.625rem'
export const lineHeight3xl = '2.5rem'
export const lineHeight2xl = '2rem'
export const lineHeightXl = '1.75rem'
diff --git a/src/tokens/tokens.json b/src/tokens/tokens.json
index 5e95ad2c..77f2056a 100644
--- a/src/tokens/tokens.json
+++ b/src/tokens/tokens.json
@@ -1581,6 +1581,12 @@
"parent": "_Primitives/Value",
"description": ""
},
+ "font-size-3xs": {
+ "value": "0.625rem",
+ "type": "dimension",
+ "parent": "_Primitives/Value",
+ "description": ""
+ },
"line-height-3xl": {
"value": "2.5rem",
"type": "dimension",