Merge pull request #3 from danestves/feat/adding-docs

feat: adding more stories to docs

.chglog/CHANGELOG.tpl.md

@@ -0,0 +1,49 @@
+{{ if .Versions -}}
+<a name="unreleased"></a>
+## [Unreleased]
+
+{{ if .Unreleased.CommitGroups -}}
+{{ range .Unreleased.CommitGroups -}}
+### {{ .Title }}
+{{ range .Commits -}}
+- {{ if .Scope }}**{{ .Scope }}:** {{ end }}{{ .Subject }}
+{{ end }}
+{{ end -}}
+{{ end -}}
+{{ end -}}
+
+{{ range .Versions }}
+<a name="{{ .Tag.Name }}"></a>
+## {{ if .Tag.Previous }}[{{ .Tag.Name }}]{{ else }}{{ .Tag.Name }}{{ end }} - {{ datetime "2006-01-02" .Tag.Date }}
+{{ range .CommitGroups -}}
+### {{ .Title }}
+{{ range .Commits -}}
+- {{ if .Scope }}**{{ .Scope }}:** {{ end }}{{ .Subject }}
+{{ end }}
+{{ end -}}
+
+{{- if .RevertCommits -}}
+### Reverts
+{{ range .RevertCommits -}}
+- {{ .Revert.Header }}
+{{ end }}
+{{ end -}}
+
+{{- if .NoteGroups -}}
+{{ range .NoteGroups -}}
+### {{ .Title }}
+{{ range .Notes }}
+{{ .Body }}
+{{ end }}
+{{ end -}}
+{{ end -}}
+{{ end -}}
+
+{{- if .Versions }}
+[Unreleased]: {{ .Info.RepositoryURL }}/compare/{{ $latest := index .Versions 0 }}{{ $latest.Tag.Name }}...HEAD
+{{ range .Versions -}}
+{{ if .Tag.Previous -}}
+[{{ .Tag.Name }}]: {{ $.Info.RepositoryURL }}/compare/{{ .Tag.Previous.Name }}...{{ .Tag.Name }}
+{{ end -}}
+{{ end -}}
+{{ end -}}

.chglog/config.yml

@@ -0,0 +1,27 @@
+style: github
+template: CHANGELOG.tpl.md
+info:
+  title: CHANGELOG
+  repository_url: https://github.com/danestves/react-youtube-lite
+options:
+  commits:
+    # filters:
+    #   Type:
+    #     - feat
+    #     - fix
+    #     - perf
+    #     - refactor
+  commit_groups:
+    # title_maps:
+    #   feat: Features
+    #   fix: Bug Fixes
+    #   perf: Performance Improvements
+    #   refactor: Code Refactoring
+  header:
+    pattern: "^(\\w*)\\:\\s(.*)$"
+    pattern_maps:
+      - Type
+      - Subject
+  notes:
+    keywords:
+      - BREAKING CHANGE

README.md

@@ -20,7 +20,7 @@
 
 A responsive react component to render YouTube videos in a lazyload mode to get a high speed load website.
 
-You can see a [demo here](demo)
+You can see a [demo here](https://danestves.github.io/react-youtube-lite)
 
 ## ⏳ Installation
 

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.f1f7bccb3e8f3933841f.bundle.js"></script><script src="vendors~main.f1f7bccb3e8f3933841f.bundle.js"></script><script src="main.f1f7bccb3e8f3933841f.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.fa188c12686e594ebf76.bundle.js"></script><script src="vendors~main.fa188c12686e594ebf76.bundle.js"></script><script src="main.fa188c12686e594ebf76.bundle.js"></script></body></html>

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/styles/styles.css

@@ -1,31 +1,10 @@
 /* Styles for Storybook */
 
-.aspect-ratio-none {
-  padding-bottom: 0;
-}
-
-.aspect-ratio-square {
-  padding-bottom: 100%;
-}
-
-.aspect-ratio-16\/9 {
-  padding-bottom: 56.25%;
-}
-
-.aspect-ratio-4\/3 {
-  padding-bottom: 75%;
-}
-
-.aspect-ratio-21\/9 {
-  padding-bottom: 42.86%;
-}
-
 .embed-responsive {
   position: relative !important;
   display: block !important;
   height: 0 !important;
   padding: 0 !important;
-  padding-bottom: 56.25% !important;
   overflow: hidden !important;
 }
 
@@ -43,6 +22,26 @@
   border: 0;
 }
 
+.aspect-ratio-none {
+  padding-bottom: 0 !important;
+}
+
+.aspect-ratio-square {
+  padding-bottom: 100% !important;
+}
+
+.aspect-ratio-16\/9 {
+  padding-bottom: 56.25% !important;
+}
+
+.aspect-ratio-4\/3 {
+  padding-bottom: 75% !important;
+}
+
+.aspect-ratio-21\/9 {
+  padding-bottom: 42.86% !important;
+}
+
 /* Components Styles */
 
 .ryt-lite {

stories/ReactYouTubeLite.stories.tsx

@@ -25,3 +25,17 @@ export const Default = Template.bind({});
 Default.args = {
   url: 'https://www.youtube.com/watch?v=DVQTGidS1yk',
 };
+
+export const NoCookie = Template.bind({});
+
+NoCookie.args = {
+  url: 'https://www.youtube.com/watch?v=DVQTGidS1yk',
+  noCookie: true,
+};
+
+export const NoAd = Template.bind({});
+
+NoAd.args = {
+  url: 'https://www.youtube.com/watch?v=DVQTGidS1yk',
+  adNetwork: false,
+};