nitro_sg 3.0.1 → 3.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e79466193f526688fdd762167de1c721c516494aa5cbb3186af49029ec5005e6
-  data.tar.gz: 27f33998899cc1da38cbee6bd5929e43a671be6ebfa58df7a99c1675a2cb3db8
+  metadata.gz: 9db9a64a882dffe04b0dd364d646645e23b74855b98f451b05958bcb47d1035d
+  data.tar.gz: e1181e836210837b839cbd495d7be81909ee738777e56c27e38ae2702c5c361b
 SHA512:
-  metadata.gz: ed5421acd09fa6802b6f2fdaac6e6e419017939b4119c0700ba5d83b3d737f7544ea3cf258368a70aa70a8f46c21d1e2c13f43bcc3f7b80e210e1170970fbab7
-  data.tar.gz: 701e7d961454f629f9619f75f186cdce382557be07b5bde56721f70a2557eb0ae9f014ba497818640970ad463dff2a59de040b862ee64bbcbe1f1719c34745d0
+  metadata.gz: 2888c40402d84b7e590c9ccbf1487f2994f74cb106e65956d94d169153ee1f729d637291344ab1657cac4b95a19450f56d14acaf9fb62cb0b9512ad1ef147dec
+  data.tar.gz: c6328274a6f7081c518763581b9baec3367c2301e9f6d8ecfa6f0fb3c82016b2fce13e763fc33b0ac6b34d79885ac5e9a32d5d77ac2b098a9e3685361bc36dfe

data/components/Avatar/Avatar.jsx

@@ -0,0 +1,96 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames/bind'
+
+import {OverlayTrigger, Popover} from 'react-bootstrap'
+
+import styles from './styles.scss'
+
+export type AvatarSize = "smaller" | "small" | "base" | "large" | "larger"
+
+type Props = {
+  alt: string,
+  disableLink: boolean,
+  showPopover: boolean,
+  size: "smaller" | "small" | "base" | "large" | "larger",
+  thumb: string,
+  url: string,
+  onError: () => void,
+}
+
+/**
+ * Avatar renders a user avatar thumbnail image. Upon click, it opens the orinal
+ * image on a new tab.
+ *
+ * @param {string} alt the text to display when hovering over the image.
+ * @param {bool} disableLink whether to disable the anchor link
+ * @param {bool} showPopover whether to show the popover image on hover
+ * @param {string} size the pre-defined avatar size.
+ * @param {string} thumb the avatar thumbnail image URL.
+ * @param {string} url the avatar original image URL.
+ * @returns {ReactElement} JSX.
+ */
+export default class Avatar extends React.Component<Props> {
+  static defaultProps = {
+    alt: 'Avatar Image',
+    size: 'base',
+    showPopover: true,
+  }
+  props: Props
+  render() {
+    const {
+      alt,
+      disableLink,
+      showPopover,
+      size,
+      thumb,
+      url,
+      onError,
+    } = this.props
+    const imgCSS = [
+      "avatar",
+      styles[`avatar-${size}`],
+    ]
+    const popover = (
+      <Popover>
+        <img
+            className={classnames(imgCSS)}
+            src={url}
+        />
+      </Popover>
+    )
+    const image = (
+      <img alt={alt}
+          className={classnames(imgCSS, styles[`avatar-${size}-thumb`])}
+          onError={onError}
+          src={thumb}
+      />
+    )
+    const imgThumb = (
+      <If condition={disableLink}>
+        {image}
+      <Else/>
+        <a href={disableLink ? "javascript:void(0)" : url}
+            style={{maxHeight: 56}}
+            target="_blank"
+        >
+          {image}
+        </a>
+      </If>
+    )
+    if(showPopover) {
+      return (
+        <OverlayTrigger
+            overlay={popover}
+            placement="right"
+            trigger={['hover']}
+        >
+          {imgThumb}
+        </OverlayTrigger>
+      )
+    } else {
+      return imgThumb
+    }
+  }
+}

data/components/Avatar/styles.scss

@@ -0,0 +1,54 @@
+// @import "base-variables/_spacing.sass";
+
+.avatar {
+  &-smaller {
+    width: 90px;
+    height: 90px;
+    object-fit: cover;
+    &-thumb {
+      width: 30px;
+      height: 30px;
+      object-fit: cover;
+    }
+  }
+  &-small {
+    width: 140px;
+    height: 140px;
+    object-fit: cover;
+    &-thumb {
+      width: 60px;
+      height: 60px;
+      object-fit: cover;
+    }
+  }
+  &-base {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    &-thumb {
+      width: 90px;
+      height: 90px;
+      object-fit: cover;
+    }
+  }
+  &-large {
+    width: 270px;
+    height: 270px;
+    object-fit: cover;
+    &-thumb {
+      width: 115px;
+      height: 115px;
+      object-fit: cover;
+    }
+  }
+  &-larger {
+    width: 420px;
+    height: 420px;
+    object-fit: cover;
+    &-thumb {
+      width: 197px;
+      height: 197px;
+      object-fit: cover;
+    }
+  }
+}

data/components/Avatar/styles.scss.flow

@@ -0,0 +1,14 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'avatar-base': string;
+  +'avatar-base-thumb': string;
+  +'avatar-large': string;
+  +'avatar-large-thumb': string;
+  +'avatar-larger': string;
+  +'avatar-larger-thumb': string;
+  +'avatar-small': string;
+  +'avatar-small-thumb': string;
+  +'avatar-smaller': string;
+  +'avatar-smaller-thumb': string;
+|};

data/components/Badge/Badge.jsx

@@ -0,0 +1,40 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import styles from './styles.scss'
+
+type Props = {
+  children?: Array<React.Node>,
+  style: "primary" | "default" | "success" | "danger" | "warning" | "info" | "inverse",
+  className: string,
+}
+
+export default class Badge extends React.Component<Props> {
+  static defaultProps = {
+    children: <span>{`UR Special`}</span>,
+    style: "default",
+    className: "",
+  }
+  props: Props
+  render() {
+    const {
+      children,
+      className,
+      style,
+    } = this.props
+    const css = [
+      className,
+      styles.badge,
+      styles[`badge-${style}`],
+    ]
+    return (
+      <span
+          className={classnames(css)}
+      >
+        {children}
+      </span>
+    )
+  }
+}

data/components/Badge/badges.scss

@@ -0,0 +1,167 @@
+//== badges
+//
+//##
+
+//** Default badge background color
+$badge-default-bg:            $gray-light !default;
+//** Primary badge background color
+$badge-primary-bg:            $brand-primary !default;
+//** Success badge background color
+$badge-success-bg:            $brand-success !default;
+//** Info badge background color
+$badge-info-bg:               $brand-info !default;
+//** Warning badge background color
+$badge-warning-bg:            $brand-warning !default;
+//** Danger badge background color
+$badge-danger-bg:             $brand-danger !default;
+
+//** Default badge text color
+$badge-color:                 #fff !default;
+//** Default text color of a linked badge
+$badge-link-hover-color:      #fff !default;
+
+
+
+
+
+
+// badges
+
+@mixin badge-variant($color) {
+  background-color: $color;
+  @include text-color($color, $more_contrast: true);
+  @if $color == $white {
+    border: 1px solid $border-color;
+  }
+
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}
+
+
+
+
+
+
+
+//
+// badges
+// --------------------------------------------------
+
+
+
+.badge, .pill {
+  display: inline;
+  padding: .15em .8em;
+  font-size: 75%;
+  font-weight: $bold;
+  @include smooth-font;
+  line-height: 1;
+  color: $badge-color;
+  background: $badge-default-bg;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+  border: 1px solid transparent;
+
+  table & {
+    font-size: $font-smaller;
+  }
+
+  // [converter] extracted a& to a.badge
+
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn-xs &,
+  .btn-group-xs > .btn & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // [converter] extracted a& to a.badge
+
+  // Account for badges in navs
+  .list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    color: $white;
+    background-color: $black-opacity-4;
+  }
+
+  .list-group-item > & {
+    float: right;
+  }
+
+  .list-group-item > & + & {
+    margin-right: 5px;
+  }
+
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
+
+
+  // Colors
+  // Contextual variations (linked badges get darker on :hover)
+
+  &-default {
+    @include badge-variant($white);
+  }
+  &-primary {
+    @include badge-variant($power-royal);
+  }
+  &-success {
+    @include badge-variant($power-green);
+  }
+  &-info {
+    @include badge-variant($medium-teal);
+  }
+  &-warning, &-bitter {
+    @include badge-variant($dark-orange);
+  }
+  &-danger {
+    @include badge-variant($power-red);
+  }
+  &-inverse {
+    @include badge-variant($ink);
+  }
+
+}
+
+.pill {
+  border-radius: $border-rad-mega;
+  line-height: 1.6em;
+}
+
+// Add hover effects, but only for links
+a.badge, a.pill {
+  &:hover,
+  &:focus {
+    color: $badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}

data/components/Badge/labels.scss

@@ -0,0 +1,121 @@
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light !default;
+//** Primary label background color
+$label-primary-bg:            $brand-primary !default;
+//** Success label background color
+$label-success-bg:            $brand-success !default;
+//** Info label background color
+$label-info-bg:               $brand-info !default;
+//** Warning label background color
+$label-warning-bg:            $brand-warning !default;
+//** Danger label background color
+$label-danger-bg:             $brand-danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+
+
+
+
+// Labels
+
+@mixin label-variant($color) {
+  background-color: $color;
+  @include text-color($color);
+  @if $color == $white {
+    border: 1px solid $border-color;
+  }
+
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}
+
+
+
+
+
+
+
+//
+// Labels
+// --------------------------------------------------
+
+.label {
+  display: inline;
+  padding: .15em .8em;
+  font-size: 75%;
+  font-weight: $bold;
+  @include smooth-font;
+  line-height: 1;
+  color: $label-color;
+  background: $label-default-bg;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+
+  table & {
+    @include smooth-font-off;
+  }
+
+
+  // Colors
+  // Contextual variations (linked badges get darker on :hover)
+
+  &-default {
+    @include label-variant($white);
+  }
+  &-primary {
+    @include label-variant($power-royal);
+  }
+  &-success {
+    @include label-variant($power-green);
+  }
+  &-info {
+    @include label-variant($medium-teal);
+  }
+  &-warning {
+    @include label-variant($dark-orange);
+  }
+  &-danger {
+    @include label-variant($power-red);
+  }
+  &-inverse {
+    @include label-variant($ink);
+  }
+
+
+
+  // Empty labels collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for labels in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+}
+
+// Add hover effects, but only for links
+a.label {
+  &:hover,
+  &:focus {
+    color: $label-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}