@hyphen/hyphen-components 2.9.0

package/src/styles/reset.scss

@@ -0,0 +1,108 @@
+// CSS Reset based on https://hankchizljaw.com/wrote/a-modern-css-reset/
+// Some modifications made for our specific needs.
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+// Setting font family and default px value (to be used by our rem units downstream)
+body {
+  text-rendering: optimizespeed;
+  font-family: var(--assets-font-family-body);
+  font-weight: var(--size-font-weight-medium);
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+// Standardize list styles on ul, ol elements
+ul,
+ol {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-inline-start: 40px;
+}
+
+// Remove default margin
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+label,
+form,
+pre,
+table,
+td,
+th,
+thead,
+tr,
+a,
+select,
+option,
+textarea,
+input,
+fieldset,
+div,
+button,
+ul,
+ol,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+// Sensible line-height for text
+p {
+  line-height: 1.5;
+}
+
+// A elements that do not have a class get default styles
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+// Make images easier to work with
+img {
+  max-width: 100%;
+}
+
+// Natural flow and rhythm in articles by default
+article > * + * {
+  margin-top: 1em;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+// Remove all animations and transitions for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/text-align.scss

@@ -0,0 +1,21 @@
+.text-align-left { text-align: left; }
+.text-align-right { text-align: right; }
+.text-align-center { text-align: center; }
+
+@media (min-width: $size-breakpoint-tablet) {
+  .text-align-left-tablet { text-align: left; }
+  .text-align-right-tablet { text-align: right; }
+  .text-align-center-tablet { text-align: center; }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .text-align-left-desktop { text-align: left; }
+  .text-align-right-desktop { text-align: right; }
+  .text-align-center-desktop { text-align: center; }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .text-align-left-hd { text-align: left; }
+  .text-align-right-hd { text-align: right; }
+  .text-align-center-hd { text-align: center; }
+}

package/src/styles/utilities.scss

@@ -0,0 +1,9 @@
+@import '@hyphen/hyphen-design-tokens/build/utilities/utilities.css';
+@import './animation';
+@import './cursor';
+@import './display';
+@import './flex';
+@import './overflow';
+@import './text-align';
+@import './white-space';
+@import './position';

package/src/styles/variables/forms.scss

@@ -0,0 +1,71 @@
+.hyphen-components__variables__form-control {
+  // ----GLOBALS----
+  --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);
+  --INTERNAL_form-control-label-margin: var(--size-spacing-xs);
+  --INTERNAL_form-control-help-margin: var(--size-spacing-2xs);
+  --INTERNAL_form-control-line-height: var(--size-line-height-input);
+  --INTERNAL_form-control-label-font-weight: var(--size-font-weight-medium);
+  --INTERNAL_form-control-legend-font-weight: var(--size-font-weight-medium);
+  --INTERNAL_form-control-help-font-weight: var(--size-font-weight-normal);
+  --INTERNAL_form-control-box-shadow: 0 3px 0 rgb(0 0 0 / 5%);
+  --INTERNAL_form-control-font-family: var(--assets-font-family-body);
+
+  // --SIZES--
+
+  // small
+  --INTERNAL_form-control-size-sm-border-radius: var(--size-border-radius-sm);
+  --INTERNAL_form-control-size-sm-font-size: var(--size-font-size-xs);
+  --INTERNAL_form-control-size-sm-padding: var(--size-spacing-sm);
+
+  // medium (default)
+  --INTERNAL_form-control-size-md-label-size: var(--size-font-size-sm);
+  --INTERNAL_form-control-size-md-border-radius: var(--size-border-radius-sm);
+  --INTERNAL_form-control-size-md-font-size: var(--size-font-size-sm);
+  --INTERNAL_form-control-size-md-padding: var(--size-spacing-lg);
+
+  // large
+  --INTERNAL_form-control-size-lg-border-radius: var(--size-border-radius-sm);
+  --INTERNAL_form-control-size-lg-font-size: var(--size-font-size-md);
+  --INTERNAL_form-control-size-lg-padding: var(--size-spacing-lg);
+
+  // --COLORS--
+  --INTERNAL_form-control-background-color: var(--color-background-primary);
+  --INTERNAL_form-control-background-color-disabled: var(--color-base-grey-50);
+  --INTERNAL_form-control-background-color-error: var(
+    --color-background-danger
+  );
+  --INTERNAL_form-control-border-color: var(--color-border-default);
+  --INTERNAL_form-control-border-color-error: var(--color-base-red-100);
+  --INTERNAL_form-control-border-color-error-disabled: var(
+    --color-base-red-100
+  );
+  --INTERNAL_form-control-border-color-focus: var(--color-border-hover);
+  --INTERNAL_form-control-border-color-hover: var(--color-border-hover);
+  --INTERNAL_form-control-font-color: var(--color-font-base);
+  --INTERNAL_form-control-font-color-disabled: var(--color-font-disabled);
+  --INTERNAL_form-control-font-color-error: var(--color-font-danger);
+  --INTERNAL_form-control-font-color-error-disabled: var(
+    --color-font-danger-disabled
+  );
+  --INTERNAL_form-control-description-color: var(--color-font-secondary);
+  --INTERNAL_form-control-icon-color: var(--color-base-grey-300);
+  --INTERNAL_form-control-icon-color-hover: var(--color-base-grey);
+  --INTERNAL_form-control-placeholder-color: var(--color-font-placeholder);
+
+  // ----RADIO GROUP----
+  --INTERNAL_form-control-radio-group-description-spacing: var(
+    --size-spacing-xs
+  );
+  --INTERNAL_form-control-radio-group-options-spacing: var(--size-spacing-md);
+
+  // ----SELECT INPUT----
+  --INTERNAL_form-control-select-sm-icon-size: 20px;
+  --INTERNAL_form-control-select-md-icon-size: 32px;
+  --INTERNAL_form-control-select-lg-icon-size: 34px;
+  --INTERNAL_form-control-select-padding: var(--size-spacing-2xs);
+  --INTERNAL_form-control-select-clear-icon-margin: var(--size-spacing-xs);
+
+  // ----TEXT INPUT----
+  --INTERNAL_form-control-text-clear-icon-margin: var(--size-spacing-xs);
+  --INTERNAL_form-control-text-clear-icon-font-size: var(--size-font-size-md);
+}

package/src/styles/variables/index.scss

@@ -0,0 +1,3 @@
+@import '@hyphen/hyphen-design-tokens/build/css/variables.css';
+@import '@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css';
+@import './forms';

package/src/styles/white-space.scss

@@ -0,0 +1,21 @@
+.ws-normal { white-space: normal; }
+.ws-nowrap { white-space: nowrap; }
+.ws-pre { white-space: pre; }
+
+@media (min-width: $size-breakpoint-tablet) {
+  .ws-normal-tablet { white-space: normal; }
+  .ws-nowrap-tablet { white-space: nowrap; }
+  .ws-pre-tablet { white-space: pre; }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .ws-normal-desktop { white-space: normal; }
+  .ws-nowrap-desktop { white-space: nowrap; }
+  .ws-pre-desktop { white-space: pre; }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .ws-normal-hd { white-space: normal; }
+  .ws-nowrap-hd { white-space: nowrap; }
+  .ws-pre-hd { white-space: pre; }
+}

package/src/types/index.ts

@@ -0,0 +1,201 @@
+import { Key, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+
+import {
+  BorderRadiusSize as BorderRadius,
+  SpacingSize,
+  BreakpointSize,
+  HeightSize,
+  WidthSize,
+} from '@hyphen/hyphen-design-tokens/build/types';
+
+export type {
+  IconName,
+  BackgroundColor,
+  BaseColor,
+  BorderColor,
+  BorderSize,
+  BoxShadowSize,
+  BreakpointSize,
+  ColorName,
+  FontColor,
+  FontFamily,
+  FontSize,
+  FontWeight,
+  HeadingSize,
+  HeightSize,
+  LineHeightSize,
+  SpacingSize,
+  WidthSize,
+  ZIndexSize,
+} from '@hyphen/hyphen-design-tokens/build/types';
+
+export type BreakpointSizeWithBase = BreakpointSize | 'base';
+
+export type Breakpoint = {
+  name: BreakpointSizeWithBase;
+  minWidth: number; // min width in pixels
+};
+
+export type DimensionSize = WidthSize | HeightSize;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type UnknownPropertiesObjType = { [key: string]: any };
+
+export interface FlexProperty {
+  flexGrow?: number | string;
+  flexShrink?: number | string;
+  flexBasis?: number | string;
+  flex?: number | string;
+}
+
+export type StylesAndClasses<T> = {
+  styles?: T;
+  classes?: string[];
+};
+
+export type CssDimensionAbbreviation =
+  | 'h'
+  | 'w'
+  | 'mw'
+  | 'mh'
+  | 'minw'
+  | 'minh';
+
+export type CssDimensionUnit = 'px' | 'rem' | 'em' | '%';
+
+export type CssDimensionValue = `${number}${CssDimensionUnit}`;
+
+export type CssSpacingAbbreviation = 'm' | 'p';
+
+export type CssJustifyContentValue =
+  | 'space-around'
+  | 'space-between'
+  | 'center'
+  | 'flex-end'
+  | 'space-evenly'
+  | 'flex-start'
+  | 'stretch';
+
+export type CssAlignContentValue =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'stretch'
+  | 'space-between'
+  | 'space-around';
+
+export type CssFlexDirectionValue =
+  | 'column'
+  | 'column-reverse'
+  | 'row'
+  | 'row-reverse'
+  | undefined;
+
+export type CssAlignItemsValue =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'baseline'
+  | 'stretch';
+
+export type CssFlexValue = 'auto' | 'initial' | 'none' | 'inherit' | 'unset';
+
+export type CssOverflowValue =
+  | 'visible'
+  | 'hidden'
+  | 'clip'
+  | 'scroll'
+  | 'auto'
+  | 'inherit'
+  | 'initial'
+  | 'unset';
+
+export type CssDisplayValue =
+  | 'none'
+  | 'flex'
+  | 'inline-flex'
+  | 'block'
+  | 'inline-block'
+  | 'inline'
+  | 'inherit'
+  | 'grid'
+  | 'table-cell';
+
+export type CssTextAlignValue = 'left' | 'center' | 'right';
+
+export type BaseSpacing = SpacingSize | string | undefined;
+export type BorderRadiusSize = BorderRadius | string | undefined;
+
+export declare type ResponsiveProp<T> = {
+  [breakpoint in BreakpointSizeWithBase]?: T;
+};
+
+export type Row = UnknownPropertiesObjType;
+
+export type Cell = string | number | { [key: string]: unknown } | unknown[];
+
+export declare type Column = {
+  /**
+   * Text alignment for column cells (including header alignment). Cells will default to left if not defined.
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * CSS Class to be applied uniformly to all individual cells in a column.
+   */
+  cellClassName?:
+    | string
+    | ((cell?: Cell, row?: Row, rowIndex?: number) => string);
+  /**
+   * The key value to be rendered based on the table `rows`.
+   */
+  dataKey?: string;
+  /**
+   * Placeholder for empty cells Applies only to the cells of the particular column with this prop.
+   */
+  emptyCellPlaceholder?: string | number | undefined;
+  /**
+   * The heading/title of a column.
+   */
+  heading?: ReactNode;
+  /**
+   * CSS Class to be applied to the column header cell.
+   */
+  headerClassName?: string;
+  /**
+   * A custom key to be used when rendering the column array.
+   * Not required as our table auto-generates static, but unique column keys if not passed in.
+   */
+  key?: Key;
+  /**
+   * Whether the column data is sortable. Controls whether sorting controls should be displayed.
+   */
+  isSortable?: boolean;
+  /**
+   * Render method for column cell data. Provides ability to render any aspect of the cell/row with custom
+   * markup.
+   */
+  render?: (cell?: Cell, row?: Row, rowIndex?: number) => ReactNode;
+  /**
+   * Whether the column is stuck to the left or right.
+   */
+  sticky?: 'left' | 'right';
+  /**
+   * Whether long text should be truncated based on column width. Use in tandem with column width as well as
+   * `useFixedWidthColumns` prop in the parent table.
+   */
+  truncateOverflow?: boolean;
+  /**
+   * Specific width of the column. Use in tandem with `useFixedWidthColumns` in the parent table.
+   */
+  width?: number;
+};
+
+export type EventWithColumnKey = (
+  | MouseEvent<HTMLTableHeaderCellElement>
+  | KeyboardEvent<HTMLTableHeaderCellElement>
+) & { sortedKey: Key | undefined };
+
+export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
+export type ValueOrFunction<TValue, TArg> =
+  | TValue
+  | ValueFunction<TValue, TArg>;

package/src/types/lib.types.ts

@@ -0,0 +1,3 @@
+export type KnownKeys<T> = keyof {
+  [K in keyof T as string extends K ? never : K]: K;
+};