Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev

* 'dev' of github.com:soyjavi/react-toolbox: Made general mixins properties depend on $unit value Small fixes All props are now commented Moved modules to separate files. A lot of JSDoc comments added, even more left Typings for the project Document CardTitle's cardTitle theme
2016-07-24 13:17:21 +02:00 · 2016-07-24 13:17:21 +02:00 · e8bc36d63a
parent b226fcd258 0ffdedddaa
commit e8bc36d63a
3 changed files with 137 additions and 78 deletions
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@ -7,7 +7,7 @@

@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 11.2rem;
+  font-size: $unit * 11.2rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
@ -19,7 +19,7 @@

@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 5.6rem;
+  font-size: $unit * 5.6rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
@ -31,9 +31,9 @@

@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 4.5rem;
+  font-size: $unit * 4.5;
  font-weight: 400;
-  line-height: 4.8rem;
+  line-height: $unit * 4.8;

  @if $color-contrast {
    opacity: .54;
@ -42,9 +42,9 @@

@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 3.4rem;
+  font-size: $unit * 3.4;
  font-weight: 400;
-  line-height: 4rem;
+  line-height: $unit * 4;

  @if $color-contrast {
    opacity: .54;
@ -53,9 +53,9 @@

@mixin typo-headline($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
  font-weight: 400;
-  line-height: 3.2rem;
+  line-height: $unit * 3.2;
  -moz-osx-font-smoothing: grayscale;

  @if $color-contrast {
@ -65,7 +65,7 @@

@mixin typo-title($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 2rem;
+  font-size: $unit * 2;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
@ -77,9 +77,9 @@

@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
  font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
  letter-spacing: .04em;

  @if $color-contrast {
@ -89,9 +89,9 @@

@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
  font-weight: 400;
-  line-height: 2.8rem;
+  line-height: $unit * 2.8;
  letter-spacing: .04em;

  @if $color-contrast {
@ -101,8 +101,8 @@

@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
-  line-height: 2.4rem;
+  font-size: $unit * 1.4;
+  line-height: $unit * 2.4;
  letter-spacing: 0;

  @if $use-preferred {
@ -118,9 +118,9 @@

@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
  font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
  letter-spacing: 0;

  @if $color-contrast {
@ -130,7 +130,7 @@

@mixin typo-caption($color-contrast: false, $use-preferred: false) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.2rem;
+  font-size: $unit * 1.2;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
@ -143,7 +143,7 @@
@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
  position: relative;
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
@ -167,7 +167,7 @@

@mixin typo-menu($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
@ -179,7 +179,7 @@

@mixin typo-button($color-contrast: false, $use-preferred: true) {
  @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
--- a/components/card/readme.md
+++ b/components/card/readme.md
@ -73,10 +73,11 @@ A versatile title block that can be used in various places on the card, includin

 | Name     | Description|
 |:---------|:-----------|
+| `cardTitle` | Class used for the root element.|
 | `large` | Added to the root element when the card has avatar.|
 | `small` | Added to the root element when the card has no avatar.|
-| `subtitle` | Added to the root element for subtitle.|
-| `title` | Used in for the root element.|
+| `subtitle` | Added to the subtitle element.|
+| `title` | Added to the title element.|

 ## CardMedia

--- a/index.d.ts
+++ b/index.d.ts
@ -1,57 +1,115 @@
-// Type definitions for react-toolbox 0.16.2
-// Project: http://react-toolbox.com/
-// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker), @ixrock (Roman Karlov)
-/*  CHANGES
- * 26/05/2015 Export components by names (not only defaults), added missing components exports
- * 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
- * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
- * 02/03/2016:
- * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
- * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
- * Hopefully fixed the default exports where applicable
- * 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
- * 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
- * NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
- * 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format.
- Unfortunately importing them directly in that manner doesn't seem to work
- i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
- ... Any ideas welcome!
- * 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
- * 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
- * 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
- */
-/*
- MISSING COMPONENTS (Contributions welcome)
- * Ripple HOC
- */
+// Type definitions for react-toolbox
+// Project: https://github.com/react-toolbox/react-toolbox
+// Definitions by: Per Bergqwist <https://github.com/normano64>

-export { default as ActivableRendererFactory } from 'react-toolbox/lib/hoc/ActivableRenderer';
+import { AppBar } from "react-toolbox/lib/app_bar";
+import { Autocomplete } from "react-toolbox/lib/autocomplete";
+import { Avatar } from "react-toolbox/lib/avatar";
+import { Button, IconButton } from "react-toolbox/lib/button";
+import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
+import { Checkbox } from "react-toolbox/lib/checkbox";
+import { Chip } from "react-toolbox/lib/chip";
+import { DatePicker } from "react-toolbox/lib/date_picker";
+import { Dialog } from "react-toolbox/lib/dialog";
+import { Drawer } from "react-toolbox/lib/drawer";
+import { Dropdown } from "react-toolbox/lib/dropdown";
+import { FontIcon } from "react-toolbox/lib/font_icon";
+import { Input } from "react-toolbox/lib/input";
+import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
+import { Link } from "react-toolbox/lib/link";
+import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
+import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
+import { Navigation } from "react-toolbox/lib/navigation";
+import { ProgressBar } from "react-toolbox/lib/progress_bar";
+import { RadioGroup, RadioButton } from "react-toolbox/lib/radio";
+import { Ripple } from "react-toolbox/lib/ripple";
+import { Slider } from "react-toolbox/lib/slider";
+import { Snackbar } from "react-toolbox/lib/snackbar";
+import { Switch } from "react-toolbox/lib/switch";
+import { Tabs, Tab } from "react-toolbox/lib/tabs";
+import { TimePicker } from "react-toolbox/lib/time_picker";
+import { Tooltip } from "react-toolbox/lib/tooltip";

-export { AppBar } from 'react-toolbox/lib/app_bar'
-export { Autocomplete } from 'react-toolbox/lib/autocomplete'
-export { Avatar } from 'react-toolbox/lib/avatar'
-export { Button, IconButton } from 'react-toolbox/lib/button'
-export { Card, CardTitle, CardMedia, CardText, CardActions } from 'react-toolbox/lib/card'
-export { Checkbox } from 'react-toolbox/lib/checkbox'
-export { Chip } from 'react-toolbox/lib/chip'
-export { DatePicker } from 'react-toolbox/lib/date_picker'
-export { Dialog } from 'react-toolbox/lib/dialog'
-export { Drawer } from 'react-toolbox/lib/drawer'
-export { Dropdown } from 'react-toolbox/lib/dropdown'
-export { FontIcon } from 'react-toolbox/lib/font_icon'
-export { Input } from 'react-toolbox/lib/input'
-export { Layout, Panel, NavDrawer, Sidebar } from 'react-toolbox/lib/layout'
-export { Link } from 'react-toolbox/lib/link'
-export { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from 'react-toolbox/lib/list'
-export { Menu, MenuDivider, MenuItem, IconMenu } from 'react-toolbox/lib/menu'
-export { Navigation } from 'react-toolbox/lib/navigation'
-export { Overlay } from 'react-toolbox/lib/overlay'
-export { ProgressBar } from 'react-toolbox/lib/progress_bar'
-export { RadioButton, RadioGroup } from 'react-toolbox/lib/radio'
-export { Ripple } from 'react-toolbox/lib/ripple'
-export { Slider } from 'react-toolbox/lib/slider'
-export { Snackbar } from 'react-toolbox/lib/snackbar'
-export { Switch } from 'react-toolbox/lib/switch'
-export { Tabs, Tab } from 'react-toolbox/lib/tabs'
-export { TimePicker } from 'react-toolbox/lib/time_picker'
-export { default as Tooltip } from 'react-toolbox/lib/tooltip'
+import { AppBarTheme } from "react-toolbox/lib/app_bar";
+import { AutocompleteTheme } from "react-toolbox/lib/autocomplete";
+import { AvatarTheme } from "react-toolbox/lib/avatar";
+import { ButtonTheme, IconButtonTheme } from "react-toolbox/lib/button";
+import { CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme } from "react-toolbox/lib/card";
+import { CheckboxTheme } from "react-toolbox/lib/checkbox";
+import { ChipTheme } from "react-toolbox/lib/chip";
+import { DatePickerTheme } from "react-toolbox/lib/date_picker";
+import { DialogTheme } from "react-toolbox/lib/dialog";
+import { DrawerTheme } from "react-toolbox/lib/drawer";
+import { DropdownTheme } from "react-toolbox/lib/dropdown";
+import { InputTheme } from "react-toolbox/lib/input";
+import { LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme } from "react-toolbox/lib/layout";
+import { LinkTheme } from "react-toolbox/lib/link";
+import { ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme } from "react-toolbox/lib/list";
+import { MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme } from "react-toolbox/lib/menu";
+import { NavigationTheme } from "react-toolbox/lib/navigation";
+import { ProgressBarTheme } from "react-toolbox/lib/progress_bar";
+import { RadioButtonTheme } from "react-toolbox/lib/radio";
+import { RippleTheme } from "react-toolbox/lib/ripple";
+import { SliderTheme } from "react-toolbox/lib/slider";
+import { SnackbarTheme } from "react-toolbox/lib/snackbar";
+import { SwitchTheme } from "react-toolbox/lib/switch";
+import { TabsTheme, TabTheme } from "react-toolbox/lib/tabs";
+import { TimePickerTheme } from "react-toolbox/lib/time_picker";
+import { TooltipTheme } from "react-toolbox/lib/tooltip";
+
+export {
+  AppBar,
+  Autocomplete,
+  Avatar,
+  Button, IconButton,
+  Card, CardTitle, CardMedia, CardText, CardActions,
+  Checkbox,
+  Chip,
+  DatePicker,
+  Dialog,
+  Drawer,
+  Dropdown,
+  FontIcon,
+  Input,
+  Layout, Panel, NavDrawer, Sidebar,
+  Link,
+  List, ListCheckbox, ListItem, ListDivider, ListSubHeader,
+  Menu, MenuDivider, MenuItem, IconMenu,
+  Navigation,
+  ProgressBar,
+  RadioGroup, RadioButton,
+  Ripple,
+  Slider,
+  Snackbar,
+  Switch,
+  Tabs, Tab,
+  TimePicker,
+  Tooltip,
+
+  AppBarTheme,
+  AutocompleteTheme,
+  AvatarTheme,
+  ButtonTheme, IconButtonTheme,
+  CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme,
+  CheckboxTheme,
+  ChipTheme,
+  DatePickerTheme,
+  DialogTheme,
+  DrawerTheme,
+  DropdownTheme,
+  InputTheme,
+  LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme,
+  LinkTheme,
+  ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme,
+  MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme,
+  NavigationTheme,
+  ProgressBarTheme,
+  RadioButtonTheme,
+  RippleTheme,
+  SliderTheme,
+  SnackbarTheme,
+  SwitchTheme,
+  TabsTheme, TabTheme,
+  TimePickerTheme,
+  TooltipTheme
+}