Skip to content

Commit

Permalink
added introduction file
Browse files Browse the repository at this point in the history
  • Loading branch information
@asllanmakaj7
asllanmakaj7 committed Jan 3, 2024
1 parent 112b976 commit 8149b81
Show file tree
Hide file tree
Showing 5 changed files with 263 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion stories/AudioPlayer.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ interface StoryArgs {
}

export default {
title: "Shko Online's AudioPlayer",
title: "Shko Online's AudioPlayer/Audio Player",
argTypes: {
src: {
control: "text",
Expand Down
181 changes: 181 additions & 0 deletions stories/Introduction.stories.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
58 changes: 58 additions & 0 deletions stories/Introduction.stories.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<div class="sbdocs sbdocs-wrapper">
<div class="sbdocs sbdocs-content">
<h1>Shko Online's Audio Player</h1>

<div class="tip-wrapper">
<span class="tip">Tip</span>Browse example stories now by navigating to them in the sidebar. View their code
in
the <code>stories</code> directory to learn how they work.
</div>
<div class="tip-wrapper">
<span class="tip">Acknowlegment</span> Stories implemented with the help of the
<code>ComponentFramework Mock</code> library by
<a href="https://shko.online/" target="_blank">
Shko Online
</a>
</div>

<div class="subheading">Links</div>

<div class="link-list">
<a class="link-item" href="https://github.com/Shko-Online/ComponentFramework-Mock" target="_blank">
<img src="https://avatars.githubusercontent.com/u/103819795?s=200&v=4" alt="Shko Online" />
<span>
<strong>GitHub Repo</strong>
ComponentFramework Mock
</span>
</a>
<a class="link-item" href="https://shko.online" target="_blank">
<img src="https://avatars.githubusercontent.com/u/103819795?s=200&v=4" alt="Shko Online" />
<span>
<strong>Website</strong>
shko.online
</span>
</a>



<a class="link-item" href="https://github.com/Shko-Online/PCF.AudioPlayer" target="_blank">
<img src="https://pngimg.com/uploads/github/github_PNG20.png" alt="plugin" />
<span>
<strong>GitHub Repo</strong>
Shko Online's Audio Player
</span>
</a>
<a class="link-item" href="https://pcf.gallery/shkoonline-audioplayer/" target="_blank">
<img src="https://pcf.gallery/assets/images/logo.png" alt="PCF Gallery" />
<span>
<strong>PCF Gallery</strong>
Shko Online's Audio Player
</span>
</a>




</div>
</div>
</div>
18 changes: 18 additions & 0 deletions stories/Introduction.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 8149b81

Please sign in to comment.