Merge pull request #49 from reuters-graphics/quickfix

Fix prop name in video, SCSS docs
This commit is contained in:
MinamiFunakoshiTR 2023-01-18 15:39:39 -06:00 committed by GitHub
commit e2b04f2678
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 11 deletions

View file

@ -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}

View file

@ -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...

View file

@ -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;