Add documentation (#251)

* init documentation * fix dependencies * import only used components * Improve docs distribution create folder/files structure * Add npm script for starting docs website * Add columns basic documentation * documentation (#266) * documentation * Update card.md * Update tiles.md * Update box.md * Update card.md * Update content.md * Update media.md * new * Update gap.md * Update nesting.md * Update options.md * Update responsiveness.md * Update card.md * Update dropdown.md * Update menu.md * Update message.md * Update navbar.md * Update pagination.md * Update panel.md * Update tabs.md * Update box.md * Update button.md * Update icon.md * Update notification.md * Update progress-bar.md * Update tag.md * Update container.md * Update level.md * new * new * new * Tidy up code * Update column size documentation * Fix small typo in column size doc * Update column responsiveness doc * Update column nesting doc * Accidentally removed Section import in column nesting doc * Add missing code example in column responsiveness doc * Update column gap doc * Update column options doc * Update column basics doc * Update container doc * Update level doc Co-authored-by: Kenneth <[email protected]> * Update bulma to 3.4.0 * Add pagination first last pages (documentation) (#284) * docs: add doc for pagination first/last btns, size, position and rounded * chore: code consistency Co-authored-by: John Benavides <[email protected]> Co-authored-by: Quadri Sheriff <[email protected]> Co-authored-by: Yuen Ying Kit <[email protected]>
couds · Nov 4, 2020 · 2f69cba · 2f69cba
1 parent 82cbe24
commit 2f69cba
Show file tree

Hide file tree

Showing 71 changed files with 20,963 additions and 0 deletions.
diff --git a/documentation/.gitignore b/documentation/.gitignore
@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/documentation/README.md b/documentation/README.md
@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/documentation/blog/2020-05-14-welcome.md b/documentation/blog/2020-05-14-welcome.md
@@ -0,0 +1,11 @@
+---
+id: welcome
+title: Welcome
+author: Couds
+author_title: Fullstack Developer
+author_url: https://github.com/couds
+author_image_url: https://avatars3.githubusercontent.com/u/2903371?s=460&u=285638137d6cb21a5f7ffd0041210ecda2210804&v=4
+tags: [Documentation, React, Bulma.io, CSS]
+---
+
+Welcome, This documentation is a Work in Progress
diff --git a/documentation/docs/components/columns/basics.md b/documentation/docs/components/columns/basics.md
@@ -0,0 +1,63 @@
+---
+id: basics
+title: Basics
+sidebar_label: Basics
+---
+
+import Columns from 'react-bulma-components/lib/components/columns'
+import Notification from 'react-bulma-components/lib/components/notification'
+
+## **Import**
+
+```js
+import Columns from 'react-bulma-components/lib/components/columns';
+```
+
+<br />
+
+You can build columns very easily:
+
+1. Add a `<Columns />` component
+2. Put as many `<Column />` as you want inside it.
+
+<br />
+
+All `<Column />`s will be equally sized.
+
+<Columns>
+  <Columns.Column>
+    <Notification color="primary">First column</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Second column</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Third column</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Fourth column</Notification>
+  </Columns.Column>
+</Columns>
+
+```jsx
+<Columns>
+  <Columns.Column>
+    <Notification color="primary">First column</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Second column</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Third column</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Fourth column</Notification>
+  </Columns.Column>
+</Columns>
+```
+
+---
+
+## Official documentation
+
+https://bulma.io/documentation/columns/basics
diff --git a/documentation/docs/components/columns/gap.md b/documentation/docs/components/columns/gap.md
@@ -0,0 +1,123 @@
+---
+id: gap
+title: Gap
+sidebar_label: Gap
+---
+
+import Columns from 'react-bulma-components/lib/components/columns'
+import Hero from 'react-bulma-components/lib/components/hero'
+import Notification from 'react-bulma-components/lib/components/notification'
+import Section from 'react-bulma-components/lib/components/section';
+
+You can customize the gaps between columns
+
+## Default gap
+
+By default, columns have gaps equal to the value of `$column-gap`, which is `0.75rem` by default.
+
+Note that it applies to **individual** column, so the gap between two adjacent columns will be twice of `$column-gap`.
+
+<Columns>
+  <Columns.Column>
+    <Notification color="primary">Default gap</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Default gap</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">Default gap</Notification>
+  </Columns.Column>
+</Columns>
+
+## Gapless
+
+Don't want any gaps between columns? Simply use the `gapless` prop and set it to true.
+
+<Columns gapless>
+  <Columns.Column>
+    <Notification color="primary">No gap</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">No gap</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">No gap</Notification>
+  </Columns.Column>
+</Columns>
+
+```jsx
+<Columns jsx>
+  <Columns.Column>
+    <Notification color="primary">No gap</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">No gap</Notification>
+  </Columns.Column>
+  <Columns.Column>
+    <Notification color="primary">No gap</Notification>
+  </Columns.Column>
+</Columns>
+```
+
+## Breakpoint-based gaps
+
+You can specify different gap values for different viewport sizes, from 0 to 9. 0 means there shouldn't be any gaps,
+and 3 is the default gap value.
+
+:::tip
+Try resizing the window or use your browser's developer tools to resize the viewport and see what happens!
+:::
+
+<br />
+
+<Columns
+  variableGap={{
+    mobile: 1,
+    tablet: 0,
+    desktop: 3,
+    widescreen: 8,
+    fullhd: 2,
+  }}
+>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+</Columns>
+
+```jsx
+<Columns
+  variableGap={{
+    mobile: 1,
+    tablet: 0,
+    desktop: 3,
+    widescreen: 8,
+    fullhd: 2,
+  }}
+>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+  <Columns.Column size={3}>
+    <Notification color="primary">Size 1</Notification>
+  </Columns.Column>
+</Columns>
+```
+
+## Official documentation
+
+https://bulma.io/documentation/columns/gap
diff --git a/documentation/docs/components/columns/nesting.md b/documentation/docs/components/columns/nesting.md
@@ -0,0 +1,90 @@
+---
+id: nesting
+title: Nesting
+sidebar_label: Nesting
+---
+
+import Columns from 'react-bulma-components/lib/components/columns'
+import Notification from 'react-bulma-components/lib/components/notification'
+import Section from 'react-bulma-components/lib/components/section';
+
+You can nest `Columns` inside any `Columns.Column` and there's no limit to
+the level of nesting.
+
+In this example, the numbers represent the nesting level the `Columns.Column` is in.
+
+<Section>
+  <Columns>
+    <Columns.Column>
+      <Notification color="primary">0</Notification>
+      <Columns>
+        <Columns.Column>
+          <Notification color="info">1</Notification>
+          <Columns>
+            <Columns.Column size="half">
+              <Notification color="danger">2</Notification>
+            </Columns.Column>
+            <Columns.Column size="half">
+              <Notification color="danger">2</Notification>
+            </Columns.Column>
+          </Columns>
+        </Columns.Column>
+        <Columns.Column>
+          <Notification color="info">1</Notification>
+        </Columns.Column>
+      </Columns>
+    </Columns.Column>
+    <Columns.Column>
+      <Notification color="primary">0</Notification>
+      <Columns>
+        <Columns.Column size="two-thirds">
+          <Notification color="info">1</Notification>
+        </Columns.Column>
+        <Columns.Column size="one-third">
+          <Notification color="info">1</Notification>
+        </Columns.Column>
+        <Columns.Column>
+          <Notification color="info">1</Notification>
+        </Columns.Column>
+      </Columns>
+    </Columns.Column>
+  </Columns>
+</Section>
+
+```jsx
+<Section>
+  <Columns>
+    <Columns.Column>
+      <Notification color="success">First column</Notification>
+      <Columns>
+        <Columns.Column>
+          <Notification color="info">First Nested Column</Notification>
+        </Columns.Column>
+        <Columns.Column>
+          <Notification color="warning">Second Nested Column</Notification>
+        </Columns.Column>
+      </Columns>
+    </Columns.Column>
+    <Columns.Column>
+      <Notification color="success">Second column</Notification>
+      <Columns>
+        <Columns.Column size="half">
+          <Notification color="info">First Nested Column</Notification>
+        </Columns.Column>
+        <Columns.Column>
+          <Notification color="warning">Second Nested Column</Notification>
+        </Columns.Column>
+        <Columns.Column>
+          <Notification color="warning">Thirld Nested Column</Notification>
+        </Columns.Column>
+      </Columns>
+    </Columns.Column>
+  </Columns>
+</Section>
+```
+
+---
+
+## Official documentation
+
+https://bulma.io/documentation/columns/nesting