The rightui-core from wpickeral

Update Documentation for the Tree View Package

Update the Tree View Story to include inline documentation. The updates should follow the same structure as Switch. stories.MDX.
Update the readme to remove redundancy in the documentation. Follow the same layout as the Switch readme
Publish the new NPM package after the updates are complete.

Add tailwind support via props. for Switch

This issue is to provide classes props to allow the user apply tw styles inline.

Collapse and expand icon classes missing from the Tree view story

Refactor Switch

rightui-core/packages/Switch/src/Switch.tsx

Lines 64 to 172 in af81f05

 <div className='uis-switch'> 

 {label && !description ? ( 

 <> 

 {inputCheckbox ? 

 <div onClick={toggleCheckedState} 

 className={`uis-switch__button ${checkedState 

  ? 'uis-switch__button--checked' 

  : ''}`.trim()}> 

 <input 

 {...inputCheckboxProps} 

 aria-labelledby='uis-switch-label' 

 role='switch' 

 type='checkbox' 

 defaultChecked={checkedState} 

 /> 

 <span className={`uis-switch__toggle-indicator`} 

 aria-hidden='true'/> 

 </div> 

 : 

 <button 

 {...buttonProps} 

 className={`uis-switch__button ${checkedState 

  ? 'uis-switch__button--checked' 

  : ''}`.trim()} 

 aria-labelledby='uis-switch-label' 

 role='switch' 

 type='button' 

 aria-checked={checkedState} 

 onClick={toggleCheckedState}> 

 <span className={`uis-switch__toggle-indicator`} 

 aria-hidden='true'/> 

 </button> 

 } 

 <span 

 id='uis-switch-label' 

 className='uis-switch__label' 

 onClick={toggleCheckedState}> 

 {label} 

 </span> 

 </> 

 ) : null} 

 {description && label ? 

 <> 

 {inputCheckbox ? 

 <> 

 <div onClick={toggleCheckedState} 

 className={`uis-switch__button ${checkedState 

  ? 'uis-switch__button--checked' 

  : ''}`.trim()}> 

 <input 

 {...inputCheckboxProps} 

 aria-labelledby='uis-switch-label' 

 aria-describedby='uis-switch-description' 

 role='switch' 

 type='checkbox' 

 defaultChecked={checkedState} 

 /> 

 <span className={`uis-switch__toggle-indicator`} 

 aria-hidden='true'/> 

 </div> 

 <div className='uis-switch-label-description-container'> 

 <span 

 id='uis-switch-label' 

 className='uis-switch__label' 

 onClick={toggleCheckedState}> 

 {label} 

 </span> 

 <span 

 id='uis-switch-description' 

 className='uis-switch__description' 

 onClick={toggleCheckedState}> 

 {description} 

 </span> 

 </div> 

 </> 

 : 

 <> 

 <button className={`uis-switch__button ${checkedState 

  ? 'uis-switch__button--checked' 

  : ''}`.trim()} 

 aria-labelledby='uis-switch-label' 

 aria-describedby='uis-switch-description' 

 role='switch' 

 type='button' 

 aria-checked={checkedState} 

 onClick={toggleCheckedState}> 

 <span className={`uis-switch__toggle-indicator`} 

 aria-hidden='true'/> 

 </button> 

 <div className='uis-switch-label-description-container'> 

 <span 

 id='uis-switch-label' 

 className='uis-switch__label' 

 onClick={toggleCheckedState}> 

 {label} 

 </span> 

 <span 

 id='uis-switch-description' 

 className='uis-switch__description' 

 onClick={toggleCheckedState}> 

 {description} 

 </span> 

 </div> 

 </> 

 } 

 </> 

 : null} 

 </div>

The JSX is a little hard to read here. Let's refactor some of this out.

Add tailwind support via props for Treeview

This issue is to provide a classes props to allow the user apply tw styles inline.

wpickeral / rightui-core Goto Github PK

rightui-core's People

Contributors

Stargazers

Watchers

rightui-core's Issues

Update Documentation for the Tree View Package

Add tailwind support via props. for Switch

Collapse and expand icon classes missing from the Tree view story

Refactor Switch

Add tailwind support via props for Treeview

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	<div className='uis-switch'>
	{label && !description ? (
	<>
	{inputCheckbox ?
	<div onClick={toggleCheckedState}
	className={`uis-switch__button ${checkedState
	? 'uis-switch__button--checked'
	: ''}`.trim()}>
	<input
	{...inputCheckboxProps}
	aria-labelledby='uis-switch-label'
	role='switch'
	type='checkbox'
	defaultChecked={checkedState}
	/>
	<span className={`uis-switch__toggle-indicator`}
	aria-hidden='true'/>
	</div>
	:
	<button
	{...buttonProps}
	className={`uis-switch__button ${checkedState
	? 'uis-switch__button--checked'
	: ''}`.trim()}
	aria-labelledby='uis-switch-label'
	role='switch'
	type='button'
	aria-checked={checkedState}
	onClick={toggleCheckedState}>
	<span className={`uis-switch__toggle-indicator`}
	aria-hidden='true'/>
	</button>
	}
	<span
	id='uis-switch-label'
	className='uis-switch__label'
	onClick={toggleCheckedState}>
	{label}
	</span>
	</>
	) : null}

	{description && label ?
	<>
	{inputCheckbox ?
	<>
	<div onClick={toggleCheckedState}
	className={`uis-switch__button ${checkedState
	? 'uis-switch__button--checked'
	: ''}`.trim()}>
	<input
	{...inputCheckboxProps}
	aria-labelledby='uis-switch-label'
	aria-describedby='uis-switch-description'
	role='switch'
	type='checkbox'
	defaultChecked={checkedState}
	/>
	<span className={`uis-switch__toggle-indicator`}
	aria-hidden='true'/>
	</div>
	<div className='uis-switch-label-description-container'>
	<span
	id='uis-switch-label'
	className='uis-switch__label'
	onClick={toggleCheckedState}>
	{label}
	</span>
	<span
	id='uis-switch-description'
	className='uis-switch__description'
	onClick={toggleCheckedState}>
	{description}
	</span>
	</div>
	</>
	:
	<>
	<button className={`uis-switch__button ${checkedState
	? 'uis-switch__button--checked'
	: ''}`.trim()}
	aria-labelledby='uis-switch-label'
	aria-describedby='uis-switch-description'
	role='switch'
	type='button'
	aria-checked={checkedState}
	onClick={toggleCheckedState}>
	<span className={`uis-switch__toggle-indicator`}
	aria-hidden='true'/>
	</button>
	<div className='uis-switch-label-description-container'>
	<span
	id='uis-switch-label'
	className='uis-switch__label'
	onClick={toggleCheckedState}>
	{label}
	</span>
	<span
	id='uis-switch-description'
	className='uis-switch__description'
	onClick={toggleCheckedState}>
	{description}
	</span>
	</div>
	</>
	}
	</>
	: null}
	</div>