@khanacademy/wonder-blocks-breadcrumbs
Advanced tools
Comparing version 1.0.29 to 1.0.30
# @khanacademy/wonder-blocks-breadcrumbs | ||
## 1.0.30 | ||
### Patch Changes | ||
- @khanacademy/wonder-blocks-core@4.3.1 | ||
- @khanacademy/wonder-blocks-typography@1.1.31 | ||
## 1.0.29 | ||
@@ -4,0 +11,0 @@ |
@@ -10,17 +10,3 @@ import _extends from '@babel/runtime/helpers/extends'; | ||
const StyledList = addStyle("ol"); | ||
/** | ||
* A breadcrumb trail consists of a list of links to the parent pages | ||
* of the current page in hierarchical order. It helps users find their | ||
* place within a website or web application. | ||
* Breadcrumbs are often placed horizontally before a page's main content. | ||
* | ||
* The Breadcrumbs component will have the following structure: | ||
* | ||
* 1. Breadcrumbs Item: Represents a section within the page. | ||
* 2. Separator: Adds a separator between each item. | ||
*/ | ||
class Breadcrumbs extends React.Component { | ||
// Moved it here, in case we need to override the label for a different | ||
// language | ||
render() { | ||
@@ -32,14 +18,12 @@ const _this$props = this.props, | ||
} = _this$props, | ||
otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1); // using React.Children allows to deal with opaque data structures | ||
// e.g. children = 'string' vs children = [] | ||
otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1); | ||
const lastChildIndex = React.Children.count(children) - 1; | ||
return /*#__PURE__*/React.createElement("nav", _extends({}, otherProps, { | ||
return React.createElement("nav", _extends({}, otherProps, { | ||
"data-test-id": testId | ||
}), /*#__PURE__*/React.createElement(StyledList, { | ||
}), React.createElement(StyledList, { | ||
style: styles$1.container | ||
}, React.Children.map(children, (item, index) => { | ||
const isLastChild = index === lastChildIndex; | ||
return /*#__PURE__*/React.cloneElement(item, _extends({}, item.props, { | ||
return React.cloneElement(item, _extends({}, item.props, { | ||
showSeparator: !isLastChild, | ||
@@ -68,13 +52,5 @@ ["aria-current"]: isLastChild ? "page" : undefined | ||
const StyledSvg = addStyle("svg"); | ||
/** | ||
* The BreadcrumbsItem represents an individual item in the breadcrumbs list. | ||
*/ | ||
class BreadcrumbsItem extends React.Component { | ||
/** | ||
* Renders a separator after the content | ||
* It draws a circular bullet point using an SVG circle shape | ||
*/ | ||
_renderSeparator() { | ||
return /*#__PURE__*/React.createElement(StyledSvg, { | ||
return React.createElement(StyledSvg, { | ||
style: styles.separator, | ||
@@ -85,3 +61,3 @@ width: 16, | ||
"aria-hidden": true | ||
}, /*#__PURE__*/React.createElement("circle", { | ||
}, React.createElement("circle", { | ||
cx: "8", | ||
@@ -102,3 +78,3 @@ cy: "9", | ||
return /*#__PURE__*/React.createElement(StyledListItem, _extends({}, otherProps, { | ||
return React.createElement(StyledListItem, _extends({}, otherProps, { | ||
style: styles.item, | ||
@@ -105,0 +81,0 @@ "data-test-id": testId |
{ | ||
"name": "@khanacademy/wonder-blocks-breadcrumbs", | ||
"version": "1.0.29", | ||
"version": "1.0.30", | ||
"design": "v1", | ||
@@ -20,5 +20,5 @@ "publishConfig": { | ||
"@khanacademy/wonder-blocks-color": "^1.1.20", | ||
"@khanacademy/wonder-blocks-core": "^4.3.0", | ||
"@khanacademy/wonder-blocks-core": "^4.3.1", | ||
"@khanacademy/wonder-blocks-spacing": "^3.0.5", | ||
"@khanacademy/wonder-blocks-typography": "^1.1.30" | ||
"@khanacademy/wonder-blocks-typography": "^1.1.31" | ||
}, | ||
@@ -30,4 +30,4 @@ "peerDependencies": { | ||
"devDependencies": { | ||
"wb-dev-build-settings": "^0.3.0" | ||
"wb-dev-build-settings": "^0.4.0" | ||
} | ||
} |
25931
527