Merge pull request #52 from silinternational/develop

Release 2.3.0

CHANGELOG.md

@@ -6,6 +6,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.3.0](https://github.com/silinternational/ui-components/releases/tag/v2.3.0) - 2021-07-21
+### Added
+- borderRadius, padding and bordered props to Badge
+- bgColor to StaticChip
+
+### Changed
+- README - updated component index
+
 ## [2.2.1](https://github.com/silinternational/ui-components/releases/tag/v2.2.1) - 2021-07-15
 ### Fixed
 - Excessive warnings from sass. Reverted to 1.32.12

README.md

@@ -96,7 +96,7 @@ TopAppBar (dense, fixed, navIconBreakpointClass, bgColorIsVariant) [
 	actions.js, title.js
 ]
 
-Badge (color)
+Badge (color, borderRadius, padding, bordered)
 
 CustomCard (
 	src, alt, title, icon, disabled, buttons, footerText
@@ -108,7 +108,7 @@ Page (loading, title, layout, center, noProgress) [
 	Page.Subheader
 ]
 
-StaticChip
+StaticChip (bgColor)
 
 Tour (steps, data)
 

components/Badge.svelte

@@ -1,17 +1,34 @@
 <script>
   export let color = 'gray'
+  export let borderRadius = '50%'
+  export let padding = '.2em'
+  export let bordered = false
+
+  let transparentColor = ''
+
+  $: if (/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
+    color.length == 7 && (transparentColor = color + '12')
+
+    color.length == 4 && (transparentColor = '#' + color.slice(1, 2).repeat(2) + color.slice(2, 3).repeat(2) + color.slice(3, 4).repeat(2) + '12')
+  }
 </script>
 
 <style>
   span {
     min-width: 1.15em;
     min-height: 1.15em;
-    padding: .2em;
+    padding: var(--padding);
+    background-color: var(--theme-color);
+    border-radius: var(--border-radius);
   }
 
-  .background {
-    background-color: var(--theme-color);
+  .bordered {
+    background: linear-gradient(0deg, var(--bg-color), var(--bg-color)), #FFF;
+    border: 1px solid var(--theme-color);
+    color: black;
   }
 </style>
 
-<span class="mdc-typography dib text-align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>
+<span class="mdc-typography dib text-align-center white fs-16 {$$props.class}" class:bordered style="--theme-color: {color}; --bg-color: {transparentColor}; --border-radius: {borderRadius}; --padding: {padding}" >
+  <slot />
+</span>

components/StaticChip.svelte

@@ -1,16 +1,20 @@
+<script>
+  export let bgColor = '#e5e5e5'
+</script>
+
 <style>
-  .chip{
-    background-color: #e5e5e5;
+  .chip {
+    background-color: var(--theme-color);
     height: 36px;
   }
 
-  .chip-content{
+  .chip-content {
     padding-left: 12px;
     padding-right: 12px;
   }
 </style>
 
-<div class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}">
+<div class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}" style="--theme-color: {bgColor}">
   <div class="chip-content flex align-items-center">
     <slot></slot>
   </div>