@os-design/styles 1.0.44 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/styles",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,18 +37,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/media": "^1.0.18",
-    "@os-design/theming": "^1.0.42",
+    "@os-design/media": "^1.0.19",
+    "@os-design/theming": "^1.0.43",
     "facepaint": "^1.2.1"
   },
   "devDependencies": {
     "@emotion/react": ">=11",
     "@emotion/serialize": "*",
-    "@os-design/omit-emotion-props": "^1.0.11"
+    "@os-design/omit-emotion-props": "^1.0.12"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
     "@emotion/serialize": "*"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/ellipsisStyles/index.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+const ellipsisStyles = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export default ellipsisStyles;

package/src/enableScrollingStyles/index.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
+
+const enableScrollingStyles = (
+  axis: 'x' | 'y' | 'both',
+  showScrollbar = true
+): SerializedStyles => css`
+  ${['x', 'both'].includes(axis) &&
+  css`
+    overflow-x: auto;
+  `};
+
+  ${['y', 'both'].includes(axis) &&
+  css`
+    overflow-y: auto;
+  `};
+
+  ${!showScrollbar &&
+  css`
+    ::-webkit-scrollbar {
+      display: none;
+    }
+  `};
+
+  -webkit-overflow-scrolling: touch;
+`;
+
+export default enableScrollingStyles;

package/src/horizontalPaddingStyles/index.ts

@@ -0,0 +1,19 @@
+import { m } from '@os-design/media';
+import fp from 'facepaint';
+
+type Side = 'left' | 'right' | 'both';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const horizontalPaddingStyles =
+  (side: Side = 'both') =>
+  (p) =>
+    fp([m.min.sm])({
+      paddingLeft: ['left', 'both'].includes(side)
+        ? p.theme.horizontalPadding.map((v) => `${v}em`)
+        : undefined,
+      paddingRight: ['right', 'both'].includes(side)
+        ? p.theme.horizontalPadding.map((v) => `${v}em`)
+        : undefined,
+    });
+
+export default horizontalPaddingStyles;

package/src/index.ts

@@ -0,0 +1,11 @@
+export { default as ellipsisStyles } from './ellipsisStyles';
+export { default as enableScrollingStyles } from './enableScrollingStyles';
+export { default as horizontalPaddingStyles } from './horizontalPaddingStyles';
+export { default as lineClampStyles } from './lineClampStyles';
+export { default as resetButtonStyles } from './resetButtonStyles';
+export { default as resetFocusStyles } from './resetFocusStyles';
+export { default as resetUlStyles } from './resetUlStyles';
+export { default as sizeStyles } from './sizeStyles';
+export { default as transitionStyles } from './transitionStyles';
+
+export * from './sizeStyles';

package/src/lineClampStyles/index.ts

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
+
+const lineClampStyles = (maxLines: number): SerializedStyles => css`
+  display: -webkit-box;
+  -webkit-line-clamp: ${maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
+export default lineClampStyles;

package/src/resetButtonStyles/index.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+import resetFocusStyles from '../resetFocusStyles';
+
+const resetButtonStyles = css`
+  ${resetFocusStyles};
+  border: 0;
+  padding: 0;
+`;
+
+export default resetButtonStyles;

package/src/resetFocusStyles/index.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+const resetFocusStyles = css`
+  &:focus {
+    outline: none;
+  }
+`;
+
+export default resetFocusStyles;

package/src/resetUlStyles/index.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+const resetUlStyles = css`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+export default resetUlStyles;

package/src/sizeStyles/index.ts

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
+
+export interface WithSize {
+  /**
+   * The size of the element.
+   * @default medium
+   */
+  size?: 'small' | 'medium' | 'large' | string;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const sizeStyles = (p): SerializedStyles => {
+  const size = p.theme.sizes[p.size || 'medium'];
+  if (!size) {
+    return css`
+      font-size: ${p.size};
+    `;
+  }
+  return css`
+    font-size: ${size}em;
+  `;
+};
+
+export default sizeStyles;

package/src/transitionStyles/index.ts

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
+
+const singleTransitionStyles = (property: string) => (p) =>
+  css`
+    transition: ${property} ${p.theme.transitionDelay}ms;
+  `;
+
+const multipleTransitionsStyles = (properties: string[]) => (p) =>
+  css`
+    transition: all ${p.theme.transitionDelay}ms;
+    transition-property: ${properties.join(', ')};
+  `;
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const transitionStyles =
+  (...props: string[]) =>
+  (p): SerializedStyles =>
+    props.length === 1
+      ? singleTransitionStyles(props[0])(p)
+      : multipleTransitionsStyles(props)(p);
+
+export default transitionStyles;