nitro_sg 3.0.1 → 3.0.2

data/components/Tab/tab.scss

@@ -0,0 +1,25 @@
+@import "base-variables/_colors.scss";
+@import "base-variables/_spacing.sass";
+@import "base-variables/_typography.sass";
+
+@mixin tab($orient: "horizontal") {
+  color: $gray-4;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: $bold;
+  padding: $space-base $space-larger;
+  &-active {
+    border-bottom: 6px solid $power-royal;
+    color: $ink-dark;
+  }
+  &:link, &:visited {
+    color: $gray-4;
+  }
+  &:hover {
+    color: $ink-dark;
+  }
+}
+
+.tab {
+  @include tab;
+}

data/components/Tab/tab.scss.flow

@@ -0,0 +1,6 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'tab': string;
+  +'tab-active': string;
+|};

data/components/TabList/TabList.jsx

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+import { TabType } from '../Tab/Tab'
+
+type Props = {
+  className?: string,
+  children: Array<TabType>,
+}
+
+import styles from './tabList.scss'
+
+export default class TabList extends Component<Props> {
+  props: Props
+
+  render() {
+    const {
+      className,
+      children,
+    } = this.props
+
+    const css = [
+      className,
+      styles[`tabList`],
+    ]
+
+    return (
+      <div className={classnames(css)}>
+        {children}
+      </div>
+    )
+  }
+}

data/components/TabList/tabList.scss

@@ -0,0 +1,5 @@
+@import "base-variables/_colors.scss";
+
+.tabList {
+  border-bottom: 1px solid $gray-2;
+}

data/components/TabList/tabList.scss.flow

@@ -0,0 +1,5 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'tabList': string;
+|};

data/components/Text/Text.jsx

@@ -0,0 +1,53 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import styles from './styles.scss'
+
+
+type Props = {
+  children?: Array<React.Node>,
+  color: "sky-lighter" | "sky-light" | "sky" | "sky-dark" | "ink-lightest" | "ink-lighter" | "ink-light"| "ink" | "ink-dark",
+  size: "base" | "large" | "larger" | "largest" | "small" | "smaller" | "smallest",
+  bold: boolean,
+  italic: boolean,
+  className: string,
+}
+
+export default class Text extends React.Component<Props> {
+  static defaultProps = {
+    children: <span/>,
+    size: "base",
+    color: "ink",
+    bold: false,
+    italic: false,
+    className: "",
+  }
+  props: Props
+  render() {
+    const {
+      children,
+      className,
+      bold,
+      italic,
+      size,
+      color,
+    } = this.props
+    const css = [
+      className,
+      styles.badge,
+      styles[`text-${color}`],
+      styles[`text-${size}`],
+      bold ? styles["font-weight-bold"] : null,
+      italic ? styles["font-italic"] : null,
+    ]
+    return (
+      <span
+          className={classnames(css)}
+      >
+        {children}
+      </span>
+    )
+  }
+}

data/components/Text/styles.scss

@@ -0,0 +1,3 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+@import "text.scss";

data/components/Text/styles.scss.flow

@@ -0,0 +1,123 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'font-italic': string;
+  +'font-weight-bold': string;
+  +'font-weight-normal': string;
+  +'hidden-xxs': string;
+  +'text-black': string;
+  +'text-black-opacity-1': string;
+  +'text-black-opacity-2': string;
+  +'text-black-opacity-3': string;
+  +'text-black-opacity-4': string;
+  +'text-black-opacity-5': string;
+  +'text-black-opacity-6': string;
+  +'text-black-opacity-7': string;
+  +'text-black-opacity-8': string;
+  +'text-black-opacity-9': string;
+  +'text-danger': string;
+  +'text-gray-1': string;
+  +'text-gray-2': string;
+  +'text-gray-3': string;
+  +'text-gray-4': string;
+  +'text-gray-5': string;
+  +'text-gray-6': string;
+  +'text-gray-7': string;
+  +'text-gray-8': string;
+  +'text-gray-9': string;
+  +'text-gray-dark': string;
+  +'text-info': string;
+  +'text-ink': string;
+  +'text-ink-dark': string;
+  +'text-ink-light': string;
+  +'text-ink-lighter': string;
+  +'text-ink-lightest': string;
+  +'text-jumbo': string;
+  +'text-large': string;
+  +'text-larger': string;
+  +'text-largest': string;
+  +'text-muted': string;
+  +'text-normal': string;
+  +'text-p-blue-opacity-1': string;
+  +'text-p-blue-opacity-2': string;
+  +'text-p-blue-opacity-3': string;
+  +'text-p-blue-opacity-4': string;
+  +'text-p-blue-opacity-5': string;
+  +'text-p-blue-opacity-6': string;
+  +'text-p-blue-opacity-7': string;
+  +'text-p-blue-opacity-8': string;
+  +'text-p-blue-opacity-9': string;
+  +'text-p-gold-opacity-1': string;
+  +'text-p-gold-opacity-2': string;
+  +'text-p-gold-opacity-3': string;
+  +'text-p-gold-opacity-4': string;
+  +'text-p-gold-opacity-5': string;
+  +'text-p-gold-opacity-6': string;
+  +'text-p-gold-opacity-7': string;
+  +'text-p-gold-opacity-8': string;
+  +'text-p-gold-opacity-9': string;
+  +'text-p-green-opacity-1': string;
+  +'text-p-green-opacity-2': string;
+  +'text-p-green-opacity-3': string;
+  +'text-p-green-opacity-4': string;
+  +'text-p-green-opacity-5': string;
+  +'text-p-green-opacity-6': string;
+  +'text-p-green-opacity-7': string;
+  +'text-p-green-opacity-8': string;
+  +'text-p-green-opacity-9': string;
+  +'text-p-navy-opacity-1': string;
+  +'text-p-navy-opacity-2': string;
+  +'text-p-navy-opacity-3': string;
+  +'text-p-navy-opacity-4': string;
+  +'text-p-navy-opacity-5': string;
+  +'text-p-navy-opacity-6': string;
+  +'text-p-navy-opacity-7': string;
+  +'text-p-navy-opacity-8': string;
+  +'text-p-navy-opacity-9': string;
+  +'text-p-red-opacity-1': string;
+  +'text-p-red-opacity-2': string;
+  +'text-p-red-opacity-3': string;
+  +'text-p-red-opacity-4': string;
+  +'text-p-red-opacity-5': string;
+  +'text-p-red-opacity-6': string;
+  +'text-p-red-opacity-7': string;
+  +'text-p-red-opacity-8': string;
+  +'text-p-red-opacity-9': string;
+  +'text-p-royal-opacity-1': string;
+  +'text-p-royal-opacity-2': string;
+  +'text-p-royal-opacity-3': string;
+  +'text-p-royal-opacity-4': string;
+  +'text-p-royal-opacity-5': string;
+  +'text-p-royal-opacity-6': string;
+  +'text-p-royal-opacity-7': string;
+  +'text-p-royal-opacity-8': string;
+  +'text-p-royal-opacity-9': string;
+  +'text-power-blue': string;
+  +'text-power-gold': string;
+  +'text-power-green': string;
+  +'text-power-navy': string;
+  +'text-power-navy-darker': string;
+  +'text-power-red': string;
+  +'text-power-royal': string;
+  +'text-primary': string;
+  +'text-sky': string;
+  +'text-sky-dark': string;
+  +'text-sky-light': string;
+  +'text-sky-lighter': string;
+  +'text-small': string;
+  +'text-smaller': string;
+  +'text-smallest': string;
+  +'text-success': string;
+  +'text-warning': string;
+  +'text-white': string;
+  +'text-white-opacity-1': string;
+  +'text-white-opacity-2': string;
+  +'text-white-opacity-3': string;
+  +'text-white-opacity-4': string;
+  +'text-white-opacity-5': string;
+  +'text-white-opacity-6': string;
+  +'text-white-opacity-7': string;
+  +'text-white-opacity-8': string;
+  +'text-white-opacity-9': string;
+  +'visible-xxs': string;
+|};

data/components/Text/text.scss

@@ -0,0 +1,35 @@
+@mixin text-color-classes($colors-list) {
+  @each $name, $color in $colors-list {
+    @include text-emphasis-variant(".text-#{$name}", $color);
+  }
+}
+
+@include text-color-classes($power-colors);
+@include text-color-classes($gray-colors);
+@include text-color-classes($opacity-colors);
+@include text-color-classes($interface-colors);
+
+// TEXT COLOR IN COLORS
+@include text-emphasis-variant('.text-muted', $gray-6);
+@include text-emphasis-variant('.text-primary', $brand-primary);
+@include text-emphasis-variant('.text-success', $brand-success);
+@include text-emphasis-variant('.text-info', $brand-info);
+@include text-emphasis-variant('.text-warning', $power-gold);
+@include text-emphasis-variant('.text-danger', $brand-danger);
+@include text-emphasis-variant('.text-gray-dark', $gray-8);
+
+
+// Text Size
+.text-jumbo { font-size: $font-jumbo }
+.text-largest { font-size: $font-largest }
+.text-larger { font-size: $font-larger }
+.text-large { font-size: $font-large }
+.text-normal {font-size: $font-base }
+.text-small { font-size: $font-small }
+.text-smaller { font-size: $font-smaller }
+.text-smallest { font-size: $font-smallest }
+
+// text decoration
+.font-weight-normal { font-weight: $regular; }
+.font-weight-bold   { font-weight: $bold; }
+.font-italic        { font-style: italic; }

data/components/TextInput/TextInput.jsx

@@ -0,0 +1,95 @@
+/* @flow */
+
+import React from 'react'
+import ControlLabel from 'react-bootstrap/lib/ControlLabel'
+import FormGroup from 'react-bootstrap/lib/FormGroup'
+import FormControl from 'react-bootstrap/lib/FormControl'
+
+const isRequired = (boolean) => {
+  if (boolean) {
+    return "*"
+  }
+}
+
+/**
+ * TextInput renders a bootstrapped text input field.
+ *
+ * @param {string} className the CSS class name(s) for the outermost returned div.
+ * @param {string} controlId the CSS id name for the <input> tag.
+ * @param {string} label the text to use as a label.
+ * @param {string} name the text to use as a name.
+ * @param {func} onChange the function to be called when the React onChange event is triggered.
+ * @param {string} placeholder the text to use as a placeholder.
+ * @param {string} value the text to use as a value.
+ * @param {string} type the type of input (i.e. 'text', 'number'). Defaults to 'text'.
+ * @param {string} validationState react-bootstrap validation state of the input, either 'success', 'warning' or 'error'.
+ * @param {boolean} requiredField indicates of the input is a required field.
+ * @returns {ReactElement} JSX.
+ */
+
+type Props = {
+  className: string,
+  controlId: string,
+  inputClassName: string,
+  inputStyle: object,
+  label: string,
+  labelClassName: string,
+  name: string,
+  onChange: () => mixed,
+  placeholder: string,
+  requiredField: boolean,
+  type: string,
+  validationState: string,
+  value: string,
+}
+
+export default class TextInput extends React.Component<Props> {
+  static defaultProps = {
+    className: "",
+    inputClassName: "",
+    inputStyle: {},
+    labelClassName: "",
+    type: "text",
+    validationState: null,
+  }
+  props: Props
+  render() {
+    const {
+      label,
+      placeholder,
+      className,
+      labelClassName,
+      inputClassName,
+      inputStyle,
+      controlId,
+      value,
+      onChange,
+      name,
+      requiredField,
+      type,
+      validationState,
+    } = this.props
+
+    return (
+      <FormGroup
+          className={className}
+          controlId={controlId}
+          validationState={validationState}
+      >
+        <ControlLabel className={labelClassName}>
+          {label} <span>{isRequired(requiredField)}</span>
+        </ControlLabel>
+        {' '}
+        <FormControl
+            className={inputClassName}
+            defaultValue={value}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            style={inputStyle}
+            type={type}
+        />
+      </FormGroup>
+    )
+  }
+}

data/components/TextInput/form-control.scss

@@ -0,0 +1,96 @@
+// $input-border = $form-border-color
+// $form-border-color;
+
+
+// Form control focus state
+@mixin form-control-focus($color: $input-border-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    outline: 0;
+    border-color: $power-navy;
+    box-shadow: inset 0 0 0 0.1rem $power-navy, inset 0 0.1rem 0.2rem 0 rgba($power-navy, $opacity-2);
+  }
+}
+
+@mixin style-placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+}
+
+
+
+
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $padding-base-vertical ($padding-base-horizontal/1.5);
+  font-size: $font-small;
+  font-weight: $bold;
+  line-height: $line-height-base;
+  color: $gray-9;
+  background-color: $input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid $form-border-color;
+  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  box-shadow: none;
+  transition-property: border-color, box-shadow, color, background-color;
+	transition-duration: .24s;
+	transition-timing-function: $bezier;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  @include form-control-focus;
+
+  @include style-placeholder {
+    color: $gray-5;
+		font-style: italic;
+		font-weight: $regular;
+		@include smooth-font;
+	}
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: $input-bg-disabled;
+    color: $sky-dark;
+    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: $cursor-disabled;
+  }
+  &.clear {
+
+
+    // height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+    padding: $padding-base-vertical ($padding-base-horizontal/1.5);
+    // font-size: $font-small;
+    // font-weight: $bold;
+    // line-height: $line-height-base;
+    // color: $gray-9;
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+
+  }
+}