Skip to content

Commit

Permalink
feat: Added badgesV2 which supports indeterminate and number badges
Browse files Browse the repository at this point in the history
  • Loading branch information
Villalobos committed Jun 12, 2019
1 parent 814bc88 commit b1d2927
Show file tree
Hide file tree
Showing 4 changed files with 301 additions and 71 deletions.
32 changes: 30 additions & 2 deletions dev/views/Badges.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,47 @@
<template>
<div>
<badge text-color="btaxBlue">Badge</badge>
<br />
<br />
<br />
<br />
<div class = "center">
<badgeV2 :indeterminate="true" theme="bgov" text-shade="light">
<template v-slot:badge_content>10000</template>
<template v-slot:content>
<img src = '..\..\assets\ft-button-outline-dark.png' />
</template>
</badgeV2>
</div>


</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { FishTankBadge } from '@/index'
import { FishTankBadgeV2 } from '@/index'
export default Vue.extend({
components:{
badge:FishTankBadge
badge:FishTankBadge,
badgeV2:FishTankBadgeV2
}
})
</script>
<style lang="scss">
.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
img {
height:75px;
width:250px;
}
:root {
// --badge-background-color:#000
}
Expand Down
136 changes: 67 additions & 69 deletions dev/views/ContainerAndColumns.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,37 @@
<column display="block" as="nav" :column="12">
<heading level="1">Page Layout Example using FishTankContainer and FishTank Column</heading>
<ftext>The container and column components, when used together define and provide Fish Tank Layout.</ftext>
<ftext>Container provides centered positioning, responsive breakpoints from 752px and larger, and a fluid max width breakpoint below 752px. </ftext>
<ftext>Container provides centered positioning, responsive breakpoints from 752px and larger, and a fluid max width breakpoint below 752px.</ftext>
<ftext>The container has an optional property to make it fluid through all breakpoint for full width layouts.</ftext>
<br>
<ftext>Column provides a responsive, flexbox grid with Fish Tank defined gutters. Column can be set across xs, sm, md, lg, and xl breakpoint, <a target="_blank" href="https://fishtank.bna.com/space">defined by Fish Tank UX guidelines.</a></ftext>
<ftext>
Column provides a responsive, flexbox grid with Fish Tank defined gutters. Column can be set across xs, sm, md, lg, and xl breakpoint,
<a
target="_blank"
href="https://fishtank.bna.com/space"
>defined by Fish Tank UX guidelines.</a>
</ftext>
</column>
</container>
<br>
<br>
<container>
<column :xs-column="12" as="nav">
Navigation
</column>
<column :xs-column="12" as="nav">Navigation</column>
</container>
<container>
<column>
<box flex="grow">
<card>
Card
</card>
<card>Card</card>
</box>
</column>
<column>
<box flex="grow">
<card>
Card
</card>
<card>Card</card>
</box>
</column>
<column>
<box flex="grow">
<card>
Card
</card>
<card>Card</card>
</box>
</column>
</container>
Expand All @@ -46,9 +44,13 @@
<container>
<column :xs-column="12" :md-column="8">
<box flex="grow">
<card>
Stacked Card
</card>
<!----><badgeV2 :indeterminate="false" theme="notifcattion-1" text-shade="light">
<template v-slot:badge_content>10000</template>
<template v-slot:content><!---->
<card>Stacked Card</card>
<!----></template>
</badgeV2><!---->
<card>Stacked Card</card>
<card>
<div v-if="selected">{{selected.label}}</div>
<lookup
Expand All @@ -57,32 +59,29 @@
orientation="ltr"
url="/some_autocomplete_endpoint"
:width="400"
v-model="selected" />
</card>
<card>
Stacked Card
</card>
<card>
Stacked Card
v-model="selected"
/>
</card>
<card>Stacked Card</card>
<card>Stacked Card</card>
</box>
</column>
<column :xs-column="12" :md-column="4">
<box flex="grow">
<card>
Stacked Card
</card>
<card>Stacked Card</card>
</box>
</column>
</container>

<container>
<column :xs-column="12">
<heading level="2">Container and Column layout examples, including gutter and padding highlights, with Box component with flex-grow properties.</heading>
<heading
level="2"
>Container and Column layout examples, including gutter and padding highlights, with Box component with flex-grow properties.</heading>
<ftext>The container and column components, when used together define and provide Fish Tank Layout.</ftext>
</column>
</container>
<br/>
<br>
<container class="container">
<column class="column">
<box flex="grow" color="grayLighter" :padding="4">Column</box>
Expand All @@ -94,7 +93,7 @@
<box flex="grow" color="grayLighter" :padding="4">Column</box>
</column>
</container>
<br/>
<br>
<container class="container">
<column class="column">
<box flex="grow" color="grayLighter" :padding="4">Column</box>
Expand Down Expand Up @@ -134,26 +133,24 @@
</column>
</container>

<br/>
<br>
<container class="container">
<column class="column" :column="8">
<box color="grayDark" :padding="4">
<ftext color="white">
Column, box without flex grow
</ftext>
<box color="grayDark" :padding="4">
<ftext color="white">Column, box without flex grow</ftext>
</box>
</column>
<column class="column" :column="4">
<box flex="grow" color="grayLighter" :padding="4">Column</box>
</column>
</container>
<br/>
<br>
<container fluid>
<column class="column" :xs-column="7">
<box flex="grow" color="grayLighter" :padding="4">Column</box>
<!-- <box flex="grow">
<card>Hello World</card>
</box> -->
</box>-->
</column>
<column class="column" :xs-column="3">
<box display="flex" flex="grow" color="grayLighter" :padding="4">
Expand All @@ -168,39 +165,41 @@
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import {
import Vue from "vue";
import {
FishTankContainer,
FishTankColumn,
FishTankBadgeV2,
FishTankBox,
FishTankCard,
FishTankText,
FishTankHeading,
FishTankLookup
} from "@/index"
const moxios = require('moxios')
} from "@/index";
const moxios = require("moxios");
export default Vue.extend({
components:{
container:FishTankContainer,
column:FishTankColumn,
box:FishTankBox,
card:FishTankCard,
ftext:FishTankText,
heading:FishTankHeading,
lookup:FishTankLookup,
components: {
container: FishTankContainer,
column: FishTankColumn,
box: FishTankBox,
badgeV2: FishTankBadgeV2,
card: FishTankCard,
ftext: FishTankText,
heading: FishTankHeading,
lookup: FishTankLookup
},
data(){
data() {
return {
selected: null,
}
selected: null
};
},
created () {
moxios.install()
created() {
moxios.install();
moxios.stubRequest(/\/some_autocomplete_endpoint\?query=.+$/, {
status: 200,
response: {
"data": {
"items": [
data: {
items: [
{ label: "Some item 1", value: "Some item 1" },
{ label: "Some item 2", value: "Some item 2" },
{ label: "Some item 3", value: "Some item 3" },
Expand All @@ -209,7 +208,7 @@ export default Vue.extend({
]
}
}
})
});
// Mock empty request
// moxios.stubRequest(/\/some_autocomplete_endpoint\?query=$/, {
Expand All @@ -221,19 +220,18 @@ export default Vue.extend({
// }
// })
}
})
});
</script>
<style scoped>
.container {
background-color: aqua;
}
.column {
background-color: blanchedalmond;
}
.cardClass {
width:100%;
}
.container {
background-color: aqua;
}
.column {
background-color: blanchedalmond;
}
.cardClass {
width: 100%;
}
</style>


Loading

0 comments on commit b1d2927

Please sign in to comment.