Merge pull request #49 from reuters-graphics/quickfix
Fix prop name in video, SCSS docs
This commit is contained in:
commit
e2b04f2678
3 changed files with 11 additions and 11 deletions
|
|
@ -26,7 +26,7 @@ slug: video
|
||||||
<Video
|
<Video
|
||||||
ariaDescription={"Compulsory description of your video for screen readers."}
|
ariaDescription={"Compulsory description of your video for screen readers."}
|
||||||
src={`${assets}/videos/myVideo.mp4`} // or a URL to an external video
|
src={`${assets}/videos/myVideo.mp4`} // or a URL to an external video
|
||||||
size={'wide'} // normal, wide, wider, widest or fluid
|
width={'wide'} // normal, wide, wider, widest or fluid
|
||||||
caption={'Optional caption for your video.'}
|
caption={'Optional caption for your video.'}
|
||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
@ -35,7 +35,7 @@ slug: video
|
||||||
<Video
|
<Video
|
||||||
ariaDescription="Description of your video for screen readers."
|
ariaDescription="Description of your video for screen readers."
|
||||||
src={`${assets}/videos/Sequence silent video_4.mp4`}
|
src={`${assets}/videos/Sequence silent video_4.mp4`}
|
||||||
size="wide"
|
width="wide"
|
||||||
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
||||||
/>
|
/>
|
||||||
</DemoContainer>
|
</DemoContainer>
|
||||||
|
|
@ -69,7 +69,7 @@ Here is an example of what the same video would look like with a visibility thre
|
||||||
<Video
|
<Video
|
||||||
ariaDescription="{'Compulsory description of your video for screen readers.'}"
|
ariaDescription="{'Compulsory description of your video for screen readers.'}"
|
||||||
src="{'path-to-video-or-external-url'}"
|
src="{'path-to-video-or-external-url'}"
|
||||||
size="{'normal'}"
|
width="{'normal'}"
|
||||||
loopVideo="{false}"
|
loopVideo="{false}"
|
||||||
playVideoThreshold="{0.9}"
|
playVideoThreshold="{0.9}"
|
||||||
/>
|
/>
|
||||||
|
|
@ -79,7 +79,7 @@ Here is an example of what the same video would look like with a visibility thre
|
||||||
<Video
|
<Video
|
||||||
ariaDescription="Description of your video for screen readers."
|
ariaDescription="Description of your video for screen readers."
|
||||||
src={`${assets}/videos/Sequence silent video_4.mp4`}
|
src={`${assets}/videos/Sequence silent video_4.mp4`}
|
||||||
size="normal"
|
width="normal"
|
||||||
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
||||||
loopVideo={false}
|
loopVideo={false}
|
||||||
playVideoThreshold={0.9}
|
playVideoThreshold={0.9}
|
||||||
|
|
@ -182,7 +182,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
|
||||||
<Video
|
<Video
|
||||||
ariaDescription="{'Compulsory description of your video for screen readers.'}"
|
ariaDescription="{'Compulsory description of your video for screen readers.'}"
|
||||||
src="{'path-to-video-or-external-url'}"
|
src="{'path-to-video-or-external-url'}"
|
||||||
size="{'normal'}"
|
width="{'normal'}"
|
||||||
controlsOpacity="{1}"
|
controlsOpacity="{1}"
|
||||||
loopVideo="{false}"
|
loopVideo="{false}"
|
||||||
muteVideo="{false}"
|
muteVideo="{false}"
|
||||||
|
|
@ -194,7 +194,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
|
||||||
<Video
|
<Video
|
||||||
ariaDescription="Description of your video for screen readers."
|
ariaDescription="Description of your video for screen readers."
|
||||||
src={`${assets}/videos/Sequence sound video.mp4`}
|
src={`${assets}/videos/Sequence sound video.mp4`}
|
||||||
size="normal"
|
width="normal"
|
||||||
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
||||||
controlsOpacity={1}
|
controlsOpacity={1}
|
||||||
loopVideo={false}
|
loopVideo={false}
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ There are several ways to specify font styles.
|
||||||
```svelte
|
```svelte
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
// Import SCSS variables
|
// Import SCSS variables
|
||||||
@import 'reuters-graphics/graphics-components/dist/scss/variables';
|
@import '@reuters-graphics/graphics-components/dist/scss/variables';
|
||||||
|
|
||||||
p {
|
p {
|
||||||
// Use one...
|
// Use one...
|
||||||
|
|
@ -41,7 +41,7 @@ There are several ways to specify font styles.
|
||||||
```svelte
|
```svelte
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
// Import SCSS mixins
|
// Import SCSS mixins
|
||||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||||
|
|
||||||
p {
|
p {
|
||||||
// Use one...
|
// Use one...
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ Mixin our default body text styles.
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
// Import SCSS mixins
|
// Import SCSS mixins
|
||||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||||
|
|
||||||
div.my-custom-text {
|
div.my-custom-text {
|
||||||
// Use body-text rules for all text elements
|
// Use body-text rules for all text elements
|
||||||
|
|
@ -50,7 +50,7 @@ Graphic text styles.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||||
|
|
||||||
div.my-chart-container {
|
div.my-chart-container {
|
||||||
@include graphic-text;
|
@include graphic-text;
|
||||||
|
|
@ -68,7 +68,7 @@ Hide text meant for screen readers.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||||
|
|
||||||
div.hidden {
|
div.hidden {
|
||||||
@include visually-hidden;
|
@include visually-hidden;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue