From 8149b810a1161ad1f7d55ca7357912ec79a635f0 Mon Sep 17 00:00:00 2001 From: asllanmakaj7 Date: Wed, 3 Jan 2024 11:38:32 +0100 Subject: [PATCH] added introduction file --- .storybook/preview.ts | 5 + stories/AudioPlayer.stories.ts | 2 +- stories/Introduction.stories.css | 181 ++++++++++++++++++++++++++++++ stories/Introduction.stories.html | 58 ++++++++++ stories/Introduction.stories.ts | 18 +++ 5 files changed, 263 insertions(+), 1 deletion(-) create mode 100644 stories/Introduction.stories.css create mode 100644 stories/Introduction.stories.html create mode 100644 stories/Introduction.stories.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts index e4c0878..c2da91a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -2,6 +2,11 @@ import type { Preview } from "@storybook/html"; const preview: Preview = { parameters: { + options: { + storySort: { + order: ['Shko Online\'s AudioPlayer', ['Introduction', '*']], + }, + }, actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { diff --git a/stories/AudioPlayer.stories.ts b/stories/AudioPlayer.stories.ts index 4d5d1dd..5af9350 100644 --- a/stories/AudioPlayer.stories.ts +++ b/stories/AudioPlayer.stories.ts @@ -36,7 +36,7 @@ interface StoryArgs { } export default { - title: "Shko Online's AudioPlayer", + title: "Shko Online's AudioPlayer/Audio Player", argTypes: { src: { control: "text", diff --git a/stories/Introduction.stories.css b/stories/Introduction.stories.css new file mode 100644 index 0000000..75f51f8 --- /dev/null +++ b/stories/Introduction.stories.css @@ -0,0 +1,181 @@ + +.sbdocs-wrapper { + background: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding: 4rem 20px; + min-height: 100vh; + box-sizing: border-box; + gap: 3rem; +} + +.sbdocs-content { + max-width: 1000px; + width: 100%; +} + +.sbdocs-content :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) { + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-overflow-scrolling: touch; +} + +.sbdocs-content :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) { + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 14px; + margin: 16px 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-overflow-scrolling: touch; + line-height: 24px; + color: #2E3438; +} + +.sbdocs-content :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) { + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-overflow-scrolling: touch; +} + +.sbdocs-content :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) { + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-overflow-scrolling: touch; +} + +.sbdocs-content :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) { + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: inherit; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-overflow-scrolling: touch; + line-height: 24px; + color: #029CFD; + -webkit-text-decoration: none; + text-decoration: none; +} + +.sbdocs-content :where(img:not(.sb-anchor, .sb-unstyled, .sb-unstyled img)) { + max-width: 100%; +} + +.subheading { + --mediumdark: '#999999'; + font-weight: 900; + font-size: 13px; + color: #999; + letter-spacing: 6px; + line-height: 24px; + text-transform: uppercase; + margin-bottom: 12px; + margin-top: 40px; +} + +.link-list { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + row-gap: 10px; +} + +@media (min-width: 620px) { + .link-list { + row-gap: 20px; + column-gap: 20px; + grid-template-columns: 1fr 1fr; + } +} + +@media all and (-ms-high-contrast: none) { + .link-list { + display: -ms-grid; + -ms-grid-columns: 1fr 1fr; + -ms-grid-rows: 1fr 1fr; + } +} + +.link-item { + display: block; + padding: 20px 30px 20px 15px; + border: 1px solid #00000010; + border-radius: 5px; + transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; + color: #333333; + display: flex; + align-items: flex-start; +} + +.link-item:hover { + border-color: #1ea7fd50; + transform: translate3d(0, -3px, 0); + box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; +} + +.link-item:active { + border-color: #1ea7fd; + transform: translate3d(0, 0, 0); +} + +.link-item strong { + font-weight: 700; + display: block; + margin-bottom: 2px; +} + +.link-item img { + height: 40px; + width: 40px; + margin-right: 15px; + flex: none; +} + +.link-item span { + font-size: 14px; + line-height: 20px; +} + +.tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +.tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +.tip-wrapper code { + font-size: 12px; + display: inline-block; +} diff --git a/stories/Introduction.stories.html b/stories/Introduction.stories.html new file mode 100644 index 0000000..f25e24b --- /dev/null +++ b/stories/Introduction.stories.html @@ -0,0 +1,58 @@ +
+
+

Shko Online's Audio Player

+ +
+ TipBrowse example stories now by navigating to them in the sidebar. View their code + in + the stories directory to learn how they work. +
+
+ Acknowlegment Stories implemented with the help of the + ComponentFramework Mock library by + + Shko Online + +
+ +
Links
+ +
+ + Shko Online + + GitHub Repo + ComponentFramework Mock + + + + Shko Online + + Website + shko.online + + + + + + + plugin + + GitHub Repo + Shko Online's Audio Player + + + + PCF Gallery + + PCF Gallery + Shko Online's Audio Player + + + + + + +
+
+
\ No newline at end of file diff --git a/stories/Introduction.stories.ts b/stories/Introduction.stories.ts new file mode 100644 index 0000000..b4a9881 --- /dev/null +++ b/stories/Introduction.stories.ts @@ -0,0 +1,18 @@ +import { StoryObj } from '@storybook/html'; +import storyHtml from './Introduction.stories.html'; + +import './Introduction.stories.css'; + + +export default { + title: "Shko Online's AudioPlayer/Introduction", + +}; + +export const Introduction = { + render: () => storyHtml, +decorators:[], + parameters: { + // controls: false + } +} as StoryObj;