@atlaskit/object 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/object
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.3
+
+### Patch Changes
+
+- [`e1c9823b0b420`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1c9823b0b420) - -
+  Added new metadata export
+  - Changed name of 'issue' object to 'work-item'
+- Updated dependencies
+
 ## 0.2.2
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -0,0 +1,41 @@
+---
+order: 1
+---
+
+import ObjectDefault from '../../examples/constellation/object-default.tsx';
+import ObjectSizes from '../../examples/constellation/object-sizes.tsx';
+import ObjectLabelling from '../../examples/constellation/object-labelling.tsx';
+
+## Default
+
+The default object has a medium size (16px) and a default label based on the object type.
+
+<Example
+	Component={ObjectDefault}
+	packageName="@atlaskit/object"
+	hiddenSections={['iconography']}
+/>
+
+## Size
+
+Objects can be set to two different sizes using the `size` prop: `small` (12px) or `medium` (16px).
+This defaults to `medium`.
+
+If you need a larger size, use an [Object Tile](/components/object/object-tile/examples) instead –
+which is available in 20px to 48px sizes.
+
+<Example Component={ObjectSizes} packageName="@atlaskit/object" hiddenSections={['iconography']} />
+
+## Label
+
+Use the `label` prop to provide accessible labelling for objects. Use descriptive labels for
+meaningful objects, or empty strings for decorative objects.
+
+If not provided, the label will default to a human-readable version of the object type (for example,
+"Task" for a task object).
+
+<Example
+	Component={ObjectLabelling}
+	packageName="@atlaskit/object"
+	hiddenSections={['iconography']}
+/>

package/constellation/index/object-explorer.mdx

@@ -0,0 +1,13 @@
+---
+order: 0
+---
+
+import { ObjectExplorer } from '@af/design-system-docs-ui';
+
+## Object explorer
+
+Make a selection to view usage and import details.
+
+For usage examples, see the [Object component documentation](/components/object/).
+
+<ObjectExplorer />

package/constellation/index/props.mdx

@@ -0,0 +1,11 @@
+---
+order: 2
+props:
+  packageName: '@atlaskit/object/types'
+  exports:
+    - ObjectProps
+---
+
+## Props
+
+<TSMorphProps packageName="@atlaskit/object/types" exportName="ObjectProps" />

package/constellation/index/usage.mdx

@@ -0,0 +1,102 @@
+---
+order: 3
+---
+
+import SectionMessage from '@atlaskit/section-message';
+import Image from '@atlaskit/image';
+
+import objectSizeDark from './images/object-size-dark.png';
+import objectSizeLight from './images/object-size-light.png';
+import objectColorsDo from './images/do-donts/object-colors-do.png';
+import objectColorsDont from './images/do-donts/object-colors-dont.png';
+import objectLargerDo from './images/do-donts/object-larger-do.png';
+import objectLargerDont from './images/do-donts/object-larger-dont.png';
+
+## Usage
+
+<SectionMessage appearance="warning">
+	Objects are only offered in small (12px) and medium (16px). For larger representations, use{' '}
+	<a href="/components/object/object-tile/examples">Object tile</a>.
+</SectionMessage>
+
+An object is a representation of an Atlassian content type. They can be concepts such as a page in
+Confluence, a work item in Jira or a pull request in Bitbucket.
+
+Unlike the standard <a href="/components/icon/examples">Icon</a> component, an object is an icon
+that has an assigned color to help people identify the content type faster. This reduces cognitive
+load for people across apps and platforms.
+
+## Size
+
+There are 2 size options for object, representing the width and height in pixels: 12px and 16px. For
+larger sizes and increased legibility and visual prominence, use
+[Object tile](/components/object/object-tile/examples).
+
+<Image src={objectSizeLight} srcDark={objectSizeDark} alt="Object size" />
+
+## Best practices
+
+### Larger than 16px - use an Object tile
+
+Do not scale objects. For use cases that require a larger object, use
+[Object tile](/components/object/object-tile/examples).
+
+<DoDont
+	type="do"
+	image={{
+		url: objectLargerDo,
+		alt: '',
+	}}
+>
+	Use an object at either 12px or 16px.
+</DoDont>
+<DoDont
+	type="dont"
+	image={{
+		url: objectLargerDont,
+		alt: '',
+	}}
+>
+	Scale objects beyond 16px.
+</DoDont>
+
+### Don’t change object colors
+
+Objects are assigned specific colors. For consistency across our apps, don’t change the color of the
+object.
+
+<DoDont
+	type="do"
+	image={{
+		url: objectColorsDo,
+		alt: '',
+	}}
+>
+	Maintain the assigned color.
+</DoDont>
+<DoDont
+	type="dont"
+	image={{
+		url: objectColorsDont,
+		alt: '',
+	}}
+>
+	Switch color tokens or use custom fills.
+</DoDont>
+
+## Contributing and adding new objects
+
+Atlassian teams may request a new object for their apps. Please follow the
+[request process](https://go.atlassian.com/ads-request-object) (Atlassian employees only).
+
+## Accessibility
+
+Use objects in combination with a title and meta-information, such as author, creation date, or
+sub-heading.
+
+## Related
+
+- For objects larger than 16px, use <a href="/components/object/object-tile/examples">Object
+  tile</a>
+- <a href="/components/icon/examples">Icon</a>
+- <a href="/components/icon/icon-tile/examples">Icon tile</a>

package/constellation/object-tile/code.mdx

@@ -0,0 +1,13 @@
+---
+title: Object tile
+description: An object tile represents Atlassian-specific content in a tile.
+order: 2
+props:
+  packageName: '@atlaskit/object/types'
+  exports:
+    - ObjectTileProps
+---
+
+## Props
+
+<TSMorphProps packageName="@atlaskit/object/types" exportName="ObjectTileProps" />

package/constellation/object-tile/examples.mdx

@@ -0,0 +1,59 @@
+---
+title: Object tile
+description: An object tile represents Atlassian-specific content in a tile.
+order: 1
+---
+
+import ObjectTileDefault from '../../examples/constellation/object-tile-default.tsx';
+import ObjectTileSizes from '../../examples/constellation/object-tile-sizes.tsx';
+import ObjectTileLabelling from '../../examples/constellation/object-tile-labelling.tsx';
+import ObjectTileBold from '../../examples/constellation/object-tile-bold.tsx';
+
+## Default
+
+The default object tile has a medium size (32px) and a default label based on the object type.
+
+<Example
+	Component={ObjectTileDefault}
+	packageName="@atlaskit/object"
+	hiddenSections={['iconography']}
+/>
+
+## Size
+
+Object tiles can be set to five different sizes using the `size` prop, from `xsmall` (20px) to
+`xlarge` (48px). This defaults to `medium` (32px).
+
+If you need a smaller size, use a standard [Object](/components/object/examples) instead – which is
+available in 12px or 16px sizes.
+
+<Example
+	Component={ObjectTileSizes}
+	packageName="@atlaskit/object"
+	hiddenSections={['iconography']}
+/>
+
+## Label
+
+Use the `label` prop to provide accessible labelling for object tiles. Use descriptive labels for
+meaningful object tiles, or empty strings for decorative object tiles.
+
+If not provided, the label will default to a human-readable version of the object type (for example,
+"Task" for a task object tile).
+
+<Example
+	Component={ObjectTileLabelling}
+	packageName="@atlaskit/object"
+	hiddenSections={['iconography']}
+/>
+
+## Bold
+
+Object tiles can be displayed with a bold appearance using the `isBold` prop. This changes the icon
+color and adds a bold background color. This is disabled by default.
+
+<Example
+	Component={ObjectTileBold}
+	packageName="@atlaskit/object"
+	hiddenSections={['iconography']}
+/>

package/constellation/object-tile/object-tile-explorer.mdx

@@ -0,0 +1,15 @@
+---
+title: Object tile
+description: An object tile represents Atlassian-specific content in a tile.
+order: 0
+---
+
+import { ObjectTileExplorer } from '@af/design-system-docs-ui';
+
+## Object Tile explorer
+
+Make a selection to view usage and import details.
+
+For usage examples, see the [Object Tile component documentation](/components/object/object-tile/).
+
+<ObjectTileExplorer />

package/constellation/object-tile/usage.mdx

@@ -0,0 +1,112 @@
+---
+title: Object tile
+description: An object tile represents Atlassian-specific content in a tile.
+order: 3
+---
+
+import SectionMessage from '@atlaskit/section-message';
+import Image from '@atlaskit/image';
+
+import objectTileAnatomyDark from './images/object-tile-anatomy-dark.png';
+import objectTileAnatomyLight from './images/object-tile-anatomy-light.png';
+import objectTileSizeDark from './images/object-tile-size-dark.png';
+import objectTileSizeLight from './images/object-tile-size-light.png';
+
+import objectTileColorsDo from './images/do-donts/object-tile-colors-do.png';
+import objectTileColorsDont from './images/do-donts/object-tile-colors-dont.png';
+import objectTileSmallerDo from './images/do-donts/object-tile-smaller-do.png';
+import objectTileSmallerDont from './images/do-donts/object-tile-smaller-dont.png';
+
+## Usage
+
+Object tile represents objects in a tile shape with properties inherited from the tile component.
+Use them to highlight [objects](/components/object/examples) in a layout, such as next to a group of
+text. To represent standard icons in a tile, use
+
+<a href="/components/icon/icon-tile/examples">Icon tile</a>.
+
+## Anatomy
+
+<Image
+	src={objectTileAnatomyLight}
+	srcDark={objectTileAnatomyDark}
+	alt="The anatomy of an Object tile"
+/>
+
+1. **Icon object:** Foreground icon represents Atlassian-specific content.
+2. **Background:** The default appearance has a neutral background set to
+   <inlineCode>color.background.neutral</inlineCode>. Bold tiles have an assigned background token
+   that cannot be changed.
+
+## Size
+
+There are currently 5 size options, representing the width and height in pixels: 20, 24, 32, 40, 48.
+To keep things easy to see, objects smaller than 20px must be shown without a tile container using
+the [object](/components/object/examples) component.
+
+<Image
+	src={objectTileSizeLight}
+	srcDark={objectTileSizeDark}
+	alt="All available object tile options"
+/>
+
+## Best practices
+
+### Smaller than 20px - use an Object
+
+For smaller representations such as in tables or smart links, use
+[Object](/components/object/examples). Do not scale down object tile below 20px.
+
+<DoDont
+	type="do"
+	image={{
+		url: objectTileSmallerDo,
+		alt: '',
+	}}
+>
+	Use the prescribed size for object tiles.
+</DoDont>
+<DoDont
+	type="dont"
+	image={{
+		url: objectTileSmallerDont,
+		alt: '',
+	}}
+>
+	Scale down object tile below 20px.
+</DoDont>
+
+### Don’t change object tile colors
+
+Object tiles are assigned specific colors. For consistency across our apps, don’t change their
+color.
+
+<DoDont
+	type="do"
+	image={{
+		url: objectTileColorsDo,
+		alt: '',
+	}}
+>
+	Maintain the assigned color.
+</DoDont>
+<DoDont
+	type="dont"
+	image={{
+		url: objectTileColorsDont,
+		alt: '',
+	}}
+>
+	Switch color tokens or use custom fills.
+</DoDont>
+
+## Accessibility
+
+Use object tiles in combination with a title and meta-information, such as author, creation date, or
+sub-heading.
+
+## Related
+
+- For object tiles smaller than 20px, use <a href="/components/object/examples">Object</a>
+- <a href="/components/icon/icon-tile/examples">Icon tile</a>
+- <a href="/components/icon/examples">Icon</a>

package/dist/cjs/components/object/components/{issue.js → work-item.js}

@@ -4,19 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = IssueObject;
+exports.default = WorkItemObject;
 var _react = _interopRequireDefault(require("react"));
 var _workItem = _interopRequireDefault(require("@atlaskit/icon/core/work-item"));
 var _objectBase = _interopRequireDefault(require("../object-base"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f066b78a852692916f23328f565a5fa>>
+ * @codegen <<SignedSource::9d7811e9ce600b90f94930755b99d471>>
  * @codegenCommand yarn build-glyphs
  */
 
-function IssueObject(_ref) {
+function WorkItemObject(_ref) {
   var _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Issue' : _ref$label,
+    label = _ref$label === void 0 ? 'Work Item' : _ref$label,
     size = _ref.size,
     testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_objectBase.default, {

package/dist/cjs/components/object-tile/components/{issue.js → work-item.js}

@@ -4,19 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = IssueObjectTile;
+exports.default = WorkItemObjectTile;
 var _react = _interopRequireDefault(require("react"));
 var _workItem = _interopRequireDefault(require("@atlaskit/icon/core/work-item"));
 var _objectTileBase = _interopRequireDefault(require("../object-tile-base"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3364016e20db618c1b623e7c48e1d366>>
+ * @codegen <<SignedSource::30f3baace5bcd49b8a2c522228cf7a06>>
  * @codegenCommand yarn build-glyphs
  */
 
-function IssueObjectTile(_ref) {
+function WorkItemObjectTile(_ref) {
   var _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Issue' : _ref$label,
+    label = _ref$label === void 0 ? 'Work Item' : _ref$label,
     size = _ref.size,
     testId = _ref.testId,
     isBold = _ref.isBold;