chore: remove fallback css variables for BottomBarItem and update t…

…oken variable (#256) * chore: update css token * chore: remove css fallback variable for bottom bar item * chore: update heading name * chore: update storybook
reapit · Dec 17, 2024 · 8e5182c · 8e5182c
1 parent 61885a1
commit 8e5182c
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 120 deletions.
diff --git 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
 
 <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} />
diff --git 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,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" />,
@@ -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" />,

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",