feat(ui-elements,ui-img): add ui-img package for Img Component

refs: INSTUI-2005 TEST PLAN: - ensure ui-elements notates that Img will be removed in 7.0.0 - ensure ui-img shows under Packages in the nav - ensure Img README examples render correctly - ensure new display prop works as expected on the new ui-img component - ensure DeprecatedImg is referencing the ui-elements version and shows under the Components/Deprecated area in the nav - ensure Storybook examples render correctly - ensure Tests pass - NOTE: should now mention the new Img is experimental in the console Change-Id: I1b85d71341c447ee57d84907ea45aade8c55eb39 Reviewed-on: https://gerrit.instructure.com/204823 Tested-by: Jenkins Reviewed-by: Steve Jensen <sejensen@instructure.com> Product-Review: Steve Jensen <sejensen@instructure.com> QA-Review: Daniel Sasaki <dsasaki@instructure.com> Visual-Regression-Test: Pam Hiett <phiett@instructure.com>
instructure · Sep 6, 2019 · c2e4e7d · c2e4e7d
1 parent 9aeeb19
commit c2e4e7d
Show file tree

Hide file tree

Showing 28 changed files with 848 additions and 18 deletions.
diff --git a/packages/__docs__/components.js b/packages/__docs__/components.js
@@ -38,7 +38,7 @@ export {
   Avatar,
   Badge,
   Heading,
-  Img,
+  Img as DeprecatedImg,
   Link,
   Pill,
   Progress,
@@ -66,6 +66,7 @@ export {
   TextInput as DeprecatedTextInput,
   TimeInput
  } from '@instructure/ui-forms'
+export { Img } from '@instructure/ui-img'
 export { NumberInput } from '@instructure/ui-number-input'
 export { DateInput } from '@instructure/ui-date-input'
 export { TextInput } from '@instructure/ui-text-input'

diff --git a/packages/__docs__/package.json b/packages/__docs__/package.json
@@ -47,6 +47,7 @@
     "@instructure/ui-forms": "^6.10.0",
     "@instructure/ui-i18n": "^6.10.0",
     "@instructure/ui-icons": "^6.10.0",
+    "@instructure/ui-img": "^6.10.0",
     "@instructure/ui-layout": "^6.10.0",
     "@instructure/ui-menu": "^6.10.0",
     "@instructure/ui-motion": "^6.10.0",

diff --git a/packages/__docs__/resolve.js b/packages/__docs__/resolve.js
@@ -42,6 +42,7 @@ module.exports = {
     '@instructure/ui-forms$': path.resolve(__dirname, '../ui-forms/src/'),
     '@instructure/ui-form-field$': path.resolve(__dirname, '../ui-form-field/src/'),
     '@instructure/ui-i18n$': path.resolve(__dirname, '../ui-i18n/src/'),
+    '@instructure/ui-img$': path.resolve(__dirname, '../ui-img/src/'),
     '@instructure/ui-layout$': path.resolve(__dirname, '../ui-layout/src/'),
     '@instructure/ui-menu$': path.resolve(__dirname, '../ui-menu/src/'),
     '@instructure/ui-motion$': path.resolve(__dirname, '../ui-motion/src/'),

diff --git a/packages/instui-config/codemod-configs/v7/imports.config.json b/packages/instui-config/codemod-configs/v7/imports.config.json
@@ -6,5 +6,9 @@
   {
     "pattern": "^@instructure/ui-layout/lib/components/View",
     "replace": "@instructure/ui-view/lib/View"
+  },
+  {
+    "pattern": "^@instructure/ui-elements/lib/components/Img",
+    "replace": "@instructure/ui-img/lib/Img"
   }
 ]
diff --git a/packages/instui-config/codemod-configs/v7/propNames.config.json b/packages/instui-config/codemod-configs/v7/propNames.config.json
@@ -66,5 +66,15 @@
       { "old": "focused", "new": "isFocused" },
       { "old": "debug", "new": "withVisualDebug" }
     ]
+  },
+  "Img": {
+    "7.0.0": [
+      { "old": "grayscale", "new": "withGrayscale" },
+      { "old": "blur", "new": "withBlur" },
+      { "old": "inline", "new": "display", "values": [
+        { "old": true, "new": "inline-block" },
+        { "old": false, "new": "block" }
+      ]}
+    ]
   }
 }
diff --git a/packages/ui-billboard/package.json b/packages/ui-billboard/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@babel/runtime": "^7",
     "@instructure/ui-elements": "^6.10.0",
+    "@instructure/ui-img": "^6.10.0",
     "@instructure/ui-react-utils": "^6.10.0",
     "@instructure/ui-themeable": "^6.10.0",
     "@instructure/ui-view": "^6.10.0",

diff --git a/packages/ui-billboard/src/Billboard/__examples__/Billboard.examples.js b/packages/ui-billboard/src/Billboard/__examples__/Billboard.examples.js
@@ -24,7 +24,7 @@
 import React from 'react'
 
 import { IconAnnouncementLine } from '@instructure/ui-icons'
-import { Img } from '@instructure/ui-elements'
+import { Img } from '@instructure/ui-img'
 
 export default {
   sectionProp: 'size',

diff --git a/packages/ui-docs-client/package.json b/packages/ui-docs-client/package.json
@@ -36,6 +36,7 @@
     "@instructure/ui-forms": "^6.10.0",
     "@instructure/ui-i18n": "^6.10.0",
     "@instructure/ui-icons": "^6.10.0",
+    "@instructure/ui-img": "^6.10.0",
     "@instructure/ui-layout": "^6.10.0",
     "@instructure/ui-overlays": "^6.10.0",
     "@instructure/ui-prop-types": "^6.10.0",

diff --git a/packages/ui-docs-client/src/compileMarkdown.js b/packages/ui-docs-client/src/compileMarkdown.js
@@ -27,7 +27,8 @@ import marked from 'marked'
 import grayMatter from 'gray-matter'
 
 import { View } from '@instructure/ui-view'
-import { Heading, Img, Link, Table } from '@instructure/ui-elements'
+import { Heading, Link, Table } from '@instructure/ui-elements'
+import { Img } from '@instructure/ui-img'
 import { CodeEditor } from '@instructure/ui-code-editor'
 
 import { Playground } from './Playground'
@@ -41,7 +42,7 @@ const elements = {
   h2: ({ id, children }) => <Heading id={id} level="h1" as="h2" margin="x-large 0 small 0">{children}</Heading>,
   h3: ({ id, children }) => <Heading id={id} level="h3" margin="large 0 small 0">{children}</Heading>,
   h4: ({ id, children }) => <Heading id={id} level="h4" margin="large 0 small 0">{children}</Heading>,
-  img: ({ src, alt }) => <Img src={src} alt={alt} />,
+  img: ({ src, alt }) => <Img src={src} alt={alt} __dangerouslyIgnoreExperimentalWarnings />,
   table: ({ children }) => <Table>{children}</Table>,
   a: ({ href, title, target, name, children }) => {
     if (href) {

diff --git a/packages/ui-elements/README.md b/packages/ui-elements/README.md
@@ -34,7 +34,7 @@ The `ui-elements` package contains the following:
 - [Avatar](#Avatar)
 - [Badge](#Badge)
 - [Heading](#Heading)
-- [Img](#Img)
+- Img will be removed in version 7.0.0. Use the [Img from ui-img](#Img) instead.
 - [Link](#Link)
 - [List](#List)
 - [MetricsList](#MetricsList)

diff --git a/packages/ui-elements/src/Img/README.md b/packages/ui-elements/src/Img/README.md
@@ -1,14 +1,26 @@
 ---
-describes: Img
+describes: DeprecatedImg
+id: DeprecatedIMG__README
 ---
 
+**DEPRECATED:** Img will be removed from `ui-elements` in version 7.0.0. Use the [Img from ui-img](#Img) instead.
+
+### Important Upgrade Notes
+Codemods are available to automatically update imports to the new package as well as any props that have changed. These changes and other things to note are described below.
+
+- **blur** has been updated to `withBlur`
+- **grayscale** has been updated to `withGrayscale`
+- the boolean **inline** has been updated to `display` with options ('inline-block', 'block)
+
+***
+
 An accessible image component
 
 ```js
 ---
 example: true
 ---
-<Img src={placeholderImage(250, 250)} />
+<DeprecatedImg src={placeholderImage(250, 250)} />
 ```
 
 ### Margin and display
@@ -21,9 +33,9 @@ the image a block-level element.
 example: true
 ---
 <View textAlign="center" as="div">
-  <Img margin="small" alt="A placeholder image" src={placeholderImage(300, 200)} />
-  <Img margin="small" src={placeholderImage(200, 200)} />
-  <Img inline={false} margin="small auto" src={placeholderImage(400, 200)} />
+  <DeprecatedImg margin="small" alt="A placeholder image" src={placeholderImage(300, 200)} />
+  <DeprecatedImg margin="small" src={placeholderImage(200, 200)} />
+  <DeprecatedImg inline={false} margin="small auto" src={placeholderImage(400, 200)} />
 </View>
 ```
 
@@ -37,19 +49,19 @@ in mind that Internet Explorer currently ignores CSS blend mode rules.)
 example: true
 ---
   <View textAlign="center" as="div">
-    <Img
+    <DeprecatedImg
       src={placeholderImage(200, 200)}
       overlay={{color: '#008ee2', opacity: 7}}
       alt="A placeholder image"
       margin="x-small"
     />
-    <Img
+    <DeprecatedImg
       src={placeholderImage(200, 200)}
       overlay={{color: '#008ee2', opacity: 7, blend: 'multiply'}}
       alt="A placeholder image"
       margin="x-small"
     />
-    <Img
+    <DeprecatedImg
       src={placeholderImage(200, 200)}
       overlay={{color: '#008ee2', opacity: 7, blend: 'screen'}}
       alt="A placeholder image"
@@ -68,7 +80,7 @@ containing element, while maintaining the aspect ratio of the source image.
 example: true
 ---
 <div style={{width: '66%', height: '11rem'}}>
-  <Img src={avatarSquare} constrain="cover" />
+  <DeprecatedImg src={avatarSquare} constrain="cover" />
 </div>
 ```
 
@@ -82,7 +94,7 @@ containing element, while maintaining the aspect ratio of the source image.
 example: true
 ---
 <View as="div" background="primary-inverse" width="200px" height="200px" textAlign="center">
-  <Img src={avatarPortrait} constrain="contain" />
+  <DeprecatedImg src={avatarPortrait} constrain="contain" />
 </View>
 ```
 
@@ -96,13 +108,13 @@ are not supported in Internet Explorer.
 example: true
 ---
   <View textAlign="center" as="div">
-    <Img
+    <DeprecatedImg
       grayscale
       src={avatarSquare}
       alt="A placeholder image"
       margin="x-small"
     />
-    <Img
+    <DeprecatedImg
       blur
       src={avatarSquare}
       alt="A placeholder image"

diff --git a/packages/ui-elements/src/Img/index.js b/packages/ui-elements/src/Img/index.js
@@ -36,7 +36,8 @@ import theme from './theme'
 
 /**
 ---
-category: components
+category: components/deprecated
+id: DeprecatedImg
 ---
 **/
 @testable()

diff --git a/packages/ui-img/.eslintignore b/packages/ui-img/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules/**
+/lib/**
+/es/**
diff --git a/packages/ui-img/.gitignore b/packages/ui-img/.gitignore
@@ -0,0 +1,4 @@
+lib/
+.babel-cache/
+es/
+types/
diff --git a/packages/ui-img/.npmignore b/packages/ui-img/.npmignore
@@ -0,0 +1,5 @@
+**/.*
+**/__tests__
+**/__testfixtures__
+*.config.js
+*.conf.js
diff --git a/packages/ui-img/CHANGELOG.md b/packages/ui-img/CHANGELOG.md
@@ -0,0 +1 @@
+See the instructure-ui mono-repo [change log](#CHANGELOG) for past changes.
diff --git a/packages/ui-img/README.md b/packages/ui-img/README.md
@@ -0,0 +1,49 @@
+---
+category: packages
+experimental: true
+---
+
+## ui-img
+
+[![npm][npm]][npm-url]
+[![build-status][build-status]][build-status-url]
+[![MIT License][license-badge]][LICENSE]
+[![Code of Conduct][coc-badge]][coc]
+
+An accessible image component.
+
+### Installation
+
+```sh
+yarn add @instructure/ui-img
+```
+
+### Components
+The `ui-img` package contains the following:
+- [Img](#Img)
+
+### Usage
+```jsx
+---
+example: false
+---
+<Img src={placeholderImage(250, 350)} alt="A Placeholder Image" />
+```
+### Contribute
+See the [contributing guidelines](#contributing) for details.
+
+### License
+
+[MIT](LICENSE)
+
+[npm]: https://img.shields.io/npm/v/@instructure/ui-img.svg
+[npm-url]: https://npmjs.com/package/@instructure/ui-img
+
+[build-status]: https://travis-ci.org/instructure/instructure-ui.svg?branch=master
+[build-status-url]: https://travis-ci.org/instructure/instructure-ui "Travis CI"
+
+[license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
+[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
+
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md
diff --git a/packages/ui-img/babel.config.js b/packages/ui-img/babel.config.js
@@ -0,0 +1,35 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+ module.exports = {
+   presets: [[
+     require('@instructure/ui-babel-preset'),
+     {
+      coverage: Boolean(process.env.COVERAGE),
+      esModules: Boolean(process.env.ES_MODULES),
+      removeConsole: process.env.NODE_ENV === 'production',
+      transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+     }
+   ]]
+ }
diff --git a/packages/ui-img/package.json b/packages/ui-img/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@instructure/ui-img",
+  "version": "6.10.0",
+  "description": "An accessible image component.",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "main": "./lib/index.js",
+  "module": "./es/index.js",
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "ui-test --lint",
+    "lint:fix": "ui-test --lint --fix",
+    "clean": "ui-build --clean",
+    "build": "ui-build",
+    "build:watch": "ui-build --watch",
+    "build:types": "ui-scripts --types"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7",
+    "@instructure/console": "^6.10.0",
+    "@instructure/ui-dom-utils": "^6.10.0",
+    "@instructure/ui-react-utils": "^6.10.0",
+    "@instructure/ui-themeable": "^6.10.0",
+    "@instructure/ui-testable": "^6.10.0",
+    "@instructure/ui-view": "^6.10.0",
+    "classnames": "^2",
+    "prop-types": "^15"
+
+  },
+  "devDependencies": {
+    "@instructure/ui-babel-preset": "^6.10.0",
+    "@instructure/ui-test-utils": "^6.10.0"
+  },
+  "peerDependencies": {
+    "react": "^15 || ^16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}