Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
@annawen1
annawen1 committed Sep 23, 2024
1 parent 2145b49 commit 6c3f6f9
Show file tree
Hide file tree
Showing 25 changed files with 124 additions and 62 deletions.
42 changes: 28 additions & 14 deletions src/components/A11yStatus/A11yStatus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ const A11yStatus = ({ components, layout }) => {
the{' '}
<Link
inline
href="https://www.ibm.com/able/requirements/requirements/">
href="https://www.ibm.com/able/requirements/requirements/"
>
accessibility requirements
</Link>
. These different statuses report the work that Carbon has done in the
Expand Down Expand Up @@ -235,36 +236,41 @@ const A11yStatus = ({ components, layout }) => {
? ''
: hidden
}`}
id={componentName}>
id={componentName}
>
<Column colLg={4} colMd={4} noGutterSm>
<ResourceCard
subTitle="Default state"
href={accessibilityPageUrl}
actionIcon="arrowRight">
actionIcon="arrowRight"
>
{defaultAVTTag}
</ResourceCard>
</Column>
<Column colLg={4} colMd={4} noGutterSm>
<ResourceCard
subTitle="Advanced states"
href={accessibilityPageUrl}
actionIcon="arrowRight">
actionIcon="arrowRight"
>
{advancedAVTTag}
</ResourceCard>
</Column>
<Column colLg={4} colMd={4} noGutterSm>
<ResourceCard
subTitle="Screen reader"
href={accessibilityPageUrl}
actionIcon="arrowRight">
actionIcon="arrowRight"
>
{screenReaderAVTTag}
</ResourceCard>
</Column>
<Column colLg={4} colMd={4} noGutterSm>
<ResourceCard
subTitle="Keyboard navigation"
href={accessibilityPageUrl}
actionIcon="arrowRight">
actionIcon="arrowRight"
>
{keyboardNavAVTTag}
</ResourceCard>
</Column>
Expand All @@ -285,15 +291,17 @@ const A11yStatus = ({ components, layout }) => {
<td>
<DefinitionTooltip
openOnHover
definition="Test(s) that ensure the initial render state of a component is accessible.">
definition="Test(s) that ensure the initial render state of a component is accessible."
>
Default state
</DefinitionTooltip>
</td>
<td>{defaultAVTTag}</td>
<td>
<Link
href={githubUrl}
renderIcon={() => <Launch aria-label="Launch" />}>
renderIcon={() => <Launch aria-label="Launch" />}
>
GitHub link
</Link>
</td>
Expand All @@ -303,7 +311,8 @@ const A11yStatus = ({ components, layout }) => {
<td>
<DefinitionTooltip
openOnHover
definition="Tests that ensure additional states of the component are accessible. This could be interactive states of a component or its multiple variants.">
definition="Tests that ensure additional states of the component are accessible. This could be interactive states of a component or its multiple variants."
>
Advanced states
</DefinitionTooltip>
</td>
Expand All @@ -315,7 +324,8 @@ const A11yStatus = ({ components, layout }) => {
<td>
<DefinitionTooltip
openOnHover
definition="Tests that ensure focus is properly managed, and all interactive functions of a component have a proper keyboard-accessible equivalent.">
definition="Tests that ensure focus is properly managed, and all interactive functions of a component have a proper keyboard-accessible equivalent."
>
Keyboard navigation
</DefinitionTooltip>
</td>
Expand All @@ -327,7 +337,8 @@ const A11yStatus = ({ components, layout }) => {
<td>
<DefinitionTooltip
openOnHover
definition="This manual testing ensures that the visual information on the screen is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA.">
definition="This manual testing ensures that the visual information on the screen is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA."
>
Screen reader
</DefinitionTooltip>
</td>
Expand Down Expand Up @@ -383,7 +394,8 @@ const A11yStatus = ({ components, layout }) => {
<>
<span
id="all-component-accessibility-status-anchor"
className={headingLink}></span>
className={headingLink}
></span>
<H2>All component accessibility status{helpTooltip}</H2>
<p>
This table reflects the current AVT status of stable components
Expand Down Expand Up @@ -416,13 +428,15 @@ const A11yStatus = ({ components, layout }) => {
<p className={moreLink}>
<Link
href="/components/overview/accessibility-status"
renderIcon={() => <ArrowRight />}>
renderIcon={() => <ArrowRight />}
>
Learn more about tag and test meaning
</Link>
<br />
<Link
href="/components/overview/accessibility-status#all-component-accessibility-status-anchor"
renderIcon={() => <ArrowRight />}>
renderIcon={() => <ArrowRight />}
>
View all component accessibility status
</Link>
</p>
Expand Down
3 changes: 2 additions & 1 deletion src/components/Banner/Banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ const Banner = () => {
href="https://next.carbondesignsystem.com"
className={buttonBanner}
kind="ghost"
renderIcon={ArrowRight}>
renderIcon={ArrowRight}
>
Try the Carbon Platform
</Button>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/ChartIndexPage/ChartIndexListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ const ChartIndexListItem = React.memo(
<Link
className="component-index-item__link"
href={websiteUrl}
rel="noopener noreferrer">
rel="noopener noreferrer"
>
Docs
</Link>
{codeUrl && (
Expand All @@ -48,7 +49,8 @@ const ChartIndexListItem = React.memo(
<Link
className="component-index-item__link"
href={codeUrl}
rel="noopener noreferrer">
rel="noopener noreferrer"
>
Code
</Link>
</>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ChartIndexPage/ChartIndexNotFound.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ function ChartIndexNotFound() {
<Link
className="component-index-not-found__link"
href="/community/contribute-a-chart"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
add it
</Link>
to the index.
Expand Down
3 changes: 2 additions & 1 deletion src/components/ChartIndexPage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@ function ChartIndexPage() {
sm={4}
md={6}
lg={9}
className="component-index-container cds--no-gutter">
className="component-index-container cds--no-gutter"
>
<ChartIndexSearch value={searchValue} onChange={setSearchValue} />
<ChartIndexSort
initialSortOption={initialSortOption}
Expand Down
12 changes: 8 additions & 4 deletions src/components/ColorPalette/ColorPalette.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,13 +174,15 @@ const ColorPalette = ({
[groupControls]: type === 'grouped',
[sequentialControls]: type === 'sequential',
[darkControls]: dark,
})}>
})}
>
<ContentSwitcher
onChange={handleKeyboard}
className={paletteSwitcher}
selectionMode="automatic"
selectedIndex={0}
size="lg">
size="lg"
>
<Switch text={switcherOne} onClick={activateFirstSwitcher} />
<Switch text={switcherTwo} onClick={activateSecondSwitcher} />
</ContentSwitcher>
Expand Down Expand Up @@ -239,7 +241,8 @@ const ColorPalette = ({
key={`${i.name}-${index}`}
color={i.color}
index={index}
continuous={continuous}>
continuous={continuous}
>
<div className={groupOption}>Option {index + 1}</div>
{i.data.map((j, jIndex) => (
<ColorPaletteColor
Expand All @@ -263,7 +266,8 @@ const ColorPalette = ({
<PalettesContainer
key={`${i.color}-${index}`}
color={i.color}
index={index}>
index={index}
>
{i.data.map((j, jIndex) => (
<ColorPaletteColor
key={`${j.name - jIndex}`}
Expand Down
3 changes: 2 additions & 1 deletion src/components/ColorPalette/ColorPaletteColor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const ColorPaletteColor = ({
<div
key={index}
className={cx(colorPaletteColor, { [textLight]: lightText })}
style={isSequential ? sequentialStyle : defaultStyle}>
style={isSequential ? sequentialStyle : defaultStyle}
>
<span>
{number}
{name}
Expand Down
3 changes: 2 additions & 1 deletion src/components/ColorTokenTable/ColorTokenTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,8 @@ export default class ColorTokenTable extends React.Component {
<StickyContainer navBar banner secondary={false}>
<ContentSwitcher
className={themeSwitcherClasses}
onChange={this.switchTheme}>
onChange={this.switchTheme}
>
<Switch name="white" text={this.state.mobile ? 'Wte' : 'White'} />
<Switch name="g10" text={this.state.mobile ? 'G10' : 'Gray 10'} />
<Switch name="g90" text={this.state.mobile ? 'G90' : 'Gray 90'} />
Expand Down
3 changes: 2 additions & 1 deletion src/components/ComponentDemo/Code/CodeBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ const CodeBar = ({ src, code, links }) => {
title="View source"
className={button}
href={src}
style={{ position: 'relative', zIndex: 200 }}>
style={{ position: 'relative', zIndex: 200 }}
>
<Launch size={16} />
</a>
)}
Expand Down
3 changes: 2 additions & 1 deletion src/components/ComponentDemo/Code/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ const Sidebar = ({ src, path, live }) => {
rel="noopener noreferrer"
className={button}
href={src}
style={{ zIndex: 200 }}>
style={{ zIndex: 200 }}
>
<Launch size={16} />
</a>
)}
Expand Down
12 changes: 8 additions & 4 deletions src/components/ComponentDemo/ComponentDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
className={exitFullscreenButton}
onClick={() => {
setFullscreen(false);
}}>
}}
>
<Close size={16} />
</button>
)}
Expand All @@ -136,7 +137,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
noInline={noInline}
theme={getTheme('white')}
scope={{ ...CarbonComponents, ...scope }}
code={code}>
code={code}
>
<div className={cx(container, { [knoblessContainer]: !knobs })}>
<button
type="button"
Expand All @@ -146,7 +148,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
className={cx(theme, fullscreenButton)}
onClick={() => {
setFullscreen(!isFullscreen);
}}>
}}
>
{isFullscreen ? <Minimize size={16} /> : <Maximize size={16} />}
</button>
<LivePreview className={cx(theme, previewContainer)} />
Expand All @@ -155,7 +158,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
type="button"
aria-labelledby="expand-knob-container-button"
onClick={() => setIsKnobContainerCollapsed(false)}
className={cx(theme, iconButton, iconButtonExpand)}>
className={cx(theme, iconButton, iconButtonExpand)}
>
<span id="expand-knob-container-button" hidden>
Expand component knob container
</span>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ComponentDemo/DemoContext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const DemoContextProvider = ({ children }) => {
isMobile,
isKnobContainerCollapsed,
setIsKnobContainerCollapsed,
}}>
}}
>
{children}
</DemoContext.Provider>
);
Expand Down
12 changes: 8 additions & 4 deletions src/components/ComponentDemo/KnobContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ const Component = ({
<div
role="group"
aria-labelledby={componentGroupId}
className={componentKnobWrapper}>
className={componentKnobWrapper}
>
{booleanKnobs.length > 0 && (
<FormGroup className={formGroup} legendText="Modifiers">
{booleanKnobs.map(([name, info]) => (
Expand Down Expand Up @@ -233,7 +234,8 @@ const Knob = ({
onChange={(val) => updateKnob(val)}
defaultSelected={defaultSelected}
name={name}
orientation="vertical">
orientation="vertical"
>
{values.map(({ value }) => (
<RadioButton
key={`${inputId}-${value}`}
Expand Down Expand Up @@ -289,13 +291,15 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => {
<Form
className={cx(knobContainer, {
[knobContainerCollapsed]: isMobile && isKnobContainerCollapsed,
})}>
})}
>
{isMobile && (
<div className={iconButtonRow}>
<button
className={iconButton}
type="button"
onClick={() => setIsKnobContainerCollapsed(true)}>
onClick={() => setIsKnobContainerCollapsed(true)}
>
<Close size={20} />
</button>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/Homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ const customProps = {
maxWidth: '100%',
overflow: 'hidden',
backgroundImage: `url(${ImageV11})`,
}}>
}}
>
<div className="cds--row">
<div className="cds--col-lg-4 cds--col-md-4 cds--col-sm-2 cds--offset-lg-8 cds--offset-md-4 cds--offset-sm-2 homepage--tile-header">
<ResourceCard
Expand Down
3 changes: 2 additions & 1 deletion src/components/OverviewCard/OverviewCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ export default class OverviewCard extends React.Component {
target="_blank"
rel="noopener noreferrer"
href={href}
className={carbonTileclassNames}>
className={carbonTileclassNames}
>
{cardContent}
</a>
);
Expand Down
3 changes: 2 additions & 1 deletion src/components/SVGLibraries/shared/ActionBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ const ActionBar = ({
aria-hidden={!isActionBarVisible}
className={cx(container, {
[hidden]: !isActionBarVisible,
})}>
})}
>
<Button
kind="ghost"
size="small"
Expand Down
3 changes: 2 additions & 1 deletion src/components/SVGLibraries/shared/FilterRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const FilterRow = ({
ref={filterRowRef}
className={cx(filterRow, {
[pictograms]: type !== 'icon',
})}>
})}
>
<Search
labelText={`filter ${type}s by searching for their name or category`}
onChange={onSearchChange}
Expand Down
Loading

0 comments on commit 6c3f6f9

Please sign in to comment.