diff --git a/.changeset/box-directional-borders.md b/.changeset/box-directional-borders.md new file mode 100644 index 000000000..87f809431 --- /dev/null +++ b/.changeset/box-directional-borders.md @@ -0,0 +1,14 @@ +--- +'@primer/react-brand': patch +--- + +Adds `borderBlockStartWidth`, `borderBlockEndWidth`, `borderInlineStartWidth`, and `borderInlineEndWidth` props to the `Box` component to support directional borders. + +```jsx +<> + + + + + +``` diff --git a/apps/docs/content/components/Box/react.mdx b/apps/docs/content/components/Box/react.mdx index f4ead3cff..b2ced7a26 100644 --- a/apps/docs/content/components/Box/react.mdx +++ b/apps/docs/content/components/Box/react.mdx @@ -324,21 +324,25 @@ All padding and margin options can be configured for indivisual viewports: Each ### Box -| Name | Type | Default | Description | -| :------------------ | :----------------------------------------------------------------------- | :---------: | :-------------------------------------------------------------------------- | -| `padding` | | `undefined` | Adds padding to all internal sides of the Box. | -| `paddingBlockStart` | | `undefined` | Adds padding to the internal block start (top) side of the Box. | -| `paddingRight` | | `undefined` | Adds padding to the internal inline end (right) of the Box. | -| `paddingBlockEnd` | | `undefined` | Adds padding to the internal block end (bottom) side of the Box. | -| `paddingLeft` | | `undefined` | Adds padding to the internal inline start (left) side of the Box. | -| `margin` | | `undefined` | Adds margin to all external sides of the Box. | -| `marginBlockStart` | | `undefined` | Adds margin to the external block start (top) side of the Box. | -| `marginInlineEnd` | | `undefined` | Adds margin to the external inline end (right) side of the Box. | -| `marginBlockEnd` | | `undefined` | Adds margin to the external block end (bottom) side of the Box. | -| `marginInlineStart` | | `undefined` | Adds margin to the external inline start (left) side of the Box. | -| `backgroundColor` | | `undefined` | Applies a system-level background color to the Box. | -| `borderRadius` | | `undefined` | Applies a system-level border radius value to the Box. | -| `borderWidth` | | `undefined` | Applies a system-level border width value to the Box. | -| `borderColor` | | `undefined` | Applies a system-level border color value to the Box. | -| `borderStyle` | | `undefined` | Applies border style. Values correspond to the CSS `border-style` property. | -| `animate` | | `undefined` | Applies one-off animations to direct children of the Box. | +| Name | Type | Default | Description | +| :----------------------- | :----------------------------------------------------------------------- | :---------: | :-------------------------------------------------------------------------- | +| `padding` | | `undefined` | Adds padding to all internal sides of the Box. | +| `paddingBlockStart` | | `undefined` | Adds padding to the internal block start (top) side of the Box. | +| `paddingRight` | | `undefined` | Adds padding to the internal inline end (right) of the Box. | +| `paddingBlockEnd` | | `undefined` | Adds padding to the internal block end (bottom) side of the Box. | +| `paddingLeft` | | `undefined` | Adds padding to the internal inline start (left) side of the Box. | +| `margin` | | `undefined` | Adds margin to all external sides of the Box. | +| `marginBlockStart` | | `undefined` | Adds margin to the external block start (top) side of the Box. | +| `marginInlineEnd` | | `undefined` | Adds margin to the external inline end (right) side of the Box. | +| `marginBlockEnd` | | `undefined` | Adds margin to the external block end (bottom) side of the Box. | +| `marginInlineStart` | | `undefined` | Adds margin to the external inline start (left) side of the Box. | +| `backgroundColor` | | `undefined` | Applies a system-level background color to the Box. | +| `borderRadius` | | `undefined` | Applies a system-level border radius value to the Box. | +| `borderWidth` | | `undefined` | Applies a system-level border width value to the Box. | +| `borderBlockStartWidth` | | `undefined` | Applies a system-level border width value to block-start side of the Box. | +| `borderInlineEndWidth` | | `undefined` | Applies a system-level border width value to inline-end side of the Box. | +| `borderBlockEndWidth` | | `undefined` | Applies a system-level border width value to block-end side of the Box. | +| `borderInlineStartWidth` | | `undefined` | Applies a system-level border width value to inline-start side of the Box. | +| `borderColor` | | `undefined` | Applies a system-level border color value to the Box. | +| `borderStyle` | | `undefined` | Applies border style. Values correspond to the CSS `border-style` property. | +| `animate` | | `undefined` | Applies one-off animations to direct children of the Box. | diff --git a/apps/docs/scripts/components-with-animation.js b/apps/docs/scripts/components-with-animation.js index 152c514d4..64e270641 100644 --- a/apps/docs/scripts/components-with-animation.js +++ b/apps/docs/scripts/components-with-animation.js @@ -6,15 +6,15 @@ export const supportedComponents = [ 'ComparisonTable', 'FAQ', 'Heading', - 'Label', 'Image', + 'Label', 'Pillar', 'SectionIntro', 'Stack', + 'Timeline', 'Testimonial', 'Text', - 'Timeline', 'Animate', - 'RiverBreakout', 'River', + 'RiverBreakout', ] diff --git a/package-lock.json b/package-lock.json index 26c00aa59..02ef63790 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,7 +45,7 @@ }, "apps/storybook": { "name": "@primer/brand-storybook", - "version": "0.27.0", + "version": "0.27.1", "license": "MIT", "devDependencies": { "@babel/preset-env": "^7.22.0", @@ -26787,7 +26787,7 @@ }, "packages/design-tokens": { "name": "@primer/brand-primitives", - "version": "0.27.0", + "version": "0.27.1", "license": "MIT", "devDependencies": { "@primer/primitives": "^7.11.10", @@ -26801,7 +26801,7 @@ }, "packages/e2e": { "name": "@primer/brand-e2e", - "version": "0.27.0", + "version": "0.27.1", "license": "MIT", "devDependencies": { "@github/axe-github": "^0.5.0", @@ -26815,7 +26815,7 @@ }, "packages/fonts": { "name": "@primer/brand-fonts", - "version": "0.27.0", + "version": "0.27.1", "license": "MIT", "engines": { "node": ">=16.0.0", @@ -26824,7 +26824,7 @@ }, "packages/react": { "name": "@primer/react-brand", - "version": "0.27.0", + "version": "0.27.1", "license": "MIT", "dependencies": { "@primer/behaviors": "^1.3.4", @@ -26872,7 +26872,7 @@ }, "packages/repo-configs": { "name": "@primer/brand-config", - "version": "0.27.0", + "version": "0.27.1", "license": "MIT" } }, diff --git a/packages/e2e/scripts/playwright/axe-clean.spec.ts b/packages/e2e/scripts/playwright/axe-clean.spec.ts index d30cbd856..4996f97a1 100644 --- a/packages/e2e/scripts/playwright/axe-clean.spec.ts +++ b/packages/e2e/scripts/playwright/axe-clean.spec.ts @@ -49,7 +49,6 @@ let allViolations: Result[] = [] const hostname = 'http://localhost:6006' const testsToSkip = [ - 'layout-full-page-examples--resources-hub-example-playground', // example layout page, not a real page 'components-river--video', // video is an example and not an official primer pattern 'components-subdomainnavbar--search-results-visible', // has been a11y remediated already, 'components-subdomainnavbar--mobile-search-results-visible', // has been a11y remediated already, @@ -59,6 +58,7 @@ const testsToSkip = [ 'components-videoplayer--playground', // video makes this too flakey 'components-videoplayer--playground', // video makes this too flakey 'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey + 'recipes-feature-previews-level-1--level-one-side-by-side', // custom, temporary background image ] const testsWithCustomDelay = { 'components-subdomainnavbar--mobile-menu-open': 5000, // takes a while for the menu to open diff --git a/packages/e2e/scripts/playwright/playwright.generate-tests.ts b/packages/e2e/scripts/playwright/playwright.generate-tests.ts index a7ada85f3..04a4f4a4f 100644 --- a/packages/e2e/scripts/playwright/playwright.generate-tests.ts +++ b/packages/e2e/scripts/playwright/playwright.generate-tests.ts @@ -88,6 +88,7 @@ 'components-logosuite-features--mixed-width', // animation only 'components-logosuite-features--following-hero', // animation only 'components-logosuite-features--stacked', // animation only + 'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey ] const categorisedStories = Object.keys(stories as Stories).reduce((acc, key) => { diff --git a/packages/react/src/Box/Box.features.stories.tsx b/packages/react/src/Box/Box.features.stories.tsx index b680a46b8..b0c3fd0cc 100644 --- a/packages/react/src/Box/Box.features.stories.tsx +++ b/packages/react/src/Box/Box.features.stories.tsx @@ -204,6 +204,67 @@ export const BorderWidth = () => ( ) +export const DirectionalBorderWidth = () => ( + <> + + {BoxBorderWidthOptions.map(value => ( + + {`block-start: ${value}`} + + ))} + + + {BoxBorderWidthOptions.map(value => ( + + {`inline-end: ${value}`} + + ))} + + + {BoxBorderWidthOptions.map(value => ( + + {`inline-end: ${value}`} + + ))} + + + {BoxBorderWidthOptions.map(value => ( + + {`block-end: ${value}`} + + ))} + + +) + export const BorderColor = () => ( {BoxBorderColorOptions.map(value => ( diff --git a/packages/react/src/Box/Box.module.css b/packages/react/src/Box/Box.module.css index 04e8ceef0..0844cd8ec 100644 --- a/packages/react/src/Box/Box.module.css +++ b/packages/react/src/Box/Box.module.css @@ -2708,6 +2708,66 @@ border-width: var(--brand-borderWidth-thicker); } +.Box-borderBlockStartWidth--thin { + border-width: 0; + border-block-start-width: var(--brand-borderWidth-thin); +} + +.Box-borderBlockStartWidth--thick { + border-width: 0; + border-block-start-width: var(--brand-borderWidth-thick); +} + +.Box-borderBlockStartWidth--thicker { + border-width: 0; + border-block-start-width: var(--brand-borderWidth-thicker); +} + +.Box-borderInlineEndWidth--thin { + border-width: 0; + border-right-width: var(--brand-borderWidth-thin); +} + +.Box-borderInlineEndWidth--thick { + border-width: 0; + border-right-width: var(--brand-borderWidth-thick); +} + +.Box-borderInlineEndWidth--thicker { + border-width: 0; + border-right-width: var(--brand-borderWidth-thicker); +} + +.Box-borderBlockEndWidth--thin { + border-width: 0; + border-bottom-width: var(--brand-borderWidth-thin); +} + +.Box-borderBlockEndWidth--thick { + border-width: 0; + border-bottom-width: var(--brand-borderWidth-thick); +} + +.Box-borderBlockEndWidth--thicker { + border-width: 0; + border-bottom-width: var(--brand-borderWidth-thicker); +} + +.Box-borderInlineStartWidth--thin { + border-width: 0; + border-left-width: var(--brand-borderWidth-thin); +} + +.Box-borderInlineStartWidth--thick { + border-width: 0; + border-left-width: var(--brand-borderWidth-thick); +} + +.Box-borderInlineStartWidth--thicker { + border-width: 0; + border-left-width: var(--brand-borderWidth-thicker); +} + /* * 14. Border Color */ diff --git a/packages/react/src/Box/Box.module.css.d.ts b/packages/react/src/Box/Box.module.css.d.ts index 5a8560fdc..2a16b30e8 100644 --- a/packages/react/src/Box/Box.module.css.d.ts +++ b/packages/react/src/Box/Box.module.css.d.ts @@ -838,6 +838,18 @@ declare const styles: { readonly "Box-borderWidth--thin": string; readonly "Box-borderWidth--thick": string; readonly "Box-borderWidth--thicker": string; + readonly "Box-borderBlockStartWidth--thin": string; + readonly "Box-borderBlockStartWidth--thick": string; + readonly "Box-borderBlockStartWidth--thicker": string; + readonly "Box-borderInlineEndWidth--thin": string; + readonly "Box-borderInlineEndWidth--thick": string; + readonly "Box-borderInlineEndWidth--thicker": string; + readonly "Box-borderBlockEndWidth--thin": string; + readonly "Box-borderBlockEndWidth--thick": string; + readonly "Box-borderBlockEndWidth--thicker": string; + readonly "Box-borderInlineStartWidth--thin": string; + readonly "Box-borderInlineStartWidth--thick": string; + readonly "Box-borderInlineStartWidth--thicker": string; readonly "Box-borderColor--default": string; readonly "Box-borderColor--muted": string; readonly "Box-borderColor--subtle": string; diff --git a/packages/react/src/Box/Box.test.tsx b/packages/react/src/Box/Box.test.tsx index d94caabd7..8136509e5 100644 --- a/packages/react/src/Box/Box.test.tsx +++ b/packages/react/src/Box/Box.test.tsx @@ -3,7 +3,14 @@ import '@testing-library/jest-dom' import {cleanup, render} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' -import {Box, BoxBackgroundColors, BoxBorderColorOptions, BoxBorderRadiusOptions, BoxSpacingValues} from './Box' +import { + Box, + BoxBackgroundColors, + BoxBorderColorOptions, + BoxBorderRadiusOptions, + BoxSpacingValues, + BoxBorderWidthOptions, +} from './Box' expect.extend(toHaveNoViolations) @@ -213,4 +220,34 @@ describe('Box', () => { expect(boxEl).toHaveClass(expectedClass) } }) + + it('will set the correct styles for directional border width', () => { + const borderDirections = [ + 'borderBlockStartWidth', + 'borderInlineEndWidth', + 'borderBlockEndWidth', + 'borderInlineStartWidth', + ] + + for (const width of BoxBorderWidthOptions) { + for (const direction of borderDirections) { + const expectedClass = `Box-${direction}--${width}` + + const id = `box-${direction}-${width}` + + const props = { + [direction]: width, + } + + const {getByTestId} = render( + + {mockText} + , + ) + + const boxEl = getByTestId(id) + expect(boxEl).toHaveClass(expectedClass) + } + } + }) }) diff --git a/packages/react/src/Box/Box.tsx b/packages/react/src/Box/Box.tsx index c35a7e1b2..c12621e3e 100644 --- a/packages/react/src/Box/Box.tsx +++ b/packages/react/src/Box/Box.tsx @@ -83,6 +83,22 @@ type BoxProps = { * Apply a system-level border width value */ borderWidth?: BorderWidthOptions + /* + * Apply a directional border width value + */ + borderBlockStartWidth?: BorderWidthOptions + /* + * Apply a directional border width value + */ + borderInlineEndWidth?: BorderWidthOptions + /* + * Apply a directional border width value + */ + borderBlockEndWidth?: BorderWidthOptions + /* + * Apply a directional border width value + */ + borderInlineStartWidth?: BorderWidthOptions /* * Apply a system-level border color value */ @@ -147,6 +163,10 @@ export const Box = ({ backgroundColor, borderRadius, borderWidth, + borderBlockStartWidth, + borderInlineEndWidth, + borderBlockEndWidth, + borderInlineStartWidth, borderColor, borderStyle, ...rest @@ -175,6 +195,22 @@ export const Box = ({ const backgroundColorClasses = useMemo(() => classBuilder('backgroundColor', backgroundColor), [backgroundColor]) const borderRadiusClasses = useMemo(() => classBuilder('borderRadius', borderRadius), [borderRadius]) const borderWidthClasses = useMemo(() => classBuilder('borderWidth', borderWidth), [borderWidth]) + const borderBlockStartWidthClasses = useMemo( + () => classBuilder('borderBlockStartWidth', borderBlockStartWidth), + [borderBlockStartWidth], + ) + const borderInlineEndWidthClasses = useMemo( + () => classBuilder('borderInlineEndWidth', borderInlineEndWidth), + [borderInlineEndWidth], + ) + const borderBlockEndWidthClasses = useMemo( + () => classBuilder('borderBlockEndWidth', borderBlockEndWidth), + [borderBlockEndWidth], + ) + const borderInlineStartWidthClasses = useMemo( + () => classBuilder('borderInlineStartWidth', borderInlineStartWidth), + [borderInlineStartWidth], + ) const borderColorClasses = useMemo(() => classBuilder('borderColor', borderColor), [borderColor]) const borderStyleClasses = useMemo(() => classBuilder('borderStyle', borderStyle), [borderStyle]) @@ -195,6 +231,10 @@ export const Box = ({ backgroundColorClasses, borderRadiusClasses, borderWidthClasses, + borderBlockStartWidthClasses, + borderInlineEndWidthClasses, + borderBlockEndWidthClasses, + borderInlineStartWidthClasses, borderColorClasses, borderStyleClasses, className, diff --git a/packages/react/src/Box/Box.visual.spec.ts b/packages/react/src/Box/Box.visual.spec.ts index 1976d5255..636ad5ee2 100644 --- a/packages/react/src/Box/Box.visual.spec.ts +++ b/packages/react/src/Box/Box.visual.spec.ts @@ -116,6 +116,15 @@ test.describe('Visual Comparison: Box', () => { expect(await page.screenshot()).toMatchSnapshot() }) + test('Box / Directional Border Width', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-box-features--directional-border-width&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + test('Box / Border Color', async ({page}) => { await page.goto('http://localhost:6006/iframe.html?args=&id=components-box-features--border-color&viewMode=story') diff --git a/packages/react/src/Box/Box.visual.spec.ts-snapshots/Visual-Comparison-Box-Box-Directional-Border-Width-1-linux.png b/packages/react/src/Box/Box.visual.spec.ts-snapshots/Visual-Comparison-Box-Box-Directional-Border-Width-1-linux.png new file mode 100644 index 000000000..629883460 Binary files /dev/null and b/packages/react/src/Box/Box.visual.spec.ts-snapshots/Visual-Comparison-Box-Box-Directional-Border-Width-1-linux.png differ diff --git a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Mobile-viewport-test--ac684-ile-Prose-Narrow-view-full-width-mobile-1-linux.png b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Mobile-viewport-test--ac684-ile-Prose-Narrow-view-full-width-mobile-1-linux.png index ae2a89c49..e2fbce8c1 100644 Binary files a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Mobile-viewport-test--ac684-ile-Prose-Narrow-view-full-width-mobile-1-linux.png and b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Mobile-viewport-test--ac684-ile-Prose-Narrow-view-full-width-mobile-1-linux.png differ diff --git a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Default-1-linux.png b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Default-1-linux.png index 45cbf7836..9d77a6e6c 100644 Binary files a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Default-1-linux.png and b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Default-1-linux.png differ diff --git a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Full-Width-1-linux.png b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Full-Width-1-linux.png index 76fade24c..6e9c83e14 100644 Binary files a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Full-Width-1-linux.png and b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Full-Width-1-linux.png differ diff --git a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Playground-1-linux.png b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Playground-1-linux.png index 45cbf7836..9d77a6e6c 100644 Binary files a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Playground-1-linux.png and b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Prose-Playground-1-linux.png differ diff --git a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Tablet-viewport-test--1534f-et-Prose-Regular-view-full-width-tablet-1-linux.png b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Tablet-viewport-test--1534f-et-Prose-Regular-view-full-width-tablet-1-linux.png index 5c05d55a3..62d746cf3 100644 Binary files a/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Tablet-viewport-test--1534f-et-Prose-Regular-view-full-width-tablet-1-linux.png and b/packages/react/src/Prose/Prose.visual.spec.ts-snapshots/Visual-Comparison-Prose-Tablet-viewport-test--1534f-et-Prose-Regular-view-full-width-tablet-1-linux.png differ diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css index 7edd9c708..710d3e3bd 100644 --- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css +++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css @@ -46,6 +46,9 @@ } @media screen and (max-width: 63.25rem) { + .FeaturePreview__splitLayout { + display: none; + } .FeaturePreview__splitLayoutBg { background-image: none !important; } @@ -102,6 +105,10 @@ } } +.FeaturePreview__footerLink { + color: var(--brand-color-text-muted); +} + /** * Enterprise story * Positional overrides that are required as the video doesn't fade. diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css.d.ts b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css.d.ts index 28e8a1583..ba445e91b 100644 --- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css.d.ts +++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.module.css.d.ts @@ -14,6 +14,7 @@ declare const styles: { readonly "FeaturePreview__formContent": string; readonly "FeaturePreview__heroContentInnerSticky": string; readonly "FeaturePreview__heroContentInnerStickyContent": string; + readonly "FeaturePreview__footerLink": string; readonly "FeaturePreview__enterpriseVideo": string; readonly "FeaturePreview__enterpriseVideoOverlayTop": string; readonly "FeaturePreview__enterpriseVideoOverlayLeft": string; diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts index 9ea750b44..c590a7731 100644 --- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts +++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts @@ -24,13 +24,4 @@ test.describe('Visual Comparison: FeaturePreviewLevelOne', () => { await page.waitForTimeout(500) expect(await page.screenshot()).toMatchSnapshot() }) - - test('FeaturePreviewLevelOne / Side-by-side - Enteprise', async ({page}) => { - await page.goto( - 'http://localhost:6006/iframe.html?args=&id=recipes-feature-previews-level-1--level-one-side-by-side-enterprise&viewMode=story', - ) - - await page.waitForTimeout(500) - expect(await page.screenshot()).toMatchSnapshot() - }) }) diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side---Enteprise-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side---Enteprise-1-linux.png deleted file mode 100644 index b4c66ce4e..000000000 Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side---Enteprise-1-linux.png and /dev/null differ diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side-1-linux.png index c613c4423..f601bdc07 100644 Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side-1-linux.png and b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Side-by-side-1-linux.png differ diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOneSideBySide.tsx b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOneSideBySide.tsx index e55d8e9e7..b5c9ba6cb 100644 --- a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOneSideBySide.tsx +++ b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOneSideBySide.tsx @@ -6,7 +6,6 @@ import { Heading, InlineLink, Label, - MinimalFooter, Stack, SubdomainNavBar, Text, @@ -107,11 +106,13 @@ export function FeaturePreviewLevelOneSideBySide({ }} > - - - {enableGridOverlay ? 'Disable' : 'Enable'} grid - - + + + + {enableGridOverlay ? 'Disable' : 'Enable'} grid + + + - + + + + + + {`\u00A9 2023 GitHub. All rights reserved.`} + + + + + Enterprise + + + + + + Email us + + + + + + - - - Try GitHub for free - - Enterprise - Email us - + {enableGridOverlay && (