feat: added responsive display styles(None, Flex, Block, inlineBlock,…

… visuallHidden) to available props

dev/views/Box.vue

@@ -3,7 +3,7 @@
  <fish-tank-text bold>
  Boxed used in laying out a component
  </fish-tank-text>
- <box width="400px" height="300px" display="flex" direction="column" justifyContent="between" color="highlight2">
+ <box width="400px" height="300px" xsDisplay="flex" smDisplay="visuallyHidden" direction="column" justifyContent="between" color="highlight2" >
  <div>
  <fish-tank-text bold>
  Custom Component

src/components/FishTankBox.vue

@@ -62,10 +62,58 @@ const styles = {
  xsDisplayBlock: "xsDisplayBlock",
  xsDisplayInlineBlock: "xsDisplayInlineBlock",
  xsDisplayVisuallyHidden: "xsDisplayVisuallyHidden",
+
+ smDisplayNone: "smDisplayNone",
+ smDisplayFlex: "smDisplayFlex",
+ smDisplayBlock: "smDisplayBlock",
+ smDisplayInlineBlock: "smDisplayInlineBlock",
+ smDisplayVisuallyHidden: "smDisplayVisuallyHidden",
+
+ mdDisplayNone: "mdDisplayNone",
+ mdDisplayFlex: "mdDisplayFlex",
+ mdDisplayBlock: "mdDisplayBlock",
+ mdDisplayInlineBlock: "mdDisplayInlineBlock",
+ mdDisplayVisuallyHidden: "mdDisplayVisuallyHidden",
+
+ lgDisplayNone: "lgDisplayNone",
+ lgDisplayFlex: "lgDisplayFlex",
+ lgDisplayBlock: "lgDisplayBlock",
+ lgDisplayInlineBlock: "lgDisplayInlineBlock",
+ lgDisplayVisuallyHidden: "lgDisplayVisuallyHidden",
+
+ xlDisplayNone: "xlDisplayNone",
+ xlDisplayFlex: "xlDisplayFlex",
+ xlDisplayBlock: "xlDisplayBlock",
+ xlDisplayInlineBlock: "xlDisplayInlineBlock",
+ xlDisplayVisuallyHidden: "xlDisplayVisuallyHidden",
+}
+
+const direction = {
  xsDirectionRow: "xsDirectionRow",
  xsDirectionColumn: "xsDirectionColumn",
  xsDirectionRowReverse: "xsDirectionRowReverse",
- xsDirectionColumnReverse: "xsDirectionColumnReverse"
+ xsDirectionColumnReverse: "xsDirectionColumnReverse",
+
+ smDirectionRow: "smDirectionRow",
+ smDirectionColumn: "smDirectionColumn",
+ smDirectionRowReverse: "smDirectionRowReverse",
+ smDirectionColumnReverse: "smDirectionColumnReverse",
+
+ mdDirectionRow: "mdDirectionRow",
+ mdDirectionColumn: "mdDirectionColumn",
+ mdDirectionRowReverse: "mdDirectionRowReverse",
+ mdDirectionColumnReverse: "mdDirectionColumnReverse",
+
+ lgDirectionRow: "lgDirectionRow",
+ lgDirectionColumn: "lgDirectionColumn",
+ lgDirectionRowReverse: "lgDirectionRowReverse",
+ lgDirectionColumnReverse: "lgDirectionColumnReverse",
+
+ xlDirectionRow: "xlDirectionRow",
+ xlDirectionColumn: "xlDirectionColumn",
+ xlDirectionRowReverse: "xlDirectionRowReverse",
+ xlDirectionColumnReverse: "xlDirectionColumnReverse",
+
 }
 
 const layout = {
@@ -223,6 +271,41 @@ const props: any = {
  inlineBlock: styles.xsDisplayInlineBlock,
  visuallyHidden: styles.xsDisplayVisuallyHidden
  }),
+ xsDisplay: mapping({
+ none: styles.xsDisplayNone,
+ flex: styles.xsDisplayFlex,
+ block: styles.xsDisplayBlock,
+ inlineBlock: styles.xsDisplayInlineBlock,
+ visuallyHidden: styles.xsDisplayVisuallyHidden
+ }),
+ smDisplay: mapping({
+ none: styles.smDisplayNone,
+ flex: styles.smDisplayFlex,
+ block: styles.smDisplayBlock,
+ inlineBlock: styles.smDisplayInlineBlock,
+ visuallyHidden: styles.smDisplayVisuallyHidden
+ }),
+ mdDisplay: mapping({
+ none: styles.mdDisplayNone,
+ flex: styles.mdDisplayFlex,
+ block: styles.mdDisplayBlock,
+ inlineBlock: styles.mdDisplayInlineBlock,
+ visuallyHidden: styles.mdDisplayVisuallyHidden
+ }),
+ lgDisplay: mapping({
+ none: styles.lgDisplayNone,
+ flex: styles.lgDisplayFlex,
+ block: styles.lgDisplayBlock,
+ inlineBlock: styles.lgDisplayInlineBlock,
+ visuallyHidden: styles.lgDisplayVisuallyHidden
+ }),
+ xlDisplay: mapping({
+ none: styles.xlDisplayNone,
+ flex: styles.xlDisplayFlex,
+ block: styles.xlDisplayBlock,
+ inlineBlock: styles.xlDisplayInlineBlock,
+ visuallyHidden: styles.xlDisplayVisuallyHidden
+ }),
  alignItems: mapping({
  start: layout.itemsStart,
  end: layout.itemsEnd,
@@ -243,11 +326,47 @@ const props: any = {
  around: layout.justifyAround
  }),
  direction: mapping({
- row: styles.xsDirectionRow,
- column: styles.xsDirectionColumn,
- rowReverse: styles.xsDirectionRowReverse,
- columnReverse: styles.xsDirectionColumnReverse
+ row: direction.xsDirectionRow,
+ column: direction.xsDirectionColumn,
+ rowReverse: direction.xsDirectionRowReverse,
+ columnReverse: direction.xsDirectionColumnReverse
+ }),
+
+ xsDirection: mapping({
+ row: direction.xsDirectionRow,
+ column: direction.xsDirectionColumn,
+ rowReverse: direction.xsDirectionRowReverse,
+ columnReverse: direction.xsDirectionColumnReverse
+ }),
+
+ smDirection: mapping({
+ row: direction.smDirectionRow,
+ column: direction.smDirectionColumn,
+ rowReverse: direction.smDirectionRowReverse,
+ columnReverse: direction.smDirectionColumnReverse
  }),
+
+ mdDirection: mapping({
+ row: direction.mdDirectionRow,
+ column: direction.mdDirectionColumn,
+ rowReverse: direction.mdDirectionRowReverse,
+ columnReverse: direction.mdDirectionColumnReverse
+ }),
+
+ lgDirection: mapping({
+ row: direction.lgDirectionRow,
+ column: direction.lgDirectionColumn,
+ rowReverse: direction.lgDirectionRowReverse,
+ columnReverse: direction.lgDirectionColumnReverse
+ }),
+
+ xlDirection: mapping({
+ row: direction.xlDirectionRow,
+ column: direction.xlDirectionColumn,
+ rowReverse: direction.xlDirectionRowReverse,
+ columnReverse: direction.xlDirectionColumnReverse
+ }),
+
  position: mapping({
  absolute: layout.absolute,
  relative: layout.relative,
@@ -314,6 +433,56 @@ export default Vue.extend({
  },
  description:'Box display property',
  },
+ // // @Prop()
+ xsDisplay: {
+ type:String,
+ default:"block",
+ required:false,
+ validator: function(value: DisplayType){
+ return ["none", "flex", "block", "inlineBlock", "visuallyHidden"].indexOf(value) !== -1
+ },
+ description:'Box display property',
+ },
+ // // @Prop()
+ smDisplay: {
+ type:String,
+ default:"block",
+ required:false,
+ validator: function(value: DisplayType){
+ return ["none", "flex", "block", "inlineBlock", "visuallyHidden"].indexOf(value) !== -1
+ },
+ description:'Box display property',
+ },
+ // // @Prop()
+ mdDisplay: {
+ type:String,
+ default:"block",
+ required:false,
+ validator: function(value: DisplayType){
+ return ["none", "flex", "block", "inlineBlock", "visuallyHidden"].indexOf(value) !== -1
+ },
+ description:'Box display property',
+ },
+ // // @Prop()
+ lgDisplay: {
+ type:String,
+ default:"block",
+ required:false,
+ validator: function(value: DisplayType){
+ return ["none", "flex", "block", "inlineBlock", "visuallyHidden"].indexOf(value) !== -1
+ },
+ description:'Box display property',
+ },
+ // // @Prop()
+ xlDisplay: {
+ type:String,
+ default:"block",
+ required:false,
+ validator: function(value: DisplayType){
+ return ["none", "flex", "block", "inlineBlock", "visuallyHidden"].indexOf(value) !== -1
+ },
+ description:'Box display property',
+ },
  // DisplayType,
  // // @Prop()
  direction: {

src/components/FishTankSelect.vue

@@ -22,8 +22,8 @@
  :aria-labelledby="`${id}-label ${id}-button`"
  :aria-activedescendant="`${id}-option-${focusedItem}`"
  @keydown.tab="opened ? opened = false: null"
- @keydown.esc="opened ? opened = false: null"
  :id="`${id}-button`"
+ @keydown.esc="opened ? opened = false: null"
  @click="opened=!opened">
  <box 
  display="flex" 
@@ -35,32 +35,31 @@
  {{ displayLabel }}
  </ftext>
  <caretdown 
- class="caret"
- v-if="!opened"/>
+ v-if="!opened"
+ class="caret"/>
  <caretdown
- class="caret"
- v-if="opened "/>
+ v-if="opened "
+ class="caret"/>
  </box>
  </button>
 
  <div 
  v-if="opened" 
  :class="['items', {'a11y-within': focusedItem > -1}]"
  tabindex="-1" 
- role="listbox"
  :id="`${id}-listbox`"
- :aria-labelledby="`${id}-label`"
- >
+ role="listbox"
+ :aria-labelledby="`${id}-label`">
  <ftext
  v-for="(item, index) in items" 
  :id="`${id}-option-${index}`"
  :key="index"
  :class="['list-item', 'list-item-text', {'focused': focusedItem===index}]"
  :aria-selected="focusedItem===index"
  role="option" 
+ :size="small ? 'baseSm': 'baseMd'"
  @click.native="$emit('change', item.value); opened = false"
- @blur="closeDropdown(items, index)"
- :size="small ? 'baseSm': 'baseMd'">
+ @blur="closeDropdown(items, index)">
  {{ item.label }}
  </ftext>
  </div>

src/styles/box/box-style.scss

@@ -38,7 +38,7 @@
 
 .xsDisplayVisuallyHidden {
  border: 0;
- clip: rect(0 0 0 0);
+ opacity:0;
  height: 1px;
  margin: -1px;
  padding: 0;
@@ -85,7 +85,7 @@
 
  .smDisplayVisuallyHidden {
  border: 0;
- clip: rect(0 0 0 0);
+ opacity:0;
  height: 1px;
  margin: -1px;
  padding: 0;
@@ -132,7 +132,7 @@
 
  .mdDisplayVisuallyHidden {
  border: 0;
- clip: rect(0 0 0 0);
+ opacity:0;
  height: 1px;
  margin: -1px;
  padding: 0;
@@ -180,7 +180,7 @@
 
  .lgDisplayVisuallyHidden {
  border: 0;
- clip: rect(0 0 0 0);
+ opacity:0;
  height: 1px;
  margin: -1px;
  padding: 0;
@@ -227,7 +227,7 @@
 
  .xlDisplayVisuallyHidden {
  border: 0;
- clip: rect(0 0 0 0);
+ opacity:0;
  height: 1px;
  margin: -1px;
  padding: 0;