@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

package/src/ui-style-constants/index.ts

@@ -0,0 +1,4 @@
+export * as RESPONSIVENESS from './responsiveness'
+export * as SPACING from './spacing'
+export * as TYPOGRAPHY from './typography'
+export * as VIEWPORT from './viewport'

package/src/ui-style-constants/responsiveness.ts

@@ -0,0 +1,15 @@
+// TODO(BC, 2023-04-20): this is media not sufficient to determine that we are on the
+// touch-only On Device Display of the flex. For development purposes, we are omitting
+// the (hover: none) to allow for off device testing. The hover rule should be reintroduced
+// before the release of this code to prevent Funny desktop app behavior when the viewport
+// is precisely 600x1024
+export const touchscreenMediaQuerySpecs = '(height: 600px) and (width: 1024px)'
+
+// This needs to be recalculated on-render to work with storybook viewport settings, so
+// if you need to support both media types in js use the function
+export const isTouchscreenDynamic = (): boolean =>
+  typeof window === 'object' && window.matchMedia != null
+    ? window.matchMedia(touchscreenMediaQuerySpecs).matches
+    : false
+
+export const isTouchscreen = isTouchscreenDynamic()

package/src/ui-style-constants/spacing.ts

@@ -0,0 +1,18 @@
+export const spacing2 = '0.125rem' as const // 2px
+export const spacing4 = '0.25rem' as const // 4px
+export const spacing6 = '0.375rem' as const // 6px
+export const spacing8 = '0.5rem' as const // 8px
+export const spacing10 = '0.625rem' as const // 10px
+export const spacing12 = '0.75rem' as const // 12px
+export const spacing16 = '1rem' as const // 16px
+export const spacing20 = '1.25rem' as const // 20px
+export const spacing24 = '1.5rem' as const // 24px
+export const spacing32 = '2rem' as const // 32px
+export const spacing40 = '2.5rem' as const // 40px
+export const spacing44 = '2.75rem' as const // 44px
+export const spacing48 = '3rem' as const // 48px
+export const spacing60 = '3.75rem' as const // 60px
+export const spacing68 = '4.25rem' as const // 68px
+export const spacing80 = '5rem' as const // 80px
+export const spacing120 = '7.5rem' as const // 120px
+export const spacingAuto = 'auto' as const // auto

package/src/ui-style-constants/typography.ts

@@ -0,0 +1,258 @@
+import { css } from 'styled-components'
+import { COLORS } from '../helix-design-system'
+
+// Font Sizes
+export const fontSize80 = '5rem' // 80px
+export const fontSize38 = '2.375rem' // 38px
+export const fontSize32 = '2rem' // 32px
+export const fontSize28 = '1.75rem' // 28px
+export const fontSize22 = '1.375rem' // 22px
+export const fontSize20 = '1.25rem' // 20px
+export const fontSizeH1 = '1.188rem' // 19px
+export const fontSizeH2 = '0.9375rem' // 15px
+export const fontSizeH3 = '0.875rem' // 14px
+export const fontSizeH4 = '0.813rem' //  13px
+export const fontSizeH6 = '0.563rem' // 9px
+export const fontSizeP = '0.8125rem' // 13px
+export const fontSizeLabel = '0.6875rem' // 11px
+export const fontSizeCaption = '0.625rem' // 10px
+
+// Font Weights
+export const fontWeightBold = 700
+export const fontWeightSemiBold = 600
+export const fontWeightRegular = 400
+export const fontWeightLight = 300
+
+// Line Heights
+export const lineHeight96 = '6rem' // 96px
+export const lineHeight48 = '3rem' // 48px
+export const lineHeight42 = '2.625rem' // 42px
+export const lineHeight36 = '2.25rem' // 36px
+export const lineHeight28 = '1.75rem' // 28px
+export const lineHeight24 = '1.5rem' // 24px
+export const lineHeight20 = '1.25rem' // 20px
+export const lineHeight18 = '1.125rem' // 18px
+export const lineHeight16 = '1rem' // 16px
+export const lineHeight12 = '0.75rem' // 12px
+export const lineHeightNormal = 'normal' // normal
+
+// font styles
+export const fontStyleNormal = 'normal'
+export const fontStyleItalic = 'italic'
+
+// text transforms
+export const textTransformNone = 'none'
+export const textTransformCapitalize = 'capitalize'
+export const textTransformUppercase = 'uppercase'
+export const textTransformLowercase = 'lowercase'
+
+export const textAlignLeft = 'left'
+export const textAlignRight = 'right'
+export const textAlignCenter = 'center'
+export const textAlignJustify = 'justify'
+
+// text decoration
+export const textDecorationUnderline = 'underline'
+
+// Default font styles, color agnostic for first pass
+export const h1Default = css`
+  font-size: ${fontSizeH1};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight24};
+`
+
+export const h2Regular = css`
+  font-size: ${fontSizeH2};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight20};
+`
+
+export const h2SemiBold = css`
+  font-size: ${fontSizeH2};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+`
+export const h3Regular = css`
+  font-size: ${fontSizeH3};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight20};
+`
+
+export const h3SemiBold = css`
+  font-size: ${fontSizeH3};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+`
+
+export const h6Default = css`
+  font-size: ${fontSizeH6};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight12};
+  text-transform: ${textTransformUppercase};
+`
+
+export const h6SemiBold = css`
+  font-size: ${fontSizeH6};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight12};
+`
+
+export const pRegular = css`
+  font-size: ${fontSizeP};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight20};
+`
+
+export const pSemiBold = css`
+  font-size: ${fontSizeP};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+`
+
+export const labelRegular = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight12};
+`
+
+export const labelSemiBold = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight12};
+`
+
+export const linkPSemiBold = css`
+  font-size: ${fontSizeP};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.blue50};
+
+  &:hover {
+    color: ${COLORS.blue55};
+  }
+`
+
+// font styles for touchscreen
+export const level1Header = css`
+  font-size: ${fontSize80};
+  font-weight: ${fontWeightBold};
+  line-height: ${lineHeight96};
+`
+
+export const level2HeaderBold = css`
+  font-size: ${fontSize38};
+  line-height: ${lineHeight48};
+  font-weight: ${fontWeightBold};
+`
+
+export const level2HeaderSemiBold = css`
+  font-size: ${fontSize38};
+  line-height: ${lineHeight48};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const level2HeaderRegular = css`
+  font-size: ${fontSize38};
+  line-height: ${lineHeight48};
+  font-weight: ${fontWeightRegular};
+`
+
+export const level3HeaderBold = css`
+  font-size: ${fontSize32};
+  line-height: ${lineHeight42};
+  font-weight: ${fontWeightBold};
+`
+
+export const level3HeaderSemiBold = css`
+  font-size: ${fontSize32};
+  line-height: ${lineHeight42};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const level3HeaderRegular = css`
+  font-size: ${fontSize32};
+  line-height: ${lineHeight42};
+  font-weight: ${fontWeightRegular};
+`
+
+export const level4HeaderBold = css`
+  font-size: ${fontSize28};
+  line-height: ${lineHeight36};
+  font-weight: ${fontWeightBold};
+`
+
+export const level4HeaderSemiBold = css`
+  font-size: ${fontSize28};
+  line-height: ${lineHeight36};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const level4HeaderRegular = css`
+  font-size: ${fontSize28};
+  line-height: ${lineHeight36};
+  font-weight: ${fontWeightRegular};
+`
+
+export const bodyTextBold = css`
+  font-size: ${fontSize22};
+  line-height: ${lineHeight28};
+  font-weight: ${fontWeightBold};
+`
+
+export const bodyTextSemiBold = css`
+  font-size: ${fontSize22};
+  line-height: ${lineHeight28};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const bodyTextRegular = css`
+  font-size: ${fontSize22};
+  line-height: ${lineHeight28};
+  font-weight: ${fontWeightRegular};
+`
+
+export const smallBodyTextBold = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightBold};
+`
+
+export const smallBodyTextSemiBold = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightSemiBold};
+`
+
+export const smallBodyTextRegular = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightRegular};
+`
+
+export const darkLinkH4SemiBold = css`
+  font-size: ${fontSizeH4};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.grey50};
+  &:hover {
+    color: ${COLORS.black90};
+  }
+`
+
+export const darkLinkLabelSemiBold = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.grey60};
+  &:hover {
+    color: ${COLORS.black90};
+  }
+`
+
+export const darkLinkLabelSemiBoldDisabled = css`
+  font-size: ${fontSizeLabel};
+  font-weight: ${fontWeightSemiBold};
+  line-height: ${lineHeight20};
+  color: ${COLORS.grey60};
+  cursor: not-allowed;
+`

package/src/ui-style-constants/viewport.ts

@@ -0,0 +1,18 @@
+// Note (kk:08/29/2023) Needed this in this ts file to avoid check-js errors on CI
+const customViewports = {
+  onDeviceDisplay: {
+    name: 'Touchscreen',
+    type: 'tablet',
+    styles: {
+      width: '1024px',
+      height: '600px',
+    },
+  },
+}
+
+export const touchScreenViewport = {
+  viewport: {
+    viewports: customViewports,
+    defaultViewport: 'onDeviceDisplay',
+  },
+}

package/src/utils.ts

@@ -0,0 +1,56 @@
+export const humanizeLabwareType = (labwareType: string): string => {
+  return labwareType.replace(/-|_/g, ' ')
+}
+
+export const wellNameSplit = (wellName: string): [string, string] => {
+  // Eg B9 => ['B', '9']
+  const raw = wellName.split(/(\D+)(\d+)/)
+
+  if (raw.length !== 4) {
+    throw Error('expected /\\D+\\d+/ regexp to split wellName, got ' + wellName)
+  }
+
+  const letters = raw[1]
+
+  if (letters.length !== 1) {
+    throw Error(
+      'expected 1 letter in wellName, got ' +
+        letters +
+        ' in wellName: ' +
+        wellName
+    )
+  }
+
+  const numbers = raw[2]
+
+  return [letters, numbers]
+}
+
+/**
+ * Truncate a long string to display it
+ * @example
+ * truncateString('Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up, Amplify Tagmlo1234567ted', 88, 66);
+ * Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up...fy Tagmlo1234567ted
+ *
+ * @param {string} text - A string param
+ * @param {number} maxLength - A maximum length of display
+ * @param {number} breakPoint - Optional A point to insert three dots
+ *
+ * @returns {string} Returns the truncated string
+ */
+export function truncateString(
+  text: string,
+  maxLength: number,
+  breakPoint?: number
+): string {
+  const dots = '...'
+  if (text.length > maxLength)
+    if (breakPoint != null) {
+      return `${text.substring(0, breakPoint)}${dots}${text.slice(
+        breakPoint - maxLength + dots.length
+      )}`
+    } else {
+      return `${text.slice(0, maxLength - dots.length)}${dots}`
+    }
+  else return text
+}

package/{vite.config.ts → vite.config.mts}

@@ -12,6 +12,8 @@ export default defineConfig({
     // Relative to the root
     ssr: 'src/index.ts',
     outDir: 'lib',
+    // do not delete the outdir, typescript types might live there and we dont want to delete them
+    emptyOutDir: false,
     commonjsOptions: {
       transformMixedEsModules: true,
       esmExternals: true,