From d9def0952744595d4795cbd47cba49043fd659fe Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Sun, 14 Aug 2022 22:44:59 +0100 Subject: [PATCH] video --- .storybook/preview.scss | 4 + src/components/Article/Article.stories.svelte | 4 +- .../Article/stories/docs/component.md | 2 +- .../BeforeAfter/stories/docs/component.md | 2 +- src/components/Block/Block.stories.svelte | 2 +- .../Block/stories/docs/component.md | 2 +- .../Block/stories/docs/customLayouts.md | 2 +- .../BodyText/stories/docs/component.md | 6 +- .../GraphicBlock/GraphicBlock.stories.svelte | 4 +- .../GraphicBlock/stories/docs/component.md | 2 +- src/components/Video/Video.stories.svelte | 97 + .../Video/{index.svelte => Video.svelte} | 210 +- src/components/Video/docs.svx | 203 +- .../Video/stories/docs/component.md | 15 + src/components/Video/stories/docs/controls.md | 38 + .../Video/stories/docs/playAndLoop.md | 28 + .../Video/stories/docs/withSound.md | 36 + .../Video/stories/videos/silent-video.mp4} | Bin .../Video/stories/videos/sound-video.mp4} | Bin src/index.js | 2 +- src/scss/mixins/_graphic.scss | 9 +- src/statics/lottie/images/img_0.png | Bin 502120 -> 0 bytes src/statics/lottie/images/img_1.png | Bin 322833 -> 0 bytes src/statics/lottie/images/img_2.png | Bin 277040 -> 0 bytes src/statics/lottie/liberia.json | 457697 --------------- 25 files changed, 455 insertions(+), 457910 deletions(-) create mode 100644 src/components/Video/Video.stories.svelte rename src/components/Video/{index.svelte => Video.svelte} (61%) create mode 100644 src/components/Video/stories/docs/component.md create mode 100644 src/components/Video/stories/docs/controls.md create mode 100644 src/components/Video/stories/docs/playAndLoop.md create mode 100644 src/components/Video/stories/docs/withSound.md rename src/{statics/videos/Sequence silent video_4.mp4 => components/Video/stories/videos/silent-video.mp4} (100%) rename src/{statics/videos/Sequence sound video.mp4 => components/Video/stories/videos/sound-video.mp4} (100%) delete mode 100644 src/statics/lottie/images/img_0.png delete mode 100644 src/statics/lottie/images/img_1.png delete mode 100644 src/statics/lottie/images/img_2.png delete mode 100644 src/statics/lottie/liberia.json diff --git a/.storybook/preview.scss b/.storybook/preview.scss index d0ccf6b2..7bbb62f6 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -40,6 +40,10 @@ p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li { @include font-display; } +.sbdocs { + @include font-display; +} + // .sbdocs { // max-width: 800px; // margin: 0 auto !important; diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte index b5e7f422..3540b55a 100644 --- a/src/components/Article/Article.stories.svelte +++ b/src/components/Article/Article.stories.svelte @@ -26,7 +26,7 @@ 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom. diff --git a/src/components/Block/stories/docs/customLayouts.md b/src/components/Block/stories/docs/customLayouts.md index 1ef3c47a..b743b3ec 100644 --- a/src/components/Block/stories/docs/customLayouts.md +++ b/src/components/Block/stories/docs/customLayouts.md @@ -1,4 +1,4 @@ -Our article well is designed to provide a basic responsive layout issues for you, but it's also made to get out of the way quickly when you need to do something custom. +Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom. If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework. diff --git a/src/components/BodyText/stories/docs/component.md b/src/components/BodyText/stories/docs/component.md index aa789b78..cc95bc78 100644 --- a/src/components/BodyText/stories/docs/component.md +++ b/src/components/BodyText/stories/docs/component.md @@ -1,4 +1,6 @@ -Body text includes the main text of your page. +The `BodyText` creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need. + +Use it like this: ```svelte + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Video/index.svelte b/src/components/Video/Video.svelte similarity index 61% rename from src/components/Video/index.svelte rename to src/components/Video/Video.svelte index c1e6e866..61ac8e32 100644 --- a/src/components/Video/index.svelte +++ b/src/components/Video/Video.svelte @@ -1,20 +1,43 @@ -
@@ -18,14 +17,13 @@ slug: video
- ```svelte -