+ {spacingTypeValues['baseSpacing'].map((val, idx) => (
+
+ {idx > 0 && Punctuation(' | ')}
+ '{val}'
+
+ ))}
+
+ )
+ },
+ 'negativeSpacing': {
+ description: 'Negative spacing values in pixels, following a 4px grid. Will be converted to rem.',
+ body: (
+
+ {spacingTypeValues['negativeSpacing'].map((val, idx) => (
+
+ {idx > 0 && Punctuation(' | ')}
+ '{val}'
+
+ ))}
+
+ )
+ },
+ 'text-to-control': {
+ description: 'Default spacing between text and a control (e.g., label and input). Scales with font size.'
+ },
+ 'text-to-visual': {
+ description: 'Default spacing between text and a visual element (e.g., icon). Scales with font size.'
+ },
+ 'edge-to-text': {
+ description: 'Default spacing between the edge of a control and its text. Relative to control height.'
+ },
+ 'pill': {
+ description: 'Default spacing between the edge of a pill-shaped control and its text. Relative to control height.'
+ },
+ 'baseColors': {
+ description: <>baseColors consists of the following values below:,
+ body: (
+ <>
+ '50%', '100vw', '50vh'
+ },
+ 'number': {
+ description: <>A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
+ }
+};
+
+interface StyleMacroPropertyDefinition {
+ values: string[],
+ additionalTypes?: string[],
+ links?: {[value: string]: {href: string, isRelative?: boolean}},
+ description?: string,
+ mapping?: string[]
+}
+
+interface StyleMacroPropertiesProps {
+ properties: {[propertyName: string]: StyleMacroPropertyDefinition}
+}
+
+export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
+ let propertyNames = Object.keys(properties);
+
+ return (
+
+ {propertyName}
+
+
+ {values.map((value, i) => {
+ let content;
+ if (links[value]) {
+ content = (
+
+ {value}
+
+ );
+ } else if (value === 'baseColors') {
+ content = {value};
+ } else {
+ content = '{value}';
+ }
+
+ return (
+
+ {i > 0 && Punctuation(' | ')}
+ {content}
+
+ );
+ })}
+ {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */}
+ {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => {
+ return (
+
+ {(values.length > 0 || i > 0) && Punctuation(' | ')}
+ {typeName}
+
+ );
+ })}
+
+
+ '{value}'
+
+ + {valueDesc.description} +
+ )} + {valueDesc.body} ++ {styleMacroValueDesc['baseColors'].description} +
+ )} + {styleMacroValueDesc['baseColors'].body} +
+ {typeName}
+
+ + {typeLink.description} +
+ )} + {typeLink.body} +
+ {propDef.mapping.map((mappedProp, i) => (
+
+ {i > 0 && Punctuation(', ')}
+ {mappedProp}
+
+ ))}
+
+ {Type({type: type.value})};
case 'array':
- return Extends:
Extends: {JoinList({elements: type.extends, joiner: ', '})}
{Type({type})}
}
);
@@ -559,7 +558,7 @@ export function InterfaceType({properties: props, showRequired, showDefault, isC
{!hideType &&
-
{prop.name}
-
-
- {': '}
-
- {spacingTypeValues['baseSpacing'].map((val, idx) => (
-
- {idx > 0 && {' | '} }
- '{val}'
-
- ))}
-
- )
- },
- 'negativeSpacing': {
- description: 'Negative spacing values in pixels, following a 4px grid. Will be converted to rem.',
- body: (
-
- {spacingTypeValues['negativeSpacing'].map((val, idx) => (
-
- {idx > 0 && {' | '} }
- '{val}'
-
- ))}
-
- )
- },
- 'text-to-control': {
- description: 'Default spacing between text and a control (e.g., label and input). Scales with font size.'
- },
- 'text-to-visual': {
- description: 'Default spacing between text and a visual element (e.g., icon). Scales with font size.'
- },
- 'edge-to-text': {
- description: 'Default spacing between the edge of a control and its text. Relative to control height.'
- },
- 'pill': {
- description: 'Default spacing between the edge of a pill-shaped control and its text. Relative to control height.'
- },
- 'baseColors': {
- description: <>baseColors consists of the following values below:,
- body: (
- <>
- '50%', '100vw', '50vh'
- },
- 'number': {
- description: <>A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
- }
-};
-
-interface StyleMacroPropertyDefinition {
- values: string[],
- additionalTypes?: string[],
- links?: {[value: string]: {href: string, isRelative?: boolean}},
- description?: string,
- mapping?: string[]
-}
-
-interface StyleMacroPropertiesProps {
- properties: {[propertyName: string]: StyleMacroPropertyDefinition}
-}
-
-export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
- let propertyNames = Object.keys(properties);
-
- return (
-
- {propertyName}
-
-
- {values.map((value, i) => {
- let content;
- if (links[value]) {
- content = (
-
- {value}
-
- );
- } else if (value === 'baseColors') {
- content = {value};
- } else {
- content = '{value}';
- }
-
- return (
-
- {i > 0 && {' | '} }
- {content}
-
- );
- })}
- {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */}
- {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => {
- return (
-
- {(values.length > 0 || i > 0) && {' | '} }
- {typeName}
-
- );
- })}
-
-
- '{value}'
-
- - {valueDesc.description} -
- )} - {valueDesc.body} -- {styleMacroValueDesc['baseColors'].description} -
- )} - {styleMacroValueDesc['baseColors'].body} -
- {typeName}
-
- - {typeLink.description} -
- )} - {typeLink.body} -
- {propDef.mapping.map((mappedProp, i) => (
-
- {i > 0 && {', '} }
- {mappedProp}
-
- ))}
-
-