@carbon/motion 10.12.0 → 10.14.0

package/README.md

@@ -69,12 +69,6 @@ import { easings, motion } from '@carbon/motion';
 motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
 ```
 
-## 📖 API Documentation
-
-If you're looking for `@carbon/motion` API documentation, check out:
-
-- [Sass](./docs/sass.md)
-
 ## 🙌 Contributing
 
 We're always looking for contributors to help us fix bugs, build new features,

package/es/index.js

@@ -4,6 +4,13 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+var fast01 = '70ms';
+var fast02 = '110ms';
+var moderate01 = '150ms';
+var moderate02 = '240ms';
+var slow01 = '400ms';
+var slow02 = '700ms';
+var unstable_tokens = ['fast01', 'fast02', 'moderate01', 'moderate02', 'slow01', 'slow02'];
 var easings = {
   standard: {
     productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
@@ -32,4 +39,4 @@ function motion(name, mode) {
   return easing[mode];
 }
 
-export { easings, motion };
+export { easings, fast01, fast02, moderate01, moderate02, motion, slow01, slow02, unstable_tokens };

package/index.scss

@@ -0,0 +1,56 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+/// Common component easings
+/// @type Map
+/// @access public
+/// @group @carbon/motion
+$easings: (
+  standard: (
+    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
+  ),
+  entrance: (
+    productive: cubic-bezier(0, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0, 0, 0.3, 1),
+  ),
+  exit: (
+    productive: cubic-bezier(0.2, 0, 1, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 1, 1),
+  ),
+);
+
+/// Get the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - Can be `standard`, `entrance`, or `exit`
+/// @param {String} $mode [productive] - Can be `productive` or `expressive`
+/// @param {Map} $easings [$carbon--easings] - Easings map
+/// @access public
+/// @group @carbon/motion
+/// @return {Function} CSS `cubic-bezier()` function
+@function motion($name, $mode: productive, $easings: $easings) {
+  @if map.has-key($easings, $name) {
+    $easing: map.get($easings, $name);
+    @if map.has-key($easing, $mode) {
+      @return map.get($easing, $mode);
+    } @else {
+      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
+    }
+  } @else {
+    @error 'Unable to find an easing named #{$name} in our supported easings.';
+  }
+}
+
+/// Set the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - The name of the easing curve to apply
+/// @param {String} $mode - The mode for the easing curve to use
+/// @access public
+/// @group @carbon/motion
+@mixin motion($name, $mode) {
+  transition-timing-function: motion($name, $mode);
+}

package/lib/index.js

@@ -8,6 +8,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+var fast01 = '70ms';
+var fast02 = '110ms';
+var moderate01 = '150ms';
+var moderate02 = '240ms';
+var slow01 = '400ms';
+var slow02 = '700ms';
+var unstable_tokens = ['fast01', 'fast02', 'moderate01', 'moderate02', 'slow01', 'slow02'];
 var easings = {
   standard: {
     productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
@@ -37,4 +44,11 @@ function motion(name, mode) {
 }
 
 exports.easings = easings;
+exports.fast01 = fast01;
+exports.fast02 = fast02;
+exports.moderate01 = moderate01;
+exports.moderate02 = moderate02;
 exports.motion = motion;
+exports.slow01 = slow01;
+exports.slow02 = slow02;
+exports.unstable_tokens = unstable_tokens;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/motion",
   "description": "Motion helpers for digital and software products using the Carbon Design System",
-  "version": "10.12.0",
+  "version": "10.14.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,11 +25,11 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonMotion && carbon-cli sassdoc \"scss/*.scss\"",
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonMotion",
     "clean": "rimraf es lib umd"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.18.0",
+    "@carbon/cli": "^10.20.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -38,5 +38,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "9e4485a39c8ced35313aa834c4d162a99bc57fb9"
+  "gitHead": "f4f5ac5a33f77b799d9e4533287db8912e40cd1b"
 }

package/scss/motion.scss

@@ -5,6 +5,30 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/// @access public
+/// @group @carbon/motion
+$fast-01: 70ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$fast-02: 110ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$moderate-01: 150ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$moderate-02: 240ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$slow-01: 400ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$slow-02: 700ms !default;
+
 /// Common component easings
 /// @type Map
 /// @access public

package/src/index.js

@@ -5,6 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+export const fast01 = '70ms';
+export const fast02 = '110ms';
+export const moderate01 = '150ms';
+export const moderate02 = '240ms';
+export const slow01 = '400ms';
+export const slow02 = '700ms';
+
+export const unstable_tokens = [
+  'fast01',
+  'fast02',
+  'moderate01',
+  'moderate02',
+  'slow01',
+  'slow02',
+];
+
 export const easings = {
   standard: {
     productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',

package/umd/index.js

@@ -10,6 +10,13 @@
    * This source code is licensed under the Apache-2.0 license found in the
    * LICENSE file in the root directory of this source tree.
    */
+  var fast01 = '70ms';
+  var fast02 = '110ms';
+  var moderate01 = '150ms';
+  var moderate02 = '240ms';
+  var slow01 = '400ms';
+  var slow02 = '700ms';
+  var unstable_tokens = ['fast01', 'fast02', 'moderate01', 'moderate02', 'slow01', 'slow02'];
   var easings = {
     standard: {
       productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
@@ -39,7 +46,14 @@
   }
 
   exports.easings = easings;
+  exports.fast01 = fast01;
+  exports.fast02 = fast02;
+  exports.moderate01 = moderate01;
+  exports.moderate02 = moderate02;
   exports.motion = motion;
+  exports.slow01 = slow01;
+  exports.slow02 = slow02;
+  exports.unstable_tokens = unstable_tokens;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 

package/docs/sass.md

@@ -1,110 +0,0 @@
-# Sass API
-
-| Mark | Description                                                |
-| ---- | ---------------------------------------------------------- |
-| ✅   | Public functions, mixins, placeholders, and variables      |
-| ❌   | Private items - not supported outside package's build      |
-| ⚠️   | Deprecated items - may not be available in future releases |
-
-<!-- toc -->
-
-- [@carbon/motion](#carbonmotion)
-  - [✅carbon--easings [variable]](#carbon--easings-variable)
-  - [✅carbon--motion [function]](#carbon--motion-function)
-  - [✅carbon--motion [mixin]](#carbon--motion-mixin)
-
-<!-- tocstop -->
-
-## @carbon/motion
-
-### ✅carbon--easings [variable]
-
-Common component easings
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--easings: (
-  standard: (
-    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
-  ),
-  entrance: (
-    productive: cubic-bezier(0, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0, 0, 0.3, 1),
-  ),
-  exit: (
-    productive: cubic-bezier(0.2, 0, 1, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 1, 1),
-  ),
-);
-```
-
-</details>
-
-- **Group**: [@carbon/motion](#carbonmotion)
-- **Type**: `Map`
-
-### ✅carbon--motion [function]
-
-Get the transition-timing-function for a given easing and motion mode
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) {
-  @if map-has-key($easings, $name) {
-    $easing: map-get($easings, $name);
-    @if map-has-key($easing, $mode) {
-      @return map-get($easing, $mode);
-    } @else {
-      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
-    }
-  } @else {
-    @error 'Unable to find an easing named #{$name} in our supported easings.';
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name       | Description                              | Type     | Default value      |
-| ---------- | ---------------------------------------- | -------- | ------------------ |
-| `$name`    | Can be `standard`, `entrance`, or `exit` | `String` | —                  |
-| `$mode`    | Can be `productive` or `expressive`      | `String` | `productive`       |
-| `$easings` | Easings map                              | `Map`    | `$carbon--easings` |
-
-- **Group**: [@carbon/motion](#carbonmotion)
-- **Returns**: `Function` CSS `cubic-bezier()` function
-- **Used by**:
-  - [carbon--motion [mixin]](#carbon--motion-mixin)
-
-### ✅carbon--motion [mixin]
-
-Set the transition-timing-function for a given easing and motion mode
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--motion($name, $mode) {
-  transition-timing-function: carbon--motion($name, $mode);
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name    | Description                           | Type     | Default value |
-| ------- | ------------------------------------- | -------- | ------------- |
-| `$name` | The name of the easing curve to apply | `String` | —             |
-| `$mode` | The mode for the easing curve to use  | `String` | —             |
-
-- **Group**: [@carbon/motion](#carbonmotion)
-- **Requires**:
-  - [carbon--motion [function]](#carbon--motion-function)