Skip to content

Commit

Permalink
Merge branch 'main' into chore/#192-remove-fallback-css-variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@ss-dimasm
ss-dimasm committed Dec 17, 2024
2 parents 63d3084 + 61885a1 commit 24c1ddf
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 114 deletions.
42 changes: 11 additions & 31 deletions src/components/nav-icon-item/nav-icon-item.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,56 +12,36 @@ A versatile component designed to render navigation icon items within an AppBar

<Controls />

## Default State
## Default

The default appearance of the `NavIconItem`

<Canvas of={NavIconItemStories.Default} />

## Active State
## Active

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

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

## Badge State
## With Badge

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

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

## Style Anchor Usage

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

**note:** to make the `NavIconItem` have an "active" state, you must pass the `aria-current` attribute with a value of `page`

<Canvas of={NavIconItemStories.StyleAnchorUsage} />

<RenderHtmlMarkup of={NavIconItemStories.StyleAnchorUsage} />

## Style Button Usage

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

**note:** to make the `NavIconItem` have an "active" state, you must pass the `aria-current` attribute with a value of `true`

<Canvas of={NavIconItemStories.StyleButtonUsage} />

<RenderHtmlMarkup of={NavIconItemStories.StyleButtonUsage} />

## React Anchor Usage
## With Href

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

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

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

## React Button Usage
## With OnClick

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

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

<RenderHtmlMarkup of={NavIconItemStories.ReactButtonUsage} />
<RenderHtmlMarkup of={NavIconItemStories.WithOnClick} />
76 changes: 9 additions & 67 deletions src/components/nav-icon-item/nav-icon-item.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'
import { NavIconItem } from './nav-icon-item'
import { Icon } from '../icon'
import { FlexContainer } from '../layout'
import { ElAnchorNavIconItem, ElButtonNavIconItem, ElNavIconItemBadge } from './styles'
import { action } from '@storybook/addon-actions'

const meta = {
Expand Down Expand Up @@ -55,91 +54,33 @@ export const Default: Story = {
onClick: action('handleOnClick'),
},
render: (args) => {
return (
<ElButtonNavIconItem onClick={action('handleClick')} data-state={undefined}>
{args?.icon}
</ElButtonNavIconItem>
)
return <NavIconItem {...args} />
},
}

export const ActiveState: Story = {
export const Active: Story = {
args: {
icon: <Icon icon="star" />,
onClick: action('handleOnClick'),
isActive: true,
},
render: (args) => {
return (
<ElButtonNavIconItem onClick={action('handleClick')} aria-current="true">
{args?.icon}
</ElButtonNavIconItem>
)
return <NavIconItem {...args} />
},
}

export const BadgeState: Story = {
export const WithBadge: Story = {
args: {
icon: <Icon icon="star" />,
onClick: action('handleOnClick'),
hasBadge: true,
},
render: (args) => {
return (
<ElButtonNavIconItem onClick={action('handleClick')}>
{args?.icon}
<ElNavIconItemBadge role="status" />
</ElButtonNavIconItem>
)
},
}

export const StyleAnchorUsage: Story = {
args: {
icon: <Icon icon="star" />,
href: '#',
},
render: (args) => {
return (
<FlexContainer>
<ElAnchorNavIconItem href={args.href!} aria-current={undefined} className="el-mr5">
{args?.icon}
</ElAnchorNavIconItem>
<ElAnchorNavIconItem href={args.href!} aria-current="page" className="el-mx5">
{args?.icon}
</ElAnchorNavIconItem>
<ElAnchorNavIconItem href={args.href!} aria-current={undefined} className="el-mx5">
{args?.icon}
<ElNavIconItemBadge role="status" />
</ElAnchorNavIconItem>
</FlexContainer>
)
},
}

export const StyleButtonUsage: Story = {
args: {
icon: <Icon icon="star" />,
onClick: action('handleClick'),
},
render: (args) => {
return (
<FlexContainer>
<ElButtonNavIconItem onClick={action('handleClick')} aria-current={undefined} className="el-mr5">
{args?.icon}
</ElButtonNavIconItem>
<ElButtonNavIconItem onClick={action('handleClick')} aria-current="true" className="el-mx5">
{args?.icon}
</ElButtonNavIconItem>
<ElButtonNavIconItem onClick={action('handleClick')} aria-current={undefined} className="el-mx5">
{args?.icon}
<ElNavIconItemBadge role="status" />
</ElButtonNavIconItem>
</FlexContainer>
)
return <NavIconItem {...args} />
},
}

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

export const ReactButtonUsage: Story = {
export const WithOnClick: Story = {
name: 'With OnClick',
args: {
icon: <Icon icon="star" />,
onClick: action('handleClick'),
Expand Down
32 changes: 16 additions & 16 deletions src/components/nav-icon-item/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,34 @@ import { ElIcon } from '../icon'
const baseStyles = `
position: relative;
display: inline-flex;
padding: var(--space-2, 8px);
padding: var(--spacing-2);
justify-content: center;
align-items: center;
gap: var(--space-none, 0px);
border-radius: var(--corner-default, 4px);
background: var(--fill-white, #ffffff);
border: var(--border-none, 0px);
color: var(--icon-app_bar-default, #798da1);
gap: var(--spacing-none);
border-radius: var(--corner-defaul);
background: var(--fill-white);
border: var(--border-none);
color: var(--icon-app_bar-default);
outline: none;
&:focus-visible {
border-radius: var(--corner-default, 4px);
background: var(--fill-white, #ffffff);
border-radius: var(--corner-default);
background: var(--fill-white);
box-shadow:
0px 0px 0px 1px #fff,
0px 0px 0px 4px var(--icon-button_primary-hover, #7e9bfa);
0px 0px 0px 1px var(--fill-white),
0px 0px 0px 4px var(--icon-button_primary-hover);
}
&:hover {
cursor: pointer;
border-radius: var(--corner-default, 4px);
background: var(--fill-default-lightest, #f2f4f6);
border-radius: var(--corner-default);
background: var(--fill-default-lightest);
}
&:active, &[aria-current="page"], &[aria-current="true"] {
color: var(--fill-action-dark, #4e56ea);
border-radius: var(--corner-default, 4px);
background: var(--fill-default-lightest, #f2f4f6);
color: var(--fill-action-dark);
border-radius: var(--corner-default);
background: var(--fill-default-lightest);
}
`

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

Expand Down

0 comments on commit 24c1ddf

Please sign in to comment.