@atlaskit/media-card 77.10.6 → 77.10.7

package/example-helpers/styles.ts

@@ -1,139 +1,122 @@
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 
-export const editableCardOptionsStyles = css`
-  padding: ${token('space.250', '20px')};
-  border-bottom: 1px solid ${token('color.border', '#ccc')};
-  max-width: 700px;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const sliderWrapperStyles = css`
-  display: flex;
-  width: 50%;
-
-  > * {
-    flex: 1;
-    margin: 10px;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const editableCardContentStyles = css`
-  /* Not making the wrapper fancier or center elements in order to have a more realistic scenario */
-  padding: ${token('space.250', '20px')};
-  border: 2px dashed;
-  margin: 0 10px 50px 10px;
-  overflow: hidden;
-  background: ${token(
-    'color.background.accent.orange.subtlest',
-    'antiquewhite',
-  )};
-  box-sizing: border-box;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const optionsWrapperStyles = css`
-  display: flex;
-
-  > * {
-    flex: 1;
-    margin: 10px;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardDimensionsWrapperStyles = css`
-  margin: 10px 10px ${token('space.250', '20px')} 10px;
-  display: flex;
-
-  > div {
-    border: 1px solid ${token('color.border.bold', 'black')};
-    margin: 5px;
-    padding: 5px;
-    border-radius: 3px;
-  }
-`;
-
-export const flexWrapperStyles = css`
-  display: flex;
-`;
-export const cardPreviewWrapperStyles = css`
-  flex: 1;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardWrapperStyles = css`
-  border: 1px solid ${token('color.border.bold', 'black')};
-  padding: 10px;
-  margin: 5px;
-  flex-direction: column;
-  width: 310px;
-  height: 280px;
-  overflow: auto;
-  display: inline-block;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardFlowHeaderStyles = css`
-  margin: ${token('space.250', '20px')} auto;
-  padding: 10px 0;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const externalIdentifierWrapperStyles = css`
-  display: flex;
-  justify-content: space-around;
-  margin: 0 auto;
-
-  h2 {
-    margin-bottom: 10px;
-  }
-`;
-
-export const unhandledErrorCardWrapperStyles = css`
-  padding: ${token('space.250', '20px')};
-
-  > div:first-child {
-    display: flex;
-    margin-bottom: ${token('space.250', '20px')};
-  }
-
-  label {
-    margin-right: ${token('space.250', '20px')};
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const inlineCardVideoWrapperItemStyles = css`
-  padding: 10px;
-  border: 1px solid ${token('color.border.bold', 'black')};
-  margin: 10px;
-`;
-
-export const mediaViewerExampleColumnStyles = css`
-  flex: 1;
-
-  > div {
-  }
-`;
-
-export const mediaViewerExampleWrapperStyles = css`
-  display: flex;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const mediaInlineWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  margin: 100px;
-`;
-
-export const mediaInlineTableStyles = css`
-  width: 800px;
-  tr,
-  td {
-    border: 1px solid ${token('color.border', '#ddd')};
-  }
-`;
+export const editableCardOptionsStyles = css({
+  padding: token('space.250', '20px'),
+  borderBottom: `1px solid ${token('color.border', '#ccc')}`,
+  maxWidth: '700px',
+});
+
+export const sliderWrapperStyles = css({
+  display: 'flex',
+  width: '50%',
+  '> *': {
+    flex: 1,
+    margin: token('space.100', '8px'),
+  },
+});
+
+export const editableCardContentStyles = css({
+  padding: token('space.250', '20px'),
+  border: '2px dashed',
+  margin: `${token('space.0', '0px')} ${token('space.150', '12px')} ${token(
+    'space.600',
+    '48px',
+  )} ${token('space.150', '12px')}`,
+  overflow: 'hidden',
+  background: token('color.background.accent.orange.subtlest', 'antiquewhite'),
+  boxSizing: 'border-box',
+});
+
+export const optionsWrapperStyles = css({
+  display: 'flex',
+  '> *': {
+    flex: 1,
+    margin: token('space.100', '8px'),
+  },
+});
+
+export const cardDimensionsWrapperStyles = css({
+  margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
+    'space.250',
+    '20px',
+  )} ${token('space.100', '8px')}`,
+  display: 'flex',
+  '> div': {
+    border: `1px solid ${token('color.border.bold', 'black')}`,
+    margin: token('space.075', '6px'),
+    padding: token('space.075', '6px'),
+    borderRadius: '3px',
+  },
+});
+
+export const flexWrapperStyles = css({
+  display: 'flex',
+});
+export const cardPreviewWrapperStyles = css({
+  flex: 1,
+});
+
+export const cardWrapperStyles = css({
+  border: `1px solid ${token('color.border.bold', 'black')}`,
+  padding: token('space.150', '12px'),
+  margin: token('space.075', '6px'),
+  flexDirection: 'column',
+  width: '310px',
+  height: '280px',
+  overflow: 'auto',
+  display: 'inline-block',
+});
+
+export const cardFlowHeaderStyles = css({
+  margin: `${token('space.250', '20px')} auto`,
+  padding: `${token('space.150', '12px')} ${token('space.0', '0px')}`,
+});
+
+export const externalIdentifierWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'space-around',
+  margin: `${token('space.0', '0px')} auto`,
+  h2: {
+    marginBottom: token('space.150', '12px'),
+  },
+});
+
+export const unhandledErrorCardWrapperStyles = css({
+  padding: token('space.250', '20px'),
+  '> div:first-child': {
+    display: 'flex',
+    marginBottom: token('space.250', '20px'),
+  },
+  label: {
+    marginRight: token('space.250', '20px'),
+  },
+});
+
+export const inlineCardVideoWrapperItemStyles = css({
+  padding: token('space.150', '12px'),
+  border: `1px solid ${token('color.border.bold', 'black')}`,
+  margin: token('space.150', '12px'),
+});
+
+export const mediaViewerExampleColumnStyles = css({
+  flex: 1,
+});
+
+export const mediaViewerExampleWrapperStyles = css({
+  display: 'flex',
+});
+
+export const mediaInlineWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  margin: token('space.1000', '80px'),
+});
+
+export const mediaInlineTableStyles = css({
+  width: '800px',
+  'tr, td': {
+    border: `1px solid ${token('color.border', '#ddd')}`,
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.10.6",
+  "version": "77.10.7",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/dropdown-menu": "^12.7.0",
+    "@atlaskit/dropdown-menu": "^12.8.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/media-client": "^26.2.0",
@@ -47,10 +47,10 @@
     "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/primitives": "^4.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.39.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",