biings-ds - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

docs/_coverpage.md

@@ -19,2 +19,2 @@ <!-- _coverpage.md -->
 <!-- background color -->
-![color](#F7F6FA)
+![color](#f9f8fc)

docs/avatar.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Avatar</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Avatar</h1>
 <p class="subtitle is-5">
@@ -22,2 +22,3 @@ <span class="has-text-weight-semibold">Avatar</span> is used to display a picture, typically next to a person's name.
 <h2 class="title is-4">Sizes</h2>
+
 Use classes `is-small`, `is-large` and `is-huge` to change the size of an avatar.
@@ -24,0 +25,0 @@ <hr class="is-small">

docs/box.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Box</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Box</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Box</span> is a visual motif used to create groupings of content related to a same entity or subject as well as focus through depth.

docs/button.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Button</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Button</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Buttons</span> allow users to take actions, and make choices.

docs/color.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Color</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Color</h1>
 <p class="subtitle is-5"><span class="has-text-weight-semibold">Color</span> brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful ways in order to create patterns and visual cues.</p>
@@ -3,0 +3,0 @@

docs/columns.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Columns</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Columns</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Columns</span> are used for creating page layouts by structuring your content horizontally. Biings DS uses a responsive fluid system that automatically scales up to 12 columns.

docs/dropdown.md

@@ -82,8 +82,6 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Dropdown</h1>
 Any element or component can trigger a dropdown when placed inside the `.dropdown-trigger` div.
-<br><br>
-Use the class `.is-active` if you want to control the dropdown with javascript (otherwise use `.is-hoverable`).
 
 <hr class="is-small">
 
-<div class="box is-well is-relaxed is-marginless">
+<div class="box is-well is-relaxed">
 
@@ -103,6 +101,6 @@ <div class="dropdown is-hoverable is-iconless is-active">
     </div>
-
+    <hr>
 </div>
 
-<br><br>
+?> Use the class `.is-active` if you want to control the dropdown with javascript.<br>For CSS only, use `.is-hoverable`.
 
@@ -117,15 +115,17 @@ <hr class="is-visible is-large">
 
-<div class="dropdown is-active is-small">
-    <div class="dropdown-trigger">
-        <div class="button is-small is-secondary">Choose a value</div>
-    </div>
-    <div class="dropdown-menu" id="dropdown-menu" role="menu">
-        <div class="dropdown-content">
-            <div class="dropdown-item ">
-                <input class="input is-small is-paddingless has-background-white" type="text" placeholder="Search the list">
+<div class="box is-bordered is-large is-marginless">
+    <div class="dropdown is-hoverable is-small">
+        <div class="dropdown-trigger">
+            <div class="button is-small is-secondary">Choose a value</div>
+        </div>
+        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+            <div class="dropdown-content">
+                <div class="dropdown-item ">
+                    <input class="input is-small is-paddingless has-background-white" type="text" placeholder="Search the list">
+                </div>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item">Show</a>
+                <a class="dropdown-item is-active">results</a>
+                <a class="dropdown-item">here</a>
             </div>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item is-large">Show</a>
-            <a class="dropdown-item is-active">results</a>
-            <a class="dropdown-item">here</a>
         </div>
@@ -135,5 +135,22 @@ </div>
 
+    <div class="dropdown">
+        <div class="dropdown-trigger">
+            <div class="button is-secondary">Choose a value</div>
+        </div>
+        <div class="dropdown-menu">
+            <div class="dropdown-content">
+                <div class="dropdown-item ">
+                    <input class="input is-small is-paddingless has-background-white" 
+                           type="text"
+                           placeholder="Search the list">
+                </div>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item">..</a>
+                <a class="dropdown-item">..</a>
+                <a class="dropdown-item">..</a>
+            </div>
+        </div>
+    </div>
+
 <hr class="is-large">
-<br>
-<hr class="is-large">
 
@@ -140,0 +157,0 @@ <div class="box is-bordered">

docs/ethic.md

@@ -8,13 +8,14 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Ethics</h1>
 
-<h2 class="title is-3">Sustainable HR</h2>
-<div class="subitle is-6 has-text-grey">To be written..</div>
+<h2 class="title is-3">Sustainable HR</h2><h3 class="subtitle is-5 has-text-weight-light">Sustainable human ressources maintain the same level of corporate culture, knowledge and creativity within an organisation, and over time.</h3>
+<!-- Favor good work-atmosphere rather than adopting a coercive control of absences. Always Manage, never judge -->
+
 <hr>
 
-<h2 class="title is-3">Facts over surveys</h2>
-<div class="subitle is-6 has-text-grey">To be written..</div>
+<h2 class="title is-3">Facts over Surveys</h2>
+<div class="subitle is-6 has-text-grey">*Under preparation..*</div>
 
 <hr>
 
-<h2 class="title is-3">Work-atmosphere over coercive management</h2>
-<div class="subitle is-6 has-text-grey">Favor good work-atmosphere rather than adopting a coercive control of absences.</div>
+<h2 class="title is-3">Privacy by Design</h2>
+<div class="subitle is-6 has-text-grey">*Under preparation..*</div>
 
@@ -21,0 +22,0 @@ <hr>

docs/icons.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1>
 <p class="subtitle is-5">
@@ -10,33 +10,33 @@ <span class="has-text-weight-semibold">Iconography</span> uses symbols to represent an object or an action visually. They should be used sparingly to provide clarity and reduce cognitive load.
 
-Icons should <u>not be less than 25 pixels</u> (width and height). Use, or make, an equivalent Glyph when displayed below 25px.
+Icons should **not be less than 24 pixels** (width and height).<br>Use, or make, an equivalent Glyph when displayed below 24px.
 
-<hr class="is-small">
+<br><br>
 
-<div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey-dark">
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-minus"></use></svg></div>circle-minus</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg></div>circle-plus</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#chevron_down"></use></svg></div>chevron_down</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#person"></use></svg></div>person</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#persons"></use></svg></div>persons</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search"></use></svg></div>search</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search-list"></use></svg></div>search-list</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div>
+<div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey">
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-minus"></use></svg></div>circle-minus</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg></div>circle-plus</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#chevron_down"></use></svg></div>chevron_down</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#person"></use></svg></div>person</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#persons"></use></svg></div>persons</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search"></use></svg></div>search</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search-list"></use></svg></div>search-list</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div>
 </div>
@@ -48,11 +48,11 @@
 
-Glyphs should <u>not exceed 25 pixels</u> (width and height) and should always be a filled icon. Fine stroke weights should also disappear.
+Glyphs should **not exceed 24 pixels** (width and height) and should always be a filled icon.<br>Fine stroke weights should also disappear.
 
-<hr class="is-small">
+<br><br>
 
-<div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey-dark">
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-medium"><svg class="icon has-fill-black-ter"><use xlink:href="media/bds-icons.min.svg#biings"></use></svg></div>biings</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-medium"><svg class="icon has-fill-black-ter"><use xlink:href="media/bds-icons.min.svg#key_return"></use></svg></div>key_return</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-medium"><svg class="icon has-fill-black-ter"><use xlink:href="media/bds-icons.min.svg#key_up_down"></use></svg></div>key_up_down</div>
-    <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-medium"><svg class="icon has-fill-black-ter"><use xlink:href="media/bds-icons.min.svg#segment"></use></svg></div>segment</div>
-</div>
+<div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey">
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings"></use></svg></div>biings</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#key_return"></use></svg></div>key_return</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#key_up_down"></use></svg></div>key_up_down</div>
+    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#segment"></use></svg></div>segment</div>
+</div>

docs/inputs.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Input</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Input</h1>
 <p class="subtitle is-5"><span class="has-text-weight-semibold">Input fields</span> enable users to provide information.</p>
@@ -3,0 +3,0 @@

docs/menu.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Menu</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Menu</h1>
 <p class="subtitle is-5"><span class="has-text-weight-semibold">Menus</span> present a list of links and should be used for content navigation.</p>
@@ -3,0 +3,0 @@

docs/modal.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Modal</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Modal</h1>
 <p class="subtitle is-5"><span class="has-text-weight-semibold">Modals</span> communicate information via a overlayed window and allow the user to maintain the context of a particular task. Modals strongly interrupts user workflow and should be used sparingly.</span></p>
@@ -3,0 +3,0 @@

docs/spacer.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Spacer</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Spacer</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Spacer</span> – aka Divider – is a visual helper for grouping related content together. It is used to define thematic changes in a layout.

docs/start.md

@@ -55,2 +55,2 @@ <h1 class="title is-2">Biings <span class="has-text-weight-light">Design System</span></h1>
     <div class="subtitle is-6">Onboarding for designers and developers who are using BDS for the first time or want to contribute. Check out the <a href="#/readme">**Readme**</a> to get started.</div>
-</div>
+</div>

docs/voice.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Voice & Tone</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Voice & Tone</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Voice</span> expresses our personality and stays consistent across all of our content. <span class="has-text-weight-semibold">Tone</span> expresses the mood or feeling of the voice, it should change based on the situation. Find below the way we present all titles, headers, copy and buttons.

package.json

 {
   "name": "biings-ds",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Biings Design System",
@@ -5,0 +5,0 @@ "main": "build/bds.css",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

153

increased by0.66%

Worsened metrics

Total package byte prevSize

10606615

decreased by-0.37%

Lines of code

5867

decreased by-9.33%

No dependency changes