Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@equinor/eds-core-react
Advanced tools
@equinor/eds-core-react - npm Package Compare versions
Comparing version 0.0.1-alpha.6 to 0.0.1-alpha.7
@@ -8,4 +8,15 @@ # Changelog | ||
| ## [0.0.1-alpha.7] - 2020-01-10 | ||
| - Added following alpha components: | ||
| - Divider | ||
| - Table | ||
| - Typography | ||
| ## [0.0.1-alpha.6] - 2019-08-12 | ||
| - Fixed typo in changelogs | ||
| ## [0.0.1-alpha.5] - 2019-08-12 | ||
| - Added `@equinor/eds-tokens` as a dependency for tokens | ||
@@ -12,0 +23,0 @@ |
@@ -7,6 +7,23 @@ 'use strict'; | ||
| var React = _interopDefault(require('react')); | ||
| var React = require('react'); | ||
| var React__default = _interopDefault(React); | ||
| var PropTypes = _interopDefault(require('prop-types')); | ||
| var styled = _interopDefault(require('styled-components')); | ||
| var edsTokens = require('@equinor/eds-tokens'); | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _extends() { | ||
@@ -30,2 +47,36 @@ _extends = Object.assign || function (target) { | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
@@ -93,3 +144,2 @@ if (source == null) return {}; | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -127,3 +177,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -173,3 +222,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -181,3 +229,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -209,3 +257,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -216,3 +263,3 @@ textAlign: "center" | ||
| left: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -244,3 +291,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -252,3 +298,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -280,3 +326,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -288,3 +333,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -316,3 +361,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -324,3 +368,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -352,3 +396,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -360,3 +403,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -388,3 +431,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -435,3 +477,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -469,3 +510,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -503,3 +543,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -511,3 +550,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -539,3 +578,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -547,3 +585,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -575,3 +613,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -583,3 +620,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -611,3 +648,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -619,3 +655,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -647,3 +683,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -655,3 +690,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -683,3 +718,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -691,3 +725,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -719,3 +753,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -765,3 +798,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -799,3 +831,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -833,3 +864,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -841,3 +871,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -869,3 +899,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -877,3 +906,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -905,3 +934,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -913,3 +941,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -941,3 +969,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -949,3 +976,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -977,3 +1004,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -985,3 +1011,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1013,3 +1039,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1021,3 +1046,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1049,3 +1074,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1095,3 +1119,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1121,3 +1144,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1151,3 +1173,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1159,3 +1180,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -1179,3 +1200,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1187,3 +1207,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -1207,3 +1227,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1215,3 +1234,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -1235,3 +1254,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1243,3 +1261,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1263,3 +1281,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1271,3 +1288,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1291,3 +1308,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1299,3 +1315,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1319,3 +1335,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1344,2 +1359,32 @@ textAlign: "center" | ||
| var typographyTemplate = function typographyTemplate(typography, link) { | ||
| var base = "\n margin: 0;\n color: ".concat(typography.color, ";\n font-family: ").concat(typography.fontFamily, ";\n font-size: ").concat(typography.fontSize, ";\n font-weight: ").concat(typography.fontWeight, ";\n line-height: ").concat(typography.lineHeight, ";\n "); | ||
| if (typography.fontStyle) { | ||
| base += "\nfont-style: ".concat(typography.fontStyle, ";"); | ||
| } | ||
| if (typography.letterSpacing) { | ||
| base += "\nletter-spacing: ".concat(typography.letterSpacing, ";"); | ||
| } | ||
| if (typography.textTransform) { | ||
| base += "\ntext-transform: ".concat(typography.textTransform, ";"); | ||
| } | ||
| if (typography.textDecoration) { | ||
| base += "\ntext-decoration: ".concat(typography.textDecoration, ";"); | ||
| } | ||
| if (typography.fontFeature) { | ||
| base += "\nfont-feature-settings: ".concat(typography.fontFeature, ";"); | ||
| } | ||
| if (link) { | ||
| base += "\ncursor: pointer;"; | ||
| } | ||
| return base; | ||
| }; | ||
| function _templateObject() { | ||
@@ -1358,8 +1403,7 @@ var data = _taggedTemplateLiteral(["\n margin: 0;\n padding: 0;\n ", "\n position: relative;\n cursor: pointer;\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: auto;\n min-height: auto;\n content: '';\n }\n"]); | ||
| danger: dangerButtonTokens, | ||
| disabled: disabledButtonTokens // TODO: Is there a better way to handle css properties without | ||
| // bloating with ${props => props.base.focus.color} etc... | ||
| // Using simple template string for now, but missing css syntax highlight :( | ||
| disabled: disabledButtonTokens | ||
| }; // TODO: Is there a better way to handle css properties without | ||
| // bloating with ${props => props.base.focus.color} etc... | ||
| // Using simple template string for now, but missing css syntax highlight :( | ||
| }; | ||
| var Base = function Base(_ref) { | ||
@@ -1378,3 +1422,3 @@ var base = _ref.base, | ||
| focus = base.focus; | ||
| return "\n height: ".concat(base.height, ";\n background: ").concat(base.background, ";\n color: ").concat(base.color, ";\n\n border-radius: ").concat(border.radius, ";\n border-color: ").concat(border.color, ";\n border-width: ").concat(border.width, ";\n\n padding-left: ").concat(spacing.left, ";\n padding-right: ").concat(spacing.right, ";\n\n font-family: ").concat(typography.fontFamily, ";\n font-size: ").concat(typography.fontSize, ";\n font-weight: ").concat(typography.fontWeight, ";\n line-height: ").concat(typography.lineHeight, ";\n letter-spacing: ").concat(typography.letterSpacing, ";\n text-align: ").concat(typography.textAlign, ";\n\n &::after {\n position: absolute;\n top:-").concat(base.clickboundOffset, ";\n left:0;\n width: 100%;\n height: ").concat(base.clickbound, ";\n content: '';\n }\n\n &:hover {\n background: ").concat(base.hoverBackground, ";\n }\n\n &:focus {\n outline-offset: ").concat(focus.width, ";\n outline: ").concat(focus.width, " ").concat(focus.type, " ").concat(focus.color, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n background: ").concat(disabled.background, ";\n color: ").concat(disabled.color, ";\n\n border-color: ").concat(disabled.border.color, ";\n\n &:hover {\n background: ").concat(disabled.background, ";\n }\n }\n"); | ||
| return "\n height: ".concat(base.height, ";\n background: ").concat(base.background, ";\n color: ").concat(base.color, ";\n\n border-radius: ").concat(border.radius, ";\n border-color: ").concat(border.color, ";\n border-width: ").concat(border.width, ";\n\n padding-left: ").concat(spacing.left, ";\n padding-right: ").concat(spacing.right, ";\n\n ").concat(typographyTemplate(typography), "\n\n &::after {\n position: absolute;\n top:-").concat(base.clickboundOffset, ";\n left:0;\n width: 100%;\n height: ").concat(base.clickbound, ";\n content: '';\n }\n\n &:hover {\n background: ").concat(base.hoverBackground, ";\n }\n\n &:focus {\n outline-offset: ").concat(focus.width, ";\n outline: ").concat(focus.width, " ").concat(focus.type, " ").concat(focus.color, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n background: ").concat(disabled.background, ";\n color: ").concat(disabled.color, ";\n\n border-color: ").concat(disabled.border.color, ";\n\n &:hover {\n background: ").concat(disabled.background, ";\n }\n }\n"); | ||
| }; | ||
@@ -1404,3 +1448,3 @@ | ||
| var baseDisabled = colors.disabled[variant] || {}; | ||
| return React.createElement(ButtonBase, _extends({ | ||
| return React__default.createElement(ButtonBase, _extends({ | ||
| base: base, | ||
@@ -1412,3 +1456,2 @@ baseDisabled: baseDisabled, | ||
| }; | ||
| Button.propTypes = { | ||
@@ -1442,2 +1485,956 @@ /** @ignore */ | ||
| function _templateObject$1() { | ||
| var data = _taggedTemplateLiteral(["\n ", "\n"]); | ||
| _templateObject$1 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var _tokens$typography = edsTokens.tokens.typography, | ||
| heading = _tokens$typography.heading, | ||
| paragraph = _tokens$typography.paragraph; | ||
| var variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'overline', 'ingress', 'caption', 'meta', 'body_short', 'body_long']; | ||
| var variantToken = _objectSpread2({}, heading, {}, paragraph); | ||
| var getElementType = function getElementType(variant, link) { | ||
| if (link) { | ||
| return 'a'; | ||
| } | ||
| switch (variant) { | ||
| case 'h1': | ||
| case 'h2': | ||
| case 'h3': | ||
| case 'h4': | ||
| case 'h5': | ||
| case 'h6': | ||
| return variant; | ||
| case 'caption': | ||
| case 'overline': | ||
| case 'ingress': | ||
| case 'meta': | ||
| case 'body_short': | ||
| case 'body_long': | ||
| default: | ||
| return 'p'; | ||
| } | ||
| }; | ||
| var toComplexVariantName = function toComplexVariantName(variant) { | ||
| var bold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var italic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| var link = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; | ||
| return "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : ''); | ||
| }; | ||
| var Base$1 = function Base(_ref) { | ||
| var typography = _ref.typography, | ||
| link = _ref.link; | ||
| var base = "\n margin: 0;\n\n ".concat(typographyTemplate(typography, link), "\n "); | ||
| return base; | ||
| }; | ||
| var TypographyBase = styled.p(_templateObject$1(), Base$1); | ||
| var Typography = function Typography(_ref2) { | ||
| var variant = _ref2.variant, | ||
| children = _ref2.children, | ||
| bold = _ref2.bold, | ||
| italic = _ref2.italic, | ||
| link = _ref2.link, | ||
| other = _objectWithoutProperties(_ref2, ["variant", "children", "bold", "italic", "link"]); | ||
| var as = getElementType(variant, link); | ||
| var variantName = toComplexVariantName(variant, bold, italic, link); | ||
| var typography = variantToken[variantName]; | ||
| if (typeof typography === 'undefined') { | ||
| console.warn("Typography variant not found for \"".concat(variantName, "\". Trying to use ").concat(variant)); | ||
| typography = variantToken[variant]; | ||
| } | ||
| if (typeof typography === 'undefined') { | ||
| throw new Error("Typography variant not found for ".concat(variant, ". Please use of the following variants: ").concat(variants.toString())); | ||
| } | ||
| return React__default.createElement(TypographyBase, _extends({ | ||
| as: as, | ||
| typography: typography, | ||
| link: link | ||
| }, other), children); | ||
| }; | ||
| Typography.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired, | ||
| /** Specifies which variant to use */ | ||
| variant: PropTypes.oneOf(variants), | ||
| /** Specifies if text should be bold */ | ||
| bold: PropTypes.bool, | ||
| /** Specifies if text should be italic */ | ||
| italic: PropTypes.bool, | ||
| /** Specifies if text should be a link */ | ||
| link: PropTypes.bool | ||
| }; | ||
| Typography.defaultProps = { | ||
| variant: 'h1', | ||
| bold: false, | ||
| italic: false, | ||
| link: false, | ||
| className: '' | ||
| }; | ||
| Typography.displayName = 'eds-text'; | ||
| function _templateObject$2() { | ||
| var data = _taggedTemplateLiteral(["\n border-spacing: 0;\n border-collapse: collapse;\n"]); | ||
| _templateObject$2 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase = styled.table(_templateObject$2()); | ||
| var Table = function Table(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase, props, children); | ||
| }; | ||
| Table.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Table.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Table.displayName = 'eds-table'; | ||
| function _templateObject$3() { | ||
| var data = _taggedTemplateLiteral([""]); | ||
| _templateObject$3 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase$1 = styled.tbody(_templateObject$3()); | ||
| var Body = function Body(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase$1, props, children); | ||
| }; | ||
| Body.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Body.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Body.displayName = 'eds-table-body'; | ||
| var header = { | ||
| text: { | ||
| height: "48px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 500, | ||
| lineHeight: "1.714em" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(234, 234, 234, 1)", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| typography: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 500, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(247, 247, 247, 1)", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 500, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(220, 220, 220, 1)" | ||
| } | ||
| }, | ||
| icon: { | ||
| height: "48px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(234, 234, 234, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(220, 220, 220, 1)" | ||
| } | ||
| } | ||
| }; | ||
| var cell = { | ||
| monospaced_numeric: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| fontFeature: "'tnum' on, 'lnum' on", | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.429em" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| typography: { | ||
| fontFeature: "'tnum' on, 'lnum' on", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.429em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| typography: { | ||
| fontFeature: "'tnum' on, 'lnum' on", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.429em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| }, | ||
| icon: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| }, | ||
| placeholder: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| }, | ||
| input: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| radius: "", | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| radius: "", | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(61, 61, 61, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(247, 247, 247, 1)", | ||
| radius: 0, | ||
| width: 0 | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: "", | ||
| width: "2px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)", | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(86, 86, 86, 1)", | ||
| radius: "", | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| text: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.714em" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| typography: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| } | ||
| }; | ||
| var tableTokens = { | ||
| header: header, | ||
| cell: cell | ||
| }; | ||
| function _templateObject$4() { | ||
| var data = _taggedTemplateLiteral(["\n ", "\n"]); | ||
| _templateObject$4 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var header$1 = tableTokens.header, | ||
| cell$1 = tableTokens.cell; | ||
| var variants$1 = { | ||
| header: { | ||
| text: header$1.text | ||
| }, | ||
| cell: { | ||
| text: cell$1.text, | ||
| numeric: cell$1.monospaced_numeric, | ||
| icon: cell$1.icon, | ||
| input: cell$1.input | ||
| } | ||
| }; | ||
| var getTokens = function getTokens(as, variant) { | ||
| switch (as) { | ||
| case 'th': | ||
| return variants$1.header[variant]; | ||
| case 'td': | ||
| default: | ||
| return variants$1.cell[variant]; | ||
| } | ||
| }; | ||
| var borderTemplate = function borderTemplate(borders) { | ||
| return Object.keys(borders).reduce(function (acc, val) { | ||
| var _borders$val = borders[val], | ||
| color = _borders$val.color, | ||
| width = _borders$val.width; | ||
| return "".concat(acc, " border-").concat(val, ": ").concat(width, " solid ").concat(color, "; \n"); | ||
| }, ''); | ||
| }; | ||
| var Base$2 = function Base(_ref) { | ||
| var tokens = _ref.tokens; | ||
| var background = tokens.background, | ||
| height = tokens.height, | ||
| text = tokens.text, | ||
| spacings = tokens.spacings, | ||
| borders = tokens.borders; | ||
| var typography = text.typography; | ||
| var base = "\n background: ".concat(background, ";\n min-height: ").concat(height, ";\n height: ").concat(height, ";\n\n padding-left: ").concat(spacings.left, ";\n padding-right: ").concat(spacings.right, ";\n\n ").concat(borderTemplate(borders), "\n ").concat(typographyTemplate(typography), "\n "); | ||
| return base; | ||
| }; | ||
| var TableBase$2 = styled.td(_templateObject$4(), Base$2); | ||
| var Cell = function Cell(props) { | ||
| var children = props.children, | ||
| as = props.as, | ||
| variant = props.variant; | ||
| var tokens = getTokens(as, variant); | ||
| return React__default.createElement(TableBase$2, _extends({ | ||
| as: as, | ||
| tokens: tokens | ||
| }, props), children); | ||
| }; | ||
| Cell.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired, | ||
| /** Specifies which td or th to use */ | ||
| as: PropTypes.oneOf(['td', 'th']), | ||
| /** Specifies the scope of th */ | ||
| // scope: PropTypes.oneOf(['col', 'row']), | ||
| /** Specifies which variant to use */ | ||
| variant: PropTypes.oneOf(['text', 'icon', 'numeric', 'input']) | ||
| }; | ||
| Cell.defaultProps = { | ||
| className: '', | ||
| // scope: '', | ||
| as: 'td', | ||
| variant: 'text' | ||
| }; | ||
| Cell.displayName = 'eds-table-cell'; | ||
| function _templateObject$5() { | ||
| var data = _taggedTemplateLiteral([""]); | ||
| _templateObject$5 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase$3 = styled.thead(_templateObject$5()); | ||
| var Head = function Head(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase$3, props, children); | ||
| }; | ||
| Head.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Head.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Head.displayName = 'eds-table-head'; | ||
| function _templateObject$6() { | ||
| var data = _taggedTemplateLiteral([""]); | ||
| _templateObject$6 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase$4 = styled.tr(_templateObject$6()); | ||
| var Row = function Row(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase$4, props, children); | ||
| }; | ||
| Row.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Row.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Row.displayName = 'eds-table-row'; | ||
| Table.Body = Body; | ||
| Table.Cell = Cell; | ||
| Table.Head = Head; | ||
| Table.Row = Row; | ||
| var _tokens$colors$ui = edsTokens.tokens.colors.ui, | ||
| lighter = _tokens$colors$ui.background__default.hex, | ||
| light = _tokens$colors$ui.background__light.hex, | ||
| medium = _tokens$colors$ui.background__medium.hex, | ||
| _tokens$spacings$comf = edsTokens.tokens.spacings.comfortable, | ||
| spacingSmall = _tokens$spacings$comf.small, | ||
| spacingMedium = _tokens$spacings$comf.medium; | ||
| var dividerHeight = 1; | ||
| var reduceByValue = function reduceByValue(subtractValue) { | ||
| return function (valueWithUnit) { | ||
| var valueAndUnit = valueWithUnit.split(/(\d+)/).filter(function (val) { | ||
| return val.length > 0; | ||
| }); | ||
| return valueAndUnit[0] - subtractValue + valueAndUnit[1]; | ||
| }; | ||
| }; | ||
| var reduceValueByDividerHeight = reduceByValue(dividerHeight); | ||
| var divider = { | ||
| height: "".concat(dividerHeight, "px"), | ||
| color: { | ||
| lighter: lighter, | ||
| light: light, | ||
| medium: medium | ||
| }, | ||
| small: { | ||
| spacings: { | ||
| top: spacingSmall, | ||
| bottom: reduceValueByDividerHeight(spacingSmall) | ||
| } | ||
| }, | ||
| medium: { | ||
| spacings: { | ||
| top: spacingMedium, | ||
| bottom: reduceValueByDividerHeight(spacingMedium) | ||
| } | ||
| } | ||
| }; | ||
| var StyledDivider = styled.hr(function (_ref) { | ||
| var backgroundColor = _ref.backgroundColor, | ||
| marginTop = _ref.marginTop, | ||
| marginBottom = _ref.marginBottom, | ||
| height = _ref.dividerHeight; | ||
| return { | ||
| backgroundColor: backgroundColor, | ||
| marginTop: marginTop, | ||
| marginBottom: marginBottom, | ||
| height: height, | ||
| border: 'none' | ||
| }; | ||
| }); | ||
| var Divider = React.forwardRef(function Divider(_ref2, ref) { | ||
| var color = _ref2.color, | ||
| variant = _ref2.variant, | ||
| className = _ref2.className; | ||
| var props = { | ||
| backgroundColor: divider.color[color], | ||
| marginTop: divider[variant].spacings.top, | ||
| marginBottom: divider[variant].spacings.bottom, | ||
| dividerHeight: divider.height | ||
| }; | ||
| return React__default.createElement(StyledDivider, _extends({}, props, { | ||
| className: className, | ||
| ref: ref | ||
| })); | ||
| }); | ||
| Divider.displayName = 'eds-divider'; | ||
| Divider.propTypes = { | ||
| // Valid colors | ||
| color: PropTypes.oneOf(['lighter', 'light', 'medium']), | ||
| // Vertical spacing | ||
| variant: PropTypes.oneOf(['small', 'medium']), | ||
| /** @ignore */ | ||
| className: PropTypes.string | ||
| }; | ||
| Divider.defaultProps = { | ||
| color: 'medium', | ||
| variant: 'medium', | ||
| className: '' | ||
| }; | ||
| exports.Button = Button; | ||
| exports.Divider = Divider; | ||
| exports.Table = Table; | ||
| exports.Typography = Typography; |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('styled-components')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'styled-components'], factory) : | ||
| (global = global || self, factory(global['@equinor/eds-core-react'] = {}, global.React, global.PropTypes, global.styled)); | ||
| }(this, function (exports, React, PropTypes, styled) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('styled-components'), require('@equinor/eds-tokens')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'styled-components', '@equinor/eds-tokens'], factory) : | ||
| (global = global || self, factory(global['@equinor/eds-core-react'] = {}, global.React, global.PropTypes, global.styled, global.edsTokens)); | ||
| }(this, (function (exports, React, PropTypes, styled, edsTokens) { 'use strict'; | ||
| React = React && React.hasOwnProperty('default') ? React['default'] : React; | ||
| var React__default = 'default' in React ? React['default'] : React; | ||
| PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; | ||
| styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _extends() { | ||
@@ -29,2 +44,36 @@ _extends = Object.assign || function (target) { | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
@@ -92,3 +141,2 @@ if (source == null) return {}; | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -126,3 +174,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -172,3 +219,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -180,3 +226,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -208,3 +254,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -215,3 +260,3 @@ textAlign: "center" | ||
| left: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -243,3 +288,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -251,3 +295,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -279,3 +323,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -287,3 +330,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -315,3 +358,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -323,3 +365,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -351,3 +393,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -359,3 +400,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -387,3 +428,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -434,3 +474,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -468,3 +507,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -502,3 +540,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -510,3 +547,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -538,3 +575,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -546,3 +582,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -574,3 +610,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -582,3 +617,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -610,3 +645,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -618,3 +652,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -646,3 +680,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -654,3 +687,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -682,3 +715,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -690,3 +722,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -718,3 +750,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -764,3 +795,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -798,3 +828,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -832,3 +861,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -840,3 +868,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -868,3 +896,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -876,3 +903,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -904,3 +931,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -912,3 +938,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -940,3 +966,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -948,3 +973,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -976,3 +1001,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -984,3 +1008,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1012,3 +1036,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1020,3 +1043,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1048,3 +1071,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1094,3 +1116,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1120,3 +1141,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1150,3 +1170,2 @@ textAlign: "center" | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1158,3 +1177,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -1178,3 +1197,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1186,3 +1204,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -1206,3 +1224,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1214,3 +1231,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "right icon": "8px" | ||
| right_icon: "8px" | ||
| }, | ||
@@ -1234,3 +1251,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1242,3 +1258,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1262,3 +1278,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1270,3 +1285,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1290,3 +1305,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1298,3 +1312,3 @@ textAlign: "center" | ||
| right: "16px", | ||
| "left icon": "8px" | ||
| left_icon: "8px" | ||
| }, | ||
@@ -1318,3 +1332,2 @@ clickbound: "48px", | ||
| fontWeight: 500, | ||
| letterSpacing: 0, | ||
| lineHeight: "1.143em", | ||
@@ -1343,2 +1356,32 @@ textAlign: "center" | ||
| var typographyTemplate = function typographyTemplate(typography, link) { | ||
| var base = "\n margin: 0;\n color: ".concat(typography.color, ";\n font-family: ").concat(typography.fontFamily, ";\n font-size: ").concat(typography.fontSize, ";\n font-weight: ").concat(typography.fontWeight, ";\n line-height: ").concat(typography.lineHeight, ";\n "); | ||
| if (typography.fontStyle) { | ||
| base += "\nfont-style: ".concat(typography.fontStyle, ";"); | ||
| } | ||
| if (typography.letterSpacing) { | ||
| base += "\nletter-spacing: ".concat(typography.letterSpacing, ";"); | ||
| } | ||
| if (typography.textTransform) { | ||
| base += "\ntext-transform: ".concat(typography.textTransform, ";"); | ||
| } | ||
| if (typography.textDecoration) { | ||
| base += "\ntext-decoration: ".concat(typography.textDecoration, ";"); | ||
| } | ||
| if (typography.fontFeature) { | ||
| base += "\nfont-feature-settings: ".concat(typography.fontFeature, ";"); | ||
| } | ||
| if (link) { | ||
| base += "\ncursor: pointer;"; | ||
| } | ||
| return base; | ||
| }; | ||
| function _templateObject() { | ||
@@ -1357,8 +1400,7 @@ var data = _taggedTemplateLiteral(["\n margin: 0;\n padding: 0;\n ", "\n position: relative;\n cursor: pointer;\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: auto;\n min-height: auto;\n content: '';\n }\n"]); | ||
| danger: dangerButtonTokens, | ||
| disabled: disabledButtonTokens // TODO: Is there a better way to handle css properties without | ||
| // bloating with ${props => props.base.focus.color} etc... | ||
| // Using simple template string for now, but missing css syntax highlight :( | ||
| disabled: disabledButtonTokens | ||
| }; // TODO: Is there a better way to handle css properties without | ||
| // bloating with ${props => props.base.focus.color} etc... | ||
| // Using simple template string for now, but missing css syntax highlight :( | ||
| }; | ||
| var Base = function Base(_ref) { | ||
@@ -1377,3 +1419,3 @@ var base = _ref.base, | ||
| focus = base.focus; | ||
| return "\n height: ".concat(base.height, ";\n background: ").concat(base.background, ";\n color: ").concat(base.color, ";\n\n border-radius: ").concat(border.radius, ";\n border-color: ").concat(border.color, ";\n border-width: ").concat(border.width, ";\n\n padding-left: ").concat(spacing.left, ";\n padding-right: ").concat(spacing.right, ";\n\n font-family: ").concat(typography.fontFamily, ";\n font-size: ").concat(typography.fontSize, ";\n font-weight: ").concat(typography.fontWeight, ";\n line-height: ").concat(typography.lineHeight, ";\n letter-spacing: ").concat(typography.letterSpacing, ";\n text-align: ").concat(typography.textAlign, ";\n\n &::after {\n position: absolute;\n top:-").concat(base.clickboundOffset, ";\n left:0;\n width: 100%;\n height: ").concat(base.clickbound, ";\n content: '';\n }\n\n &:hover {\n background: ").concat(base.hoverBackground, ";\n }\n\n &:focus {\n outline-offset: ").concat(focus.width, ";\n outline: ").concat(focus.width, " ").concat(focus.type, " ").concat(focus.color, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n background: ").concat(disabled.background, ";\n color: ").concat(disabled.color, ";\n\n border-color: ").concat(disabled.border.color, ";\n\n &:hover {\n background: ").concat(disabled.background, ";\n }\n }\n"); | ||
| return "\n height: ".concat(base.height, ";\n background: ").concat(base.background, ";\n color: ").concat(base.color, ";\n\n border-radius: ").concat(border.radius, ";\n border-color: ").concat(border.color, ";\n border-width: ").concat(border.width, ";\n\n padding-left: ").concat(spacing.left, ";\n padding-right: ").concat(spacing.right, ";\n\n ").concat(typographyTemplate(typography), "\n\n &::after {\n position: absolute;\n top:-").concat(base.clickboundOffset, ";\n left:0;\n width: 100%;\n height: ").concat(base.clickbound, ";\n content: '';\n }\n\n &:hover {\n background: ").concat(base.hoverBackground, ";\n }\n\n &:focus {\n outline-offset: ").concat(focus.width, ";\n outline: ").concat(focus.width, " ").concat(focus.type, " ").concat(focus.color, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n background: ").concat(disabled.background, ";\n color: ").concat(disabled.color, ";\n\n border-color: ").concat(disabled.border.color, ";\n\n &:hover {\n background: ").concat(disabled.background, ";\n }\n }\n"); | ||
| }; | ||
@@ -1403,3 +1445,3 @@ | ||
| var baseDisabled = colors.disabled[variant] || {}; | ||
| return React.createElement(ButtonBase, _extends({ | ||
| return React__default.createElement(ButtonBase, _extends({ | ||
| base: base, | ||
@@ -1411,3 +1453,2 @@ baseDisabled: baseDisabled, | ||
| }; | ||
| Button.propTypes = { | ||
@@ -1441,6 +1482,960 @@ /** @ignore */ | ||
| function _templateObject$1() { | ||
| var data = _taggedTemplateLiteral(["\n ", "\n"]); | ||
| _templateObject$1 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var _tokens$typography = edsTokens.tokens.typography, | ||
| heading = _tokens$typography.heading, | ||
| paragraph = _tokens$typography.paragraph; | ||
| var variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'overline', 'ingress', 'caption', 'meta', 'body_short', 'body_long']; | ||
| var variantToken = _objectSpread2({}, heading, {}, paragraph); | ||
| var getElementType = function getElementType(variant, link) { | ||
| if (link) { | ||
| return 'a'; | ||
| } | ||
| switch (variant) { | ||
| case 'h1': | ||
| case 'h2': | ||
| case 'h3': | ||
| case 'h4': | ||
| case 'h5': | ||
| case 'h6': | ||
| return variant; | ||
| case 'caption': | ||
| case 'overline': | ||
| case 'ingress': | ||
| case 'meta': | ||
| case 'body_short': | ||
| case 'body_long': | ||
| default: | ||
| return 'p'; | ||
| } | ||
| }; | ||
| var toComplexVariantName = function toComplexVariantName(variant) { | ||
| var bold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var italic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| var link = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; | ||
| return "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : ''); | ||
| }; | ||
| var Base$1 = function Base(_ref) { | ||
| var typography = _ref.typography, | ||
| link = _ref.link; | ||
| var base = "\n margin: 0;\n\n ".concat(typographyTemplate(typography, link), "\n "); | ||
| return base; | ||
| }; | ||
| var TypographyBase = styled.p(_templateObject$1(), Base$1); | ||
| var Typography = function Typography(_ref2) { | ||
| var variant = _ref2.variant, | ||
| children = _ref2.children, | ||
| bold = _ref2.bold, | ||
| italic = _ref2.italic, | ||
| link = _ref2.link, | ||
| other = _objectWithoutProperties(_ref2, ["variant", "children", "bold", "italic", "link"]); | ||
| var as = getElementType(variant, link); | ||
| var variantName = toComplexVariantName(variant, bold, italic, link); | ||
| var typography = variantToken[variantName]; | ||
| if (typeof typography === 'undefined') { | ||
| console.warn("Typography variant not found for \"".concat(variantName, "\". Trying to use ").concat(variant)); | ||
| typography = variantToken[variant]; | ||
| } | ||
| if (typeof typography === 'undefined') { | ||
| throw new Error("Typography variant not found for ".concat(variant, ". Please use of the following variants: ").concat(variants.toString())); | ||
| } | ||
| return React__default.createElement(TypographyBase, _extends({ | ||
| as: as, | ||
| typography: typography, | ||
| link: link | ||
| }, other), children); | ||
| }; | ||
| Typography.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired, | ||
| /** Specifies which variant to use */ | ||
| variant: PropTypes.oneOf(variants), | ||
| /** Specifies if text should be bold */ | ||
| bold: PropTypes.bool, | ||
| /** Specifies if text should be italic */ | ||
| italic: PropTypes.bool, | ||
| /** Specifies if text should be a link */ | ||
| link: PropTypes.bool | ||
| }; | ||
| Typography.defaultProps = { | ||
| variant: 'h1', | ||
| bold: false, | ||
| italic: false, | ||
| link: false, | ||
| className: '' | ||
| }; | ||
| Typography.displayName = 'eds-text'; | ||
| function _templateObject$2() { | ||
| var data = _taggedTemplateLiteral(["\n border-spacing: 0;\n border-collapse: collapse;\n"]); | ||
| _templateObject$2 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase = styled.table(_templateObject$2()); | ||
| var Table = function Table(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase, props, children); | ||
| }; | ||
| Table.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Table.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Table.displayName = 'eds-table'; | ||
| function _templateObject$3() { | ||
| var data = _taggedTemplateLiteral([""]); | ||
| _templateObject$3 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase$1 = styled.tbody(_templateObject$3()); | ||
| var Body = function Body(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase$1, props, children); | ||
| }; | ||
| Body.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Body.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Body.displayName = 'eds-table-body'; | ||
| var header = { | ||
| text: { | ||
| height: "48px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 500, | ||
| lineHeight: "1.714em" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(234, 234, 234, 1)", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| typography: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 500, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(247, 247, 247, 1)", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 500, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(220, 220, 220, 1)" | ||
| } | ||
| }, | ||
| icon: { | ||
| height: "48px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(234, 234, 234, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(220, 220, 220, 1)" | ||
| } | ||
| } | ||
| }; | ||
| var cell = { | ||
| monospaced_numeric: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| fontFeature: "'tnum' on, 'lnum' on", | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.429em" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| typography: { | ||
| fontFeature: "'tnum' on, 'lnum' on", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.429em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| typography: { | ||
| fontFeature: "'tnum' on, 'lnum' on", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.429em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| }, | ||
| icon: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| }, | ||
| placeholder: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| }, | ||
| input: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| radius: "", | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| radius: "", | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(61, 61, 61, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(247, 247, 247, 1)", | ||
| radius: 0, | ||
| width: 0 | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: "", | ||
| width: "2px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)", | ||
| field: { | ||
| height: "36px", | ||
| background: "rgba(247, 247, 247, 1)", | ||
| borders: { | ||
| outline: { | ||
| color: "rgba(86, 86, 86, 1)", | ||
| radius: "", | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "1.000rem", | ||
| fontWeight: 400, | ||
| letterSpacing: "0.025em", | ||
| lineHeight: "1.500em" | ||
| }, | ||
| colorPlaceholder: "rgba(111, 111, 111, 1)" | ||
| }, | ||
| spacings: { | ||
| right: "8px", | ||
| left: "8px" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| text: { | ||
| height: "48px", | ||
| background: "rgba(255, 255, 255, 1)", | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| }, | ||
| text: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| typography: { | ||
| color: "rgba(61, 61, 61, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.714em" | ||
| } | ||
| }, | ||
| spacings: { | ||
| left: "16px", | ||
| right: "16px" | ||
| }, | ||
| clickbound: { | ||
| height: "48px", | ||
| offset: "0px" | ||
| }, | ||
| active: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| typography: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(0, 112, 121, 1)", | ||
| radius: 0, | ||
| width: "2px" | ||
| } | ||
| } | ||
| }, | ||
| disabled: { | ||
| background: "rgba(255, 255, 255, 1)", | ||
| color: "rgba(111, 111, 111, 1)", | ||
| typography: { | ||
| color: "rgba(111, 111, 111, 1)", | ||
| fontFamily: "Equinor", | ||
| fontSize: "0.875rem", | ||
| fontWeight: 400, | ||
| lineHeight: "1.714em" | ||
| }, | ||
| borders: { | ||
| bottom: { | ||
| color: "rgba(220, 220, 220, 1)", | ||
| radius: 0, | ||
| width: "1px" | ||
| } | ||
| } | ||
| }, | ||
| focus: { | ||
| type: "dashed", | ||
| color: "rgba(0, 112, 121, 1)", | ||
| width: "2px", | ||
| gap: "8px" | ||
| }, | ||
| hover: { | ||
| background: "rgba(230, 250, 236, 1)" | ||
| } | ||
| } | ||
| }; | ||
| var tableTokens = { | ||
| header: header, | ||
| cell: cell | ||
| }; | ||
| function _templateObject$4() { | ||
| var data = _taggedTemplateLiteral(["\n ", "\n"]); | ||
| _templateObject$4 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var header$1 = tableTokens.header, | ||
| cell$1 = tableTokens.cell; | ||
| var variants$1 = { | ||
| header: { | ||
| text: header$1.text | ||
| }, | ||
| cell: { | ||
| text: cell$1.text, | ||
| numeric: cell$1.monospaced_numeric, | ||
| icon: cell$1.icon, | ||
| input: cell$1.input | ||
| } | ||
| }; | ||
| var getTokens = function getTokens(as, variant) { | ||
| switch (as) { | ||
| case 'th': | ||
| return variants$1.header[variant]; | ||
| case 'td': | ||
| default: | ||
| return variants$1.cell[variant]; | ||
| } | ||
| }; | ||
| var borderTemplate = function borderTemplate(borders) { | ||
| return Object.keys(borders).reduce(function (acc, val) { | ||
| var _borders$val = borders[val], | ||
| color = _borders$val.color, | ||
| width = _borders$val.width; | ||
| return "".concat(acc, " border-").concat(val, ": ").concat(width, " solid ").concat(color, "; \n"); | ||
| }, ''); | ||
| }; | ||
| var Base$2 = function Base(_ref) { | ||
| var tokens = _ref.tokens; | ||
| var background = tokens.background, | ||
| height = tokens.height, | ||
| text = tokens.text, | ||
| spacings = tokens.spacings, | ||
| borders = tokens.borders; | ||
| var typography = text.typography; | ||
| var base = "\n background: ".concat(background, ";\n min-height: ").concat(height, ";\n height: ").concat(height, ";\n\n padding-left: ").concat(spacings.left, ";\n padding-right: ").concat(spacings.right, ";\n\n ").concat(borderTemplate(borders), "\n ").concat(typographyTemplate(typography), "\n "); | ||
| return base; | ||
| }; | ||
| var TableBase$2 = styled.td(_templateObject$4(), Base$2); | ||
| var Cell = function Cell(props) { | ||
| var children = props.children, | ||
| as = props.as, | ||
| variant = props.variant; | ||
| var tokens = getTokens(as, variant); | ||
| return React__default.createElement(TableBase$2, _extends({ | ||
| as: as, | ||
| tokens: tokens | ||
| }, props), children); | ||
| }; | ||
| Cell.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired, | ||
| /** Specifies which td or th to use */ | ||
| as: PropTypes.oneOf(['td', 'th']), | ||
| /** Specifies the scope of th */ | ||
| // scope: PropTypes.oneOf(['col', 'row']), | ||
| /** Specifies which variant to use */ | ||
| variant: PropTypes.oneOf(['text', 'icon', 'numeric', 'input']) | ||
| }; | ||
| Cell.defaultProps = { | ||
| className: '', | ||
| // scope: '', | ||
| as: 'td', | ||
| variant: 'text' | ||
| }; | ||
| Cell.displayName = 'eds-table-cell'; | ||
| function _templateObject$5() { | ||
| var data = _taggedTemplateLiteral([""]); | ||
| _templateObject$5 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase$3 = styled.thead(_templateObject$5()); | ||
| var Head = function Head(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase$3, props, children); | ||
| }; | ||
| Head.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Head.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Head.displayName = 'eds-table-head'; | ||
| function _templateObject$6() { | ||
| var data = _taggedTemplateLiteral([""]); | ||
| _templateObject$6 = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var TableBase$4 = styled.tr(_templateObject$6()); | ||
| var Row = function Row(props) { | ||
| var children = props.children; | ||
| return React__default.createElement(TableBase$4, props, children); | ||
| }; | ||
| Row.propTypes = { | ||
| /** @ignore */ | ||
| className: PropTypes.string, | ||
| /** @ignore */ | ||
| children: PropTypes.node.isRequired | ||
| }; | ||
| Row.defaultProps = { | ||
| className: '' | ||
| }; | ||
| Row.displayName = 'eds-table-row'; | ||
| Table.Body = Body; | ||
| Table.Cell = Cell; | ||
| Table.Head = Head; | ||
| Table.Row = Row; | ||
| var _tokens$colors$ui = edsTokens.tokens.colors.ui, | ||
| lighter = _tokens$colors$ui.background__default.hex, | ||
| light = _tokens$colors$ui.background__light.hex, | ||
| medium = _tokens$colors$ui.background__medium.hex, | ||
| _tokens$spacings$comf = edsTokens.tokens.spacings.comfortable, | ||
| spacingSmall = _tokens$spacings$comf.small, | ||
| spacingMedium = _tokens$spacings$comf.medium; | ||
| var dividerHeight = 1; | ||
| var reduceByValue = function reduceByValue(subtractValue) { | ||
| return function (valueWithUnit) { | ||
| var valueAndUnit = valueWithUnit.split(/(\d+)/).filter(function (val) { | ||
| return val.length > 0; | ||
| }); | ||
| return valueAndUnit[0] - subtractValue + valueAndUnit[1]; | ||
| }; | ||
| }; | ||
| var reduceValueByDividerHeight = reduceByValue(dividerHeight); | ||
| var divider = { | ||
| height: "".concat(dividerHeight, "px"), | ||
| color: { | ||
| lighter: lighter, | ||
| light: light, | ||
| medium: medium | ||
| }, | ||
| small: { | ||
| spacings: { | ||
| top: spacingSmall, | ||
| bottom: reduceValueByDividerHeight(spacingSmall) | ||
| } | ||
| }, | ||
| medium: { | ||
| spacings: { | ||
| top: spacingMedium, | ||
| bottom: reduceValueByDividerHeight(spacingMedium) | ||
| } | ||
| } | ||
| }; | ||
| var StyledDivider = styled.hr(function (_ref) { | ||
| var backgroundColor = _ref.backgroundColor, | ||
| marginTop = _ref.marginTop, | ||
| marginBottom = _ref.marginBottom, | ||
| height = _ref.dividerHeight; | ||
| return { | ||
| backgroundColor: backgroundColor, | ||
| marginTop: marginTop, | ||
| marginBottom: marginBottom, | ||
| height: height, | ||
| border: 'none' | ||
| }; | ||
| }); | ||
| var Divider = React.forwardRef(function Divider(_ref2, ref) { | ||
| var color = _ref2.color, | ||
| variant = _ref2.variant, | ||
| className = _ref2.className; | ||
| var props = { | ||
| backgroundColor: divider.color[color], | ||
| marginTop: divider[variant].spacings.top, | ||
| marginBottom: divider[variant].spacings.bottom, | ||
| dividerHeight: divider.height | ||
| }; | ||
| return React__default.createElement(StyledDivider, _extends({}, props, { | ||
| className: className, | ||
| ref: ref | ||
| })); | ||
| }); | ||
| Divider.displayName = 'eds-divider'; | ||
| Divider.propTypes = { | ||
| // Valid colors | ||
| color: PropTypes.oneOf(['lighter', 'light', 'medium']), | ||
| // Vertical spacing | ||
| variant: PropTypes.oneOf(['small', 'medium']), | ||
| /** @ignore */ | ||
| className: PropTypes.string | ||
| }; | ||
| Divider.defaultProps = { | ||
| color: 'medium', | ||
| variant: 'medium', | ||
| className: '' | ||
| }; | ||
| exports.Button = Button; | ||
| exports.Divider = Divider; | ||
| exports.Table = Table; | ||
| exports.Typography = Typography; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| })); | ||
| }))); |
136
package.json
| { | ||
| "name": "@equinor/eds-core-react", | ||
| "version": "0.0.1-alpha.6", | ||
| "description": "The React implementation of the Equinor Design System", | ||
| "main": "dist/core-react.cjs.js", | ||
| "module": "dist/core-react.es.js", | ||
| "browser": "dist/core-react.umd.js", | ||
| "homepage": "https://github.com/equinor/design-system/tree/prerelease/libraries/core-react", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/equinor/design-system" | ||
| }, | ||
| "scripts": { | ||
| "lint": "eslint ./src/**/*.{jsx,js}", | ||
| "build": "rollup -c", | ||
| "dev": "rollup -c -w", | ||
| "test": "jest" | ||
| }, | ||
| "keywords": [ | ||
| "eds", | ||
| "design system", | ||
| "react", | ||
| "equinor" | ||
| ], | ||
| "license": "AGPL", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.4.4", | ||
| "@babel/core": "^7.4.4", | ||
| "@babel/preset-env": "^7.4.4", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "babel-plugin-styled-components": "^1.10.0", | ||
| "enzyme": "^3.9.0", | ||
| "enzyme-adapter-react-16": "^1.13.0", | ||
| "eslint": "^5.16.0", | ||
| "eslint-config-airbnb": "^17.1.0", | ||
| "eslint-config-prettier": "^4.3.0", | ||
| "eslint-plugin-import": "^2.17.3", | ||
| "eslint-plugin-jsx-a11y": "^6.2.1", | ||
| "eslint-plugin-prettier": "^3.1.0", | ||
| "eslint-plugin-react": "^7.13.0", | ||
| "jest": "^24.8.0", | ||
| "jest-environment-enzyme": "^7.0.2", | ||
| "jest-enzyme": "^7.0.2", | ||
| "prettier": "^1.17.1", | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "rollup": "^1.11.3", | ||
| "rollup-plugin-babel": "^4.3.2", | ||
| "rollup-plugin-commonjs": "^9.3.4", | ||
| "rollup-plugin-json": "^4.0.0", | ||
| "rollup-plugin-node-resolve": "^4.2.3", | ||
| "styled-components": "^4.2.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "styled-components": "^4.2.0", | ||
| "@equinor/eds-tokens": "^0.0.1-alpha.4" | ||
| }, | ||
| "jest": { | ||
| "verbose": true, | ||
| "setupFilesAfterEnv": [ | ||
| "jest-enzyme" | ||
| ], | ||
| "testEnvironment": "enzyme", | ||
| "testEnvironmentOptions": { | ||
| "enzymeAdapter": "react16" | ||
| } | ||
| }, | ||
| "dependencies": { | ||
| "@equinor/eds-tokens": "^0.0.1-alpha.4" | ||
| } | ||
| "name": "@equinor/eds-core-react", | ||
| "version": "0.0.1-alpha.7", | ||
| "engines": { | ||
| "pnpm": ">=4" | ||
| }, | ||
| "description": "The React implementation of the Equinor Design System", | ||
| "main": "dist/core-react.cjs.js", | ||
| "module": "dist/core-react.es.js", | ||
| "browser": "dist/core-react.umd.js", | ||
| "homepage": "https://github.com/equinor/design-system/tree/prerelease/libraries/core-react", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/equinor/design-system" | ||
| }, | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "dev": "rollup -c -w", | ||
| "test": "jest", | ||
| "test:watch": "jest --watch" | ||
| }, | ||
| "keywords": [ | ||
| "eds", | ||
| "design system", | ||
| "react", | ||
| "equinor" | ||
| ], | ||
| "license": "AGPL", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.7.5", | ||
| "@babel/core": "^7.7.5", | ||
| "@babel/preset-env": "^7.7.6", | ||
| "@babel/preset-react": "^7.7.4", | ||
| "@testing-library/jest-dom": "^4.2.4", | ||
| "@testing-library/react": "^9.3.3", | ||
| "babel-plugin-styled-components": "^1.10.6", | ||
| "jest": "^24.9.0", | ||
| "jest-styled-components": "^6.3.4", | ||
| "prettier": "^1.19.1", | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0", | ||
| "rollup": "^1.27.11", | ||
| "rollup-plugin-babel": "^4.3.3", | ||
| "rollup-plugin-commonjs": "^9.3.4", | ||
| "rollup-plugin-json": "^4.0.0", | ||
| "rollup-plugin-node-resolve": "^4.2.4", | ||
| "styled-components": "^4.4.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "styled-components": "^4.2.0" | ||
| }, | ||
| "jest": { | ||
| "verbose": true, | ||
| "setupFilesAfterEnv": [ | ||
| "./rtl.setup.js" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "@equinor/eds-tokens": "^0.0.1-alpha.4" | ||
| } | ||
| } |
@@ -1,24 +0,22 @@ | ||
| module.exports = { | ||
| hooks: { | ||
| readPackage, | ||
| }, | ||
| } | ||
| function readPackage(pkg, context) { | ||
| const additionalDependencies = {} | ||
| function readPackage(pkg, context) { | ||
| if (pkg.name === 'enzyme-adapter-react-16') { | ||
| pkg.dependencies = { | ||
| ...pkg.dependencies, | ||
| has: '^1.0.3', | ||
| } | ||
| additionalDependencies.has = '^1.0.3' | ||
| context.log('Added missing dependencies for enzyme-adapter-react-16') | ||
| } | ||
| if (pkg.name === 'eslint') { | ||
| pkg.dependencies = { | ||
| return { | ||
| ...pkg, | ||
| dependencies: { | ||
| ...pkg.dependencies, | ||
| 'eslint-import-resolver-node': '0.3.2', | ||
| } | ||
| context.log('Added missing dependencies for eslint-plugin-import') | ||
| ...additionalDependencies, | ||
| }, | ||
| } | ||
| } | ||
| return pkg | ||
| module.exports = { | ||
| hooks: { | ||
| readPackage, | ||
| }, | ||
| } |
@@ -5,2 +5,8 @@ # @equinor/eds-core-react | ||
| ## Components | ||
| - Button | ||
| - Divider | ||
| - Table | ||
| - Typography | ||
| ## Installation | ||
@@ -18,9 +24,9 @@ | ||
| import { render } from 'react-dom' | ||
| import { Button } from '@equinor/eds-core-react' | ||
| import { Button, Typography } from '@equinor/eds-core-react' | ||
| const App = () => ( | ||
| <> | ||
| <h1>Buttons</h1> | ||
| <Typography variant="h1" bold>Buttons</Typography> | ||
| <h2>Contained (default)</h2> | ||
| <Typography variant="h2">Contained (default)</Typography> | ||
@@ -32,3 +38,3 @@ <Button>Primary</Button> | ||
| <h2>Outlined</h2> | ||
| <Typography variant="h2">Outlined</Typography> | ||
@@ -40,3 +46,3 @@ <Button variant="outlined">Primary</Button> | ||
| <h2>Ghost</h2> | ||
| <Typography variant="h2">Ghost</Typography> | ||
@@ -43,0 +49,0 @@ <Button variant="ghost">Primary</Button> |
@@ -0,1 +1,2 @@ | ||
| /* eslint-disable import/no-default-export */ | ||
| import resolve from 'rollup-plugin-node-resolve' | ||
@@ -2,0 +3,0 @@ import commonjs from 'rollup-plugin-commonjs' |
@@ -8,2 +8,3 @@ import React from 'react' | ||
| import disabledButtonTokens from '@equinor/eds-tokens/components/button/buttons-disabled.json' | ||
| import { typographyTemplate } from '../_common/templates' | ||
@@ -40,8 +41,3 @@ const colors = { | ||
| font-family: ${typography.fontFamily}; | ||
| font-size: ${typography.fontSize}; | ||
| font-weight: ${typography.fontWeight}; | ||
| line-height: ${typography.lineHeight}; | ||
| letter-spacing: ${typography.letterSpacing}; | ||
| text-align: ${typography.textAlign}; | ||
| ${typographyTemplate(typography)} | ||
@@ -105,3 +101,3 @@ &::after { | ||
| const Button = ({ | ||
| export const Button = ({ | ||
| variant, | ||
@@ -156,3 +152,1 @@ children, | ||
| Button.displayName = 'eds-button' | ||
| export default Button |
@@ -1,1 +0,1 @@ | ||
| export { default } from './Button' | ||
| export { Button } from './Button' |
| /* eslint-disable import/prefer-default-export */ | ||
| export { default as Button } from './Button' | ||
| export { Button } from './Button' | ||
| export { Typography } from './Typography' | ||
| export { Table } from './Table' | ||
| export { Divider } from './Divider' | ||
| /* eslint-enable */ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by24.94%
367352
- Dependency count
- decreased by-16.67%
5
- Dev dependency count
- decreased by-29.63%
19
- Number of package files
- increased by64.71%
28
- Lines of code
- increased by77%
7602
- Number of lines in readme file
- increased by12.5%
54
No dependency changes