@atlaskit/tile 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/tile
 
+## 0.1.3
+
+### Patch Changes
+
+- [`965e35f10a8f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/965e35f10a8f1) -
+  Implemented new design token `radius.tile` for tile border radius.
+
+## 0.1.2
+
+### Patch Changes
+
+- [`9e77915865d6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e77915865d6e) - -
+  Corrected border width
+  - Simplified labelling method
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _index.default;
+    return _tile.default;
   }
 });
-var _index = _interopRequireDefault(require("./ui/index"));
+var _tile = _interopRequireDefault(require("./tile"));

package/dist/cjs/{ui/index.compiled.css → tile.compiled.css}

@@ -1,5 +1,6 @@
 
-._2rko1x1l{border-radius:25%}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._16jlidpf{flex-grow:0}
 ._18m915vq{overflow-y:hidden}
@@ -13,7 +14,6 @@
 ._1e0c116y{display:inline-flex}
 ._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
 ._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
-._1it5e4h9{border-size:var(--ds-border-width,1px)}
 ._1o9zidpf{flex-shrink:0}
 ._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
 ._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}

package/dist/cjs/{ui/index.js → tile.js}

@@ -1,20 +1,18 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Tile;
-require("./index.compiled.css");
+require("./tile.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_2rko1x1l _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
-  border: "_1dqonqa1 _1h6dmuej _1it5e4h9",
+  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
+  border: "_189ee4h9 _1dqonqa1 _1h6dmuej",
   inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
   nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"
 };
@@ -113,6 +111,8 @@ function Tile(props) {
     testId = props.testId;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    "aria-label": label !== '' ? label : undefined,
+    role: label !== '' ? 'img' : undefined,
     className: (0, _runtime.ax)([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])
-  }, children, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, label));
+  }, children);
 }

package/dist/es2019/index.js

@@ -1 +1 @@
-export { default } from './ui/index';
+export { default } from './tile';

package/dist/{esm/ui/index.compiled.css → es2019/tile.compiled.css}

@@ -1,5 +1,6 @@
 
-._2rko1x1l{border-radius:25%}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._16jlidpf{flex-grow:0}
 ._18m915vq{overflow-y:hidden}
@@ -13,7 +14,6 @@
 ._1e0c116y{display:inline-flex}
 ._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
 ._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
-._1it5e4h9{border-size:var(--ds-border-width,1px)}
 ._1o9zidpf{flex-shrink:0}
 ._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
 ._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}

package/dist/es2019/{ui/index.js → tile.js}

@@ -1,11 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./index.compiled.css";
+/* tile.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import VisuallyHidden from '@atlaskit/visually-hidden';
 const styles = {
-  root: "_2rko1x1l _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
-  border: "_1dqonqa1 _1h6dmuej _1it5e4h9",
+  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
+  border: "_189ee4h9 _1dqonqa1 _1h6dmuej",
   inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
   nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"
 };
@@ -104,6 +103,8 @@ export default function Tile(props) {
   } = props;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    "aria-label": label !== '' ? label : undefined,
+    role: label !== '' ? 'img' : undefined,
     className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])
-  }, children, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
+  }, children);
 }

package/dist/esm/index.js

@@ -1 +1 @@
-export { default } from './ui/index';
+export { default } from './tile';

package/dist/{es2019/ui/index.compiled.css → esm/tile.compiled.css}

@@ -1,5 +1,6 @@
 
-._2rko1x1l{border-radius:25%}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._16jlidpf{flex-grow:0}
 ._18m915vq{overflow-y:hidden}
@@ -13,7 +14,6 @@
 ._1e0c116y{display:inline-flex}
 ._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
 ._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
-._1it5e4h9{border-size:var(--ds-border-width,1px)}
 ._1o9zidpf{flex-shrink:0}
 ._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
 ._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}

package/dist/esm/{ui/index.js → tile.js}

@@ -1,11 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./index.compiled.css";
+/* tile.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import VisuallyHidden from '@atlaskit/visually-hidden';
 var styles = {
-  root: "_2rko1x1l _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
-  border: "_1dqonqa1 _1h6dmuej _1it5e4h9",
+  root: "_2rkol0p1 _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1o9zidpf _16jlidpf _1ul9idpf _1tkeidpf",
+  border: "_189ee4h9 _1dqonqa1 _1h6dmuej",
   inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
   nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"
 };
@@ -104,6 +103,8 @@ export default function Tile(props) {
     testId = props.testId;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    "aria-label": label !== '' ? label : undefined,
+    role: label !== '' ? 'img' : undefined,
     className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])
-  }, children, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
+  }, children);
 }

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './ui/index';
-export { type TileProps } from './ui/types';
+export { default } from './tile';
+export { type TileProps } from './types';

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './ui/index';
-export { type TileProps } from './ui/types';
+export { default } from './tile';
+export { type TileProps } from './types';

package/package.json

@@ -34,7 +34,6 @@
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/primitives": "^14.14.0",
 		"@atlaskit/tokens": "^6.3.0",
-		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -52,9 +51,6 @@
 	},
 	"techstack": {
 		"@atlassian/frontend": {
-			"code-structure": [
-				"tangerine-next"
-			],
 			"import-structure": [
 				"atlassian-conventions"
 			],
@@ -91,7 +87,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",