[GRAV-1370] update example image ratio

Skyscanner · Sybsw · Jan 22, 2025 · Jan 17, 2025 · Jan 20, 2025 · Jan 21, 2025
commit 01a29fbd0d7c0f2d5abf5ec95c8bf842e6c2de33
diff --git a/examples/bpk-component-overlay/examples.js b/examples/bpk-component-overlay/examples.js
@@ -211,7 +211,7 @@ const VideoOverlayExamples = () => {
             <BpkImage
               src={VIDEO_IMG_SRC}
               altText="Sail boat"
-              aspectRatio={0.6}
+              aspectRatio={360 / 640}
             />
           </BpkOverlay>
           <div className={getClassName('bpk-overlay-stories__overlay--name')}>
@@ -227,7 +227,7 @@ const VideoOverlayExamples = () => {
             <BpkImage
               src={VIDEO_IMG_SRC}
               altText="Sail boat"
-              aspectRatio={0.6}
+              aspectRatio={360 / 640}
             />
           </BpkOverlay>
         </BpkOverlay>

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
        root = document?.querySelector(':root');
        (root as HTMLElement).style.setProperty('font-size', fontSize);
      } catch(e) {
        console.error(e);
      }
      return (
        <div>
diff --git a/examples/bpk-component-autosuggest/examples.js b/examples/bpk-component-autosuggest/examples.js
    };
  }

  onChange = (e: SyntheticEvent<any>, { newValue }: { newValue: string }) => {
    this.setState({
      value: newValue,
    });
diff --git a/examples/bpk-component-barchart/hocs.js b/examples/bpk-component-barchart/hocs.js
      };
    }

    onBarClick = (e: SyntheticEvent<any>, { point }: { point: number }) => {
      this.setState({
        selectedPoint: point,
      });
diff --git a/examples/bpk-component-fieldset/examples.js b/examples/bpk-component-fieldset/examples.js
  }

  onChange = (
    e: SyntheticInputEvent<HTMLElement>,
    { newValue }: { newValue: string },
  ) => {
    this.setState({
 }

 type FieldsetProps = {
  ...$Exact<BpkFieldsetProps>,
  validStates: Array<mixed>,
 };

    };
  }

  onChange = (e: SyntheticInputEvent<HTMLElement>) => {
    this.setState({
      value: e.target.value,
      checked: e.target.checked,
diff --git a/examples/bpk-component-info-banner/examples.js b/examples/bpk-component-info-banner/examples.js
  <BpkInfoBannerExpandableState
    message="Success alert"
    type={ALERT_TYPES.SUCCESS}
    action={{title: "Sample Action", callback: () => alert('Hello from action')}}
    toggleButtonLabel="View more"
  >
    {longMessage}
diff --git a/examples/bpk-component-phone-input/examples.js b/examples/bpk-component-phone-input/examples.js
    this.state = { dialingCode: '44_uk', value: '' };
  }

  onChange = (e: SyntheticInputEvent<HTMLElement>) => {
    this.setState({ value: e.target.value });
  };

  onDialingCodeChange = (e: SyntheticInputEvent<HTMLElement>) => {
    this.setState({ dialingCode: e.target.value });
  };

diff --git a/packages/bpk-component-autosuggest/src/accessibility-test.js b/packages/bpk-component-autosuggest/src/accessibility-test.js
  library we use for it. At some point we plan to replace it, but for now
  it won't pass the accessibility test.
  */
  it.skip('should not have programmatically-detectable accessibility issues', async () => {
    const { container } = render(
      <BpkAutosuggest
        suggestions={suggestions}
	root = document?.querySelector(':root');
	(root as HTMLElement).style.setProperty('font-size', fontSize);
	} catch(e) {
	console.error(e);
Check warning on line 43 in .storybook/preview.tsx GitHub Actions / Build / Build `Unexpected console statement`
	}
	return (
	<div>
	};
	}

	onChange = (e: SyntheticEvent<any>, { newValue }: { newValue: string }) => {
Check warning on line 151 in examples/bpk-component-autosuggest/examples.js GitHub Actions / Build / Build `'SyntheticEvent' is not defined`
	this.setState({
	value: newValue,
	});
	};
	}

	onBarClick = (e: SyntheticEvent<any>, { point }: { point: number }) => {
Check warning on line 42 in examples/bpk-component-barchart/hocs.js GitHub Actions / Build / Build `'SyntheticEvent' is not defined`
	this.setState({
	selectedPoint: point,
	});
	}

	onChange = (
	e: SyntheticInputEvent<HTMLElement>,
Check warning on line 141 in examples/bpk-component-fieldset/examples.js GitHub Actions / Build / Build `'SyntheticInputEvent' is not defined`
	{ newValue }: { newValue: string },
	) => {
	this.setState({
	}

	type FieldsetProps = {
	...$Exact<BpkFieldsetProps>,
Check warning on line 198 in examples/bpk-component-fieldset/examples.js GitHub Actions / Build / Build `'$Exact' is not defined`
	validStates: Array<mixed>,
	};

	};
	}

	onChange = (e: SyntheticInputEvent<HTMLElement>) => {
Check warning on line 232 in examples/bpk-component-fieldset/examples.js GitHub Actions / Build / Build `'SyntheticInputEvent' is not defined`
	this.setState({
	value: e.target.value,
	checked: e.target.checked,
	<BpkInfoBannerExpandableState
	message="Success alert"
	type={ALERT_TYPES.SUCCESS}
	action={{title: "Sample Action", callback: () => alert('Hello from action')}}
Check warning on line 200 in examples/bpk-component-info-banner/examples.js GitHub Actions / Build / Build `Unexpected alert`
	toggleButtonLabel="View more"
	>
	{longMessage}
	this.state = { dialingCode: '44_uk', value: '' };
	}

	onChange = (e: SyntheticInputEvent<HTMLElement>) => {
Check warning on line 72 in examples/bpk-component-phone-input/examples.js GitHub Actions / Build / Build `'SyntheticInputEvent' is not defined`
	this.setState({ value: e.target.value });
	};

	onDialingCodeChange = (e: SyntheticInputEvent<HTMLElement>) => {
Check warning on line 76 in examples/bpk-component-phone-input/examples.js GitHub Actions / Build / Build `'SyntheticInputEvent' is not defined`
	this.setState({ dialingCode: e.target.value });
	};
	library we use for it. At some point we plan to replace it, but for now
	it won't pass the accessibility test.
	*/
	it.skip('should not have programmatically-detectable accessibility issues', async () => {
Check warning on line 44 in packages/bpk-component-autosuggest/src/accessibility-test.js GitHub Actions / Build / Build `Disabled test`
	const { container } = render(
	<BpkAutosuggest
	suggestions={suggestions}