diff --git a/packages/react/src/components/Code/Code.stories.mdx b/packages/react/src/components/Code/Code.stories.mdx index da9c929a..841af45e 100644 --- a/packages/react/src/components/Code/Code.stories.mdx +++ b/packages/react/src/components/Code/Code.stories.mdx @@ -23,7 +23,7 @@ export const Template = args => ; Use `Code` to present Inline or block code without syntax highlight. - + {Template.bind({})} @@ -50,3 +50,22 @@ function Demo() { ); }`} /> + +## Variants + +### Outlined + +`Code` component with a border. + + + + + + +### Transparent + +`Code` component without a fill. + + + + diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx index 821cc62d..cbfa6a04 100644 --- a/packages/react/src/components/Code/Code.tsx +++ b/packages/react/src/components/Code/Code.tsx @@ -24,15 +24,28 @@ import {composeComponentDisplayName} from '../../utils'; import './code.scss'; export type CodeProps = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ component?: C; + /** + * Shows the code block with a filled background. + * @default true + */ + filled?: boolean; + /** + * Renders the code block with an outline. + * @default false + */ + outlined?: boolean; } & Omit, 'component'>; const COMPONENT_NAME: string = 'Code'; const Code: FC & WithWrapperProps = (props: CodeProps): ReactElement => { - const {className, children, ...rest} = props; + const {className, children, filled, outlined, ...rest} = props; - const classes: string = clsx('oxygen-code', className); + const classes: string = clsx('oxygen-code', {filled, outlined}, className); return ( @@ -43,6 +56,9 @@ const Code: FC & WithWrapperProps = (props: Co Code.displayName = composeComponentDisplayName(COMPONENT_NAME); Code.muiName = COMPONENT_NAME; -Code.defaultProps = {}; +Code.defaultProps = { + filled: true, + outlined: false, +}; export default Code; diff --git a/packages/react/src/components/Code/__tests__/Code.test.tsx b/packages/react/src/components/Code/__tests__/Code.test.tsx index 82bc7600..bdfe4875 100644 --- a/packages/react/src/components/Code/__tests__/Code.test.tsx +++ b/packages/react/src/components/Code/__tests__/Code.test.tsx @@ -39,4 +39,14 @@ describe('Code', () => { const {container} = render(Code Block); expect(container.firstChild).toHaveTextContent('Code Block'); }); + + it('applies the "filled" style when the "filled" prop is true', () => { + const {container} = render(Code Block); + expect(container.firstChild).toHaveClass('filled'); + }); + + it('applies the "outlined" style when the "outlined" prop is true', () => { + const {container} = render(Code Block); + expect(container.firstChild).toHaveClass('outlined'); + }); }); diff --git a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap index 1ada0580..9419cce4 100644 --- a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap +++ b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Code should match the snapshot 1`] = `
Code Block diff --git a/packages/react/src/components/Code/code.scss b/packages/react/src/components/Code/code.scss index cd03436c..124798fc 100644 --- a/packages/react/src/components/Code/code.scss +++ b/packages/react/src/components/Code/code.scss @@ -18,8 +18,15 @@ .oxygen-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: inherit; padding: 1px 3px; - background-color: var(--oxygen-palette-action-selected); border-radius: 5px; - border: 1px solid var(--oxygen-palette-divider); + + &.filled { + background-color: var(--oxygen-palette-customComponents-Code-background); + } + + &.outlined { + border: 1px solid var(--oxygen-palette-divider); + } } diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts index 216d1e1b..15ddcf17 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -57,6 +57,9 @@ declare module '@mui/material/styles' { background: string; }; }; + Code: { + background: string; + }; Footer: { background: string; }; diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index eecdceeb..c7ea624b 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -33,6 +33,9 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< background: 'var(--oxygen-palette-background-paper)', }, }, + Code: { + background: '#2c2e33', + }, Footer: { background: '#000000', }, @@ -64,6 +67,9 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< background: 'var(--oxygen-palette-background-paper)', }, }, + Code: { + background: '#eef0f1', + }, Footer: { background: '#f7f8fb', },